@finos/legend-query-builder 4.15.28 → 4.15.30

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

@@ -275,10 +275,12 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
         }),
         [handleDrop],
       );
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
 
     return (
       <div
-        ref={dropConnector}
+        ref={ref}
         className={clsx(
           'query-builder__lambda-editor__container query-builder__projection__column__derivation',
           { backdrop__element: hasParserError },
@@ -391,9 +393,9 @@ const QueryBuilderProjectionColumnEditor = observer(
       currentRearrangeDropGapIndex,
       setCurrentRearrangeDropGapIndex,
     } = props;
-    const dragHandleRef = useRef<HTMLDivElement>(null);
     const applicationStore = useApplicationStore();
     const ref = useRef<HTMLDivElement>(null);
+    const dragHandleRef = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
@@ -661,7 +663,6 @@ const QueryBuilderProjectionColumnEditor = observer(
       }),
       [projectionColumnState],
     );
-
     dragConnector(dragHandleRef);
     dropConnector(ref);
 
@@ -703,7 +704,7 @@ const QueryBuilderProjectionColumnEditor = observer(
         tdsState.queryBuilderState.explorerState,
       ],
     );
-    const [{ isDragOver }, dropTargetConnector] = useDrop<
+    const [{ isDragOver }, panelDropConnector] = useDrop<
       QueryBuilderExplorerTreeDragSource,
       void,
       { isDragOver: boolean }
@@ -721,6 +722,9 @@ const QueryBuilderProjectionColumnEditor = observer(
       }),
       [handleDrop],
     );
+    const panelRef = useRef<HTMLDivElement>(null);
+    panelDropConnector(panelRef);
+
     const percentileButtonRef = useRef<HTMLButtonElement>(null);
     const percentileInputRef = useRef<HTMLInputElement>(null);
     const [isPercentileOpen, setIsPercentileOpen] = useState(false);
@@ -1192,7 +1196,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                 </div>
                 <div
                   className="query-builder__projection__calendar__date__column"
-                  ref={dropTargetConnector}
+                  ref={panelRef}
                 >
                   <PanelEntryDropZonePlaceholder
                     isDragOver={isDragOver}
@@ -1335,7 +1339,7 @@ export const QueryBuilderTDSPanel = observer(
       [tdsState],
     );
 
-    const [{ isDragOver }, dropTargetConnector] = useDrop<
+    const [{ isDragOver }, panelDropConnector] = useDrop<
       QueryBuilderTDSPanelDropTarget,
       void,
       { isDragOver: boolean }
@@ -1353,8 +1357,10 @@ export const QueryBuilderTDSPanel = observer(
       }),
       [handleDrop],
     );
+    const panelRef = useRef<HTMLInputElement>(null);
+    panelDropConnector(panelRef);
 
-    const [{ isRearrangeActive }, rearrangeColumnDropConnector] = useDrop<
+    const [{ isRearrangeActive }, dropConnector] = useDrop<
       QueryBuilderProjectionColumnDragSource,
       void,
       { isRearrangeActive: boolean }
@@ -1367,6 +1373,8 @@ export const QueryBuilderTDSPanel = observer(
       }),
       [],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
 
     const { isDroppable } = useDragLayer((monitor) => ({
       isDroppable:
@@ -1382,9 +1390,6 @@ export const QueryBuilderTDSPanel = observer(
       );
     }, [applicationStore, tdsState]);
 
-    const addProjectionRef = useRef<HTMLInputElement>(null);
-    dropTargetConnector(addProjectionRef);
-
     return (
       <PanelContent>
         <div className="query-builder__projection__toolbar">
@@ -1634,7 +1639,7 @@ export const QueryBuilderTDSPanel = observer(
           <PanelDropZone
             isDragOver={isDragOver && isEmpty}
             isDroppable={isDroppable && isEmpty}
-            dropTargetConnector={dropTargetConnector}
+            dropTargetConnector={panelDropConnector}
           >
             {!projectionColumns.length && (
               <BlankPanelPlaceholder
@@ -1647,7 +1652,7 @@ export const QueryBuilderTDSPanel = observer(
                 data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS}
                 className="query-builder__projection__columns"
               >
-                <div ref={rearrangeColumnDropConnector}>
+                <div ref={ref}>
                   <DragPreviewLayer
                     labelGetter={(
                       item: QueryBuilderProjectionColumnDragSource,
@@ -1683,7 +1688,7 @@ export const QueryBuilderTDSPanel = observer(
             )}
             {isDroppable && !isEmpty && (
               <div
-                ref={addProjectionRef}
+                ref={panelRef}
                 className="query-builder__projection__free-drop-zone__container"
               >
                 <PanelEntryDropZonePlaceholder

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

@@ -691,7 +691,7 @@ const TDSColumnReferenceEditor = observer(
       },
       [handleChange],
     );
-    const [{ isDragOver }, dropOpConnector] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       QueryBuilderWindowColumnDragSource,
       void,
       { isDragOver: boolean }
@@ -712,6 +712,8 @@ const TDSColumnReferenceEditor = observer(
       }),
       [handleDrop],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
 
     return (
       <>
@@ -719,10 +721,7 @@ const TDSColumnReferenceEditor = observer(
           onClick={openOpAnchor}
           className="query-builder__olap__tds__column"
         >
-          <div
-            ref={dropOpConnector}
-            className="query-builder__olap__tds__column-badge"
-          >
+          <div ref={ref} className="query-builder__olap__tds__column-badge">
             <PanelEntryDropZonePlaceholder
               isDragOver={isDragOver}
               label="Change Column"
@@ -945,7 +944,7 @@ const QueryBuilderWindowColumnEditor = observer(
       },
       [windowColumnState],
     );
-    const [{ isDragOver }, dropOpConnector] = useDrop<
+    const [{ isDragOver }, operationDropConnector] = useDrop<
       QueryBuilderWindowColumnDragSource,
       void,
       { isDragOver: boolean }
@@ -966,6 +965,8 @@ const QueryBuilderWindowColumnEditor = observer(
       }),
       [handleWindowDrop],
     );
+    const opRef = useRef<HTMLButtonElement>(null);
+    operationDropConnector(opRef);
 
     return (
       <PanelDnDEntry
@@ -1052,7 +1053,7 @@ const QueryBuilderWindowColumnEditor = observer(
           </div>
           <div className="query-builder__olap__column__window">
             <button
-              ref={dropOpConnector}
+              ref={opRef}
               title="Click to edit or drag and drop columns"
               onClick={openWindowPopover}
               className="query-builder__olap__column__window__content"
@@ -1266,7 +1267,7 @@ export const QueryBuilderTDSWindowPanel = observer(
       [applicationStore, tdsWindowState],
     );
 
-    const [{ isDragOver }, dropTargetConnector] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       QueryBuilderWindowDropTarget,
       void,
       { isDragOver: boolean }
@@ -1296,8 +1297,8 @@ export const QueryBuilderTDSWindowPanel = observer(
         ),
     }));
 
-    const addWindowColumnRef = useRef<HTMLDivElement>(null);
-    dropTargetConnector(addWindowColumnRef);
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
 
     return (
       <Panel>
@@ -1328,7 +1329,7 @@ export const QueryBuilderTDSWindowPanel = observer(
             <PanelDropZone
               isDragOver={isDragOver && tdsWindowState.isEmpty}
               isDroppable={isDroppable && tdsWindowState.isEmpty}
-              dropTargetConnector={dropTargetConnector}
+              dropTargetConnector={dropConnector}
             >
               {tdsWindowState.isEmpty && (
                 <BlankPanelPlaceholder
@@ -1363,7 +1364,7 @@ export const QueryBuilderTDSWindowPanel = observer(
               )}
               {isDroppable && !tdsWindowState.isEmpty && (
                 <div
-                  ref={addWindowColumnRef}
+                  ref={ref}
                   className="query-builder__olap__free-drop-zone__container"
                 >
                   <PanelEntryDropZonePlaceholder

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -962,6 +962,8 @@ const QueryBuilderFilterConditionEditor = observer(
       }),
       [handleDrop],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
 
     const { isFilterValueDroppable } = useDragLayer((monitor) => ({
       isFilterValueDroppable:
@@ -1022,7 +1024,7 @@ const QueryBuilderFilterConditionEditor = observer(
       ) {
         return (
           <div
-            ref={dropConnector}
+            ref={ref}
             data-testid={
               QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_CONDITION_NODE_VALUE
             }
@@ -1059,7 +1061,7 @@ const QueryBuilderFilterConditionEditor = observer(
       ) {
         return (
           <div
-            ref={dropConnector}
+            ref={ref}
             className="query-builder-filter-tree__condition-node__value"
           >
             <PanelEntryDropZonePlaceholder
@@ -1219,7 +1221,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
   ) => {
     const { node, onNodeSelect, innerProps } = props;
     const { queryBuilderState } = innerProps;
-    const dragRef = useRef<HTMLDivElement>(null);
+    const ref = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const applicationStore = useApplicationStore();
@@ -1293,19 +1295,9 @@ const QueryBuilderFilterTreeNodeContainer = observer(
             applicationStore.notificationService.notifyWarning(error.message);
             return;
           }
-          if (node instanceof QueryBuilderFilterTreeOperationNodeData) {
-            buildFilterTree(
-              filterConditionState.propertyExpressionState.propertyExpression,
-              filterState,
-              node,
-            );
-          } else if (node instanceof QueryBuilderFilterTreeConditionNodeData) {
-            buildFilterTree(
-              filterConditionState.propertyExpressionState.propertyExpression,
-              filterState,
-              node,
-            );
-          } else if (
+          if (
+            node instanceof QueryBuilderFilterTreeOperationNodeData ||
+            node instanceof QueryBuilderFilterTreeConditionNodeData ||
             node instanceof QueryBuilderFilterTreeBlankConditionNodeData
           ) {
             buildFilterTree(
@@ -1357,7 +1349,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
         }),
         [node, filterState],
       );
-    dragConnector(dropConnector(dragRef));
+    dragConnector(dropConnector(ref));
     useDragPreviewLayer(dragPreviewConnector);
 
     const { isDroppable } = useDragLayer((monitor) => ({
@@ -1421,7 +1413,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
               QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE_CONTENT
             }
             className="query-builder-filter-tree__node__content"
-            ref={dragRef}
+            ref={ref}
             onClick={
               node instanceof QueryBuilderFilterTreeConditionNodeData ||
               node instanceof QueryBuilderFilterTreeBlankConditionNodeData
@@ -1697,7 +1689,7 @@ export const QueryBuilderFilterPanel = observer(
       [applicationStore, filterState, queryBuilderState.observerContext],
     );
 
-    const [{ isDragOver }, dropTargetConnector] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       QueryBuilderExplorerTreeDragSource,
       void,
       { isDragOver: boolean }
@@ -1719,8 +1711,8 @@ export const QueryBuilderFilterPanel = observer(
       [handleDrop],
     );
 
-    const addFilterRef = useRef<HTMLInputElement>(null);
-    dropTargetConnector(addFilterRef);
+    const ref = useRef<HTMLInputElement>(null);
+    dropConnector(ref);
 
     return (
       <div
@@ -1818,7 +1810,7 @@ export const QueryBuilderFilterPanel = observer(
           <PanelDropZone
             isDragOver={isDragOver && filterState.isEmpty}
             isDroppable={isDroppable && filterState.isEmpty}
-            dropTargetConnector={dropTargetConnector}
+            dropTargetConnector={dropConnector}
           >
             {filterState.isEmpty && (
               <BlankPanelPlaceholder
@@ -1839,7 +1831,7 @@ export const QueryBuilderFilterPanel = observer(
             )}
             {isDroppable && !filterState.isEmpty && (
               <div
-                ref={addFilterRef}
+                ref={ref}
                 className="query-builder-filter-tree__free-drop-zone__container"
               >
                 <PanelEntryDropZonePlaceholder

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

@@ -28,6 +28,7 @@ import {
   type DataGridIRowNode,
   type DataGridMenuItemDef,
   type DataGridIAggFuncParams,
+  type DataGridDefaultMenuItem,
 } from '@finos/legend-lego/data-grid';
 import {
   getRowDataFromExecutionResult,
@@ -334,8 +335,8 @@ export const QueryBuilderTDSGridResult = observer(
     const getContextMenuItems = useCallback(
       (
         params: DataGridGetContextMenuItemsParams<QueryBuilderTDSRowDataType>,
-      ): (string | DataGridMenuItemDef)[] => {
-        let result: (string | DataGridMenuItemDef)[] = [];
+      ) => {
+        let result: (DataGridDefaultMenuItem | DataGridMenuItemDef)[] = [];
         const fetchStructureImplementation =
           resultState.queryBuilderState.fetchStructureState.implementation;
         if (fetchStructureImplementation instanceof QueryBuilderTDSState) {
@@ -569,9 +570,7 @@ export const QueryBuilderTDSGridResult = observer(
               suppressClipboardPaste={false}
               suppressContextMenu={false}
               columnDefs={colDefs}
-              getContextMenuItems={(params): (string | DataGridMenuItemDef)[] =>
-                getContextMenuItems(params)
-              }
+              getContextMenuItems={(params) => getContextMenuItems(params)}
             />
           )}
           {resultState.wavgAggregationState?.isApplyingWavg && (

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ContextMenu, clsx } from '@finos/legend-art';
+import { ContextMenu, WarningIcon, clsx } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../../../stores/QueryBuilderState.js';
 import {
@@ -25,6 +25,7 @@ import {
 import {
   DataGrid,
   type DataGridColumnDefinition,
+  type DataGridCustomHeaderProps,
 } from '@finos/legend-lego/data-grid';
 import {
   getRowDataFromExecutionResult,
@@ -50,66 +51,26 @@ import { QUERY_BUILDER_TEST_ID } from '../../../__lib__/QueryBuilderTesting.js';
 
 export const MAXIMUM_FRACTION_DIGITS = 4;
 
-export const getFloatGridColumnCustomHeader = (): string =>
-  `<div class="ag-cell-label-container" role="presentation">
-    <span
-      data-ref="eMenu"
-      class="ag-header-icon ag-header-cell-menu-button"
-    ></span>
-    <span
-      data-ref="eFilterButton"
-      class="ag-header-icon ag-header-cell-filter-button"
-    ></span>
-    <div data-ref="eLabel" class="ag-header-cell-label" role="presentation">
-      <span
-        data-ref="eSortOrder"
-        class="ag-header-icon ag-sort-order ag-hidden"
-      ></span>
-      <span
-        data-ref="eSortAsc"
-        class="ag-header-icon ag-sort-ascending-icon ag-hidden"
-      ></span>
-      <span
-        data-ref="eSortDesc"
-        class="ag-header-icon ag-sort-descending-icon ag-hidden"
-      ></span>
-      <span
-        data-ref="eSortMixed"
-        class="ag-header-icon ag-sort-mixed-icon ag-hidden"
-      ></span>
-      <span
-        data-ref="eSortNone"
-        class="ag-header-icon ag-sort-none-icon ag-hidden"
-      ></span>
-      <span
-        data-ref="eText"
-        class="ag-header-cell-text"
-        role="columnheader"
-      ></span>
-      <span data-ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
-    </div>
+export const FloatGridColumnCustomHeader = (
+  props: DataGridCustomHeaderProps,
+) => {
+  return (
     <div
-      data-testid="query__builder__result__grid__custom-header"
-      class="query-builder__result__values__table__custom-header"
+      data-testid={
+        QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_GRID_CUSTOM_HEADER
+      }
+      className="query-builder__result__values__table__custom-header"
     >
       <div
-        class="query-builder__result__values__table__custom-header__icon"
+        className="query-builder__result__values__table__custom-header__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>
+        <WarningIcon />
       </div>
+      <div>{props.displayName}</div>
     </div>
-  </div>`;
+  );
+};
 
 export const getTDSColumnCustomizations = (
   result: TDSExecutionResult,
@@ -138,11 +99,11 @@ export const getTDSColumnCustomizations = (
       case PRIMITIVE_TYPE.DECIMAL:
       case PRIMITIVE_TYPE.FLOAT:
         return isTruncated(colValues)
-          ? {
+          ? ({
               headerComponentParams: {
-                template: getFloatGridColumnCustomHeader(),
+                innerHeaderComponent: FloatGridColumnCustomHeader,
               },
-            }
+            } satisfies DataGridColumnDefinition)
           : {};
       default:
         return {};
@@ -472,6 +433,7 @@ export const QueryBuilderTDSSimpleGridResult = observer(
           resizable: true,
           field: colName,
           flex: 1,
+          headerName: colName,
           ...getTDSColumnCustomizations(executionResult, colName),
           cellRenderer: QueryResultCellRenderer,
           cellRendererParams: {

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -1385,7 +1385,7 @@ const DateInstanceValueEditor = observer(
  * See https://github.com/finos/legend-studio/pull/1021
  */
 export const BasicValueSpecificationEditor = forwardRef<
-  HTMLInputElement,
+  HTMLInputElement | null,
   {
     valueSpecification: ValueSpecification;
     graph: PureModel;
@@ -1402,7 +1402,7 @@ export const BasicValueSpecificationEditor = forwardRef<
       | undefined;
     displayDateEditorAsEditableValue?: boolean | undefined;
   }
->(function BasicValueSpecificationEditor(props, ref) {
+>(function _BasicValueSpecificationEditor(props, ref) {
   const {
     className,
     valueSpecification,

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -122,7 +122,7 @@ export const QueryBuilderBaseInfoTooltip: React.FC<{
   data: {
     label: string;
     value: string;
-    actionButton?: JSX.Element | undefined;
+    actionButton?: React.ReactNode | undefined;
   }[];
   placement?: TooltipPlacement | undefined;
   children: React.ReactElement;

package/src/components/shared/QueryBuilderVariableSelector.tsx

@@ -44,7 +44,7 @@ import {
 } from './BasicValueSpecificationEditor.js';
 import { buildDatePickerOption } from './CustomDatePicker.js';
 import { QueryBuilderSimpleConstantExpressionState } from '../../stores/QueryBuilderConstantsState.js';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 
 const CALCULATED = '(calculated)';
 
@@ -184,10 +184,12 @@ export const VariableViewer = observer(
       }),
       [variable],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div className="query-builder__variables__variable" ref={dragConnector}>
+      <div className="query-builder__variables__variable" ref={ref}>
         <ContextMenu
           content={
             <QueryBuilderVariableContextMenu

package/src/stores/QueryBuilderState.ts

@@ -57,6 +57,7 @@ import {
   type QueryGridConfig,
   type QueryExecutionContext,
   type FunctionAnalysisInfo,
+  type GraphData,
   GRAPH_MANAGER_EVENT,
   CompilationError,
   extractSourceInformationCoordinates,
@@ -73,6 +74,7 @@ import {
   QueryExplicitExecutionContext,
   attachFromQuery,
   PackageableElementExplicitReference,
+  InMemoryGraphData,
 } from '@finos/legend-graph';
 import { buildLambdaFunction } from './QueryBuilderValueSpecificationBuilder.js';
 import type {
@@ -886,6 +888,10 @@ export abstract class QueryBuilderState implements CommandRegistrar {
     return undefined;
   }
 
+  getGraphData(): GraphData {
+    return new InMemoryGraphData(this.graphManagerState.graph);
+  }
+
   /**
    * This method can be used to simplify the current query builder state
    * to a basic one that can be used for testing or some special operations,

package/src/stores/QueryBuilderStateBuilder.ts

@@ -340,7 +340,6 @@ const processFromFunction = (
     new RuntimePointer(PackageableElementExplicitReference.create(runtimeVal)),
   );
   queryBuilderState.setExecutionContextState(fromContext);
-  return;
 };
 
 /**

package/src/stores/QueryLoaderState.ts

@@ -315,7 +315,7 @@ export class QueryLoaderState {
         searchSpecification,
       )) as LightQuery[];
       if (!querySearchSortBy) {
-        this.queries = this.queries.sort((a, b) =>
+        this.queries = this.queries.toSorted((a, b) =>
           a.name.localeCompare(b.name),
         );
       }

package/src/stores/entitlements/QueryBuilderCheckEntitlementsState.ts

@@ -23,7 +23,6 @@ import {
   type GraphManagerState,
   type RawLambda,
   RuntimePointer,
-  InMemoryGraphData,
   buildRawLambdaFromLambdaFunction,
 } from '@finos/legend-graph';
 import {
@@ -71,9 +70,7 @@ export class QueryBuilderCheckEntitlementsState implements Hashable {
               this.queryBuilderState.parametersState.parameterStates,
               this.queryBuilderState.graphManagerState,
             ),
-          graphData: new InMemoryGraphData(
-            this.queryBuilderState.graphManagerState.graph,
-          ),
+          graphData: this.queryBuilderState.getGraphData(),
         },
       );
     }

package/src/stores/explorer/QueryBuilderExplorerState.ts

@@ -106,7 +106,7 @@ export abstract class QueryBuilderExplorerTreeNodeData implements TreeNodeData {
   isPartOfDerivedPropertyBranch: boolean;
   type: Type;
   mappingData: QueryBuilderExplorerTreeNodeMappingData;
-  elementRef: React.RefObject<HTMLDivElement>;
+  elementRef: React.RefObject<HTMLDivElement | null>;
 
   constructor(
     id: string,

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

@@ -178,7 +178,7 @@ const buildRootGraphFetchSubTree = (
  */
 export const buildGraphFetchTreeData = (
   tree: RootGraphFetchTree,
-  displayRoot: boolean = false,
+  displayRoot = false,
 ): QueryBuilderGraphFetchTreeData => {
   const rootIds: string[] = [];
   const nodes = new Map<string, QueryBuilderGraphFetchTreeNodeData>();

package/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts

@@ -611,21 +611,19 @@ export class QueryBuilderTDSState
 
     if (!options?.skipSorting) {
       // sort columns: aggregate columns go last
-      this.projectionColumns = this.projectionColumns
-        .slice()
-        .sort(
-          (colA, colB) =>
-            (this.aggregationState.columns.find(
-              (column) => column.projectionColumnState === colA,
-            )
-              ? 1
-              : 0) -
-            (this.aggregationState.columns.find(
-              (column) => column.projectionColumnState === colB,
-            )
-              ? 1
-              : 0),
-        );
+      this.projectionColumns = this.projectionColumns.toSorted(
+        (colA, colB) =>
+          (this.aggregationState.columns.find(
+            (column) => column.projectionColumnState === colA,
+          )
+            ? 1
+            : 0) -
+          (this.aggregationState.columns.find(
+            (column) => column.projectionColumnState === colB,
+          )
+            ? 1
+            : 0),
+      );
     }
   }
 

package/src/stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.ts

@@ -474,7 +474,6 @@ export class PostFilterConditionState implements Hashable {
       this.rightConditionValue instanceof PostFilterValueSpecConditionValueState
     ) {
       this.rightConditionValue.setValue(val);
-      return;
     } else {
       this.setRightConditionVal(
         new PostFilterValueSpecConditionValueState(this, val),