@finos/legend-query-builder 4.1.2 → 4.1.4

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

@@ -35,7 +35,7 @@ import {
   PanelContent,
   TrashIcon,
   PanelDnDEntry,
-  PanelDnDEntryDragHandle,
+  PanelEntryDragHandle,
   CalendarIcon,
   CalendarClockIcon,
   CustomSelectorInput,
@@ -324,17 +324,32 @@ const buildCalendarTypeOption = (
 });
 
 const QueryBuilderProjectionColumnEditor = observer(
-  (props: { projectionColumnState: QueryBuilderProjectionColumnState }) => {
-    const handleRef = useRef<HTMLDivElement>(null);
+  (props: {
+    projectionColumnState: QueryBuilderProjectionColumnState;
+    isRearrangeActive: boolean;
+    currentRearrangeDraggedColumnIndex: number | undefined;
+    setCurrentRearrangeDraggedColumnIndex: (val: number | undefined) => void;
+    currentRearrangeDropGapIndex: number | undefined;
+    setCurrentRearrangeDropGapIndex: (val: number | undefined) => void;
+    columnIdx: number;
+  }) => {
+    const {
+      isRearrangeActive,
+      projectionColumnState,
+      columnIdx,
+      currentRearrangeDraggedColumnIndex,
+      setCurrentRearrangeDraggedColumnIndex,
+      currentRearrangeDropGapIndex,
+      setCurrentRearrangeDropGapIndex,
+    } = props;
+    const dragHandleRef = useRef<HTMLDivElement>(null);
     const applicationStore = useApplicationStore();
-
     const ref = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
 
-    const { projectionColumnState } = props;
     const tdsState = projectionColumnState.tdsState;
     const isCalendarEnabled = tdsState.queryBuilderState.isCalendarEnabled;
     const isRemovalDisabled = tdsState.isColumnInUse(projectionColumnState);
@@ -403,6 +418,7 @@ const QueryBuilderProjectionColumnEditor = observer(
         aggregateColumnState?.calendarFunction?.setCalendarType(option.value);
       }
     };
+
     const defaultEndDate = observe_PrimitiveInstanceValue(
       new PrimitiveInstanceValue(
         GenericTypeExplicitReference.create(
@@ -478,6 +494,32 @@ const QueryBuilderProjectionColumnEditor = observer(
       }
     };
 
+    const handleDroppingColumn = useCallback(
+      (type: string): void => {
+        if (
+          type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE &&
+          currentRearrangeDropGapIndex !== undefined &&
+          currentRearrangeDraggedColumnIndex !== undefined
+        ) {
+          tdsState.moveColumn(
+            currentRearrangeDraggedColumnIndex,
+            currentRearrangeDropGapIndex === tdsState.projectionColumns.length
+              ? tdsState.projectionColumns.length - 1
+              : currentRearrangeDropGapIndex,
+          );
+        }
+        setCurrentRearrangeDraggedColumnIndex(undefined);
+        setCurrentRearrangeDropGapIndex(undefined);
+      },
+      [
+        tdsState,
+        currentRearrangeDropGapIndex,
+        currentRearrangeDraggedColumnIndex,
+        setCurrentRearrangeDraggedColumnIndex,
+        setCurrentRearrangeDropGapIndex,
+      ],
+    );
+
     // Drag and Drop
     const handleHover = useCallback(
       (
@@ -487,37 +529,60 @@ const QueryBuilderProjectionColumnEditor = observer(
         const dragIndex = tdsState.projectionColumns.findIndex(
           (e) => e === item.columnState,
         );
-        const hoverIndex = tdsState.projectionColumns.findIndex(
-          (e) => e === projectionColumnState,
-        );
-        if (dragIndex === -1 || hoverIndex === -1 || dragIndex === hoverIndex) {
-          return;
+        const hoveredRectangle = ref.current?.getBoundingClientRect();
+        const hoveredRectangleMiddle =
+          hoveredRectangle?.top && hoveredRectangle.bottom
+            ? (hoveredRectangle.top + hoveredRectangle.bottom) / 2
+            : undefined;
+        const yCoordinate = monitor.getClientOffset()?.y ?? 0;
+
+        if (yCoordinate && hoveredRectangleMiddle) {
+          setCurrentRearrangeDropGapIndex(
+            yCoordinate < hoveredRectangleMiddle ? columnIdx : columnIdx + 1,
+          );
         }
+
         // move the item being hovered on when the dragged item position is beyond the its middle point
         const hoverBoundingReact = ref.current?.getBoundingClientRect();
-
         const distanceThreshold =
           ((hoverBoundingReact?.bottom ?? 0) - (hoverBoundingReact?.top ?? 0)) /
           2;
-        const dragDistance =
-          (monitor.getClientOffset()?.y ?? 0) - (hoverBoundingReact?.top ?? 0);
-        if (dragIndex < hoverIndex && dragDistance < distanceThreshold) {
+        const dragDistance = yCoordinate - (hoverBoundingReact?.top ?? 0);
+
+        if (dragIndex === -1 || columnIdx === -1 || dragIndex === columnIdx) {
           return;
         }
-        if (dragIndex > hoverIndex && dragDistance > distanceThreshold) {
+
+        if (dragIndex < columnIdx && dragDistance < distanceThreshold) {
+          return;
+        }
+        if (dragIndex > columnIdx && dragDistance > distanceThreshold) {
           return;
         }
-        tdsState.moveColumn(dragIndex, hoverIndex);
+
+        setCurrentRearrangeDraggedColumnIndex(dragIndex);
       },
-      [projectionColumnState, tdsState],
+      [
+        tdsState,
+        columnIdx,
+        setCurrentRearrangeDropGapIndex,
+        setCurrentRearrangeDraggedColumnIndex,
+      ],
     );
+
     const [, dropConnector] = useDrop<QueryBuilderProjectionColumnDragSource>(
       () => ({
         accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
         hover: (item, monitor): void => handleHover(item, monitor),
+        drop: (item, monitor): void => {
+          if (!monitor.didDrop()) {
+            handleDroppingColumn(monitor.getItemType() as string);
+          }
+        },
       }),
-      [handleHover],
+      [handleHover, handleDroppingColumn],
     );
+
     const [
       { projectionColumnBeingDragged },
       dragConnector,
@@ -548,9 +613,8 @@ const QueryBuilderProjectionColumnEditor = observer(
       }),
       [projectionColumnState],
     );
-    const isBeingDragged =
-      projectionColumnState === projectionColumnBeingDragged;
-    dragConnector(handleRef);
+
+    dragConnector(dragHandleRef);
     dropConnector(ref);
 
     useDragPreviewLayer(dragPreviewConnector);
@@ -613,7 +677,24 @@ const QueryBuilderProjectionColumnEditor = observer(
     return (
       <PanelDnDEntry
         ref={ref}
-        showPlaceholder={isBeingDragged}
+        placeholder={
+          <div
+            className={clsx(
+              {
+                'query-builder__projection__column__placeholder--bottom':
+                  currentRearrangeDropGapIndex === columnIdx + 1 &&
+                  columnIdx === tdsState.projectionColumns.length - 1,
+              },
+              {
+                'query-builder__projection__column__placeholder--top':
+                  currentRearrangeDropGapIndex === columnIdx,
+              },
+            )}
+          />
+        }
+        showPlaceholder={
+          projectionColumnBeingDragged !== undefined && isRearrangeActive
+        }
         className="query-builder__projection__column"
       >
         <ContextMenu
@@ -637,9 +718,9 @@ const QueryBuilderProjectionColumnEditor = observer(
           onClose={onContextMenuClose}
         >
           <div className="query-builder__projection__column__container">
-            <PanelDnDEntryDragHandle
-              isBeingDragged={isBeingDragged}
-              dropTargetConnector={handleRef}
+            <PanelEntryDragHandle
+              isDragging={false}
+              dragSourceConnector={dragHandleRef}
               className="query-builder__projection__column__drag-handle__container"
             />
             <div className="query-builder__projection__column__name">
@@ -806,7 +887,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                   ref={dropTargetConnector}
                 >
                   <PanelEntryDropZonePlaceholder
-                    showPlaceholder={isDragOver}
+                    isDragOver={isDragOver}
                     label="Change Date Column"
                     className="query-builder__projection__calendar__date__column__dnd__placeholder"
                   >
@@ -855,6 +936,12 @@ export const QueryBuilderTDSPanel = observer(
     const applicationStore = useApplicationStore();
     const { tdsState } = props;
     const projectionColumns = tdsState.projectionColumns;
+    const [
+      currentRearrangeDraggedColumnIndex,
+      setCurrentRearrangeDraggedColumnIndex,
+    ] = useState<number | undefined>();
+    const [currentRearrangeDropGapIndex, setCurrentRearrangeDropGapIndex] =
+      useState<number | undefined>();
 
     // Toolbar
     const openResultSetModifierEditor = (): void =>
@@ -937,8 +1024,22 @@ export const QueryBuilderTDSPanel = observer(
       [handleDrop],
     );
 
-    const { showDroppableSuggestion } = useDragLayer((monitor) => ({
-      showDroppableSuggestion:
+    const [{ isRearrangeActive }, rearrangeColumnDropConnector] = useDrop<
+      QueryBuilderProjectionColumnDragSource,
+      void,
+      { isRearrangeActive: boolean }
+    >(
+      () => ({
+        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
+        collect: (monitor) => ({
+          isRearrangeActive: monitor.isOver({ shallow: false }),
+        }),
+      }),
+      [],
+    );
+
+    const { isDroppable } = useDragLayer((monitor) => ({
+      isDroppable:
         monitor.isDragging() &&
         [
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
@@ -989,8 +1090,7 @@ export const QueryBuilderTDSPanel = observer(
         <div className="query-builder__projection__content">
           <PanelDropZone
             isDragOver={isDragOver}
-            showDroppableSuggestion={showDroppableSuggestion}
-            className="query-builder__panel--droppable"
+            isDroppable={isDroppable}
             dropTargetConnector={dropTargetConnector}
           >
             {!projectionColumns.length && (
@@ -1004,22 +1104,38 @@ export const QueryBuilderTDSPanel = observer(
                 data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS}
                 className="query-builder__projection__columns"
               >
-                <DragPreviewLayer
-                  labelGetter={(
-                    item: QueryBuilderProjectionColumnDragSource,
-                  ): string =>
-                    item.columnState.columnName === ''
-                      ? '(unknown)'
-                      : item.columnState.columnName
-                  }
-                  types={[QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE]}
-                />
-                {projectionColumns.map((projectionColumnState) => (
-                  <QueryBuilderProjectionColumnEditor
-                    key={projectionColumnState.uuid}
-                    projectionColumnState={projectionColumnState}
+                <div ref={rearrangeColumnDropConnector}>
+                  <DragPreviewLayer
+                    labelGetter={(
+                      item: QueryBuilderProjectionColumnDragSource,
+                    ): string =>
+                      item.columnState.columnName === ''
+                        ? '(unknown)'
+                        : item.columnState.columnName
+                    }
+                    types={[QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE]}
                   />
-                ))}
+                  {projectionColumns.map((projectionColumnState, columnIdx) => (
+                    <QueryBuilderProjectionColumnEditor
+                      key={projectionColumnState.uuid}
+                      projectionColumnState={projectionColumnState}
+                      isRearrangeActive={isRearrangeActive}
+                      currentRearrangeDraggedColumnIndex={
+                        currentRearrangeDraggedColumnIndex
+                      }
+                      currentRearrangeDropGapIndex={
+                        currentRearrangeDropGapIndex
+                      }
+                      setCurrentRearrangeDraggedColumnIndex={
+                        setCurrentRearrangeDraggedColumnIndex
+                      }
+                      setCurrentRearrangeDropGapIndex={
+                        setCurrentRearrangeDropGapIndex
+                      }
+                      columnIdx={columnIdx}
+                    />
+                  ))}
+                </div>
               </div>
             )}
             <QueryResultModifierModal tdsState={tdsState} />

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

@@ -42,7 +42,7 @@ import {
   ModalFooter,
   PanelFormSection,
   ModalFooterButton,
-  PanelDnDEntryDragHandle,
+  PanelEntryDragHandle,
   PanelDnDEntry,
   PanelHeaderActionItem,
   PanelHeader,
@@ -611,9 +611,8 @@ const TDSColumnReferenceEditor = observer(
             className="query-builder__olap__tds__column-badge"
           >
             <PanelEntryDropZonePlaceholder
-              showPlaceholder={isDragOver}
+              isDragOver={isDragOver}
               label="Change Column"
-              className="query-builder__dnd__placeholder"
             >
               <div className="query-builder__olap__tds__column-badge__content">
                 <div
@@ -875,10 +874,10 @@ const QueryBuilderWindowColumnEditor = observer(
           onOpen={onContextMenuOpen}
           onClose={onContextMenuClose}
         >
-          <PanelDnDEntryDragHandle
-            isBeingDragged={isBeingDragged}
+          <PanelEntryDragHandle
+            isDragging={isBeingDragged}
             className="query-builder__olap__column__drag-handle__container"
-            dropTargetConnector={handleRef}
+            dragSourceConnector={handleRef}
           />
           <div className="query-builder__olap__column__operation">
             <div className="query-builder__olap__column__operation__operator">
@@ -947,9 +946,8 @@ const QueryBuilderWindowColumnEditor = observer(
               className="query-builder__olap__column__window__content"
             >
               <PanelEntryDropZonePlaceholder
-                showPlaceholder={isDragOver}
+                isDragOver={isDragOver}
                 label="Add"
-                className="query-builder__dnd__placeholder"
               >
                 <div
                   title={`${windowColumnState.windowColumns.length} columns partitioned`}

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -105,9 +105,9 @@ const QueryBuilderFilterGroupConditionEditor = observer(
   (props: {
     node: QueryBuilderFilterTreeGroupNodeData;
     isDragOver: boolean;
-    showDroppableSuggestion: boolean;
+    isDroppable: boolean;
   }) => {
-    const { node, isDragOver, showDroppableSuggestion } = props;
+    const { node, isDragOver, isDroppable } = props;
     const switchOperation: React.MouseEventHandler<HTMLDivElement> = (
       event,
     ): void => {
@@ -118,32 +118,35 @@ const QueryBuilderFilterGroupConditionEditor = observer(
           : QUERY_BUILDER_GROUP_OPERATION.AND,
       );
     };
+
+    const operationName =
+      node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND ? 'AND' : 'OR';
+
     return (
       <div className="query-builder-filter-tree__node__label__content dnd__entry__container">
-        {showDroppableSuggestion && (
+        <PanelEntryDropZonePlaceholder
+          isDragOver={isDragOver}
+          isDroppable={isDroppable}
+          label={`Add to Logical Group '${operationName}'`}
+        >
           <div
-            className={clsx('dnd__entry--droppable__indicator ', {
-              'dnd__entry--droppable__indicator--dragover': isDragOver,
+            className={clsx('query-builder-filter-tree__group-node', {
+              'query-builder-filter-tree__group-node--and':
+                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND,
+              'query-builder-filter-tree__group-node--or':
+                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.OR,
             })}
-          ></div>
-        )}
-        <div
-          className={clsx('query-builder-filter-tree__group-node', {
-            'query-builder-filter-tree__group-node--and':
-              node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND,
-            'query-builder-filter-tree__group-node--or':
-              node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.OR,
-          })}
-          title="Switch Operation"
-          onClick={switchOperation}
-        >
-          <div className="query-builder-filter-tree__group-node__label">
-            {node.groupOperation}
+            title="Switch Operation"
+            onClick={switchOperation}
+          >
+            <div className="query-builder-filter-tree__group-node__label">
+              {node.groupOperation}
+            </div>
+            <button className="query-builder-filter-tree__group-node__action">
+              <FilledTriangleIcon />
+            </button>
           </div>
-          <button className="query-builder-filter-tree__group-node__action">
-            <FilledTriangleIcon />
-          </button>
-        </div>
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },
@@ -232,32 +235,11 @@ const QueryBuilderFilterConditionEditor = observer(
       cleanUpReloadValues,
     };
 
-    const { showDroppableSuggestion } = useDragLayer((monitor) => ({
-      showDroppableSuggestion:
-        monitor.isDragging() &&
-        (queryBuilderState.TEMPORARY__isDnDFetchStructureToFilterSupported
-          ? IS_DRAGGABLE_FILTER_DND_TYPES_FETCH_SUPPORTED
-          : IS_DRAGGABLE_FILTER_DND_TYPES
-        ).includes(monitor.getItemType()?.toString() ?? ''),
-    }));
-
     return (
       <div className="query-builder-filter-tree__node__label__content dnd__entry__container">
-        {showDroppableSuggestion && (
-          <div
-            className={clsx(
-              'dnd__entry--droppable__indicator dnd__entry-potential__oiodropzone__indicator--full',
-              {
-                'dnd__entry--droppable__indicator--dragover': isDragOver,
-              },
-            )}
-          ></div>
-        )}
-
         <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
+          isDragOver={isDragOver}
           label="Add New Logical Group"
-          className="query-builder__dnd__placeholder"
         >
           <div className="query-builder-filter-tree__condition-node">
             <div className="query-builder-filter-tree__condition-node__property">
@@ -301,9 +283,8 @@ const QueryBuilderFilterConditionEditor = observer(
                 className="query-builder-filter-tree__condition-node__value"
               >
                 <PanelEntryDropZonePlaceholder
-                  showPlaceholder={isFilterValueDragOver}
+                  isDragOver={isFilterValueDragOver}
                   label="Change Filter Value"
-                  className="query-builder__dnd__placeholder"
                 >
                   <BasicValueSpecificationEditor
                     valueSpecification={node.condition.value}
@@ -336,19 +317,16 @@ const QueryBuilderFilterBlankConditionEditor = observer(
   (props: {
     node: QueryBuilderFilterTreeBlankConditionNodeData;
     isDragOver: boolean;
-    showDroppableSuggestion: boolean;
+    isDroppable: boolean;
   }) => {
-    const { isDragOver, showDroppableSuggestion } = props;
+    const { isDragOver, isDroppable } = props;
     return (
       <div className="query-builder-filter-tree__node__label__content">
         <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
+          isDragOver={isDragOver}
+          isDroppable={isDroppable}
           label="Create Condition"
-          className="query-builder__dnd__placeholder"
         >
-          {showDroppableSuggestion && (
-            <div className="query-builder-filter-tree__blank-node--droppable"></div>
-          )}
           <div className="query-builder-filter-tree__blank-node">blank</div>
         </PanelEntryDropZonePlaceholder>
       </div>
@@ -560,8 +538,8 @@ const QueryBuilderFilterTreeNodeContainer = observer(
     dragConnector(dropConnector(ref));
     useDragPreviewLayer(dragPreviewConnector);
 
-    const { showDroppableSuggestion } = useDragLayer((monitor) => ({
-      showDroppableSuggestion:
+    const { isDroppable } = useDragLayer((monitor) => ({
+      isDroppable:
         monitor.isDragging() &&
         (queryBuilderState.TEMPORARY__isDnDFetchStructureToFilterSupported
           ? IS_DRAGGABLE_FILTER_DND_TYPES_FETCH_SUPPORTED
@@ -627,7 +605,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
               {node instanceof QueryBuilderFilterTreeGroupNodeData && (
                 <QueryBuilderFilterGroupConditionEditor
                   node={node}
-                  showDroppableSuggestion={showDroppableSuggestion}
+                  isDroppable={isDroppable}
                   isDragOver={isDragOver}
                 />
               )}
@@ -641,7 +619,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
                 <QueryBuilderFilterBlankConditionEditor
                   node={node}
                   isDragOver={isDragOver}
-                  showDroppableSuggestion={showDroppableSuggestion}
+                  isDroppable={isDroppable}
                 />
               )}
             </div>
@@ -811,8 +789,8 @@ export const QueryBuilderFilterPanel = observer(
       }
     };
 
-    const { showDroppableSuggestion } = useDragLayer((monitor) => ({
-      showDroppableSuggestion:
+    const { isDroppable } = useDragLayer((monitor) => ({
+      isDroppable:
         monitor.isDragging() &&
         (queryBuilderState.TEMPORARY__isDnDFetchStructureToFilterSupported
           ? IS_DRAGGABLE_FILTER_DND_TYPES_FETCH_SUPPORTED
@@ -991,10 +969,7 @@ export const QueryBuilderFilterPanel = observer(
         <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver && filterState.isEmpty}
-            showDroppableSuggestion={
-              showDroppableSuggestion && filterState.isEmpty
-            }
-            className="query-builder__panel--droppable"
+            isDroppable={isDroppable && filterState.isEmpty}
             dropTargetConnector={dropTargetConnector}
           >
             {filterState.isEmpty && (
@@ -1014,18 +989,19 @@ export const QueryBuilderFilterPanel = observer(
                 <QueryBuilderFilterTree queryBuilderState={queryBuilderState} />
               </>
             )}
-
-            {showDroppableSuggestion && !filterState.isEmpty && (
+            {isDroppable && !filterState.isEmpty && (
               <div
                 ref={addFilterRef}
-                className={clsx(
-                  'query-builder-post-filter-tree__blank-node--droppable--tall',
-                  {
-                    'dnd__entry--droppable__indicator--dragover': isDragOver,
-                  },
-                )}
+                className="query-builder-filter-tree__free-drop-zone__container"
               >
-                Add filter to main group
+                <PanelEntryDropZonePlaceholder
+                  isDragOver={isDragOver}
+                  isDroppable={isDroppable}
+                  className="query-builder-filter-tree__free-drop-zone"
+                  label="Add filter to main group"
+                >
+                  <></>
+                </PanelEntryDropZonePlaceholder>
               </div>
             )}
           </PanelDropZone>

package/src/components/shared/LambdaEditor.tsx

@@ -140,7 +140,9 @@ const LambdaEditor_Inner = observer(
     const transformLambdaToString = async (pretty: boolean): Promise<void> => {
       transformStringToLambda?.cancel();
       return flowResult(
-        lambdaEditorState.convertLambdaObjectToGrammarString(pretty),
+        lambdaEditorState.convertLambdaObjectToGrammarString({
+          pretty: pretty,
+        }),
       ).catch(applicationStore.alertUnhandledError);
     };
     const discardChanges = applicationStore.guardUnhandledError(() =>
@@ -447,7 +449,9 @@ const LambdaEditor_PopUp = observer(
     const transformLambdaToString = async (pretty: boolean): Promise<void> => {
       transformStringToLambda?.cancel();
       return flowResult(
-        lambdaEditorState.convertLambdaObjectToGrammarString(pretty),
+        lambdaEditorState.convertLambdaObjectToGrammarString({
+          pretty: pretty,
+        }),
       ).catch(applicationStore.alertUnhandledError);
     };
     const discardChanges = applicationStore.guardUnhandledError(() =>
@@ -554,7 +558,10 @@ const LambdaEditor_PopUp = observer(
 
     useEffect(() => {
       flowResult(
-        lambdaEditorState.convertLambdaObjectToGrammarString(true),
+        lambdaEditorState.convertLambdaObjectToGrammarString({
+          pretty: true,
+          preserveCompilationError: true,
+        }),
       ).catch(applicationStore.alertUnhandledError);
     }, [applicationStore, lambdaEditorState]);
 

package/src/stores/QueryBuilderResultState.ts

@@ -37,7 +37,6 @@ import {
   buildRawLambdaFromLambdaFunction,
   reportGraphAnalytics,
   extractExecutionResultValues,
-  TDSExecutionResult,
 } from '@finos/legend-graph';
 import { buildLambdaFunction } from './QueryBuilderValueSpecificationBuilder.js';
 import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
@@ -163,46 +162,6 @@ export class QueryBuilderResultState {
     this.queryRunPromise = promise;
   };
 
-  findColumnFromCoordinates = (
-    colIndex: number,
-  ): string | number | boolean | null | undefined => {
-    if (
-      !this.executionResult ||
-      !(this.executionResult instanceof TDSExecutionResult)
-    ) {
-      return undefined;
-    }
-    return this.executionResult.result.columns[colIndex];
-  };
-
-  findRowFromRowIndex = (
-    rowIndex: number,
-  ): (string | number | boolean | null)[] => {
-    if (
-      !this.executionResult ||
-      !(this.executionResult instanceof TDSExecutionResult)
-    ) {
-      return [''];
-    }
-    return this.executionResult.result.rows[rowIndex]?.values ?? [''];
-  };
-
-  findResultValueFromCoordinates = (
-    resultCoordinate: [number, number],
-  ): string | number | boolean | null | undefined => {
-    const rowIndex = resultCoordinate[0];
-    const colIndex = resultCoordinate[1];
-
-    if (
-      !this.executionResult ||
-      !(this.executionResult instanceof TDSExecutionResult)
-    ) {
-      return undefined;
-    }
-
-    return this.executionResult.result.rows[rowIndex]?.values[colIndex];
-  };
-
   setIsQueryUsageViewerOpened(val: boolean): void {
     this.isQueryUsageViewerOpened = val;
   }
@@ -442,7 +401,7 @@ export class QueryBuilderResultState {
             rawPlan,
             this.queryBuilderState.graphManagerState.graph,
           );
-        this.executionPlanState.setPlan(plan);
+        this.executionPlanState.initialize(plan);
       } catch {
         // do nothing
       }