@finos/legend-data-cube 0.1.31 → 0.2.0

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

@@ -0,0 +1,268 @@
+/**
+ * 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 type { CellDoubleClickedEvent } from 'ag-grid-community';
+import type { DataCubeConfiguration } from '../../core/model/DataCubeConfiguration.js';
+import {
+  guaranteeNonNullable,
+  guaranteeType,
+  hashArray,
+  type Hashable,
+} from '@finos/legend-shared';
+
+export const DIMENSIONAL_L0_COLUMN = 'ALL';
+
+enum DimensionalNodeHashType {
+  GROUP_BY_NODE = 'groupByNode',
+  DIMENSIONAL_NODE = 'dimensionalNode',
+  DIMENSIONAL_TREE = 'dimensionalTree',
+}
+
+export class DataCubeDimensionalTree implements Hashable {
+  rootNodes: DataCubeDimensionalNode[];
+
+  constructor(rootNodes: DataCubeDimensionalNode[]) {
+    this.rootNodes = rootNodes;
+  }
+
+  // TODO: improve hashing
+  get hashCode(): string {
+    return hashArray([
+      DimensionalNodeHashType.DIMENSIONAL_TREE,
+      hashArray(this.rootNodes),
+    ]);
+  }
+}
+
+export class DataCubeDimensionalNode implements Hashable {
+  column: string;
+  dimension: string;
+  childNodes: DataCubeDimensionalNode[];
+  groupByNodes: DataCubeDimensionalGroupByNode[];
+
+  constructor(
+    column: string,
+    dimension: string,
+    childNodes: DataCubeDimensionalNode[] = [],
+    groupByNodes: DataCubeDimensionalGroupByNode[] = [],
+  ) {
+    this.column = column;
+    this.dimension = dimension;
+    this.childNodes = childNodes;
+    this.groupByNodes = groupByNodes;
+  }
+
+  get hashCode(): string {
+    return hashArray([
+      DimensionalNodeHashType.DIMENSIONAL_NODE,
+      this.column,
+      hashArray(this.groupByNodes),
+    ]);
+  }
+}
+
+export class DataCubeDimensionalGroupByNode implements Hashable {
+  column: string;
+  filter: string;
+  dimension: string;
+
+  constructor(column: string, filter: string, dimension: string) {
+    this.column = column;
+    this.filter = filter;
+    this.dimension = dimension;
+  }
+
+  get hashCode(): string {
+    return hashArray([
+      DimensionalNodeHashType.GROUP_BY_NODE,
+      this.column,
+      this.filter,
+      this.dimension,
+    ]);
+  }
+}
+
+export class DataCubeDimensionalMetadata {
+  column: string;
+  level: number;
+  groupByNodes: DataCubeDimensionalGroupByNode[];
+
+  constructor(
+    column: string,
+    level: number,
+    groupByNodes: DataCubeDimensionalGroupByNode[] = [],
+  ) {
+    this.column = column;
+    this.level = level;
+    this.groupByNodes = groupByNodes;
+  }
+}
+
+export function generateDimensionalPaths(
+  tree: DataCubeDimensionalTree,
+): DataCubeDimensionalNode[][] {
+  const paths: DataCubeDimensionalNode[][] = [];
+
+  const collectAllDescendants = (node: DataCubeDimensionalNode) => {
+    const result: DataCubeDimensionalNode[] = [];
+    const stack = [node];
+
+    while (stack.length) {
+      const current = stack.pop();
+      if (current) {
+        result.push(current);
+        stack.push(...current.childNodes);
+      }
+    }
+
+    return result;
+  };
+
+  const backtrack = (index: number, path: DataCubeDimensionalNode[]) => {
+    if (index === tree.rootNodes.length) {
+      paths.push([...path]);
+      return;
+    }
+
+    const options = collectAllDescendants(
+      guaranteeNonNullable(tree.rootNodes[index]),
+    );
+
+    for (const option of options) {
+      path.push(option);
+      backtrack(index + 1, path);
+      path.pop();
+    }
+  };
+
+  backtrack(0, []);
+  return paths;
+}
+
+export function hydrateDataCubeDimensionalTree(
+  configuration: DataCubeConfiguration,
+  event?: CellDoubleClickedEvent,
+  tree?: DataCubeDimensionalTree,
+): DataCubeDimensionalTree | undefined {
+  if (!event && !tree) {
+    return new DataCubeDimensionalTree(
+      configuration.dimensions.dimensions.map(
+        (d) => new DataCubeDimensionalNode(DIMENSIONAL_L0_COLUMN, d.name),
+      ),
+    );
+  }
+
+  const safeTree = guaranteeNonNullable(tree);
+  const safeEvent = guaranteeNonNullable(event);
+
+  const metadata = guaranteeType(
+    safeEvent.data.metadata,
+    Map<string, DataCubeDimensionalMetadata>,
+  );
+  const clickedDimension = guaranteeNonNullable(safeEvent.column.getColId());
+
+  const dimensionMetadata = metadata.get(clickedDimension);
+
+  if (!dimensionMetadata) {
+    return safeTree; // No metadata for clicked column -> return tree untouched
+  }
+
+  const safeMetadata = guaranteeType(
+    dimensionMetadata,
+    DataCubeDimensionalMetadata,
+  );
+
+  const { column: clickedColumn, groupByNodes } = safeMetadata;
+  const dimension = guaranteeNonNullable(
+    configuration.dimensions.dimensions.find(
+      (d) => d.name === clickedDimension,
+    ),
+  );
+
+  const nextColumn =
+    clickedColumn !== DIMENSIONAL_L0_COLUMN
+      ? dimension.columns[dimension.columns.indexOf(clickedColumn) + 1]
+      : dimension.columns[0];
+
+  if (!nextColumn) {
+    return safeTree;
+  } // No further drilldown possible
+
+  const newNode = new DataCubeDimensionalNode(nextColumn, clickedDimension);
+  newNode.groupByNodes.push(...groupByNodes);
+
+  for (const rootNode of safeTree.rootNodes) {
+    if (rootNode.dimension !== clickedDimension) {
+      continue;
+    }
+
+    const targetNode = findNodeByColumnOrGroup(
+      rootNode,
+      clickedColumn,
+      groupByNodes,
+    );
+    if (targetNode) {
+      if (clickedColumn !== DIMENSIONAL_L0_COLUMN) {
+        newNode.groupByNodes.push(
+          new DataCubeDimensionalGroupByNode(
+            clickedColumn,
+            safeEvent.value,
+            clickedDimension,
+          ),
+        );
+      }
+
+      const alreadyExists = targetNode.childNodes.some(
+        (child) =>
+          child.column === newNode.column &&
+          child.hashCode === newNode.hashCode,
+      );
+
+      if (!alreadyExists) {
+        targetNode.childNodes.push(newNode);
+      }
+    }
+    break; // done
+  }
+
+  return safeTree;
+}
+
+function findNodeByColumnOrGroup(
+  node: DataCubeDimensionalNode,
+  targetColumn: string,
+  targetGroupByNodes: DataCubeDimensionalGroupByNode[],
+): DataCubeDimensionalNode | undefined {
+  if (
+    node.column === targetColumn &&
+    hashArray(node.groupByNodes) === hashArray(targetGroupByNodes)
+  ) {
+    return node;
+  }
+
+  for (const child of node.childNodes) {
+    const match = findNodeByColumnOrGroup(
+      child,
+      targetColumn,
+      targetGroupByNodes,
+    );
+    if (match) {
+      return match;
+    }
+  }
+
+  return undefined;
+}

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

@@ -1020,3 +1020,243 @@ export function generateMenuBuilder(
     ] satisfies (DefaultMenuItem | MenuItemDef)[];
   };
 }
+
+export function generateDimensionalMenuBuilder(
+  controller: DataCubeGridControllerState,
+): (
+  params: GetContextMenuItemsParams | GetMainMenuItemsParams,
+  fromHeader: boolean,
+) => (DefaultMenuItem | MenuItemDef)[] {
+  const view = controller.view;
+  const dataCube = view.dataCube;
+
+  return (
+    params: GetContextMenuItemsParams | GetMainMenuItemsParams,
+    fromHeader: boolean,
+  ) => {
+    const column = params.column ?? undefined;
+    const columnName = column?.getColId();
+    const columnConfiguration = controller.getColumnConfiguration(columnName);
+
+    //TODO: add more menu items like sort,filter...
+    return [
+      {
+        name: 'Export',
+        subMenu: [
+          {
+            name: 'HTML',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+          {
+            name: 'Plain Text',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+          {
+            name: 'PDF',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+          {
+            name: 'Excel',
+            action: () =>
+              view.grid.exportEngine.exportFile(
+                DataCubeGridClientExportFormat.EXCEL,
+              ),
+          },
+          {
+            name: 'CSV',
+            action: () =>
+              view.grid.exportEngine.exportFile(
+                DataCubeGridClientExportFormat.CSV,
+              ),
+          },
+          'separator',
+          {
+            name: 'DataCube Specification',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+        ],
+      },
+      {
+        name: 'Email',
+        subMenu: [
+          {
+            name: 'HTML',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+          {
+            name: 'Plain Text',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+          'separator',
+          {
+            name: 'HTML Attachment',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+          {
+            name: 'Plain Text Attachment',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+          {
+            name: 'PDF Attachment',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+          {
+            name: 'Excel Attachment',
+            action: () => {
+              view.grid.exportEngine
+                .exportEmail(DataCubeGridClientExportFormat.EXCEL)
+                .catch((error) =>
+                  dataCube.alertService.alertUnhandledError(error),
+                );
+            },
+          },
+          {
+            name: 'CSV Attachment',
+            action: () => {
+              view.grid.exportEngine
+                .exportEmail(DataCubeGridClientExportFormat.CSV)
+                .catch((error) =>
+                  dataCube.alertService.alertUnhandledError(error),
+                );
+            },
+          },
+          {
+            name: 'DataCube Specification Attachment',
+            menuItem: WIP_GridMenuItem,
+            cssClasses: ['!opacity-100'],
+            disabled: true,
+          },
+        ],
+      },
+      //TODO: add sort .extend, heatmap
+      'separator',
+      {
+        name: 'Resize',
+        subMenu: [
+          {
+            name: `Auto-size to Fit Content`,
+            disabled:
+              !column ||
+              !columnConfiguration ||
+              columnConfiguration.fixedWidth !== undefined,
+            action: () =>
+              params.api.autoSizeColumns(
+                [column?.getColId()].filter(isNonNullable),
+              ),
+          },
+          {
+            name: `Minimize Column`,
+            disabled:
+              !column ||
+              !columnConfiguration ||
+              columnConfiguration.fixedWidth !== undefined,
+            action: () => {
+              if (column && columnConfiguration) {
+                params.api.setColumnWidths([
+                  {
+                    key: columnConfiguration.name,
+                    newWidth:
+                      columnConfiguration.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
+                  },
+                ]);
+              }
+            },
+          },
+          'separator',
+          {
+            name: `Auto-size All Columns`,
+            action: () =>
+              params.api.autoSizeColumns([
+                ...controller.configuration.columns
+                  .filter(
+                    (col) =>
+                      col.fixedWidth === undefined &&
+                      col.isSelected &&
+                      !col.hideFromView,
+                  )
+                  .map((col) => col.name),
+                ...controller.horizontalPivotCastColumns
+                  .map((col) => {
+                    if (isPivotResultColumnName(col.name)) {
+                      const colConf = _findCol(
+                        controller.configuration.columns,
+                        getPivotResultColumnBaseColumnName(col.name),
+                      );
+                      if (
+                        colConf &&
+                        colConf.fixedWidth === undefined &&
+                        colConf.isSelected &&
+                        !colConf.hideFromView
+                      ) {
+                        return col.name;
+                      }
+                    }
+                    return undefined;
+                  })
+                  .filter(isNonNullable),
+              ]),
+          },
+          {
+            name: `Minimize All Columns`,
+            action: () => {
+              params.api.setColumnWidths([
+                ...controller.configuration.columns
+                  .filter((col) => col.fixedWidth === undefined)
+                  .map((col) => ({
+                    key: col.name,
+                    newWidth:
+                      columnConfiguration?.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
+                  })),
+                ...controller.horizontalPivotCastColumns
+                  .map((col) => {
+                    if (isPivotResultColumnName(col.name)) {
+                      const colConf = _findCol(
+                        controller.configuration.columns,
+                        getPivotResultColumnBaseColumnName(col.name),
+                      );
+                      if (
+                        colConf &&
+                        colConf.fixedWidth === undefined &&
+                        colConf.isSelected &&
+                        !colConf.hideFromView
+                      ) {
+                        return {
+                          key: col.name,
+                          newWidth:
+                            colConf.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
+                        };
+                      }
+                    }
+                    return undefined;
+                  })
+                  .filter(isNonNullable),
+              ]);
+            },
+          },
+          {
+            name: `Size Grid to Fit Screen`,
+            action: () => params.api.sizeColumnsToFit(),
+          },
+        ],
+      },
+    ] satisfies (DefaultMenuItem | MenuItemDef)[];
+  };
+}

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

@@ -62,9 +62,13 @@ import {
 } from './DataCubeGridClientEngine.js';
 import { DataCubeConfiguration } from '../../core/model/DataCubeConfiguration.js';
 import { _colSpecArrayParam } from '../../core/DataCubeSnapshotBuilderUtils.js';
-import { buildExecutableQuery } from '../../core/DataCubeQueryBuilder.js';
+import {
+  buildDimensionalExecutableQuery,
+  buildExecutableQuery,
+} from '../../core/DataCubeQueryBuilder.js';
 import type { DataCubeSource } from '../../core/model/DataCubeSource.js';
 import type { DataCubeEngine } from '../../core/DataCubeEngine.js';
+import type { DataCubeDimensionalNode } from './DataCubeGridDimensionalTree.js';
 
 /*****************************************************************************
  * [GRID]
@@ -188,6 +192,23 @@ export function buildGridDataFetchExecutableQuery(
   });
 }
 
+export function buildDimensionalGridDataFetchExecutableQuery(
+  snapshot: DataCubeSnapshot,
+  source: DataCubeSource,
+  engine: DataCubeEngine,
+  nodes: DataCubeDimensionalNode[],
+) {
+  //TODO: Try to remove this cloning
+  const processedSnapshot = snapshot.clone();
+  //TODO: check if we need to show root aggregation in this mode
+  return buildDimensionalExecutableQuery(
+    processedSnapshot,
+    source,
+    engine,
+    nodes,
+  );
+}
+
 function generateGridDataFetchExecutableQueryPostProcessor(
   request: DataCubeGridClientDataFetchRequest,
 ) {

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

@@ -21,7 +21,7 @@ import {
   type DebouncedFunc,
 } from '@finos/legend-shared';
 import { action, makeObservable, observable, runInAction } from 'mobx';
-import type { GridApi } from 'ag-grid-community';
+import type { CellDoubleClickedEvent, GridApi } from 'ag-grid-community';
 import type { DataCubeViewState } from '../DataCubeViewState.js';
 import {
   DataCubeGridClientServerSideDataSource,
@@ -31,6 +31,7 @@ import {
   INTERNAL__GRID_CLIENT_DEFAULT_ENABLE_PAGINATION,
   computeHashCodeForDataFetchManualTrigger,
   INTERNAL__GRID_CLIENT_DEFAULT_ENABLE_CACHING,
+  fetchDimensionalQueryRows,
 } from './DataCubeGridClientEngine.js';
 import { DataCubeSnapshotController } from '../../services/DataCubeSnapshotService.js';
 import type { DataCubeSnapshot } from '../../core/DataCubeSnapshot.js';
@@ -41,8 +42,13 @@ 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';
+import {
+  DataCubeClientModelOption,
+  DataCubeGridMode,
+} from '../../core/DataCubeQueryEngine.js';
 import { DataCubeEvent } from '../../../__lib__/DataCubeEvent.js';
+import { hydrateDataCubeDimensionalTree } from './DataCubeGridDimensionalTree.js';
+
 /**
  * This query editor state is responsible for syncing the internal state of ag-grid
  * server-side row model data source with the data cube query state. When new snapshot
@@ -271,6 +277,50 @@ export class DataCubeGridState extends DataCubeSnapshotController {
     }
   }
 
+  async configureDimensionGridClient(val: GridApi | undefined) {
+    this._client = val;
+    this.debouncedAutoResizeColumns = debounce(
+      () => val?.autoSizeAllColumns(),
+      100,
+    );
+    const latestSnapshot = this.getLatestSnapshot();
+
+    if (latestSnapshot) {
+      latestSnapshot.data.tree = hydrateDataCubeDimensionalTree(
+        DataCubeConfiguration.serialization.fromJson(
+          latestSnapshot.data.configuration,
+        ),
+      );
+      await this._applyDimensionalSnapshot(latestSnapshot);
+    }
+  }
+
+  async retrieveDrilldownData(data: CellDoubleClickedEvent) {
+    const latestSnapshot = guaranteeNonNullable(this.getLatestSnapshot());
+    latestSnapshot.data.tree = hydrateDataCubeDimensionalTree(
+      DataCubeConfiguration.serialization.fromJson(
+        latestSnapshot.data.configuration,
+      ),
+      data,
+      latestSnapshot.data.tree,
+    );
+    await this._applyDimensionalSnapshot(latestSnapshot);
+  }
+
+  private async _applyDimensionalSnapshot(snapshot: DataCubeSnapshot) {
+    //TODO: only trigger when there is an actual change in tree
+    const result = await fetchDimensionalQueryRows(snapshot, this._view);
+    this._client?.setGridOption(
+      DataCubeClientModelOption.ROW_DATA,
+      result.rowData,
+    );
+    this._client?.setGridOption(
+      DataCubeClientModelOption.COLUMN_DEFS,
+      result.columnDefs,
+    );
+    this.publishSnapshot(snapshot);
+  }
+
   override getSnapshotSubscriberName() {
     return 'grid';
   }

package/tsconfig.json

@@ -94,6 +94,7 @@
     "./src/stores/view/grid/DataCubeGridClientEngine.ts",
     "./src/stores/view/grid/DataCubeGridClientExportEngine.ts",
     "./src/stores/view/grid/DataCubeGridControllerState.ts",
+    "./src/stores/view/grid/DataCubeGridDimensionalTree.ts",
     "./src/stores/view/grid/DataCubeGridQueryBuilder.ts",
     "./src/stores/view/grid/DataCubeGridSnapshotBuilder.ts",
     "./src/stores/view/grid/DataCubeGridState.ts",