@finos/legend-data-cube 0.1.32 → 0.2.0

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",