@finos/legend-query-builder 4.14.48 → 4.14.49

package/src/components/QueryBuilderSideBar.tsx

@@ -18,7 +18,6 @@ import {
   CustomSelectorInput,
   createFilter,
   CogIcon,
-  ClockIcon,
   clsx,
   PanelHeader,
   compareLabelFn,
@@ -34,7 +33,6 @@ import {
   LATEST_DATE,
   PrimitiveInstanceValue,
   VariableExpression,
-  getMilestoneTemporalStereotype,
   PackageableElementExplicitReference,
   RuntimePointer,
   VARIABLE_REFERENCE_TOKEN,
@@ -74,23 +72,11 @@ const generateClassLabel = (
   val: Class,
   queryBuilderState: QueryBuilderState,
 ): React.ReactNode => {
-  const milestoneStereotype = getMilestoneTemporalStereotype(
-    val,
-    queryBuilderState.graphManagerState.graph,
-  );
-
   const isDeprecatedClass = isElementDeprecated(
     val,
     queryBuilderState.graphManagerState.graph,
   );
 
-  let milestoningTooltipText: string | undefined;
-  if (milestoneStereotype) {
-    milestoningTooltipText = queryBuilderState.milestoningState
-      .getMilestoningImplementation(milestoneStereotype)
-      .getMilestoningToolTipText();
-  }
-
   return (
     <div
       className={clsx('query-builder__setup__class-option-label', {
@@ -101,12 +87,6 @@ const generateClassLabel = (
       <div className="query-builder__setup__class-option-label__name">
         {val.name}
       </div>
-      {milestoningTooltipText && (
-        <ClockIcon
-          className="query-builder__setup__class-option-label__milestoning"
-          title={`This class is milestoned:\n${milestoningTooltipText}`}
-        />
-      )}
     </div>
   );
 };

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

@@ -47,6 +47,7 @@ import {
   MenuContentItemIcon,
   MenuContentItemLabel,
   PanelLoadingIndicator,
+  RefreshIcon,
 } from '@finos/legend-art';
 import {
   type ValueSpecification,
@@ -69,7 +70,6 @@ import React, {
   useState,
 } from 'react';
 import { useDrop, useDrag, useDragLayer } from 'react-dnd';
-import { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregationState.js';
 import type { QueryBuilderPostFilterOperator } from '../../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterOperator.js';
 import {
   type QueryBuilderPostFilterTreeNodeData,
@@ -110,6 +110,10 @@ import {
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
 import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
+import {
+  QueryBuilderPostFilterOperator_In,
+  QueryBuilderPostFilterOperator_NotIn,
+} from '../../stores/fetch-structure/tds/post-filter/operators/QueryBuilderPostFilterOperator_In.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
@@ -213,18 +217,21 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
 export const QueryBuilderColumnBadge = observer(
   (props: {
     colState: QueryBuilderTDSColumnState;
-    onColumnChange: (
-      columnState: QueryBuilderProjectionColumnState,
-    ) => Promise<void>;
+    onColumnChange?:
+      | ((columnState: QueryBuilderProjectionColumnState) => Promise<void>)
+      | undefined;
+    removeColumn?: () => void;
   }) => {
-    const { colState, onColumnChange } = props;
+    const { colState, onColumnChange, removeColumn } = props;
     const applicationStore = useApplicationStore();
     const type = colState.getColumnType();
-    const handleDrop = useCallback(
-      (item: QueryBuilderProjectionColumnDragSource): Promise<void> =>
-        onColumnChange(item.columnState),
-      [onColumnChange],
-    );
+    const handleDrop = onColumnChange
+      ? useCallback(
+          (item: QueryBuilderProjectionColumnDragSource): Promise<void> =>
+            onColumnChange(item.columnState),
+          [onColumnChange],
+        )
+      : undefined;
     const [{ isDragOver }, dropConnector] = useDrop<
       QueryBuilderProjectionColumnDragSource,
       void,
@@ -237,7 +244,7 @@ export const QueryBuilderColumnBadge = observer(
         ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
-            handleDrop(item).catch(applicationStore.alertUnhandledError);
+            handleDrop?.(item).catch(applicationStore.alertUnhandledError);
           } // prevent drop event propagation to accomondate for nested DnD
         },
         collect: (monitor) => ({
@@ -247,47 +254,89 @@ export const QueryBuilderColumnBadge = observer(
       [applicationStore, handleDrop],
     );
 
-    return (
+    const renderColumnBadgeContent = (): React.ReactNode => (
+      <div className="query-builder-column-badge__content">
+        {type && (
+          <div
+            className={clsx('query-builder-column-badge__type', {
+              'query-builder-column-badge__type--class': type instanceof Class,
+              'query-builder-column-badge__type--enumeration':
+                type instanceof Enumeration,
+              'query-builder-column-badge__type--primitive':
+                type instanceof PrimitiveType,
+            })}
+          >
+            {renderPropertyTypeIcon(type)}
+          </div>
+        )}
+        <div
+          className="query-builder-column-badge__property"
+          title={`${colState.columnName}`}
+        >
+          {colState.columnName}
+        </div>
+        <QueryBuilderColumnInfoTooltip
+          columnState={colState}
+          placement="bottom-end"
+        >
+          <div className="query-builder-column-badge__property__info">
+            <InfoCircleIcon />
+          </div>
+        </QueryBuilderColumnInfoTooltip>
+        {removeColumn && (
+          <button
+            className="query-builder-column-badge__action"
+            name="Reset"
+            title="Reset"
+            onClick={removeColumn}
+          >
+            <RefreshIcon />
+          </button>
+        )}
+      </div>
+    );
+
+    return onColumnChange ? (
       <div ref={dropConnector} className="query-builder-column-badge">
         <PanelEntryDropZonePlaceholder
           isDragOver={isDragOver}
           label="Change Property"
         >
-          <div className="query-builder-column-badge__content">
-            {type && (
-              <div
-                className={clsx('query-builder-column-badge__type', {
-                  'query-builder-column-badge__type--class':
-                    type instanceof Class,
-                  'query-builder-column-badge__type--enumeration':
-                    type instanceof Enumeration,
-                  'query-builder-column-badge__type--primitive':
-                    type instanceof PrimitiveType,
-                })}
-              >
-                {renderPropertyTypeIcon(type)}
-              </div>
-            )}
-            <div
-              className="query-builder-column-badge__property"
-              title={`${colState.columnName}`}
-            >
-              {colState.columnName}
-            </div>
-            <QueryBuilderColumnInfoTooltip
-              columnState={colState}
-              placement="bottom-end"
-            >
-              <div className="query-builder-column-badge__property__info">
-                <InfoCircleIcon />
-              </div>
-            </QueryBuilderColumnInfoTooltip>
-          </div>
+          {renderColumnBadgeContent()}
         </PanelEntryDropZonePlaceholder>
       </div>
+    ) : (
+      <div className="query-builder-column-badge">
+        {renderColumnBadgeContent()}
+      </div>
     );
   },
 );
+
+const isProjectionColumnDragSource = (
+  itemToTest:
+    | QueryBuilderVariableDragSource
+    | QueryBuilderProjectionColumnDragSource,
+): itemToTest is QueryBuilderProjectionColumnDragSource =>
+  Object.hasOwn(itemToTest, 'columnState');
+
+const canDropItemOntoNodeValue = (
+  item: QueryBuilderVariableDragSource | QueryBuilderProjectionColumnDragSource,
+  condition: PostFilterConditionState,
+): boolean => {
+  const itemParameterType = isProjectionColumnDragSource(item)
+    ? item.columnState.getColumnType()
+    : item.variable.genericType?.value.rawType;
+  const conditionOperator = condition.operator;
+  const conditionValueType = condition.leftConditionValue.getColumnType();
+  return (
+    conditionValueType !== undefined &&
+    !(conditionOperator instanceof QueryBuilderPostFilterOperator_In) &&
+    !(conditionOperator instanceof QueryBuilderPostFilterOperator_NotIn) &&
+    isTypeCompatibleForAssignment(itemParameterType, conditionValueType)
+  );
+};
+
 const QueryBuilderPostFilterConditionEditor = observer(
   (props: {
     node: QueryBuilderPostFilterTreeConditionNodeData;
@@ -301,29 +350,29 @@ const QueryBuilderPostFilterConditionEditor = observer(
     const changeOperator = (val: QueryBuilderPostFilterOperator) => (): void =>
       node.condition.changeOperator(val);
     const rightConditionValue = node.condition.rightConditionValue;
-    const changeColumn = async (
-      columnState: QueryBuilderProjectionColumnState,
-    ): Promise<void> => {
-      const currentColState =
-        node.condition.leftConditionValue instanceof
-        QueryBuilderAggregateColumnState
-          ? node.condition.leftConditionValue.projectionColumnState
-          : node.condition.leftConditionValue;
-      if (currentColState !== columnState) {
-        await flowResult(node.condition.changeColumn(columnState));
-      }
-    };
     // Drag and Drop on filter condition value
     const handleDrop = useCallback(
-      (item: QueryBuilderVariableDragSource): void => {
-        const parameterType = item.variable.genericType?.value.rawType;
+      (
+        item:
+          | QueryBuilderVariableDragSource
+          | QueryBuilderProjectionColumnDragSource,
+      ): void => {
+        const parameterType = isProjectionColumnDragSource(item)
+          ? item.columnState.getColumnType()
+          : item.variable.genericType?.value.rawType;
         const conditionValueType =
           node.condition.leftConditionValue.getColumnType();
-        if (
-          conditionValueType &&
-          isTypeCompatibleForAssignment(parameterType, conditionValueType)
-        ) {
-          node.condition.buildFromValueSpec(item.variable);
+        if (canDropItemOntoNodeValue(item, node.condition)) {
+          if (isProjectionColumnDragSource(item)) {
+            node.condition.setRightConditionVal(
+              new PostFilterTDSColumnValueConditionValueState(
+                node.condition,
+                item.columnState,
+              ),
+            );
+          } else {
+            node.condition.buildFromValueSpec(item.variable);
+          }
         } else {
           applicationStore.notificationService.notifyWarning(
             `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType?.name}.`,
@@ -338,18 +387,31 @@ const QueryBuilderPostFilterConditionEditor = observer(
       { isFilterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
+        accept: [
+          QUERY_BUILDER_VARIABLE_DND_TYPE,
+          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+        ],
+        canDrop: (item): boolean =>
+          canDropItemOntoNodeValue(item, node.condition),
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
           } // prevent drop event propagation to accomondate for nested DnD
         },
         collect: (monitor) => ({
-          isFilterValueDragOver: monitor.isOver({ shallow: true }),
+          isFilterValueDragOver:
+            monitor.isOver({ shallow: true }) && monitor.canDrop(),
         }),
       }),
       [handleDrop],
     );
+    const { isFilterValueDroppable } = useDragLayer((monitor) => ({
+      isFilterValueDroppable:
+        monitor.isDragging() &&
+        (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
+          monitor.getItemType() === QUERY_BUILDER_VARIABLE_DND_TYPE) &&
+        canDropItemOntoNodeValue(monitor.getItem(), node.condition),
+    }));
     const resetNode = (): void => {
       node.condition.buildFromValueSpec(
         node.condition.operator.getDefaultFilterConditionValue(node.condition),
@@ -375,13 +437,11 @@ const QueryBuilderPostFilterConditionEditor = observer(
       reloadValues: debouncedTypeaheadSearch,
       cleanUpReloadValues,
     };
-
-    const { isDroppable } = useDragLayer((monitor) => ({
-      isDroppable:
-        monitor.isDragging() &&
-        (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
-          monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
-    }));
+    const removeTDSColumnValue = (): void => {
+      node.condition.buildFromValueSpec(
+        node.condition.operator.getDefaultFilterConditionValue(node.condition),
+      );
+    };
 
     const renderRightVal = (): React.ReactNode => {
       if (
@@ -395,6 +455,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
           >
             <PanelEntryDropZonePlaceholder
               isDragOver={isFilterValueDragOver}
+              isDroppable={isFilterValueDroppable}
               label="Change Filter Value"
             >
               <BasicValueSpecificationEditor
@@ -432,12 +493,16 @@ const QueryBuilderPostFilterConditionEditor = observer(
           >
             <PanelEntryDropZonePlaceholder
               isDragOver={isFilterValueDragOver}
+              isDroppable={isFilterValueDroppable}
               label="Change Filter Value"
             >
               <div className="query-builder-post-filter-tree__condition-node__property">
                 <QueryBuilderColumnBadge
                   colState={rightConditionValue.tdsColumn}
-                  onColumnChange={changeRightCol}
+                  onColumnChange={
+                    isFilterValueDroppable ? changeRightCol : undefined
+                  }
+                  removeColumn={removeTDSColumnValue}
                 />
               </div>
             </PanelEntryDropZonePlaceholder>
@@ -450,15 +515,14 @@ const QueryBuilderPostFilterConditionEditor = observer(
     return (
       <div className="query-builder-post-filter-tree__node__label__content dnd__entry__container">
         <PanelEntryDropZonePlaceholder
-          isDragOver={isDragOver}
-          isDroppable={isDroppable}
-          label="Add New Logical Group"
+          isDragOver={isDragOver && !isFilterValueDragOver}
+          alwaysShowChildren={true}
+          className="query-builder-post-filter-tree__node__drop-zone-placeholder"
         >
           <div className="query-builder-post-filter-tree__condition-node">
             <div className="query-builder-post-filter-tree__condition-node__property">
               <QueryBuilderColumnBadge
                 colState={node.condition.leftConditionValue}
-                onColumnChange={changeColumn}
               />
             </div>
             <DropdownMenu
@@ -631,10 +695,10 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       },
       [applicationStore, postFilterState, node],
     );
-    const [{ isDragOver }, dropConnector] = useDrop<
+    const [{ isDragOver, deepIsDragOver }, dropConnector] = useDrop<
       QueryBuilderPostFilterConditionDragSource,
       void,
-      { isDragOver: boolean }
+      { isDragOver: boolean; deepIsDragOver: boolean }
     >(
       () => ({
         accept: [
@@ -649,6 +713,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
         },
         collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
+          deepIsDragOver: monitor.isOver({ shallow: false }),
         }),
       }),
       [handleDrop],
@@ -746,7 +811,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
               {node instanceof QueryBuilderPostFilterTreeConditionNodeData && (
                 <QueryBuilderPostFilterConditionEditor
                   node={node}
-                  isDragOver={isDragOver}
+                  isDragOver={deepIsDragOver}
                 />
               )}
               {node instanceof

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

@@ -1389,12 +1389,20 @@ export const QueryBuilderTDSPanel = observer(
                       <div className="query-builder__projection__result-modifier-prompt__header__label__title">
                         (
                         {getNameOfValueSpecification(
-                          tdsState.queryBuilderState.milestoningState.startDate,
+                          tdsState.queryBuilderState.milestoningState.getMilestoningParameterValue(
+                            tdsState.queryBuilderState.milestoningState
+                              .startDate,
+                          ) ??
+                            tdsState.queryBuilderState.milestoningState
+                              .startDate,
                           tdsState.queryBuilderState,
                         )}{' '}
                         -{' '}
                         {getNameOfValueSpecification(
-                          tdsState.queryBuilderState.milestoningState.endDate,
+                          tdsState.queryBuilderState.milestoningState.getMilestoningParameterValue(
+                            tdsState.queryBuilderState.milestoningState.endDate,
+                          ) ??
+                            tdsState.queryBuilderState.milestoningState.endDate,
                           tdsState.queryBuilderState,
                         )}
                         )
@@ -1413,8 +1421,12 @@ export const QueryBuilderTDSPanel = observer(
                   >
                     <div className="query-builder__projection__result-modifier-prompt__header__label__title">
                       {getNameOfValueSpecification(
-                        tdsState.queryBuilderState.milestoningState
-                          .businessDate,
+                        tdsState.queryBuilderState.milestoningState.getMilestoningParameterValue(
+                          tdsState.queryBuilderState.milestoningState
+                            .businessDate,
+                        ) ??
+                          tdsState.queryBuilderState.milestoningState
+                            .businessDate,
                         tdsState.queryBuilderState,
                       )}
                     </div>
@@ -1432,8 +1444,12 @@ export const QueryBuilderTDSPanel = observer(
                   >
                     <div className="query-builder__projection__result-modifier-prompt__header__label__title">
                       {getNameOfValueSpecification(
-                        tdsState.queryBuilderState.milestoningState
-                          .processingDate,
+                        tdsState.queryBuilderState.milestoningState.getMilestoningParameterValue(
+                          tdsState.queryBuilderState.milestoningState
+                            .processingDate,
+                        ) ??
+                          tdsState.queryBuilderState.milestoningState
+                            .processingDate,
                         tdsState.queryBuilderState,
                       )}
                     </div>

package/src/components/result/QueryBuilderResultPanel.tsx

@@ -204,7 +204,15 @@ export const QueryBuilderResultPanel = observer(
     const runQuery = (): void => {
       resultState.setSelectedCells([]);
       resultState.pressedRunQuery.inProgress();
-      if (queryParametersState.parameterStates.length) {
+      if (
+        queryParametersState.parameterStates.length &&
+        queryParametersState.parameterStates.find(
+          (param) =>
+            !queryBuilderState.milestoningState.isMilestoningParameter(
+              param.parameter,
+            ),
+        )
+      ) {
         queryParametersState.parameterValuesEditorState.open(
           (): Promise<void> =>
             flowResult(resultState.runQuery()).catch(

package/src/components/shared/QueryBuilderVariableSelector.tsx

@@ -149,6 +149,18 @@ export const VariableViewer = observer(
     const variableTypeName =
       variable.genericType?.value.rawType.name ??
       (isConstant ? CALCULATED : undefined);
+    const isMilestoningParameter =
+      queryBuilderState.milestoningState.isMilestoningParameter(variable);
+    const milestoningParameterValue =
+      queryBuilderState.milestoningState.getMilestoningParameterValue(variable);
+    const milestoningParameterValueString = isMilestoningParameter
+      ? milestoningParameterValue
+        ? getNameOfValueSpecification(
+            milestoningParameterValue,
+            queryBuilderState,
+          )
+        : undefined
+      : undefined;
     const deleteDisabled = isReadOnly || isVariableUsed;
     const deleteTitle = isVariableUsed ? 'Used in query' : 'Remove';
     const editVariable = (): void => {
@@ -227,6 +239,16 @@ export const VariableViewer = observer(
                   <div className="query-builder__variables__variable__type__label">
                     {variableTypeName ?? 'unknown'}
                   </div>
+                  {isMilestoningParameter && (
+                    <>
+                      <div className="query-builder__variables__variable__type__label query-builder__variables__variable__type__label--milestoning">
+                        milestoning
+                      </div>
+                      <div className="query-builder__constants__value">
+                        {milestoningParameterValueString}
+                      </div>
+                    </>
+                  )}
                 </div>
               )}
             </div>

package/src/stores/QueryBuilderValueSpecificationHelper.ts

@@ -240,7 +240,7 @@ export const isTypeCompatibleForAssignment = (
       // Pure function used for the operation
       // e.g. LHS(DateTime) = RHS(Date) -> we use isOnDay() instead of is()
       DATE_PRIMITIVE_TYPES.includes(type.path) ||
-      type === assignmentType ||
+      type.path === assignmentType.path ||
       isSuperType(assignmentType, type))
   );
 };

package/src/stores/milestoning/QueryBuilderMilestoningState.ts

@@ -481,6 +481,33 @@ export class QueryBuilderMilestoningState implements Hashable {
     return milestoningParameter;
   }
 
+  updateMilestoningParameterValue(
+    parameter: VariableExpression,
+    value: ValueSpecification | undefined,
+  ): void {
+    const variableState =
+      this.queryBuilderState.parametersState.parameterStates.find(
+        (param) => param.parameter.name === parameter.name,
+      );
+    if (variableState) {
+      variableState.setValue(value);
+    }
+  }
+
+  getMilestoningParameterValue(
+    milestoningParameter: ValueSpecification,
+  ): ValueSpecification | undefined {
+    let value: ValueSpecification | undefined = milestoningParameter;
+    if (milestoningParameter instanceof VariableExpression) {
+      const paramState =
+        this.queryBuilderState.parametersState.parameterStates.find(
+          (param) => param.parameter.name === milestoningParameter.name,
+        );
+      value = paramState?.value;
+    }
+    return value;
+  }
+
   isVariableUsed(variable: VariableExpression): boolean {
     const usedInBusiness = this.businessDate
       ? isValueExpressionReferencedInValue(variable, this.businessDate)
@@ -491,6 +518,33 @@ export class QueryBuilderMilestoningState implements Hashable {
     return usedInBusiness || usedInProcessingDate;
   }
 
+  isMilestoningParameter(parameter: VariableExpression): boolean {
+    let isMilestoningParameter = false;
+    if (this.businessDate instanceof VariableExpression) {
+      isMilestoningParameter =
+        parameter.name ===
+        guaranteeType(this.businessDate, VariableExpression).name;
+    }
+    if (this.processingDate instanceof VariableExpression) {
+      isMilestoningParameter =
+        isMilestoningParameter ||
+        parameter.name ===
+          guaranteeType(this.processingDate, VariableExpression).name;
+    }
+    if (this.startDate instanceof VariableExpression) {
+      isMilestoningParameter =
+        isMilestoningParameter ||
+        parameter.name ===
+          guaranteeType(this.startDate, VariableExpression).name;
+    }
+    if (this.endDate instanceof VariableExpression) {
+      isMilestoningParameter =
+        isMilestoningParameter ||
+        parameter.name === guaranteeType(this.endDate, VariableExpression).name;
+    }
+    return isMilestoningParameter;
+  }
+
   get hashCode(): string {
     return hashArray([
       QUERY_BUILDER_STATE_HASH_STRUCTURE.MILESTONING_STATE,

package/src/stores/shared/ValueSpecificationEditorHelper.ts

@@ -46,6 +46,7 @@ import {
 import {
   Randomizer,
   UnsupportedOperationError,
+  deepClone,
   returnUndefOnError,
 } from '@finos/legend-shared';
 import { generateDefaultValueForPrimitiveType } from '../QueryBuilderValueSpecificationHelper.js';
@@ -84,6 +85,16 @@ export const buildPrimitiveInstanceValue = (
   return instance;
 };
 
+export const cloneValueSpecification = (
+  valueSpecification: ValueSpecification,
+  observerContext: ObserverContext,
+): ValueSpecification => {
+  const copy = deepClone(valueSpecification);
+  copy.genericType = valueSpecification.genericType;
+  copy.multiplicity = valueSpecification.multiplicity;
+  return copy;
+};
+
 export const createMockPrimitiveValueSpecification = (
   primitiveType: PrimitiveType,
   graph: PureModel,