@finos/legend-query-builder 0.2.0 → 0.2.2

package/src/components/QueryBuilderResultPanel.tsx

@@ -62,22 +62,22 @@ import type { CellMouseOverEvent } from '@ag-grid-community/core';
 import {
   QueryBuilderDerivationProjectionColumnState,
   QueryBuilderProjectionColumnState,
-} from '../stores/fetch-structure/projection/QueryBuilderProjectionColumnState.js';
+} from '../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import {
   type QueryBuilderPostFilterTreeNodeData,
   PostFilterConditionState,
   QueryBuilderPostFilterTreeConditionNodeData,
-} from '../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterState.js';
+} from '../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.js';
 import {
   QueryBuilderPostFilterOperator_Equal,
   QueryBuilderPostFilterOperator_NotEqual,
-} from '../stores/fetch-structure/projection/post-filter/operators/QueryBuilderPostFilterOperator_Equal.js';
+} from '../stores/fetch-structure/tds/post-filter/operators/QueryBuilderPostFilterOperator_Equal.js';
 import {
   QueryBuilderPostFilterOperator_In,
   QueryBuilderPostFilterOperator_NotIn,
-} from '../stores/fetch-structure/projection/post-filter/operators/QueryBuilderPostFilterOperator_In.js';
-import type { QueryBuilderPostFilterOperator } from '../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterOperator.js';
-import { QueryBuilderProjectionState } from '../stores/fetch-structure/projection/QueryBuilderProjectionState.js';
+} from '../stores/fetch-structure/tds/post-filter/operators/QueryBuilderPostFilterOperator_In.js';
+import type { QueryBuilderPostFilterOperator } from '../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterOperator.js';
+import { QueryBuilderTDSState } from '../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import {
   instanceValue_setValue,
   instanceValue_setValues,
@@ -89,22 +89,22 @@ const QueryBuilderGridResultContextMenu = observer(
     HTMLDivElement,
     {
       event: CellMouseOverEvent | null;
-      projectionState: QueryBuilderProjectionState;
+      tdsState: QueryBuilderTDSState;
     }
   >(function QueryBuilderResultContextMenu(props, ref) {
-    const { event, projectionState } = props;
+    const { event, tdsState } = props;
     const applicationStore = useApplicationStore();
     const postFilterEqualOperator = new QueryBuilderPostFilterOperator_Equal();
     const postFilterInOperator = new QueryBuilderPostFilterOperator_In();
     const postFilterNotEqualOperator =
       new QueryBuilderPostFilterOperator_NotEqual();
     const postFilterNotInOperator = new QueryBuilderPostFilterOperator_NotIn();
-    const postFilterState = projectionState.postFilterState;
+    const postFilterState = tdsState.postFilterState;
     const projectionColumnState = guaranteeNonNullable(
-      projectionState.columns
+      tdsState.projectionColumns
         .filter((c) => c.columnName === event?.column.getColId())
         .concat(
-          projectionState.aggregationState.columns
+          tdsState.aggregationState.columns
             .filter((c) => c.columnName === event?.column.getColId())
             .map((ag) => ag.projectionColumnState),
         )[0],
@@ -256,7 +256,7 @@ const QueryBuilderGridResultContextMenu = observer(
     };
 
     const filterByOrOut = (isFilterBy: boolean): void => {
-      projectionState.setShowPostFilterPanel(true);
+      tdsState.setShowPostFilterPanel(true);
       const existingPostFilterNode = getExistingPostFilterNode(
         isFilterBy
           ? [postFilterEqualOperator, postFilterInOperator]
@@ -320,18 +320,16 @@ const QueryBuilderGridResult = observer(
       <ContextMenu
         content={
           // NOTE: we only support this functionality for grid result with a projection fetch-structure
-          fetchStructureImplementation instanceof
-          QueryBuilderProjectionState ? (
+          fetchStructureImplementation instanceof QueryBuilderTDSState ? (
             <QueryBuilderGridResultContextMenu
               event={cellDoubleClickedEvent}
-              projectionState={fetchStructureImplementation}
+              tdsState={fetchStructureImplementation}
             />
           ) : null
         }
         disabled={
-          !(
-            fetchStructureImplementation instanceof QueryBuilderProjectionState
-          ) || !queryBuilderState.isQuerySupported
+          !(fetchStructureImplementation instanceof QueryBuilderTDSState) ||
+          !queryBuilderState.isQuerySupported
         }
         menuProps={{ elevation: 7 }}
         key={executionResult._UUID}
@@ -537,28 +535,28 @@ export const QueryBuilderResultPanel = observer(
                 </div>
               </button>
             ) : (
-              <button
-                className="query-builder__result__execute-btn"
-                onClick={runQuery}
-                tabIndex={-1}
-                title={
-                  queryValidationIssues
-                    ? `Query is not valid:\n${queryValidationIssues
-                        .map((issue) => `\u2022 ${issue}`)
-                        .join('\n')}`
-                    : undefined
-                }
-                disabled={!isQueryValid}
-              >
-                <div className="query-builder__result__execute-btn__label">
+              <div className="query-builder__result__execute-btn">
+                <button
+                  className="query-builder__result__execute-btn__label"
+                  onClick={runQuery}
+                  tabIndex={-1}
+                  title={
+                    queryValidationIssues
+                      ? `Query is not valid:\n${queryValidationIssues
+                          .map((issue) => `\u2022 ${issue}`)
+                          .join('\n')}`
+                      : undefined
+                  }
+                  disabled={!isQueryValid}
+                >
                   <PlayIcon className="query-builder__result__execute-btn__label__icon" />
                   <div className="query-builder__result__execute-btn__label__title">
                     Run Query
                   </div>
-                </div>
+                </button>
                 <DropdownMenu
                   className="query-builder__result__execute-btn__dropdown-btn"
-                  disabled={resultState.isGeneratingPlan}
+                  disabled={resultState.isGeneratingPlan || !isQueryValid}
                   content={
                     <MenuContent>
                       <MenuContentItem
@@ -582,10 +580,12 @@ export const QueryBuilderResultPanel = observer(
                 >
                   <CaretDownIcon />
                 </DropdownMenu>
-              </button>
+              </div>
             )}
             <DropdownMenu
               className="query-builder__result__export__dropdown"
+              title="Export"
+              disabled={!isQueryValid}
               content={
                 <MenuContent>
                   {Object.values(EXECUTION_SERIALIZATION_FORMAT).map(
@@ -607,21 +607,12 @@ export const QueryBuilderResultPanel = observer(
                 elevation: 7,
               }}
             >
-              <button
-                className="query-builder__result__export__dropdown__label"
-                tabIndex={-1}
-                title="Export"
-                disabled={!isQueryValid}
-              >
+              <div className="query-builder__result__export__dropdown__label">
                 Export
-              </button>
-              <button
-                className="query-builder__result__export__dropdown__trigger"
-                tabIndex={-1}
-                disabled={!isQueryValid}
-              >
+              </div>
+              <div className="query-builder__result__export__dropdown__trigger">
                 <CaretDownIcon />
-              </button>
+              </div>
             </DropdownMenu>
           </div>
         </div>

package/src/components/QueryBuilderSideBar.tsx

@@ -187,6 +187,7 @@ export const QueryBuilderClassSelector = observer(
                   ? 'Choose a class...'
                   : noMatchMessage ?? 'No class found'
               }
+              disabled={classOptions.length <= 1}
               noMatchMessage={noMatchMessage}
               options={classOptions}
               onChange={changeClass}

package/src/components/QueryBuilderTextEditor.tsx

@@ -20,12 +20,12 @@ import { clsx, Dialog } from '@finos/legend-art';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { QueryBuilderTextEditorMode } from '../stores/QueryBuilderTextEditorState.js';
 import { flowResult } from 'mobx';
-import { QueryBuilderLambdaEditor } from './shared/QueryBuilderLambdaEditor.js';
 import {
   EDITOR_LANGUAGE,
   TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
+import { LambdaEditor } from './shared/LambdaEditor.js';
 
 export const QueryBuilderTextEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -38,7 +38,7 @@ export const QueryBuilderTextEditor = observer(
     const discardChanges = (): void => {
       queryBuilderState.textEditorState.setMode(undefined);
       // force close the backdrop just in case changes are discarded when there are grammar issues
-      queryBuilderState.setShowBackdrop(false);
+      applicationStore.setShowBackdrop(false);
     };
     const mode = queryTextEditorState.mode;
     useEffect(() => {
@@ -82,10 +82,9 @@ export const QueryBuilderTextEditor = observer(
               })}
             >
               {mode === QueryBuilderTextEditorMode.TEXT && (
-                <QueryBuilderLambdaEditor
+                <LambdaEditor
                   className="query-builder-text-mode__lambda-editor"
                   disabled={queryTextEditorState.isConvertingLambdaToString}
-                  queryBuilderState={queryBuilderState}
                   lambdaEditorState={queryTextEditorState}
                   forceBackdrop={false}
                   forceExpansion={true}

package/src/components/QueryBuilder_LegendApplicationPlugin.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  collectKeyedCommandConfigEntriesFromConfig,
+  LegendApplicationPlugin,
+  type KeyedCommandConfigEntry,
+  type LegendApplicationPluginManager,
+} from '@finos/legend-application';
+import packageJson from '../../package.json';
+import { QUERY_BUILDER_COMMAND_CONFIG } from '../stores/QueryBuilderCommand.js';
+
+export class QueryBuilder_LegendApplicationPlugin extends LegendApplicationPlugin {
+  static NAME = packageJson.extensions.applicationPlugin;
+
+  constructor() {
+    super(QueryBuilder_LegendApplicationPlugin.NAME, packageJson.version);
+  }
+
+  install(
+    pluginManager: LegendApplicationPluginManager<LegendApplicationPlugin>,
+  ): void {
+    pluginManager.registerApplicationPlugin(this);
+  }
+
+  override getExtraKeyedCommandConfigEntries(): KeyedCommandConfigEntry[] {
+    return collectKeyedCommandConfigEntriesFromConfig(
+      QUERY_BUILDER_COMMAND_CONFIG,
+    );
+  }
+}

package/src/components/QueryBuilder_TestID.ts

@@ -19,7 +19,7 @@ export enum QUERY_BUILDER_TEST_ID {
 
   QUERY_BUILDER = 'query__builder',
   QUERY_BUILDER_SETUP = 'query__builder__setup',
-  QUERY_BUILDER_PROJECTION = 'query__builder__projection',
+  QUERY_BUILDER_TDS = 'query__builder__tds',
   QUERY_BUILDER_GRAPH_FETCH = 'query__builder__graph__fetch',
   QUERY_BUILDER_FILTER = 'query__builder__filter',
   QUERY_BUILDER_POST_FILTER = 'query__builder__post-filter',

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -436,7 +436,7 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
         }
         disabled={
           !(node instanceof QueryBuilderExplorerTreePropertyNodeData) ||
-          queryBuilderState.showBackdrop
+          applicationStore.showBackdrop
         }
         menuProps={{ elevation: 7 }}
         onOpen={onContextMenuOpen}
@@ -801,7 +801,7 @@ export const QueryBuilderExplorerPanel = observer(
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_EXPLORER}
         className={clsx('panel query-builder__explorer', {
-          backdrop__element: queryBuilderState.showBackdrop,
+          backdrop__element: applicationStore.showBackdrop,
         })}
       >
         <div className="panel__header">
@@ -831,6 +831,7 @@ export const QueryBuilderExplorerPanel = observer(
             </button>
             <DropdownMenu
               className="panel__header__action"
+              title="Show Options Menu..."
               content={
                 <MenuContent>
                   <MenuContentItem onClick={toggleShowUnmappedProperties}>
@@ -871,10 +872,7 @@ export const QueryBuilderExplorerPanel = observer(
                 elevation: 7,
               }}
             >
-              <MoreVerticalIcon
-                title="Show Options Menu..."
-                className="query-builder__icon__more-options"
-              />
+              <MoreVerticalIcon className="query-builder__icon__more-options" />
             </DropdownMenu>
           </div>
           {propertySearchPanelState.isSearchPanelOpen && (

package/src/components/explorer/QueryBuilderFunctionsExplorerPanel.tsx

@@ -454,6 +454,7 @@ export const QueryBuilderFunctionsExplorerPanel = observer(
             </div>
             <DropdownMenu
               className="panel__header__action"
+              title="Show Options Menu..."
               content={
                 <MenuContent>
                   <MenuContentItem onClick={toggleShowDependencyFuncions}>
@@ -472,10 +473,7 @@ export const QueryBuilderFunctionsExplorerPanel = observer(
                 elevation: 7,
               }}
             >
-              <MoreVerticalIcon
-                title="Show Options Menu..."
-                className="query-builder__icon__more-options"
-              />
+              <MoreVerticalIcon className="query-builder__icon__more-options" />
             </DropdownMenu>
           </div>
         </div>

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

@@ -23,9 +23,9 @@ import {
 } from '@finos/legend-art';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { prettyCONSTName } from '@finos/legend-shared';
-import { QueryBuilderProjectionPanel } from './QueryBuilderProjectionPanel.js';
+import { QueryBuilderTDSPanel } from './QueryBuilderTDSPanel.js';
 import { QueryBuilderGraphFetchTreePanel } from './QueryBuilderGraphFetchTreePanel.js';
-import { QueryBuilderProjectionState } from '../../stores/fetch-structure/projection/QueryBuilderProjectionState.js';
+import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { QueryBuilderGraphFetchTreeState } from '../../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 import { FETCH_STRUCTURE_IMPLEMENTATION } from '../../stores/fetch-structure/QueryBuilderFetchStructureImplementationState.js';
@@ -36,12 +36,8 @@ const QueryBuilderFetchStructureEditor = observer(
     const fetchStructureState = queryBuilderState.fetchStructureState;
     const fetchStructureImplementation = fetchStructureState.implementation;
 
-    if (fetchStructureImplementation instanceof QueryBuilderProjectionState) {
-      return (
-        <QueryBuilderProjectionPanel
-          projectionState={fetchStructureImplementation}
-        />
-      );
+    if (fetchStructureImplementation instanceof QueryBuilderTDSState) {
+      return <QueryBuilderTDSPanel tdsState={fetchStructureImplementation} />;
     } else if (
       fetchStructureImplementation instanceof QueryBuilderGraphFetchTreeState
     ) {

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

@@ -70,9 +70,9 @@ import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import { useDrop, useDrag } from 'react-dnd';
-import { getColumnMultiplicity } from '../../stores/fetch-structure/projection/post-filter/operators/QueryBuilderPostFilterOperatorHelper.js';
-import { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/projection/aggregation/QueryBuilderAggregationState.js';
-import type { QueryBuilderPostFilterOperator } from '../../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterOperator.js';
+import { getColumnMultiplicity } from '../../stores/fetch-structure/tds/post-filter/operators/QueryBuilderPostFilterOperatorHelper.js';
+import { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregationState.js';
+import type { QueryBuilderPostFilterOperator } from '../../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterOperator.js';
 import {
   type QueryBuilderPostFilterTreeNodeData,
   type QueryBuilderPostFilterDropTarget,
@@ -82,13 +82,13 @@ import {
   QueryBuilderPostFilterTreeGroupNodeData,
   QUERY_BUILDER_POST_FILTER_DND_TYPE,
   QueryBuilderPostFilterTreeBlankConditionNodeData,
-} from '../../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterState.js';
+} from '../../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.js';
 import {
   type QueryBuilderProjectionColumnState,
   type QueryBuilderProjectionColumnDragSource,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
   QueryBuilderDerivationProjectionColumnState,
-} from '../../stores/fetch-structure/projection/QueryBuilderProjectionColumnState.js';
+} from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import {
   type QueryBuilderParameterDragSource,
@@ -97,19 +97,19 @@ import {
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
-import { QueryBuilderProjectionState } from '../../stores/fetch-structure/projection/QueryBuilderProjectionState.js';
+import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
     HTMLDivElement,
     {
-      projectionState: QueryBuilderProjectionState;
+      tdsState: QueryBuilderTDSState;
       node: QueryBuilderPostFilterTreeNodeData;
     }
   >(function QueryBuilderPostFilterConditionContextMenu(props, ref) {
-    const { projectionState, node } = props;
-    const postFilterState = projectionState.postFilterState;
+    const { tdsState, node } = props;
+    const postFilterState = tdsState.postFilterState;
     const removeNode = (): void =>
       postFilterState.removeNodeAndPruneBranch(node);
     const createCondition = (): void => {
@@ -365,7 +365,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
   }) => {
     const { node, isDragOver } = props;
     const graph =
-      node.condition.postFilterState.projectionState.queryBuilderState
+      node.condition.postFilterState.tdsState.queryBuilderState
         .graphManagerState.graph;
     const applicationStore = useApplicationStore();
     const changeOperator = (val: QueryBuilderPostFilterOperator) => (): void =>
@@ -460,6 +460,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
             </div>
             <DropdownMenu
               className="query-builder-post-filter-tree__condition-node__operator"
+              title="Choose Operator..."
               content={
                 <MenuContent>
                   {node.condition.operators.map((op) => (
@@ -482,13 +483,9 @@ const QueryBuilderPostFilterConditionEditor = observer(
               <div className="query-builder-post-filter-tree__condition-node__operator__label">
                 {node.condition.operator.getLabel()}
               </div>
-              <button
-                className="query-builder-post-filter-tree__condition-node__operator__dropdown__trigger"
-                tabIndex={-1}
-                title="Choose Operator..."
-              >
+              <div className="query-builder-post-filter-tree__condition-node__operator__dropdown__trigger">
                 <CaretDownIcon />
-              </button>
+              </div>
             </DropdownMenu>
             {node.condition.value && (
               <div
@@ -505,8 +502,8 @@ const QueryBuilderPostFilterConditionEditor = observer(
                     setValueSpecification={changeValueSpecification}
                     graph={graph}
                     obseverContext={
-                      node.condition.postFilterState.projectionState
-                        .queryBuilderState.observableContext
+                      node.condition.postFilterState.tdsState.queryBuilderState
+                        .observableContext
                     }
                     typeCheckOption={{
                       expectedType: guaranteeNonNullable(
@@ -553,17 +550,17 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
     props: TreeNodeContainerProps<
       QueryBuilderPostFilterTreeNodeData,
       {
-        projectionState: QueryBuilderProjectionState;
+        tdsState: QueryBuilderTDSState;
       }
     >,
   ) => {
     const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
-    const { projectionState: projectionState } = innerProps;
+    const { tdsState } = innerProps;
     const ref = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const applicationStore = useApplicationStore();
-    const postFilterState = projectionState.postFilterState;
+    const postFilterState = tdsState.postFilterState;
     const isExpandable =
       node instanceof QueryBuilderPostFilterTreeGroupNodeData;
     const selectNode = (): void => onNodeSelect?.(node);
@@ -674,7 +671,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       <ContextMenu
         content={
           <QueryBuilderPostFilterConditionContextMenu
-            projectionState={projectionState}
+            tdsState={tdsState}
             node={node}
           />
         }
@@ -763,7 +760,7 @@ const QueryBuilderPostFilterTreeNodeView = observer(
     props: TreeNodeViewProps<
       QueryBuilderPostFilterTreeNodeData,
       {
-        projectionState: QueryBuilderProjectionState;
+        tdsState: QueryBuilderTDSState;
       }
     >,
   ) => {
@@ -801,9 +798,9 @@ const QueryBuilderPostFilterTreeNodeView = observer(
 );
 
 const QueryBuilderPostFilterTree = observer(
-  (props: { projectionState: QueryBuilderProjectionState }) => {
-    const { projectionState } = props;
-    const postFilterState = projectionState.postFilterState;
+  (props: { tdsState: QueryBuilderTDSState }) => {
+    const { tdsState } = props;
+    const postFilterState = tdsState.postFilterState;
     const rootNodes = postFilterState.rootIds.map((rootId) =>
       postFilterState.getNode(rootId),
     );
@@ -829,7 +826,7 @@ const QueryBuilderPostFilterTree = observer(
               getChildNodes={getChildNodes}
               onNodeSelect={onNodeSelect}
               innerProps={{
-                projectionState: projectionState,
+                tdsState: tdsState,
               }}
             />
           ))}
@@ -840,10 +837,10 @@ const QueryBuilderPostFilterTree = observer(
 );
 
 const QueryBuilderPostFilterPanelContent = observer(
-  (props: { projectionState: QueryBuilderProjectionState }) => {
-    const { projectionState } = props;
+  (props: { tdsState: QueryBuilderTDSState }) => {
+    const { tdsState } = props;
     const applicationStore = useApplicationStore();
-    const postFilterState = projectionState.postFilterState;
+    const postFilterState = tdsState.postFilterState;
     const rootNode = postFilterState.getRootNode();
     // actions
     const collapseTree = (): void => {
@@ -902,10 +899,9 @@ const QueryBuilderPostFilterPanelContent = observer(
         try {
           const columnState = (item as QueryBuilderProjectionColumnDragSource)
             .columnState;
-          const aggregateColumnState =
-            projectionState.aggregationState.columns.find(
-              (column) => column.projectionColumnState === columnState,
-            );
+          const aggregateColumnState = tdsState.aggregationState.columns.find(
+            (column) => column.projectionColumnState === columnState,
+          );
           if (
             !aggregateColumnState &&
             columnState instanceof QueryBuilderDerivationProjectionColumnState
@@ -938,11 +934,7 @@ const QueryBuilderPostFilterPanelContent = observer(
           undefined,
         );
       },
-      [
-        applicationStore,
-        postFilterState,
-        projectionState.aggregationState.columns,
-      ],
+      [applicationStore, postFilterState, tdsState.aggregationState.columns],
     );
     const [{ isDragOver }, dropTargetConnector] = useDrop<
       QueryBuilderProjectionColumnDragSource,
@@ -1057,7 +1049,7 @@ const QueryBuilderPostFilterPanelContent = observer(
                   ): string => item.node.dragPreviewLabel}
                   types={Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE)}
                 />
-                <QueryBuilderPostFilterTree projectionState={projectionState} />
+                <QueryBuilderPostFilterTree tdsState={tdsState} />
               </>
             )}
           </PanelDropZone>
@@ -1078,15 +1070,12 @@ export const QueryBuilderPostFilterPanel = observer(
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER}
         className="panel"
       >
-        {fetchStructureImplementation instanceof
-          QueryBuilderProjectionState && (
+        {fetchStructureImplementation instanceof QueryBuilderTDSState && (
           <QueryBuilderPostFilterPanelContent
-            projectionState={fetchStructureImplementation}
+            tdsState={fetchStructureImplementation}
           />
         )}
-        {!(
-          fetchStructureImplementation instanceof QueryBuilderProjectionState
-        ) && (
+        {!(fetchStructureImplementation instanceof QueryBuilderTDSState) && (
           <>
             <div className="panel__header">
               <div className="panel__header__title">