@finos/legend-query-builder 4.15.28 → 4.15.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.15.28",
+  "version": "4.15.30",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -42,44 +42,43 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "16.0.12",
-    "@finos/legend-art": "7.1.69",
-    "@finos/legend-code-editor": "2.0.25",
-    "@finos/legend-data-cube": "0.0.30",
-    "@finos/legend-graph": "31.10.59",
-    "@finos/legend-lego": "2.0.27",
-    "@finos/legend-server-depot": "6.0.71",
-    "@finos/legend-shared": "10.0.62",
-    "@finos/legend-storage": "3.0.113",
+    "@finos/legend-application": "16.0.13",
+    "@finos/legend-art": "7.1.70",
+    "@finos/legend-code-editor": "2.0.27",
+    "@finos/legend-data-cube": "0.0.32",
+    "@finos/legend-graph": "31.10.61",
+    "@finos/legend-lego": "2.0.29",
+    "@finos/legend-server-depot": "6.0.72",
+    "@finos/legend-shared": "10.0.63",
+    "@finos/legend-storage": "3.0.114",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/react": "16.0.1",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@testing-library/react": "16.1.0",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "chart.js": "4.4.7",
-    "mathjs": "14.0.0",
+    "mathjs": "14.0.1",
     "mobx": "6.13.5",
-    "mobx-react-lite": "4.0.7",
-    "monaco-editor": "0.52.0",
-    "react": "18.3.1",
-    "react-chartjs-2": "5.2.0",
+    "mobx-react-lite": "4.1.0",
+    "monaco-editor": "0.52.2",
+    "react": "19.0.0",
     "react-dnd": "16.0.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0",
     "serializr": "3.0.3",
     "sql-formatter": "15.4.6"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.1.31",
+    "@finos/legend-dev-utils": "2.1.32",
     "@jest/globals": "29.7.0",
     "cross-env": "7.0.3",
-    "eslint": "9.16.0",
+    "eslint": "9.17.0",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
     "rimraf": "6.0.1",
-    "sass": "1.81.0",
+    "sass": "1.83.0",
     "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^19.0.0"
   },
   "publishConfig": {
     "directory": "build/publishContent"

package/src/components/QueryBuilder.tsx

@@ -263,7 +263,7 @@ export const QueryBuilder = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     const applicationStore = queryBuilderState.applicationStore;
-    const queryBuilderRef = useRef<HTMLDivElement>(null);
+    const ref = useRef<HTMLDivElement>(null);
     const isQuerySupported = queryBuilderState.isQuerySupported;
     const fetchStructureState = queryBuilderState.fetchStructureState;
     const isTDSState =
@@ -536,7 +536,7 @@ export const QueryBuilder = observer(
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER}
         className="query-builder"
-        ref={queryBuilderRef}
+        ref={ref}
       >
         <BackdropContainer
           elementId={QUERY_BUILDER_COMPONENT_ELEMENT_ID.BACKDROP_CONTAINER}
@@ -581,7 +581,7 @@ export const QueryBuilder = observer(
               <div className="query-builder__header__actions">
                 <div className="query-builder__header__actions__undo-redo">
                   <UndoButton
-                    parent={queryBuilderRef}
+                    parent={ref}
                     canUndo={
                       queryBuilderState.changeHistoryState.canUndo &&
                       queryBuilderState.isQuerySupported
@@ -589,7 +589,7 @@ export const QueryBuilder = observer(
                     undo={undo}
                   />
                   <RedoButton
-                    parent={queryBuilderRef}
+                    parent={ref}
                     canRedo={
                       queryBuilderState.changeHistoryState.canRedo &&
                       queryBuilderState.isQuerySupported

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -93,7 +93,7 @@ const DerivedPropertyParameterValueEditor = observer(
       },
       [derivedPropertyExpressionState, idx],
     );
-    const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
+    const [{ isParameterValueDragOver }, dropConnector] = useDrop<
       QueryBuilderVariableDragSource,
       void,
       { isParameterValueDragOver: boolean }
@@ -237,7 +237,7 @@ const DerivedPropertyParameterValueEditor = observer(
         <div className="query-builder__variable-editor">
           <PanelDropZone
             isDragOver={isParameterValueDragOver}
-            dropTargetConnector={dropTargetConnector}
+            dropTargetConnector={dropConnector}
           >
             <BasicValueSpecificationEditor
               valueSpecification={valueSpec}

package/src/components/QueryBuilderSideBar.tsx

@@ -110,7 +110,7 @@ export const QueryBuilderClassSelector = observer(
     });
 
     const classOptions = classes
-      .sort((a, b) => a.name.localeCompare(b.name))
+      .toSorted((a, b) => a.name.localeCompare(b.name))
       .map((_class) => ({
         value: _class,
         label: generateClassLabel(_class, queryBuilderState),

package/src/components/QueryBuilder_LegendApplicationPlugin.ts

@@ -27,7 +27,6 @@ import packageJson from '../../package.json' with { type: 'json' };
 import { QUERY_BUILDER_SETTING_CONFIG } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMMAND_CONFIG } from '../stores/QueryBuilderCommand.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
-import { configureDataGridComponent } from '@finos/legend-lego/data-grid';
 import { Chart as ChartJS, ArcElement, Tooltip, LinearScale } from 'chart.js';
 
 export type CheckEntitlementEditorRender = (
@@ -50,8 +49,6 @@ export class QueryBuilder_LegendApplicationPlugin extends LegendApplicationPlugi
   override getExtraApplicationSetups(): LegendApplicationSetup[] {
     return [
       async (applicationStore) => {
-        configureDataGridComponent();
-
         // configure chart component
         ChartJS.register(
           ArcElement,

package/src/components/QueryLoader.tsx

@@ -203,7 +203,7 @@ export const QueryLoader = observer(
       debouncedLoadQueries(queryLoaderState.searchText);
     };
     const toggleCuratedTemplate = (): void => {
-      Array.from(queryLoaderState.extraFilters).map(([key, value]) =>
+      Array.from(queryLoaderState.extraFilters).forEach(([key, value]) =>
         queryLoaderState.extraFilters.set(key, false),
       );
       queryLoaderState.setShowCurrentUserQueriesOnly(false);

package/src/components/data-access/DataAccessOverview.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useApplicationStore } from '@finos/legend-application';
 import type {
@@ -42,7 +42,6 @@ import {
   DatasetEntitlementUnsupportedReport,
 } from '@finos/legend-graph';
 import { Chart as ChartJS, DoughnutController, ArcElement } from 'chart.js';
-import { Doughnut } from 'react-chartjs-2';
 import { getNullableFirstEntry } from '@finos/legend-shared';
 import type { QueryBuilder_LegendApplicationPlugin_Extension } from '../../stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
 
@@ -51,6 +50,8 @@ ChartJS.register(DoughnutController, ArcElement);
 const DataAccessOverviewChart = observer(
   (props: { dataAccessState: DataAccessState }) => {
     const { dataAccessState } = props;
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const chartRef = useRef<ChartJS>(null);
     const entitlementCheckInfo = dataAccessState.entitlementCheckInfo;
     const total = entitlementCheckInfo.total;
     const accessGrantedCount =
@@ -58,43 +59,68 @@ const DataAccessOverviewChart = observer(
     const accessGrantedPercentage =
       getNullableFirstEntry(entitlementCheckInfo.data)?.percentage ?? 0;
 
+    useEffect(() => {
+      if (canvasRef.current && !chartRef.current) {
+        chartRef.current = new ChartJS(canvasRef.current, {
+          type: 'doughnut',
+          data: {
+            labels: [],
+            datasets: [],
+          },
+          options: {
+            responsive: true,
+            resizeDelay: 0,
+            maintainAspectRatio: false,
+            cutout: '75%',
+          },
+        });
+      }
+
+      return () => {
+        chartRef.current?.destroy();
+        chartRef.current = null;
+      };
+    }, []);
+
+    useEffect(() => {
+      if (chartRef.current) {
+        chartRef.current.data = {
+          labels: entitlementCheckInfo.data.map((item) => item.label),
+          datasets: [
+            {
+              data: entitlementCheckInfo.data.map((item) => item.count),
+              backgroundColor: entitlementCheckInfo.data.map(
+                (item) => item.color,
+              ),
+              hoverBorderWidth: 0,
+              borderWidth: 0,
+            },
+          ],
+        };
+        chartRef.current.options = {
+          ...chartRef.current.options,
+          plugins: {
+            tooltip: {
+              enabled: entitlementCheckInfo.total !== 0,
+              usePointStyle: false,
+              boxPadding: 5,
+              callbacks: {
+                labelPointStyle: () => ({
+                  pointStyle: 'rectRounded',
+                  rotation: 0,
+                }),
+              },
+            },
+          },
+        };
+        chartRef.current.update('resize');
+      }
+    }, [entitlementCheckInfo]);
+
     return (
       <div className="data-access-overview__chart">
         <div className="data-access-overview__chart__container">
-          <Doughnut
-            data={{
-              labels: entitlementCheckInfo.data.map((item) => item.label),
-              datasets: [
-                {
-                  data: entitlementCheckInfo.data.map((item) => item.count),
-                  backgroundColor: entitlementCheckInfo.data.map(
-                    (item) => item.color,
-                  ),
-                  hoverBorderWidth: 0,
-                  borderWidth: 0,
-                },
-              ],
-            }}
-            options={{
-              responsive: true,
-              resizeDelay: 0,
-              maintainAspectRatio: false,
-              cutout: '75%',
-              plugins: {
-                tooltip: {
-                  enabled: total !== 0,
-                  usePointStyle: false,
-                  boxPadding: 5,
-                  callbacks: {
-                    labelPointStyle: () => ({
-                      pointStyle: 'rectRounded',
-                      rotation: 0,
-                    }),
-                  },
-                },
-              },
-            }}
-          />
+          <canvas ref={canvasRef} />
           <div className="data-access-overview__chart__stats">
             <div className="data-access-overview__chart__stats__percentage">
               {total === 0 ? 0 : accessGrantedPercentage}%

package/src/components/execution-plan/ExecutionPlanViewer.tsx

@@ -288,7 +288,7 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
               <div className="query-builder__template--function--editor__code">
                 <CodeEditor
                   inputValue={templateFunctions.reduce(
-                    (total, func) => (total += `${func}\n`),
+                    (total, func) => `${total}${func}\n`,
                     '',
                   )}
                   isReadOnly={true}

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -482,6 +482,8 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
       }),
       [node],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     const isExpandable = Boolean(node.childrenIds.length);
@@ -584,9 +586,7 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
               : undefined
           }
           onClick={selectNode}
-          ref={
-            node.mappingData.mapped && !isExpandable ? dragConnector : undefined
-          }
+          ref={node.mappingData.mapped && !isExpandable ? ref : undefined}
           style={{
             paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1) + 0.5}rem`,
             display: 'flex',

package/src/components/explorer/QueryBuilderFunctionsExplorerPanel.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type TooltipPlacement,
@@ -168,13 +168,12 @@ const QueryBuilderFunctionsExplorerListEntry = observer(
       }),
       [node],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div
-        className="query-builder__functions-explorer__function"
-        ref={dragConnector}
-      >
+      <div className="query-builder__functions-explorer__function" ref={ref}>
         <div className="query-builder__functions-explorer__function__content">
           <div className="query-builder__functions-explorer__function__icon">
             <div className="query-builder__functions-explorer__function-icon">
@@ -250,6 +249,8 @@ const QueryBuilderFunctionsExplorerTreeNodeContainer = observer(
       }),
       [node],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
@@ -257,7 +258,7 @@ const QueryBuilderFunctionsExplorerTreeNodeContainer = observer(
         <div
           className="tree-view__node__container query-builder__functions-explorer__tree__node__container"
           onClick={selectNode}
-          ref={!isExpandable ? dragConnector : undefined}
+          ref={!isExpandable ? ref : undefined}
           style={{
             paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1) + 0.5}rem`,
             display: 'flex',

package/src/components/explorer/QueryBuilderMilestoningParameterEditor.tsx

@@ -16,7 +16,7 @@
 
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import {
   type ValueSpecification,
   GenericType,
@@ -81,6 +81,9 @@ export const MilestoningParameterEditor = observer(
       }),
       [handleDrop],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
+
     const resetMilestoningParameter = (): void => {
       const param = observe_PrimitiveInstanceValue(
         new PrimitiveInstanceValue(
@@ -100,7 +103,7 @@ export const MilestoningParameterEditor = observer(
 
     return (
       <div
-        ref={dropConnector}
+        ref={ref}
         className="query-builder__milestoning-panel__variable-editor"
       >
         <div className="query-builder__milestoning-panel__variable-editor__variable">

package/src/components/explorer/QueryBuilderPropertySearchPanel.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import {
   clsx,
   CheckSquareIcon,
@@ -265,7 +265,8 @@ const QueryBuilderTreeNodeViewer = observer(
       }),
       [node],
     );
-
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     const getChildrenNodes = (): QueryBuilderExplorerTreeNodeData[] => {
@@ -355,7 +356,7 @@ const QueryBuilderTreeNodeViewer = observer(
       <>
         <div
           className="tree-view__node__container query-builder-property-search-panel__node__container"
-          ref={dragConnector}
+          ref={ref}
           style={{
             paddingLeft: `${(level - 1) * stepPaddingInRem + 0.5}rem`,
             display: 'flex',

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

@@ -29,6 +29,7 @@ import { type QueryBuilderTDSPanelDropTarget } from './QueryBuilderTDSPanel.js';
 import { QueryBuilderAggregateOperator_Wavg } from '../../stores/fetch-structure/tds/aggregation/operators/QueryBuilderAggregateOperator_Wavg.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
+import { useRef } from 'react';
 
 export const WavgParamDNDZone = (props: {
   column: QueryBuilderAggregateOperator_Wavg;
@@ -55,7 +56,7 @@ export const WavgParamDNDZone = (props: {
     }
   };
 
-  const [{ isDragOver }, dropWavgParam] = useDrop<
+  const [{ isDragOver }, dropConnector] = useDrop<
     QueryBuilderTDSPanelDropTarget,
     void,
     { isDragOver: boolean }
@@ -71,7 +72,8 @@ export const WavgParamDNDZone = (props: {
     }),
     [handleDrop],
   );
-
+  const ref = useRef<HTMLDivElement>(null);
+  dropConnector(ref);
   const { isDroppable } = useDragLayer((monitor) => ({
     isDroppable:
       monitor.isDragging() &&
@@ -81,7 +83,6 @@ export const WavgParamDNDZone = (props: {
   }));
 
   const weightIsSet = () => column.weight !== undefined;
-
   const getWeightName = (): string => {
     if (column instanceof QueryBuilderAggregateOperator_Wavg) {
       return column.weight?.func.value.name ?? '';
@@ -92,8 +93,8 @@ export const WavgParamDNDZone = (props: {
 
   return (
     <div
+      ref={ref}
       data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_WAVG_DROPZONE}
-      ref={dropWavgParam}
     >
       <div>
         <PanelEntryDropZonePlaceholder

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

@@ -772,7 +772,7 @@ const QueryBuilderGraphFetchTreePanel = observer(
       },
       [graphFetchTreeState, serializationState],
     );
-    const [{ isDragOver }, dropTargetConnector] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       QueryBuilderExplorerTreeDragSource,
       void,
       { isDragOver: boolean }
@@ -813,7 +813,7 @@ const QueryBuilderGraphFetchTreePanel = observer(
       >
         <PanelDropZone
           isDragOver={isDragOver}
-          dropTargetConnector={dropTargetConnector}
+          dropTargetConnector={dropConnector}
           contentClassName="query-builder-graph-fetch-panel"
         >
           {(!treeData || isGraphFetchTreeDataEmpty(treeData)) && (

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

@@ -369,6 +369,9 @@ const QueryBuilderPostFilterConditionEditor = observer(
       }),
       [handleDrop],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
+
     const { isFilterValueDroppable } = useDragLayer((monitor) => ({
       isFilterValueDroppable:
         monitor.isDragging() &&
@@ -424,7 +427,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
       ) {
         return (
           <div
-            ref={dropConnector}
+            ref={ref}
             className="query-builder-post-filter-tree__condition-node__value"
           >
             <PanelEntryDropZonePlaceholder
@@ -458,7 +461,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
       ) {
         return (
           <div
-            ref={dropConnector}
+            ref={ref}
             className="query-builder-post-filter-tree__condition-node__value"
           >
             <PanelEntryDropZonePlaceholder
@@ -565,7 +568,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
   ) => {
     const { node, onNodeSelect, innerProps } = props;
     const { tdsState } = innerProps;
-    const dragRef = useRef<HTMLDivElement>(null);
+    const ref = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const applicationStore = useApplicationStore();
@@ -702,7 +705,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
         }),
         [node, postFilterState],
       );
-    dragConnector(dropConnector(dragRef));
+    dragConnector(dropConnector(ref));
     useDragPreviewLayer(dragPreviewConnector);
 
     const { isDroppable } = useDragLayer((monitor) => ({
@@ -757,7 +760,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
               QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_TREE_NODE_CONTENT
             }
             className="query-builder-post-filter-tree__node__content"
-            ref={dragRef}
+            ref={ref}
             onClick={
               node instanceof QueryBuilderPostFilterTreeConditionNodeData ||
               node instanceof QueryBuilderPostFilterTreeBlankConditionNodeData
@@ -1031,7 +1034,7 @@ const QueryBuilderPostFilterPanelContent = observer(
       },
       [applicationStore, postFilterState, tdsState.aggregationState.columns],
     );
-    const [{ isDragOver }, dropTargetConnector] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       QueryBuilderProjectionColumnDragSource,
       void,
       { isDragOver: boolean }
@@ -1050,8 +1053,8 @@ const QueryBuilderPostFilterPanelContent = observer(
       [applicationStore, handleDrop],
     );
 
-    const addPostFilterRef = useRef<HTMLDivElement>(null);
-    dropTargetConnector(addPostFilterRef);
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
 
     return (
       <>
@@ -1145,7 +1148,7 @@ const QueryBuilderPostFilterPanelContent = observer(
           <PanelDropZone
             isDragOver={isDragOver && postFilterState.isEmpty}
             isDroppable={isDroppable && postFilterState.isEmpty}
-            dropTargetConnector={dropTargetConnector}
+            dropTargetConnector={dropConnector}
           >
             {
               <PanelLoadingIndicator
@@ -1171,7 +1174,7 @@ const QueryBuilderPostFilterPanelContent = observer(
             )}
             {isDroppable && !postFilterState.isEmpty && (
               <div
-                ref={addPostFilterRef}
+                ref={ref}
                 className="query-builder-post-filter-tree__free-drop-zone__container"
               >
                 <PanelEntryDropZonePlaceholder

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

@@ -360,7 +360,7 @@ export const QueryResultModifierModal = observer(
         setWatermarkValue(watermarkState.getDefaultValue());
       }
     };
-    const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
+    const [{ isParameterValueDragOver }, dropConnector] = useDrop<
       QueryBuilderVariableDragSource,
       void,
       { isParameterValueDragOver: boolean }
@@ -1047,7 +1047,7 @@ export const QueryResultModifierModal = observer(
                       >
                         <PanelDropZone
                           isDragOver={isParameterValueDragOver}
-                          dropTargetConnector={dropTargetConnector}
+                          dropTargetConnector={dropConnector}
                         >
                           <BasicValueSpecificationEditor
                             valueSpecification={watermarkValue}