@finos/legend-application-query 5.1.0 → 5.2.1

package/src/components/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,9 +39,7 @@ 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 {
   type QueryBuilderExplorerTreeNodeData,
@@ -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

package/src/components/QueryBuilderResultModifierPanel.tsx

@@ -32,6 +32,7 @@ import {
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import type { QueryBuilderProjectionColumnState } from '../stores/QueryBuilderProjectionState.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
 
 const ColumnSortEditor = observer(
   (props: {
@@ -39,6 +40,7 @@ const ColumnSortEditor = observer(
     columnSort: SortColumnState;
   }) => {
     const { queryBuilderState, columnSort } = props;
+    const applicationStore = useApplicationStore();
     const projectionState =
       queryBuilderState.fetchStructureState.projectionState;
     const sortColumns = queryBuilderState.resultSetModifierState.sortColumns;
@@ -81,7 +83,7 @@ const ColumnSortEditor = observer(
           disabled={projectionOptions.length <= 1}
           onChange={onChange}
           value={value}
-          darkMode={true}
+          darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
         />
         <button
           className="btn--dark btn--sm query-builder__projection__options__sort__type-btn"
@@ -95,7 +97,7 @@ const ColumnSortEditor = observer(
           )}
         </button>
         <button
-          className="query-builder__projection__options__sort__remove-btn"
+          className="query-builder__projection__options__sort__remove-btn btn--dark btn--caution"
           onClick={deleteColumnSort}
           tabIndex={-1}
           title={'Remove'}

package/src/components/QueryBuilderResultPanel.tsx

@@ -288,6 +288,61 @@ const QueryBuilderResultContextMenu = observer(
   }),
 );
 
+const QueryBuilderGridResult = observer(
+  (props: {
+    executionResult: TdsExecutionResult;
+    queryBuilderState: QueryBuilderState;
+  }) => {
+    const { executionResult, queryBuilderState } = props;
+    const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
+      useState<CellMouseOverEvent | null>(null);
+    const columns = executionResult.result.columns;
+    const rowData = executionResult.result.rows.map((_row) => {
+      const row: Record<PropertyKey, unknown> = {};
+      const cols = executionResult.result.columns;
+      _row.values.forEach((value, idx) => {
+        // `ag-grid` shows `false` value as empty string so we have
+        // call `.toString()` to avoid this behavior.
+        // See https://github.com/finos/legend-studio/issues/1008
+        row[cols[idx] as string] = isBoolean(value) ? String(value) : value;
+      });
+      return row;
+    });
+
+    return (
+      <ContextMenu
+        content={
+          <QueryBuilderResultContextMenu
+            event={cellDoubleClickedEvent}
+            queryBuilderState={queryBuilderState}
+          />
+        }
+        menuProps={{ elevation: 7 }}
+        key={executionResult._UUID}
+        className={clsx('ag-theme-balham-dark query-builder__result__tds-grid')}
+      >
+        <AgGridReact
+          rowData={rowData}
+          onCellMouseOver={(event): void => {
+            setCellDoubleClickedEvent(event);
+          }}
+        >
+          {columns.map((colName) => (
+            <AgGridColumn
+              minWidth={50}
+              sortable={true}
+              resizable={true}
+              field={colName}
+              key={colName}
+              flex={1}
+            />
+          ))}
+        </AgGridReact>
+      </ContextMenu>
+    );
+  },
+);
+
 const QueryBuilderResultValues = observer(
   (props: {
     executionResult: ExecutionResult;
@@ -295,52 +350,11 @@ const QueryBuilderResultValues = observer(
   }) => {
     const { executionResult, queryBuilderState } = props;
     if (executionResult instanceof TdsExecutionResult) {
-      const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
-        useState<CellMouseOverEvent | null>(null);
-      const columns = executionResult.result.columns;
-      const rowData = executionResult.result.rows.map((_row) => {
-        const row: Record<PropertyKey, unknown> = {};
-        const cols = executionResult.result.columns;
-        _row.values.forEach((value, idx) => {
-          // `ag-grid` shows `false` value as empty string so we have
-          // call `.toString()` to avoid this behavior.
-          // See https://github.com/finos/legend-studio/issues/1008
-          row[cols[idx] as string] = isBoolean(value) ? String(value) : value;
-        });
-        return row;
-      });
       return (
-        <ContextMenu
-          content={
-            <QueryBuilderResultContextMenu
-              event={cellDoubleClickedEvent}
-              queryBuilderState={queryBuilderState}
-            />
-          }
-          menuProps={{ elevation: 7 }}
-          key={executionResult._UUID}
-          className={clsx(
-            'ag-theme-balham-dark query-builder__result__tds-grid',
-          )}
-        >
-          <AgGridReact
-            rowData={rowData}
-            onCellMouseOver={(event): void => {
-              setCellDoubleClickedEvent(event);
-            }}
-          >
-            {columns.map((colName) => (
-              <AgGridColumn
-                minWidth={50}
-                sortable={true}
-                resizable={true}
-                field={colName}
-                key={colName}
-                flex={1}
-              />
-            ))}
-          </AgGridReact>
-        </ContextMenu>
+        <QueryBuilderGridResult
+          queryBuilderState={queryBuilderState}
+          executionResult={executionResult}
+        />
       );
     } else if (executionResult instanceof RawExecutionResult) {
       return (
@@ -414,6 +428,9 @@ export const QueryBuilderResultPanel = observer(
         ],
       });
     };
+    const queryValidationIssues = queryBuilderState.validationIssues;
+    const isQueryValid =
+      !queryBuilderState.isQuerySupported() || !queryValidationIssues;
     const runQuery = (): void => {
       if (queryParametersState.parameterStates.length) {
         queryParametersState.parameterValuesEditorState.open(
@@ -475,7 +492,7 @@ export const QueryBuilderResultPanel = observer(
                   type="number"
                   value={resultState.previewLimit}
                   onChange={changeLimit}
-                  disabled={!queryBuilderState.isValidQueryBuilderState()}
+                  disabled={!isQueryValid}
                 />
               </div>
             )}
@@ -484,7 +501,7 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__stop-btn"
                 onClick={cancelQuery}
                 tabIndex={-1}
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 <div className="btn--dark btn--caution query-builder__result__stop-btn__label">
                   <PauseCircleIcon className="query-builder__result__stop-btn__label__icon" />
@@ -499,11 +516,13 @@ export const QueryBuilderResultPanel = observer(
                 onClick={runQuery}
                 tabIndex={-1}
                 title={
-                  !queryBuilderState.isValidQueryBuilderState()
-                    ? 'Query is not valid'
+                  queryValidationIssues
+                    ? `Query is not valid:\n${queryValidationIssues
+                        .map((issue) => `\u2022 ${issue}`)
+                        .join('\n')}`
                     : undefined
                 }
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 <div className="query-builder__result__execute-btn__label">
                   <PlayIcon className="query-builder__result__execute-btn__label__icon" />
@@ -566,14 +585,14 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__export__dropdown__label"
                 tabIndex={-1}
                 title="Export"
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 Export
               </button>
               <button
                 className="query-builder__result__export__dropdown__trigger"
                 tabIndex={-1}
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 <CaretDownIcon />
               </button>

package/src/components/QueryBuilderSetupPanel.tsx

@@ -21,7 +21,6 @@ import {
   PURE_ClassIcon,
   PURE_MappingIcon,
   PURE_RuntimeIcon,
-  EyeIcon,
   ClockIcon,
   clsx,
 } from '@finos/legend-art';
@@ -48,6 +47,7 @@ import {
   type PackageableElementOption,
   getPackageableElementOptionFormatter,
   buildElementOption,
+  useApplicationStore,
 } from '@finos/legend-application';
 import { MilestoningParametersEditor } from './QueryBuilderMilestoneEditor.js';
 import { useState } from 'react';
@@ -124,8 +124,8 @@ const generateClassLabel = (
         >
           {val.name}
         </div>
-        <EyeIcon
-          className="query-builder__setup__config__item__class-label__btn"
+        <ClockIcon
+          className="query-builder__setup__config__item__class-label__milestoning"
           title={milestoningParameterValues}
         />
       </div>
@@ -151,6 +151,7 @@ const generateClassLabel = (
 export const QueryBuilderSetupPanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
     const querySetupState = queryBuilderState.querySetupState;
     const [isMilestoneEditorOpened, setIsMilestoneEditorOpened] =
       useState<boolean>(false);
@@ -266,16 +267,15 @@ export const QueryBuilderSetupPanel = observer(
               options={classOptions}
               onChange={changeClass}
               value={selectedClassOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               disabled={!isQuerySupported || querySetupState.classIsReadOnly}
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: true,
-                graphManagerState: queryBuilderState.graphManagerState,
+                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
               })}
             />
             <button
-              className="btn--dark btn__icon--dark"
+              className="btn--dark btn__icon--dark query-builder__setup__milestoning"
               tabIndex={-1}
               onClick={(): void => setIsMilestoneEditorOpened(true)}
               disabled={!isMilestonedQuery}
@@ -303,11 +303,10 @@ export const QueryBuilderSetupPanel = observer(
               options={mappingOptions}
               onChange={changeMapping}
               value={selectedMappingOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: true,
-                graphManagerState: queryBuilderState.graphManagerState,
+                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
               })}
             />
           </div>
@@ -332,7 +331,7 @@ export const QueryBuilderSetupPanel = observer(
               options={runtimeOptions}
               onChange={changeRuntime}
               value={selectedRuntimeOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               filterOption={runtimeFilterOption}
             />
           </div>

package/src/components/QueryBuilderUnsupportedQueryEditor.tsx

@@ -48,7 +48,9 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
     const { queryBuilderState } = props;
     const queryUnsupportedState = queryBuilderState.queryUnsupportedState;
     const lambdaError = queryUnsupportedState.lambdaError;
-    const errorMessage = lambdaError ? `due to: ${lambdaError.message}` : '';
+    const errorMessage = lambdaError?.message
+      ? ` due to: ${lambdaError.message}`
+      : '';
     const openLambdaModal = (): void =>
       queryBuilderState.queryTextEditorState.openModal(
         QueryTextEditorMode.TEXT,
@@ -63,7 +65,7 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
         <div className="panel__content">
           <BlankPanelContent>
             <div className="query-builder__unsupported-view__main">
-              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode ${errorMessage}`}</div>
+              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode${errorMessage}`}</div>
               <button
                 className="btn--dark query-builder__unsupported-view__to-text-mode__btn"
                 onClick={openLambdaModal}

package/src/components/QueryEditor.tsx

@@ -22,6 +22,9 @@ import {
   RobotIcon,
   SaveIcon,
   BlankPanelContent,
+  clsx,
+  EmptyLightBulbIcon,
+  LightBulbIcon,
 } from '@finos/legend-art';
 import { getQueryParameters } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -108,6 +111,8 @@ const QueryExportDialogContent = observer(
           )}
           <button
             className="btn modal__footer__close-btn btn--dark"
+            // TODO?: we should probably annotate here why,
+            // when we disable this action
             disabled={!allowCreate}
             onClick={create}
           >
@@ -199,6 +204,10 @@ const QueryEditorHeaderContent = observer(() => {
       ),
     );
   };
+  const toggleLightDarkTheme = (): void =>
+    applicationStore.TEMPORARY__setIsLightThemeEnabled(
+      !applicationStore.TEMPORARY__isLightThemeEnabled,
+    );
   const saveQuery = (): void => {
     editorStore.queryBuilderState
       .saveQuery(async (lambda: RawLambda) => {
@@ -227,6 +236,20 @@ const QueryEditorHeaderContent = observer(() => {
         >
           <ExternalLinkSquareIcon />
         </button>
+        {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
+          <button
+            className="query-editor__header__action query-editor__header__action--simple btn--dark"
+            tabIndex={-1}
+            title="Toggle Light/Dark Theme"
+            onClick={toggleLightDarkTheme}
+          >
+            {applicationStore.TEMPORARY__isLightThemeEnabled ? (
+              <EmptyLightBulbIcon />
+            ) : (
+              <LightBulbIcon />
+            )}
+          </button>
+        )}
         <button
           className="query-editor__header__action btn--dark"
           tabIndex={-1}
@@ -256,9 +279,24 @@ export const QueryEditor = observer(() => {
     );
   }, [editorStore, applicationStore]);
 
+  useEffect(() => {
+    document.body.classList.toggle(
+      'light-theme',
+      applicationStore.TEMPORARY__isLightThemeEnabled,
+    );
+  }, [applicationStore.TEMPORARY__isLightThemeEnabled]);
+
   return (
     <DndProvider backend={HTML5Backend}>
-      <div className="query-editor">
+      <div
+        className={clsx([
+          'query-editor ',
+          {
+            'query-editor--light':
+              applicationStore.TEMPORARY__isLightThemeEnabled,
+          },
+        ])}
+      >
         <div className="query-editor__header">
           <button
             className="query-editor__header__back-btn btn--dark"

package/src/stores/QueryBuilderExplorerState.ts

@@ -355,6 +355,11 @@ export const getQueryBuilderPropertyNodeData = (
     parentNode.isPartOfDerivedPropertyBranch ||
     (parentNode instanceof QueryBuilderExplorerTreePropertyNodeData &&
       parentNode.property instanceof DerivedProperty);
+  // NOTE: in case of association, to avoid infinite exploration path
+  // we will prune it, on the other hand, in circular composition case
+  // A has property of type B and B has property of type A
+  // we will allow users to explore as deeply as they wish
+  // See https://github.com/finos/legend-studio/issues/1172
   if (
     property instanceof Property &&
     parentNode instanceof QueryBuilderExplorerTreePropertyNodeData &&

package/src/stores/QueryBuilderFetchStructureState.ts

@@ -27,6 +27,11 @@ export enum FETCH_STRUCTURE_MODE {
 
 export class QueryBuilderFetchStructureState {
   queryBuilderState: QueryBuilderState;
+  /**
+   * TODO?: perhaps it would eventually make sense to default to
+   * graph-fetch since `getAll()` naturally works for graph-fetch case
+   * and graph-fetch allows somewhat an empty tree
+   */
   fetchStructureMode = FETCH_STRUCTURE_MODE.PROJECTION;
   projectionState: QueryBuilderProjectionState;
   graphFetchTreeState: QueryBuilderGraphFetchTreeState;
@@ -63,4 +68,8 @@ export class QueryBuilderFetchStructureState {
   isProjectionMode(): boolean {
     return this.fetchStructureMode === FETCH_STRUCTURE_MODE.PROJECTION;
   }
+
+  get validationIssues(): string[] | undefined {
+    return this.projectionState.validationIssues;
+  }
 }

package/src/stores/QueryBuilderFilterState.ts

@@ -264,7 +264,7 @@ export abstract class QueryBuilderFilterTreeNodeData implements TreeNodeData {
     });
   }
 
-  abstract get dragLayerLabel(): string;
+  abstract get dragPreviewLabel(): string;
   setIsOpen(val: boolean): void {
     this.isOpen = val;
   }
@@ -289,14 +289,14 @@ export class QueryBuilderFilterTreeGroupNodeData extends QueryBuilderFilterTreeN
       setGroupOperation: action,
       addChildNode: action,
       removeChildNode: action,
-      dragLayerLabel: computed,
+      dragPreviewLabel: computed,
     });
 
     this.groupOperation = groupOperation;
     this.isOpen = true;
   }
 
-  get dragLayerLabel(): string {
+  get dragPreviewLabel(): string {
     return `${this.groupOperation.toUpperCase()} group`;
   }
 
@@ -328,13 +328,13 @@ export class QueryBuilderFilterTreeConditionNodeData extends QueryBuilderFilterT
 
     makeObservable(this, {
       condition: observable,
-      dragLayerLabel: computed,
+      dragPreviewLabel: computed,
     });
 
     this.condition = condition;
   }
 
-  get dragLayerLabel(): string {
+  get dragPreviewLabel(): string {
     return this.condition.propertyExpressionState.title;
   }
 }
@@ -344,11 +344,11 @@ export class QueryBuilderFilterTreeBlankConditionNodeData extends QueryBuilderFi
     super(parentId);
 
     makeObservable(this, {
-      dragLayerLabel: computed,
+      dragPreviewLabel: computed,
     });
   }
 
-  get dragLayerLabel(): string {
+  get dragPreviewLabel(): string {
     return '<blank>';
   }
 }
@@ -452,11 +452,6 @@ export class QueryBuilderFilterState
   isRearrangingConditions = false;
   operators: QueryBuilderFilterOperator[] = [];
   private _suppressClickawayEventListener = false;
-  /**
-   * This flag is for turning on/off dnd from projection panel to filter panel,
-   * and will be leveraged when the concepts of workflows are introduced into query builder.
-   */
-  allowDnDProjectionToFilter = true;
 
   constructor(
     queryBuilderState: QueryBuilderState,

package/src/stores/QueryBuilderGraphFetchTreeState.ts

@@ -26,6 +26,7 @@ import {
   buildGraphFetchTreeData,
 } from './QueryBuilderGraphFetchTreeUtil.js';
 import type { QueryBuilderExplorerTreePropertyNodeData } from './QueryBuilderExplorerState.js';
+import { assertNonNullable } from '@finos/legend-shared';
 
 export class QueryBuilderGraphFetchTreeState {
   queryBuilderState: QueryBuilderState;
@@ -77,14 +78,19 @@ export class QueryBuilderGraphFetchTreeState {
   }
 
   addProperty(node: QueryBuilderExplorerTreePropertyNodeData): void {
-    if (this.treeData) {
-      addQueryBuilderPropertyNode(
-        this.treeData,
-        this.queryBuilderState.explorerState.nonNullableTreeData,
-        node,
-        this.queryBuilderState,
-      );
-      this.setGraphFetchTree({ ...this.treeData });
+    if (!this.treeData) {
+      this.initialize();
     }
+    assertNonNullable(
+      this.treeData,
+      `Graph-fetch tree has not been properly initialized`,
+    );
+    addQueryBuilderPropertyNode(
+      this.treeData,
+      this.queryBuilderState.explorerState.nonNullableTreeData,
+      node,
+      this.queryBuilderState,
+    );
+    this.setGraphFetchTree({ ...this.treeData });
   }
 }

package/src/stores/QueryBuilderLambdaProcessor.ts

@@ -693,6 +693,10 @@ export class QueryBuilderLambdaProcessor
         (e, idx) => e.setColumnName(aliases[idx] as string),
       );
 
+      this.queryBuilderState.fetchStructureState.setFetchStructureMode(
+        FETCH_STRUCTURE_MODE.PROJECTION,
+      );
+
       return;
     } else if (
       matchFunctionName(
@@ -943,6 +947,10 @@ export class QueryBuilderLambdaProcessor
         (e, idx) => e.setColumnName(aliases[idx] as string),
       );
 
+      this.queryBuilderState.fetchStructureState.setFetchStructureMode(
+        FETCH_STRUCTURE_MODE.PROJECTION,
+      );
+
       return;
     } else if (
       matchFunctionName(functionName, QUERY_BUILDER_SUPPORTED_FUNCTIONS.TDS_AGG)

package/src/stores/QueryBuilderPostFilterState.ts

@@ -165,7 +165,7 @@ export abstract class QueryBuilderPostFilterTreeNodeData
     });
   }
 
-  abstract get dragLayerLabel(): string;
+  abstract get dragPreviewLabel(): string;
   setIsOpen(val: boolean): void {
     this.isOpen = val;
   }
@@ -197,13 +197,13 @@ export class QueryBuilderPostFilterTreeGroupNodeData extends QueryBuilderPostFil
       setGroupOperation: action,
       addChildNode: action,
       removeChildNode: action,
-      dragLayerLabel: computed,
+      dragPreviewLabel: computed,
     });
     this.groupOperation = groupOperation;
     this.isOpen = true;
   }
 
-  get dragLayerLabel(): string {
+  get dragPreviewLabel(): string {
     return `${this.groupOperation.toUpperCase()} group`;
   }
 
@@ -238,13 +238,13 @@ export class QueryBuilderPostFilterTreeConditionNodeData extends QueryBuilderPos
 
     makeObservable(this, {
       condition: observable,
-      dragLayerLabel: computed,
+      dragPreviewLabel: computed,
     });
 
     this.condition = condition;
   }
 
-  get dragLayerLabel(): string {
+  get dragPreviewLabel(): string {
     return this.condition.columnName;
   }
 }
@@ -254,11 +254,11 @@ export class QueryBuilderPostFilterTreeBlankConditionNodeData extends QueryBuild
     super(parentId);
 
     makeObservable(this, {
-      dragLayerLabel: computed,
+      dragPreviewLabel: computed,
     });
   }
 
-  get dragLayerLabel(): string {
+  get dragPreviewLabel(): string {
     return '<blank>';
   }
 }