@finos/legend-application-query 5.2.4 → 5.2.7

package/src/stores/fetch-structure/QueryBuilderFetchStructureImplementationState.ts

@@ -14,9 +14,22 @@
  * limitations under the License.
  */
 
+import type {
+  Class,
+  CompilationError,
+  LambdaFunction,
+} from '@finos/legend-graph';
+import { computed, makeObservable } from 'mobx';
+import type { QueryBuilderExplorerTreePropertyNodeData } from '../explorer/QueryBuilderExplorerState.js';
 import type { QueryBuilderState } from '../QueryBuilderState.js';
+import type { LambdaFunctionBuilderOption } from '../QueryBuilderValueSpecificationBuilderHelper.js';
 import type { QueryBuilderFetchStructureState } from './QueryBuilderFetchStructureState.js';
 
+export enum FETCH_STRUCTURE_IMPLEMENTATION {
+  PROJECTION = 'PROJECTION',
+  GRAPH_FETCH = 'GRAPH_FETCH',
+}
+
 export abstract class QueryBuilderFetchStructureImplementationState {
   queryBuilderState: QueryBuilderState;
   fetchStructureState: QueryBuilderFetchStructureState;
@@ -25,10 +38,28 @@ export abstract class QueryBuilderFetchStructureImplementationState {
     queryBuilderState: QueryBuilderState,
     fetchStructureState: QueryBuilderFetchStructureState,
   ) {
+    makeObservable(this, {
+      usedExplorerTreePropertyNodeIDs: computed,
+      validationIssues: computed,
+    });
+
     this.queryBuilderState = queryBuilderState;
     this.fetchStructureState = fetchStructureState;
   }
 
-  // abstract addProperty(node: QueryBuilderExplorerTreePropertyNodeData): void;
-  // abstract addChildrenProperties(node: QueryBuilderExplorerTreePropertyNodeData): void;
+  abstract get type(): string;
+  abstract get usedExplorerTreePropertyNodeIDs(): string[];
+  abstract get validationIssues(): string[] | undefined;
+  abstract onClassChange(_class: Class | undefined): void;
+  abstract revealCompilationError(compilationError: CompilationError): boolean;
+  abstract clearCompilationError(): void;
+  abstract fetchProperty(node: QueryBuilderExplorerTreePropertyNodeData): void;
+  abstract fetchProperties(
+    nodes: QueryBuilderExplorerTreePropertyNodeData[],
+  ): void;
+  abstract checkBeforeChangingImplementation(onChange: () => void): void;
+  abstract appendFetchStructure(
+    lambdaFunction: LambdaFunction,
+    options?: LambdaFunctionBuilderOption,
+  ): void;
 }

package/src/stores/fetch-structure/QueryBuilderFetchStructureState.ts

@@ -19,56 +19,61 @@ import type { QueryBuilderState } from '../QueryBuilderState.js';
 import { QueryBuilderGraphFetchTreeState } from './graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderProjectionState } from './projection/QueryBuilderProjectionState.js';
 import {
-  buildPropertyExpressionFromExplorerTreeNodeData,
   type QueryBuilderExplorerTreeNodeData,
   QueryBuilderExplorerTreePropertyNodeData,
 } from '../explorer/QueryBuilderExplorerState.js';
 import { Class } from '@finos/legend-graph';
-import { filterByType } from '@finos/legend-shared';
-import { addQueryBuilderPropertyNode } from './graph-fetch/QueryBuilderGraphFetchTreeUtil.js';
-import { QueryBuilderSimpleProjectionColumnState } from './projection/QueryBuilderProjectionColumnState.js';
-
-export enum FETCH_STRUCTURE_MODE {
-  PROJECTION = 'PROJECTION',
-  GRAPH_FETCH = 'GRAPH_FETCH',
-}
+import { filterByType, UnsupportedOperationError } from '@finos/legend-shared';
+import {
+  FETCH_STRUCTURE_IMPLEMENTATION,
+  type QueryBuilderFetchStructureImplementationState,
+} from './QueryBuilderFetchStructureImplementationState.js';
 
 export class QueryBuilderFetchStructureState {
   queryBuilderState: QueryBuilderState;
-  /**
-   * TODO: refactor this so we could reduce this to
-   * `implementationState: QueryBuilderFetchStructureImplementationState`
-   * so we don't have graph fetch and projection at the same time
-   *
-   * TODO?: perhaps it would eventually make sense to default to
-   * graph-fetch since `getAll()` naturally works for graph-fetch case
-   * and graph-fetch allows somewhat an empty tree
-   */
-  fetchStructureMode = FETCH_STRUCTURE_MODE.PROJECTION;
-  projectionState: QueryBuilderProjectionState;
-  graphFetchTreeState: QueryBuilderGraphFetchTreeState;
+  implementation: QueryBuilderFetchStructureImplementationState;
 
   constructor(queryBuilderState: QueryBuilderState) {
     makeAutoObservable(this, {
       queryBuilderState: false,
-      setFetchStructureMode: action,
+      changeImplementation: action,
     });
 
     this.queryBuilderState = queryBuilderState;
-    // TODO: we probably should modularize this a bit better
-    // See https://github.com/finos/legend-studio/issues/731
-    this.projectionState = new QueryBuilderProjectionState(
-      queryBuilderState,
-      this,
-    );
-    this.graphFetchTreeState = new QueryBuilderGraphFetchTreeState(
-      queryBuilderState,
+    /**
+     * TODO?: perhaps it would eventually make sense to default to
+     * graph-fetch since `getAll()` naturally works for graph-fetch case
+     * and graph-fetch allows somewhat an empty tree
+     *
+     * TODO?: we could consider making this configurable
+     */
+    this.implementation = new QueryBuilderProjectionState(
+      this.queryBuilderState,
       this,
     );
   }
 
-  setFetchStructureMode(val: FETCH_STRUCTURE_MODE): void {
-    this.fetchStructureMode = val;
+  changeImplementation(type: string): void {
+    switch (type) {
+      case FETCH_STRUCTURE_IMPLEMENTATION.PROJECTION: {
+        this.implementation = new QueryBuilderProjectionState(
+          this.queryBuilderState,
+          this,
+        );
+        return;
+      }
+      case FETCH_STRUCTURE_IMPLEMENTATION.GRAPH_FETCH: {
+        this.implementation = new QueryBuilderGraphFetchTreeState(
+          this.queryBuilderState,
+          this,
+        );
+        return;
+      }
+      default:
+        throw new UnsupportedOperationError(
+          `Can't change fetch-structure implementation to unsupported type: '${type}'`,
+        );
+    }
   }
 
   fetchProperty(node: QueryBuilderExplorerTreeNodeData): void {
@@ -76,98 +81,28 @@ export class QueryBuilderFetchStructureState {
       node instanceof QueryBuilderExplorerTreePropertyNodeData &&
       !(node.type instanceof Class)
     ) {
-      switch (this.fetchStructureMode) {
-        case FETCH_STRUCTURE_MODE.GRAPH_FETCH: {
-          this.graphFetchTreeState.addProperty(node);
-          return;
-        }
-        case FETCH_STRUCTURE_MODE.PROJECTION: {
-          this.projectionState.addColumn(
-            new QueryBuilderSimpleProjectionColumnState(
-              this.projectionState,
-              buildPropertyExpressionFromExplorerTreeNodeData(
-                this.queryBuilderState.explorerState.nonNullableTreeData,
-                node,
-                this.queryBuilderState.graphManagerState.graph,
-                this.queryBuilderState.explorerState.propertySearchPanelState
-                  .allMappedPropertyNodes,
-              ),
-              this.queryBuilderState.explorerState.humanizePropertyName,
-            ),
-          );
-          return;
-        }
-        default:
-          return;
-      }
+      this.implementation.fetchProperty(node);
     }
   }
 
   fetchNodeChildrenProperties(node: QueryBuilderExplorerTreeNodeData): void {
     if (node.type instanceof Class) {
-      // NOTE: here we require the node to already been expanded so the child nodes are generated
-      // we don't allow adding unopened node. Maybe if it helps, we can show a warning.
-      const nodesToAdd = node.childrenIds
-        .map((childId) =>
-          this.queryBuilderState.explorerState.nonNullableTreeData.nodes.get(
-            childId,
+      this.implementation.fetchProperties(
+        // NOTE: here we require the node to already been expanded so the child nodes are generated
+        // we don't allow adding unopened node. Maybe if it helps, we can show a warning.
+        node.childrenIds
+          .map((childId) =>
+            this.queryBuilderState.explorerState.nonNullableTreeData.nodes.get(
+              childId,
+            ),
+          )
+          .filter(filterByType(QueryBuilderExplorerTreePropertyNodeData))
+          .filter(
+            (childNode) =>
+              !(childNode.type instanceof Class) &&
+              childNode.mappingData.mapped,
           ),
-        )
-        .filter(filterByType(QueryBuilderExplorerTreePropertyNodeData))
-        .filter(
-          (childNode) =>
-            !(childNode.type instanceof Class) && childNode.mappingData.mapped,
-        );
-
-      switch (this.fetchStructureMode) {
-        case FETCH_STRUCTURE_MODE.GRAPH_FETCH: {
-          const graphFetchTreeData = this.graphFetchTreeState.treeData;
-          if (graphFetchTreeData) {
-            nodesToAdd.forEach((nodeToAdd) =>
-              addQueryBuilderPropertyNode(
-                graphFetchTreeData,
-                this.queryBuilderState.explorerState.nonNullableTreeData,
-                nodeToAdd,
-                this.queryBuilderState,
-              ),
-            );
-            this.graphFetchTreeState.setGraphFetchTree({
-              ...graphFetchTreeData,
-            });
-          }
-          return;
-        }
-        case FETCH_STRUCTURE_MODE.PROJECTION: {
-          nodesToAdd.forEach((nodeToAdd) => {
-            this.projectionState.addColumn(
-              new QueryBuilderSimpleProjectionColumnState(
-                this.projectionState,
-                buildPropertyExpressionFromExplorerTreeNodeData(
-                  this.queryBuilderState.explorerState.nonNullableTreeData,
-                  nodeToAdd,
-                  this.queryBuilderState.graphManagerState.graph,
-                  this.queryBuilderState.explorerState.propertySearchPanelState
-                    .allMappedPropertyNodes,
-                ),
-                this.queryBuilderState.explorerState.humanizePropertyName,
-              ),
-            );
-          });
-          return;
-        }
-        default:
-          return;
-      }
-    }
-  }
-
-  get validationIssues(): string[] | undefined {
-    switch (this.fetchStructureMode) {
-      case FETCH_STRUCTURE_MODE.PROJECTION:
-        return this.projectionState.validationIssues;
-      case FETCH_STRUCTURE_MODE.GRAPH_FETCH:
-      default:
-        return undefined;
+      );
     }
   }
 }

package/src/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.ts

@@ -17,18 +17,35 @@
 import type { QueryBuilderState } from '../../QueryBuilderState.js';
 import { action, makeObservable, observable } from 'mobx';
 import {
+  type CompilationError,
   PackageableElementExplicitReference,
   RootGraphFetchTree,
+  type Class,
+  type LambdaFunction,
+  getAllSuperclasses,
 } from '@finos/legend-graph';
 import {
   type QueryBuilderGraphFetchTreeData,
   addQueryBuilderPropertyNode,
   buildGraphFetchTreeData,
 } from './QueryBuilderGraphFetchTreeUtil.js';
-import type { QueryBuilderExplorerTreePropertyNodeData } from '../../explorer/QueryBuilderExplorerState.js';
-import { assertNonNullable } from '@finos/legend-shared';
-import { QueryBuilderFetchStructureImplementationState } from '../QueryBuilderFetchStructureImplementationState.js';
+import {
+  generateExplorerTreePropertyNodeID,
+  generateExplorerTreeSubtypeNodeID,
+  type QueryBuilderExplorerTreePropertyNodeData,
+} from '../../explorer/QueryBuilderExplorerState.js';
+import {
+  FETCH_STRUCTURE_IMPLEMENTATION,
+  QueryBuilderFetchStructureImplementationState,
+} from '../QueryBuilderFetchStructureImplementationState.js';
 import type { QueryBuilderFetchStructureState } from '../QueryBuilderFetchStructureState.js';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+} from '@finos/legend-application';
+import type { LambdaFunctionBuilderOption } from '../../QueryBuilderValueSpecificationBuilderHelper.js';
+import { appendGraphFetch } from './QueryBuilderGraphFetchValueSpecificationBuilder.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
 
 export class QueryBuilderGraphFetchTreeState extends QueryBuilderFetchStructureImplementationState {
   treeData?: QueryBuilderGraphFetchTreeData | undefined;
@@ -46,11 +63,73 @@ export class QueryBuilderGraphFetchTreeState extends QueryBuilderFetchStructureI
     super(queryBuilderState, fetchStructureState);
 
     makeObservable(this, {
-      treeData: observable,
+      treeData: observable.ref,
       isChecked: observable,
       setGraphFetchTree: action,
       setChecked: action,
     });
+
+    // try to initialize the graph-fetch tree data using the setup class
+    this.updateTreeData(this.queryBuilderState.querySetupState._class);
+  }
+
+  get type(): string {
+    return FETCH_STRUCTURE_IMPLEMENTATION.GRAPH_FETCH;
+  }
+
+  get usedExplorerTreePropertyNodeIDs(): string[] {
+    if (!this.treeData) {
+      return [];
+    }
+    const explorerTreeNodeIDIndex = new Map<string, string>();
+    const ids: string[] = [];
+
+    // traverse in breadth-first fashion
+    const nodesToProcess: string[] = this.treeData.rootIds.slice();
+    while (nodesToProcess.length) {
+      const currentNodeID = guaranteeNonNullable(nodesToProcess[0]);
+      const node = this.treeData.nodes.get(currentNodeID);
+      if (!node) {
+        continue;
+      }
+      let nodeID: string;
+      const parentNodeID = node.parentId
+        ? // since we traverse the nodes in order, parent node ID should already been computed
+          guaranteeNonNullable(explorerTreeNodeIDIndex.get(node.parentId))
+        : '';
+      const propertyNodeID = generateExplorerTreePropertyNodeID(
+        parentNodeID,
+        node.tree.property.value.name,
+      );
+      ids.push(propertyNodeID);
+      if (node.tree.subType) {
+        nodeID = generateExplorerTreeSubtypeNodeID(
+          propertyNodeID,
+          node.tree.subType.value.path,
+        );
+        getAllSuperclasses(node.tree.subType.value)
+          .concat(node.tree.subType.value)
+          .forEach((_class) =>
+            ids.push(
+              generateExplorerTreeSubtypeNodeID(propertyNodeID, _class.path),
+            ),
+          );
+      } else {
+        nodeID = propertyNodeID;
+      }
+      explorerTreeNodeIDIndex.set(node.id, nodeID);
+
+      // update list of nodes to process
+      nodesToProcess.shift();
+      node.childrenIds.forEach((childId) => nodesToProcess.push(childId));
+    }
+
+    // de-duplicate
+    return Array.from(new Set(ids).values());
+  }
+
+  get validationIssues(): string[] | undefined {
+    return undefined;
   }
 
   setGraphFetchTree(val: QueryBuilderGraphFetchTreeData | undefined): void {
@@ -61,40 +140,101 @@ export class QueryBuilderGraphFetchTreeState extends QueryBuilderFetchStructureI
     this.isChecked = val;
   }
 
-  // TODO-BEFORE-PR: consider removing this
-  initialize(tree?: RootGraphFetchTree): void {
-    if (tree) {
-      this.setGraphFetchTree(buildGraphFetchTreeData(tree));
-    } else {
-      const _class = this.queryBuilderState.querySetupState._class;
-      if (_class) {
-        this.setGraphFetchTree(
-          buildGraphFetchTreeData(
+  private updateTreeData(_class: Class | undefined): void {
+    this.setGraphFetchTree(
+      _class
+        ? buildGraphFetchTreeData(
             new RootGraphFetchTree(
               PackageableElementExplicitReference.create(_class),
             ),
-          ),
-        );
-      } else {
-        this.setGraphFetchTree(undefined);
-      }
-    }
+          )
+        : undefined,
+    );
+  }
+
+  onClassChange(_class: Class | undefined): void {
+    this.updateTreeData(_class);
+  }
+
+  appendFetchStructure(
+    lambdaFunction: LambdaFunction,
+    options?: LambdaFunctionBuilderOption,
+  ): void {
+    appendGraphFetch(this, lambdaFunction, options);
   }
 
-  addProperty(node: QueryBuilderExplorerTreePropertyNodeData): void {
+  addProperty(
+    node: QueryBuilderExplorerTreePropertyNodeData,
+    options?: {
+      refreshTreeData?: boolean;
+    },
+  ): void {
     if (!this.treeData) {
-      this.initialize();
+      this.queryBuilderState.applicationStore.notifyWarning(
+        `Can't add property: graph-fetch tree has not been properly initialized`,
+      );
+      return;
     }
-    assertNonNullable(
-      this.treeData,
-      `Graph-fetch tree has not been properly initialized`,
-    );
     addQueryBuilderPropertyNode(
       this.treeData,
       this.queryBuilderState.explorerState.nonNullableTreeData,
       node,
       this.queryBuilderState,
     );
-    this.setGraphFetchTree({ ...this.treeData });
+    if (options?.refreshTreeData) {
+      this.setGraphFetchTree({ ...this.treeData });
+    }
+  }
+
+  revealCompilationError(compilationError: CompilationError): boolean {
+    return false;
+  }
+
+  clearCompilationError(): void {
+    return;
+  }
+
+  fetchProperty(node: QueryBuilderExplorerTreePropertyNodeData): void {
+    this.addProperty(node, { refreshTreeData: true });
+  }
+
+  fetchProperties(nodes: QueryBuilderExplorerTreePropertyNodeData[]): void {
+    if (!this.treeData) {
+      this.queryBuilderState.applicationStore.notifyWarning(
+        `Can't add property: graph-fetch tree has not been properly initialized`,
+      );
+      return;
+    }
+    nodes.forEach((nodeToAdd) => this.addProperty(nodeToAdd));
+    this.setGraphFetchTree({
+      ...this.treeData,
+    });
+  }
+
+  checkBeforeChangingImplementation(onChange: () => void): void {
+    if (this.treeData?.rootIds.length) {
+      this.queryBuilderState.applicationStore.setActionAlertInfo({
+        message:
+          'Current graph-fetch will be lost when switching to projection mode. Do you still want to proceed?',
+        type: ActionAlertType.CAUTION,
+        actions: [
+          {
+            label: 'Proceed',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler:
+              this.queryBuilderState.applicationStore.guardUnhandledError(
+                async () => onChange(),
+              ),
+          },
+          {
+            label: 'Cancel',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+        ],
+      });
+    } else {
+      onChange();
+    }
   }
 }

package/src/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeStateBuilder.ts

@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  GraphFetchTreeInstanceValue,
+  matchFunctionName,
+  RootGraphFetchTree,
+  SimpleFunctionExpression,
+} from '@finos/legend-graph';
+import { assertTrue, guaranteeType } from '@finos/legend-shared';
+import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../../../QueryBuilder_Const.js';
+import type { QueryBuilderState } from '../../QueryBuilderState.js';
+import { QueryBuilderValueSpecificationProcessor } from '../../QueryBuilderStateBuilder.js';
+import { FETCH_STRUCTURE_IMPLEMENTATION } from '../QueryBuilderFetchStructureImplementationState.js';
+import { QueryBuilderGraphFetchTreeState } from './QueryBuilderGraphFetchTreeState.js';
+import { buildGraphFetchTreeData } from './QueryBuilderGraphFetchTreeUtil.js';
+
+export const processGraphFetchExpression = (
+  expression: SimpleFunctionExpression,
+  queryBuilderState: QueryBuilderState,
+): void => {
+  const functionName = expression.functionName;
+
+  // check parameters
+  assertTrue(
+    expression.parametersValues.length === 2,
+    `Can't process ${functionName}() expression: ${functionName}() expects 1 argument`,
+  );
+
+  // check preceding expression
+  const precedingExpression = guaranteeType(
+    expression.parametersValues[0],
+    SimpleFunctionExpression,
+    `Can't process ${functionName}() expression: only support ${functionName}() immediately following an expression`,
+  );
+  assertTrue(
+    matchFunctionName(precedingExpression.functionName, [
+      QUERY_BUILDER_SUPPORTED_FUNCTIONS.FILTER,
+      QUERY_BUILDER_SUPPORTED_FUNCTIONS.GET_ALL,
+    ]),
+    `Can't process ${functionName}(): only support ${functionName}() immediately following either getAll() or filter()`,
+  );
+  QueryBuilderValueSpecificationProcessor.process(
+    precedingExpression,
+    queryBuilderState,
+  );
+
+  // build state
+  if (
+    queryBuilderState.fetchStructureState.implementation instanceof
+    QueryBuilderGraphFetchTreeState
+  ) {
+    const graphFetchTreeState =
+      queryBuilderState.fetchStructureState.implementation;
+    graphFetchTreeState.setChecked(
+      matchFunctionName(
+        expression.functionName,
+        QUERY_BUILDER_SUPPORTED_FUNCTIONS.GRAPH_FETCH_CHECKED,
+      ),
+    );
+  }
+};
+
+export const processGraphFetchSerializeExpression = (
+  expression: SimpleFunctionExpression,
+  queryBuilderState: QueryBuilderState,
+): void => {
+  // update fetch-structure
+  queryBuilderState.fetchStructureState.changeImplementation(
+    FETCH_STRUCTURE_IMPLEMENTATION.GRAPH_FETCH,
+  );
+
+  // check parameters
+  assertTrue(
+    expression.parametersValues.length === 2,
+    `Can't process serialize() expression: serialize() expects 1 argument`,
+  );
+
+  // check preceding expression
+  const precedingExpression = guaranteeType(
+    expression.parametersValues[0],
+    SimpleFunctionExpression,
+    `Can't process serialize() expression: only support serialize() immediately following an expression`,
+  );
+  assertTrue(
+    matchFunctionName(precedingExpression.functionName, [
+      QUERY_BUILDER_SUPPORTED_FUNCTIONS.GRAPH_FETCH,
+      QUERY_BUILDER_SUPPORTED_FUNCTIONS.GRAPH_FETCH_CHECKED,
+    ]),
+    `Can't process serialize() expression: only support serialize() in graph-fetch expression`,
+  );
+  QueryBuilderValueSpecificationProcessor.process(
+    precedingExpression,
+    queryBuilderState,
+  );
+
+  // build state
+  if (
+    queryBuilderState.fetchStructureState.implementation instanceof
+    QueryBuilderGraphFetchTreeState
+  ) {
+    const graphFetchTreeState =
+      queryBuilderState.fetchStructureState.implementation;
+    const graphFetchTree = guaranteeType(
+      expression.parametersValues[1],
+      GraphFetchTreeInstanceValue,
+      `Can't process serialize() expression: serialize() graph-fetch is missing`,
+    );
+    const graphFetchTreeRoot = guaranteeType(
+      graphFetchTree.values[0],
+      RootGraphFetchTree,
+      `Can't process serialize() expression: serialize() graph-fetch tree root is missing`,
+    );
+    graphFetchTreeState.setGraphFetchTree(
+      buildGraphFetchTreeData(graphFetchTreeRoot),
+    );
+  }
+};

package/src/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeUtil.ts

@@ -25,6 +25,7 @@ import {
   Class,
   PropertyGraphFetchTree,
   PackageableElementExplicitReference,
+  TYPE_CAST_TOKEN,
 } from '@finos/legend-graph';
 import {
   type QueryBuilderExplorerTreeNodeData,
@@ -70,13 +71,13 @@ export interface QueryBuilderGraphFetchTreeData
   tree: RootGraphFetchTree;
 }
 
-const generateNodeId = (
+export const generateGraphFetchTreeNodeID = (
   property: AbstractProperty,
-  subType: Type | undefined,
   parentNodeId: string | undefined,
+  subType: Type | undefined,
 ): string =>
   `${parentNodeId ? `${parentNodeId}.` : ''}${property.name}${
-    subType ? subType.path : ''
+    subType ? `${TYPE_CAST_TOKEN}${subType.path}` : ''
   }`;
 
 const buildGraphFetchSubTree = (
@@ -93,7 +94,7 @@ const buildGraphFetchSubTree = (
   const subType = tree.subType?.value;
   const parentNodeId = parentNode?.id;
   const node = new QueryBuilderGraphFetchTreeNodeData(
-    generateNodeId(property, subType, parentNodeId),
+    generateGraphFetchTreeNodeID(property, parentNodeId, subType),
     property.name,
     parentNodeId,
     tree,
@@ -248,10 +249,10 @@ export const addQueryBuilderPropertyNode = (
   let parentNode: QueryBuilderGraphFetchTreeNodeData | undefined = undefined;
   let newSubTree: PropertyGraphFetchTree | undefined;
   for (const propertyGraphFetchTree of propertyGraphFetchTrees) {
-    currentNodeId = generateNodeId(
+    currentNodeId = generateGraphFetchTreeNodeID(
       propertyGraphFetchTree.property.value,
-      propertyGraphFetchTree.subType?.value,
       currentNodeId,
+      propertyGraphFetchTree.subType?.value,
     );
     const existingGraphFetchNode = treeData.nodes.get(currentNodeId);
     if (existingGraphFetchNode) {