@finos/legend-data-cube 0.1.31 → 0.2.0

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

@@ -226,13 +226,14 @@ export class DataCubeEditorDimensionsPanelState
         name: dimension.name,
         columns: dimension.columns.map((column) => column.name),
       }));
+      newSnapshot.data.configuration = {
+        ...newSnapshot.data.configuration,
+        dimensions: DataCubeDimensionsConfiguration.serialization.toJson(
+          dimensionsConfiguration,
+        ),
+      };
+    } else {
+      newSnapshot = baseSnapshot;
     }
-
-    newSnapshot.data.configuration = {
-      ...newSnapshot.data.configuration,
-      dimensions: DataCubeDimensionsConfiguration.serialization.toJson(
-        dimensionsConfiguration,
-      ),
-    };
   }
 }

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

@@ -25,6 +25,7 @@ import {
   IllegalStateError,
   assertErrorThrown,
   guaranteeNonNullable,
+  guaranteeType,
   hashObject,
   isBoolean,
   isNonNullable,
@@ -35,11 +36,13 @@ import {
   PRIMITIVE_TYPE,
   PureClientVersion,
   type TabularDataSet,
+  type TDSRow,
 } from '@finos/legend-graph';
 import { makeObservable, observable, runInAction } from 'mobx';
-import type {
+import {
   DataCubeConfiguration,
-  DataCubeConfigurationColorKey,
+  type DataCubeConfigurationColorKey,
+  type DataCubeDimensionConfiguration,
 } from '../../core/model/DataCubeConfiguration.js';
 import { type DataCubeSnapshot } from '../../core/DataCubeSnapshot.js';
 import { _findCol, _sortByColName } from '../../core/model/DataCubeColumn.js';
@@ -47,7 +50,10 @@ import { isPivotResultColumnName } from '../../core/DataCubeQueryEngine.js';
 import { buildSnapshotFromGridState } from './DataCubeGridSnapshotBuilder.js';
 import { AlertType } from '../../services/DataCubeAlertService.js';
 import type { DataCubeViewState } from '../DataCubeViewState.js';
-import { buildGridDataFetchExecutableQuery } from './DataCubeGridQueryBuilder.js';
+import {
+  buildDimensionalGridDataFetchExecutableQuery,
+  buildGridDataFetchExecutableQuery,
+} from './DataCubeGridQueryBuilder.js';
 import { DataCubeSettingKey } from '../../../__lib__/DataCubeSetting.js';
 import { DEFAULT_ALERT_WINDOW_CONFIG } from '../../services/DataCubeLayoutService.js';
 import {
@@ -57,8 +63,22 @@ import {
 import { _lambda } from '../../core/DataCubeQueryBuilderUtils.js';
 import { sum } from 'mathjs';
 import { DataCubeEvent } from '../../../__lib__/DataCubeEvent.js';
-
-type DataCubeGridClientCellValue = string | number | boolean | null | undefined;
+import { generateColumnDefsForDimensions } from './DataCubeGridConfigurationBuilder.js';
+import {
+  DataCubeDimensionalMetadata,
+  generateDimensionalPaths,
+  type DataCubeDimensionalNode,
+  type DataCubeDimensionalGroupByNode,
+  DIMENSIONAL_L0_COLUMN,
+} from './DataCubeGridDimensionalTree.js';
+
+type DataCubeGridClientCellValue =
+  | string
+  | number
+  | boolean
+  | Map<string, DataCubeDimensionalMetadata>
+  | null
+  | undefined;
 type DataCubeGridClientRowData = {
   [key: string]: DataCubeGridClientCellValue;
 };
@@ -259,6 +279,136 @@ function buildRowData(
   });
 }
 
+function buildDimensionalRowData(
+  result: TabularDataSet,
+  snapshot: DataCubeSnapshot,
+  dimensionalNodes: DataCubeDimensionalNode[],
+  rowData: DataCubeGridClientRowData[],
+  dimensions: DataCubeDimensionConfiguration[],
+): DataCubeGridClientRowData[] {
+  const newRows = result.rows.map((rawRow) =>
+    _createClientRow(rawRow, result.columns, dimensionalNodes, dimensions),
+  );
+
+  const updated = [...rowData];
+  for (const newRow of newRows) {
+    const insertIndex = _findInsertIndex(newRow, updated, dimensionalNodes);
+    updated.splice(insertIndex, 0, newRow);
+  }
+
+  return updated;
+}
+
+function _createClientRow(
+  rawRow: TDSRow,
+  columns: string[],
+  nodes: DataCubeDimensionalNode[],
+  configs: DataCubeDimensionConfiguration[],
+): DataCubeGridClientRowData {
+  const row: DataCubeGridClientRowData = {};
+  rawRow.values.forEach((value, i) => {
+    row[guaranteeNonNullable(columns[i])] = isBoolean(value)
+      ? String(value)
+      : isNonNullable(value)
+        ? value
+        : INTERNAL__GRID_CLIENT_MISSING_VALUE;
+  });
+
+  const metadata = new Map<string, DataCubeDimensionalMetadata>();
+  for (const node of nodes) {
+    const config = guaranteeNonNullable(
+      configs.find((d) => d.name === node.dimension),
+    );
+    metadata.set(
+      node.dimension,
+      new DataCubeDimensionalMetadata(
+        node.column,
+        config.columns.indexOf(node.column),
+        node.groupByNodes,
+      ),
+    );
+  }
+  row.metadata = metadata;
+  return row;
+}
+
+function _findInsertIndex(
+  newRow: DataCubeGridClientRowData,
+  existing: DataCubeGridClientRowData[],
+  dimensionalNodes: DataCubeDimensionalNode[],
+): number {
+  const metadata = guaranteeType(
+    newRow.metadata,
+    Map<string, DataCubeDimensionalMetadata>,
+  );
+  const groupByNodes = [...metadata.values()].flatMap((m) => m.groupByNodes);
+  const dimensions = dimensionalNodes.map((d) => d.dimension);
+  const latest = _latestGroupByFilters(groupByNodes);
+
+  for (let i = existing.length - 1; i >= 0; i--) {
+    const existingRow = guaranteeNonNullable(existing[i]);
+    if (
+      _isParentRow(existingRow, groupByNodes.length, newRow, latest, dimensions)
+    ) {
+      return i + 1;
+    }
+  }
+
+  return existing.length;
+}
+
+function _isParentRow(
+  existing: DataCubeGridClientRowData,
+  groupByCount: number,
+  newRow: DataCubeGridClientRowData,
+  filters: DataCubeDimensionalGroupByNode[],
+  dimensions: string[],
+): boolean {
+  if (groupByCount === 0) {
+    let allCount = 0;
+    const match = dimensions.every((d) => {
+      const e = existing[d],
+        n = newRow[d];
+      if (e === null || n === null) {
+        return false;
+      }
+      if (String(e) === DIMENSIONAL_L0_COLUMN) {
+        allCount++;
+        return true;
+      }
+      return String(e) === String(n);
+    });
+    return match && allCount >= 1 && allCount < dimensions.length;
+  }
+
+  return dimensions.every((d) => {
+    const filter = filters.find((f) => f.dimension === d);
+    const e = existing[d],
+      n = newRow[d];
+    if (e === null || n === null) {
+      return false;
+    }
+    if (filter) {
+      return (
+        String(e) === String(filter.filter) ||
+        String(e) === String(n) ||
+        String(e) === DIMENSIONAL_L0_COLUMN
+      );
+    }
+    return String(e) === String(n);
+  });
+}
+
+function _latestGroupByFilters(
+  nodes: DataCubeDimensionalGroupByNode[],
+): DataCubeDimensionalGroupByNode[] {
+  const map = new Map<string, DataCubeDimensionalGroupByNode>();
+  for (const node of nodes) {
+    map.set(node.dimension, node);
+  }
+  return [...map.values()];
+}
+
 async function getCastColumns(
   currentSnapshot: DataCubeSnapshot,
   view: DataCubeViewState,
@@ -302,6 +452,103 @@ async function getCastColumns(
   });
 }
 
+export async function fetchDimensionalQueryRows(
+  snapshot: DataCubeSnapshot,
+  view: DataCubeViewState,
+) {
+  const task = view.taskService.newTask('Fetching data...');
+
+  let rowData: DataCubeGridClientRowData[] = [];
+
+  const configuration = DataCubeConfiguration.serialization.fromJson(
+    snapshot.data.configuration,
+  );
+
+  // upgrade here by not shooting extra sqls
+  const paths = generateDimensionalPaths(
+    guaranteeNonNullable(snapshot.data.tree),
+  );
+
+  for (const path of paths) {
+    const executableQuery = buildDimensionalGridDataFetchExecutableQuery(
+      snapshot,
+      view.source,
+      view.engine,
+      path,
+    );
+    let result: DataCubeExecutionResult;
+
+    try {
+      result = await view.engine.executeQuery(
+        _lambda([], [executableQuery]),
+        view.source,
+        {
+          debug: view.settingService.getBooleanValue(
+            DataCubeSettingKey.DEBUGGER__ENABLE_DEBUG_MODE,
+          ),
+          clientVersion: view.settingService.getBooleanValue(
+            DataCubeSettingKey.DEBUGGER__USE_DEV_CLIENT_PROTOCOL_VERSION,
+          )
+            ? PureClientVersion.VX_X_X
+            : undefined,
+        },
+      );
+
+      rowData = buildDimensionalRowData(
+        result.result.result,
+        snapshot,
+        path,
+        rowData,
+        configuration.dimensions.dimensions,
+      );
+
+      view.taskService.endTask(task);
+    } catch (error) {
+      assertErrorThrown(error);
+      if (error instanceof DataCubeExecutionError) {
+        view.alertService.alertExecutionError(error, {
+          message: `Data Fetch Failure: Can't execute query.`,
+          text: `Error: ${error.message}`,
+        });
+      } else {
+        view.alertService.alertError(error, {
+          message: `Data Fetch Failure: ${error.message}`,
+        });
+      }
+      view.taskService.endTask(task);
+      return {
+        rowData: [],
+        columnDefs: [],
+      };
+    }
+
+    if (
+      view.settingService.getBooleanValue(
+        DataCubeSettingKey.DEBUGGER__ENABLE_DEBUG_MODE,
+      )
+    ) {
+      view.engine.debugProcess(
+        `Execution`,
+        ['Query', result.executedQuery],
+        [
+          'Stats',
+          `${rowData.length} rows, ${result.result.result.columns.length} columns`,
+        ],
+        [
+          'SQL',
+          result.executedSQL ?? `-- Error: failed to extract executed SQL`,
+        ],
+        ['SQL Execution Time', result.executionTime],
+      );
+    }
+  }
+
+  return {
+    rowData: rowData,
+    columnDefs: generateColumnDefsForDimensions(snapshot, configuration),
+  };
+}
+
 export type DataCubeGridClientDataFetchRequest = {
   startRow: number | undefined;
   endRow: number | undefined;

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

@@ -69,10 +69,12 @@ import {
   isNumber,
   isValidUrl,
   assertTrue,
+  guaranteeNonNullable,
 } from '@finos/legend-shared';
-import type {
+import {
   DataCubeColumnConfiguration,
-  DataCubeConfiguration,
+  type DataCubeConfiguration,
+  type DataCubeDimensionConfiguration,
 } from '../../core/model/DataCubeConfiguration.js';
 import {
   DataCubeColumnDataType,
@@ -91,6 +93,7 @@ import {
 import type { CustomLoadingCellRendererProps } from 'ag-grid-react';
 import { DataCubeIcon } from '@finos/legend-art';
 import type { DataCubeViewState } from '../DataCubeViewState.js';
+import type { DataCubeDimensionalMetadata } from './DataCubeGridDimensionalTree.js';
 
 // --------------------------------- UTILITIES ---------------------------------
 
@@ -181,6 +184,51 @@ function getCellRenderer(columnData: ColumnData) {
   return null;
 }
 
+function getDimensionCellRenderer(
+  columnData: ColumnData,
+  dimensions: DataCubeDimensionConfiguration[],
+) {
+  const { column } = columnData;
+  const dataType = getDataType(column.type);
+  if (
+    dataType === DataCubeColumnDataType.TEXT &&
+    dimensions.filter((dim) => dim.name === column.name).length === 1
+  ) {
+    return function ValueRenderer(params: ICellRendererParams) {
+      const level = guaranteeNonNullable(
+        (params.data.metadata as Map<string, DataCubeDimensionalMetadata>).get(
+          column.name,
+        )?.level,
+      );
+      const indent = '\u00A0'.repeat((level + 1) * 2); // 4 non-breaking spaces per level
+      return `${indent}${params.value}`;
+    };
+  } else if (dataType === DataCubeColumnDataType.TEXT && column.displayAsLink) {
+    return function LinkRenderer(params: ICellRendererParams) {
+      const isUrl = isValidUrl(params.value);
+      if (!isUrl) {
+        return params.value;
+      }
+      const url = params.value as string;
+      const label = getQueryParameterValue(
+        column.linkLabelParameter ?? DEFAULT_URL_LABEL_QUERY_PARAM,
+        getQueryParameters(url, true),
+      );
+      return (
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          className="text-blue-600 underline"
+        >
+          {label ?? url}
+        </a>
+      );
+    };
+  }
+  return null;
+}
+
 function _displaySpec(columnData: ColumnData) {
   const { name, snapshot, column, configuration } = columnData;
   const dataType = getDataType(column.type);
@@ -341,7 +389,13 @@ function _displaySpec(columnData: ColumnData) {
       params.value !== INTERNAL__GRID_CLIENT_MISSING_VALUE
         ? `Value = ${params.value === '' ? "''" : params.value === true ? 'TRUE' : params.value === false ? 'FALSE' : params.value}`
         : `Missing Value`,
-    cellRenderer: getCellRenderer(columnData),
+    cellRenderer:
+      configuration.dimensions.dimensions.length > 0
+        ? getDimensionCellRenderer(
+            columnData,
+            configuration.dimensions.dimensions,
+          )
+        : getCellRenderer(columnData),
   } satisfies ColDef;
 }
 
@@ -631,6 +685,121 @@ export function generateBaseGridOptions(view: DataCubeViewState): GridOptions {
   };
 }
 
+export function generateDimensionalBaseGridOptions(
+  view: DataCubeViewState,
+): GridOptions {
+  const grid = view.grid;
+
+  return {
+    // -------------------------------------- README --------------------------------------
+    // NOTE: we observe performance degradataion when configuring the grid via React component
+    // props when the options is non-static, i.e. changed when the query configuration changes.
+    // As such, we must ONLY ADD STATIC CONFIGURATION HERE, and dynamic configuration should be
+    // programatically updated when the query is modified.
+    //
+    //
+    // -------------------------------------- DISPLAY --------------------------------------
+    rowHeight: INTERNAL__GRID_CLIENT_ROW_HEIGHT,
+    headerHeight: INTERNAL__GRID_CLIENT_HEADER_HEIGHT,
+    noRowsOverlayComponent: () => (
+      <div className="flex items-center border-[1.5px] border-neutral-300 p-2 font-medium text-neutral-400">
+        <div>
+          <DataCubeIcon.WarningCircle className="mr-1 stroke-2 text-lg" />
+        </div>
+        0 rows
+      </div>
+    ),
+    loadingOverlayComponent: () => (
+      <div className="flex items-center border-[1.5px] border-neutral-300 p-2 font-medium text-neutral-400">
+        <div>
+          <DataCubeIcon.Loader className="mr-1 animate-spin stroke-2 text-lg" />
+        </div>
+        Loading...
+      </div>
+    ),
+    // Show cursor position when scrolling
+    onBodyScroll: (event) => {
+      const rowCount = event.api.getDisplayedRowCount();
+      const range = event.api.getVerticalPixelRange();
+      const start = Math.max(
+        1,
+        Math.ceil(range.top / INTERNAL__GRID_CLIENT_ROW_HEIGHT) + 1,
+      );
+      const end = Math.min(
+        rowCount,
+        Math.floor(range.bottom / INTERNAL__GRID_CLIENT_ROW_HEIGHT),
+      );
+      grid.setScrollHintText(`${start}-${end}/${rowCount}`);
+      event.api.hidePopupMenu(); // hide context-menu while scrolling
+    },
+    onBodyScrollEnd: () => grid.setScrollHintText(undefined),
+    // -------------------------------------- CONTEXT MENU --------------------------------------
+    // figure out the 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, 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) {
+        const menuElement = document.querySelector(
+          `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .ag-popup .ag-menu`,
+        ) as HTMLElement | undefined;
+        if (menuElement) {
+          menuElement.style.display = 'none';
+        }
+        event.api.hidePopupMenu();
+      }
+    },
+    // -------------------------------------- COLUMN SIZING --------------------------------------
+    autoSizePadding: INTERNAL__GRID_CLIENT_AUTO_RESIZE_PADDING,
+    autoSizeStrategy: {
+      type: 'fitCellContents',
+    },
+    defaultColDef: {
+      sortable: false,
+    },
+    // -------------------------------------- TOOLTIP --------------------------------------
+    tooltipShowDelay: INTERNAL__GRID_CLIENT_TOOLTIP_SHOW_DELAY,
+    // though this is a nice behavior to have enabled, ag-grid not dismissing tooltip
+    // when context-menu is triggered makes it an undesirable interaction.
+    tooltipInteraction: false,
+    // -------------------------------------- COLUMN MOVING --------------------------------------
+    suppressDragLeaveHidesColumns: true, // disable this since it's quite easy to accidentally hide columns while moving
+    // -------------------------------------- SELECTION --------------------------------------
+    cellSelection: true,
+    // -------------------------------------- SIDEBAR --------------------------------------
+    sideBar: {
+      toolPanels: [
+        {
+          id: 'columns',
+          labelDefault: 'Columns',
+          labelKey: 'columns',
+          iconKey: 'columns',
+          toolPanel: 'agColumnsToolPanel',
+          minWidth: INTERNAL__GRID_CLIENT_SIDE_BAR_WIDTH,
+          width: INTERNAL__GRID_CLIENT_SIDE_BAR_WIDTH,
+          toolPanelParams: {
+            suppressValues: true,
+            suppressPivotMode: true,
+            suppressRowGroups: true,
+          },
+        },
+      ],
+      position: 'right',
+    },
+    allowDragFromColumnsToolPanel: true,
+    // -------------------------------------- PERFORMANCE --------------------------------------
+    animateRows: false, // improve performance
+    suppressColumnMoveAnimation: true, // improve performance
+  };
+}
+
 function generatePivotResultColumnHeaderTooltip(
   id: string,
   snapshot: DataCubeSnapshot,
@@ -922,6 +1091,78 @@ export function generateColumnDefs(
   return columnDefs;
 }
 
+export function generateColumnDefsForDimensions(
+  snapshot: DataCubeSnapshot,
+  configuration: DataCubeConfiguration,
+) {
+  // NOTE: only show columns which are fetched in select() or are dimensions as we
+  // can't solely rely on column selection because of certain restrictions
+  // from ag-grid, e.g. in the case of row grouping tree column: the columns
+  // which are grouped must be present in the column definitions, so even
+  // when some of these might not be selected explicitly by the users, they
+  // must still be included in the column definitions, and made hidden instead.
+  const dimensionColNames = configuration.dimensions.dimensions.flatMap(
+    (col) => col.columns,
+  );
+  const dimCols = configuration.dimensions.dimensions.map(
+    (col) => new DataCubeColumnConfiguration(col.name, 'String'),
+  );
+
+  let columns = configuration.columns.filter(
+    (col) =>
+      _findCol(snapshot.data.selectColumns, col.name) ??
+      _findCol(snapshot.data.groupExtendedColumns, col.name),
+  );
+  columns = columns.filter((col) => !dimensionColNames.includes(col.name));
+  columns.unshift(...dimCols);
+
+  const columnDefs = [
+    ...(configuration.showRootAggregation
+      ? [
+          {
+            colId: INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
+            headerName: 'Root',
+            field: INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
+            hide: true,
+            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,
+
+            suppressColumnsToolPanel: true,
+            rowGroup: true,
+            rowGroupIndex: 0,
+          } satisfies ColDef,
+        ]
+      : []),
+    ...columns.map((column) => {
+      const columnData = {
+        name: column.name,
+        snapshot,
+        column,
+        configuration,
+      };
+      return {
+        headerName: column.displayName ?? column.name,
+        headerTooltip: `Column = ${
+          column.displayName
+            ? `${column.displayName} (${column.name})`
+            : column.name
+        }`,
+        suppressSpanHeaderHeight: true,
+        colId: column.name,
+        field: column.name,
+        menuTabs: [],
+
+        ..._displaySpec(columnData),
+        ..._sizeSpec(columnData),
+      } satisfies ColDef;
+    }),
+  ] satisfies (ColDef | ColGroupDef)[];
+
+  return columnDefs;
+}
+
 export function generateGridOptionsFromSnapshot(
   snapshot: DataCubeSnapshot,
   configuration: DataCubeConfiguration,

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

@@ -38,6 +38,7 @@ import {
   DataCubeQuerySortDirection,
   isPivotResultColumnName,
   getPivotResultColumnBaseColumnName,
+  isDimensionalGridMode,
 } from '../../core/DataCubeQueryEngine.js';
 import type {
   DefaultMenuItem,
@@ -46,7 +47,10 @@ import type {
   MenuItemDef,
 } from 'ag-grid-community';
 import type { DataCubeViewState } from '../DataCubeViewState.js';
-import { generateMenuBuilder } from './DataCubeGridMenuBuilder.js';
+import {
+  generateDimensionalMenuBuilder,
+  generateMenuBuilder,
+} from './DataCubeGridMenuBuilder.js';
 import {
   buildFilterEditorTree,
   buildFilterSnapshot,
@@ -427,7 +431,11 @@ export class DataCubeGridControllerState extends DataCubeSnapshotController {
 
     this.sortColumns = snapshot.data.sortColumns;
 
-    this.menuBuilder = generateMenuBuilder(this);
+    this.menuBuilder = isDimensionalGridMode(
+      this.view.info.configuration.gridMode,
+    )
+      ? generateDimensionalMenuBuilder(this)
+      : generateMenuBuilder(this);
   }
 
   private propagateChanges(baseSnapshot: DataCubeSnapshot) {