@finos/legend-application-query 5.1.0 → 5.2.3

package/src/components/{QueryBuilderExplorerPanel.tsx → explorer/QueryBuilderExplorerPanel.tsx}

@@ -46,6 +46,8 @@ import {
   CheckIcon,
   SearchIcon,
   PanelLoadingIndicator,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -53,19 +55,15 @@ import {
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
   QueryBuilderExplorerTreeRootNodeData,
   QueryBuilderExplorerTreePropertyNodeData,
-  buildPropertyExpressionFromExplorerTreeNodeData,
   QueryBuilderExplorerTreeSubTypeNodeData,
   getQueryBuilderPropertyNodeData,
   getQueryBuilderSubTypeNodeData,
-} from '../stores/QueryBuilderExplorerState.js';
-import { useDrag, useDragLayer } from 'react-dnd';
-import { QueryBuilderPropertyInfoTooltip } from './QueryBuilderPropertyInfoTooltip.js';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
-import { addQueryBuilderPropertyNode } from '../stores/QueryBuilderGraphFetchTreeUtil.js';
-import { QueryBuilderSimpleProjectionColumnState } from '../stores/QueryBuilderProjectionState.js';
+} from '../../stores/explorer/QueryBuilderExplorerState.js';
+import { useDrag } from 'react-dnd';
+import { QueryBuilderPropertyInfoTooltip } from '../shared/QueryBuilderPropertyInfoTooltip.js';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { flowResult } from 'mobx';
-import { prettyPropertyName } from '../stores/QueryBuilderPropertyEditorState.js';
+import { prettyPropertyName } from '../../stores/QueryBuilderPropertyEditorState.js';
 import {
   type Type,
   type Multiplicity,
@@ -83,8 +81,8 @@ import {
   isElementDeprecated,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
-import { getClassPropertyIcon } from './shared/ElementIconUtils.js';
-import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
+import { getClassPropertyIcon } from '../shared/ElementIconUtils.js';
+import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { filterByType, guaranteeNonNullable } from '@finos/legend-shared';
 import { QueryBuilderPropertySearchPanel } from './QueryBuilderPropertySearchPanel.js';
 
@@ -233,51 +231,6 @@ const QueryBuilderExplorerPreviewDataModal = observer(
   },
 );
 
-const QueryBuilderExplorerPropertyDragLayer = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const explorerState = queryBuilderState.explorerState;
-    const { itemType, item, isDragging, currentPosition } = useDragLayer(
-      (monitor) => ({
-        itemType: monitor.getItemType() as QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
-        item: monitor.getItem<QueryBuilderExplorerTreeDragSource | null>(),
-        isDragging: monitor.isDragging(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
-        currentPosition: monitor.getClientOffset(),
-      }),
-    );
-
-    if (
-      !isDragging ||
-      !item ||
-      !Object.values(QUERY_BUILDER_EXPLORER_TREE_DND_TYPE).includes(itemType)
-    ) {
-      return null;
-    }
-    return (
-      <div className="query-builder-explorer-tree__drag-preview-layer">
-        <div
-          className="query-builder-explorer-tree__drag-preview"
-          // added some offset so the mouse doesn't overlap the label too much
-          style={
-            !currentPosition
-              ? { display: 'none' }
-              : {
-                  transform: `translate(${currentPosition.x + 20}px, ${
-                    currentPosition.y + 10
-                  }px)`,
-                }
-          }
-        >
-          {explorerState.humanizePropertyName
-            ? prettyPropertyName(item.node.label)
-            : item.node.label}
-        </div>
-      </div>
-    );
-  },
-);
-
 const QueryBuilderExplorerContextMenu = observer(
   forwardRef<
     HTMLDivElement,
@@ -291,35 +244,9 @@ const QueryBuilderExplorerContextMenu = observer(
     const applicationStore = useApplicationStore();
     const viewType = (): void =>
       applicationStore.notifyUnsupportedFeature('View Type');
-    const addNodeToFetchStructure = (): void => {
-      if (
-        node instanceof QueryBuilderExplorerTreePropertyNodeData &&
-        !(node.type instanceof Class)
-      ) {
-        if (queryBuilderState.fetchStructureState.isGraphFetchMode()) {
-          queryBuilderState.fetchStructureState.graphFetchTreeState.addProperty(
-            node,
-          );
-        } else if (queryBuilderState.fetchStructureState.isProjectionMode()) {
-          const projectionState =
-            queryBuilderState.fetchStructureState.projectionState;
-          projectionState.addColumn(
-            new QueryBuilderSimpleProjectionColumnState(
-              projectionState,
-              buildPropertyExpressionFromExplorerTreeNodeData(
-                queryBuilderState.explorerState.nonNullableTreeData,
-                node,
-                projectionState.queryBuilderState.graphManagerState.graph,
-                queryBuilderState.explorerState.propertySearchPanelState
-                  .allMappedPropertyNodes,
-              ),
-              projectionState.queryBuilderState.explorerState.humanizePropertyName,
-            ),
-          );
-        }
-      }
-    };
-    const addAllChildrenToFetchStructure = (): void => {
+    const addNodeToFetchStructure = (): void =>
+      queryBuilderState.fetchStructureState.fetchProperty(node);
+    const addNodeChildrenToFetchStructure = (): void => {
       openNode();
       if (node.type instanceof Class) {
         // NOTE: here we require the node to already been expanded so the child nodes are generated
@@ -336,43 +263,9 @@ const QueryBuilderExplorerContextMenu = observer(
               !(childNode.type instanceof Class) &&
               childNode.mappingData.mapped,
           );
-        if (queryBuilderState.fetchStructureState.isGraphFetchMode()) {
-          const graphFetchTreeData =
-            queryBuilderState.fetchStructureState.graphFetchTreeState.treeData;
-          if (graphFetchTreeData) {
-            nodesToAdd.forEach((nodeToAdd) =>
-              addQueryBuilderPropertyNode(
-                graphFetchTreeData,
-                queryBuilderState.explorerState.nonNullableTreeData,
-                nodeToAdd,
-                queryBuilderState,
-              ),
-            );
-            queryBuilderState.fetchStructureState.graphFetchTreeState.setGraphFetchTree(
-              {
-                ...graphFetchTreeData,
-              },
-            );
-          }
-        } else if (queryBuilderState.fetchStructureState.isProjectionMode()) {
-          nodesToAdd.forEach((nodeToAdd) => {
-            const projectionState =
-              queryBuilderState.fetchStructureState.projectionState;
-            projectionState.addColumn(
-              new QueryBuilderSimpleProjectionColumnState(
-                projectionState,
-                buildPropertyExpressionFromExplorerTreeNodeData(
-                  queryBuilderState.explorerState.nonNullableTreeData,
-                  nodeToAdd,
-                  projectionState.queryBuilderState.graphManagerState.graph,
-                  queryBuilderState.explorerState.propertySearchPanelState
-                    .allMappedPropertyNodes,
-                ),
-                projectionState.queryBuilderState.explorerState.humanizePropertyName,
-              ),
-            );
-          });
-        }
+        nodesToAdd.forEach((nodeToAdd) =>
+          queryBuilderState.fetchStructureState.fetchProperty(nodeToAdd),
+        );
       }
     };
 
@@ -385,7 +278,7 @@ const QueryBuilderExplorerContextMenu = observer(
             </MenuContentItem>
           )}
         {node.type instanceof Class && (
-          <MenuContentItem onClick={addAllChildrenToFetchStructure}>
+          <MenuContentItem onClick={addNodeChildrenToFetchStructure}>
             Add Properties to Fetch Structure
           </MenuContentItem>
         )}
@@ -442,7 +335,9 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
       useState(false);
     const applicationStore = useApplicationStore();
     const explorerState = queryBuilderState.explorerState;
-    const [, dragConnector, dragPreviewConnector] = useDrag(
+    const [, dragConnector, dragPreviewConnector] = useDrag<{
+      node?: QueryBuilderExplorerTreePropertyNodeData;
+    }>(
       () => ({
         type:
           node instanceof QueryBuilderExplorerTreePropertyNodeData
@@ -452,13 +347,15 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
               ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
               : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
             : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
-        item: (): { node?: QueryBuilderExplorerTreePropertyNodeData } =>
+        item: () =>
           node instanceof QueryBuilderExplorerTreePropertyNodeData
             ? { node }
             : {},
       }),
       [node],
     );
+    useDragPreviewLayer(dragPreviewConnector);
+
     const isExpandable = Boolean(node.childrenIds.length);
     const isDerivedProperty =
       node instanceof QueryBuilderExplorerTreePropertyNodeData &&
@@ -499,17 +396,11 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
     const previewData = (): void => {
       if (node instanceof QueryBuilderExplorerTreePropertyNodeData) {
-        flowResult(
-          queryBuilderState.fetchStructureState.projectionState.previewData(
-            node,
-          ),
-        ).catch(applicationStore.alertUnhandledError);
+        flowResult(explorerState.previewData(node)).catch(
+          applicationStore.alertUnhandledError,
+        );
       }
     };
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
 
     if (!node.mappingData.mapped && !explorerState.showUnmappedProperties) {
       return null;
@@ -523,12 +414,7 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
             node={node}
           />
         }
-        disabled={
-          !showContextMenu ||
-          // NOTE: this might make it hard to modularize
-          // See https://github.com/finos/legend-studio/issues/731
-          queryBuilderState.fetchStructureState.projectionState.hasParserError
-        }
+        disabled={!showContextMenu || queryBuilderState.backdrop}
         menuProps={{ elevation: 7 }}
         onOpen={onContextMenuOpen}
         onClose={onContextMenuClose}
@@ -595,7 +481,7 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
               >
                 <div
                   className={clsx(
-                    'query-builder-explorer-tree__node__label--property--name',
+                    'query-builder-explorer-tree__node__label--property__name',
                     {
                       'query-builder-explorer-tree__node__label--deprecated':
                         checkForDeprecatedNode(
@@ -885,11 +771,7 @@ export const QueryBuilderExplorerPanel = observer(
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_EXPLORER}
         className={clsx('panel query-builder__explorer', {
-          // NOTE: this might make it hard to modularize
-          // See https://github.com/finos/legend-studio/issues/731
-          backdrop__element:
-            queryBuilderState.fetchStructureState.projectionState
-              .hasParserError,
+          backdrop__element: queryBuilderState.backdrop,
         })}
       >
         <div className="panel__header">
@@ -968,8 +850,13 @@ export const QueryBuilderExplorerPanel = observer(
               explorerState.mappingModelCoverageAnalysisState.isInProgress
             }
           />
-          <QueryBuilderExplorerPropertyDragLayer
-            queryBuilderState={queryBuilderState}
+          <DragPreviewLayer
+            labelGetter={(item: QueryBuilderExplorerTreeDragSource): string =>
+              explorerState.humanizePropertyName
+                ? prettyPropertyName(item.node.label)
+                : item.node.label
+            }
+            types={Object.values(QUERY_BUILDER_EXPLORER_TREE_DND_TYPE)}
           />
           {explorerState.mappingModelCoverageAnalysisState.isInProgress ? (
             <BlankPanelContent>

package/src/components/{QueryBuilderFunctionsExplorerPanel.tsx → explorer/QueryBuilderFunctionsExplorerPanel.tsx}

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type TooltipPlacement,
@@ -37,15 +38,17 @@ import {
   MenuContentItemIcon,
   MenuContentItemLabel,
   MoreVerticalIcon,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type QueryBuilderFunctionsExplorerTreeNodeData,
   type QueryBuilderFunctionsExplorerDragSource,
-  QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE,
   generateFunctionsExplorerTreeNodeData,
   getFunctionsExplorerTreeNodeChildren,
-} from '../stores/QueryFunctionsExplorerState.js';
-import { useDrag, useDragLayer } from 'react-dnd';
+  QUERY_BUILDER_FUNCTION_DND_TYPE,
+} from '../../stores/explorer/QueryFunctionsExplorerState.js';
+import { useDrag } from 'react-dnd';
 import {
   ConcreteFunctionDefinition,
   generateFunctionSignature,
@@ -54,9 +57,7 @@ import {
   ROOT_PACKAGE_NAME,
   getMultiplicityDescription,
 } from '@finos/legend-graph';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { useEffect, useState } from 'react';
-import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 
 const isDependencyTreeNode = (
   node: QueryBuilderFunctionsExplorerTreeNodeData,
@@ -134,53 +135,6 @@ const QueryBuilderFunctionInfoTooltip: React.FC<{
   );
 };
 
-const QueryBuilderFunctionDragLayer = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { itemType, item, isDragging, currentPosition } = useDragLayer(
-      (monitor) => ({
-        itemType:
-          monitor.getItemType() as QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE,
-        item: monitor.getItem<QueryBuilderFunctionsExplorerDragSource | null>(),
-        isDragging: monitor.isDragging(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
-        currentPosition: monitor.getClientOffset(),
-      }),
-    );
-    if (
-      !isDragging ||
-      !item ||
-      !Object.values(QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE).includes(
-        itemType,
-      ) ||
-      item.node.dndType ===
-        QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.PACKAGE
-    ) {
-      return null;
-    }
-    return (
-      <div className="query-builder__functions-explorer__tree__drag-preview-layer">
-        <div
-          className="query-builder__functions-explorer__tree__drag-preview"
-          style={
-            !currentPosition
-              ? { display: 'none' }
-              : {
-                  transform: `translate(${currentPosition.x + 20}px, ${
-                    currentPosition.y + 10
-                  }px)`,
-                }
-          }
-        >
-          {generateFunctionSignature(
-            item.node.packageableElement as ConcreteFunctionDefinition,
-            true,
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
 const QueryBuilderFunctionsExplorerListEntry = observer(
   (props: {
     queryBuilderState: QueryBuilderState;
@@ -196,15 +150,12 @@ const QueryBuilderFunctionsExplorerListEntry = observer(
     const functionSignature = generateFunctionSignature(element, true);
     const [, dragConnector, dragPreviewConnector] = useDrag(
       () => ({
-        type: QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.FUNCTION,
+        type: QUERY_BUILDER_FUNCTION_DND_TYPE,
         item: { node: node },
       }),
       [node],
     );
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
+    useDragPreviewLayer(dragPreviewConnector);
 
     return (
       <div
@@ -279,23 +230,19 @@ const QueryBuilderFunctionsExplorerTreeNodeContainer = observer(
     const selectNode = (): void => {
       onNodeSelect?.(node);
     };
-    const [, dragConnector, dragPreviewConnector] = useDrag(
+    const [, dragConnector, dragPreviewConnector] = useDrag<{
+      node?: QueryBuilderFunctionsExplorerTreeNodeData;
+    }>(
       () => ({
-        type:
-          node.packageableElement instanceof ConcreteFunctionDefinition
-            ? QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.FUNCTION
-            : QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.PACKAGE,
-        item: (): { node?: QueryBuilderFunctionsExplorerTreeNodeData } =>
+        type: QUERY_BUILDER_FUNCTION_DND_TYPE,
+        item: () =>
           node.packageableElement instanceof ConcreteFunctionDefinition
             ? { node }
             : {},
       }),
       [node],
     );
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
+    useDragPreviewLayer(dragPreviewConnector);
 
     return (
       <div>
@@ -523,8 +470,16 @@ export const QueryBuilderFunctionsExplorerPanel = observer(
           </div>
         </div>
         <div className="panel__content query-builder__functions-explorer__content">
-          <QueryBuilderFunctionDragLayer
-            queryBuilderState={queryBuilderState}
+          <DragPreviewLayer
+            labelGetter={(
+              item: QueryBuilderFunctionsExplorerDragSource,
+            ): string =>
+              generateFunctionSignature(
+                item.node.packageableElement as ConcreteFunctionDefinition,
+                true,
+              )
+            }
+            types={[QUERY_BUILDER_FUNCTION_DND_TYPE]}
           />
           {((showDependencyFuncions &&
             (!queryFunctionsState.dependencyTreeData ||

package/src/components/{QueryBuilderMilestoneEditor.tsx → explorer/QueryBuilderMilestoneEditor.tsx}

@@ -15,11 +15,11 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import {
   type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_TREE_DND_TYPE,
-} from '../stores/QueryParametersState.js';
+  QUERY_BUILDER_PARAMETER_DND_TYPE,
+} from '../../stores/QueryParametersState.js';
 import { useCallback } from 'react';
 import {
   type ValueSpecification,
@@ -32,10 +32,10 @@ import {
   TYPICAL_MULTIPLICITY_TYPE,
 } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
-import { type DropTargetMonitor, useDrop } from 'react-dnd';
-import { VariableExpressionViewer } from './QueryBuilderParameterPanel.js';
-import { Dialog } from '@finos/legend-art';
-import { generateDefaultValueForPrimitiveType } from '../stores/QueryBuilderValueSpecificationBuilderHelper.js';
+import { useDrop } from 'react-dnd';
+import { VariableExpressionViewer } from '../QueryBuilderParameterPanel.js';
+import { Dialog, PanelEntryDropZonePlaceholder } from '@finos/legend-art';
+import { generateDefaultValueForPrimitiveType } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { BasicValueSpecificationEditor } from '@finos/legend-application';
 
 const MilestoningParameterEditor = observer(
@@ -58,13 +58,14 @@ const MilestoningParameterEditor = observer(
       },
       [queryBuilderState, stereotype],
     );
-    const [{ isMilestoningParameterValueDragOver }, dropConnector] = useDrop(
+    const [{ isMilestoningParameterValueDragOver }, dropConnector] = useDrop<
+      QueryBuilderParameterDragSource,
+      void,
+      { isMilestoningParameterValueDragOver: boolean }
+    >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_TREE_DND_TYPE.VARIABLE],
-        drop: (
-          item: QueryBuilderParameterDragSource,
-          monitor: DropTargetMonitor,
-        ): void => {
+        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
           }
@@ -114,32 +115,31 @@ const MilestoningParameterEditor = observer(
         queryBuilderState.querySetupState.setProcessingDate(parameter);
       }
     };
+
     return (
-      <div
-        ref={dropConnector}
-        className="query-builder__parameter-editor dnd__overlay__container"
-      >
-        {isMilestoningParameterValueDragOver && (
-          <div className="query-builder__parameter-editor__node__dnd__overlay">
-            Change Milestoning Parameter Value
-          </div>
-        )}
-        <BasicValueSpecificationEditor
-          valueSpecification={milestoningParameter}
-          graph={queryBuilderState.graphManagerState.graph}
-          setValueSpecification={(val: ValueSpecification): void =>
-            stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL
-              ? queryBuilderState.querySetupState.setBusinessDate(val)
-              : queryBuilderState.querySetupState.setProcessingDate(val)
-          }
-          typeCheckOption={{
-            expectedType:
-              queryBuilderState.graphManagerState.graph.getPrimitiveType(
-                PRIMITIVE_TYPE.DATE,
-              ),
-          }}
-          resetValue={resetMilestoningParameter}
-        />
+      <div ref={dropConnector} className="query-builder__parameter-editor">
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={isMilestoningParameterValueDragOver}
+          label="Change Milestoning Parameter Value"
+          className="query-builder__dnd__placeholder"
+        >
+          <BasicValueSpecificationEditor
+            valueSpecification={milestoningParameter}
+            graph={queryBuilderState.graphManagerState.graph}
+            setValueSpecification={(val: ValueSpecification): void =>
+              stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL
+                ? queryBuilderState.querySetupState.setBusinessDate(val)
+                : queryBuilderState.querySetupState.setProcessingDate(val)
+            }
+            typeCheckOption={{
+              expectedType:
+                queryBuilderState.graphManagerState.graph.getPrimitiveType(
+                  PRIMITIVE_TYPE.DATE,
+                ),
+            }}
+            resetValue={resetMilestoningParameter}
+          />
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },

package/src/components/{QueryBuilderPropertySearchPanel.tsx → explorer/QueryBuilderPropertySearchPanel.tsx}

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useRef, useState } from 'react';
 import {
   clsx,
   CheckSquareIcon,
@@ -28,6 +29,7 @@ import {
   SearchIcon,
   ChevronDownIcon,
   ChevronRightIcon,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   Class,
@@ -37,10 +39,8 @@ import {
 } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { QUERY_BUILDER_PROPERTY_SEARCH_TYPE } from '../QueryBuilder_Const.js';
+import { QUERY_BUILDER_PROPERTY_SEARCH_TYPE } from '../../QueryBuilder_Const.js';
 import {
   type QueryBuilderExplorerTreeNodeData,
   QueryBuilderExplorerTreePropertyNodeData,
@@ -48,15 +48,15 @@ import {
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
   getQueryBuilderPropertyNodeData,
   type QueryBuilderExplorerState,
-} from '../stores/QueryBuilderExplorerState.js';
-import { prettyPropertyName } from '../stores/QueryBuilderPropertyEditorState.js';
-import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+} from '../../stores/explorer/QueryBuilderExplorerState.js';
+import { prettyPropertyName } from '../../stores/QueryBuilderPropertyEditorState.js';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import {
   QueryBuilderSubclassInfoTooltip,
   renderPropertyTypeIcon,
 } from './QueryBuilderExplorerPanel.js';
-import { QueryBuilderPropertyInfoTooltip } from './QueryBuilderPropertyInfoTooltip.js';
-import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
+import { QueryBuilderPropertyInfoTooltip } from '../shared/QueryBuilderPropertyInfoTooltip.js';
+import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 
 const prettyPropertyNameFromNodeId = (name: string): string => {
   let propNameArray = name.split('.');
@@ -116,7 +116,9 @@ const QueryBuilderTreeNodeViewer = observer(
       props;
     const [isExpandable, setIsExpandable] = useState(false);
     const propertySearchPanelState = explorerState.propertySearchPanelState;
-    const [, dragConnector, dragPreviewConnector] = useDrag(
+    const [, dragConnector, dragPreviewConnector] = useDrag<{
+      node?: QueryBuilderExplorerTreePropertyNodeData;
+    }>(
       () => ({
         type:
           node instanceof QueryBuilderExplorerTreePropertyNodeData
@@ -126,16 +128,17 @@ const QueryBuilderTreeNodeViewer = observer(
               ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
               : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
             : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
-        item: (): { node?: QueryBuilderExplorerTreePropertyNodeData } =>
+        item: () =>
           node instanceof QueryBuilderExplorerTreePropertyNodeData
             ? { node }
             : {},
-        collect: (monitor): { isDragging: boolean } => ({
+        collect: (monitor) => ({
           isDragging: monitor.isDragging(),
         }),
       }),
       [node],
     );
+    useDragPreviewLayer(dragPreviewConnector);
     const isMultiple =
       (node instanceof QueryBuilderExplorerTreePropertyNodeData &&
         (node.property.multiplicity.upperBound === undefined ||
@@ -186,10 +189,6 @@ const QueryBuilderTreeNodeViewer = observer(
         node.parentId === pn.id,
     );
 
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
-
     return (
       <div>
         <div