@finos/legend-query-builder 4.1.1 → 4.1.3

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

@@ -35,7 +35,7 @@ import {
   PanelContent,
   TrashIcon,
   PanelDnDEntry,
-  PanelDnDEntryDragHandle,
+  PanelEntryDragHandle,
   CalendarIcon,
   CalendarClockIcon,
   CustomSelectorInput,
@@ -325,16 +325,18 @@ const buildCalendarTypeOption = (
 
 const QueryBuilderProjectionColumnEditor = observer(
   (props: { projectionColumnState: QueryBuilderProjectionColumnState }) => {
+    const { projectionColumnState } = props;
+    const columnIdx = projectionColumnState.tdsState.tdsColumns.indexOf(
+      projectionColumnState,
+    );
     const handleRef = useRef<HTMLDivElement>(null);
     const applicationStore = useApplicationStore();
-
     const ref = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
 
-    const { projectionColumnState } = props;
     const tdsState = projectionColumnState.tdsState;
     const isCalendarEnabled = tdsState.queryBuilderState.isCalendarEnabled;
     const isRemovalDisabled = tdsState.isColumnInUse(projectionColumnState);
@@ -478,6 +480,23 @@ const QueryBuilderProjectionColumnEditor = observer(
       }
     };
 
+    const handleDroppingColumn = useCallback(
+      (type: string): void => {
+        if (
+          type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE &&
+          tdsState.draggedColumnIndex !== undefined &&
+          tdsState.hoveredColumnIndex !== undefined
+        ) {
+          tdsState.moveColumn(
+            tdsState.draggedColumnIndex,
+            tdsState.hoveredColumnIndex,
+          );
+        }
+        tdsState.setRearrangeColumnsIndex(undefined, undefined);
+      },
+      [tdsState],
+    );
+
     // Drag and Drop
     const handleHover = useCallback(
       (
@@ -490,6 +509,11 @@ const QueryBuilderProjectionColumnEditor = observer(
         const hoverIndex = tdsState.projectionColumns.findIndex(
           (e) => e === projectionColumnState,
         );
+
+        if (dragIndex === hoverIndex) {
+          tdsState.setRearrangeColumnsIndex(undefined, hoverIndex);
+        }
+
         if (dragIndex === -1 || hoverIndex === -1 || dragIndex === hoverIndex) {
           return;
         }
@@ -507,7 +531,8 @@ const QueryBuilderProjectionColumnEditor = observer(
         if (dragIndex > hoverIndex && dragDistance > distanceThreshold) {
           return;
         }
-        tdsState.moveColumn(dragIndex, hoverIndex);
+
+        tdsState.setRearrangeColumnsIndex(dragIndex, hoverIndex);
       },
       [projectionColumnState, tdsState],
     );
@@ -515,9 +540,15 @@ const QueryBuilderProjectionColumnEditor = observer(
       () => ({
         accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
         hover: (item, monitor): void => handleHover(item, monitor),
+        drop: (item, monitor): void => {
+          if (!monitor.didDrop()) {
+            handleDroppingColumn(monitor.getItemType() as string);
+          }
+        },
       }),
-      [handleHover],
+      [handleHover, handleDroppingColumn],
     );
+
     const [
       { projectionColumnBeingDragged },
       dragConnector,
@@ -548,8 +579,11 @@ const QueryBuilderProjectionColumnEditor = observer(
       }),
       [projectionColumnState],
     );
+
     const isBeingDragged =
-      projectionColumnState === projectionColumnBeingDragged;
+      columnIdx === tdsState.hoveredColumnIndex &&
+      projectionColumnBeingDragged !== undefined;
+
     dragConnector(handleRef);
     dropConnector(ref);
 
@@ -613,6 +647,21 @@ const QueryBuilderProjectionColumnEditor = observer(
     return (
       <PanelDnDEntry
         ref={ref}
+        // TODO: this is the more appropriate solution than what we did
+        // before and in other places for rearrange because it does no
+        // rearrange while on hovering, but on drop, there's some work to
+        // do about the drop location indicator though
+        // See https://github.com/finos/legend-studio/pull/2330
+        placeholder={
+          <div
+            className={
+              (tdsState.hoveredColumnIndex ?? 0) >
+              (tdsState.draggedColumnIndex ?? 0)
+                ? 'query-builder__projection__column__placeholder--bottom'
+                : 'query-builder__projection__column__placeholder--top'
+            }
+          />
+        }
         showPlaceholder={isBeingDragged}
         className="query-builder__projection__column"
       >
@@ -637,9 +686,9 @@ const QueryBuilderProjectionColumnEditor = observer(
           onClose={onContextMenuClose}
         >
           <div className="query-builder__projection__column__container">
-            <PanelDnDEntryDragHandle
-              isBeingDragged={isBeingDragged}
-              dropTargetConnector={handleRef}
+            <PanelEntryDragHandle
+              isDragging={isBeingDragged}
+              dragSourceConnector={handleRef}
               className="query-builder__projection__column__drag-handle__container"
             />
             <div className="query-builder__projection__column__name">
@@ -806,7 +855,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                   ref={dropTargetConnector}
                 >
                   <PanelEntryDropZonePlaceholder
-                    showPlaceholder={isDragOver}
+                    isDragOver={isDragOver}
                     label="Change Date Column"
                     className="query-builder__projection__calendar__date__column__dnd__placeholder"
                   >
@@ -937,8 +986,22 @@ export const QueryBuilderTDSPanel = observer(
       [handleDrop],
     );
 
-    const { showDroppableSuggestion } = useDragLayer((monitor) => ({
-      showDroppableSuggestion:
+    const [, projectionColumnDropConnector] = useDrop<
+      QueryBuilderProjectionColumnDragSource,
+      void,
+      { isOverProjectionColumns: boolean }
+    >(
+      () => ({
+        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
+        collect: (monitor) => ({
+          isOverProjectionColumns: monitor.isOver({ shallow: false }),
+        }),
+      }),
+      [],
+    );
+
+    const { isDroppable } = useDragLayer((monitor) => ({
+      isDroppable:
         monitor.isDragging() &&
         [
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
@@ -989,8 +1052,7 @@ export const QueryBuilderTDSPanel = observer(
         <div className="query-builder__projection__content">
           <PanelDropZone
             isDragOver={isDragOver}
-            showDroppableSuggestion={showDroppableSuggestion}
-            className="query-builder__panel--droppable"
+            isDroppable={isDroppable}
             dropTargetConnector={dropTargetConnector}
           >
             {!projectionColumns.length && (
@@ -1003,6 +1065,7 @@ export const QueryBuilderTDSPanel = observer(
               <div
                 data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS}
                 className="query-builder__projection__columns"
+                ref={projectionColumnDropConnector}
               >
                 <DragPreviewLayer
                   labelGetter={(

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

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

package/src/components/filter/QueryBuilderFilterPanel.tsx

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

package/src/stores/QueryBuilderResultState.ts

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