@finos/legend-query-builder 4.14.68 → 4.14.70

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

@@ -61,6 +61,7 @@ import {
   Dialog,
   CustomSelectorInput,
 } from '@finos/legend-art';
+import { getFloatGridColumnCustomHeader } from './QueryBuilderTDSSimpleGridResult.js';
 
 export const enum QueryBuilderDataGridCustomAggregationFunction {
   wavg = 'wavg',
@@ -87,13 +88,20 @@ 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 {
@@ -102,42 +110,6 @@ const getAggregationTDSColumnCustomizations = (
   }
 };
 
-const getLocalColDefs = (
-  executionResult: TDSExecutionResult,
-  resultState: QueryBuilderResultState,
-): DataGridColumnDefinition<
-  QueryBuilderTDSRowDataType,
-  QueryBuilderTDSResultCellDataType
->[] =>
-  executionResult.result.columns.map((colName) => {
-    const col = {
-      minWidth: 50,
-      sortable: true,
-      resizable: true,
-      field: colName,
-      flex: 1,
-      enablePivot: true,
-      enableRowGroup: true,
-      enableValue: true,
-      ...getAggregationTDSColumnCustomizations(executionResult, colName),
-    } as DataGridColumnDefinition;
-    const persistedColumn = resultState.gridConfig?.columns.find(
-      (c) => c.colId === colName,
-    );
-    if (persistedColumn) {
-      if (persistedColumn.width) {
-        col.width = persistedColumn.width;
-      }
-      col.pinned = persistedColumn.pinned ?? null;
-      col.rowGroup = persistedColumn.rowGroup ?? false;
-      col.rowGroupIndex = persistedColumn.rowGroupIndex ?? null;
-      col.aggFunc = persistedColumn.aggFunc ?? null;
-      col.pivot = persistedColumn.pivot ?? false;
-      col.hide = persistedColumn.hide ?? false;
-    }
-    return col;
-  });
-
 const QueryResultCellRenderer = observer(
   (params: IQueryRendererParamsWithGridType) => {
     const resultState = params.resultState;
@@ -186,6 +158,47 @@ const QueryResultCellRenderer = observer(
   },
 );
 
+const getLocalColDefs = (
+  executionResult: TDSExecutionResult,
+  resultState: QueryBuilderResultState,
+): DataGridColumnDefinition<
+  QueryBuilderTDSRowDataType,
+  QueryBuilderTDSResultCellDataType
+>[] =>
+  executionResult.result.columns.map((colName) => {
+    const col = {
+      minWidth: 50,
+      sortable: true,
+      resizable: true,
+      field: colName,
+      flex: 1,
+      enablePivot: true,
+      enableRowGroup: true,
+      enableValue: true,
+      cellRenderer: QueryResultCellRenderer,
+      cellRendererParams: {
+        resultState: resultState,
+        tdsExecutionResult: executionResult,
+      },
+      ...getAggregationTDSColumnCustomizations(executionResult, colName),
+    } as DataGridColumnDefinition;
+    const persistedColumn = resultState.gridConfig?.columns.find(
+      (c) => c.colId === colName,
+    );
+    if (persistedColumn) {
+      if (persistedColumn.width) {
+        col.width = persistedColumn.width;
+      }
+      col.pinned = persistedColumn.pinned ?? null;
+      col.rowGroup = persistedColumn.rowGroup ?? false;
+      col.rowGroupIndex = persistedColumn.rowGroupIndex ?? null;
+      col.aggFunc = persistedColumn.aggFunc ?? null;
+      col.pivot = persistedColumn.pivot ?? false;
+      col.hide = persistedColumn.hide ?? false;
+    }
+    return col;
+  });
+
 const getFilterTDSColumnCustomizations = (
   result: TDSExecutionResult,
   columnName: string,
@@ -202,11 +215,17 @@ const getFilterTDSColumnCustomizations = (
       };
     case PRIMITIVE_TYPE.DECIMAL:
     case PRIMITIVE_TYPE.INTEGER:
-    case PRIMITIVE_TYPE.FLOAT:
     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
       return {

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

@@ -19,6 +19,7 @@ import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../../../stores/QueryBuilderState.js';
 import {
   getTDSRowRankByColumnInAsc,
+  PRIMITIVE_TYPE,
   TDSExecutionResult,
 } from '@finos/legend-graph';
 import {
@@ -47,6 +48,47 @@ 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>`;
+
+const getTDSColumnCustomizations = (
+  result: TDSExecutionResult,
+  columnName: string,
+): object => {
+  const columnType = result.builder.columns.find(
+    (col) => col.name === columnName,
+  )?.type;
+  switch (columnType) {
+    case PRIMITIVE_TYPE.FLOAT:
+      return {
+        headerComponentParams: {
+          template: getFloatGridColumnCustomHeader(columnName),
+        },
+      };
+    default:
+      return {};
+  }
+};
+
 const QueryResultCellRenderer = observer(
   (params: IQueryRendererParamsWithGridType) => {
     const resultState = params.resultState;
@@ -368,6 +410,7 @@ export const QueryBuilderTDSSimpleGridResult = observer(
           resizable: true,
           field: colName,
           flex: 1,
+          ...getTDSColumnCustomizations(executionResult, colName),
           cellRenderer: QueryResultCellRenderer,
           cellRendererParams: {
             resultState: resultState,

package/src/components/shared/QueryBuilderFilterHelper.ts

@@ -28,6 +28,10 @@ import {
   QUERY_BUILDER_VARIABLE_DND_TYPE,
   type QueryBuilderVariableDragSource,
 } from './BasicValueSpecificationEditor.js';
+import {
+  QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
+  type QueryBuilderWindowColumnDragSource,
+} from '../../stores/fetch-structure/tds/window/QueryBuilderWindowState.js';
 
 export const getDNDItemType = (
   item: QueryBuilderFilterValueDropTarget,
@@ -45,6 +49,10 @@ export const getDNDItemType = (
     case QUERY_BUILDER_VARIABLE_DND_TYPE:
       return (item as QueryBuilderVariableDragSource).variable.genericType
         ?.value.rawType;
+    case QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE:
+      return (
+        item as QueryBuilderWindowColumnDragSource
+      ).columnState.getColumnType();
     default:
       return undefined;
   }

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -117,7 +117,7 @@ export const QueryBuilderTaggedValueInfoTooltip: React.FC<{
   );
 };
 
-const QueryBuilderBaseInfoTooltip: React.FC<{
+export const QueryBuilderBaseInfoTooltip: React.FC<{
   title: string;
   data: {
     label: string;
@@ -133,7 +133,10 @@ const QueryBuilderBaseInfoTooltip: React.FC<{
   const [open, setIsOpen] = useState(false);
 
   return (
-    <ClickAwayListener onClickAway={() => setIsOpen(false)}>
+    <ClickAwayListener
+      onClickAway={() => setIsOpen(false)}
+      mouseEvent="onMouseDown"
+    >
       <div>
         <Tooltip
           arrow={true}
@@ -172,7 +175,14 @@ const QueryBuilderBaseInfoTooltip: React.FC<{
             </div>
           }
         >
-          <div onClick={() => setIsOpen(true)}>{children}</div>
+          <div
+            onClick={(event: React.MouseEvent) => {
+              setIsOpen(!open);
+              event.stopPropagation();
+            }}
+          >
+            {children}
+          </div>
         </Tooltip>
       </div>
     </ClickAwayListener>

package/src/graph-manager/QueryBuilderConfig.ts

@@ -33,11 +33,17 @@ export class QueryBuilderConfig {
    */
   legendAIServiceURL = '';
 
+  /**
+   * This is the URL of the zipkin trace
+   */
+  zipkinTraceBaseURL = '';
+
   static readonly serialization = new SerializationFactory(
     createModelSchema(QueryBuilderConfig, {
       TEMPORARY__disableQueryBuilderChat: optional(primitive()),
       TEMPORARY__enableGridEnterpriseMode: optional(primitive()),
       legendAIServiceURL: optional(primitive()),
+      zipkinTraceBaseURL: optional(primitive()),
     }),
   );
 }

package/src/stores/QueryBuilderResultState.ts

@@ -17,10 +17,10 @@
 import { action, flow, makeObservable, observable } from 'mobx';
 import {
   type GeneratorFn,
+  type ContentType,
   assertErrorThrown,
   LogEvent,
   guaranteeNonNullable,
-  type ContentType,
   ActionState,
   StopWatch,
   getContentTypeFileExtension,
@@ -32,11 +32,13 @@ import {
   type RawLambda,
   type EXECUTION_SERIALIZATION_FORMAT,
   type QueryGridConfig,
+  type ExecutionResultWithMetadata,
   GRAPH_MANAGER_EVENT,
   buildRawLambdaFromLambdaFunction,
   reportGraphAnalytics,
+  TDSExecutionResult,
+  V1_ZIPKIN_TRACE_HEADER,
 } from '@finos/legend-graph';
-
 import { buildLambdaFunction } from './QueryBuilderValueSpecificationBuilder.js';
 import {
   buildExecutionParameterValues,
@@ -49,6 +51,7 @@ import { ExecutionPlanState } from './execution-plan/ExecutionPlanState.js';
 import type { DataGridColumnState } from '@finos/legend-lego/data-grid';
 import { downloadStream } from '@finos/legend-application';
 import { QueryBuilderDataGridCustomAggregationFunction } from '../components/result/tds/QueryBuilderTDSGridResult.js';
+import { QueryBuilderTDSState } from './fetch-structure/tds/QueryBuilderTDSState.js';
 
 export const DEFAULT_LIMIT = 1000;
 
@@ -125,10 +128,13 @@ export class QueryBuilderResultState {
   isRunningQuery = false;
   isGeneratingPlan = false;
   executionResult?: ExecutionResult | undefined;
+  isExecutionResultOverflowing = false;
   executionDuration?: number | undefined;
+  executionTraceId?: string;
   latestRunHashCode?: string | undefined;
-  queryRunPromise: Promise<ExecutionResult> | undefined = undefined;
+  queryRunPromise: Promise<ExecutionResultWithMetadata> | undefined = undefined;
   isQueryUsageViewerOpened = false;
+  executionError: Error | string | undefined;
 
   selectedCells: QueryBuilderTDSResultCellData[];
   mousedOverCell: QueryBuilderTDSResultCellData | null = null;
@@ -140,6 +146,7 @@ export class QueryBuilderResultState {
   constructor(queryBuilderState: QueryBuilderState) {
     makeObservable(this, {
       executionResult: observable,
+      executionTraceId: observable,
       previewLimit: observable,
       executionDuration: observable,
       latestRunHashCode: observable,
@@ -150,13 +157,16 @@ export class QueryBuilderResultState {
       isRunningQuery: observable,
       isSelectingCells: observable,
       isQueryUsageViewerOpened: observable,
+      isExecutionResultOverflowing: observable,
       gridConfig: observable,
       wavgAggregationState: observable,
+      executionError: observable,
       setGridConfig: action,
       setWavgAggregationState: action,
       setIsSelectingCells: action,
       setIsRunningQuery: action,
       setExecutionResult: action,
+      setExecutionTraceId: action,
       setExecutionDuration: action,
       setPreviewLimit: action,
       addSelectedCell: action,
@@ -164,8 +174,10 @@ export class QueryBuilderResultState {
       setMouseOverCell: action,
       setQueryRunPromise: action,
       setIsQueryUsageViewerOpened: action,
+      setIsExecutionResultOverflowing: action,
       handlePreConfiguredGridConfig: action,
       updatePreviewLimitInConfig: action,
+      setExecutionError: action,
       exportData: flow,
       runQuery: flow,
       cancelQuery: flow,
@@ -204,6 +216,10 @@ export class QueryBuilderResultState {
     this.executionResult = val;
   }
 
+  setExecutionTraceId(val: string): void {
+    this.executionTraceId = val;
+  }
+
   setExecutionDuration(val: number | undefined): void {
     this.executionDuration = val;
   }
@@ -224,7 +240,9 @@ export class QueryBuilderResultState {
     this.mousedOverCell = val;
   }
 
-  setQueryRunPromise(promise: Promise<ExecutionResult> | undefined): void {
+  setQueryRunPromise(
+    promise: Promise<ExecutionResultWithMetadata> | undefined,
+  ): void {
     this.queryRunPromise = promise;
   }
 
@@ -232,12 +250,44 @@ export class QueryBuilderResultState {
     this.isQueryUsageViewerOpened = val;
   }
 
+  setExecutionError(val: Error | string | undefined): void {
+    this.executionError = val;
+  }
+
+  setIsExecutionResultOverflowing(val: boolean): void {
+    this.isExecutionResultOverflowing = val;
+  }
+
   updatePreviewLimitInConfig(): void {
     if (this.gridConfig) {
       this.gridConfig.previewLimit = this.previewLimit;
     }
   }
 
+  getExecutionResultLimit = (): number =>
+    Math.min(
+      this.queryBuilderState.fetchStructureState.implementation instanceof
+        QueryBuilderTDSState &&
+        this.queryBuilderState.fetchStructureState.implementation
+          .resultSetModifierState.limit
+        ? this.queryBuilderState.fetchStructureState.implementation
+            .resultSetModifierState.limit
+        : Number.MAX_SAFE_INTEGER,
+      this.previewLimit,
+    );
+
+  processExecutionResult = (result: ExecutionResult): void => {
+    this.setIsExecutionResultOverflowing(false);
+    if (result instanceof TDSExecutionResult) {
+      const resultLimit = this.getExecutionResultLimit();
+      if (result.result.rows.length > resultLimit) {
+        this.setIsExecutionResultOverflowing(true);
+        result.result.rows = result.result.rows.slice(0, resultLimit);
+      }
+    }
+    this.setExecutionResult(result);
+  };
+
   processWeightedColumnPairsMap(
     config: QueryGridConfig,
   ): Map<string, string> | undefined {
@@ -421,7 +471,9 @@ export class QueryBuilderResultState {
         this.queryBuilderState.executionContextState.runtimeValue,
         `Runtime is required to execute query`,
       );
-      const query = this.buildExecutionRawLambda();
+      const query = this.buildExecutionRawLambda({
+        withDataOverflowCheck: true,
+      });
       const parameterValues = buildExecutionParameterValues(
         this.queryBuilderState.parametersState.parameterStates,
         this.queryBuilderState.graphManagerState,
@@ -444,13 +496,17 @@ export class QueryBuilderResultState {
         {
           parameterValues,
           convertUnsafeNumbersToString: true,
+          preservedResponseHeadersList: [V1_ZIPKIN_TRACE_HEADER],
         },
       );
 
       this.setQueryRunPromise(promise);
-      const result = (yield promise) as ExecutionResult;
+      const result = (yield promise) as ExecutionResultWithMetadata;
       if (this.queryRunPromise === promise) {
-        this.setExecutionResult(result);
+        this.processExecutionResult(result.executionResult);
+        if (result.executionTraceId) {
+          this.setExecutionTraceId(result.executionTraceId);
+        }
         this.latestRunHashCode = currentHashCode;
         this.setExecutionDuration(stopWatch.elapsed);
 
@@ -479,9 +535,7 @@ export class QueryBuilderResultState {
           LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
           error,
         );
-        this.queryBuilderState.applicationStore.notificationService.notifyError(
-          error,
-        );
+        this.setExecutionError(error);
       }
     } finally {
       this.setIsRunningQuery(false);

package/src/stores/QueryBuilderValueSpecificationBuilderHelper.ts

@@ -210,4 +210,9 @@ export type LambdaFunctionBuilderOption = {
    * typed in engine. This is still an experimental feature, hence we should only enable this flag when user wants to enable this directly.
    */
   useTypedRelationFunctions?: boolean | undefined;
+
+  /**
+   * Set this flag to `true` when you want to execute a query that exceeds the limit to check for additional data in the database.
+   */
+  withDataOverflowCheck?: boolean | undefined;
 };

package/src/stores/explorer/QueryBuilderExplorerState.ts

@@ -118,8 +118,10 @@ export abstract class QueryBuilderExplorerTreeNodeData implements TreeNodeData {
   ) {
     makeObservable(this, {
       isHighlighting: observable,
+      isOpen: observable,
       isSelected: observable,
       setIsHighlighting: action,
+      setIsOpen: action,
       setIsSelected: action,
     });
 
@@ -136,6 +138,10 @@ export abstract class QueryBuilderExplorerTreeNodeData implements TreeNodeData {
     this.isSelected = val;
   }
 
+  setIsOpen(val: boolean | undefined): void {
+    this.isOpen = val;
+  }
+
   setIsHighlighting(val: boolean | undefined): void {
     this.isHighlighting = val;
   }
@@ -650,15 +656,18 @@ export class QueryBuilderExplorerPreviewDataState {
   isGeneratingPreviewData = false;
   propertyName = '(unknown)';
   previewData?: QueryBuilderPreviewData | undefined;
+  previewDataAbortController?: AbortController | undefined;
 
   constructor() {
     makeObservable(this, {
       previewData: observable.ref,
       isGeneratingPreviewData: observable,
       propertyName: observable,
+      previewDataAbortController: observable,
       setPropertyName: action,
       setIsGeneratingPreviewData: action,
       setPreviewData: action,
+      setPreviewDataAbortController: action,
     });
   }
 
@@ -673,6 +682,10 @@ export class QueryBuilderExplorerPreviewDataState {
   setPreviewData(val: QueryBuilderPreviewData | undefined): void {
     this.previewData = val;
   }
+
+  setPreviewDataAbortController(val: AbortController | undefined): void {
+    this.previewDataAbortController = val;
+  }
 }
 
 export class QueryBuilderExplorerState {
@@ -754,21 +767,99 @@ export class QueryBuilderExplorerState {
     );
   }
 
-  highlightTreeNode(key: string): void {
-    const nodeToHighlight = this.treeData?.nodes.get(key);
-    if (nodeToHighlight instanceof QueryBuilderExplorerTreePropertyNodeData) {
+  generateOpenNodeChildren(node: QueryBuilderExplorerTreeNodeData): void {
+    if (
+      node.isOpen &&
+      (node instanceof QueryBuilderExplorerTreePropertyNodeData ||
+        node instanceof QueryBuilderExplorerTreeSubTypeNodeData) &&
+      node.type instanceof Class
+    ) {
+      (node instanceof QueryBuilderExplorerTreeSubTypeNodeData
+        ? getAllOwnClassProperties(node.type)
+        : getAllClassProperties(node.type).concat(
+            getAllClassDerivedProperties(node.type),
+          )
+      ).forEach((property) => {
+        const propertyTreeNodeData = getQueryBuilderPropertyNodeData(
+          property,
+          node,
+          guaranteeNonNullable(this.mappingModelCoverageAnalysisResult),
+        );
+        if (propertyTreeNodeData) {
+          this.nonNullableTreeData.nodes.set(
+            propertyTreeNodeData.id,
+            propertyTreeNodeData,
+          );
+        }
+      });
+      node.type._subclasses.forEach((subclass) => {
+        const subTypeTreeNodeData = getQueryBuilderSubTypeNodeData(
+          subclass,
+          node,
+          guaranteeNonNullable(this.mappingModelCoverageAnalysisResult),
+        );
+        this.nonNullableTreeData.nodes.set(
+          subTypeTreeNodeData.id,
+          subTypeTreeNodeData,
+        );
+      });
+      this.refreshTree();
+    }
+  }
+
+  highlightTreeNode(nodeId: string): void {
+    // If the node doesn't yet exist in the explorer tree,
+    // we need to open all the parent nodes of the node and
+    // generate their children.
+    if (this.nonNullableTreeData.nodes.get(nodeId) === undefined) {
+      const parentNodeIdElements: string[][] = nodeId
+        .split('@')
+        .map((subpath) => subpath.split('.'));
+      // remove last element of final subpath, as it is the node id and not a parent
+      if (
+        parentNodeIdElements.length > 0 &&
+        parentNodeIdElements[parentNodeIdElements.length - 1] !== undefined
+      ) {
+        parentNodeIdElements[parentNodeIdElements.length - 1]!.pop();
+      }
+
+      let currentNodeId = '';
+
+      parentNodeIdElements.forEach((subpath) => {
+        subpath.forEach((element, index) => {
+          currentNodeId += `${index > 0 ? '.' : ''}${element}`;
+          const currentNode = this.nonNullableTreeData.nodes.get(currentNodeId);
+          if (currentNode) {
+            currentNode.setIsOpen(true);
+            this.generateOpenNodeChildren(currentNode);
+          }
+        });
+        currentNodeId += '@';
+      });
+    }
+
+    // All parent nodes should be created now, so we can get the node to highlight.
+    const nodeToHighlight = this.nonNullableTreeData.nodes.get(nodeId);
+
+    // If we didn't need to open and create the parent nodes above, we will
+    // open the parent nodes here in case they are closed. Then, we will highlight
+    // and scroll to the node.
+    if (
+      nodeToHighlight instanceof QueryBuilderExplorerTreePropertyNodeData ||
+      nodeToHighlight instanceof QueryBuilderExplorerTreeSubTypeNodeData
+    ) {
       let nodeToOpen: QueryBuilderExplorerTreeNodeData | null =
-        this.treeData?.nodes.get(nodeToHighlight.parentId) ?? null;
+        this.nonNullableTreeData.nodes.get(nodeToHighlight.parentId) ?? null;
       while (nodeToOpen !== null) {
         if (!nodeToOpen.isOpen) {
-          nodeToOpen.isOpen = true;
+          nodeToOpen.setIsOpen(true);
         }
         nodeToOpen =
-          nodeToOpen instanceof QueryBuilderExplorerTreePropertyNodeData
-            ? (this.treeData?.nodes.get(nodeToOpen.parentId) ?? null)
+          nodeToOpen instanceof QueryBuilderExplorerTreePropertyNodeData ||
+          nodeToOpen instanceof QueryBuilderExplorerTreeSubTypeNodeData
+            ? (this.nonNullableTreeData.nodes.get(nodeToOpen.parentId) ?? null)
             : null;
       }
-      this.refreshTree();
       nodeToHighlight.setIsHighlighting(true);
       // scrollIntoView must be called in a setTimeout because it must happen after
       // the tree nodes are recursively opened and the tree is refreshed.
@@ -859,6 +950,7 @@ export class QueryBuilderExplorerState {
       this,
     );
     const propertyType = node.property.genericType.value.rawType;
+    this.previewDataState.setPreviewDataAbortController(new AbortController());
     try {
       switch (propertyType.path) {
         case PRIMITIVE_TYPE.NUMBER:
@@ -874,6 +966,10 @@ export class QueryBuilderExplorerState {
               this.queryBuilderState.executionContextState.mapping,
               runtime,
               this.queryBuilderState.graphManagerState.graph,
+              {
+                abortController:
+                  this.previewDataState.previewDataAbortController,
+              },
             )) as ExecutionResult;
           assertType(
             previewResult,
@@ -911,6 +1007,10 @@ export class QueryBuilderExplorerState {
               this.queryBuilderState.executionContextState.mapping,
               runtime,
               this.queryBuilderState.graphManagerState.graph,
+              {
+                abortController:
+                  this.previewDataState.previewDataAbortController,
+              },
             )) as ExecutionResult;
           assertType(
             previewResult,
@@ -929,12 +1029,16 @@ export class QueryBuilderExplorerState {
       }
     } catch (error) {
       assertErrorThrown(error);
+      if (error.name === 'AbortError') {
+        return;
+      }
       this.queryBuilderState.applicationStore.notificationService.notifyWarning(
         `Can't preview data for property '${node.property.name}'. Error: ${error.message}`,
       );
       this.previewDataState.setPreviewData(undefined);
     } finally {
       this.previewDataState.setIsGeneratingPreviewData(false);
+      this.previewDataState.setPreviewDataAbortController(undefined);
     }
   }
 }