@finos/legend-query-builder 4.14.29 → 4.14.31

package/lib/stores/workflows/ServiceQueryBuilderState.js

@@ -26,8 +26,8 @@ export class ServiceQueryBuilderState extends QueryBuilderState {
     onExecutionContextChange;
     TEMPORARY__setupPanelContentRenderer = () => renderServiceQueryBuilderSetupPanelContent(this);
     selectedExecutionContext;
-    constructor(applicationStore, graphManagerState, service, usableServices, executionContextKey, onServiceChange, onExecutionContextChange, config, sourceInfo) {
-        super(applicationStore, graphManagerState, config, sourceInfo);
+    constructor(applicationStore, graphManagerState, workflowState, service, usableServices, executionContextKey, onServiceChange, onExecutionContextChange, config, sourceInfo) {
+        super(applicationStore, graphManagerState, workflowState, config, sourceInfo);
         makeObservable(this, {
             selectedExecutionContext: observable,
             setSelectedExecutionContext: action,

package/lib/stores/workflows/ServiceQueryBuilderState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceQueryBuilderState.js","sourceRoot":"","sources":["../../../src/stores/workflows/ServiceQueryBuilderState.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ServiceQueryBuilderState.js","sourceRoot":"","sources":["../../../src/stores/workflows/ServiceQueryBuilderState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.14.29",
+  "version": "4.14.31",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -44,8 +44,8 @@
   "dependencies": {
     "@finos/legend-application": "15.0.75",
     "@finos/legend-art": "7.1.27",
-    "@finos/legend-graph": "31.9.13",
-    "@finos/legend-lego": "1.2.27",
+    "@finos/legend-graph": "31.9.14",
+    "@finos/legend-lego": "1.2.28",
     "@finos/legend-server-depot": "6.0.39",
     "@finos/legend-shared": "10.0.34",
     "@finos/legend-storage": "3.0.84",

package/src/components/QueryBuilder.tsx

@@ -44,13 +44,17 @@ import {
   SerializeIcon,
   DataAccessIcon,
   AssistantIcon,
+  clsx,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
 import { QueryBuilderSidebar } from './QueryBuilderSideBar.js';
 import { QueryBuilderResultPanel } from './result/QueryBuilderResultPanel.js';
 import { QueryBuilderTextEditor } from './QueryBuilderTextEditor.js';
-import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import {
+  QUERY_BUILDER_LAMBDA_WRITER_MODE,
+  type QueryBuilderState,
+} from '../stores/QueryBuilderState.js';
 import { QueryBuilderTextEditorMode } from '../stores/QueryBuilderTextEditorState.js';
 import { QueryBuilderFetchStructurePanel } from './fetch-structure/QueryBuilderFetchStructurePanel.js';
 import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
@@ -61,6 +65,7 @@ import {
   useCommands,
   ActionAlertActionType,
   ActionAlertType,
+  useApplicationStore,
 } from '@finos/legend-application';
 import { QueryBuilderParametersPanel } from './QueryBuilderParametersPanel.js';
 import { QueryBuilderFunctionsExplorerPanel } from './explorer/QueryBuilderFunctionsExplorerPanel.js';
@@ -77,6 +82,8 @@ import { DataAccessOverview } from './data-access/DataAccessOverview.js';
 import { QueryChat } from './QueryChat.js';
 import { useEffect, useRef } from 'react';
 import { RedoButton, UndoButton } from '@finos/legend-lego/application';
+import { FETCH_STRUCTURE_IMPLEMENTATION } from '../stores/fetch-structure/QueryBuilderFetchStructureImplementationState.js';
+import { onChangeFetchStructureImplementation } from '../stores/fetch-structure/QueryBuilderFetchStructureState.js';
 
 const QueryBuilderPostGraphFetchPanel = observer(
   (props: { graphFetchState: QueryBuilderGraphFetchTreeState }) => {
@@ -93,6 +100,138 @@ const QueryBuilderPostGraphFetchPanel = observer(
   },
 );
 
+const QueryBuilderStatusBar = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+    const showDiff = (): void =>
+      queryBuilderState.changeDetectionState.showDiffViewPanel();
+    const openLambdaEditor = (mode: QueryBuilderTextEditorMode): void =>
+      queryBuilderState.textEditorState.openModal(mode);
+    const compile = applicationStore.guardUnhandledError(() =>
+      flowResult(queryBuilderState.compileQuery()),
+    );
+    const toggleAssistant = (): void =>
+      applicationStore.assistantService.toggleAssistant();
+    const openQueryChat = (): void =>
+      queryBuilderState.setIsQueryChatOpened(true);
+
+    return (
+      <div className="query-builder__status-bar">
+        <div className="query-builder__status-bar__left"></div>
+        <div className="query-builder__status-bar__right">
+          {queryBuilderState.changeDetectionState.initState.hasCompleted && (
+            <>
+              <button
+                className={clsx(
+                  'query-builder__status-bar__action query-builder__status-bar__view-diff-btn',
+                )}
+                disabled={!queryBuilderState.changeDetectionState.hasChanged}
+                onClick={showDiff}
+                tabIndex={-1}
+                title={
+                  queryBuilderState.changeDetectionState.hasChanged
+                    ? 'Show changes'
+                    : 'Query has not been changed'
+                }
+              >
+                <DiffIcon />
+              </button>
+              {queryBuilderState.changeDetectionState.diffViewState && (
+                <QueryBuilderDiffViewPanelDiaglog
+                  diffViewState={
+                    queryBuilderState.changeDetectionState.diffViewState
+                  }
+                />
+              )}
+            </>
+          )}
+          {queryBuilderState.isQueryChatOpened && (
+            <QueryChat queryBuilderState={queryBuilderState} />
+          )}
+          {!queryBuilderState.config?.TEMPORARY__disableQueryBuilderChat && (
+            <button
+              className={clsx(
+                'query-builder__status-bar__action query-builder__status-bar__action__toggler',
+                {
+                  'query-builder__status-bar__action__toggler--toggled':
+                    queryBuilderState.isQueryChatOpened === true,
+                },
+              )}
+              onClick={openQueryChat}
+              tabIndex={-1}
+              title="Open Query Chat"
+            >
+              <ChatIcon />
+            </button>
+          )}
+          <button
+            className={clsx(
+              'query-builder__status-bar__action query-builder__status-bar__compile-btn',
+              {
+                'query-builder__status-bar__compile-btn--wiggling':
+                  queryBuilderState.queryCompileState.isInProgress,
+              },
+            )}
+            disabled={queryBuilderState.queryCompileState.isInProgress}
+            onClick={compile}
+            tabIndex={-1}
+            title="Compile (F9)"
+          >
+            <HammerIcon />
+          </button>
+          <button
+            className={clsx(
+              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
+              {
+                'query-builder__status-bar__action__toggler--toggled':
+                  queryBuilderState.textEditorState.mode ===
+                  QueryBuilderTextEditorMode.JSON,
+              },
+            )}
+            onClick={(): void =>
+              openLambdaEditor(QueryBuilderTextEditorMode.JSON)
+            }
+            tabIndex={-1}
+            title="View Query Protocol"
+          >{`{ }`}</button>
+          <button
+            className={clsx(
+              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
+              {
+                'query-builder__status-bar__action__toggler--toggled':
+                  queryBuilderState.textEditorState.mode ===
+                  QueryBuilderTextEditorMode.TEXT,
+              },
+            )}
+            onClick={(): void =>
+              openLambdaEditor(QueryBuilderTextEditorMode.TEXT)
+            }
+            tabIndex={-1}
+            title="View Query in Pure"
+          >
+            <HackerIcon />
+          </button>
+          <button
+            className={clsx(
+              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
+              {
+                'query-builder__status-bar__action__toggler--toggled':
+                  !applicationStore.assistantService.isHidden,
+              },
+            )}
+            onClick={toggleAssistant}
+            tabIndex={-1}
+            title="Toggle assistant"
+          >
+            <AssistantIcon />
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
 export const QueryBuilder = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
@@ -191,6 +330,36 @@ export const QueryBuilder = observer(
       }
     };
 
+    const toggleTypedRelation = (): void => {
+      if (queryBuilderState.isFetchStructureTyped) {
+        queryBuilderState.setLambdaWriteMode(
+          QUERY_BUILDER_LAMBDA_WRITER_MODE.STANDARD,
+        );
+      } else {
+        queryBuilderState.applicationStore.alertService.setActionAlertInfo({
+          message:
+            'You are about to change to use typed TDS functions. Please proceed with caution as this is still an experimental feature.',
+          prompt: ' Do you want to proceed?',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Proceed',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              handler: (): void =>
+                queryBuilderState.setLambdaWriteMode(
+                  QUERY_BUILDER_LAMBDA_WRITER_MODE.TYPED_FETCH_STRUCTURE,
+                ),
+            },
+            {
+              label: 'Cancel',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+            },
+          ],
+        });
+      }
+    };
+
     const editQueryInPure = (): void => {
       openLambdaEditor(QueryBuilderTextEditorMode.TEXT);
     };
@@ -278,7 +447,12 @@ export const QueryBuilder = observer(
         <BackdropContainer
           elementId={QUERY_BUILDER_COMPONENT_ELEMENT_ID.BACKDROP_CONTAINER}
         />
-        <div className="query-builder__body">
+        <div
+          className={clsx('query-builder__body', {
+            'query-builder__body__status-bar':
+              queryBuilderState.workflowState.showStatusBar,
+          })}
+        >
           <PanelLoadingIndicator
             isLoading={queryBuilderState.resultState.exportState.isInProgress}
           />
@@ -401,6 +575,22 @@ export const QueryBuilder = observer(
                         </MenuContentItemIcon>
                         <MenuContentItemLabel>Show Filter</MenuContentItemLabel>
                       </MenuContentItem>
+                      <MenuContentItem
+                        onClick={onChangeFetchStructureImplementation(
+                          isTDSState
+                            ? FETCH_STRUCTURE_IMPLEMENTATION.GRAPH_FETCH
+                            : FETCH_STRUCTURE_IMPLEMENTATION.TABULAR_DATA_STRUCTURE,
+                          fetchStructureState,
+                        )}
+                        disabled={!queryBuilderState.isQuerySupported}
+                      >
+                        <MenuContentItemIcon>
+                          {isTDSState ? <CheckIcon /> : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel>
+                          Tabular Data Structure
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
                       <MenuContentDivider />
                       <MenuContentItem
                         onClick={toggleShowOLAPGroupByPanel}
@@ -482,6 +672,25 @@ export const QueryBuilder = observer(
                           Enable Calendar
                         </MenuContentItemLabel>
                       </MenuContentItem>
+                      <MenuContentItem
+                        onClick={toggleTypedRelation}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          !(
+                            queryBuilderState.fetchStructureState
+                              .implementation instanceof QueryBuilderTDSState
+                          )
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.isFetchStructureTyped ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel>
+                          Enable Typed TDS (BETA)
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
                       <MenuContentDivider />
                       <MenuContentItem
                         onClick={openCheckEntitlmentsEditor}
@@ -735,6 +944,9 @@ export const QueryBuilder = observer(
             </Dialog>
           )}
         </div>
+        {queryBuilderState.workflowState.showStatusBar ? (
+          <QueryBuilderStatusBar queryBuilderState={queryBuilderState} />
+        ) : null}
       </div>
     );
   },

package/src/components/__test-utils__/QueryBuilderComponentTestUtils.tsx

@@ -51,6 +51,7 @@ import {
 } from '../../stores/__test-utils__/QueryBuilderStateTestUtils.js';
 import { STYLE_PREFIX, STYLE_PREFIX__DARK } from '@finos/legend-art';
 import { expect } from '@jest/globals';
+import { QueryBuilderAdvancedWorkflowState } from '../../stores/query-workflow/QueryBuilderWorkFlowState.js';
 
 const getSelectorContainerClassName = (lightMode?: boolean): string =>
   '.' + `${lightMode ? STYLE_PREFIX : STYLE_PREFIX__DARK}__value-container`;
@@ -198,6 +199,7 @@ export const TEST__setUpQueryBuilder = async (
   const queryBuilderState = new INTERNAL__BasicQueryBuilderState(
     MOCK__applicationStore,
     graphManagerState,
+    QueryBuilderAdvancedWorkflowState.INSTANCE,
     undefined,
   );
   const mapping = graphManagerState.graph.getMapping(mappingPath);

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

@@ -32,6 +32,7 @@ import { QueryBuilderGraphFetchTreeState } from '../../stores/fetch-structure/gr
 import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 import { FETCH_STRUCTURE_IMPLEMENTATION } from '../../stores/fetch-structure/QueryBuilderFetchStructureImplementationState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
+import { onChangeFetchStructureImplementation } from '../../stores/fetch-structure/QueryBuilderFetchStructureState.js';
 
 const QueryBuilderFetchStructureEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -68,24 +69,18 @@ export const QueryBuilderFetchStructurePanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     const fetchStructureState = queryBuilderState.fetchStructureState;
-
-    const onChangeFetchStructureImplementation =
-      (implementationType: FETCH_STRUCTURE_IMPLEMENTATION): (() => void) =>
-      (): void => {
-        if (fetchStructureState.implementation.type !== implementationType) {
-          fetchStructureState.implementation.checkBeforeChangingImplementation(
-            () => {
-              fetchStructureState.changeImplementation(implementationType);
-            },
-          );
-        }
-      };
+    const fetchConfig =
+      queryBuilderState.workflowState.getFetchStructureLayoutConfig(
+        queryBuilderState,
+      );
 
     return (
       <Panel data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FETCH_STRUCTURE}>
         <PanelHeader>
           <div className="panel__header__title">
-            <div className="panel__header__title__label">fetch structure</div>
+            <div className="panel__header__title__label">
+              {fetchConfig.label}
+            </div>
             {fetchStructureState.implementation.fetchStructureValidationIssues
               .length !== 0 && (
               <QueryBuilderPanelIssueCountBadge
@@ -96,22 +91,27 @@ export const QueryBuilderFetchStructurePanel = observer(
               />
             )}
           </div>
-          <PanelHeaderActions>
-            <div className="query-builder__fetch__structure__modes">
-              {Object.values(FETCH_STRUCTURE_IMPLEMENTATION).map((type) => (
-                <button
-                  onClick={onChangeFetchStructureImplementation(type)}
-                  className={clsx('query-builder__fetch__structure__mode', {
-                    'query-builder__fetch__structure__mode--selected':
-                      type === fetchStructureState.implementation.type,
-                  })}
-                  key={type}
-                >
-                  {prettyCONSTName(type)}
-                </button>
-              ))}
-            </div>
-          </PanelHeaderActions>
+          {fetchConfig.showInFetchPanel ? (
+            <PanelHeaderActions>
+              <div className="query-builder__fetch__structure__modes">
+                {Object.values(FETCH_STRUCTURE_IMPLEMENTATION).map((type) => (
+                  <button
+                    onClick={onChangeFetchStructureImplementation(
+                      type,
+                      fetchStructureState,
+                    )}
+                    className={clsx('query-builder__fetch__structure__mode', {
+                      'query-builder__fetch__structure__mode--selected':
+                        type === fetchStructureState.implementation.type,
+                    })}
+                    key={type}
+                  >
+                    {prettyCONSTName(type)}
+                  </button>
+                ))}
+              </div>
+            </PanelHeaderActions>
+          ) : null}
         </PanelHeader>
         <QueryBuilderFetchStructureEditor
           queryBuilderState={queryBuilderState}

package/src/graph/QueryBuilderMetaModelConst.ts

@@ -24,6 +24,8 @@ export enum QUERY_BUILDER_PURE_PATH {
   DURATION_UNIT = 'meta::pure::functions::date::DurationUnit',
   DAY_OF_WEEK = 'meta::pure::functions::date::DayOfWeek',
 
+  // RELATION
+  RELATION = 'meta::pure::metamodel::relation::Relation',
   // serialization
   SERIALIZE_CONFIG = 'meta::pure::graphFetch::execution::AlloySerializationConfig',
 }
@@ -31,6 +33,7 @@ export enum QUERY_BUILDER_PURE_PATH {
 export enum QUERY_BUILDER_SUPPORTED_CALENDAR_AGGREGATION_FUNCTIONS {
   CALENDAR_ANNUALIZED = 'meta::pure::functions::date::calendar::annualized',
   CALENDAR_CME = ' meta::pure::functions::date::calendar::cme',
+
   CALENDAR_CW = 'meta::pure::functions::date::calendar::cw',
   CALENDAR_CW_FM = 'meta::pure::functions::date::calendar::cw_fm',
   CALENDAR_CY_MINUS2 = 'meta::pure::functions::date::calendar::CYMinus2',
@@ -114,6 +117,10 @@ export enum QUERY_BUILDER_SUPPORTED_FUNCTIONS {
   TDS_RESTRICT = 'meta::pure::tds::restrict',
   TDS_FUNC = 'meta::pure::tds::func',
 
+  // Relation
+  RELATION_PROJECT = 'meta::pure::functions::relation::project',
+  RELATION_LIMIT = 'meta::pure::functions::relation::limit',
+
   // filter
   CONTAINS = 'meta::pure::functions::string::contains',
   ENDS_WITH = 'meta::pure::functions::string::endsWith',

package/src/graph-manager/protocol/pure/QueryBuilder_PureProtocolProcessorPlugin.ts

@@ -146,10 +146,10 @@ export class QueryBuilder_PureProtocolProcessorPlugin extends PureProtocolProces
             processingContext,
           );
         } else if (
-          matchFunctionName(
-            functionName,
+          matchFunctionName(functionName, [
             QUERY_BUILDER_SUPPORTED_FUNCTIONS.TDS_PROJECT,
-          )
+            QUERY_BUILDER_SUPPORTED_FUNCTIONS.RELATION_PROJECT,
+          ])
         ) {
           return V1_buildProjectFunctionExpression(
             functionName,

package/src/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.ts

@@ -21,6 +21,7 @@ import {
   filterByType,
   guaranteeNonNullable,
   guaranteeType,
+  isNonNullable,
   returnUndefOnError,
 } from '@finos/legend-shared';
 import {
@@ -56,6 +57,11 @@ import {
   LambdaFunction,
   LambdaFunctionInstanceValue,
   PackageableElementExplicitReference,
+  V1_ClassInstance,
+  V1_ColSpecArray,
+  ColSpecArrayInstance,
+  ColSpecArray,
+  ColSpec,
 } from '@finos/legend-graph';
 import {
   QUERY_BUILDER_PURE_PATH,
@@ -574,6 +580,110 @@ export const V1_buildFilterFunctionExpression = (
   return expression;
 };
 
+export const V1_buildTypedProjectFunctionExpression = (
+  functionName: string,
+  parameters: V1_ValueSpecification[],
+  openVariables: string[],
+  compileContext: V1_GraphBuilderContext,
+  processingContext: V1_ProcessingContext,
+): SimpleFunctionExpression => {
+  assertTrue(
+    parameters.length === 2,
+    `Can't build relation project() expression: project() expects 2 arguments`,
+  );
+
+  let topLevelLambdaParameters: V1_Variable[] = [];
+  const precedingExperession = (
+    parameters[0] as V1_ValueSpecification
+  ).accept_ValueSpecificationVisitor(
+    new V1_ValueSpecificationBuilder(
+      compileContext,
+      processingContext,
+      openVariables,
+    ),
+  );
+  assertNonNullable(
+    precedingExperession.genericType,
+    `Can't build relation project() expression: preceding expression return type is missing`,
+  );
+
+  const classInstance = parameters[1];
+  assertType(
+    classInstance,
+    V1_ClassInstance,
+    `Can't build relation project() expression: project() expects argument #1 to be a ClassInstance`,
+  );
+  const specArray = guaranteeType(
+    classInstance.value,
+    V1_ColSpecArray,
+    `Can't build relation project() expression: project() expects argument #1 to hold spec array instances value`,
+  );
+
+  topLevelLambdaParameters = specArray.colSpecs
+    .map((e) => e.function1)
+    .filter(isNonNullable)
+    .filter(filterByType(V1_Lambda))
+    .map((lambda) => lambda.parameters)
+    .flat();
+
+  const variables = new Set<string>();
+  // Make sure top-level lambdas have their lambda parameter types set properly
+  topLevelLambdaParameters.forEach((variable) => {
+    if (!variables.has(variable.name) && !variable.class) {
+      const variableExpression = new VariableExpression(
+        variable.name,
+        precedingExperession.multiplicity,
+      );
+      variableExpression.genericType = precedingExperession.genericType;
+      processingContext.addInferredVariables(variable.name, variableExpression);
+    }
+  });
+  const processedExpression = new ColSpecArrayInstance(Multiplicity.ONE);
+  const processedColSpecArray = new ColSpecArray();
+  processedExpression.values = [processedColSpecArray];
+
+  processedColSpecArray.colSpecs = specArray.colSpecs.map((colSpec) => {
+    const pColSpec = new ColSpec();
+    let lambda: ValueSpecification;
+    const _funct = guaranteeType(
+      colSpec.function1,
+      V1_ValueSpecification,
+      `Can't build relation col spec() expression: expects function1 to be a lambda`,
+    );
+    try {
+      lambda = buildProjectionColumnLambda(
+        _funct,
+        openVariables,
+        compileContext,
+        processingContext,
+      );
+    } catch {
+      lambda = new INTERNAL__UnknownValueSpecification(
+        V1_serializeValueSpecification(
+          _funct,
+          compileContext.extensions.plugins,
+        ),
+      );
+    }
+    pColSpec.function1 = lambda;
+    pColSpec.name = colSpec.name;
+    return pColSpec;
+  });
+
+  const expression = V1_buildBaseSimpleFunctionExpression(
+    [precedingExperession, processedExpression],
+    functionName,
+    compileContext,
+  );
+  expression.genericType = GenericTypeExplicitReference.create(
+    new GenericType(
+      compileContext.resolveType(QUERY_BUILDER_PURE_PATH.RELATION).value,
+    ),
+  );
+
+  return expression;
+};
+
 export const V1_buildProjectFunctionExpression = (
   functionName: string,
   parameters: V1_ValueSpecification[],
@@ -581,8 +691,19 @@ export const V1_buildProjectFunctionExpression = (
   compileContext: V1_GraphBuilderContext,
   processingContext: V1_ProcessingContext,
 ): SimpleFunctionExpression => {
+  if (parameters.length === 2) {
+    return V1_buildTypedProjectFunctionExpression(
+      functionName,
+      parameters,
+      openVariables,
+      compileContext,
+      processingContext,
+    );
+  }
+
+  const length = parameters.length;
   assertTrue(
-    parameters.length === 3,
+    length === 3 || length === 2,
     `Can't build project() expression: project() expects 2 arguments`,
   );
 

package/src/index.ts

@@ -93,3 +93,4 @@ export * from './stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
 
 export * from './stores/data-access/DataAccessState.js';
 export * from './components/data-access/DataAccessOverview.js';
+export * from './stores/query-workflow/QueryBuilderWorkFlowState.js';

package/src/stores/QueryBuilderResultState.ts

@@ -312,6 +312,7 @@ export class QueryBuilderResultState {
     if (this.queryBuilderState.isQuerySupported) {
       const lambdaFunction = buildLambdaFunction(this.queryBuilderState, {
         isBuildingExecutionQuery: true,
+        useTypedRelationFunctions: this.queryBuilderState.isFetchStructureTyped,
         ...executionOptions,
       });
       query = buildRawLambdaFromLambdaFunction(