@finos/legend-query-builder 0.4.3 → 0.5.0

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -28,7 +28,6 @@ import {
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
-  generateMilestonedPropertyParameterValue,
   generateValueSpecificationForParameter,
   getPropertyPath,
   type QueryBuilderDerivedPropertyExpressionState,
@@ -41,11 +40,6 @@ import {
   type QueryBuilderExplorerTreePropertyNodeData,
 } from '../stores/explorer/QueryBuilderExplorerState.js';
 import { QueryBuilderPropertyInfoTooltip } from './shared/QueryBuilderPropertyInfoTooltip.js';
-import { VariableExpressionViewer } from './QueryBuilderParametersPanel.js';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../stores/QueryBuilderParametersState.js';
 import {
   type ValueSpecification,
   type VariableExpression,
@@ -53,10 +47,27 @@ import {
   Enumeration,
   PrimitiveType,
   isSuperType,
+  AbstractPropertyExpression,
+  INTERNAL__PropagatedValue,
+  getMilestoneTemporalStereotype,
 } from '@finos/legend-graph';
-import { guaranteeNonNullable } from '@finos/legend-shared';
-import { BasicValueSpecificationEditor } from './shared/BasicValueSpecificationEditor.js';
+import { guaranteeNonNullable, guaranteeType } from '@finos/legend-shared';
+import {
+  type QueryBuilderVariableDragSource,
+  BasicValueSpecificationEditor,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from './shared/BasicValueSpecificationEditor.js';
 import { functionExpression_setParameterValue } from '../stores/shared/ValueSpecificationModifierHelper.js';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+} from '@finos/legend-application';
+import { VariableSelector } from './shared/QueryBuilderVariableSelector.js';
+import {
+  generateMilestonedPropertyParameterValue,
+  isDefaultDatePropagationSupported,
+  matchMilestoningParameterValue,
+} from '../stores/milestoning/QueryBuilderMilestoningHelper.js';
 
 const DerivedPropertyParameterValueEditor = observer(
   (props: {
@@ -71,10 +82,10 @@ const DerivedPropertyParameterValueEditor = observer(
       derivedPropertyExpressionState.parameters[idx]?.genericType,
     ).value.rawType;
     const handleDrop = useCallback(
-      (item: QueryBuilderParameterDragSource): void => {
+      (item: QueryBuilderVariableDragSource): void => {
         functionExpression_setParameterValue(
           derivedPropertyExpressionState.propertyExpression,
-          item.variable.parameter,
+          item.variable,
           idx + 1,
           derivedPropertyExpressionState.queryBuilderState.observableContext,
         );
@@ -82,14 +93,14 @@ const DerivedPropertyParameterValueEditor = observer(
       [derivedPropertyExpressionState, idx],
     );
     const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
-      QueryBuilderParameterDragSource,
+      QueryBuilderVariableDragSource,
       void,
       { isParameterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
         drop: (item, monitor): void => {
-          const itemType = item.variable.parameter.genericType?.value.rawType;
+          const itemType = item.variable.genericType?.value.rawType;
           if (
             !monitor.didDrop() &&
             // Doing a type check, which only allows dragging and dropping parameters of the same type or of child types
@@ -108,6 +119,76 @@ const DerivedPropertyParameterValueEditor = observer(
       }),
       [handleDrop],
     );
+    const queryBuilderState = derivedPropertyExpressionState.queryBuilderState;
+    // Resets the next property expression in the property chain for milestoned properties when the user changes
+    // the milestoned dates of current property expression and it propagates those dates to next property expression.
+    const resetNextExpression = (
+      nextExpression: AbstractPropertyExpression,
+    ): void => {
+      const milestoningStereotype = getMilestoneTemporalStereotype(
+        guaranteeType(
+          nextExpression.func.value.genericType.value.rawType,
+          Class,
+        ),
+        queryBuilderState.graphManagerState.graph,
+      );
+      nextExpression.parametersValues.slice(1).forEach((parameter, index) => {
+        if (
+          milestoningStereotype &&
+          parameter instanceof INTERNAL__PropagatedValue &&
+          !matchMilestoningParameterValue(
+            milestoningStereotype,
+            index,
+            parameter.getValue(),
+            queryBuilderState.milestoningState,
+          )
+        ) {
+          const newParameterValue = new INTERNAL__PropagatedValue(() =>
+            guaranteeNonNullable(
+              queryBuilderState.milestoningState
+                .getMilestoningImplementation(milestoningStereotype)
+                .getMilestoningDate(index),
+            ),
+          );
+          newParameterValue.isPropagatedValue = false;
+          functionExpression_setParameterValue(
+            guaranteeType(nextExpression, AbstractPropertyExpression),
+            guaranteeNonNullable(newParameterValue),
+            index + 1,
+            queryBuilderState.observableContext,
+          );
+        }
+      });
+    };
+    const checkDatePropagation = (
+      nextExpression: ValueSpecification | undefined,
+    ): void => {
+      if (
+        nextExpression instanceof AbstractPropertyExpression &&
+        isDefaultDatePropagationSupported(nextExpression, queryBuilderState) &&
+        nextExpression.func.value.genericType.value.rawType instanceof Class
+      ) {
+        queryBuilderState.applicationStore.setActionAlertInfo({
+          message:
+            'You have just changed a milestoning date in the property expression chain, this date will be propagated down the rest of the chain. Do you want to proceed? Otherwise, you can choose to propagate the default milestoning dates instead.',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Proceed',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              default: true,
+            },
+            {
+              label: 'Propagate default milestoning date(s)',
+              type: ActionAlertActionType.PROCEED,
+              handler: queryBuilderState.applicationStore.guardUnhandledError(
+                async () => resetNextExpression(nextExpression),
+              ),
+            },
+          ],
+        });
+      }
+    };
     const resetParameterValue = (): void => {
       functionExpression_setParameterValue(
         derivedPropertyExpressionState.propertyExpression,
@@ -123,7 +204,23 @@ const DerivedPropertyParameterValueEditor = observer(
         idx + 1,
         derivedPropertyExpressionState.queryBuilderState.observableContext,
       );
+      const derivedPropertyExpressionStates =
+        derivedPropertyExpressionState.propertyExpressionState
+          .derivedPropertyExpressionStates;
+      const currentDerivedPropertyStateindex =
+        derivedPropertyExpressionStates.indexOf(derivedPropertyExpressionState);
+      checkDatePropagation(
+        currentDerivedPropertyStateindex + 1 <
+          derivedPropertyExpressionStates.length
+          ? derivedPropertyExpressionStates[
+              currentDerivedPropertyStateindex + 1
+            ]?.propertyExpression
+          : undefined,
+      );
     };
+    const valueSpec = guaranteeNonNullable(
+      derivedPropertyExpressionState.parameterValues[idx],
+    );
 
     return (
       <div key={variable.name} className="panel__content__form__section">
@@ -133,15 +230,13 @@ const DerivedPropertyParameterValueEditor = observer(
         <div className="panel__content__form__section__header__prompt">{`${
           variable.multiplicity.lowerBound === 0 ? 'optional' : ''
         }`}</div>
-        <div className="query-builder__parameter-editor">
+        <div className="query-builder__variable-editor">
           <PanelDropZone
             isDragOver={isParameterValueDragOver}
             dropTargetConnector={dropTargetConnector}
           >
             <BasicValueSpecificationEditor
-              valueSpecification={guaranteeNonNullable(
-                derivedPropertyExpressionState.parameterValues[idx],
-              )}
+              valueSpecification={valueSpec}
               setValueSpecification={(val: ValueSpecification): void => {
                 functionExpression_setParameterValue(
                   derivedPropertyExpressionState.propertyExpression,
@@ -161,6 +256,9 @@ const DerivedPropertyParameterValueEditor = observer(
                 match: parameterType === PrimitiveType.DATETIME,
               }}
               resetValue={resetParameterValue}
+              isConstant={queryBuilderState.constantState.isValueSpecConstant(
+                valueSpec,
+              )}
             />
           </PanelDropZone>
         </div>
@@ -233,25 +331,10 @@ export const QueryBuilderPropertyExpressionEditor = observer(
                 />
               ),
             )}
-            <ModalBody className="query-builder__parameters__modal__body">
-              <div className="panel__content__form__section__header__label">
-                List of available parameters
-              </div>
-              <div className="panel__content__form__section__list__items">
-                {propertyExpressionState.queryBuilderState.parametersState.parameterStates.map(
-                  (parameter) => (
-                    <VariableExpressionViewer
-                      key={parameter.uuid}
-                      queryBuilderState={
-                        propertyExpressionState.queryBuilderState
-                      }
-                      variableExpressionState={parameter}
-                      isReadOnly={true}
-                      hideActions={true}
-                    />
-                  ),
-                )}
-              </div>
+            <ModalBody className="query-builder__variables__modal__body">
+              <VariableSelector
+                queryBuilderState={propertyExpressionState.queryBuilderState}
+              />
             </ModalBody>
           </ModalBody>
           <ModalFooter>

package/src/components/QueryBuilderSideBar.tsx

@@ -33,7 +33,6 @@ import {
   type Runtime,
   type ValueSpecification,
   LATEST_DATE,
-  MILESTONING_STEREOTYPE,
   PrimitiveInstanceValue,
   VariableExpression,
   getMilestoneTemporalStereotype,
@@ -51,7 +50,7 @@ import {
 } from '@finos/legend-application';
 import { MilestoningParametersEditor } from './explorer/QueryBuilderMilestoningEditor.js';
 
-const getParameterValue = (
+export const getParameterValue = (
   parameter: ValueSpecification | undefined,
 ): string | undefined => {
   if (parameter instanceof VariableExpression) {
@@ -87,26 +86,10 @@ const generateClassLabel = (
   );
 
   let milestoningTooltipText: string | undefined;
-  switch (milestoneStereotype) {
-    case MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL:
-      milestoningTooltipText = `Business Date: ${getParameterValue(
-        queryBuilderState.milestoningState.businessDate,
-      )}`;
-      break;
-    case MILESTONING_STEREOTYPE.PROCESSING_TEMPORAL:
-      milestoningTooltipText = `Processing Date: ${getParameterValue(
-        queryBuilderState.milestoningState.processingDate,
-      )}`;
-      break;
-    case MILESTONING_STEREOTYPE.BITEMPORAL:
-      milestoningTooltipText = `Processing Date: ${getParameterValue(
-        queryBuilderState.milestoningState.processingDate,
-      )}, Business Date: ${getParameterValue(
-        queryBuilderState.milestoningState.businessDate,
-      )}`;
-      break;
-    default:
-      milestoningTooltipText = undefined;
+  if (milestoneStereotype) {
+    milestoningTooltipText = queryBuilderState.milestoningState
+      .getMilestoningImplementation(milestoneStereotype)
+      .getMilestoningToolTipText();
   }
 
   return (

package/src/components/explorer/QueryBuilderMilestoningEditor.tsx

@@ -16,13 +16,10 @@
 
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryBuilderParametersState.js';
 import { useCallback } from 'react';
 import {
   type ValueSpecification,
+  type VariableExpression,
   GenericType,
   GenericTypeExplicitReference,
   MILESTONING_STEREOTYPE,
@@ -33,7 +30,6 @@ import {
 } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useDrop } from 'react-dnd';
-import { VariableExpressionViewer } from '../QueryBuilderParametersPanel.js';
 import {
   Dialog,
   Modal,
@@ -44,8 +40,13 @@ import {
   PanelFormSection,
 } from '@finos/legend-art';
 import { generateDefaultValueForPrimitiveType } from '../../stores/QueryBuilderValueSpecificationHelper.js';
-import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
+import {
+  BasicValueSpecificationEditor,
+  type QueryBuilderVariableDragSource,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from '../shared/BasicValueSpecificationEditor.js';
 import { instanceValue_setValues } from '../../stores/shared/ValueSpecificationModifierHelper.js';
+import { VariableSelector } from '../shared/QueryBuilderVariableSelector.js';
 
 const MilestoningParameterEditor = observer(
   (props: {
@@ -54,26 +55,22 @@ const MilestoningParameterEditor = observer(
   }) => {
     const { queryBuilderState, stereotype } = props;
     const handleDrop = useCallback(
-      (item: QueryBuilderParameterDragSource): void => {
+      (item: QueryBuilderVariableDragSource): void => {
         if (stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL) {
-          queryBuilderState.milestoningState.setBusinessDate(
-            item.variable.parameter,
-          );
+          queryBuilderState.milestoningState.setBusinessDate(item.variable);
         } else {
-          queryBuilderState.milestoningState.setProcessingDate(
-            item.variable.parameter,
-          );
+          queryBuilderState.milestoningState.setProcessingDate(item.variable);
         }
       },
       [queryBuilderState, stereotype],
     );
     const [{ isMilestoningParameterValueDragOver }, dropConnector] = useDrop<
-      QueryBuilderParameterDragSource,
+      QueryBuilderVariableDragSource,
       void,
       { isMilestoningParameterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
@@ -119,7 +116,7 @@ const MilestoningParameterEditor = observer(
     };
 
     return (
-      <div ref={dropConnector} className="query-builder__parameter-editor">
+      <div ref={dropConnector} className="query-builder__variable-editor">
         <PanelEntryDropZonePlaceholder
           showPlaceholder={isMilestoningParameterValueDragOver}
           label="Change Milestoning Parameter Value"
@@ -138,6 +135,9 @@ const MilestoningParameterEditor = observer(
               expectedType: PrimitiveType.DATE,
             }}
             resetValue={resetMilestoningParameter}
+            isConstant={queryBuilderState.constantState.isValueSpecConstant(
+              milestoningParameter,
+            )}
           />
         </PanelEntryDropZonePlaceholder>
       </div>
@@ -243,6 +243,13 @@ export const MilestoningParametersEditor = observer(
     const { queryBuilderState } = props;
     const milestoningState = queryBuilderState.milestoningState;
     const close = (): void => milestoningState.setShowMilestoningEditor(false);
+    const isCompatibleMilestoningParameter = (
+      variable: VariableExpression,
+    ): boolean =>
+      variable.genericType?.value.rawType.name === PRIMITIVE_TYPE.STRICTDATE ||
+      variable.genericType?.value.rawType.name === PRIMITIVE_TYPE.LATESTDATE ||
+      variable.genericType?.value.rawType.name === PRIMITIVE_TYPE.DATE ||
+      variable.genericType?.value.rawType.name === PRIMITIVE_TYPE.DATETIME;
 
     return (
       <Dialog
@@ -256,36 +263,19 @@ export const MilestoningParametersEditor = observer(
       >
         <Modal
           darkMode={true}
-          className="editor-modal query-builder__parameters__modal"
+          className="editor-modal query-builder__variables__modal"
         >
           <ModalHeader title="Milestoning Parameters" />
-          <ModalBody className="query-builder__parameters__modal__body">
+          <ModalBody className="query-builder__variables__modal__body">
             <TemporalMilestoningEditor queryBuilderState={queryBuilderState} />
             <div className="panel__content__form__section__header__label">
               List of compatible milestoning parameters
             </div>
             <div className="panel__content__form__section__list__items">
-              {queryBuilderState.parametersState.parameterStates
-                .filter(
-                  (parameter) =>
-                    parameter.parameter.genericType?.value.rawType.name ===
-                      PRIMITIVE_TYPE.STRICTDATE ||
-                    parameter.parameter.genericType?.value.rawType.name ===
-                      PRIMITIVE_TYPE.LATESTDATE ||
-                    parameter.parameter.genericType?.value.rawType.name ===
-                      PRIMITIVE_TYPE.DATE ||
-                    parameter.parameter.genericType?.value.rawType.name ===
-                      PRIMITIVE_TYPE.DATETIME,
-                )
-                .map((parameter) => (
-                  <VariableExpressionViewer
-                    key={parameter.uuid}
-                    queryBuilderState={queryBuilderState}
-                    variableExpressionState={parameter}
-                    isReadOnly={true}
-                    hideActions={true}
-                  />
-                ))}
+              <VariableSelector
+                queryBuilderState={queryBuilderState}
+                filterBy={isCompatibleMilestoningParameter}
+              />
             </div>
           </ModalBody>
           <ModalFooter>

package/src/components/fetch-structure/{QueryBuilderOLAPGroupByPanel_.tsx → QueryBuilderOLAPGroupByPanel.tsx}

@@ -56,7 +56,7 @@ import {
   QueryBuilderTDS_OLAPRankOperatorState,
   QueryBuilderTDS_OLAPAggreationOperatorState,
   QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
-} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOLAPGroupByState_.js';
+} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOLAPGroupByState.js';
 import { QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';

package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -79,15 +79,15 @@ import {
   QueryBuilderDerivationProjectionColumnState,
 } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryBuilderParametersState.js';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
 import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
-import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
+import {
+  type QueryBuilderVariableDragSource,
+  BasicValueSpecificationEditor,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from '../shared/BasicValueSpecificationEditor.js';
 import {
   QueryBuilderColumnInfoTooltip,
   renderPropertyTypeIcon,
@@ -95,7 +95,7 @@ import {
 import {
   type QueryBuilderOLAPColumnDragSource,
   QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
-} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOLAPGroupByState_.js';
+} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOLAPGroupByState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
@@ -280,9 +280,9 @@ const QueryBuilderPostFilterConditionEditor = observer(
     isDragOver: boolean;
   }) => {
     const { node, isDragOver } = props;
-    const graph =
-      node.condition.postFilterState.tdsState.queryBuilderState
-        .graphManagerState.graph;
+    const queryBuilderState =
+      node.condition.postFilterState.tdsState.queryBuilderState;
+    const graph = queryBuilderState.graphManagerState.graph;
     const applicationStore = useApplicationStore();
     const changeOperator = (val: QueryBuilderPostFilterOperator) => (): void =>
       node.condition.changeOperator(val);
@@ -299,15 +299,14 @@ const QueryBuilderPostFilterConditionEditor = observer(
     };
     // Drag and Drop on filter condition value
     const handleDrop = useCallback(
-      (item: QueryBuilderParameterDragSource): void => {
-        const parameterType =
-          item.variable.parameter.genericType?.value.rawType;
+      (item: QueryBuilderVariableDragSource): void => {
+        const parameterType = item.variable.genericType?.value.rawType;
         const conditionValueType = node.condition.columnState.getColumnType();
         if (
           conditionValueType &&
           isTypeCompatibleForAssignment(parameterType, conditionValueType)
         ) {
-          node.condition.setValue(item.variable.parameter);
+          node.condition.setValue(item.variable);
         } else {
           applicationStore.notifyWarning(
             `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType?.name}.`,
@@ -317,12 +316,12 @@ const QueryBuilderPostFilterConditionEditor = observer(
       [applicationStore, node.condition],
     );
     const [{ isFilterValueDragOver }, dropConnector] = useDrop<
-      QueryBuilderParameterDragSource,
+      QueryBuilderVariableDragSource,
       void,
       { isFilterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
@@ -417,10 +416,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
                     valueSpecification={node.condition.value}
                     setValueSpecification={changeValueSpecification}
                     graph={graph}
-                    obseverContext={
-                      node.condition.postFilterState.tdsState.queryBuilderState
-                        .observableContext
-                    }
+                    obseverContext={queryBuilderState.observableContext}
                     typeCheckOption={{
                       expectedType: guaranteeNonNullable(
                         node.condition.columnState.getColumnType(),
@@ -428,6 +424,9 @@ const QueryBuilderPostFilterConditionEditor = observer(
                     }}
                     resetValue={resetNode}
                     selectorConfig={selectorConfig}
+                    isConstant={queryBuilderState.constantState.isValueSpecConstant(
+                      node.condition.value,
+                    )}
                   />
                 </PanelEntryDropZonePlaceholder>
               </div>

package/src/components/fetch-structure/QueryBuilderPostTDSPanel.tsx

@@ -21,7 +21,7 @@ import {
   ResizablePanelSplitter,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from '../filter/QueryBuilderFilterPanel.js';
-import { QueryBuilderOlapGroupByPanel } from './QueryBuilderOLAPGroupByPanel_.js';
+import { QueryBuilderOlapGroupByPanel } from './QueryBuilderOLAPGroupByPanel.js';
 import { QueryBuilderPostFilterPanel } from './QueryBuilderPostFilterPanel.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 

package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -55,10 +55,6 @@ import { QueryResultModifierModal } from './QueryBuilderResultModifierPanel.js';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { flowResult } from 'mobx';
 import { useApplicationStore } from '@finos/legend-application';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryBuilderParametersState.js';
 import {
   type ConcreteFunctionDefinition,
   generateFunctionCallString,
@@ -73,6 +69,10 @@ import { DEFAULT_LAMBDA_VARIABLE_NAME } from '../../stores/QueryBuilderConfig.js
 import type { QueryBuilderAggregateOperator } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregateOperator.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { LambdaEditor } from '../shared/LambdaEditor.js';
+import {
+  type QueryBuilderVariableDragSource,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from '../shared/BasicValueSpecificationEditor.js';
 
 const QueryBuilderProjectionColumnContextMenu = observer(
   forwardRef<
@@ -146,16 +146,16 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
       (
         item:
           | QueryBuilderExplorerTreeDragSource
-          | QueryBuilderParameterDragSource
+          | QueryBuilderVariableDragSource
           | QueryBuilderFunctionsExplorerDragSource,
         type: string,
       ): void => {
-        if (type === QUERY_BUILDER_PARAMETER_DND_TYPE) {
+        if (type === QUERY_BUILDER_VARIABLE_DND_TYPE) {
           projectionColumnState.derivationLambdaEditorState.setLambdaString(
             `${
               projectionColumnState.derivationLambdaEditorState.lambdaString
             }${VARIABLE_REFERENCE_TOKEN}${
-              (item as QueryBuilderParameterDragSource).variable.variableName
+              (item as QueryBuilderVariableDragSource).variable.name
             }`,
           );
         } else if (type === QUERY_BUILDER_FUNCTION_DND_TYPE) {
@@ -178,7 +178,7 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
     );
     const [, dropConnector] = useDrop<
       | QueryBuilderExplorerTreeDragSource
-      | QueryBuilderParameterDragSource
+      | QueryBuilderVariableDragSource
       | QueryBuilderFunctionsExplorerDragSource
     >(
       () => ({
@@ -187,7 +187,7 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY,
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
-          QUERY_BUILDER_PARAMETER_DND_TYPE,
+          QUERY_BUILDER_VARIABLE_DND_TYPE,
           QUERY_BUILDER_FUNCTION_DND_TYPE,
         ],
         drop: (item, monitor): void => {