@finos/legend-application-repl 0.0.32 → 0.0.34

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

@@ -0,0 +1,162 @@
+/**
+ * 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 { action, makeObservable, observable } from 'mobx';
+import type { DataCubeState } from '../DataCubeState.js';
+import {
+  type DataCubeQuerySnapshot,
+  type DataCubeQuerySnapshotColumn,
+} from '../core/DataCubeQuerySnapshot.js';
+import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
+import {
+  DataCubeEditorColumnsSelectorColumnState,
+  DataCubeEditorColumnsSelectorColumnsVisibility,
+  DataCubeEditorColumnsSelectorState,
+} from './DataCubeEditorColumnsSelectorState.js';
+import type { DataCubeEditorState } from './DataCubeEditorState.js';
+import { type DataCubeConfiguration } from '../core/DataCubeConfiguration.js';
+import { DataCubeMutableColumnConfiguration } from './DataCubeMutableConfiguration.js';
+
+export class DataCubeEditorBasicColumnsSelectorState extends DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorColumnState> {
+  override cloneColumn(
+    column: DataCubeEditorColumnsSelectorColumnState,
+  ): DataCubeEditorColumnsSelectorColumnState {
+    return new DataCubeEditorColumnsSelectorColumnState(
+      column.name,
+      column.type,
+    );
+  }
+
+  override get availableColumns(): DataCubeEditorColumnsSelectorColumnState[] {
+    return [
+      ...this.editor.columns.sourceColumns,
+      // TODO: add extended columns
+    ].map(
+      (col) => new DataCubeEditorColumnsSelectorColumnState(col.name, col.type),
+    );
+  }
+}
+
+export class DataCubeEditorColumnsPanelState
+  implements DataCubeQueryEditorPanelState
+{
+  readonly dataCube!: DataCubeState;
+  readonly editor!: DataCubeEditorState;
+  readonly selector!: DataCubeEditorBasicColumnsSelectorState;
+
+  sourceColumns: DataCubeQuerySnapshotColumn[] = [];
+
+  constructor(editor: DataCubeEditorState) {
+    makeObservable(this, {
+      sourceColumns: observable,
+      setSourceColumns: action,
+    });
+
+    this.editor = editor;
+    this.dataCube = editor.dataCube;
+    this.selector = new DataCubeEditorBasicColumnsSelectorState(editor, {
+      initialColumnsVisibility:
+        DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN,
+      onChange: (selector) => {
+        // populate a default configuration for the newly selected columns
+        selector.selectedColumns
+          .filter(
+            (col) =>
+              !this.editor.columnProperties.columns.find(
+                (column) => column.name === col.name,
+              ),
+          )
+          .forEach((col) => {
+            this.editor.columnProperties.setColumns([
+              ...this.editor.columnProperties.columns,
+              DataCubeMutableColumnConfiguration.createDefault({
+                name: col.name,
+                type: col.type,
+              }),
+            ]);
+          });
+      },
+    });
+  }
+
+  /**
+   * Propagate column selection changes to other states: column properties, sorts, pivots, etc.
+   *
+   * NOTE: Ideally, this should be called on every changes made to the column selection, but to
+   * give user some room for error, i.e. when user accidentally select/deselect columns, we would
+   * not propagate this change until user either leaves this panel or explicitly applies changes
+   * (i.e. publishes a new snapshot)
+   */
+  propagateColumnSelectionChanges(): void {
+    // prune column properties
+    this.editor.columnProperties.setColumns(
+      this.editor.columnProperties.columns.filter((column) =>
+        this.selector.selectedColumns.find((col) => col.name === column.name),
+      ),
+    );
+
+    // prune sorts
+    this.editor.sorts.selector.setSelectedColumns(
+      this.editor.sorts.selector.selectedColumns.filter((column) =>
+        this.selector.selectedColumns.find((col) => col.name === column.name),
+      ),
+    );
+
+    // prune vertical pivots columns
+    this.editor.verticalPivots.selector.setSelectedColumns(
+      this.editor.verticalPivots.selector.selectedColumns.filter((column) =>
+        this.selector.selectedColumns.find((col) => col.name === column.name),
+      ),
+    );
+
+    // TODO: prune horizontal pivots columns
+  }
+
+  setSourceColumns(columns: DataCubeQuerySnapshotColumn[]): void {
+    this.sourceColumns = columns;
+  }
+
+  applySnaphot(
+    snapshot: DataCubeQuerySnapshot,
+    configuration: DataCubeConfiguration,
+  ): void {
+    this.setSourceColumns(snapshot.data.sourceColumns);
+    this.selector.setSelectedColumns(
+      // extract selected columns from the configuration since the configuration specifies the order
+      // taking into account the group extended columns
+      configuration.columns.map((col) => {
+        const column = this.selector.getColumn(col.name);
+        return new DataCubeEditorColumnsSelectorColumnState(
+          column.name,
+          column.type,
+        );
+      }),
+    );
+  }
+
+  buildSnapshot(
+    newSnapshot: DataCubeQuerySnapshot,
+    baseSnapshot: DataCubeQuerySnapshot,
+  ): void {
+    this.propagateColumnSelectionChanges();
+    newSnapshot.data.selectColumns = this.selector.selectedColumns
+      // TODO: filter by group extended columns
+      .map((col) => ({
+        name: col.name,
+        type: col.type,
+      }));
+  }
+}

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

@@ -14,45 +14,119 @@
  * limitations under the License.
  */
 
-import { makeObservable, observable, action } from 'mobx';
+import { makeObservable, observable, action, computed } from 'mobx';
+import type { DataCubeState } from '../DataCubeState.js';
+import type { DataCubeEditorState } from './DataCubeEditorState.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
 
-export abstract class DataCubeEditorColumnsSelectorColumnState {
-  abstract get name(): string;
-  resetWhenMadeAvailable(): void {
-    // do nothing
+export class DataCubeEditorColumnsSelectorColumnState {
+  readonly name: string;
+  readonly type: string;
+
+  constructor(name: string, type: string) {
+    this.name = name;
+    this.type = type;
   }
 }
 
-export class DataCubeEditorColumnsSelectorState<
+export enum DataCubeEditorColumnsSelectorColumnsVisibility {
+  VISIBLE = 'visible',
+  VISIBLE_WITH_WARNING = 'visible-with-warning',
+  HIDDEN = 'hidden',
+}
+
+export abstract class DataCubeEditorColumnsSelectorState<
   T extends DataCubeEditorColumnsSelectorColumnState,
 > {
-  availableColumns: T[] = [];
+  readonly dataCube!: DataCubeState;
+  readonly editor!: DataCubeEditorState;
+
   selectedColumns: T[] = [];
+
   availableColumnsSearchText = '';
   selectedColumnsSearchText = '';
 
-  constructor() {
+  readonly onChange?:
+    | ((selector: DataCubeEditorColumnsSelectorState<T>) => void)
+    | undefined;
+  columnsVisibility!: DataCubeEditorColumnsSelectorColumnsVisibility;
+
+  constructor(
+    editor: DataCubeEditorState,
+    options?: {
+      initialColumnsVisibility?:
+        | DataCubeEditorColumnsSelectorColumnsVisibility
+        | undefined;
+      onChange?:
+        | ((select: DataCubeEditorColumnsSelectorState<T>) => void)
+        | undefined;
+    },
+  ) {
     makeObservable(this, {
-      availableColumns: observable,
+      availableColumns: computed,
+      availableColumnsForDisplay: computed,
+      selectedColumnsForDisplay: computed,
+
       selectedColumns: observable,
+      setSelectedColumns: action,
+
       availableColumnsSearchText: observable,
+      setAvailableColumnsSearchText: action,
+
       selectedColumnsSearchText: observable,
-      setAvailableColumns: action,
-      setSelectedColumns: action,
       setSelectedColumnsSearchText: action,
-      setAvailableColumnsSearchText: action,
+
+      columnsVisibility: observable,
+      setColumnsVisibility: action,
     });
+
+    this.editor = editor;
+    this.dataCube = editor.dataCube;
+    this.onChange = options?.onChange;
+    this.columnsVisibility =
+      options?.initialColumnsVisibility ??
+      DataCubeEditorColumnsSelectorColumnsVisibility.VISIBLE;
+  }
+
+  setColumnsVisibility(
+    visibility: DataCubeEditorColumnsSelectorColumnsVisibility,
+  ): void {
+    this.columnsVisibility = visibility;
   }
 
-  setAvailableColumns(val: T[]): void {
-    this.availableColumns = val
-      .slice()
-      .sort((a, b) => a.name.localeCompare(b.name));
-    this.availableColumns.forEach((column) => column.resetWhenMadeAvailable());
+  abstract get availableColumns(): T[];
+
+  get availableColumnsForDisplay(): T[] {
+    return this.availableColumns
+      .filter(
+        (column) =>
+          !this.selectedColumns.find((col) => column.name === col.name),
+      )
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .filter(
+        (column) =>
+          this.columnsVisibility !==
+            DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN ||
+          !this.editor.columnProperties.columns.find(
+            (col) => col.name === column.name,
+          )?.hideFromView,
+      );
+  }
+
+  get selectedColumnsForDisplay(): T[] {
+    return this.selectedColumns.filter(
+      (column) =>
+        this.columnsVisibility !==
+          DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN ||
+        !this.editor.columnProperties.columns.find(
+          (col) => col.name === column.name,
+        )?.hideFromView,
+    );
   }
 
   setSelectedColumns(val: T[]): void {
-    this.selectedColumns = val;
+    this.selectedColumns = val.map((col) => this.cloneColumn(col));
+    this.onChange?.(this);
   }
 
   setAvailableColumnsSearchText(val: string): void {
@@ -63,11 +137,12 @@ export class DataCubeEditorColumnsSelectorState<
     this.selectedColumnsSearchText = val;
   }
 
-  getAvailableColumn(colName: string): T | undefined {
-    return this.availableColumns.find((col) => col.name === colName);
+  getColumn(colName: string): T {
+    return guaranteeNonNullable(
+      this.availableColumns.find((col) => col.name === colName),
+      `Can't find column '${colName}'`,
+    );
   }
 
-  getSelectedColumn(colName: string): T | undefined {
-    return this.selectedColumns.find((col) => col.name === colName);
-  }
+  abstract cloneColumn(column: T): T;
 }

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

@@ -20,6 +20,7 @@ import type { DataCubeQuerySnapshot } from '../core/DataCubeQuerySnapshot.js';
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
 import { DataCubeMutableConfiguration } from './DataCubeMutableConfiguration.js';
+import type { DataCubeConfiguration } from '../core/DataCubeConfiguration.js';
 
 export class DataCubeEditorGeneralPropertiesPanelState
   implements DataCubeQueryEditorPanelState
@@ -59,7 +60,10 @@ export class DataCubeEditorGeneralPropertiesPanelState
     this.configuration = val;
   }
 
-  applySnaphot(snapshot: DataCubeQuerySnapshot): void {
+  applySnaphot(
+    snapshot: DataCubeQuerySnapshot,
+    configuration: DataCubeConfiguration,
+  ): void {
     this.setName(snapshot.data.name);
     this.setLimit(
       snapshot.data.limit !== undefined && snapshot.data.limit > 0

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

@@ -14,13 +14,17 @@
  * limitations under the License.
  */
 
+import type { DataCubeConfiguration } from '../core/DataCubeConfiguration.js';
 import type { DataCubeQuerySnapshot } from '../core/DataCubeQuerySnapshot.js';
 
 export interface DataCubeQueryEditorPanelState {
   /**
    * Update the editor state based on the snapshot
    */
-  applySnaphot(snapshot: DataCubeQuerySnapshot): void;
+  applySnaphot(
+    snapshot: DataCubeQuerySnapshot,
+    configuration: DataCubeConfiguration,
+  ): void;
 
   /**
    * Build and enrich the snapshot with data from the editor state

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

@@ -16,48 +16,59 @@
 
 import { action, makeObservable, observable } from 'mobx';
 import type { DataCubeState } from '../DataCubeState.js';
-import {
-  DataCubeQuerySnapshotSortOperation,
-  _getCol,
-  type DataCubeQuerySnapshot,
-  type DataCubeQuerySnapshotColumn,
-} from '../core/DataCubeQuerySnapshot.js';
+import { type DataCubeQuerySnapshot } from '../core/DataCubeQuerySnapshot.js';
+import { DataCubeQuerySortOperation } from '../core/DataCubeQueryEngine.js';
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import {
   DataCubeEditorColumnsSelectorColumnState,
   DataCubeEditorColumnsSelectorState,
 } from './DataCubeEditorColumnsSelectorState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
+import type { DataCubeConfiguration } from '../core/DataCubeConfiguration.js';
 
 export class DataCubeEditorSortColumnState extends DataCubeEditorColumnsSelectorColumnState {
-  readonly column: DataCubeQuerySnapshotColumn;
-  operation: DataCubeQuerySnapshotSortOperation;
+  operation: DataCubeQuerySortOperation;
 
   constructor(
-    column: DataCubeQuerySnapshotColumn,
-    direction: DataCubeQuerySnapshotSortOperation,
+    name: string,
+    type: string,
+    direction: DataCubeQuerySortOperation,
   ) {
-    super();
+    super(name, type);
 
     makeObservable(this, {
       operation: observable,
       setOperation: action,
     });
 
-    this.column = column;
     this.operation = direction;
   }
 
-  get name(): string {
-    return this.column.name;
+  setOperation(val: DataCubeQuerySortOperation): void {
+    this.operation = val;
   }
+}
 
-  override resetWhenMadeAvailable(): void {
-    this.setOperation(DataCubeQuerySnapshotSortOperation.ASCENDING);
+export class DataCubeEditorSortColumnsSelectorState extends DataCubeEditorColumnsSelectorState<DataCubeEditorSortColumnState> {
+  override cloneColumn(
+    column: DataCubeEditorSortColumnState,
+  ): DataCubeEditorSortColumnState {
+    return new DataCubeEditorSortColumnState(
+      column.name,
+      column.type,
+      column.operation,
+    );
   }
 
-  setOperation(val: DataCubeQuerySnapshotSortOperation): void {
-    this.operation = val;
+  override get availableColumns(): DataCubeEditorSortColumnState[] {
+    return this.editor.columns.selector.selectedColumns.map(
+      (col) =>
+        new DataCubeEditorSortColumnState(
+          col.name,
+          col.type,
+          DataCubeQuerySortOperation.ASCENDING,
+        ),
+    );
   }
 }
 
@@ -66,105 +77,27 @@ export class DataCubeEditorSortsPanelState
 {
   readonly dataCube!: DataCubeState;
   readonly editor!: DataCubeEditorState;
-  readonly columnsSelector!: DataCubeEditorColumnsSelectorState<DataCubeEditorSortColumnState>;
+  readonly selector!: DataCubeEditorColumnsSelectorState<DataCubeEditorSortColumnState>;
 
   constructor(editor: DataCubeEditorState) {
     this.editor = editor;
     this.dataCube = editor.dataCube;
-    this.columnsSelector = new DataCubeEditorColumnsSelectorState();
+    this.selector = new DataCubeEditorSortColumnsSelectorState(editor);
   }
 
-  getActionableSortColumn(
-    colName: string,
-    operation: DataCubeQuerySnapshotSortOperation,
-  ): DataCubeEditorSortColumnState | undefined {
-    let column = this.columnsSelector.getAvailableColumn(colName);
-    if (!column) {
-      const selectedColumn = this.columnsSelector.getSelectedColumn(colName);
-      if (selectedColumn && selectedColumn.operation !== operation) {
-        column = selectedColumn;
-      }
-    }
-    return column;
-  }
-
-  sortByColumn(
-    colName: string,
-    operation: DataCubeQuerySnapshotSortOperation,
+  applySnaphot(
+    snapshot: DataCubeQuerySnapshot,
+    configuration: DataCubeConfiguration,
   ): void {
-    const column = this.getActionableSortColumn(colName, operation);
-    if (!column) {
-      return;
-    }
-    column.setOperation(operation);
-
-    this.columnsSelector.setAvailableColumns(
-      [
-        ...this.columnsSelector.availableColumns,
-        ...this.columnsSelector.selectedColumns,
-      ].filter((col) => col.name !== colName),
-    );
-    this.columnsSelector.setSelectedColumns([column]);
-    this.editor.applyChanges();
-  }
-
-  addSortByColumn(
-    colName: string,
-    operation: DataCubeQuerySnapshotSortOperation,
-  ): void {
-    const column = this.getActionableSortColumn(colName, operation);
-    if (!column) {
-      return;
-    }
-    column.setOperation(operation);
-
-    this.columnsSelector.setAvailableColumns(
-      this.columnsSelector.availableColumns.filter(
-        (col) => col.name !== colName,
-      ),
-    );
-    this.columnsSelector.setSelectedColumns([
-      ...this.columnsSelector.selectedColumns,
-      column,
-    ]);
-    this.editor.applyChanges();
-  }
-
-  clearAllSorts(): void {
-    if (this.columnsSelector.selectedColumns.length !== 0) {
-      this.columnsSelector.setAvailableColumns([
-        ...this.columnsSelector.availableColumns,
-        ...this.columnsSelector.selectedColumns,
-      ]);
-      this.columnsSelector.setSelectedColumns([]);
-      this.editor.applyChanges();
-    }
-  }
-
-  applySnaphot(snapshot: DataCubeQuerySnapshot): void {
-    const columns = snapshot.stageCols('sort');
-    const sortColumns = snapshot.data.sortColumns;
-    this.columnsSelector.setAvailableColumns(
-      columns
-        .filter(
-          (col) => !sortColumns.find((sortCol) => sortCol.name === col.name),
-        )
-        .map(
-          (col) =>
-            new DataCubeEditorSortColumnState(
-              _getCol(columns, col.name),
-              DataCubeQuerySnapshotSortOperation.ASCENDING,
-            ),
-        ),
-    );
-    this.columnsSelector.setSelectedColumns(
-      sortColumns.map(
-        (col) =>
-          new DataCubeEditorSortColumnState(
-            _getCol(columns, col.name),
-            col.operation,
-          ),
-      ),
+    this.selector.setSelectedColumns(
+      snapshot.data.sortColumns.map((col) => {
+        const column = this.selector.getColumn(col.name);
+        return new DataCubeEditorSortColumnState(
+          column.name,
+          column.type,
+          col.operation,
+        );
+      }),
     );
   }
 
@@ -172,12 +105,10 @@ export class DataCubeEditorSortsPanelState
     newSnapshot: DataCubeQuerySnapshot,
     baseSnapshot: DataCubeQuerySnapshot,
   ): void {
-    newSnapshot.data.sortColumns = this.columnsSelector.selectedColumns.map(
-      (sortInfo) => ({
-        name: sortInfo.column.name,
-        type: sortInfo.column.type,
-        operation: sortInfo.operation,
-      }),
-    );
+    newSnapshot.data.sortColumns = this.selector.selectedColumns.map((col) => ({
+      name: col.name,
+      type: col.type,
+      operation: col.operation,
+    }));
   }
 }

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

@@ -24,23 +24,28 @@ import { guaranteeNonNullable, uuid } from '@finos/legend-shared';
 import { DataCubeEditorGeneralPropertiesPanelState } from './DataCubeEditorGeneralPropertiesPanelState.js';
 import { DataCubeEditorColumnPropertiesPanelState } from './DataCubeEditorColumnPropertiesPanelState.js';
 import type { REPLWindowConfig } from '../../../components/REPLWindow.js';
+import { DataCubeEditorColumnsPanelState } from './DataCubeEditorColumnsPanelState.js';
+import { DataCubeConfiguration } from '../core/DataCubeConfiguration.js';
+import { DataCubeEditorVerticalPivotsPanelState } from './DataCubeEditorVerticalPivotsPanelState.js';
 
 export enum DATA_CUBE_EDITOR_TAB {
-  COLUMNS = 'Columns',
-  VERTICAL_PIVOTS = 'VPivots',
-  HORIZONTAL_PIVOTS = 'HPivots',
-  SORTS = 'Sorts',
-  EXTENDED_COLUMNS = 'Extended Columns',
-  FILTER = 'Filter',
   GENERAL_PROPERTIES = 'General Properties',
   COLUMN_PROPERTIES = 'Column Properties',
+  FILTER = 'Filter',
+  EXTENDED_COLUMNS = 'Extended Columns',
+  COLUMNS = 'Columns',
+  VERTICAL_PIVOTS = 'Vertical Pivots',
+  HORIZONTAL_PIVOTS = 'Horizontal Pivots',
+  SORTS = 'Sorts',
   CODE = 'Code',
 }
 
 export class DataCubeEditorState extends DataCubeQuerySnapshotSubscriber {
-  readonly sorts: DataCubeEditorSortsPanelState;
   readonly generalProperties: DataCubeEditorGeneralPropertiesPanelState;
   readonly columnProperties: DataCubeEditorColumnPropertiesPanelState;
+  readonly columns: DataCubeEditorColumnsPanelState;
+  readonly verticalPivots: DataCubeEditorVerticalPivotsPanelState;
+  readonly sorts: DataCubeEditorSortsPanelState;
   readonly code: DataCubeEditorCodePanelState;
 
   readonly window: REPLWindowConfig = {
@@ -66,11 +71,13 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotSubscriber {
       closePanel: action,
     });
 
-    this.sorts = new DataCubeEditorSortsPanelState(this);
     this.generalProperties = new DataCubeEditorGeneralPropertiesPanelState(
       this,
     );
     this.columnProperties = new DataCubeEditorColumnPropertiesPanelState(this);
+    this.columns = new DataCubeEditorColumnsPanelState(this);
+    this.verticalPivots = new DataCubeEditorVerticalPivotsPanelState(this);
+    this.sorts = new DataCubeEditorSortsPanelState(this);
     this.code = new DataCubeEditorCodePanelState(this);
   }
 
@@ -90,9 +97,15 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotSubscriber {
     const baseSnapshot = guaranteeNonNullable(this.getLatestSnapshot());
     const snapshot = baseSnapshot.clone();
 
+    // NOTE: column selection must be processed first so necassary
+    // 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);
-    // NOTE: snapshot must be processed first to build the container configuration
-    // before proceeding to process the columns' configuration
+
+    // grid configuration must be processed before processing columns' configuration
+    // to properly generate the container configuration
     this.generalProperties.buildSnapshot(snapshot, baseSnapshot);
     this.columnProperties.buildSnapshot(snapshot, baseSnapshot);
 
@@ -106,9 +119,16 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotSubscriber {
     snapshot: DataCubeQuerySnapshot,
     previousSnapshot: DataCubeQuerySnapshot | undefined,
   ): Promise<void> {
-    this.sorts.applySnaphot(snapshot);
-    this.generalProperties.applySnaphot(snapshot);
-    this.columnProperties.applySnaphot(snapshot);
+    const configuration = DataCubeConfiguration.serialization.fromJson(
+      snapshot.data.configuration,
+    );
+
+    this.columns.applySnaphot(snapshot, configuration);
+    this.verticalPivots.applySnaphot(snapshot, configuration);
+    this.sorts.applySnaphot(snapshot, configuration);
+
+    this.generalProperties.applySnaphot(snapshot, configuration);
+    this.columnProperties.applySnaphot(snapshot, configuration);
   }
 
   override async initialize(): Promise<void> {