@finos/legend-query-builder 4.14.58 → 4.14.59

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

@@ -82,7 +82,6 @@ import {
   PostFilterTDSColumnValueConditionValueState,
 } from '../../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.js';
 import {
-  type QueryBuilderProjectionColumnState,
   type QueryBuilderProjectionColumnDragSource,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
   QueryBuilderDerivationProjectionColumnState,
@@ -115,6 +114,23 @@ import {
 import { QueryBuilderPropertyNameDisplay } from '../QueryBuilderPropertyExpressionEditor.js';
 import { convertTextToPrimitiveInstanceValue } from '../../stores/shared/ValueSpecificationEditorHelper.js';
 
+export const CAN_DROP_MAIN_GROUP_DND_TYPES = [
+  QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+  QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
+];
+
+export const CAN_DROP_POST_FILTER_NODE_DND_TYPES = [
+  QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+  QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
+  QUERY_BUILDER_POST_FILTER_DND_TYPE.CONDITION,
+];
+
+export const CAN_DROP_POST_FILTER_VALUE_DND_TYPES = [
+  QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+  QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+];
+
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
     HTMLDivElement,
@@ -169,7 +185,7 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
     isDragOver: boolean;
     isDroppable: boolean;
   }) => {
-    const { node, isDragOver, isDroppable: isDroppable } = props;
+    const { node, isDragOver, isDroppable } = props;
     const switchOperation: React.MouseEventHandler<HTMLDivElement> = (
       event,
     ): void => {
@@ -211,94 +227,50 @@ export const QueryBuilderColumnBadge = observer(
   (props: {
     colState: QueryBuilderTDSColumnState;
     removeColumn: () => void;
-    onColumnChange?:
-      | ((columnState: QueryBuilderProjectionColumnState) => Promise<void>)
-      | undefined;
   }) => {
-    const { colState, onColumnChange, removeColumn } = props;
-    const applicationStore = useApplicationStore();
+    const { colState, removeColumn } = props;
     const type = colState.getColumnType();
-    const handleDrop = onColumnChange
-      ? useCallback(
-          (item: QueryBuilderProjectionColumnDragSource): Promise<void> =>
-            onColumnChange(item.columnState),
-          [onColumnChange],
-        )
-      : undefined;
-    const [{ isDragOver }, dropConnector] = useDrop<
-      QueryBuilderProjectionColumnDragSource,
-      void,
-      { isDragOver: boolean }
-    >(
-      () => ({
-        accept: [
-          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
-        ],
-        drop: (item, monitor): void => {
-          if (!monitor.didDrop()) {
-            handleDrop?.(item).catch(applicationStore.alertUnhandledError);
-          } // prevent drop event propagation to accomondate for nested DnD
-        },
-        collect: (monitor) => ({
-          isDragOver: monitor.isOver({ shallow: true }),
-        }),
-      }),
-      [applicationStore, handleDrop],
-    );
 
-    const renderColumnBadgeContent = (): React.ReactNode => (
-      <div className="query-builder-column-badge__content">
-        {type && (
+    return (
+      <div className="query-builder-column-badge">
+        <div className="query-builder-column-badge__content">
+          {type && (
+            <div
+              className={clsx('query-builder-column-badge__type', {
+                'query-builder-column-badge__type--class':
+                  type instanceof Class,
+                'query-builder-column-badge__type--enumeration':
+                  type instanceof Enumeration,
+                'query-builder-column-badge__type--primitive':
+                  type instanceof PrimitiveType,
+              })}
+            >
+              {renderPropertyTypeIcon(type)}
+            </div>
+          )}
           <div
-            className={clsx('query-builder-column-badge__type', {
-              'query-builder-column-badge__type--class': type instanceof Class,
-              'query-builder-column-badge__type--enumeration':
-                type instanceof Enumeration,
-              'query-builder-column-badge__type--primitive':
-                type instanceof PrimitiveType,
-            })}
+            className="query-builder-column-badge__property"
+            title={`${colState.columnName}`}
           >
-            {renderPropertyTypeIcon(type)}
+            {colState.columnName}
           </div>
-        )}
-        <div
-          className="query-builder-column-badge__property"
-          title={`${colState.columnName}`}
-        >
-          {colState.columnName}
+          <QueryBuilderColumnInfoTooltip
+            columnState={colState}
+            placement="bottom-end"
+          >
+            <div className="query-builder-column-badge__property__info">
+              <InfoCircleIcon />
+            </div>
+          </QueryBuilderColumnInfoTooltip>
+          <button
+            className="query-builder-column-badge__action"
+            name="Reset"
+            title="Reset"
+            onClick={removeColumn}
+          >
+            <RefreshIcon />
+          </button>
         </div>
-        <QueryBuilderColumnInfoTooltip
-          columnState={colState}
-          placement="bottom-end"
-        >
-          <div className="query-builder-column-badge__property__info">
-            <InfoCircleIcon />
-          </div>
-        </QueryBuilderColumnInfoTooltip>
-        <button
-          className="query-builder-column-badge__action"
-          name="Reset"
-          title="Reset"
-          onClick={removeColumn}
-        >
-          <RefreshIcon />
-        </button>
-      </div>
-    );
-
-    return onColumnChange ? (
-      <div ref={dropConnector} className="query-builder-column-badge">
-        <PanelEntryDropZonePlaceholder
-          isDragOver={isDragOver}
-          label="Change Property"
-        >
-          {renderColumnBadgeContent()}
-        </PanelEntryDropZonePlaceholder>
-      </div>
-    ) : (
-      <div className="query-builder-column-badge">
-        {renderColumnBadgeContent()}
       </div>
     );
   },
@@ -378,10 +350,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
       { isFilterValueDragOver: boolean }
     >(
       () => ({
-        accept: [
-          QUERY_BUILDER_VARIABLE_DND_TYPE,
-          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-        ],
+        accept: CAN_DROP_POST_FILTER_VALUE_DND_TYPES,
         canDrop: (item): boolean =>
           canDropItemOntoNodeValue(item, node.condition),
         drop: (item, monitor): void => {
@@ -399,8 +368,9 @@ const QueryBuilderPostFilterConditionEditor = observer(
     const { isFilterValueDroppable } = useDragLayer((monitor) => ({
       isFilterValueDroppable:
         monitor.isDragging() &&
-        (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
-          monitor.getItemType() === QUERY_BUILDER_VARIABLE_DND_TYPE) &&
+        CAN_DROP_POST_FILTER_VALUE_DND_TYPES.includes(
+          monitor.getItemType()?.toString() ?? '',
+        ) &&
         canDropItemOntoNodeValue(monitor.getItem(), node.condition),
     }));
     const resetNode = (): void => {
@@ -479,11 +449,6 @@ const QueryBuilderPostFilterConditionEditor = observer(
         rightConditionValue instanceof
         PostFilterTDSColumnValueConditionValueState
       ) {
-        const changeRightCol = async (
-          columnState: QueryBuilderProjectionColumnState,
-        ): Promise<void> => {
-          rightConditionValue.changeCol(columnState);
-        };
         return (
           <div
             ref={dropConnector}
@@ -496,9 +461,6 @@ const QueryBuilderPostFilterConditionEditor = observer(
             >
               <QueryBuilderColumnBadge
                 colState={rightConditionValue.tdsColumn}
-                onColumnChange={
-                  isFilterValueDroppable ? changeRightCol : undefined
-                }
                 removeColumn={removeTDSColumnValue}
               />
             </PanelEntryDropZonePlaceholder>
@@ -703,11 +665,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       { isDragOver: boolean; deepIsDragOver: boolean }
     >(
       () => ({
-        accept: [
-          ...Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE),
-          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
-        ],
+        accept: CAN_DROP_POST_FILTER_NODE_DND_TYPES,
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item, monitor.getItemType() as string);
@@ -744,8 +702,9 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
     const { isDroppable } = useDragLayer((monitor) => ({
       isDroppable:
         monitor.isDragging() &&
-        (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
-          monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
+        CAN_DROP_POST_FILTER_NODE_DND_TYPES.includes(
+          monitor.getItemType()?.toString() ?? '',
+        ),
     }));
 
     // context menu
@@ -761,12 +720,6 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
         data-testid={
           QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_TREE_NODE_CONTAINER
         }
-        onClick={
-          node instanceof QueryBuilderPostFilterTreeConditionNodeData ||
-          node instanceof QueryBuilderPostFilterTreeBlankConditionNodeData
-            ? selectNode
-            : undefined
-        }
         className={clsx('query-builder-post-filter-tree__node__container', {
           'query-builder-post-filter-tree__node__container--group':
             node instanceof QueryBuilderPostFilterTreeGroupNodeData,
@@ -799,6 +752,12 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
             }
             className="query-builder-post-filter-tree__node__content"
             ref={dragRef}
+            onClick={
+              node instanceof QueryBuilderPostFilterTreeConditionNodeData ||
+              node instanceof QueryBuilderPostFilterTreeBlankConditionNodeData
+                ? selectNode
+                : undefined
+            }
           >
             {node instanceof QueryBuilderPostFilterTreeGroupNodeData && (
               <QueryBuilderPostFilterGroupConditionEditor
@@ -1013,8 +972,9 @@ const QueryBuilderPostFilterPanelContent = observer(
     const { isDroppable } = useDragLayer((monitor) => ({
       isDroppable:
         monitor.isDragging() &&
-        (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
-          monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
+        CAN_DROP_MAIN_GROUP_DND_TYPES.includes(
+          monitor.getItemType()?.toString() ?? '',
+        ),
     }));
 
     // Drag and Drop
@@ -1071,10 +1031,7 @@ const QueryBuilderPostFilterPanelContent = observer(
       { isDragOver: boolean }
     >(
       () => ({
-        accept: [
-          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
-        ],
+        accept: CAN_DROP_MAIN_GROUP_DND_TYPES,
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item).catch(applicationStore.alertUnhandledError);

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -121,6 +121,34 @@ import { buildPropertyExpressionChain } from '../../stores/QueryBuilderValueSpec
 import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 import { convertTextToPrimitiveInstanceValue } from '../../stores/shared/ValueSpecificationEditorHelper.js';
 
+export const CAN_DROP_MAIN_GROUP_DND_TYPES_FETCH_SUPPORTED = [
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+  QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+];
+
+export const CAN_DROP_MAIN_GROUP_DND_TYPES = [
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+];
+
+export const CAN_DROP_FILTER_NODE_DND_TYPES_FETCH_SUPPORTED = [
+  QUERY_BUILDER_FILTER_DND_TYPE.CONDITION,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+  QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+];
+
+export const CAN_DROP_FILTER_NODE_DND_TYPES = [
+  QUERY_BUILDER_FILTER_DND_TYPE.CONDITION,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+];
+
+export const CAN_DROP_FILTER_VALUE_DND_TYPES = [
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+];
+
 const isCollectionProperty = (
   propertyExpression: AbstractPropertyExpression,
 ): boolean => {
@@ -605,19 +633,6 @@ const buildFilterTree = (
   }
 };
 
-export const IS_DRAGGABLE_FILTER_DND_TYPES_FETCH_SUPPORTED = [
-  QUERY_BUILDER_FILTER_DND_TYPE.CONDITION,
-  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
-  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
-  QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-];
-
-export const IS_DRAGGABLE_FILTER_DND_TYPES = [
-  QUERY_BUILDER_FILTER_DND_TYPE.CONDITION,
-  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
-  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
-];
-
 const QueryBuilderFilterGroupConditionEditor = observer(
   (props: {
     node: QueryBuilderFilterTreeGroupNodeData;
@@ -762,7 +777,7 @@ const QueryBuilderFilterConditionEditor = observer(
       { isFilterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
+        accept: CAN_DROP_FILTER_VALUE_DND_TYPES,
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
@@ -1084,8 +1099,8 @@ const QueryBuilderFilterTreeNodeContainer = observer(
       () => ({
         accept:
           queryBuilderState.TEMPORARY__isDnDFetchStructureToFilterSupported
-            ? IS_DRAGGABLE_FILTER_DND_TYPES_FETCH_SUPPORTED
-            : IS_DRAGGABLE_FILTER_DND_TYPES,
+            ? CAN_DROP_FILTER_NODE_DND_TYPES_FETCH_SUPPORTED
+            : CAN_DROP_FILTER_NODE_DND_TYPES,
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item, monitor.getItemType() as string);
@@ -1121,8 +1136,8 @@ const QueryBuilderFilterTreeNodeContainer = observer(
       isDroppable:
         monitor.isDragging() &&
         (queryBuilderState.TEMPORARY__isDnDFetchStructureToFilterSupported
-          ? IS_DRAGGABLE_FILTER_DND_TYPES_FETCH_SUPPORTED
-          : IS_DRAGGABLE_FILTER_DND_TYPES
+          ? CAN_DROP_FILTER_NODE_DND_TYPES_FETCH_SUPPORTED
+          : CAN_DROP_FILTER_NODE_DND_TYPES
         ).includes(monitor.getItemType()?.toString() ?? ''),
     }));
 
@@ -1143,12 +1158,6 @@ const QueryBuilderFilterTreeNodeContainer = observer(
         data-testid={
           QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE_CONTAINER
         }
-        onClick={
-          node instanceof QueryBuilderFilterTreeConditionNodeData ||
-          node instanceof QueryBuilderFilterTreeBlankConditionNodeData
-            ? selectNode
-            : undefined
-        }
         className={clsx('query-builder-filter-tree__node__container', {
           'query-builder-filter-tree__node__container--group':
             node instanceof QueryBuilderFilterTreeGroupNodeData,
@@ -1185,6 +1194,12 @@ const QueryBuilderFilterTreeNodeContainer = observer(
             }
             className="query-builder-filter-tree__node__content"
             ref={dragRef}
+            onClick={
+              node instanceof QueryBuilderFilterTreeConditionNodeData ||
+              node instanceof QueryBuilderFilterTreeBlankConditionNodeData
+                ? selectNode
+                : undefined
+            }
           >
             {node instanceof QueryBuilderFilterTreeGroupNodeData && (
               <QueryBuilderFilterGroupConditionEditor
@@ -1408,8 +1423,8 @@ export const QueryBuilderFilterPanel = observer(
       isDroppable:
         monitor.isDragging() &&
         (queryBuilderState.TEMPORARY__isDnDFetchStructureToFilterSupported
-          ? IS_DRAGGABLE_FILTER_DND_TYPES_FETCH_SUPPORTED
-          : IS_DRAGGABLE_FILTER_DND_TYPES
+          ? CAN_DROP_MAIN_GROUP_DND_TYPES_FETCH_SUPPORTED
+          : CAN_DROP_MAIN_GROUP_DND_TYPES
         ).includes(monitor.getItemType()?.toString() ?? ''),
     }));
 
@@ -1459,15 +1474,8 @@ export const QueryBuilderFilterPanel = observer(
       () => ({
         accept:
           queryBuilderState.TEMPORARY__isDnDFetchStructureToFilterSupported
-            ? [
-                QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
-                QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
-                QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-              ]
-            : [
-                QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
-                QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
-              ],
+            ? CAN_DROP_MAIN_GROUP_DND_TYPES_FETCH_SUPPORTED
+            : CAN_DROP_MAIN_GROUP_DND_TYPES,
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item, monitor.getItemType() as string);

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

@@ -284,8 +284,10 @@ export const QueryBuilderTDSGridResult = observer(
       const selectedCells = [];
       if (selectedRanges) {
         for (const selectedRange of selectedRanges) {
-          const startRow: number = selectedRange.startRow?.rowIndex ?? 0;
-          const endRow: number = selectedRange.endRow?.rowIndex ?? 0;
+          const rangeStart: number = selectedRange.startRow?.rowIndex ?? 0;
+          const rangeEnd: number = selectedRange.endRow?.rowIndex ?? 0;
+          const startRow = rangeStart < rangeEnd ? rangeStart : rangeEnd;
+          const endRow = rangeStart < rangeEnd ? rangeEnd : rangeStart;
           const selectedColumns: string[] = selectedRange.columns.map((col) =>
             col.getColId(),
           );

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

@@ -81,9 +81,9 @@ import { buildtdsPropertyExpressionFromColState } from './operators/QueryBuilder
 import { TDS_COLUMN_GETTER } from '../../../../graph/QueryBuilderMetaModelConst.js';
 
 export enum QUERY_BUILDER_POST_FILTER_DND_TYPE {
-  GROUP_CONDITION = 'GROUP_CONDITION',
-  CONDITION = 'CONDITION',
-  BLANK_CONDITION = 'BLANK_CONDITION',
+  GROUP_CONDITION = 'QUERY_BUILDER_POST_FILTER_DND_TYPE.GROUP_CONDITION',
+  CONDITION = 'QUERY_BUILDER_POST_FILTER_DND_TYPE.CONDITION',
+  BLANK_CONDITION = 'QUERY_BUILDER_POST_FILTER_DND_TYPE.BLANK_CONDITION',
 }
 
 export const getTypeFromDerivedProperty = (

package/src/stores/filter/QueryBuilderFilterState.ts

@@ -62,9 +62,9 @@ import {
 import { instanceValue_setValues } from '../shared/ValueSpecificationModifierHelper.js';
 
 export enum QUERY_BUILDER_FILTER_DND_TYPE {
-  GROUP_CONDITION = 'GROUP_CONDITION',
-  CONDITION = 'CONDITION',
-  BLANK_CONDITION = 'BLANK_CONDITION',
+  GROUP_CONDITION = 'QUERY_BUILDER_FILTER_DND_TYPE.GROUP_CONDITION',
+  CONDITION = 'QUERY_BUILDER_FILTER_DND_TYPE.CONDITION',
+  BLANK_CONDITION = 'QUERY_BUILDER_FILTER_DND_TYPE.BLANK_CONDITION',
 }
 
 export interface QueryBuilderFilterConditionDragSource {