@finos/legend-application-repl 0.0.53 → 0.0.55

package/src/stores/dataCube/extend/DataCubeColumnEditorState.tsx

@@ -0,0 +1,365 @@
+/**
+ * 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, computed, makeObservable, observable } from 'mobx';
+import type { DataCubeState } from '../DataCubeState.js';
+import { DisplayState } from '../../LayoutManagerState.js';
+import { DataCubeColumnCreator } from '../../../components/dataCube/extend/DataCubeColumnEditor.js';
+import { editor as monacoEditorAPI, Uri } from 'monaco-editor';
+import {
+  ActionState,
+  assertErrorThrown,
+  guaranteeNonNullable,
+  HttpStatus,
+  NetworkClientError,
+  uuid,
+} from '@finos/legend-shared';
+import { buildExecutableQuery } from '../core/DataCubeQueryBuilder.js';
+import {
+  DataCubeColumnDataType,
+  DataCubeColumnKind,
+  DataCubeExtendedColumnType,
+  DEFAULT_LAMBDA_VARIABLE_NAME,
+  getDataType,
+} from '../core/DataCubeQueryEngine.js';
+import {
+  clearMarkers,
+  CODE_EDITOR_LANGUAGE,
+  setErrorMarkers,
+} from '@finos/legend-lego/code-editor';
+import type { DataCubeQueryBuilderError } from '../../../server/REPLEngine.js';
+import type { DataCubeExtendManagerState } from './DataCubeExtendManagerState.js';
+import {
+  PRIMITIVE_TYPE,
+  V1_Lambda,
+  V1_serializeValueSpecification,
+  type V1_ValueSpecification,
+} from '@finos/legend-graph';
+import type { DataCubeColumnConfiguration } from '../core/DataCubeConfiguration.js';
+
+export class DataCubeNewColumnState {
+  readonly uuid = uuid();
+  readonly dataCube: DataCubeState;
+  readonly manager: DataCubeExtendManagerState;
+
+  // NOTE: use UUID in the column name to prevent collision
+  // when parsing/compiling the expression
+  private readonly _name = `col_${this.uuid.replaceAll('-', '_')}`;
+  readonly display: DisplayState;
+  readonly validationState = ActionState.create();
+  readonly finalizationState = ActionState.create();
+
+  name: string;
+  expectedType: string;
+  isGroupLevel: boolean;
+  columnKind?: DataCubeColumnKind | undefined;
+
+  code: string;
+  codePrefix: string;
+  codeSuffix: string;
+
+  editor?: monacoEditorAPI.IStandaloneCodeEditor | undefined;
+  readonly editorModel: monacoEditorAPI.ITextModel;
+  readonly editorModelUri: Uri;
+  codeError?: DataCubeQueryBuilderError | undefined;
+  returnType?: string | undefined;
+
+  constructor(
+    manager: DataCubeExtendManagerState,
+    referenceColumn?: DataCubeColumnConfiguration | undefined,
+  ) {
+    makeObservable(this, {
+      name: observable,
+      setName: action,
+      isNameValid: computed,
+
+      expectedType: observable,
+      setExpectedType: action,
+      isTypeValid: computed,
+
+      isGroupLevel: observable,
+      columnKind: observable,
+      setColumnKind: action,
+
+      editor: observable.ref,
+      setEditor: action,
+
+      codeError: observable.ref,
+      showError: action,
+      clearError: action,
+
+      returnType: observable,
+      setReturnType: action,
+    });
+
+    this.manager = manager;
+    this.dataCube = manager.dataCube;
+    this.display = new DisplayState(
+      this.dataCube.repl.layout,
+      'Add New Column',
+      () => <DataCubeColumnCreator state={this} />,
+    );
+    this.display.configuration.window = {
+      x: 50,
+      y: 50,
+      width: 500,
+      height: 300,
+      minWidth: 300,
+      minHeight: 200,
+      center: false,
+    };
+
+    this.name = `col_${manager.allColumnNames.length + 1}`;
+    this.expectedType = DataCubeColumnDataType.NUMBER;
+    this.isGroupLevel = false;
+    this.columnKind = DataCubeColumnKind.MEASURE;
+
+    this.code = `${DEFAULT_LAMBDA_VARIABLE_NAME}|`;
+    this.codePrefix = `->extend(~${this._name}:`;
+    this.codeSuffix = `)`;
+
+    if (referenceColumn) {
+      this.expectedType = getDataType(referenceColumn.type);
+      this.columnKind = referenceColumn.kind;
+      this.code = `${DEFAULT_LAMBDA_VARIABLE_NAME}|$${DEFAULT_LAMBDA_VARIABLE_NAME}.${referenceColumn.name}`;
+    }
+
+    this.editorModelUri = Uri.file(`/${this.uuid}.pure`);
+    this.editorModel = monacoEditorAPI.createModel(
+      this.code,
+      CODE_EDITOR_LANGUAGE.PURE,
+      this.editorModelUri,
+    );
+  }
+
+  setName(value: string) {
+    this.name = value;
+  }
+
+  get isNameValid(): boolean {
+    return !this.manager.allColumnNames.includes(this.name);
+  }
+
+  setExpectedType(value: string) {
+    this.expectedType = value;
+  }
+
+  get isTypeValid() {
+    return (
+      this.returnType !== undefined &&
+      this.expectedType === getDataType(this.returnType)
+    );
+  }
+
+  setColumnKind(
+    isGroupLevel: boolean,
+    columnKind: DataCubeColumnKind | undefined,
+  ) {
+    this.isGroupLevel = isGroupLevel;
+    this.columnKind = columnKind;
+  }
+
+  setCode(value: string) {
+    this.code = value;
+  }
+
+  setEditor(editor: monacoEditorAPI.IStandaloneCodeEditor) {
+    this.editor = editor;
+  }
+
+  setReturnType(value: string | undefined) {
+    this.returnType = value;
+  }
+
+  showError(error: DataCubeQueryBuilderError) {
+    this.codeError = error;
+    if (error.sourceInformation) {
+      setErrorMarkers(
+        this.editorModel,
+        [
+          {
+            message: error.message,
+            startLineNumber: error.sourceInformation.startLine,
+            startColumn: error.sourceInformation.startColumn,
+            endLineNumber: error.sourceInformation.endLine,
+            endColumn: error.sourceInformation.endColumn,
+          },
+        ],
+        this.uuid,
+      );
+    }
+  }
+
+  clearError() {
+    this.codeError = undefined;
+    clearMarkers(this.uuid);
+  }
+
+  buildExtendBaseQuery() {
+    const currentSnapshot = guaranteeNonNullable(
+      this.manager.getLatestSnapshot(),
+    );
+    const snapshot = currentSnapshot.clone();
+    if (!this.isGroupLevel) {
+      snapshot.data.leafExtendedColumns = [];
+      snapshot.data.selectColumns = [];
+      snapshot.data.filter = undefined;
+      snapshot.data.groupBy = undefined;
+      snapshot.data.pivot = undefined;
+    }
+    snapshot.data.groupExtendedColumns = [];
+    snapshot.data.sortColumns = [];
+    snapshot.data.limit = undefined;
+    return buildExecutableQuery(
+      snapshot,
+      this.manager.dataCube.engine.filterOperations,
+      this.manager.dataCube.engine.aggregateOperations,
+    );
+  }
+
+  async getReturnType() {
+    const baseQuery = this.buildExtendBaseQuery();
+    this.validationState.inProgress();
+
+    // properly reset the error state before revalidating
+    this.clearError();
+    this.setReturnType(undefined);
+
+    try {
+      const returnRelationType =
+        await this.dataCube.engine.getQueryCodeRelationReturnType(
+          this.codePrefix + this.code + this.codeSuffix,
+          baseQuery,
+        );
+      let returnType = returnRelationType.columns.find(
+        (col) => col.name === this._name,
+      )?.type;
+      returnType =
+        returnType &&
+        (Object.values(PRIMITIVE_TYPE) as string[]).includes(returnType)
+          ? returnType
+          : undefined;
+      this.setReturnType(returnType);
+      return returnType;
+    } catch (err) {
+      assertErrorThrown(err);
+      if (
+        err instanceof NetworkClientError &&
+        err.response.status === HttpStatus.BAD_REQUEST
+      ) {
+        this.validationState.fail();
+        // correct the source information since we added prefix to the code
+        // and reveal error in the editor
+        const error = err.payload as DataCubeQueryBuilderError;
+        if (error.sourceInformation) {
+          error.sourceInformation.startColumn -=
+            error.sourceInformation.startLine === 1
+              ? this.codePrefix.length
+              : 0;
+          error.sourceInformation.endColumn -=
+            error.sourceInformation.endLine === 1 ? this.codePrefix.length : 0;
+          const fullRange = this.editorModel.getFullModelRange();
+          if (
+            error.sourceInformation.startLine < 1 ||
+            (error.sourceInformation.startLine === 1 &&
+              error.sourceInformation.startColumn < 1) ||
+            error.sourceInformation.endLine > fullRange.endLineNumber ||
+            (error.sourceInformation.endLine === fullRange.endLineNumber &&
+              error.sourceInformation.endColumn > fullRange.endColumn)
+          ) {
+            error.sourceInformation.startColumn = fullRange.startColumn;
+            error.sourceInformation.startLine = fullRange.startLineNumber;
+            error.sourceInformation.endColumn = fullRange.endColumn;
+            error.sourceInformation.endLine = fullRange.endLineNumber;
+          }
+        }
+        this.showError(err.payload as DataCubeQueryBuilderError);
+        return undefined;
+      }
+      this.dataCube.repl.alertError(err, {
+        message: `Expression Validation Failure: ${err.message}`,
+      });
+    } finally {
+      this.validationState.complete();
+    }
+
+    return undefined;
+  }
+
+  async applyChanges() {
+    if (
+      !this.validationState.hasCompleted ||
+      !this.isNameValid ||
+      !this.isTypeValid
+    ) {
+      return;
+    }
+
+    this.finalizationState.inProgress();
+
+    let query: V1_ValueSpecification;
+    let returnType: string | undefined;
+    try {
+      [query, returnType] = await Promise.all([
+        this.dataCube.engine.parseQuery(this.code, false),
+        this.getReturnType(), // recompile to get the return type
+      ]);
+    } catch (error) {
+      assertErrorThrown(error);
+      this.dataCube.repl.alertError(error, {
+        message: `Expression Validation Failure: ${error.message}`,
+      });
+      return;
+    } finally {
+      this.finalizationState.complete();
+    }
+
+    if (!(query instanceof V1_Lambda)) {
+      this.dataCube.repl.alertError(new Error(), {
+        message: `Expression Validation Failure: Expression must be a lambda.`,
+      });
+      return;
+    }
+
+    if (!returnType) {
+      this.dataCube.repl.alertError(new Error(), {
+        message: `Expression Validation Failure: Can't compute expression return type.`,
+      });
+      return;
+    }
+
+    this.manager.addNewColumn(
+      {
+        _type: DataCubeExtendedColumnType.SIMPLE,
+        name: this.name,
+        type: returnType,
+        lambda: V1_serializeValueSpecification(query, []),
+      },
+      this.isGroupLevel,
+      this.columnKind,
+    );
+
+    this.close();
+  }
+
+  close() {
+    // dispose the editor and its model to avoid memory leak
+    this.editorModel.dispose();
+    this.editor?.dispose();
+
+    this.display.close();
+  }
+}

package/src/stores/dataCube/extend/DataCubeExtendManagerState.tsx

@@ -0,0 +1,171 @@
+/**
+ * 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, computed, makeObservable, observable } from 'mobx';
+import type {
+  DataCubeQuerySnapshot,
+  DataCubeQuerySnapshotColumn,
+  DataCubeQuerySnapshotExtendedColumn,
+} from '../core/DataCubeQuerySnapshot.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import type { DataCubeState } from '../DataCubeState.js';
+import { DataCubeQuerySnapshotController } from '../core/DataCubeQuerySnapshotManager.js';
+import {
+  type DataCubeColumnConfiguration,
+  DataCubeConfiguration,
+} from '../core/DataCubeConfiguration.js';
+import { DataCubeNewColumnState } from './DataCubeColumnEditorState.js';
+import { DataCubeColumnKind } from '../core/DataCubeQueryEngine.js';
+import { buildDefaultColumnConfiguration } from '../core/DataCubeConfigurationBuilder.js';
+
+export class DataCubeQueryExtendedColumnState {
+  name: string;
+  type: string;
+  data: DataCubeQuerySnapshotExtendedColumn;
+
+  constructor(data: DataCubeQuerySnapshotExtendedColumn) {
+    makeObservable(this, {
+      name: observable,
+      type: observable,
+    });
+
+    this.name = data.name;
+    this.type = data.type;
+    this.data = data;
+  }
+}
+
+/**
+ * This query editor state backs the form editor for extend columns, i.e. creating new columns.
+ */
+export class DataCubeExtendManagerState extends DataCubeQuerySnapshotController {
+  configuration = new DataCubeConfiguration();
+  columnConfigurations: DataCubeColumnConfiguration[] = [];
+
+  sourceColumns: DataCubeQuerySnapshotColumn[] = [];
+  leafExtendedColumns: DataCubeQueryExtendedColumnState[] = [];
+  groupExtendedColumns: DataCubeQueryExtendedColumnState[] = [];
+  newColumnEditors: DataCubeNewColumnState[] = [];
+  // TODO: existingColumnEditors
+
+  constructor(dataCube: DataCubeState) {
+    super(dataCube);
+
+    makeObservable(this, {
+      sourceColumns: observable.ref,
+      columnConfigurations: observable.struct,
+      leafExtendedColumns: observable,
+      groupExtendedColumns: observable,
+
+      allColumnNames: computed,
+
+      addNewColumn: action,
+
+      applySnapshot: action,
+    });
+  }
+
+  get allColumnNames(): string[] {
+    return [
+      ...this.sourceColumns,
+      ...this.leafExtendedColumns,
+      ...this.groupExtendedColumns,
+    ].map((col) => col.name);
+  }
+
+  openNewColumnEditor(
+    referenceColumn?: DataCubeColumnConfiguration | undefined,
+  ) {
+    const editor = new DataCubeNewColumnState(this, referenceColumn);
+    this.newColumnEditors.push(editor);
+    editor.display.open();
+  }
+
+  addNewColumn<T extends DataCubeQuerySnapshotExtendedColumn>(
+    column: T,
+    isGroupLevel: boolean,
+    columnKind: DataCubeColumnKind | undefined,
+  ) {
+    (isGroupLevel ? this.groupExtendedColumns : this.leafExtendedColumns).push(
+      new DataCubeQueryExtendedColumnState(column),
+    );
+
+    const columnConfiguration = buildDefaultColumnConfiguration(column);
+    if (columnKind) {
+      columnConfiguration.kind = columnKind;
+      columnConfiguration.excludedFromHorizontalPivot =
+        columnKind === DataCubeColumnKind.DIMENSION;
+    }
+
+    this.columnConfigurations.push(columnConfiguration);
+    this.applyChanges();
+  }
+
+  override async applySnapshot(
+    snapshot: DataCubeQuerySnapshot,
+    previousSnapshot: DataCubeQuerySnapshot | undefined,
+  ): Promise<void> {
+    this.configuration = DataCubeConfiguration.serialization.fromJson(
+      snapshot.data.configuration,
+    );
+    this.columnConfigurations = this.configuration.columns;
+    this.sourceColumns = snapshot.data.sourceColumns;
+    this.leafExtendedColumns = snapshot.data.leafExtendedColumns.map(
+      (col) => new DataCubeQueryExtendedColumnState(col),
+    );
+    this.groupExtendedColumns = snapshot.data.groupExtendedColumns.map(
+      (col) => new DataCubeQueryExtendedColumnState(col),
+    );
+  }
+
+  applyChanges() {
+    const baseSnapshot = guaranteeNonNullable(this.getLatestSnapshot());
+    const newSnapshot = baseSnapshot.clone();
+
+    newSnapshot.data.configuration = {
+      ...baseSnapshot.data.configuration,
+      columns: this.columnConfigurations,
+    };
+
+    newSnapshot.data.leafExtendedColumns = this.leafExtendedColumns.map(
+      (col) => col.data,
+    );
+    newSnapshot.data.groupExtendedColumns = this.groupExtendedColumns.map(
+      (col) => col.data,
+    );
+    // update the selected columns
+    // NOTE: group-level extended columns cannot be selected!
+    newSnapshot.data.selectColumns = this.columnConfigurations
+      .map((col) => ({
+        name: col.name,
+        type: col.type,
+      }))
+      .filter(
+        (col) =>
+          !newSnapshot.data.groupExtendedColumns.find(
+            (c) => c.name === col.name,
+          ),
+      );
+
+    // TODO: support edition, so v-pivots/h-pivots or column configuration that
+    // depends on columns with name/type changed should be updated
+
+    newSnapshot.finalize();
+    if (newSnapshot.hashCode !== baseSnapshot.hashCode) {
+      this.publishSnapshot(newSnapshot);
+    }
+  }
+}

package/src/stores/dataCube/filter/DataCubeFilterEditorState.tsx

@@ -39,11 +39,15 @@ import {
   DataCubeConfiguration,
   type DataCubeColumnConfiguration,
 } from '../core/DataCubeConfiguration.js';
-import { SingletonModeDisplayState } from '../../LayoutManagerState.js';
-import { DataCubeFilterEditor } from '../../../components/dataCube/filter/DataCubeEditorFilter.js';
+import { DisplayState } from '../../LayoutManagerState.js';
+import { DataCubeFilterEditor } from '../../../components/dataCube/filter/DataCubeFilterEditor.js';
 
+/**
+ * This query editor state backs the form editor for filter. It batches changes made
+ * to the filter in the form editor.
+ */
 export class DataCubeFilterEditorState extends DataCubeQuerySnapshotController {
-  readonly display: SingletonModeDisplayState;
+  readonly display: DisplayState;
 
   tree: DataCubeFilterEditorTree;
   selectedNode?: DataCubeFilterEditorTreeNode | undefined;
@@ -57,7 +61,7 @@ export class DataCubeFilterEditorState extends DataCubeQuerySnapshotController {
       initializeTree: action,
       refreshTree: action,
 
-      columns: observable,
+      columns: observable.struct,
 
       applySnapshot: action,
 
@@ -69,11 +73,18 @@ export class DataCubeFilterEditorState extends DataCubeQuerySnapshotController {
       layerFilterNode: action,
     });
 
-    this.display = new SingletonModeDisplayState(
-      this.dataCube.repl.layout,
-      'Filter',
-      () => <DataCubeFilterEditor dataCube={this.dataCube} />,
-    );
+    this.display = new DisplayState(this.dataCube.repl.layout, 'Filter', () => (
+      <DataCubeFilterEditor dataCube={this.dataCube} />
+    ));
+    this.display.configuration.window = {
+      x: -50,
+      y: 50,
+      width: 600,
+      height: 400,
+      minWidth: 300,
+      minHeight: 200,
+      center: false,
+    };
 
     this.tree = {
       nodes: new Map<string, DataCubeFilterEditorTreeNode>(),
@@ -278,7 +289,7 @@ export class DataCubeFilterEditorState extends DataCubeQuerySnapshotController {
     const configuration = DataCubeConfiguration.serialization.fromJson(
       snapshot.data.configuration,
     );
-    // NOTE: filtering group extended columns is not supported
+    // NOTE: filtering group-level extended columns is not supported
     this.columns = configuration.columns.filter(
       (column) =>
         !snapshot.data.groupExtendedColumns.find(

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

@@ -218,6 +218,7 @@ export class DataCubeGridClientServerSideDataSource
       const executableQuery = buildExecutableQuery(
         syncedSnapshot,
         this.grid.dataCube.engine.filterOperations,
+        this.grid.dataCube.engine.aggregateOperations,
         {
           postProcessor:
             generateRowGroupingDrilldownExecutableQueryPostProcessor(
@@ -319,8 +320,7 @@ export class DataCubeGridClientServerSideDataSource
     } catch (error) {
       assertErrorThrown(error);
       this.grid.dataCube.repl.alertError(error, {
-        message: `Data fetch failure: ${error.message}`,
-        text: error.stack,
+        message: `Data Fetch Failure: ${error.message}`,
       });
       params.fail();
     } finally {

package/src/stores/dataCube/grid/DataCubeGridClientExportEngine.ts

@@ -90,7 +90,7 @@ export class DataCubeGridClientExportEngine {
   }
 
   private generateFileName() {
-    return `${this.dataCube.staticContent.name} - ${formatDate(new Date(), 'EEE MMM dd yyyy HH_mm_ss')}`;
+    return `${this.dataCube.info.name} - ${formatDate(new Date(), 'EEE MMM dd yyyy HH_mm_ss')}`;
   }
 
   exportFile(format: DataCubeGridClientExportFormat) {

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

@@ -380,21 +380,26 @@ function _rowGroupSpec(columnData: ColumnData) {
   const { snapshot, column } = columnData;
   const data = snapshot.data;
   const groupByCol = _findCol(data.groupBy?.columns, column.name);
+  const isGroupExtendedColumn = Boolean(
+    _findCol(data.groupExtendedColumns, column.name),
+  );
   return {
-    enableRowGroup: column.kind === DataCubeColumnKind.DIMENSION,
+    enableRowGroup:
+      !isGroupExtendedColumn && column.kind === DataCubeColumnKind.DIMENSION,
     enableValue: false, // disable GUI interactions to modify this column's aggregate function
     allowedAggFuncs: [], // disable GUI for options of the agg functions
-    rowGroup: Boolean(groupByCol),
-    rowGroupIndex: groupByCol
-      ? (data.groupBy?.columns.indexOf(groupByCol) ?? null)
-      : null,
+    rowGroup: !isGroupExtendedColumn && Boolean(groupByCol),
+    rowGroupIndex:
+      !isGroupExtendedColumn && groupByCol
+        ? (data.groupBy?.columns.indexOf(groupByCol) ?? null)
+        : null,
     // NOTE: we don't quite care about populating these accurately
     // since ag-grid aggregation does not support parameters, so
     // its set of supported aggregators will never match that specified
     // in the editor.
     // But we need to set this to make sure sorting works when row grouping
     // is used, so we use a dummy value here.
-    aggFunc: () => 0,
+    aggFunc: !isGroupExtendedColumn ? () => 0 : null,
   } satisfies ColDef;
 }
 
@@ -476,6 +481,12 @@ export function generateBaseGridOptions(dataCube: DataCubeState): GridOptions {
     // 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();
       }
     },
@@ -596,6 +607,8 @@ export function generateGridOptionsFromSnapshot(
         headerName: '',
         colId: INTERNAL__GRID_CLIENT_TREE_COLUMN_ID,
         cellRenderer: 'agGroupCellRenderer',
+        // TODO: display: coloring, text, etc.
+        // TODO: tooltip
         // cellRendererParams: {
         //   innerRenderer: (params: ICellRendererParams) => (
         //     <>
@@ -623,11 +636,8 @@ export function generateGridOptionsFromSnapshot(
         },
         cellDataType: 'text',
         flex: 1,
-        // TODO: display: coloring, text, etc.
-        // TODO: pinning (should we pin this left by default?)
-        // TODO: tooltip
         loadingCellRenderer: DataCubeGridLoadingCellRenderer,
-        // TODO: @akphi - we can support this in the configuration (support sorting by tree-column?)
+        // TODO: we can support this in the configuration (support sorting by tree-column?)
         // sortable: false,
       } satisfies ColDef,
       // NOTE: Internal column used for programatically trigger data fetch when filter is modified
@@ -649,7 +659,7 @@ export function generateGridOptionsFromSnapshot(
           configuration,
         };
         return {
-          headerName: column.name,
+          headerName: column.displayName ?? column.name,
           field: column.name,
           menuTabs: [],