@finos/legend-data-cube 0.1.11 → 0.1.13

package/src/components/view/grid/DataCubeGrid.tsx

@@ -34,6 +34,7 @@ import {
   DataCubeFontCase,
   DataCubeFontFormatUnderlineVariant,
   DataCubeFontTextAlignment,
+  DataCubeGridMode,
   DEFAULT_ROW_BACKGROUND_COLOR,
   DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR,
 } from '../../../stores/core/DataCubeQueryEngine.js';
@@ -46,6 +47,7 @@ import { generateBaseGridOptions } from '../../../stores/view/grid/DataCubeGridC
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 import { FormBadge_WIP } from '../../core/DataCubeFormUtils.js';
 import { useDataCube } from '../../DataCubeProvider.js';
+import { DataCubeMultidimensionalGrid } from './DataCubeMultidimensionalGrid.js';
 
 // NOTE: This is a workaround to prevent ag-grid license key check from flooding the console screen
 // with its stack trace in Chrome.
@@ -92,34 +94,29 @@ function backgroundColorStyle(
 }
 
 export const DataCubeGridStyleController = observer(
-  (props: { view: DataCubeViewState }) => {
-    const { view } = props;
-    const grid = view.grid;
-    const configuration = grid.queryConfiguration;
+  (props: { configuration: DataCubeConfiguration }) => {
+    const { configuration } = props;
 
     return (
       <Global
         styles={css`
           .${INTERNAL__GridClientUtilityCssClassName.ROOT} {
-            --ag-odd-row-background-color: ${grid.queryConfiguration
-              .alternateRowsStandardMode &&
-            !grid.queryConfiguration.alternateRows
+            --ag-odd-row-background-color: ${configuration.alternateRowsStandardMode &&
+            !configuration.alternateRows
               ? DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR
               : DEFAULT_ROW_BACKGROUND_COLOR};
-            --ag-cell-horizontal-border: ${grid.queryConfiguration
-              .showVerticalGridLines
+            --ag-cell-horizontal-border: ${configuration.showVerticalGridLines
               ? `1px solid
-            ${grid.queryConfiguration.gridLineColor}`
+            ${configuration.gridLineColor}`
               : 'none'};
-            --ag-row-border-color: ${grid.queryConfiguration
-              .showHorizontalGridLines
-              ? grid.queryConfiguration.gridLineColor
+            --ag-row-border-color: ${configuration.showHorizontalGridLines
+              ? configuration.gridLineColor
               : 'transparent'};
           }
           .${INTERNAL__GridClientUtilityCssClassName.ROOT}
             .${INTERNAL__GridClientUtilityCssClassName.HIGHLIGHT_ROW} {
-            background-color: ${grid.queryConfiguration.alternateRows
-              ? grid.queryConfiguration.alternateRowsColor
+            background-color: ${configuration.alternateRows
+              ? configuration.alternateRowsColor
               : DEFAULT_ROW_BACKGROUND_COLOR};
           }
           ${[
@@ -271,7 +268,7 @@ const DataCubeGridStatusBar = observer((props: { view: DataCubeViewState }) => {
             : ''}
         </div>
         {grid.rowLimit !== undefined &&
-          grid.queryConfiguration.showWarningForTruncatedResult && (
+          grid.configuration.showWarningForTruncatedResult && (
             // TODO: if we want to properly warn if the data has been truncated due to row limit,
             // this would require us to fetch n+1 rows when limit=n
             // This is feature is not difficult to implement, but it would be implemented most cleanly
@@ -377,51 +374,71 @@ const DataCubeGridStatusBar = observer((props: { view: DataCubeViewState }) => {
   );
 });
 
-const DataCubeGridClient = observer((props: { view: DataCubeViewState }) => {
-  const { view } = props;
-  const grid = view.grid;
+const DataCubeStandardGridClient = observer(
+  (props: { view: DataCubeViewState }) => {
+    const { view } = props;
+    const grid = view.grid;
 
-  // eslint-disable-next-line no-process-env
-  if (process.env.NODE_ENV !== 'production' && !grid.isClientConfigured) {
-    // eslint-disable-next-line no-console
-    console.error = (message?: unknown, ...agrs: unknown[]) => {
-      console.debug(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
-    };
-  }
+    // eslint-disable-next-line no-process-env
+    if (process.env.NODE_ENV !== 'production' && !grid.isClientConfigured) {
+      // eslint-disable-next-line no-console
+      console.error = (message?: unknown, ...agrs: unknown[]) => {
+        console.debug(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
+      };
+    }
 
-  return (
-    <div className="relative h-[calc(100%_-_20px)] w-full">
-      <AgGridReact
-        theme="legacy"
-        className="data-cube-grid ag-theme-quartz"
-        rowModelType="serverSide"
-        serverSideDatasource={grid.clientDataSource}
-        context={{
-          view,
-        }}
-        onGridReady={(params) => {
-          grid.configureClient(params.api);
-          // eslint-disable-next-line no-process-env
-          if (process.env.NODE_ENV !== 'production') {
-            // restore original error logging
-            console.error = __INTERNAL__original_console_error; // eslint-disable-line no-console
-          }
-        }}
-        modules={[AllCommunityModule, AllEnterpriseModule]}
-        {...generateBaseGridOptions(view)}
-      />
-    </div>
-  );
-});
+    return (
+      <div className="relative h-[calc(100%_-_20px)] w-full">
+        <AgGridReact
+          theme="legacy"
+          className="data-cube-grid ag-theme-quartz"
+          rowModelType="serverSide"
+          serverSideDatasource={grid.clientDataSource}
+          context={{
+            view,
+          }}
+          onGridReady={(params) => {
+            grid
+              .configureClient(params.api)
+              .catch((error) => view.alertService.alertUnhandledError(error));
+            // eslint-disable-next-line no-process-env
+            if (process.env.NODE_ENV !== 'production') {
+              // restore original error logging
+              console.error = __INTERNAL__original_console_error; // eslint-disable-line no-console
+            }
+          }}
+          modules={[AllCommunityModule, AllEnterpriseModule]}
+          {...generateBaseGridOptions(view)}
+        />
+      </div>
+    );
+  },
+);
 
-export const DataCubeGrid = observer((props: { view: DataCubeViewState }) => {
+const DataCubeStandardGrid = observer((props: { view: DataCubeViewState }) => {
   const { view } = props;
+  const configuration = view.grid.configuration;
 
   return (
     <div className="h-[calc(100%_-_48px)] w-full">
-      <DataCubeGridStyleController view={view} />
-      <DataCubeGridClient view={view} />
+      <DataCubeGridStyleController configuration={configuration} />
+      <DataCubeStandardGridClient view={view} />
       <DataCubeGridStatusBar view={view} />
     </div>
   );
 });
+
+export const DataCubeGrid = observer((props: { view: DataCubeViewState }) => {
+  const { view } = props;
+
+  switch (view.info.configuration.gridMode) {
+    case DataCubeGridMode.MULTIDIMENSIONAL:
+      return <DataCubeMultidimensionalGrid view={view} />;
+    case DataCubeGridMode.STANDARD:
+      return <DataCubeStandardGrid view={view} />;
+    default:
+      return (
+        <div className="border-t-1 border-b-1 h-[calc(100%_-_48px)] w-full border border-neutral-200 bg-neutral-50" />
+      );
+  }
+});

package/src/components/view/grid/DataCubeMultidimensionalGrid.tsx

@@ -19,6 +19,8 @@ import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.j
 
 export const DataCubeMultidimensionalGrid = observer(
   (props: { view: DataCubeViewState }) => {
-    return null;
+    return (
+      <div className="border-t-1 border-b-1 h-[calc(100%_-_48px)] w-full border border-neutral-200 bg-neutral-50" />
+    );
   },
 );

package/src/index.tsx

@@ -45,8 +45,11 @@ export {
 export * from './stores/services/DataCubeTaskService.js';
 export * from './stores/services/DataCubeLogService.js';
 export * from './stores/services/DataCubeAlertService.js';
+export * from './components/view/extend/DataCubeCodeEditor.js';
+export * from './components/view/extend/DataCubeCodeEditorState.js';
 export * from './components/core/DataCubeAlert.js';
 export * from './components/core/DataCubeLayout.js';
+export { INTERNAL__MonacoEditorWidgetsRoot } from './components/core/DataCubePureCodeEditorUtils.js';
 
 export { useDataCube } from './components/DataCubeProvider.js';
 export { type DataCubeAPI } from './stores/DataCubeAPI.js';

package/src/stores/DataCubeAPI.ts

@@ -95,7 +95,9 @@ export class INTERNAL__DataCubeAPI implements DataCubeAPI {
 
   retryFailedDataFetches() {
     this._runTaskForEachView((view) => {
-      view.grid.client.retryServerSideLoads();
+      if (view.grid.isClientConfigured) {
+        view.grid.client.retryServerSideLoads();
+      }
     });
   }
 

package/src/stores/core/DataCubeEngine.tsx

@@ -253,7 +253,7 @@ export abstract class DataCubeEngine {
   abstract getQueryTypeahead(
     code: string,
     baseQuery: V1_Lambda,
-    source: DataCubeSource,
+    context: DataCubeSource | PlainObject,
   ): Promise<CompletionItem[]>;
 
   abstract getQueryRelationReturnType(

package/src/stores/core/DataCubeQueryEngine.ts

@@ -268,6 +268,11 @@ export enum DataCubeColumnDataType {
   TIME = 'Time',
 }
 
+export enum DataCubeGridMode {
+  STANDARD = 'Standard',
+  MULTIDIMENSIONAL = 'Multidimensional',
+}
+
 export const PIVOT_COLUMN_NAME_VALUE_SEPARATOR = '__|__';
 
 export const TREE_COLUMN_VALUE_SEPARATOR = '__/__';
@@ -291,6 +296,7 @@ export const DEFAULT_COLUMN_WIDTH = 300;
 export const DEFAULT_COLUMN_MIN_WIDTH = 50;
 export const DEFAULT_COLUMN_MAX_WIDTH = undefined;
 
+export const DEFAULT_GRID_MODE = DataCubeGridMode.STANDARD;
 export const DEFAULT_FONT_FAMILY = DataCubeFont.ROBOTO;
 export const DEFAULT_FONT_SIZE = 11;
 export const DEFAULT_FONT_BOLD = false;

package/src/stores/core/DataCubeSnapshot.ts

@@ -80,8 +80,8 @@ export type DataCubeSnapshotData = {
   leafExtendedColumns: DataCubeSnapshotExtendedColumn[];
   filter?: DataCubeSnapshotFilter | undefined;
   selectColumns: DataCubeColumn[];
-  groupBy?: DataCubeSnapshotGroupBy | undefined;
   pivot?: DataCubeSnapshotPivot | undefined;
+  groupBy?: DataCubeSnapshotGroupBy | undefined;
   groupExtendedColumns: DataCubeSnapshotExtendedColumn[];
   sortColumns: DataCubeSnapshotSortColumn[];
   limit: number | undefined;

package/src/stores/core/model/AdhocQueryDataCubeSource.ts

@@ -25,6 +25,7 @@ import type { V1_PureModelContext } from '@finos/legend-graph';
 
 export class AdhocQueryDataCubeSource extends DataCubeSource {
   runtime!: string;
+  mapping?: string;
   model!: PlainObject<V1_PureModelContext>;
 }
 
@@ -40,6 +41,7 @@ export const ADHOC_FUNCTION_DATA_CUBE_SOURCE_TYPE = 'userDefinedFunction';
 export class RawAdhocQueryDataCubeSource {
   query!: string;
   runtime!: string;
+  mapping?: string;
   model!: PlainObject<V1_PureModelContext>;
 
   static readonly serialization = new SerializationFactory(
@@ -48,6 +50,7 @@ export class RawAdhocQueryDataCubeSource {
       model: raw(),
       query: primitive(),
       runtime: primitive(),
+      mapping: optional(primitive()),
     }),
   );
 }

package/src/stores/core/model/DataCubeConfiguration.ts

@@ -42,6 +42,7 @@ import {
   DEFAULT_TREE_COLUMN_SORT_DIRECTION,
   DEFAULT_REPORT_NAME,
   type DataCubeQuerySortDirection,
+  DEFAULT_GRID_MODE,
 } from '../DataCubeQueryEngine.js';
 import {
   SerializationFactory,
@@ -188,6 +189,30 @@ export class DataCubePivotLayoutConfiguration {
   }
 }
 
+export class DataCubeDimensionConfiguration {
+  name!: string;
+  columns: string[] = [];
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(DataCubeDimensionConfiguration, {
+      columns: list(primitive()),
+      name: primitive(),
+    }),
+  );
+}
+
+export class DataCubeDimensionsConfiguration {
+  dimensions: DataCubeDimensionConfiguration[] = [];
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(DataCubeDimensionsConfiguration, {
+      dimensions: list(
+        usingModelSchema(DataCubeDimensionConfiguration.serialization.schema),
+      ),
+    }),
+  );
+}
+
 export class DataCubeConfiguration {
   readonly uuid = uuid();
 
@@ -198,6 +223,7 @@ export class DataCubeConfiguration {
   showHorizontalGridLines = false;
   showVerticalGridLines = true;
   gridLineColor = DEFAULT_GRID_LINE_COLOR;
+  gridMode = DEFAULT_GRID_MODE;
 
   fontFamily = DEFAULT_FONT_FAMILY;
   fontSize = DEFAULT_FONT_SIZE;
@@ -234,6 +260,7 @@ export class DataCubeConfiguration {
   pivotStatisticColumnPlacement?: DataCubeColumnPinPlacement | undefined; // unspecified -> hide the column
 
   pivotLayout = new DataCubePivotLayoutConfiguration();
+  dimensions = new DataCubeDimensionsConfiguration();
 
   static readonly serialization = new SerializationFactory(
     createModelSchema(DataCubeConfiguration, {
@@ -247,6 +274,9 @@ export class DataCubeConfiguration {
       errorBackgroundColor: primitive(),
       errorForegroundColor: primitive(),
       description: optional(primitive()),
+      dimensions: usingModelSchema(
+        DataCubeDimensionsConfiguration.serialization.schema,
+      ),
       fontBold: primitive(),
       fontCase: optional(primitive()),
       fontFamily: primitive(),
@@ -255,6 +285,7 @@ export class DataCubeConfiguration {
       fontStrikethrough: primitive(),
       fontUnderline: optional(primitive()),
       gridLineColor: primitive(),
+      gridMode: primitive(),
       initialExpandLevel: optional(primitive()),
       name: primitive(),
       negativeBackgroundColor: primitive(),

package/src/stores/services/DataCubeSettingService.tsx

@@ -211,9 +211,11 @@ export class DataCubeSettingService {
         numericValueStep: 10,
         action: (api, newValue) =>
           (api as INTERNAL__DataCubeAPI)._runTaskForEachView((view) => {
-            view.grid.client.updateGridOptions({
-              rowBuffer: newValue,
-            });
+            if (view.grid.isClientConfigured) {
+              view.grid.client.updateGridOptions({
+                rowBuffer: newValue,
+              });
+            }
           }),
       } satisfies DataCubeSetting<number>,
       {
@@ -225,9 +227,11 @@ export class DataCubeSettingService {
         defaultValue: false,
         action: (api, newValue) =>
           (api as INTERNAL__DataCubeAPI)._runTaskForEachView((view) => {
-            view.grid.client.updateGridOptions({
-              purgeClosedRowNodes: newValue,
-            });
+            if (view.grid.isClientConfigured) {
+              view.grid.client.updateGridOptions({
+                purgeClosedRowNodes: newValue,
+              });
+            }
           }),
       } satisfies DataCubeSetting<boolean>,
       {

package/src/stores/view/DataCubeInfoState.ts

@@ -28,6 +28,7 @@ import { DataCubeConfiguration } from '../core/model/DataCubeConfiguration.js';
 export class DataCubeInfoState extends DataCubeSnapshotController {
   private readonly _view: DataCubeViewState;
 
+  configuration = new DataCubeConfiguration();
   name = '';
   // TODO: filter preview text
 
@@ -35,6 +36,8 @@ export class DataCubeInfoState extends DataCubeSnapshotController {
     super(view.engine, view.settingService, view.snapshotService);
 
     makeObservable(this, {
+      configuration: observable,
+
       name: observable,
 
       applySnapshot: action,
@@ -55,6 +58,7 @@ export class DataCubeInfoState extends DataCubeSnapshotController {
     const configuration = DataCubeConfiguration.serialization.fromJson(
       data.configuration,
     );
+    this.configuration = configuration;
 
     if (configuration.name !== this.name) {
       this.name = configuration.name;

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

@@ -19,13 +19,13 @@ import { type DataCubeSnapshot } from '../../core/DataCubeSnapshot.js';
 import { _findCol, _toCol } from '../../core/model/DataCubeColumn.js';
 import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
 import {
-  DataCubeEditorColumnSelectorColumnState,
-  DataCubeEditorColumnSelectorState,
-} from './DataCubeEditorColumnSelectorState.js';
+  DataCubeEditorColumnsSelectorColumnState,
+  DataCubeEditorColumnsSelectorState,
+} from './DataCubeEditorColumnsSelectorState.js';
 import type { DataCubeEditorState } from './DataCubeEditorState.js';
 import { type DataCubeConfiguration } from '../../core/model/DataCubeConfiguration.js';
 
-export class DataCubeEditorBasicColumnSelectorState extends DataCubeEditorColumnSelectorState<DataCubeEditorColumnSelectorColumnState> {
+export class DataCubeEditorBasicColumnsSelectorState extends DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorColumnState> {
   showHiddenColumns = false;
 
   constructor(
@@ -33,7 +33,7 @@ export class DataCubeEditorBasicColumnSelectorState extends DataCubeEditorColumn
     options?: {
       onChange?:
         | ((
-            select: DataCubeEditorColumnSelectorState<DataCubeEditorColumnSelectorColumnState>,
+            select: DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorColumnState>,
           ) => void)
         | undefined;
     },
@@ -49,8 +49,8 @@ export class DataCubeEditorBasicColumnSelectorState extends DataCubeEditorColumn
     });
   }
 
-  override cloneColumn(column: DataCubeEditorColumnSelectorColumnState) {
-    return new DataCubeEditorColumnSelectorColumnState(
+  override cloneColumn(column: DataCubeEditorColumnsSelectorColumnState) {
+    return new DataCubeEditorColumnsSelectorColumnState(
       column.name,
       column.type,
     );
@@ -62,11 +62,11 @@ export class DataCubeEditorBasicColumnSelectorState extends DataCubeEditorColumn
       ...this._editor.leafExtendColumns,
       ...this._editor.groupExtendColumns,
     ].map(
-      (col) => new DataCubeEditorColumnSelectorColumnState(col.name, col.type),
+      (col) => new DataCubeEditorColumnsSelectorColumnState(col.name, col.type),
     );
   }
 
-  override get availableColumnsForDisplay(): DataCubeEditorColumnSelectorColumnState[] {
+  override get availableColumnsForDisplay(): DataCubeEditorColumnsSelectorColumnState[] {
     return super.availableColumnsForDisplay.filter(
       (column) =>
         this.showHiddenColumns ||
@@ -75,7 +75,7 @@ export class DataCubeEditorBasicColumnSelectorState extends DataCubeEditorColumn
     );
   }
 
-  override get selectedColumnsForDisplay(): DataCubeEditorColumnSelectorColumnState[] {
+  override get selectedColumnsForDisplay(): DataCubeEditorColumnsSelectorColumnState[] {
     return super.selectedColumnsForDisplay.filter(
       (column) =>
         this.showHiddenColumns ||
@@ -104,7 +104,7 @@ export class DataCubeEditorColumnsPanelState
 {
   private readonly _editor!: DataCubeEditorState;
 
-  readonly selector!: DataCubeEditorBasicColumnSelectorState;
+  readonly selector!: DataCubeEditorBasicColumnsSelectorState;
 
   constructor(editor: DataCubeEditorState) {
     makeObservable(this, {
@@ -112,7 +112,7 @@ export class DataCubeEditorColumnsPanelState
     });
 
     this._editor = editor;
-    this.selector = new DataCubeEditorBasicColumnSelectorState(editor, {
+    this.selector = new DataCubeEditorBasicColumnsSelectorState(editor, {
       onChange: (selector) => {
         const selectedColumnConfigurations = selector.selectedColumns.map(
           (col) =>
@@ -159,7 +159,7 @@ export class DataCubeEditorColumnsPanelState
         .filter((col) => col.isSelected)
         .map((col) => {
           const column = this.selector.getColumn(col.name);
-          return new DataCubeEditorColumnSelectorColumnState(
+          return new DataCubeEditorColumnsSelectorColumnState(
             column.name,
             column.type,
           );

package/src/stores/view/editor/{DataCubeEditorColumnSelectorState.ts → DataCubeEditorColumnsSelectorState.ts}

@@ -20,7 +20,7 @@ import { guaranteeNonNullable } from '@finos/legend-shared';
 import { _findCol, _sortByColName } from '../../core/model/DataCubeColumn.js';
 import type { DataCubeQuerySortDirection } from '../../core/DataCubeQueryEngine.js';
 
-export class DataCubeEditorColumnSelectorColumnState {
+export class DataCubeEditorColumnsSelectorColumnState {
   readonly name: string;
   readonly type: string;
 
@@ -30,8 +30,8 @@ export class DataCubeEditorColumnSelectorColumnState {
   }
 }
 
-export abstract class DataCubeEditorColumnSelectorState<
-  T extends DataCubeEditorColumnSelectorColumnState,
+export abstract class DataCubeEditorColumnsSelectorState<
+  T extends DataCubeEditorColumnsSelectorColumnState,
 > {
   protected readonly _editor!: DataCubeEditorState;
 
@@ -41,14 +41,14 @@ export abstract class DataCubeEditorColumnSelectorState<
   selectedColumnsSearchText = '';
 
   readonly onChange?:
-    | ((selector: DataCubeEditorColumnSelectorState<T>) => void)
+    | ((selector: DataCubeEditorColumnsSelectorState<T>) => void)
     | undefined;
 
   constructor(
     editor: DataCubeEditorState,
     options?: {
       onChange?:
-        | ((select: DataCubeEditorColumnSelectorState<T>) => void)
+        | ((select: DataCubeEditorColumnsSelectorState<T>) => void)
         | undefined;
     },
   ) {
@@ -109,7 +109,7 @@ export abstract class DataCubeEditorColumnSelectorState<
   protected abstract cloneColumn(column: T): T;
 }
 
-export class DataCubeEditorSortColumnState extends DataCubeEditorColumnSelectorColumnState {
+export class DataCubeEditorColumnsSelectorSortColumnState extends DataCubeEditorColumnsSelectorColumnState {
   readonly onChange?: (() => void) | undefined;
   direction: DataCubeQuerySortDirection;