@finos/legend-application-repl 0.0.49 → 0.0.51

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);

package/src/stores/dataCube/{editor/DataCubeEditorFilterPanelState.ts → filter/DataCubeFilterEditorState.tsx}

@@ -25,10 +25,7 @@ import {
   getNonNullableEntry,
   guaranteeNonNullable,
 } from '@finos/legend-shared';
-import type { DataCubeEditorState } from './DataCubeEditorState.js';
 import type { DataCubeState } from '../DataCubeState.js';
-import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
-import type { DataCubeConfiguration } from '../core/DataCubeConfiguration.js';
 import {
   type DataCubeFilterEditorTree,
   type DataCubeFilterEditorTreeNode,
@@ -37,22 +34,33 @@ import {
   buildFilterEditorTree,
   buildFilterQuerySnapshot,
 } from '../core/filter/DataCubeQueryFilterEditorState.js';
+import { DataCubeQuerySnapshotController } from '../core/DataCubeQuerySnapshotManager.js';
+import {
+  DataCubeConfiguration,
+  type DataCubeColumnConfiguration,
+} from '../core/DataCubeConfiguration.js';
+import { SingletonModeDisplayState } from '../../LayoutManagerState.js';
+import { DataCubeFilterEditor } from '../../../components/dataCube/filter/DataCubeEditorFilter.js';
 
-export class DataCubeEditorFilterPanelState
-  implements DataCubeQueryEditorPanelState
-{
-  readonly dataCube!: DataCubeState;
-  readonly editor!: DataCubeEditorState;
+export class DataCubeFilterEditorState extends DataCubeQuerySnapshotController {
+  readonly display: SingletonModeDisplayState;
 
   tree: DataCubeFilterEditorTree;
   selectedNode?: DataCubeFilterEditorTreeNode | undefined;
+  columns: DataCubeColumnConfiguration[] = [];
+
+  constructor(dataCube: DataCubeState) {
+    super(dataCube);
 
-  constructor(editor: DataCubeEditorState) {
     makeObservable(this, {
       tree: observable.ref,
       initializeTree: action,
       refreshTree: action,
 
+      columns: observable,
+
+      applySnapshot: action,
+
       selectedNode: observable,
       selectedGroupNode: computed,
       setSelectedNode: action,
@@ -61,18 +69,17 @@ export class DataCubeEditorFilterPanelState
       layerFilterNode: action,
     });
 
-    this.dataCube = editor.dataCube;
-    this.editor = editor;
+    this.display = new SingletonModeDisplayState(
+      this.dataCube.repl.layout,
+      'Filter',
+      () => <DataCubeFilterEditor dataCube={this.dataCube} />,
+    );
+
     this.tree = {
       nodes: new Map<string, DataCubeFilterEditorTreeNode>(),
     };
   }
 
-  get columns() {
-    // TODO: include leaf-extended columns
-    return this.editor.columns.sourceColumns;
-  }
-
   initializeTree() {
     if (this.tree.root === undefined && this.tree.nodes.size === 0) {
       const root = new DataCubeFilterEditorConditionGroupTreeNode(
@@ -118,11 +125,8 @@ export class DataCubeEditorFilterPanelState
         baseNode.not,
       );
     } else if (baseNode instanceof DataCubeFilterEditorConditionGroupTreeNode) {
-      if (this.editor.columnProperties.columns.length !== 0) {
-        const columnConfig = getNonNullableEntry(
-          this.editor.columnProperties.columns,
-          0,
-        );
+      if (this.columns.length !== 0) {
+        const columnConfig = getNonNullableEntry(this.columns, 0);
         const column = {
           name: columnConfig.name,
           type: columnConfig.type,
@@ -267,10 +271,21 @@ export class DataCubeEditorFilterPanelState
     }
   }
 
-  applySnaphot(
+  override async applySnapshot(
     snapshot: DataCubeQuerySnapshot,
-    configuration: DataCubeConfiguration,
-  ): void {
+    previousSnapshot: DataCubeQuerySnapshot | undefined,
+  ): Promise<void> {
+    const configuration = DataCubeConfiguration.serialization.fromJson(
+      snapshot.data.configuration,
+    );
+    // NOTE: filtering group extended columns is not supported
+    this.columns = configuration.columns.filter(
+      (column) =>
+        !snapshot.data.groupExtendedColumns.find(
+          (col) => col.name === column.name,
+        ),
+    );
+
     this.tree.nodes = new Map<string, DataCubeFilterEditorTreeNode>();
     this.tree.root = snapshot.data.filter
       ? buildFilterEditorTree(
@@ -284,12 +299,17 @@ export class DataCubeEditorFilterPanelState
     this.refreshTree();
   }
 
-  buildSnapshot(
-    newSnapshot: DataCubeQuerySnapshot,
-    baseSnapshot: DataCubeQuerySnapshot,
-  ): void {
+  applyChanges() {
+    const baseSnapshot = guaranteeNonNullable(this.getLatestSnapshot());
+    const newSnapshot = baseSnapshot.clone();
+
     newSnapshot.data.filter = this.tree.root
       ? buildFilterQuerySnapshot(this.tree.root)
       : undefined;
+
+    newSnapshot.finalize();
+    if (newSnapshot.hashCode !== baseSnapshot.hashCode) {
+      this.publishSnapshot(newSnapshot);
+    }
   }
 }

package/src/stores/dataCube/grid/DataCubeGridConfigurationBuilder.tsx

@@ -345,13 +345,19 @@ function _sizeSpec(columnData: ColumnData) {
     //
     // TODO: if we support column resize to fit content, should we disable this behavior?
     resizable: column.fixedWidth === undefined,
-    // suppressAutoSize: columnConfiguration.fixedWidth !== undefined,
+    suppressAutoSize: column.fixedWidth !== undefined,
+    suppressSizeToFit: column.fixedWidth !== undefined,
     width: column.fixedWidth,
     minWidth: Math.max(
       column.minWidth ?? INTERNAL__GRID_CLIENT_COLUMN_MIN_WIDTH,
       INTERNAL__GRID_CLIENT_COLUMN_MIN_WIDTH,
     ),
     maxWidth: column.maxWidth,
+    // Make sure the column spans the width if possible so when total width
+    // is less than grid width, removing/adding one column will cause the other
+    // columns to take/give up space
+    flex:
+      column.fixedWidth === undefined ? 1 : (undefined as unknown as number),
   } as ColDef;
 }
 
@@ -360,7 +366,7 @@ function _sortSpec(columnData: ColumnData) {
   const sortColumns = snapshot.data.sortColumns;
   const sortCol = _findCol(sortColumns, column.name);
   return {
-    sortable: true, // if this is pivot column, no sorting is allowed
+    sortable: true, // if this is pivot column, no sorting is supported yet
     sort: sortCol
       ? sortCol.operation === DataCubeQuerySortOperator.ASCENDING
         ? GridClientSortDirection.ASCENDING
@@ -374,10 +380,10 @@ function _rowGroupSpec(columnData: ColumnData) {
   const { snapshot, column } = columnData;
   const data = snapshot.data;
   const groupByCol = _findCol(data.groupBy?.columns, column.name);
-  const aggCol = _findCol(data.groupBy?.aggColumns, column.name);
   return {
     enableRowGroup: column.kind === DataCubeColumnKind.DIMENSION,
-    enableValue: column.kind === DataCubeColumnKind.MEASURE,
+    enableValue: false, // disable GUI interactions to modify this column's aggregate function
+    allowedAggFuncs: [], // disable GUI for options of the agg functions
     rowGroup: Boolean(groupByCol),
     rowGroupIndex: groupByCol
       ? (data.groupBy?.columns.indexOf(groupByCol) ?? null)
@@ -385,9 +391,10 @@ function _rowGroupSpec(columnData: ColumnData) {
     // NOTE: we don't quite care about populating these accurately
     // since ag-grid aggregation does not support parameters, so
     // its set of supported aggregators will never match that specified
-    // in the editor, so we just assign dummy values here
-    aggFunc: aggCol ? aggCol.operation : null,
-    allowedAggFuncs: [],
+    // in the editor.
+    // But we need to set this to make sure sorting works when row grouping
+    // is used, so we use a dummy value here.
+    aggFunc: () => 0,
   } satisfies ColDef;
 }
 
@@ -455,18 +462,35 @@ export function generateBaseGridOptions(dataCube: DataCubeState): GridOptions {
     },
     onBodyScrollEnd: () => grid.setScrollHintText(undefined),
     scrollbarWidth: 10,
+    alwaysShowVerticalScroll: true, // this is needed to ensure
     // -------------------------------------- CONTEXT MENU --------------------------------------
     preventDefaultOnContextMenu: true, // prevent showing the browser's context menu
     columnMenu: 'new', // ensure context menu works on header
     // NOTE: dynamically generate the content of the context menu to make sure the items are not stale
     getContextMenuItems: (params) =>
-      grid.controller.menuBuilder?.(params) ?? [],
-    getMainMenuItems: (params) => grid.controller.menuBuilder?.(params) ?? [],
+      grid.controller.menuBuilder?.(params, false) ?? [],
+    getMainMenuItems: (params) =>
+      grid.controller.menuBuilder?.(params, true) ?? [],
+    // NOTE: when right-clicking empty space in the header, a menu will show up
+    // with 2 default options: 'Choose Columns` and `Reset Columns`, which is not
+    // a desired behavior, so we hide the popup menu immediately
+    onColumnMenuVisibleChanged: (event) => {
+      if (!event.column) {
+        event.api.hidePopupMenu();
+      }
+    },
     // -------------------------------------- COLUMN SIZING --------------------------------------
     autoSizePadding: INTERNAL__GRID_CLIENT_AUTO_RESIZE_PADDING,
+    // ensure columns are resized to fit the grid width initially and on window resize
+    // NOTE: this has to be used with `alwaysShowVerticalScroll` to ensure accurate sizing
+    // otherwise on initial load, the computation will be done when no data is rendered,
+    // so when data is rendered and the vertical scrollbar shows up, it will block a part of
+    // the last column.
     autoSizeStrategy: {
-      // resize to fit content initially
-      type: 'fitCellContents',
+      type: 'fitGridWidth',
+    },
+    onGridSizeChanged: (event) => {
+      event.api.sizeColumnsToFit();
     },
     // -------------------------------------- TOOLTIP --------------------------------------
     tooltipShowDelay: INTERNAL__GRID_CLIENT_TOOLTIP_SHOW_DELAY,
@@ -597,17 +621,21 @@ export function generateGridOptionsFromSnapshot(
           justifyContent: 'space-between',
           display: 'flex',
         },
+        cellDataType: 'text',
+        flex: 1,
         // TODO: display: coloring, text, etc.
         // TODO: pinning (should we pin this left by default?)
         // TODO: tooltip
         loadingCellRenderer: DataCubeGridLoadingCellRenderer,
-        sortable: false, // TODO: @akphi - we can support this in the configuration
+        // TODO: @akphi - we can support this in the configuration (support sorting by tree-column?)
+        // sortable: false,
       } satisfies ColDef,
       // NOTE: Internal column used for programatically trigger data fetch when filter is modified
       {
         colId: INTERNAL__GRID_CLIENT_FILTER_TRIGGER_COLUMN_ID,
         hide: true,
-        enableValue: false,
+        enableValue: false, // disable GUI interactions to modify this column's aggregate function
+        allowedAggFuncs: [], // disable GUI for options of the agg functions
         enablePivot: false,
         enableRowGroup: false,
         filter: 'agTextColumnFilter',

package/src/stores/dataCube/grid/DataCubeGridControllerState.ts

@@ -75,6 +75,7 @@ export class DataCubeGridControllerState extends DataCubeQuerySnapshotController
         params:
           | GetContextMenuItemsParams<unknown, { dataCube: DataCubeState }>
           | GetMainMenuItemsParams<unknown, { dataCube: DataCubeState }>,
+        fromHeader: boolean,
       ) => (string | MenuItemDef)[])
     | undefined;
 

package/src/stores/dataCube/grid/DataCubeGridMenuBuilder.tsx

@@ -38,10 +38,10 @@ import {
   DataCubeGridClientExportFormat,
   INTERNAL__GRID_CLIENT_MISSING_VALUE,
 } from './DataCubeGridClientEngine.js';
-import { DataCubeEditorTab } from '../editor/DataCubeEditorState.js';
 import { PRIMITIVE_TYPE } from '@finos/legend-graph';
 import type { DataCubeColumnConfiguration } from '../core/DataCubeConfiguration.js';
 import { DataCubeFilterEditorConditionTreeNode } from '../core/filter/DataCubeQueryFilterEditorState.js';
+import { DataCubeEditorTab } from '../editor/DataCubeEditorState.js';
 
 function toFilterValue(
   value: unknown,
@@ -157,11 +157,15 @@ export function generateMenuBuilder(
   controller: DataCubeGridControllerState,
 ): (
   params: GetContextMenuItemsParams | GetMainMenuItemsParams,
+  fromHeader: boolean,
 ) => (string | MenuItemDef)[] {
   const dataCube = controller.dataCube;
   const editor = dataCube.editor;
 
-  return (params: GetContextMenuItemsParams | GetMainMenuItemsParams) => {
+  return (
+    params: GetContextMenuItemsParams | GetMainMenuItemsParams,
+    fromHeader: boolean,
+  ) => {
     const column = params.column ?? undefined;
     const columnName = column?.getColId();
     const columnConfiguration = controller.getColumnConfiguration(columnName);
@@ -457,8 +461,7 @@ export function generateMenuBuilder(
           {
             name: 'Filters...',
             action: () => {
-              editor.setCurrentTab(DataCubeEditorTab.FILTER);
-              editor.display.open();
+              dataCube.filter.display.open();
             },
           },
           {
@@ -563,44 +566,55 @@ export function generateMenuBuilder(
         subMenu: [
           {
             name: `Auto-size to Fit Content`,
+            disabled:
+              !column ||
+              !columnConfiguration ||
+              columnConfiguration.fixedWidth !== undefined,
             action: () =>
               params.api.autoSizeColumns(
                 [column?.getColId()].filter(isNonNullable),
               ),
-            disabled: !column,
           },
           {
             name: `Minimize Column`,
+            disabled:
+              !column ||
+              !columnConfiguration ||
+              columnConfiguration.fixedWidth !== undefined,
             action: () => {
               if (column) {
                 params.api.setColumnWidths([
                   {
                     key: column.getColId(),
                     newWidth:
-                      controller.getColumnConfiguration(columnName)?.minWidth ??
-                      DEFAULT_COLUMN_MIN_WIDTH,
+                      columnConfiguration?.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
                   },
                 ]);
               }
             },
-            disabled: !column,
           },
           'separator',
           {
             name: `Auto-size All Columns`,
-            action: () => params.api.autoSizeAllColumns(),
+            action: () =>
+              params.api.autoSizeColumns(
+                controller.configuration.columns
+                  .filter((col) => col.fixedWidth === undefined)
+                  .map((col) => col.name),
+              ),
           },
           {
             name: `Minimize All Columns`,
             action: () => {
               params.api.setColumnWidths(
                 // TODO: take care of pivot columns
-                controller.configuration.columns.map((col) => ({
-                  key: col.name,
-                  newWidth:
-                    controller.getColumnConfiguration(columnName)?.minWidth ??
-                    DEFAULT_COLUMN_MIN_WIDTH,
-                })),
+                controller.configuration.columns
+                  .filter((col) => col.fixedWidth === undefined)
+                  .map((col) => ({
+                    key: col.name,
+                    newWidth:
+                      columnConfiguration?.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
+                  })),
               );
             },
           },
@@ -689,7 +703,14 @@ export function generateMenuBuilder(
       {
         name: 'Properties...',
         disabled: editor.display.isOpen,
-        action: () => editor.display.open(),
+        action: () => {
+          // open the column property
+          if (column && fromHeader) {
+            editor.setCurrentTab(DataCubeEditorTab.COLUMN_PROPERTIES);
+            editor.columnProperties.setSelectedColumnName(column.getColId());
+          }
+          editor.display.open();
+        },
       },
     ];
   };

package/src/stores/dataCube/grid/DataCubeGridQuerySnapshotBuilder.ts

@@ -27,7 +27,10 @@ import {
   type DataCubeQuerySnapshotGroupBy,
   _getCol,
 } from '../core/DataCubeQuerySnapshot.js';
-import { GridClientSortDirection } from './DataCubeGridClientEngine.js';
+import {
+  GridClientSortDirection,
+  INTERNAL__GRID_CLIENT_TREE_COLUMN_ID,
+} from './DataCubeGridClientEngine.js';
 import {
   DataCubeColumnKind,
   DataCubeQuerySortOperator,
@@ -82,13 +85,20 @@ export function buildQuerySnapshot(
 
   // --------------------------------- SORT ---------------------------------
 
-  snapshot.data.sortColumns = request.sortModel.map((item) => ({
-    ..._getCol(baseSnapshot.stageCols('sort'), item.colId),
-    operation:
-      item.sort === GridClientSortDirection.ASCENDING
-        ? DataCubeQuerySortOperator.ASCENDING
-        : DataCubeQuerySortOperator.DESCENDING,
-  }));
+  snapshot.data.sortColumns = request.sortModel
+    // Make sure the tree group is not being sorted since it's a synthetic column
+    // the sorting state of this special column is `synthesized` by ag-grid
+    // so when all group by columns are sorted in the same direction, the tree group
+    // column will be sorted in that direction, and vice versa, when user sorts
+    // the tree-group, all group-by columns will be sorted in that direction
+    .filter((item) => item.colId !== INTERNAL__GRID_CLIENT_TREE_COLUMN_ID)
+    .map((item) => ({
+      ..._getCol(baseSnapshot.stageCols('sort'), item.colId),
+      operation:
+        item.sort === GridClientSortDirection.ASCENDING
+          ? DataCubeQuerySortOperator.ASCENDING
+          : DataCubeQuerySortOperator.DESCENDING,
+    }));
 
   // --------------------------------- FINALIZE ---------------------------------
 

package/tsconfig.json

@@ -77,7 +77,6 @@
     "./src/stores/dataCube/editor/DataCubeEditorColumnPropertiesPanelState.ts",
     "./src/stores/dataCube/editor/DataCubeEditorColumnsPanelState.ts",
     "./src/stores/dataCube/editor/DataCubeEditorColumnsSelectorState.ts",
-    "./src/stores/dataCube/editor/DataCubeEditorFilterPanelState.ts",
     "./src/stores/dataCube/editor/DataCubeEditorGeneralPropertiesPanelState.ts",
     "./src/stores/dataCube/editor/DataCubeEditorPanelState.ts",
     "./src/stores/dataCube/editor/DataCubeEditorSortsPanelState.ts",
@@ -102,11 +101,11 @@
     "./src/components/dataCube/editor/DataCubeEditorColumnsPanel.tsx",
     "./src/components/dataCube/editor/DataCubeEditorColumnsSelector.tsx",
     "./src/components/dataCube/editor/DataCubeEditorExtendedColumnsPanel.tsx",
-    "./src/components/dataCube/editor/DataCubeEditorFilterPanel.tsx",
     "./src/components/dataCube/editor/DataCubeEditorGeneralPropertiesPanel.tsx",
     "./src/components/dataCube/editor/DataCubeEditorHorizontalPivotsPanel.tsx",
     "./src/components/dataCube/editor/DataCubeEditorSortsPanel.tsx",
     "./src/components/dataCube/editor/DataCubeEditorVerticalPivotsPanel.tsx",
+    "./src/components/dataCube/filter/DataCubeEditorFilter.tsx",
     "./src/components/dataCube/grid/DataCubeGrid.tsx",
     "./src/components/dataCube/grid/DataCubeGridShared.tsx",
     "./src/components/repl/Alert.tsx",
@@ -143,6 +142,7 @@
     "./src/stores/dataCube/core/filter/DataCubeQueryFilterOperation__StartWith.tsx",
     "./src/stores/dataCube/core/filter/DataCubeQueryFilterOperation__StartWithCaseInsensitive.tsx",
     "./src/stores/dataCube/editor/DataCubeEditorState.tsx",
+    "./src/stores/dataCube/filter/DataCubeFilterEditorState.tsx",
     "./src/stores/dataCube/grid/DataCubeGridConfigurationBuilder.tsx",
     "./src/stores/dataCube/grid/DataCubeGridMenuBuilder.tsx"
   ],

package/lib/components/dataCube/editor/DataCubeEditorFilterPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataCubeEditorFilterPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/dataCube/editor/DataCubeEditorFilterPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AA6BH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAywB/E,eAAO,MAAM,yBAAyB,WAC5B;IAAE,QAAQ,EAAE,aAAa,CAAA;CAAE;;CAgEpC,CAAC"}