@finos/legend-application-repl 0.0.50 → 0.0.52

package/src/components/dataCube/{editor/DataCubeEditorFilterPanel.tsx → filter/DataCubeEditorFilter.tsx}

@@ -81,7 +81,9 @@ const DataCubeEditorFilterConditionNodeTextValueEditor = observer(
             inputRef.current?.select();
           }
         }}
-        onChange={(event) => updateValue(event.target.value)}
+        onChange={(event) => {
+          updateValue(event.target.value);
+        }}
       />
     );
   }),
@@ -286,8 +288,8 @@ const DataCubeEditorFilterConditionNodeColumnSelector = observer(
     }
   >(function DataCubeEditorFilterConditionNodeColumnSelector(props, ref) {
     const { value, updateValue, dataCube } = props;
-    const panel = dataCube.editor.filter;
-    const matchingColumn = panel.columns.find(
+    const editor = dataCube.filter;
+    const matchingColumn = editor.columns.find(
       (column) => column.name === value,
     );
     const [
@@ -308,7 +310,7 @@ const DataCubeEditorFilterConditionNodeColumnSelector = observer(
           {value}
         </FormDropdownMenuTrigger>
         <FormDropdownMenu className="w-32" {...columnsDropdownProps}>
-          {panel.columns
+          {editor.columns
             .filter(
               (column) =>
                 matchingColumn &&
@@ -409,7 +411,7 @@ const DataCubeEditorFilterConditionNodeController = observer(
     dataCube: DataCubeState;
   }) => {
     const { className, node, dataCube } = props;
-    const panel = dataCube.editor.filter;
+    const editor = dataCube.filter;
 
     return (
       <div
@@ -420,21 +422,21 @@ const DataCubeEditorFilterConditionNodeController = observer(
       >
         <button
           className="flex h-3.5 w-3.5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 hover:bg-neutral-200"
-          onClick={() => panel.addFilterNode(node)}
+          onClick={() => editor.addFilterNode(node)}
           title="Insert a new column filter, just after this filter."
         >
           <DataCubeIcon.FilterAddOperator className="stroke-[2.5] text-sm" />
         </button>
         <button
           className="flex h-3.5 w-3.5 items-center justify-center border border-l-0 border-neutral-400 hover:bg-neutral-200"
-          onClick={() => panel.removeFilterNode(node)}
+          onClick={() => editor.removeFilterNode(node)}
           title="Remove this filter"
         >
           <DataCubeIcon.FilterRemoveOperator className="stroke-[2.5] text-sm" />
         </button>
         <button
           className="flex h-3.5 w-3.5 items-center justify-center border border-l-0 border-neutral-400 hover:bg-neutral-200"
-          onClick={() => panel.layerFilterNode(node)}
+          onClick={() => editor.layerFilterNode(node)}
           title="Put this filter in its own sub-group (and combine it with other filters)."
         >
           <DataCubeIcon.FilterGroupOperator className="stroke-[2.5] text-sm" />
@@ -470,7 +472,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
     dataCube: DataCubeState;
   }) => {
     const { node, level, dataCube } = props;
-    const panel = dataCube.editor.filter;
+    const editor = dataCube.filter;
     const parentNode = node.parent;
     const nodeIdx = parentNode ? parentNode.children.indexOf(node) : undefined;
     const valueEditorRef = useRef<HTMLElement>(null);
@@ -497,19 +499,19 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
           className={cn(
             'z-1 absolute h-6 w-full bg-opacity-50 group-hover:bg-sky-100 group-hover:bg-opacity-50',
             {
-              'bg-sky-50': node === panel.selectedNode,
+              'bg-sky-50': node === editor.selectedNode,
               'border-[0.5px] border-l-2 border-sky-200 border-l-sky-600':
-                node === panel.selectedNode,
+                node === editor.selectedNode,
             },
           )}
-          onClick={() => panel.setSelectedNode(node)}
+          onClick={() => editor.setSelectedNode(node)}
         />
         <div
           style={{
             paddingLeft: `${level * FILTER_TREE_INDENTATION_SPACE + FILTER_TREE_OFFSET + (level - 1) * FILTER_TREE_CONTROLLER_OFFSET}px`,
           }}
           className="relative h-6 flex-shrink-0"
-          onClick={() => panel.setSelectedNode(node)}
+          onClick={() => editor.setSelectedNode(node)}
         >
           {parentNode && (
             <div
@@ -521,7 +523,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
             >
               <div
                 className={cn('h-[1px] w-full flex-1 bg-neutral-200', {
-                  'bg-sky-600': parentNode === panel.selectedGroupNode,
+                  'bg-sky-600': parentNode === editor.selectedGroupNode,
                 })}
               />
               {nodeIdx !== undefined && nodeIdx > 0 && (
@@ -529,7 +531,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
                   className={cn(
                     'flex h-6 items-center justify-center pl-1 text-xs text-neutral-600',
                     {
-                      'text-sky-600': parentNode === panel.selectedGroupNode,
+                      'text-sky-600': parentNode === editor.selectedGroupNode,
                     },
                   )}
                 >
@@ -559,7 +561,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
           {...columnsDropdownProps}
           onClosed={focusOnValueEditor}
         >
-          {panel.columns.map((column) => (
+          {editor.columns.map((column) => (
             <FormDropdownMenuItem
               key={column.name}
               onClick={() => {
@@ -567,7 +569,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
                   const newOp = node.operation.isCompatibleWithColumn(column)
                     ? node.operation
                     : getNullableFirstEntry(
-                        panel.dataCube.engine.filterOperations.filter((op) =>
+                        editor.dataCube.engine.filterOperations.filter((op) =>
                           op.isCompatibleWithColumn(column),
                         ),
                       );
@@ -597,7 +599,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
           {...operatorsDropdownProps}
           onClosed={focusOnValueEditor}
         >
-          {panel.dataCube.engine.filterOperations
+          {editor.dataCube.engine.filterOperations
             .filter((op) => op.isCompatibleWithColumn(node.column))
             .map((op) => (
               <FormDropdownMenuItem
@@ -639,7 +641,7 @@ const DataCubeEditorFilterGroupNodeDisplay = observer(
     dataCube: DataCubeState;
   }) => {
     const { node, level, dataCube } = props;
-    const panel = dataCube.editor.filter;
+    const editor = dataCube.filter;
     const parentNode = node.parent;
     const nodeIdx = parentNode ? parentNode.children.indexOf(node) : undefined;
     const [
@@ -655,19 +657,19 @@ const DataCubeEditorFilterGroupNodeDisplay = observer(
           className={cn(
             'z-1 absolute h-6 w-full bg-opacity-50 group-hover:bg-sky-100 group-hover:bg-opacity-50',
             {
-              'bg-sky-50': node === panel.selectedNode,
+              'bg-sky-50': node === editor.selectedNode,
               'border-[0.5px] border-l-2 border-sky-200 border-l-sky-600':
-                node === panel.selectedNode,
+                node === editor.selectedNode,
             },
           )}
-          onClick={() => panel.setSelectedNode(node)}
+          onClick={() => editor.setSelectedNode(node)}
         />
         <div
           style={{
             paddingLeft: `${level * FILTER_TREE_INDENTATION_SPACE + FILTER_TREE_OFFSET + (level !== 0 ? (level - 1) * FILTER_TREE_CONTROLLER_OFFSET : 0)}px`,
           }}
           className="relative h-6 flex-shrink-0"
-          onClick={() => panel.setSelectedNode(node)}
+          onClick={() => editor.setSelectedNode(node)}
         >
           {level !== 0 && parentNode && (
             <div
@@ -679,7 +681,7 @@ const DataCubeEditorFilterGroupNodeDisplay = observer(
             >
               <div
                 className={cn('h-[1px] w-full flex-1 bg-neutral-200', {
-                  'bg-sky-600': parentNode === panel.selectedGroupNode,
+                  'bg-sky-600': parentNode === editor.selectedGroupNode,
                 })}
               />
               {nodeIdx !== undefined && nodeIdx > 0 && (
@@ -687,7 +689,7 @@ const DataCubeEditorFilterGroupNodeDisplay = observer(
                   className={cn(
                     'flex h-6 items-center justify-center pl-1 text-xs text-neutral-600',
                     {
-                      'text-sky-600': parentNode === panel.selectedGroupNode,
+                      'text-sky-600': parentNode === editor.selectedGroupNode,
                     },
                   )}
                 >
@@ -757,14 +759,14 @@ const DataCubeEditorFilterGroupDisplay = observer(
     dataCube: DataCubeState;
   }) => {
     const { node, level, dataCube } = props;
-    const panel = dataCube.editor.filter;
+    const editor = dataCube.filter;
 
     return (
       <div className="relative w-full">
         <div
           className={cn('pointer-events-none absolute h-full', {
             'border-[0.5px] border-sky-200 bg-sky-50':
-              node === panel.selectedGroupNode,
+              node === editor.selectedGroupNode,
           })}
           style={{
             marginLeft: `${level * FILTER_TREE_INDENTATION_SPACE + FILTER_TREE_OFFSET + level * FILTER_TREE_CONTROLLER_OFFSET - FILTER_TREE_GROUP_HIGHLIGHT_PADDING}px`,
@@ -781,7 +783,7 @@ const DataCubeEditorFilterGroupDisplay = observer(
             className={cn(
               'pointer-events-none absolute z-10 h-[calc(100%_-_12px)] w-0 border-l border-neutral-200',
               {
-                'border-sky-600': node === panel.selectedGroupNode,
+                'border-sky-600': node === editor.selectedGroupNode,
               },
             )}
             style={{
@@ -818,69 +820,88 @@ const DataCubeEditorFilterGroupDisplay = observer(
   },
 );
 
-export const DataCubeEditorFilterPanel = observer(
+export const DataCubeFilterEditor = observer(
   (props: { dataCube: DataCubeState }) => {
     const { dataCube } = props;
-    const panel = dataCube.editor.filter;
+    const editor = dataCube.filter;
 
     useEffect(() => {
-      panel.setSelectedNode(undefined);
-    }, [panel]);
+      editor.setSelectedNode(undefined);
+    }, [editor]);
 
     return (
-      <div className="h-full w-full select-none p-2">
-        <div className="flex h-6">
-          <div className="flex h-6 items-center text-xl font-medium">
-            <DataCubeIcon.TableFilter />
-          </div>
-          <div className="ml-1 flex h-6 items-center text-xl font-medium">
-            Filter
-          </div>
-        </div>
-        <div className="flex h-[calc(100%_-_24px)] w-full">
-          <div className="flex h-full w-full pt-1">
-            <div
-              className="relative flex h-full w-full overflow-auto rounded-sm border border-neutral-200"
-              onClick={() => panel.setSelectedNode(undefined)}
-            >
-              {!panel.tree.root && (
-                <div className="h-full w-full p-3">
-                  <div>
-                    No filter is specified. Click the button below to start.
-                  </div>
-                  <button
-                    className="w-30 mt-2 h-6 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-                    onClick={() => {
-                      panel.initializeTree();
-                    }}
-                  >
-                    Create New Filter
-                  </button>
-                </div>
-              )}
-              {panel.tree.root && (
+      <>
+        <div className="relative h-[calc(100%_-_40px)] w-full px-2 pt-2">
+          <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
+            <div className="h-full w-full select-none p-2">
+              <div className="flex h-full w-full">
                 <div
-                  className="flex flex-col py-1"
-                  // prevent click event of filter tree from propagating to the
-                  // container which when clicked, will clear node selection
-                  onClick={(event) => event.stopPropagation()}
+                  className="relative flex h-full w-full overflow-auto rounded-sm border border-neutral-200"
+                  onClick={() => editor.setSelectedNode(undefined)}
                 >
-                  <DataCubeEditorFilterGroupDisplay
-                    node={panel.tree.root}
-                    level={0}
-                    dataCube={dataCube}
-                  />
-                  <div
-                    // add a padding so there will always be a clickable area to clear node selection
-                    className="min-h-6 w-full flex-1"
-                    onClick={() => panel.setSelectedNode(undefined)}
-                  />
+                  {!editor.tree.root && (
+                    <div className="h-full w-full p-3">
+                      <div>
+                        No filter is specified. Click the button below to start.
+                      </div>
+                      <button
+                        className="w-30 mt-2 h-6 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+                        onClick={() => {
+                          editor.initializeTree();
+                        }}
+                      >
+                        Create New Filter
+                      </button>
+                    </div>
+                  )}
+                  {editor.tree.root && (
+                    <div
+                      className="flex flex-col py-1"
+                      // prevent click event of filter tree from propagating to the
+                      // container which when clicked, will clear node selection
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <DataCubeEditorFilterGroupDisplay
+                        node={editor.tree.root}
+                        level={0}
+                        dataCube={dataCube}
+                      />
+                      <div
+                        // add a padding so there will always be a clickable area to clear node selection
+                        className="min-h-6 w-full flex-1"
+                        onClick={() => editor.setSelectedNode(undefined)}
+                      />
+                    </div>
+                  )}
                 </div>
-              )}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+        <div className="flex h-10 items-center justify-end px-2">
+          <button
+            className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+            onClick={() => {
+              editor.applyChanges();
+              editor.display.close();
+            }}
+          >
+            OK
+          </button>
+          <button
+            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+            onClick={() => editor.display.close()}
+          >
+            Cancel
+          </button>
+          <button
+            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+            onClick={() => editor.applyChanges()}
+          >
+            Apply
+          </button>
+        </div>
+      </>
     );
   },
 );

package/src/stores/dataCube/DataCubeState.ts

@@ -25,6 +25,7 @@ import { validateAndBuildQuerySnapshot } from './core/DataCubeQuerySnapshotBuild
 import { action, makeObservable, observable } from 'mobx';
 import type { DataCubeEngine } from './DataCubeEngine.js';
 import { ActionAlertType } from '@finos/legend-application';
+import { DataCubeFilterEditorState } from './filter/DataCubeFilterEditorState.js';
 
 export class DataCubeTask {
   uuid = uuid();
@@ -50,6 +51,7 @@ export class DataCubeState {
   readonly staticContent: DataCubeStaticContentDisplayState;
   readonly grid: DataCubeGridState;
   readonly editor: DataCubeEditorState;
+  readonly filter: DataCubeFilterEditorState;
 
   readonly runningTasks = new Map<string, DataCubeTask>();
 
@@ -68,6 +70,7 @@ export class DataCubeState {
     this.snapshotManager = new DataCubeQuerySnapshotManager(this);
     this.staticContent = new DataCubeStaticContentDisplayState(this);
     this.editor = new DataCubeEditorState(this);
+    this.filter = new DataCubeFilterEditorState(this);
     this.grid = new DataCubeGridState(this);
   }
 
@@ -92,7 +95,7 @@ export class DataCubeState {
           this.editor,
           this.grid,
           this.grid.controller,
-          // TODO this.editor.filter,
+          this.filter,
           // TODO this.editor.extendedColumns,
         ].map(async (state) => {
           this.snapshotManager.registerSubscriber(state);

package/src/stores/dataCube/core/filter/DataCubeQueryFilterEditorState.ts

@@ -103,8 +103,8 @@ export class DataCubeFilterEditorConditionTreeNode extends DataCubeFilterEditorT
   setValue(value: DataCubeOperationValue | undefined) {
     this.value = value
       ? isObservable(value)
-        ? makeObservable(value, { value: observable })
-        : value
+        ? value
+        : makeObservable(value, { value: observable })
       : undefined;
   }
 
@@ -161,6 +161,7 @@ export class DataCubeFilterEditorConditionGroupTreeNode extends DataCubeFilterEd
     }
   }
 }
+
 export function buildFilterQuerySnapshot(
   node: DataCubeFilterEditorConditionGroupTreeNode,
 ): DataCubeQuerySnapshotFilter {
@@ -185,6 +186,7 @@ export function buildFilterQuerySnapshot(
     }),
   };
 }
+
 export function buildFilterEditorTree(
   _node: DataCubeQuerySnapshotFilter,
   parent: DataCubeFilterEditorConditionGroupTreeNode | undefined,

package/src/stores/dataCube/editor/DataCubeEditorColumnsPanelState.ts

@@ -23,7 +23,7 @@ import {
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import {
   DataCubeEditorColumnsSelectorColumnState,
-  DataCubeEditorColumnsSelectorColumnsVisibility,
+  DataCubeEditorColumnsSelectorHiddenColumnsVisibility,
   DataCubeEditorColumnsSelectorState,
 } from './DataCubeEditorColumnsSelectorState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
@@ -66,8 +66,8 @@ export class DataCubeEditorColumnsPanelState
     this.editor = editor;
     this.dataCube = editor.dataCube;
     this.selector = new DataCubeEditorBasicColumnsSelectorState(editor, {
-      initialColumnsVisibility:
-        DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN,
+      initialHiddenColumnsVisibility:
+        DataCubeEditorColumnsSelectorHiddenColumnsVisibility.HIDDEN,
       onChange: (selector) => {
         // populate a default configuration for the newly selected columns
         selector.selectedColumns
@@ -135,6 +135,9 @@ export class DataCubeEditorColumnsPanelState
     this.selector.setSelectedColumns(
       // extract selected columns from the configuration since the configuration specifies the order
       // taking into account the group extended columns
+      // NOTE: since select() is applied before grouping/aggregation, it's technicaly not possible to
+      // unselect the group extended columns, so we will take advantage of the `hidden` property to show
+      // group extended columns that are not hidden as selected
       configuration.columns.map((col) => {
         const column = this.selector.getColumn(col.name);
         return new DataCubeEditorColumnsSelectorColumnState(
@@ -152,6 +155,7 @@ export class DataCubeEditorColumnsPanelState
     this.propagateColumnSelectionChanges();
     newSnapshot.data.selectColumns = this.selector.selectedColumns
       // TODO: filter by group extended columns
+      // and translate unselection to hidden columns in column configuration
       .map((col) => ({
         name: col.name,
         type: col.type,

package/src/stores/dataCube/editor/DataCubeEditorColumnsSelectorState.ts

@@ -29,7 +29,7 @@ export class DataCubeEditorColumnsSelectorColumnState {
   }
 }
 
-export enum DataCubeEditorColumnsSelectorColumnsVisibility {
+export enum DataCubeEditorColumnsSelectorHiddenColumnsVisibility {
   VISIBLE = 'visible',
   VISIBLE_WITH_WARNING = 'visible-with-warning',
   HIDDEN = 'hidden',
@@ -49,13 +49,13 @@ export abstract class DataCubeEditorColumnsSelectorState<
   readonly onChange?:
     | ((selector: DataCubeEditorColumnsSelectorState<T>) => void)
     | undefined;
-  columnsVisibility!: DataCubeEditorColumnsSelectorColumnsVisibility;
+  hiddenColumnsVisibility!: DataCubeEditorColumnsSelectorHiddenColumnsVisibility;
 
   constructor(
     editor: DataCubeEditorState,
     options?: {
-      initialColumnsVisibility?:
-        | DataCubeEditorColumnsSelectorColumnsVisibility
+      initialHiddenColumnsVisibility?:
+        | DataCubeEditorColumnsSelectorHiddenColumnsVisibility
         | undefined;
       onChange?:
         | ((select: DataCubeEditorColumnsSelectorState<T>) => void)
@@ -76,22 +76,23 @@ export abstract class DataCubeEditorColumnsSelectorState<
       selectedColumnsSearchText: observable,
       setSelectedColumnsSearchText: action,
 
-      columnsVisibility: observable,
-      setColumnsVisibility: action,
+      hiddenColumnsVisibility: observable,
+      setHiddenColumnsVisibility: action,
     });
 
     this.editor = editor;
     this.dataCube = editor.dataCube;
     this.onChange = options?.onChange;
-    this.columnsVisibility =
-      options?.initialColumnsVisibility ??
-      DataCubeEditorColumnsSelectorColumnsVisibility.VISIBLE;
+    this.hiddenColumnsVisibility =
+      options?.initialHiddenColumnsVisibility ??
+      // default to show hidden columns
+      DataCubeEditorColumnsSelectorHiddenColumnsVisibility.VISIBLE;
   }
 
-  setColumnsVisibility(
-    visibility: DataCubeEditorColumnsSelectorColumnsVisibility,
+  setHiddenColumnsVisibility(
+    val: DataCubeEditorColumnsSelectorHiddenColumnsVisibility,
   ) {
-    this.columnsVisibility = visibility;
+    this.hiddenColumnsVisibility = val;
   }
 
   abstract get availableColumns(): T[];
@@ -105,8 +106,8 @@ export abstract class DataCubeEditorColumnsSelectorState<
       .sort((a, b) => a.name.localeCompare(b.name))
       .filter(
         (column) =>
-          this.columnsVisibility !==
-            DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN ||
+          this.hiddenColumnsVisibility !==
+            DataCubeEditorColumnsSelectorHiddenColumnsVisibility.HIDDEN ||
           !this.editor.columnProperties.columns.find(
             (col) => col.name === column.name,
           )?.hideFromView,
@@ -116,8 +117,8 @@ export abstract class DataCubeEditorColumnsSelectorState<
   get selectedColumnsForDisplay(): T[] {
     return this.selectedColumns.filter(
       (column) =>
-        this.columnsVisibility !==
-          DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN ||
+        this.hiddenColumnsVisibility !==
+          DataCubeEditorColumnsSelectorHiddenColumnsVisibility.HIDDEN ||
         !this.editor.columnProperties.columns.find(
           (col) => col.name === column.name,
         )?.hideFromView,
@@ -125,6 +126,9 @@ export abstract class DataCubeEditorColumnsSelectorState<
   }
 
   setSelectedColumns(val: T[]) {
+    // NOTE: since we have a list of columns available which we treat as
+    // "templates" to select from, we need to clone these columns in order
+    // to avoid modifying the original available columns
     this.selectedColumns = val.map((col) => this.cloneColumn(col));
     this.onChange?.(this);
   }
@@ -144,5 +148,5 @@ export abstract class DataCubeEditorColumnsSelectorState<
     );
   }
 
-  abstract cloneColumn(column: T): T;
+  protected abstract cloneColumn(column: T): T;
 }

package/src/stores/dataCube/editor/DataCubeEditorState.tsx

@@ -28,13 +28,10 @@ import { DataCubeConfiguration } from '../core/DataCubeConfiguration.js';
 import { DataCubeEditorVerticalPivotsPanelState } from './DataCubeEditorVerticalPivotsPanelState.js';
 import { SingletonModeDisplayState } from '../../LayoutManagerState.js';
 import { DataCubeEditor } from '../../../components/dataCube/editor/DataCubeEditor.js';
-import { DataCubeEditorFilterPanelState } from './DataCubeEditorFilterPanelState.js';
 
 export enum DataCubeEditorTab {
   GENERAL_PROPERTIES = 'General Properties',
   COLUMN_PROPERTIES = 'Column Properties',
-  EXTENDED_COLUMNS = 'Extended Columns',
-  FILTER = 'Filter',
   COLUMNS = 'Columns',
   VERTICAL_PIVOTS = 'Vertical Pivots',
   HORIZONTAL_PIVOTS = 'Horizontal Pivots',
@@ -44,13 +41,15 @@ export enum DataCubeEditorTab {
 
 export class DataCubeEditorState extends DataCubeQuerySnapshotController {
   readonly display: SingletonModeDisplayState;
+
+  readonly code: DataCubeEditorCodePanelState;
+
   readonly generalProperties: DataCubeEditorGeneralPropertiesPanelState;
   readonly columnProperties: DataCubeEditorColumnPropertiesPanelState;
-  readonly filter: DataCubeEditorFilterPanelState;
+
   readonly columns: DataCubeEditorColumnsPanelState;
   readonly verticalPivots: DataCubeEditorVerticalPivotsPanelState;
   readonly sorts: DataCubeEditorSortsPanelState;
-  readonly code: DataCubeEditorCodePanelState;
 
   currentTab = DataCubeEditorTab.GENERAL_PROPERTIES;
 
@@ -58,10 +57,10 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotController {
     super(dataCube);
 
     makeObservable(this, {
-      applyChanges: action,
-
       currentTab: observable,
       setCurrentTab: action,
+
+      applyChanges: action,
     });
 
     this.display = new SingletonModeDisplayState(
@@ -73,7 +72,6 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotController {
       this,
     );
     this.columnProperties = new DataCubeEditorColumnPropertiesPanelState(this);
-    this.filter = new DataCubeEditorFilterPanelState(this);
     this.columns = new DataCubeEditorColumnsPanelState(this);
     this.verticalPivots = new DataCubeEditorVerticalPivotsPanelState(this);
     this.sorts = new DataCubeEditorSortsPanelState(this);
@@ -88,13 +86,12 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotController {
     const baseSnapshot = guaranteeNonNullable(this.getLatestSnapshot());
     const snapshot = baseSnapshot.clone();
 
-    // NOTE: column selection must be processed first so necassary
+    // NOTE: column selection must be processed first so necessary
     // prunings can be done to make sure other panel stats are in sync
     // with the current column selection
     this.columns.buildSnapshot(snapshot, baseSnapshot);
     this.verticalPivots.buildSnapshot(snapshot, baseSnapshot);
     this.sorts.buildSnapshot(snapshot, baseSnapshot);
-    this.filter.buildSnapshot(snapshot, baseSnapshot);
 
     // grid configuration must be processed before processing columns' configuration
     // to properly generate the container configuration
@@ -118,7 +115,6 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotController {
     this.columns.applySnaphot(snapshot, configuration);
     this.verticalPivots.applySnaphot(snapshot, configuration);
     this.sorts.applySnaphot(snapshot, configuration);
-    this.filter.applySnaphot(snapshot, configuration);
 
     this.generalProperties.applySnaphot(snapshot, configuration);
     this.columnProperties.applySnaphot(snapshot, configuration);