@finos/legend-query-builder 4.18.1 → 4.18.3

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

@@ -126,6 +126,7 @@ import {
   QUERY_BUILDER_FILTER_DND_TYPE,
   QueryBuilderFilterTreeConditionNodeData,
   type QueryBuilderFilterConditionDragSource,
+  FilterPropertyExpressionSourceState,
 } from '../../stores/filter/QueryBuilderFilterState.js';
 import { cloneAbstractPropertyExpression } from '../../stores/shared/ValueSpecificationEditorHelper.js';
 import { buildPropertyExpressionFromExistsNode } from '../filter/QueryBuilderFilterPanel.js';
@@ -1368,7 +1369,11 @@ export const QueryBuilderTDSPanel = observer(
             break;
           }
           case QUERY_BUILDER_FILTER_DND_TYPE.CONDITION:
-            if (item.node instanceof QueryBuilderFilterTreeConditionNodeData) {
+            if (
+              item.node instanceof QueryBuilderFilterTreeConditionNodeData &&
+              item.node.condition.sourceState instanceof
+                FilterPropertyExpressionSourceState
+            ) {
               const propertyExpression = isExistsNodeChild(item.node)
                 ? buildPropertyExpressionFromExistsNode(
                     tdsState.queryBuilderState.filterState,
@@ -1378,7 +1383,7 @@ export const QueryBuilderTDSPanel = observer(
                     item.node,
                   )
                 : cloneAbstractPropertyExpression(
-                    item.node.condition.propertyExpressionState
+                    item.node.condition.sourceState.propertyExpressionState
                       .propertyExpression,
                     tdsState.queryBuilderState.observerContext,
                   );

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -69,10 +69,13 @@ import {
   isCollectionProperty,
   type QueryBuilderFilterValueDropTarget,
   isExistsNodeChild,
+  FilterPropertyExpressionSourceState,
+  FilterRelationColumnSourceState,
 } from '../../stores/filter/QueryBuilderFilterState.js';
 import { useDrag, useDragLayer, useDrop } from 'react-dnd';
 import {
   type QueryBuilderExplorerTreeDragSource,
+  type QueryBuilderExplorerTreeRelationColumnDragSource,
   buildPropertyExpressionFromExplorerTreeNodeData,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
 } from '../../stores/explorer/QueryBuilderExplorerState.js';
@@ -146,11 +149,13 @@ export const CAN_DROP_MAIN_GROUP_DND_TYPES_FETCH_SUPPORTED = [
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN,
 ];
 
 export const CAN_DROP_MAIN_GROUP_DND_TYPES = [
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN,
 ];
 
 export const CAN_DROP_FILTER_NODE_DND_TYPES_FETCH_SUPPORTED = [
@@ -158,12 +163,14 @@ export const CAN_DROP_FILTER_NODE_DND_TYPES_FETCH_SUPPORTED = [
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN,
 ];
 
 export const CAN_DROP_FILTER_NODE_DND_TYPES = [
   QUERY_BUILDER_FILTER_DND_TYPE.CONDITION,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN,
 ];
 
 export const CAN_DROP_FILTER_VALUE_DND_TYPES = [
@@ -810,9 +817,7 @@ const canDropTypeOntoNodeValue = (
   condition: FilterConditionState,
 ): boolean => {
   const conditionOperator = condition.operator;
-  const conditionValueType =
-    condition.propertyExpressionState.propertyExpression.func.value.genericType
-      .value.rawType;
+  const conditionValueType = condition.leftConditionType;
   return (
     !(conditionOperator instanceof QueryBuilderFilterOperator_In) &&
     !(conditionOperator instanceof QueryBuilderFilterOperator_NotIn) &&
@@ -922,9 +927,7 @@ const QueryBuilderFilterConditionEditor = observer(
             return;
           }
         } else {
-          const conditionValueType =
-            node.condition.propertyExpressionState.propertyExpression.func.value
-              .genericType.value.rawType;
+          const conditionValueType = node.condition.leftConditionType;
           applicationStore.notificationService.notifyWarning(
             `Incompatible parameter type ${itemType?.name}. ${itemType?.name} is not compatible with type ${conditionValueType.name}.`,
           );
@@ -1041,9 +1044,7 @@ const QueryBuilderFilterConditionEditor = observer(
                 graph={graph}
                 observerContext={queryBuilderState.observerContext}
                 typeCheckOption={{
-                  expectedType:
-                    node.condition.propertyExpressionState.propertyExpression
-                      .func.value.genericType.value.rawType,
+                  expectedType: node.condition.leftConditionType,
                 }}
                 resetValue={resetNode}
                 selectorSearchConfig={selectorConfig}
@@ -1097,9 +1098,18 @@ const QueryBuilderFilterConditionEditor = observer(
         >
           <div className="query-builder-filter-tree__condition-node">
             <div className="query-builder-filter-tree__condition-node__property">
-              <QueryBuilderPropertyExpressionBadge
-                propertyExpressionState={node.condition.propertyExpressionState}
-              />
+              {node.condition.sourceState instanceof
+              FilterPropertyExpressionSourceState ? (
+                <QueryBuilderPropertyExpressionBadge
+                  propertyExpressionState={
+                    node.condition.sourceState.propertyExpressionState
+                  }
+                />
+              ) : (
+                <div className="query-builder-filter-tree__condition-node__property__label">
+                  {node.condition.sourceState.label}
+                </div>
+              )}
             </div>
             <ControlledDropdownMenu
               className="query-builder-filter-tree__condition-node__operator"
@@ -1260,36 +1270,50 @@ const QueryBuilderFilterTreeNodeContainer = observer(
         } else {
           let filterConditionState: FilterConditionState;
           try {
-            let propertyExpression;
-            if (type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE) {
-              if (
-                (item as QueryBuilderProjectionColumnDragSource)
-                  .columnState instanceof
-                QueryBuilderSimpleProjectionColumnState
-              ) {
-                propertyExpression = cloneAbstractPropertyExpression(
-                  (
-                    (item as QueryBuilderProjectionColumnDragSource)
-                      .columnState as QueryBuilderSimpleProjectionColumnState
-                  ).propertyExpressionState.propertyExpression,
-                  queryBuilderState.observerContext,
-                );
+            if (type === QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN) {
+              const columnNode = (
+                item as QueryBuilderExplorerTreeRelationColumnDragSource
+              ).node;
+              const sourceState = new FilterRelationColumnSourceState(
+                columnNode.column.name,
+                columnNode.type,
+              );
+              filterConditionState = new FilterConditionState(
+                filterState,
+                sourceState,
+              );
+            } else {
+              let propertyExpression;
+              if (type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE) {
+                if (
+                  (item as QueryBuilderProjectionColumnDragSource)
+                    .columnState instanceof
+                  QueryBuilderSimpleProjectionColumnState
+                ) {
+                  propertyExpression = cloneAbstractPropertyExpression(
+                    (
+                      (item as QueryBuilderProjectionColumnDragSource)
+                        .columnState as QueryBuilderSimpleProjectionColumnState
+                    ).propertyExpressionState.propertyExpression,
+                    queryBuilderState.observerContext,
+                  );
+                } else {
+                  throw new UnsupportedOperationError(
+                    `Dragging and Dropping derivation projection column is not supported.`,
+                  );
+                }
               } else {
-                throw new UnsupportedOperationError(
-                  `Dragging and Dropping derivation projection column is not supported.`,
-                );
+                propertyExpression =
+                  buildPropertyExpressionFromExplorerTreeNodeData(
+                    (item as QueryBuilderExplorerTreeDragSource).node,
+                    filterState.queryBuilderState.explorerState,
+                  );
               }
-            } else {
-              propertyExpression =
-                buildPropertyExpressionFromExplorerTreeNodeData(
-                  (item as QueryBuilderExplorerTreeDragSource).node,
-                  filterState.queryBuilderState.explorerState,
-                );
+              filterConditionState = new FilterConditionState(
+                filterState,
+                propertyExpression,
+              );
             }
-            filterConditionState = new FilterConditionState(
-              filterState,
-              propertyExpression,
-            );
           } catch (error) {
             assertErrorThrown(error);
             applicationStore.notificationService.notifyWarning(error.message);
@@ -1300,11 +1324,34 @@ const QueryBuilderFilterTreeNodeContainer = observer(
             node instanceof QueryBuilderFilterTreeConditionNodeData ||
             node instanceof QueryBuilderFilterTreeBlankConditionNodeData
           ) {
-            buildFilterTree(
-              filterConditionState.propertyExpressionState.propertyExpression,
-              filterState,
-              node,
-            );
+            if (
+              filterConditionState.sourceState instanceof
+              FilterRelationColumnSourceState
+            ) {
+              // Relation columns don't support exists handling, just add directly
+              const treeNode = new QueryBuilderFilterTreeConditionNodeData(
+                undefined,
+                filterConditionState,
+              );
+              treeNode.setIsNewlyAdded(true);
+              if (
+                node instanceof QueryBuilderFilterTreeBlankConditionNodeData
+              ) {
+                filterState.replaceBlankNodeWithNode(treeNode, node);
+              } else if (
+                node instanceof QueryBuilderFilterTreeConditionNodeData
+              ) {
+                filterState.newGroupWithConditionFromNode(treeNode, node);
+              } else {
+                filterState.addNodeFromNode(treeNode, node);
+              }
+            } else {
+              buildFilterTree(
+                filterConditionState.propertyExpressionState.propertyExpression,
+                filterState,
+                node,
+              );
+            }
           }
         }
       },
@@ -1652,34 +1699,56 @@ export const QueryBuilderFilterPanel = observer(
     const handleDrop = useCallback(
       (item: QueryBuilderFilterNodeDropTarget, type: string): void => {
         try {
-          let propertyExpression;
-          if (type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE) {
-            if (
-              (item as QueryBuilderProjectionColumnDragSource)
-                .columnState instanceof QueryBuilderSimpleProjectionColumnState
-            ) {
-              propertyExpression = cloneAbstractPropertyExpression(
-                (
-                  (item as QueryBuilderProjectionColumnDragSource)
-                    .columnState as QueryBuilderSimpleProjectionColumnState
-                ).propertyExpressionState.propertyExpression,
-                queryBuilderState.observerContext,
-              );
+          if (type === QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN) {
+            const columnNode = (
+              item as QueryBuilderExplorerTreeRelationColumnDragSource
+            ).node;
+            const sourceState = new FilterRelationColumnSourceState(
+              columnNode.column.name,
+              columnNode.type,
+            );
+            const filterConditionState = new FilterConditionState(
+              filterState,
+              sourceState,
+            );
+            const treeNode = new QueryBuilderFilterTreeConditionNodeData(
+              undefined,
+              filterConditionState,
+            );
+            treeNode.setIsNewlyAdded(true);
+            filterState.setSelectedNode(undefined);
+            filterState.addNodeFromNode(treeNode, undefined);
+          } else {
+            let propertyExpression;
+            if (type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE) {
+              if (
+                (item as QueryBuilderProjectionColumnDragSource)
+                  .columnState instanceof
+                QueryBuilderSimpleProjectionColumnState
+              ) {
+                propertyExpression = cloneAbstractPropertyExpression(
+                  (
+                    (item as QueryBuilderProjectionColumnDragSource)
+                      .columnState as QueryBuilderSimpleProjectionColumnState
+                  ).propertyExpressionState.propertyExpression,
+                  queryBuilderState.observerContext,
+                );
+              } else {
+                throw new UnsupportedOperationError(
+                  `Dragging and Dropping derivation projection column is not supported.`,
+                );
+              }
             } else {
-              throw new UnsupportedOperationError(
-                `Dragging and Dropping derivation projection column is not supported.`,
-              );
+              propertyExpression =
+                buildPropertyExpressionFromExplorerTreeNodeData(
+                  (item as QueryBuilderExplorerTreeDragSource).node,
+                  filterState.queryBuilderState.explorerState,
+                );
             }
-          } else {
-            propertyExpression =
-              buildPropertyExpressionFromExplorerTreeNodeData(
-                (item as QueryBuilderExplorerTreeDragSource).node,
-                filterState.queryBuilderState.explorerState,
-              );
+            // NOTE: unfocus the current node when DnD a new node to the tree
+            filterState.setSelectedNode(undefined);
+            buildFilterTree(propertyExpression, filterState);
           }
-          // NOTE: unfocus the current node when DnD a new node to the tree
-          filterState.setSelectedNode(undefined);
-          buildFilterTree(propertyExpression, filterState);
         } catch (error) {
           assertErrorThrown(error);
           applicationStore.notificationService.notifyWarning(error.message);

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

@@ -280,7 +280,17 @@ export const QueryBuilderTDSCellSelectionStatsBar = observer(
           <span className="query-builder__result__tds-grid__stats-bar__item__label">
             Count:
           </span>
-          <span className="query-builder__result__tds-grid__stats-bar__item__value">
+          <span
+            className={clsx(
+              'query-builder__result__tds-grid__stats-bar__item__value',
+              {
+                'query-builder__result__tds-grid__stats-bar__item__value--with-chart':
+                  !loading &&
+                  stats.valueFrequencies !== undefined &&
+                  stats.valueFrequencies.length > 0,
+              },
+            )}
+          >
             {countReady ? cellCount : <StatsSpinner />}
           </span>
           {!loading &&
@@ -305,7 +315,17 @@ export const QueryBuilderTDSCellSelectionStatsBar = observer(
           <span className="query-builder__result__tds-grid__stats-bar__item__label">
             Unique Count:
           </span>
-          <span className="query-builder__result__tds-grid__stats-bar__item__value">
+          <span
+            className={clsx(
+              'query-builder__result__tds-grid__stats-bar__item__value',
+              {
+                'query-builder__result__tds-grid__stats-bar__item__value--with-chart':
+                  !loading &&
+                  stats.valueFrequencies !== undefined &&
+                  stats.valueFrequencies.length > 0,
+              },
+            )}
+          >
             {loading ? <StatsSpinner /> : stats.uniqueCount}
           </span>
           {!loading &&
@@ -330,7 +350,17 @@ export const QueryBuilderTDSCellSelectionStatsBar = observer(
           <span className="query-builder__result__tds-grid__stats-bar__item__label">
             Empty Count:
           </span>
-          <span className="query-builder__result__tds-grid__stats-bar__item__value">
+          <span
+            className={clsx(
+              'query-builder__result__tds-grid__stats-bar__item__value',
+              {
+                'query-builder__result__tds-grid__stats-bar__item__value--with-chart':
+                  !loading &&
+                  stats.valueFrequencies !== undefined &&
+                  stats.valueFrequencies.length > 0,
+              },
+            )}
+          >
             {loading ? <StatsSpinner /> : stats.nullCount}
           </span>
           {!loading &&

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

@@ -88,6 +88,7 @@ import {
   FilterValueSpecConditionValueState,
   isCollectionProperty,
   QueryBuilderFilterTreeConditionNodeData,
+  FilterPropertyExpressionSourceState,
 } from '../../../stores/filter/QueryBuilderFilterState.js';
 import { QueryBuilderAggregateColumnState } from '../../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregationState.js';
 import type { QueryBuilderFilterOperator } from '../../../stores/filter/QueryBuilderFilterOperator.js';
@@ -188,7 +189,9 @@ const getExistingFilterNode = (
     .filter(filterByType(QueryBuilderFilterTreeConditionNodeData))
     .filter(
       (node) =>
-        node.condition.propertyExpressionState.path ===
+        node.condition.sourceState instanceof
+          FilterPropertyExpressionSourceState &&
+        node.condition.sourceState.propertyExpressionState.path ===
           propertyExpressionState?.path &&
         operators
           .map((op) => op.getLabel())

package/src/components/sql-playground/SQLPlaygroundPanel.tsx

@@ -26,6 +26,7 @@ import {
   SquareIcon,
 } from '@finos/legend-art';
 import { prettyDuration } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
 import {
   PlaygroundSQLCodeEditor,
   type SQLPlaygroundPanelProps,
@@ -51,6 +52,10 @@ export const SQLPlaygroundEditorResultPanel = observer(
       accessorExplorerState,
       showAccessorExplorer = false,
     } = props;
+    const applicationStore = useApplicationStore();
+    const isGlobalDarkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const effectiveDarkMode = enableDarkMode || isGlobalDarkMode;
 
     const executeRawSQL = (): void => {
       playgroundState.executeRawSQL();
@@ -91,14 +96,14 @@ export const SQLPlaygroundEditorResultPanel = observer(
                   playgroundState={playgroundState}
                   advancedMode={advancedMode}
                   disableDragDrop={disableDragDrop}
-                  enableDarkMode={enableDarkMode}
+                  enableDarkMode={effectiveDarkMode}
                 />
               </ResizablePanel>
               <ResizablePanelSplitter />
               <ResizablePanel size={300}>
                 <div
                   className={clsx('panel__header', {
-                    'panel__header--dark': enableDarkMode,
+                    'panel__header--dark': effectiveDarkMode,
                   })}
                 >
                   <div className="panel__header__title">
@@ -115,7 +120,7 @@ export const SQLPlaygroundEditorResultPanel = observer(
                         (resultDescription ?? '')}
                     </div>
                   </div>
-                  <div className={!enableDarkMode ? 'light-mode' : ''}>
+                  <div className={clsx({ 'light-mode': !effectiveDarkMode })}>
                     <div className="panel__header__actions query-builder__result__header__actions">
                       {advancedMode && (
                         <div className="query-builder__result__advanced__mode">
@@ -166,7 +171,7 @@ export const SQLPlaygroundEditorResultPanel = observer(
                     result={playgroundState.sqlExecutionResult.value}
                     useAdvancedGrid={advancedMode}
                     useLocalMode={playgroundState.isLocalModeEnabled}
-                    enableDarkMode={enableDarkMode}
+                    enableDarkMode={effectiveDarkMode}
                   />
                 )}
                 {playgroundState.sqlExecutionResult instanceof
@@ -177,7 +182,7 @@ export const SQLPlaygroundEditorResultPanel = observer(
                       result={playgroundState.sqlExecutionResult.result}
                       useAdvancedGrid={advancedMode}
                       useLocalMode={playgroundState.isLocalModeEnabled}
-                      enableDarkMode={enableDarkMode}
+                      enableDarkMode={effectiveDarkMode}
                     />
                   )}
               </ResizablePanel>

package/src/index.ts

@@ -67,7 +67,7 @@ export {
   type ModelAccessPointGroupOption,
   buildModelAccessPointGroupOption,
   type ExecutionIdOption,
-  buildDataProductAccessor,
+  resolveDataProductAccessor,
   NativeModelDataProductExecutionState,
   ModelAccessPointDataProductExecutionState,
   LakehouseDataProductExecutionState,

package/src/stores/QueryBuilderStateBuilder.ts

@@ -55,7 +55,7 @@ import {
   PackageableElementExplicitReference,
   MILESTONING_STEREOTYPE,
   type ColSpecInstanceValue,
-  type AccessorInstanceValue,
+  AccessorInstanceValue,
   RelationColumn,
 } from '@finos/legend-graph';
 import { processTDSPostFilterExpression } from './fetch-structure/tds/post-filter/QueryBuilderPostFilterStateBuilder.js';
@@ -606,8 +606,21 @@ export class QueryBuilderValueSpecificationProcessor
       );
 
       // check preceding expression
+      // For accessor queries, the preceding expression is an AccessorInstanceValue (table reference),
+      // not a SimpleFunctionExpression
+      const precedingValueSpec = valueSpecification.parametersValues[0];
+      if (precedingValueSpec instanceof AccessorInstanceValue) {
+        QueryBuilderValueSpecificationProcessor.process(
+          precedingValueSpec,
+          this.parentLambda,
+          this.queryBuilderState,
+        );
+        processFilterExpression(valueSpecification, this.queryBuilderState);
+        return;
+      }
+
       const precedingExpression = guaranteeType(
-        valueSpecification.parametersValues[0],
+        precedingValueSpec,
         SimpleFunctionExpression,
         `Can't process filter() expression: only support filter() immediately following an expression`,
       );

package/src/stores/QueryBuilderStateHashUtils.ts

@@ -94,6 +94,8 @@ export enum QUERY_BUILDER_STATE_HASH_STRUCTURE {
   FILTER_TREE_CONDIITION_NODE_DATA = 'FILTER_TREE_CONDITION_NODE_DATA',
   FILTER_TREE_BLANK_CONDITION_NODE_DATA = 'FILTER_TREE_BLANK_CONDITION_NODE_DATA',
   FILTER_CONDITION_STATE = 'FILTER_CONDITION_STATE',
+  FILTER_CONDITION_SOURCE_PROPERTY_EXPRESSION = 'FILTER_CONDITION_SOURCE_PROPERTY_EXPRESSION',
+  FILTER_CONDITION_SOURCE_RELATION_COLUMN = 'FILTER_CONDITION_SOURCE_RELATION_COLUMN',
   FILTER_CONDITION_RIGHT_VALUE = 'FILTER_CONDITION_RIGHT_VALUE',
   FILTER_CONDITION_RIGHT_VALUE_SPEC = 'FILTER_CONDITION_RIGHT_VALUE_SPEC',
   FILTER_OPERATOR_CONTAIN = 'FILTER_OPERATOR_CONTAIN',