@finos/legend-query-builder 4.14.70 → 4.14.72

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

@@ -746,7 +746,8 @@ export const QueryResultModifierModal = observer(
         classes={{
           root: 'editor-modal__root-container',
           container: 'editor-modal__container',
-          paper: 'editor-modal__content',
+          paper:
+            'editor-modal__content query-builder__projection__modal__content',
         }}
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL}
       >
@@ -756,7 +757,10 @@ export const QueryResultModifierModal = observer(
           }
           className="editor-modal query-builder__projection__modal"
         >
-          <ModalHeader title="Query Options" />
+          <ModalHeader
+            className="query-builder__projection__modal__header"
+            title="Query Options"
+          />
           <ModalBody className="query-builder__projection__modal__body">
             <div className="query-builder__projection__options">
               {tdsState.queryBuilderState.milestoningState

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

@@ -214,7 +214,8 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
   }) => {
     const { projectionColumnState } = props;
     const hasParserError = projectionColumnState.tdsState.hasParserError;
-    const onEditorBlur = (): void => {
+
+    const onEditorBlur = useCallback((): void => {
       flowResult(
         projectionColumnState.fetchDerivationLambdaReturnType({
           forceConversionStringToLambda: true,
@@ -224,7 +225,8 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
         projectionColumnState.tdsState.queryBuilderState.applicationStore
           .alertUnhandledError,
       );
-    };
+    }, [projectionColumnState]);
+
     const handleDrop = useCallback(
       (
         item: QueryBuilderDerivationProjectionColumnDropTarget,
@@ -256,6 +258,7 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
       },
       [projectionColumnState],
     );
+
     const [, dropConnector] =
       useDrop<QueryBuilderDerivationProjectionColumnDropTarget>(
         () => ({
@@ -269,6 +272,11 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
         [handleDrop],
       );
 
+    // Calculate derivation return type on mount
+    useEffect(() => {
+      onEditorBlur();
+    }, [onEditorBlur]);
+
     return (
       <div
         ref={dropConnector}

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -1020,13 +1020,22 @@ const QueryBuilderFilterConditionEditor = observer(
         rightConditionValue instanceof FilterValueSpecConditionValueState &&
         rightConditionValue.value
       ) {
+        const isInvalidVariable =
+          rightConditionValue.value instanceof VariableExpression &&
+          node.condition.filterState.isInvalidValueSpecFilterValue(node);
         return (
           <div
             ref={dropConnector}
             data-testid={
               QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_CONDITION_NODE_VALUE
             }
-            className="query-builder-filter-tree__condition-node__value"
+            className={clsx(
+              'query-builder-filter-tree__condition-node__value',
+              {
+                'query-builder-filter-tree__condition-node__value--error':
+                  isInvalidVariable,
+              },
+            )}
           >
             <PanelEntryDropZonePlaceholder
               isDragOver={isFilterValueDragOver}

package/src/components/result/tds/QueryBuilderTDSGridResult.tsx

@@ -61,7 +61,10 @@ import {
   Dialog,
   CustomSelectorInput,
 } from '@finos/legend-art';
-import { getFloatGridColumnCustomHeader } from './QueryBuilderTDSSimpleGridResult.js';
+import {
+  getTDSColumnCustomizations,
+  MAXIMUM_FRACTION_DIGITS,
+} from './QueryBuilderTDSSimpleGridResult.js';
 
 export const enum QueryBuilderDataGridCustomAggregationFunction {
   wavg = 'wavg',
@@ -88,20 +91,13 @@ const getAggregationTDSColumnCustomizations = (
         filter: 'agDateColumnFilter',
         allowedAggFuncs: ['count'],
       };
+    case PRIMITIVE_TYPE.DECIMAL:
     case PRIMITIVE_TYPE.NUMBER:
     case PRIMITIVE_TYPE.INTEGER:
-      return {
-        filter: 'agNumberColumnFilter',
-        allowedAggFuncs: ['count', 'sum', 'max', 'min', 'avg', 'wavg'],
-      };
-    case PRIMITIVE_TYPE.DECIMAL:
     case PRIMITIVE_TYPE.FLOAT:
       return {
         filter: 'agNumberColumnFilter',
         allowedAggFuncs: ['count', 'sum', 'max', 'min', 'avg', 'wavg'],
-        headerComponentParams: {
-          template: getFloatGridColumnCustomHeader(columnName),
-        },
       };
     default:
       return {
@@ -117,7 +113,7 @@ const QueryResultCellRenderer = observer(
     const formattedCellValue = (): QueryBuilderTDSResultCellDataType => {
       if (isNumber(cellValue)) {
         return Intl.NumberFormat(DEFAULT_LOCALE, {
-          maximumFractionDigits: 4,
+          maximumFractionDigits: MAXIMUM_FRACTION_DIGITS,
         }).format(Number(cellValue));
       } else if (isBoolean(cellValue)) {
         return String(cellValue);
@@ -181,6 +177,7 @@ const getLocalColDefs = (
         tdsExecutionResult: executionResult,
       },
       ...getAggregationTDSColumnCustomizations(executionResult, colName),
+      ...getTDSColumnCustomizations(executionResult, colName),
     } as DataGridColumnDefinition;
     const persistedColumn = resultState.gridConfig?.columns.find(
       (c) => c.colId === colName,
@@ -216,15 +213,9 @@ const getFilterTDSColumnCustomizations = (
     case PRIMITIVE_TYPE.DECIMAL:
     case PRIMITIVE_TYPE.INTEGER:
     case PRIMITIVE_TYPE.NUMBER:
-      return {
-        filter: 'agNumberColumnFilter',
-      };
     case PRIMITIVE_TYPE.FLOAT:
       return {
         filter: 'agNumberColumnFilter',
-        headerComponentParams: {
-          template: getFloatGridColumnCustomHeader(columnName),
-        },
       };
     default:
       // we default all other columns to use filter true which defaults to set filters
@@ -255,6 +246,7 @@ const getColDefs = (
           tdsExecutionResult: executionResult,
         },
         ...getFilterTDSColumnCustomizations(executionResult, colName),
+        ...getTDSColumnCustomizations(executionResult, colName),
       }) as DataGridColumnDefinition,
   );
 

package/src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx

@@ -48,45 +48,107 @@ import type {
 } from '../../../stores/QueryBuilderResultState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../../__lib__/QueryBuilderTesting.js';
 
-export const getFloatGridColumnCustomHeader = (
-  columnName: string,
-): string => ` <div data-testid="query__builder__result__grid__custom-header" class="query-builder__result__values__table__custom-header">
-              <div>${columnName}</div>
-              <div
-                class="query-builder__result__stale-status__icon"
-                title="some values have been rounded using en-us format in this preview grid (defaults to max 4 decimal places)"
-              >
-                <svg
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 576 512"
-                  height="1em"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
-                </svg>
-              </div>
-            </div>`;
+export const MAXIMUM_FRACTION_DIGITS = 4;
+
+export const getFloatGridColumnCustomHeader = (): string =>
+  `<div class="ag-cell-label-container" role="presentation">
+    <span
+      data-ref="eMenu"
+      class="ag-header-icon ag-header-cell-menu-button"
+    ></span>
+    <span
+      data-ref="eFilterButton"
+      class="ag-header-icon ag-header-cell-filter-button"
+    ></span>
+    <div data-ref="eLabel" class="ag-header-cell-label" role="presentation">
+      <span
+        data-ref="eSortOrder"
+        class="ag-header-icon ag-sort-order ag-hidden"
+      ></span>
+      <span
+        data-ref="eSortAsc"
+        class="ag-header-icon ag-sort-ascending-icon ag-hidden"
+      ></span>
+      <span
+        data-ref="eSortDesc"
+        class="ag-header-icon ag-sort-descending-icon ag-hidden"
+      ></span>
+      <span
+        data-ref="eSortMixed"
+        class="ag-header-icon ag-sort-mixed-icon ag-hidden"
+      ></span>
+      <span
+        data-ref="eSortNone"
+        class="ag-header-icon ag-sort-none-icon ag-hidden"
+      ></span>
+      <span
+        data-ref="eText"
+        class="ag-header-cell-text"
+        role="columnheader"
+      ></span>
+      <span data-ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
+    </div>
+    <div
+      data-testid="query__builder__result__grid__custom-header"
+      class="query-builder__result__values__table__custom-header"
+    >
+      <div
+        class="query-builder__result__values__table__custom-header__icon"
+        title="some values have been rounded using en-us format in this preview grid (defaults to max 4 decimal places)"
+      >
+        <svg
+          stroke="currentColor"
+          fill="currentColor"
+          stroke-width="0"
+          viewBox="0 0 576 512"
+          height="1em"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
+        </svg>
+      </div>
+    </div>
+  </div>`;
 
-const getTDSColumnCustomizations = (
+export const getTDSColumnCustomizations = (
   result: TDSExecutionResult,
   columnName: string,
 ): object => {
-  const columnType = result.builder.columns.find(
+  const index = result.builder.columns.findIndex(
     (col) => col.name === columnName,
-  )?.type;
-  switch (columnType) {
-    case PRIMITIVE_TYPE.FLOAT:
-      return {
-        headerComponentParams: {
-          template: getFloatGridColumnCustomHeader(columnName),
-        },
-      };
-    default:
-      return {};
+  );
+  if (index >= 0) {
+    const columnType = result.builder.columns[index]?.type;
+    const colValues = result.result.rows.map((r) => r.values[index]);
+    const isTruncated = (
+      vals: (string | number | boolean | null | undefined)[],
+    ): boolean =>
+      Boolean(
+        vals.some((val) => {
+          if (val) {
+            const decimalPart = val.toString().split('.')[1];
+            return decimalPart && decimalPart.length > MAXIMUM_FRACTION_DIGITS;
+          }
+          return false;
+        }),
+      );
+    switch (columnType) {
+      case PRIMITIVE_TYPE.NUMBER:
+      case PRIMITIVE_TYPE.DECIMAL:
+      case PRIMITIVE_TYPE.FLOAT:
+        return isTruncated(colValues)
+          ? {
+              headerComponentParams: {
+                template: getFloatGridColumnCustomHeader(),
+              },
+            }
+          : {};
+      default:
+        return {};
+    }
   }
+  return {};
 };
 
 const QueryResultCellRenderer = observer(
@@ -104,7 +166,7 @@ const QueryResultCellRenderer = observer(
     const formattedCellValue = (): QueryBuilderTDSResultCellDataType => {
       if (isNumber(cellValue)) {
         return Intl.NumberFormat(DEFAULT_LOCALE, {
-          maximumFractionDigits: 4,
+          maximumFractionDigits: MAXIMUM_FRACTION_DIGITS,
         }).format(Number(cellValue));
       } else if (isBoolean(cellValue)) {
         return String(cellValue);

package/src/stores/QueryBuilderConstantsState.ts

@@ -288,6 +288,7 @@ export class QueryBuilderCalculatedConstantExpressionState
       variable: observable,
       lambdaState: observable,
       value: observable,
+      setLambdaState: action,
       setValue: action,
     });
     this.value = value;
@@ -298,6 +299,10 @@ export class QueryBuilderCalculatedConstantExpressionState
     );
   }
 
+  setLambdaState(val: QueryBuilderConstantLambdaEditorState): void {
+    this.lambdaState = val;
+  }
+
   setValue(val: PlainObject): void {
     this.value = val;
   }
@@ -393,8 +398,18 @@ export class QueryBuilderConstantsState implements Hashable {
 export const cloneQueryBuilderConstantLambdaEditorState = (
   state: QueryBuilderConstantLambdaEditorState,
 ): QueryBuilderConstantLambdaEditorState => {
+  const clonedCalculatedState =
+    new QueryBuilderCalculatedConstantExpressionState(
+      state.calculatedState.queryBuilderState,
+      new VariableExpression(
+        state.calculatedState.variable.name,
+        state.calculatedState.variable.multiplicity,
+        state.calculatedState.variable.genericType,
+      ),
+      deepClone(state.calculatedState.value),
+    );
   const clonedState = new QueryBuilderConstantLambdaEditorState(
-    deepClone(state.calculatedState),
+    clonedCalculatedState,
   );
   clonedState.lambdaString = state.lambdaString;
   clonedState.parserError = deepClone(state.parserError);

package/src/stores/QueryBuilderValueSpecificationHelper.ts

@@ -213,7 +213,7 @@ export const isPropertyExpressionChainOptional = (
 
 export const isTypeCompatibleForAssignment = (
   type: Type | undefined,
-  assignmentType: Type,
+  assignmentType: Type | undefined,
 ): boolean => {
   const NUMERIC_PRIMITIVE_TYPES = [
     PRIMITIVE_TYPE.NUMBER,
@@ -231,6 +231,7 @@ export const isTypeCompatibleForAssignment = (
   // When changing the return type for LHS, the RHS value should be adjusted accordingly.
   return (
     type !== undefined &&
+    assignmentType !== undefined &&
     // Numeric value is handled loosely because of autoboxing
     // e.g. LHS (integer) = RHS (float) is acceptable
     ((NUMERIC_PRIMITIVE_TYPES.includes(type.path) &&

package/src/stores/QueryLoaderState.ts

@@ -19,17 +19,18 @@ import {
   type GenericLegendApplicationStore,
 } from '@finos/legend-application';
 import {
-  QuerySearchSpecification,
-  GRAPH_MANAGER_EVENT,
   type QueryInfo,
   type LightQuery,
   type BasicGraphManagerState,
   type Query,
   type RawLambda,
+  QuerySearchSpecification,
+  GRAPH_MANAGER_EVENT,
+  QuerySearchSortBy,
 } from '@finos/legend-graph';
 import {
-  ActionState,
   type GeneratorFn,
+  ActionState,
   assertErrorThrown,
   guaranteeNonNullable,
   LogEvent,
@@ -51,7 +52,7 @@ export enum SORT_BY_OPTIONS {
   SORT_BY_UPDATE = 'Last Updated',
 }
 
-export type SortByOption = { label: string; value: string };
+export type SortByOption = { label: SORT_BY_OPTIONS; value: SORT_BY_OPTIONS };
 
 export class QueryLoaderState {
   readonly applicationStore: GenericLegendApplicationStore;
@@ -92,7 +93,7 @@ export class QueryLoaderState {
   showingDefaultQueries = true;
   showPreviewViewer = false;
   queryPreviewContent?: QueryInfo | { name: string; content: string };
-  sortBy = '';
+  sortBy = SORT_BY_OPTIONS.SORT_BY_VIEW;
 
   constructor(
     applicationStore: GenericLegendApplicationStore,
@@ -158,10 +159,23 @@ export class QueryLoaderState {
     this.isCuratedTemplateToggled = val;
   }
 
-  setSortBy(val: string): void {
+  setSortBy(val: SORT_BY_OPTIONS): void {
     this.sortBy = val;
   }
 
+  getQuerySearchSortBy(sortByValue: string): QuerySearchSortBy | undefined {
+    switch (sortByValue) {
+      case SORT_BY_OPTIONS.SORT_BY_CREATE:
+        return QuerySearchSortBy.SORT_BY_CREATE;
+      case SORT_BY_OPTIONS.SORT_BY_UPDATE:
+        return QuerySearchSortBy.SORT_BY_UPDATE;
+      case SORT_BY_OPTIONS.SORT_BY_VIEW:
+        return QuerySearchSortBy.SORT_BY_VIEW;
+      default:
+        return undefined;
+    }
+  }
+
   setSearchText(val: string): void {
     this.searchText = val;
   }
@@ -171,7 +185,16 @@ export class QueryLoaderState {
   }
 
   setQueries(val: LightQuery[]): void {
-    this.queries = val.sort((a, b) => a.name.localeCompare(b.name));
+    this.queries = val;
+  }
+
+  // search query using search specification
+  canPerformAdvancedSearch(searchText: string): boolean {
+    return !(
+      searchText.length < DEFAULT_TYPEAHEAD_SEARCH_MINIMUM_SEARCH_LENGTH &&
+      !this.showCurrentUserQueriesOnly &&
+      Array.from(this.extraFilters.values()).every((value) => value === false)
+    );
   }
 
   setShowPreviewViewer(val: boolean): void {
@@ -226,11 +249,7 @@ export class QueryLoaderState {
   }
 
   *searchQueries(searchText: string): GeneratorFn<void> {
-    if (
-      searchText.length < DEFAULT_TYPEAHEAD_SEARCH_MINIMUM_SEARCH_LENGTH &&
-      !this.showCurrentUserQueriesOnly &&
-      Array.from(this.extraFilters.values()).every((value) => value === false)
-    ) {
+    if (!this.canPerformAdvancedSearch(searchText)) {
       // if no search text is specified, use fetch the default queries
       if (!searchText) {
         this.showingDefaultQueries = true;
@@ -268,6 +287,10 @@ export class QueryLoaderState {
       searchSpecification.limit = QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT + 1;
       searchSpecification.showCurrentUserQueriesOnly =
         this.showCurrentUserQueriesOnly;
+      const querySearchSortBy = this.getQuerySearchSortBy(this.sortBy);
+      if (querySearchSortBy) {
+        searchSpecification.sortByOption = querySearchSortBy;
+      }
       if (this.queryBuilderState) {
         Array.from(this.extraFilters.entries()).forEach(([key, value]) => {
           if (value) {
@@ -288,11 +311,14 @@ export class QueryLoaderState {
       searchSpecification =
         this.decorateSearchSpecification?.(searchSpecification) ??
         searchSpecification;
-      this.queries = (
-        (yield this.graphManagerState.graphManager.searchQueries(
-          searchSpecification,
-        )) as LightQuery[]
-      ).sort((a, b) => a.name.localeCompare(b.name));
+      this.queries = (yield this.graphManagerState.graphManager.searchQueries(
+        searchSpecification,
+      )) as LightQuery[];
+      if (!querySearchSortBy) {
+        this.queries = this.queries.sort((a, b) =>
+          a.name.localeCompare(b.name),
+        );
+      }
       this.searchQueriesState.pass();
     } catch (error) {
       assertErrorThrown(error);

package/src/stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.ts

@@ -20,12 +20,12 @@ import {
   type Type,
   type ValueSpecification,
   type ExecutionResult,
-  type VariableExpression,
   type SimpleFunctionExpression,
   observe_ValueSpecification,
   PrimitiveType,
   CollectionInstanceValue,
   InstanceValue,
+  VariableExpression,
 } from '@finos/legend-graph';
 import {
   type GeneratorFn,
@@ -74,11 +74,13 @@ import type { QueryBuilderTDSColumnState } from '../QueryBuilderTDSColumnState.j
 import {
   getCollectionValueSpecificationType,
   getNonCollectionValueSpecificationType,
+  isTypeCompatibleForAssignment,
   isValidInstanceValue,
   isValueExpressionReferencedInValue,
 } from '../../../QueryBuilderValueSpecificationHelper.js';
 import { buildtdsPropertyExpressionFromColState } from './operators/QueryBuilderPostFilterOperatorValueSpecificationBuilder.js';
 import { TDS_COLUMN_GETTER } from '../../../../graph/QueryBuilderMetaModelConst.js';
+import type { QueryBuilderFilterTreeNodeData } from '../../../filter/QueryBuilderFilterState.js';
 
 export enum QUERY_BUILDER_POST_FILTER_DND_TYPE {
   GROUP_CONDITION = 'QUERY_BUILDER_POST_FILTER_DND_TYPE.GROUP_CONDITION',
@@ -1011,15 +1013,45 @@ export class QueryBuilderPostFilterState
     );
   }
 
+  isInvalidValueSpecPostFilterValue(
+    node: QueryBuilderPostFilterTreeNodeData,
+  ): boolean {
+    return (
+      node instanceof QueryBuilderPostFilterTreeConditionNodeData &&
+      node.condition.rightConditionValue instanceof
+        PostFilterValueSpecConditionValueState &&
+      ((node.condition.rightConditionValue.value instanceof InstanceValue &&
+        !isValidInstanceValue(node.condition.rightConditionValue.value)) ||
+        (node.condition.rightConditionValue.value instanceof
+          VariableExpression &&
+          !isTypeCompatibleForAssignment(
+            node.condition.leftConditionValue.getColumnType(),
+            node.condition.rightConditionValue.type,
+          )))
+    );
+  }
+
+  isInvalidTDSColumnPostFilterValue(
+    node: QueryBuilderFilterTreeNodeData,
+  ): boolean {
+    return (
+      node instanceof QueryBuilderPostFilterTreeConditionNodeData &&
+      node.condition.rightConditionValue instanceof
+        PostFilterTDSColumnValueConditionValueState &&
+      !isTypeCompatibleForAssignment(
+        node.condition.leftConditionValue.getColumnType(),
+        node.condition.rightConditionValue.type,
+      )
+    );
+  }
+
   get allValidationIssues(): string[] {
     const validationIssues: string[] = [];
     Array.from(this.nodes.values()).forEach((node) => {
       if (node instanceof QueryBuilderPostFilterTreeConditionNodeData) {
         if (
-          node.condition.rightConditionValue instanceof
-            PostFilterValueSpecConditionValueState &&
-          node.condition.rightConditionValue.value instanceof InstanceValue &&
-          !isValidInstanceValue(node.condition.rightConditionValue.value)
+          this.isInvalidValueSpecPostFilterValue(node) ||
+          this.isInvalidTDSColumnPostFilterValue(node)
         ) {
           validationIssues.push(
             `Filter value for ${node.condition.leftConditionValue.columnName} is missing or invalid`,
@@ -1042,11 +1074,8 @@ export class QueryBuilderPostFilterState
   get hasInvalidFilterValues(): boolean {
     return Array.from(this.nodes.values()).some(
       (node) =>
-        node instanceof QueryBuilderPostFilterTreeConditionNodeData &&
-        node.condition.rightConditionValue instanceof
-          PostFilterValueSpecConditionValueState &&
-        node.condition.rightConditionValue.value instanceof InstanceValue &&
-        !isValidInstanceValue(node.condition.rightConditionValue.value),
+        this.isInvalidValueSpecPostFilterValue(node) ||
+        this.isInvalidTDSColumnPostFilterValue(node),
     );
   }
 

package/src/stores/filter/QueryBuilderFilterState.ts

@@ -40,12 +40,12 @@ import {
   type ExecutionResult,
   AbstractPropertyExpression,
   type ValueSpecification,
-  type VariableExpression,
   type Type,
   observe_ValueSpecification,
   CollectionInstanceValue,
   InstanceValue,
   SimpleFunctionExpression,
+  VariableExpression,
   matchFunctionName,
 } from '@finos/legend-graph';
 import { DEFAULT_LAMBDA_VARIABLE_NAME } from '../QueryBuilderConfig.js';
@@ -61,6 +61,7 @@ import { QUERY_BUILDER_STATE_HASH_STRUCTURE } from '../QueryBuilderStateHashUtil
 import {
   getCollectionValueSpecificationType,
   getNonCollectionValueSpecificationType,
+  isTypeCompatibleForAssignment,
   isValidInstanceValue,
   isValueExpressionReferencedInValue,
 } from '../QueryBuilderValueSpecificationHelper.js';
@@ -1185,8 +1186,15 @@ export class QueryBuilderFilterState
       node instanceof QueryBuilderFilterTreeConditionNodeData &&
       node.condition.rightConditionValue instanceof
         FilterValueSpecConditionValueState &&
-      node.condition.rightConditionValue.value instanceof InstanceValue &&
-      !isValidInstanceValue(node.condition.rightConditionValue.value)
+      ((node.condition.rightConditionValue.value instanceof InstanceValue &&
+        !isValidInstanceValue(node.condition.rightConditionValue.value)) ||
+        (node.condition.rightConditionValue.value instanceof
+          VariableExpression &&
+          !isTypeCompatibleForAssignment(
+            node.condition.propertyExpressionState.propertyExpression.func.value
+              .genericType.value.rawType,
+            node.condition.rightConditionValue.value.genericType?.value.rawType,
+          )))
     );
   }