@finos/legend-data-cube 0.0.24 → 0.0.25

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

@@ -33,7 +33,7 @@ import type {
   ICellRendererParams,
 } from '@ag-grid-community/core';
 import {
-  GridClientSortDirection,
+  DataCubeGridClientSortDirection,
   INTERNAL__GRID_CLIENT_COLUMN_MIN_WIDTH,
   INTERNAL__GridClientUtilityCssClassName,
   generateFontFamilyUtilityClassName,
@@ -43,7 +43,7 @@ import {
   generateTextColorUtilityClassName,
   generateBackgroundColorUtilityClassName,
   generateFontCaseUtilityClassName,
-  GridClientPinnedAlignement,
+  DataCubeGridClientPinnedAlignement,
   INTERNAL__GRID_CLIENT_ROW_HEIGHT,
   INTERNAL__GRID_CLIENT_AUTO_RESIZE_PADDING,
   INTERNAL__GRID_CLIENT_HEADER_HEIGHT,
@@ -54,6 +54,7 @@ import {
   INTERNAL__GRID_CLIENT_DATA_FETCH_MANUAL_TRIGGER_COLUMN_ID,
   INTERNAL__GRID_CLIENT_PIVOT_COLUMN_GROUP_COLOR_ROTATION_SIZE,
   INTERNAL__GRID_CLIENT_TREE_COLUMN_ID,
+  INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
 } from './DataCubeGridClientEngine.js';
 import {
   getNonNullableEntry,
@@ -82,6 +83,7 @@ import {
   PIVOT_COLUMN_NAME_VALUE_SEPARATOR,
   isPivotResultColumnName,
   TREE_COLUMN_VALUE_SEPARATOR,
+  DEFAULT_ROOT_AGGREGATION_COLUMN_VALUE,
 } from '../../core/DataCubeQueryEngine.js';
 import type { CustomLoadingCellRendererProps } from '@ag-grid-community/react';
 import { DataCubeIcon } from '@finos/legend-art';
@@ -226,8 +228,8 @@ function _displaySpec(columnData: ColumnData) {
     pinned:
       column.pinned !== undefined
         ? column.pinned === DataCubeColumnPinPlacement.RIGHT
-          ? GridClientPinnedAlignement.RIGHT
-          : GridClientPinnedAlignement.LEFT
+          ? DataCubeGridClientPinnedAlignement.RIGHT
+          : DataCubeGridClientPinnedAlignement.LEFT
         : null,
     headerClass: isPivotResultColumnName(name)
       ? 'pl-1 border border-neutral-300'
@@ -313,13 +315,18 @@ function _displaySpec(columnData: ColumnData) {
                   }
                 : {}),
             });
-            // 3. add the parentheses (and then the unit)
-            return (
+            // 3. add the parentheses, scale unit, unit, etc.
+            let displayValue =
               (showNegativeNumberInParens
                 ? `(${formattedValue})`
                 : formattedValue) +
-              (scaledNumber.unit ? ` ${scaledNumber.unit}` : '')
-            );
+              (scaledNumber.unit ? ` ${scaledNumber.unit}` : '');
+            if (column.unit) {
+              displayValue = !column.unit.startsWith('_')
+                ? `${displayValue}${column.unit}`
+                : `${column.unit.substring(1)}${displayValue}`;
+            }
+            return displayValue;
           }
         : (params) =>
             params.value === INTERNAL__GRID_CLIENT_MISSING_VALUE
@@ -357,7 +364,7 @@ function _groupDisplaySpec(
     hide: !snapshot.data.groupBy,
     lockPosition: true,
     lockPinned: true,
-    pinned: GridClientPinnedAlignement.LEFT,
+    pinned: DataCubeGridClientPinnedAlignement.LEFT,
     cellClassRules: {
       [generateFontFamilyUtilityClassName(fontFamily)]: () => true,
       [generateFontSizeUtilityClassName(fontSize)]: () => true,
@@ -413,11 +420,6 @@ function _sizeSpec(columnData: ColumnData) {
       INTERNAL__GRID_CLIENT_COLUMN_MIN_WIDTH,
     ),
     maxWidth: column.maxWidth,
-    // Make sure the column spans the width if possible so when total width
-    // is less than grid width, removing/adding one column will cause the other
-    // columns to take/give up space
-    flex:
-      column.fixedWidth === undefined ? 1 : (undefined as unknown as number),
   } as ColDef;
 }
 
@@ -429,28 +431,34 @@ function _sortSpec(columnData: ColumnData) {
     sortable: true, // if this is pivot column, no sorting is supported yet
     sort: sortCol
       ? sortCol.direction === DataCubeQuerySortDirection.ASCENDING
-        ? GridClientSortDirection.ASCENDING
-        : GridClientSortDirection.DESCENDING
+        ? DataCubeGridClientSortDirection.ASCENDING
+        : DataCubeGridClientSortDirection.DESCENDING
       : null,
     sortIndex: sortCol ? sortColumns.indexOf(sortCol) : null,
   } satisfies ColDef;
 }
 
 function _aggregationSpec(columnData: ColumnData) {
-  const { name, snapshot, column } = columnData;
+  const { name, snapshot, column, configuration } = columnData;
   const data = snapshot.data;
   const pivotCol = _findCol(data.pivot?.columns, name);
   const groupByCol = _findCol(data.groupBy?.columns, name);
   const isGroupExtendedColumn = Boolean(
     _findCol(data.groupExtendedColumns, name),
   );
+  const rowGroupIndex =
+    !isGroupExtendedColumn && groupByCol
+      ? (data.groupBy?.columns.indexOf(groupByCol) ?? null)
+      : null;
   return {
     enableRowGroup:
       !isGroupExtendedColumn && column.kind === DataCubeColumnKind.DIMENSION,
     rowGroup: !isGroupExtendedColumn && Boolean(groupByCol),
     rowGroupIndex:
-      !isGroupExtendedColumn && groupByCol
-        ? (data.groupBy?.columns.indexOf(groupByCol) ?? null)
+      rowGroupIndex !== null
+        ? configuration.showRootAggregation
+          ? rowGroupIndex + 1
+          : rowGroupIndex
         : null,
     enablePivot:
       !isGroupExtendedColumn && column.kind === DataCubeColumnKind.DIMENSION,
@@ -546,8 +554,6 @@ export function generateBaseGridOptions(view: DataCubeViewState): GridOptions {
       event.api.hidePopupMenu(); // hide context-menu while scrolling
     },
     onBodyScrollEnd: () => grid.setScrollHintText(undefined),
-    scrollbarWidth: 10,
-    alwaysShowVerticalScroll: true, // this is needed to ensure column resize calculation is accurate
     // -------------------------------------- CONTEXT MENU --------------------------------------
     preventDefaultOnContextMenu: true, // prevent showing the browser's context menu
     columnMenu: 'new', // ensure context menu works on header
@@ -572,16 +578,8 @@ export function generateBaseGridOptions(view: DataCubeViewState): GridOptions {
     },
     // -------------------------------------- COLUMN SIZING --------------------------------------
     autoSizePadding: INTERNAL__GRID_CLIENT_AUTO_RESIZE_PADDING,
-    // ensure columns are resized to fit the grid width initially and on window resize
-    // NOTE: this has to be used with `alwaysShowVerticalScroll` to ensure accurate sizing
-    // otherwise on initial load, the computation will be done when no data is rendered,
-    // so when data is rendered and the vertical scrollbar shows up, it will block a part of
-    // the last column.
     autoSizeStrategy: {
-      type: 'fitGridWidth',
-    },
-    onGridSizeChanged: (event) => {
-      event.api.sizeColumnsToFit();
+      type: 'fitCellContents',
     },
     // -------------------------------------- TOOLTIP --------------------------------------
     tooltipShowDelay: INTERNAL__GRID_CLIENT_TOOLTIP_SHOW_DELAY,
@@ -594,6 +592,10 @@ export function generateBaseGridOptions(view: DataCubeViewState): GridOptions {
     suppressScrollOnNewData: true,
     // NOTE: use row loader instead of showing loader in each cell to improve performance
     // otherwise, when we have many columns (i.e. when pivoting), the app could freeze.
+    //
+    // This would render the loading cell as the full-width row, which, in combination with
+    // fit cell content auto-sizing strategy creates an unwanted row flashing effect while loading.
+    // To compensate for that, we modify the styling to make sure the full-width row has a blank background
     loadingCellRenderer: DataCubeGridLoadingCellRenderer,
     // By default, when row-grouping is active, ag-grid's caching mechanism causes sort
     // to not work properly for pivot result columns, so we must disable this mechanism.
@@ -819,6 +821,24 @@ export function generateColumnDefs(
       filter: 'agTextColumnFilter',
       suppressColumnsToolPanel: true,
     },
+    ...(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,
+        ]
+      : []),
     ...generateDefinitionForPivotResultColumns(
       pivotResultColumns,
       snapshot,
@@ -863,15 +883,36 @@ export function generateGridOptionsFromSnapshot(
       if (
         configuration.initialExpandLevel !== undefined &&
         configuration.initialExpandLevel > 0 &&
-        params.rowNode.level <= configuration.initialExpandLevel - 1
+        params.rowNode.level <=
+          // root aggregation (if enabled) should not be counted when applying initial expand level
+          (configuration.showRootAggregation
+            ? configuration.initialExpandLevel + 1
+            : configuration.initialExpandLevel) -
+            1
       ) {
         return true;
       }
 
-      const routes = params.rowNode.getRoute();
-      if (!routes) {
+      const routes = params.rowNode.getRoute() ?? [];
+      if (!routes.length) {
         return false;
       }
+
+      // when root aggregation is enabled, the root node should be
+      // expanded automatically by default
+      if (
+        configuration.showRootAggregation &&
+        routes.length === 1 &&
+        routes[0] === DEFAULT_ROOT_AGGREGATION_COLUMN_VALUE
+      ) {
+        return true;
+      }
+
+      // when root aggregation is enabled, the root node should not be removed
+      // from path when matching against all expanded paths
+      if (configuration.showRootAggregation) {
+        routes.shift();
+      }
       const path = routes.join(TREE_COLUMN_VALUE_SEPARATOR);
       if (configuration.pivotLayout.expandedPaths.includes(path)) {
         return true;
@@ -909,7 +950,7 @@ export function generateGridOptionsFromSnapshot(
           column.getColId(),
           pinned === null
             ? undefined
-            : pinned === GridClientPinnedAlignement.LEFT
+            : pinned === DataCubeGridClientPinnedAlignement.LEFT
               ? DataCubeColumnPinPlacement.LEFT
               : DataCubeColumnPinPlacement.RIGHT,
         );
@@ -941,7 +982,13 @@ export function generateGridOptionsFromSnapshot(
       // expanded-to-level is specified, causing the groups to be automatically drilled down, resultant
       // expanded paths will not be kept for record.
       if (event.event) {
-        const path = event.node.getRoute()?.join(TREE_COLUMN_VALUE_SEPARATOR);
+        const routes = event.node.getRoute() ?? [];
+        // when root aggregation is enabled, the root node should not be counted
+        // when formulating the expanded path
+        if (routes.length && configuration.showRootAggregation) {
+          routes.shift();
+        }
+        const path = routes.join(TREE_COLUMN_VALUE_SEPARATOR);
         if (!path) {
           return;
         }
@@ -953,6 +1000,14 @@ export function generateGridOptionsFromSnapshot(
       }
     },
 
+    // Virtual columns when being rendered (as user scrolls horizontally) would get resized
+    // to fit their content dynamically. This can potentially cause some performance issues,
+    // so we debounce the resize operation.
+    onVirtualColumnsChanged: () => {
+      view.grid.debouncedAutoResizeColumns?.cancel();
+      view.grid.debouncedAutoResizeColumns?.();
+    },
+
     // -------------------------------------- COLUMNS --------------------------------------
 
     columnDefs: generateColumnDefs(snapshot, configuration, view),
@@ -971,8 +1026,6 @@ export function generateGridOptionsFromSnapshot(
       ..._groupDisplaySpec(snapshot, configuration),
 
       // size
-      suppressAutoSize: true,
-      suppressSizeToFit: true,
       minWidth: 200,
 
       // sorting

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

@@ -452,7 +452,7 @@ export function generateMenuBuilder(
             disabled: true,
           },
           {
-            name: 'Selected Row(s) as Plain Text',
+            name: 'Selected Rows as Plain Text',
             menuItem: WIP_GridMenuItem,
             cssClasses: ['!opacity-100'],
             disabled: true,

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

@@ -16,11 +16,11 @@
 
 import {
   PRIMITIVE_TYPE,
-  V1_ClassInstance,
-  V1_ColSpecArray,
   V1_GenericTypeInstance,
   type V1_ColSpec,
   type V1_AppliedFunction,
+  V1_GenericType,
+  V1_RelationType,
 } from '@finos/legend-graph';
 import { type DataCubeQuerySnapshot } from '../../core/DataCubeQuerySnapshot.js';
 import {
@@ -53,12 +53,16 @@ import {
 } from '../../core/DataCubeQueryBuilderUtils.js';
 import {
   INTERNAL__GRID_CLIENT_MISSING_VALUE,
+  INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
   INTERNAL__GRID_CLIENT_ROW_GROUPING_COUNT_AGG_COLUMN_ID,
+  type DataCubeGridClientDataFetchRequest,
 } from './DataCubeGridClientEngine.js';
-import type { DataCubeConfiguration } from '../../core/models/DataCubeConfiguration.js';
+import { DataCubeConfiguration } from '../../core/models/DataCubeConfiguration.js';
 import type { DataCubeQueryFilterOperation } from '../../core/filter/DataCubeQueryFilterOperation.js';
 import type { DataCubeQueryAggregateOperation } from '../../core/aggregation/DataCubeQueryAggregateOperation.js';
 import { _colSpecArrayParam } from '../../core/DataCubeQuerySnapshotBuilderUtils.js';
+import { buildExecutableQuery } from '../../core/DataCubeQueryBuilder.js';
+import type { DataCubeSource } from '../../core/models/DataCubeSource.js';
 
 /*****************************************************************************
  * [GRID]
@@ -100,11 +104,13 @@ function _addCountAggColumnToPivot(
     const castColumns = guaranteeType(
       guaranteeType(
         guaranteeType(funcMap.pivotCast.parameters[0], V1_GenericTypeInstance)
-          .typeArguments[0],
-        V1_ClassInstance,
-      ).value,
-      V1_ColSpecArray,
-    ).colSpecs;
+          .genericType.typeArguments[0],
+        V1_GenericType,
+      ).rawType,
+      V1_RelationType,
+    ).columns.map((column) =>
+      _colSpec(column.name, undefined, undefined, column.type),
+    );
     uniq(
       castColumns
         .filter((col) => isPivotResultColumnName(col.name))
@@ -131,8 +137,58 @@ function _addCountAggColumnToPivot(
 
 // --------------------------------- MAIN ---------------------------------
 
-export function generateRowGroupingDrilldownExecutableQueryPostProcessor(
-  drilldownValues: (string | null | undefined)[],
+export function buildGridDataFetchExecutableQuery(
+  request: DataCubeGridClientDataFetchRequest,
+  snapshot: DataCubeQuerySnapshot,
+  source: DataCubeSource,
+  executionContextBuilder: (
+    source: DataCubeSource,
+  ) => V1_AppliedFunction | undefined,
+  filterOperations: DataCubeQueryFilterOperation[],
+  aggregateOperations: DataCubeQueryAggregateOperation[],
+  enablePagination: boolean,
+) {
+  const processedSnapshot = snapshot.clone();
+  const configuration = DataCubeConfiguration.serialization.fromJson(
+    processedSnapshot.data.configuration,
+  );
+  if (configuration.showRootAggregation) {
+    processedSnapshot.data.groupBy = {
+      columns: [
+        {
+          name: INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
+          type: PRIMITIVE_TYPE.STRING,
+        },
+        ...(processedSnapshot.data.groupBy?.columns ?? []),
+      ],
+    };
+  }
+  return buildExecutableQuery(
+    processedSnapshot,
+    source,
+    executionContextBuilder,
+    filterOperations,
+    aggregateOperations,
+    {
+      postProcessor: generateGridDataFetchExecutableQueryPostProcessor(request),
+      rootAggregation: {
+        columnName: INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
+      },
+      pagination:
+        enablePagination &&
+        request.startRow !== undefined &&
+        request.endRow !== undefined
+          ? {
+              start: request.startRow,
+              end: request.endRow,
+            }
+          : undefined,
+    },
+  );
+}
+
+function generateGridDataFetchExecutableQueryPostProcessor(
+  request: DataCubeGridClientDataFetchRequest,
 ) {
   return (
     snapshot: DataCubeQuerySnapshot,
@@ -151,7 +207,7 @@ export function generateRowGroupingDrilldownExecutableQueryPostProcessor(
 
       // if any level of drilldown has been done
       // add a pre-filter to groupBy()
-      if (drilldownValues.length) {
+      if (request.groupKeys.length) {
         sequence.splice(
           sequence.indexOf(funcMap.groupBy),
           0,
@@ -161,7 +217,7 @@ export function generateRowGroupingDrilldownExecutableQueryPostProcessor(
               [
                 _filter(
                   {
-                    conditions: drilldownValues.map((value, i) => {
+                    conditions: request.groupKeys.map((value, i) => {
                       const groupByColumn = guaranteeNonNullable(
                         groupBy.columns[i],
                       );
@@ -230,14 +286,14 @@ export function generateRowGroupingDrilldownExecutableQueryPostProcessor(
       }
 
       // modify groupBy() based off the current drilldown level
-      if (drilldownValues.length < groupBy.columns.length) {
+      if (request.groupKeys.length < groupBy.columns.length) {
         const countAggColumns: V1_ColSpec[] = [];
         _addCountAggColumnToPivot(funcMap, countAggColumns);
 
         const groupByIdx = sequence.indexOf(funcMap.groupBy);
         const groupByColumns = groupBy.columns.slice(
           0,
-          drilldownValues.length + 1,
+          request.groupKeys.length + 1,
         );
         const groupByFunc = _function(DataCubeFunction.GROUP_BY, [
           _cols(groupByColumns.map((col) => _colSpec(col.name))),

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

@@ -21,12 +21,13 @@
  * of the grid client, AG Grid.
  ***************************************************************************************/
 
-import type { IServerSideGetRowsRequest } from '@ag-grid-community/core';
 import { type DataCubeQuerySnapshot } from '../../core/DataCubeQuerySnapshot.js';
 import { _toCol } from '../../core/models/DataCubeColumn.js';
 import {
-  GridClientSortDirection,
+  DataCubeGridClientSortDirection,
+  INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
   INTERNAL__GRID_CLIENT_TREE_COLUMN_ID,
+  type DataCubeGridClientDataFetchRequest,
 } from './DataCubeGridClientEngine.js';
 import {
   DataCubeQuerySortDirection,
@@ -50,24 +51,27 @@ export function getColumnConfiguration(
 // --------------------------------- MAIN ---------------------------------
 
 export function buildQuerySnapshot(
-  request: IServerSideGetRowsRequest,
+  request: DataCubeGridClientDataFetchRequest,
   baseSnapshot: DataCubeQuerySnapshot,
 ) {
   const snapshot = baseSnapshot.clone();
   const configuration = DataCubeConfiguration.serialization.fromJson(
     snapshot.data.configuration,
   );
+  const rowGroupColumns = request.rowGroupColumns.filter(
+    (col) => col !== INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
+  );
 
   // --------------------------------- SELECT ---------------------------------
 
   snapshot.data.selectColumns = uniqBy(
     [
       ...snapshot.data.selectColumns,
-      ...request.pivotCols.map((col) =>
-        getColumnConfiguration(col.id, configuration),
+      ...request.pivotColumns.map((col) =>
+        getColumnConfiguration(col, configuration),
       ),
-      ...request.rowGroupCols.map((col) =>
-        getColumnConfiguration(col.id, configuration),
+      ...rowGroupColumns.map((col) =>
+        getColumnConfiguration(col, configuration),
       ),
     ],
     (col) => col.name,
@@ -75,10 +79,10 @@ export function buildQuerySnapshot(
 
   // --------------------------------- PIVOT ---------------------------------
 
-  snapshot.data.pivot = request.pivotCols.length
+  snapshot.data.pivot = request.pivotColumns.length
     ? {
-        columns: request.pivotCols.map((col) =>
-          _toCol(getColumnConfiguration(col.id, configuration)),
+        columns: request.pivotColumns.map((col) =>
+          _toCol(getColumnConfiguration(col, configuration)),
         ),
         // NOTE: since we re-fetch the cast columns anyway in this flow, we just
         // reuse the current cast columns
@@ -88,33 +92,39 @@ export function buildQuerySnapshot(
 
   // --------------------------------- GROUP BY ---------------------------------
 
-  snapshot.data.groupBy = request.rowGroupCols.length
+  snapshot.data.groupBy = rowGroupColumns.length
     ? {
-        columns: request.rowGroupCols.map((col) =>
-          _toCol(getColumnConfiguration(col.id, configuration)),
+        columns: rowGroupColumns.map((col) =>
+          _toCol(getColumnConfiguration(col, configuration)),
         ),
       }
     : undefined;
 
   // --------------------------------- SORT ---------------------------------
 
-  snapshot.data.sortColumns = request.sortModel
+  snapshot.data.sortColumns = request.sortColumns
     // Make sure the tree column is not being sorted since it's a synthetic column
     // the sorting state of this special column is `synthesized` by ag-grid
     // so when all group by columns are sorted in the same direction, the tree group
     // column will be sorted in that direction, and vice versa, when user sorts
     // the tree column, all groupBy columns will be sorted in that direction
-    .filter((item) => item.colId !== INTERNAL__GRID_CLIENT_TREE_COLUMN_ID)
+    .filter(
+      (item) =>
+        ![
+          INTERNAL__GRID_CLIENT_TREE_COLUMN_ID,
+          INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
+        ].includes(item.name),
+    )
     .map((item) => ({
-      name: item.colId,
+      name: item.name,
       type: getColumnConfiguration(
-        isPivotResultColumnName(item.colId)
-          ? getPivotResultColumnBaseColumnName(item.colId)
-          : item.colId,
+        isPivotResultColumnName(item.name)
+          ? getPivotResultColumnBaseColumnName(item.name)
+          : item.name,
         configuration,
       ).type,
       direction:
-        item.sort === GridClientSortDirection.ASCENDING
+        item.direction === DataCubeGridClientSortDirection.ASCENDING
           ? DataCubeQuerySortDirection.ASCENDING
           : DataCubeQuerySortDirection.DESCENDING,
     }));
@@ -126,6 +136,16 @@ export function buildQuerySnapshot(
     snapshot.data.groupBy?.columns ?? [],
     configuration.pivotLayout.expandedPaths,
   );
+  // if root aggregation synthetic column has been removed
+  // pdate the configuration to disable root aggregation
+  if (
+    !request.rowGroupColumns.includes(
+      INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID,
+    ) &&
+    configuration.showRootAggregation
+  ) {
+    configuration.showRootAggregation = false;
+  }
   snapshot.data.configuration = configuration.serialize();
 
   // --------------------------------- FINALIZE ---------------------------------

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

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  debounce,
+  guaranteeNonNullable,
+  type DebouncedFunc,
+} from '@finos/legend-shared';
 import { action, makeObservable, observable } from 'mobx';
 import type { GridApi } from '@ag-grid-community/core';
 import type { DataCubeViewState } from '../DataCubeViewState.js';
@@ -59,6 +63,9 @@ export class DataCubeGridState extends DataCubeQuerySnapshotController {
   rowLimit?: number | undefined;
   isPaginationEnabled = INTERNAL__GRID_CLIENT_DEFAULT_ENABLE_PAGINATION;
   scrollHintText?: string | undefined;
+  // As we resize columns dynamically to fit their content, virtual columns are being rendered
+  // and resized as user scrolls horizontally, this can cause performance issues, so we debounce.
+  debouncedAutoResizeColumns?: DebouncedFunc<() => void>;
 
   constructor(view: DataCubeViewState) {
     super(view);
@@ -112,6 +119,10 @@ export class DataCubeGridState extends DataCubeQuerySnapshotController {
 
   configureClient(val: GridApi | undefined) {
     this._client = val;
+    this.debouncedAutoResizeColumns = debounce(
+      () => val?.autoSizeAllColumns(),
+      100,
+    );
   }
 
   override getSnapshotSubscriberName() {