@finos/legend-data-cube 0.1.10 → 0.1.12

package/src/stores/view/editor/DataCubeEditorDimensionsPanelState.ts

@@ -14,48 +14,62 @@
  * limitations under the License.
  */
 
-import type { DataCubeConfiguration } from '../../core/model/DataCubeConfiguration.js';
-import { DataCubeColumnKind } from '../../core/DataCubeQueryEngine.js';
-import { type DataCubeSnapshot } from '../../core/DataCubeSnapshot.js';
-import { _findCol } from '../../core/model/DataCubeColumn.js';
 import {
-  DataCubeEditorColumnSelectorColumnState,
-  DataCubeEditorColumnSelectorState,
-} from './DataCubeEditorColumnSelectorState.js';
+  DataCubeDimensionsConfiguration,
+  type DataCubeConfiguration,
+} from '../../core/model/DataCubeConfiguration.js';
+import {
+  DataCubeColumnKind,
+  DataCubeGridMode,
+} from '../../core/DataCubeQueryEngine.js';
+import { type DataCubeSnapshot } from '../../core/DataCubeSnapshot.js';
+import { _findCol, _sortByColName } from '../../core/model/DataCubeColumn.js';
+import { DataCubeEditorColumnsSelectorColumnState } from './DataCubeEditorColumnsSelectorState.js';
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
 import { action, computed, makeObservable, observable } from 'mobx';
+import {
+  generateEnumerableNameFromToken,
+  guaranteeNonNullable,
+} from '@finos/legend-shared';
 
-export class DataCubeEditorVerticalPivotColumnSelectorState extends DataCubeEditorColumnSelectorState<DataCubeEditorColumnSelectorColumnState> {
-  override cloneColumn(
-    column: DataCubeEditorColumnSelectorColumnState,
-  ): DataCubeEditorColumnSelectorColumnState {
-    return new DataCubeEditorColumnSelectorColumnState(
-      column.name,
-      column.type,
-    );
+export type DataCubeEditorDimensionsTreeNode = {
+  name: string;
+  data: DataCubeEditorDimensionState | DataCubeEditorColumnsSelectorColumnState;
+  children?: DataCubeEditorDimensionsTreeNode[] | undefined;
+};
+
+export class DataCubeEditorDimensionState {
+  name: string;
+  isRenaming = false;
+  columns: DataCubeEditorColumnsSelectorColumnState[] = [];
+
+  constructor(name: string) {
+    makeObservable(this, {
+      name: observable,
+      setName: action,
+
+      isRenaming: observable,
+      setIsRenaming: action,
+
+      columns: observable,
+      setColumns: action,
+    });
+
+    this.name = name;
   }
 
-  override get availableColumns() {
-    return this._editor.columnProperties.columns
-      .filter(
-        (column) =>
-          column.kind === DataCubeColumnKind.DIMENSION &&
-          // exclude group-level extended columns
-          !_findCol(this._editor.groupExtendColumns, column.name) &&
-          // exclude pivot columns
-          !_findCol(
-            this._editor.horizontalPivots.selector.selectedColumns,
-            column.name,
-          ),
-      )
-      .map(
-        (col) =>
-          new DataCubeEditorColumnSelectorColumnState(col.name, col.type),
-      );
+  setName(name: string) {
+    this.name = name;
+  }
+
+  setIsRenaming(val: boolean) {
+    this.isRenaming = val;
   }
 
-  //
+  setColumns(columns: DataCubeEditorColumnsSelectorColumnState[]) {
+    this.columns = columns;
+  }
 }
 
 export class DataCubeEditorDimensionsPanelState
@@ -64,14 +78,32 @@ export class DataCubeEditorDimensionsPanelState
   readonly _editor!: DataCubeEditorState;
 
   availableColumnsSearchText = '';
-  // readonly selector!: DataCubeEditorVerticalPivotColumnSelectorState;
+  dimensions: DataCubeEditorDimensionState[] = [];
+  dimensionsTreeData: {
+    nodes: DataCubeEditorDimensionsTreeNode[];
+  } = { nodes: [] };
+  dimensionsTreeSearchText = '';
 
   constructor(editor: DataCubeEditorState) {
     makeObservable(this, {
+      availableColumns: computed,
+      availableColumnsForDisplay: computed,
+
       availableColumnsSearchText: observable,
       setAvailableColumnsSearchText: action,
 
-      availableColumns: computed,
+      selectedColumns: computed,
+      deselectColumns: action,
+
+      dimensions: observable,
+      setDimensions: action,
+      newDimension: action,
+
+      dimensionsTreeData: observable.ref,
+      refreshDimensionsTreeData: action,
+
+      dimensionsTreeSearchText: observable,
+      setDimensionsTreeSearchText: action,
     });
 
     this._editor = editor;
@@ -92,43 +124,115 @@ export class DataCubeEditorDimensionsPanelState
       )
       .map(
         (col) =>
-          new DataCubeEditorColumnSelectorColumnState(col.name, col.type),
+          new DataCubeEditorColumnsSelectorColumnState(col.name, col.type),
       );
   }
 
+  get availableColumnsForDisplay() {
+    return this.availableColumns
+      .filter((column) => !_findCol(this.selectedColumns, column.name))
+      .sort(_sortByColName);
+  }
+
   setAvailableColumnsSearchText(val: string) {
     this.availableColumnsSearchText = val;
   }
 
-  // adaptPropagatedChanges(): void {
-  //   this.selector.setSelectedColumns(
-  //     this.selector.selectedColumns.filter((column) =>
-  //       _findCol(this.selector.availableColumns, column.name),
-  //     ),
-  //   );
-  // }
+  get selectedColumns() {
+    return this.dimensions.flatMap((dimension) => dimension.columns);
+  }
+
+  deselectColumns(columns: DataCubeEditorColumnsSelectorColumnState[]) {
+    this.dimensions.forEach((dimension) => {
+      dimension.setColumns(
+        dimension.columns.filter((column) => !_findCol(columns, column.name)),
+      );
+    });
+  }
+
+  setDimensions(dimensions: DataCubeEditorDimensionState[]) {
+    this.dimensions = dimensions;
+  }
+
+  newDimension() {
+    const newDimension = new DataCubeEditorDimensionState(
+      generateEnumerableNameFromToken(
+        this.dimensions.map((dimension) => dimension.name),
+        'Dimension',
+        'whitespace',
+      ),
+    );
+    this.dimensions.push(newDimension);
+    return newDimension;
+  }
+
+  refreshDimensionsTreeData() {
+    this.dimensionsTreeData = {
+      nodes: this.dimensions.map((dimension) => ({
+        name: dimension.name,
+        data: dimension,
+        children: dimension.columns.map((column) => ({
+          name: column.name,
+          data: column,
+        })),
+      })),
+    };
+  }
+
+  setDimensionsTreeSearchText(val: string) {
+    this.dimensionsTreeSearchText = val;
+  }
+
+  adaptPropagatedChanges(): void {
+    this.deselectColumns(
+      this.selectedColumns.filter(
+        (column) => !_findCol(this.availableColumns, column.name),
+      ),
+    );
+    this.refreshDimensionsTreeData();
+  }
 
   applySnaphot(
     snapshot: DataCubeSnapshot,
     configuration: DataCubeConfiguration,
   ) {
-    // this.selector.setSelectedColumns(
-    //   (snapshot.data.groupBy?.columns ?? []).map(
-    //     (col) =>
-    //       new DataCubeEditorColumnSelectorColumnState(col.name, col.type),
-    //   ),
-    // );
+    this.setDimensions(
+      configuration.dimensions.dimensions.map((dimension) => {
+        const _dimension = new DataCubeEditorDimensionState(dimension.name);
+        _dimension.setColumns(
+          dimension.columns.map((colName) => {
+            const column = guaranteeNonNullable(
+              _findCol(configuration.columns, colName),
+            );
+            return new DataCubeEditorColumnsSelectorColumnState(
+              column.name,
+              column.type,
+            );
+          }),
+        );
+        return _dimension;
+      }),
+    );
   }
 
   buildSnapshot(newSnapshot: DataCubeSnapshot, baseSnapshot: DataCubeSnapshot) {
-    // newSnapshot.data.groupBy = this.selector.selectedColumns.length
-    //   ? {
-    //       columns: this.selector.selectedColumns.map(_toCol),
-    //     }
-    //   : undefined;
-    // newSnapshot.data.selectColumns = uniqBy(
-    //   [...newSnapshot.data.selectColumns, ...this.selector.selectedColumns],
-    //   (col) => col.name,
-    // ).map(_toCol);
+    const dimensionsConfiguration = new DataCubeDimensionsConfiguration();
+
+    if (
+      this._editor.generalProperties.configuration.gridMode ===
+      DataCubeGridMode.MULTIDIMENSIONAL
+    ) {
+      dimensionsConfiguration.dimensions = this.dimensions.map((dimension) => ({
+        name: dimension.name,
+        columns: dimension.columns.map((column) => column.name),
+      }));
+    }
+
+    newSnapshot.data.configuration = {
+      ...newSnapshot.data.configuration,
+      dimensions: DataCubeDimensionsConfiguration.serialization.toJson(
+        dimensionsConfiguration,
+      ),
+    };
   }
 }

package/src/stores/view/editor/DataCubeEditorHorizontalPivotsPanelState.ts

@@ -28,18 +28,18 @@ import {
   type DataCubeColumn,
 } from '../../core/model/DataCubeColumn.js';
 import {
-  DataCubeEditorColumnSelectorState,
-  DataCubeEditorSortColumnState,
-} from './DataCubeEditorColumnSelectorState.js';
+  DataCubeEditorColumnsSelectorState,
+  DataCubeEditorColumnsSelectorSortColumnState,
+} from './DataCubeEditorColumnsSelectorState.js';
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
 import { uniqBy } from '@finos/legend-shared';
 
-export class DataCubeEditorHorizontalPivotColumnSelectorState extends DataCubeEditorColumnSelectorState<DataCubeEditorSortColumnState> {
+export class DataCubeEditorHorizontalPivotColumnsSelectorState extends DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorSortColumnState> {
   override cloneColumn(
-    column: DataCubeEditorSortColumnState,
-  ): DataCubeEditorSortColumnState {
-    return new DataCubeEditorSortColumnState(
+    column: DataCubeEditorColumnsSelectorSortColumnState,
+  ): DataCubeEditorColumnsSelectorSortColumnState {
+    return new DataCubeEditorColumnsSelectorSortColumnState(
       column.name,
       column.type,
       column.direction,
@@ -57,7 +57,7 @@ export class DataCubeEditorHorizontalPivotColumnSelectorState extends DataCubeEd
       )
       .map(
         (col) =>
-          new DataCubeEditorSortColumnState(
+          new DataCubeEditorColumnsSelectorSortColumnState(
             col.name,
             col.type,
             DataCubeQuerySortDirection.ASCENDING,
@@ -72,7 +72,7 @@ export class DataCubeEditorHorizontalPivotsPanelState
 {
   private readonly _editor!: DataCubeEditorState;
 
-  readonly selector!: DataCubeEditorHorizontalPivotColumnSelectorState;
+  readonly selector!: DataCubeEditorHorizontalPivotColumnsSelectorState;
 
   castColumns: DataCubeColumn[] = [];
 
@@ -86,7 +86,7 @@ export class DataCubeEditorHorizontalPivotsPanelState
     });
 
     this._editor = editor;
-    this.selector = new DataCubeEditorHorizontalPivotColumnSelectorState(
+    this.selector = new DataCubeEditorHorizontalPivotColumnsSelectorState(
       editor,
       {
         onChange: (selector) => {
@@ -113,6 +113,7 @@ export class DataCubeEditorHorizontalPivotsPanelState
 
   propagateChanges() {
     this._editor.verticalPivots.adaptPropagatedChanges();
+    this._editor.dimensions.adaptPropagatedChanges();
     this._editor.sorts.adaptPropagatedChanges();
   }
 
@@ -123,7 +124,7 @@ export class DataCubeEditorHorizontalPivotsPanelState
     this.selector.setSelectedColumns(
       (snapshot.data.pivot?.columns ?? []).map(
         (col) =>
-          new DataCubeEditorSortColumnState(
+          new DataCubeEditorColumnsSelectorSortColumnState(
             col.name,
             col.type,
             _findCol(configuration.columns, col.name)?.pivotSortDirection ??

package/src/stores/view/editor/DataCubeEditorMutableConfiguration.ts

@@ -39,6 +39,7 @@ import {
   DEFAULT_ERROR_FOREGROUND_COLOR,
   DEFAULT_BACKGROUND_COLOR,
   type DataCubeColumnDataType,
+  type DataCubeGridMode,
 } from '../../core/DataCubeQueryEngine.js';
 import { type PlainObject, type Writable } from '@finos/legend-shared';
 import { makeObservable, observable, action, computed } from 'mobx';
@@ -434,6 +435,9 @@ export class DataCubeEditorMutableConfiguration extends DataCubeConfiguration {
       gridLineColor: observable,
       setGridLineColor: action,
 
+      gridMode: observable,
+      setGridMode: action,
+
       fontFamily: observable,
       setFontFamily: action,
 
@@ -583,6 +587,10 @@ export class DataCubeEditorMutableConfiguration extends DataCubeConfiguration {
     this.gridLineColor = value;
   }
 
+  setGridMode(value: DataCubeGridMode) {
+    this.gridMode = value;
+  }
+
   setFontFamily(value: DataCubeFont) {
     this.fontFamily = value;
   }

package/src/stores/view/editor/DataCubeEditorSortsPanelState.ts

@@ -22,16 +22,16 @@ import {
 } from '../../core/DataCubeQueryEngine.js';
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import {
-  DataCubeEditorColumnSelectorState,
-  DataCubeEditorSortColumnState,
-} from './DataCubeEditorColumnSelectorState.js';
+  DataCubeEditorColumnsSelectorState,
+  DataCubeEditorColumnsSelectorSortColumnState,
+} from './DataCubeEditorColumnsSelectorState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
 import type { DataCubeConfiguration } from '../../core/model/DataCubeConfiguration.js';
 import { uniqBy } from '@finos/legend-shared';
 
-export class DataCubeEditorSortColumnSelectorState extends DataCubeEditorColumnSelectorState<DataCubeEditorSortColumnState> {
-  override cloneColumn(column: DataCubeEditorSortColumnState) {
-    return new DataCubeEditorSortColumnState(
+export class DataCubeEditorSortColumnsSelectorState extends DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorSortColumnState> {
+  override cloneColumn(column: DataCubeEditorColumnsSelectorSortColumnState) {
+    return new DataCubeEditorColumnsSelectorSortColumnState(
       column.name,
       column.type,
       column.direction,
@@ -69,7 +69,7 @@ export class DataCubeEditorSortColumnSelectorState extends DataCubeEditorColumnS
       (col) => col.name,
     ).map(
       (col) =>
-        new DataCubeEditorSortColumnState(
+        new DataCubeEditorColumnsSelectorSortColumnState(
           col.name,
           col.type,
           DataCubeQuerySortDirection.ASCENDING,
@@ -81,10 +81,10 @@ export class DataCubeEditorSortColumnSelectorState extends DataCubeEditorColumnS
 export class DataCubeEditorSortsPanelState
   implements DataCubeQueryEditorPanelState
 {
-  readonly selector!: DataCubeEditorColumnSelectorState<DataCubeEditorSortColumnState>;
+  readonly selector!: DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorSortColumnState>;
 
   constructor(editor: DataCubeEditorState) {
-    this.selector = new DataCubeEditorSortColumnSelectorState(editor);
+    this.selector = new DataCubeEditorSortColumnsSelectorState(editor);
   }
 
   adaptPropagatedChanges(): void {
@@ -102,7 +102,7 @@ export class DataCubeEditorSortsPanelState
     this.selector.setSelectedColumns(
       snapshot.data.sortColumns.map((col) => {
         const column = this.selector.getColumn(col.name);
-        return new DataCubeEditorSortColumnState(
+        return new DataCubeEditorColumnsSelectorSortColumnState(
           column.name,
           column.type,
           col.direction,

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

@@ -43,12 +43,14 @@ import { DataCubeEditorHorizontalPivotsPanelState } from './DataCubeEditorHorizo
 import { DataCubeEditorPivotLayoutPanelState } from './DataCubeEditorPivotLayoutPanelState.js';
 import { _lambda } from '../../core/DataCubeQueryBuilderUtils.js';
 import { EngineError } from '@finos/legend-graph';
+import { DataCubeEditorDimensionsPanelState } from './DataCubeEditorDimensionsPanelState.js';
 
 export enum DataCubeEditorTab {
   GENERAL_PROPERTIES = 'General Properties',
   COLUMN_PROPERTIES = 'Column Properties',
   COLUMNS = 'Columns',
   VERTICAL_PIVOTS = 'Vertical Pivots',
+  DIMENSIONS = 'Dimensions',
   HORIZONTAL_PIVOTS = 'Horizontal Pivots',
   SORTS = 'Sorts',
 }
@@ -74,6 +76,7 @@ export class DataCubeEditorState extends DataCubeSnapshotController {
   readonly columns: DataCubeEditorColumnsPanelState;
   readonly horizontalPivots: DataCubeEditorHorizontalPivotsPanelState;
   readonly verticalPivots: DataCubeEditorVerticalPivotsPanelState;
+  readonly dimensions: DataCubeEditorDimensionsPanelState;
   readonly sorts: DataCubeEditorSortsPanelState;
 
   currentTab = DataCubeEditorTab.GENERAL_PROPERTIES;
@@ -107,6 +110,7 @@ export class DataCubeEditorState extends DataCubeSnapshotController {
     );
     this.pivotLayout = new DataCubeEditorPivotLayoutPanelState(this);
     this.columnProperties = new DataCubeEditorColumnPropertiesPanelState(this);
+    this.dimensions = new DataCubeEditorDimensionsPanelState(this);
     this.columns = new DataCubeEditorColumnsPanelState(this);
     this.horizontalPivots = new DataCubeEditorHorizontalPivotsPanelState(this);
     this.verticalPivots = new DataCubeEditorVerticalPivotsPanelState(this);
@@ -131,6 +135,7 @@ export class DataCubeEditorState extends DataCubeSnapshotController {
     this.generalProperties.applySnaphot(snapshot, configuration);
     this.pivotLayout.applySnaphot(snapshot, configuration);
     this.columnProperties.applySnaphot(snapshot, configuration);
+    this.dimensions.applySnaphot(snapshot, configuration);
 
     this.columns.applySnaphot(snapshot, configuration);
     this.horizontalPivots.applySnaphot(snapshot, configuration);
@@ -153,6 +158,7 @@ export class DataCubeEditorState extends DataCubeSnapshotController {
     this.generalProperties.buildSnapshot(newSnapshot, baseSnapshot);
     this.pivotLayout.buildSnapshot(newSnapshot, baseSnapshot);
     this.columnProperties.buildSnapshot(newSnapshot, baseSnapshot);
+    this.dimensions.buildSnapshot(newSnapshot, baseSnapshot);
 
     // NOTE: column selection must be processed first since the snapshot
     // processing of other parts of the query can be affected by column selection.

package/src/stores/view/editor/DataCubeEditorVerticalPivotsPanelState.ts

@@ -20,17 +20,17 @@ import { DataCubeColumnKind } from '../../core/DataCubeQueryEngine.js';
 import { type DataCubeSnapshot } from '../../core/DataCubeSnapshot.js';
 import { _findCol, _toCol } from '../../core/model/DataCubeColumn.js';
 import {
-  DataCubeEditorColumnSelectorColumnState,
-  DataCubeEditorColumnSelectorState,
-} from './DataCubeEditorColumnSelectorState.js';
+  DataCubeEditorColumnsSelectorColumnState,
+  DataCubeEditorColumnsSelectorState,
+} from './DataCubeEditorColumnsSelectorState.js';
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
 
-export class DataCubeEditorVerticalPivotColumnSelectorState extends DataCubeEditorColumnSelectorState<DataCubeEditorColumnSelectorColumnState> {
+export class DataCubeEditorVerticalPivotColumnsSelectorState extends DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorColumnState> {
   override cloneColumn(
-    column: DataCubeEditorColumnSelectorColumnState,
-  ): DataCubeEditorColumnSelectorColumnState {
-    return new DataCubeEditorColumnSelectorColumnState(
+    column: DataCubeEditorColumnsSelectorColumnState,
+  ): DataCubeEditorColumnsSelectorColumnState {
+    return new DataCubeEditorColumnsSelectorColumnState(
       column.name,
       column.type,
     );
@@ -51,7 +51,7 @@ export class DataCubeEditorVerticalPivotColumnSelectorState extends DataCubeEdit
       )
       .map(
         (col) =>
-          new DataCubeEditorColumnSelectorColumnState(col.name, col.type),
+          new DataCubeEditorColumnsSelectorColumnState(col.name, col.type),
       );
   }
 }
@@ -59,10 +59,10 @@ export class DataCubeEditorVerticalPivotColumnSelectorState extends DataCubeEdit
 export class DataCubeEditorVerticalPivotsPanelState
   implements DataCubeQueryEditorPanelState
 {
-  readonly selector!: DataCubeEditorVerticalPivotColumnSelectorState;
+  readonly selector!: DataCubeEditorVerticalPivotColumnsSelectorState;
 
   constructor(editor: DataCubeEditorState) {
-    this.selector = new DataCubeEditorVerticalPivotColumnSelectorState(editor);
+    this.selector = new DataCubeEditorVerticalPivotColumnsSelectorState(editor);
   }
 
   adaptPropagatedChanges(): void {
@@ -80,7 +80,7 @@ export class DataCubeEditorVerticalPivotsPanelState
     this.selector.setSelectedColumns(
       (snapshot.data.groupBy?.columns ?? []).map(
         (col) =>
-          new DataCubeEditorColumnSelectorColumnState(col.name, col.type),
+          new DataCubeEditorColumnsSelectorColumnState(col.name, col.type),
       ),
     );
   }

package/src/stores/view/grid/DataCubeGridClientEngine.ts

@@ -152,6 +152,14 @@ export enum DataCubeGridClientSortDirection {
   DESCENDING = 'desc',
 }
 
+export function getAllNodes<T>(client: GridApi<T>): IRowNode<T>[] {
+  const rows: IRowNode<T>[] = [];
+  client.forEachNode((node: IRowNode<T>) => {
+    rows.push(node);
+  });
+  return rows;
+}
+
 export function getDataForAllNodes<T>(client: GridApi<T>): T[] {
   const rows: T[] = [];
   client.forEachNode((node: IRowNode<T>) => {
@@ -455,7 +463,10 @@ export class DataCubeGridClientServerSideDataSource
           'Stats',
           `${rowData.length} rows, ${result.result.result.columns.length} columns`,
         ],
-        ['SQL', result.executedSQL],
+        [
+          'SQL',
+          result.executedSQL ?? `-- Error: failed to extract executed SQL`,
+        ],
         ['SQL Execution Time', result.executionTime],
       );
     }

package/src/stores/view/grid/DataCubeGridClientExportEngine.ts

@@ -87,7 +87,7 @@ export class DataCubeGridClientExportEngine {
   }
 
   private generateFileName() {
-    return `${this._grid.queryConfiguration.name} - ${formatDate(new Date(), 'EEE MMM dd yyyy HH_mm_ss')}`;
+    return `${this._grid.configuration.name} - ${formatDate(new Date(), 'EEE MMM dd yyyy HH_mm_ss')}`;
   }
 
   exportFile(format: DataCubeGridClientExportFormat) {

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

@@ -20,7 +20,6 @@ import type {
   GetMainMenuItemsParams,
   MenuItemDef,
 } from 'ag-grid-community';
-import { WIP_GridMenuItem } from '../../../components/view/grid/DataCubeGridShared.js';
 import {
   DataCubeQuerySortDirection,
   DataCubeColumnPinPlacement,
@@ -48,6 +47,32 @@ import type { DataCubeColumnConfiguration } from '../../core/model/DataCubeConfi
 import { DataCubeFilterEditorConditionTreeNode } from '../../core/filter/DataCubeQueryFilterEditorState.js';
 import { DataCubeEditorTab } from '../editor/DataCubeEditorState.js';
 import { _findCol } from '../../core/model/DataCubeColumn.js';
+import { useGridMenuItem, type CustomMenuItemProps } from 'ag-grid-react';
+import { FormBadge_WIP } from '../../../components/core/DataCubeFormUtils.js';
+
+export function WIP_GridMenuItem({
+  name,
+  subMenu,
+  checked,
+}: CustomMenuItemProps) {
+  useGridMenuItem({
+    configureDefaults: () => true,
+  });
+
+  return (
+    <div>
+      <span className="ag-menu-option-part ag-menu-option-icon"></span>
+      <span className="ag-menu-option-part ag-menu-option-text !inline-flex items-center">
+        <span className="opacity-50">{name}</span>
+        <FormBadge_WIP />
+      </span>
+      <span className="ag-menu-option-part ag-menu-option-shortcut"></span>
+      <span className="ag-menu-option-part ag-menu-option-popup-pointer select-none">
+        {subMenu && <span className="ag-icon ag-icon-small-right"></span>}
+      </span>
+    </div>
+  );
+}
 
 function toFilterValue(
   value: unknown,

package/src/stores/view/grid/DataCubeGridState.ts

@@ -40,6 +40,7 @@ import { DataCubeGridClientExportEngine } from './DataCubeGridClientExportEngine
 import { DataCubeSettingKey } from '../../../__lib__/DataCubeSetting.js';
 import { DEFAULT_ALERT_WINDOW_CONFIG } from '../../services/DataCubeLayoutService.js';
 import { AlertType } from '../../services/DataCubeAlertService.js';
+import { DataCubeGridMode } from '../../core/DataCubeQueryEngine.js';
 
 /**
  * This query editor state is responsible for syncing the internal state of ag-grid
@@ -65,7 +66,7 @@ export class DataCubeGridState extends DataCubeSnapshotController {
   private _client?: GridApi | undefined;
   clientDataSource: DataCubeGridClientServerSideDataSource;
 
-  queryConfiguration: DataCubeConfiguration;
+  configuration: DataCubeConfiguration = new DataCubeConfiguration();
   rowLimit?: number | undefined;
   isPaginationEnabled = INTERNAL__GRID_CLIENT_DEFAULT_ENABLE_PAGINATION;
   isCachingEnabled = INTERNAL__GRID_CLIENT_DEFAULT_ENABLE_CACHING;
@@ -80,7 +81,7 @@ export class DataCubeGridState extends DataCubeSnapshotController {
     makeObservable(this, {
       clientDataSource: observable,
 
-      queryConfiguration: observable,
+      configuration: observable,
 
       rowLimit: observable,
 
@@ -99,7 +100,6 @@ export class DataCubeGridState extends DataCubeSnapshotController {
     this._view = view;
     this.controller = new DataCubeGridControllerState(this._view);
     this.exportEngine = new DataCubeGridClientExportEngine(this);
-    this.queryConfiguration = new DataCubeConfiguration();
     this.clientDataSource = new DataCubeGridClientServerSideDataSource(
       this,
       this._view,
@@ -236,12 +236,19 @@ export class DataCubeGridState extends DataCubeSnapshotController {
     return guaranteeNonNullable(this._client, 'Grid client is not configured');
   }
 
-  configureClient(val: GridApi | undefined) {
+  async configureClient(val: GridApi | undefined) {
     this._client = val;
     this.debouncedAutoResizeColumns = debounce(
       () => val?.autoSizeAllColumns(),
       100,
     );
+
+    // reapply latest snapshot when grid client is configured
+    // this happens during initialization/switching between grid modes
+    const latestSnapshot = this.getLatestSnapshot();
+    if (latestSnapshot) {
+      await this.applySnapshot(latestSnapshot, undefined);
+    }
   }
 
   override getSnapshotSubscriberName() {
@@ -255,8 +262,18 @@ export class DataCubeGridState extends DataCubeSnapshotController {
     const configuration = DataCubeConfiguration.serialization.fromJson(
       snapshot.data.configuration,
     );
-    this.queryConfiguration = configuration;
-    this.rowLimit = snapshot.data.limit;
+    this.configuration = configuration;
+
+    // Only proceed if the grid mode is standard, else the client won't be populated properly
+    // and we cannot continue anyway.
+    if (
+      configuration.gridMode !== DataCubeGridMode.STANDARD ||
+      // NOTE: have to make sure the grid API client has been properly configured before proceeding
+      !this._client ||
+      this._client.isDestroyed()
+    ) {
+      return;
+    }
 
     const gridOptions = generateGridOptionsFromSnapshot(
       snapshot,