@finos/legend-query-builder 4.15.29 → 4.15.31

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}

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