@finos/legend-data-cube 0.0.24 → 0.0.26

package/src/components/view/editor/DataCubeEditorGeneralPropertiesPanel.tsx

@@ -29,6 +29,7 @@ import {
   DEFAULT_NEGATIVE_FOREGROUND_COLOR,
   DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR,
   DEFAULT_ZERO_FOREGROUND_COLOR,
+  EMPTY_VALUE_PLACEHOLDER,
 } from '../../../stores/core/DataCubeQueryEngine.js';
 import {
   FormCheckbox,
@@ -40,8 +41,10 @@ import {
   FormTextInput,
   FormNumberInput,
   FormBadge_WIP,
+  FormDocumentation,
 } from '../../core/DataCubeFormUtils.js';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
+import { DocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
 
 export const DataCubeEditorGeneralPropertiesPanel = observer(
   (props: { view: DataCubeViewState }) => {
@@ -117,9 +120,7 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                     !configuration.showRootAggregation,
                   )
                 }
-                disabled={true}
               />
-              <FormBadge_WIP />
               <FormCheckbox
                 className="ml-3"
                 label="Show leaf count"
@@ -128,7 +129,11 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                   configuration.setShowLeafCount(!configuration.showLeafCount)
                 }
               />
-              <div className="ml-3 mr-1.5 flex h-full flex-shrink-0 items-center text-sm">
+            </div>
+
+            <div className="mt-2 flex h-5 w-full items-center">
+              <div className="flex h-full w-32 flex-shrink-0 items-center text-sm" />
+              <div className="mr-1 flex h-full flex-shrink-0 items-center text-sm">
                 Sort:
               </div>
               <FormDropdownMenuTrigger
@@ -160,19 +165,18 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                   </FormDropdownMenuItem>
                 ))}
               </FormDropdownMenu>
-            </div>
-
-            <div className="mt-2 flex h-5 w-full items-center">
-              <div className="flex h-full w-32 flex-shrink-0 items-center text-sm" />
-              <div className="mr-1.5 flex h-full flex-shrink-0 items-center text-sm">
+              <div className="ml-3 mr-1 flex h-full flex-shrink-0 items-center text-sm">
                 Initially expand to level:
               </div>
               <FormDropdownMenuTrigger
                 className="w-16"
                 onClick={openInitialExpandLevelDropdown}
                 open={initialExpandLevelDropdownPropsOpen}
+                showAsPlaceholder={
+                  configuration.initialExpandLevel === undefined
+                }
               >
-                {configuration.initialExpandLevel ?? '(None)'}
+                {configuration.initialExpandLevel ?? EMPTY_VALUE_PLACEHOLDER}
               </FormDropdownMenuTrigger>
               <FormDropdownMenu
                 className="w-16"
@@ -187,7 +191,7 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                     }}
                     autoFocus={level === configuration.initialExpandLevel}
                   >
-                    {level ?? '(None)'}
+                    {level ?? EMPTY_VALUE_PLACEHOLDER}
                   </FormDropdownMenuItem>
                 ))}
               </FormDropdownMenu>
@@ -196,20 +200,22 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
             <div className="mt-2 flex h-5 w-full items-center">
               <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                 Row Limit:
+                <FormDocumentation
+                  className="ml-1"
+                  documentationKey={
+                    DocumentationKey.DATA_CUBE_GRID_CONFIGURATION_ROW_LIMIT
+                  }
+                />
               </div>
               <FormNumberInput
                 className="w-16 text-sm"
                 value={panel.limit}
-                min={-1}
+                min={0}
                 step={1}
-                defaultValue={-1}
-                isValid={(value) => value !== undefined && value >= -1}
-                setValue={(value) => panel.setLimit(value ?? -1)}
+                defaultValue={undefined}
+                placeholder={EMPTY_VALUE_PLACEHOLDER}
+                setValue={(value) => panel.setLimit(value)}
               />
-              <div className="flex-shrink-0 pl-1 text-sm italic text-neutral-500">
-                Truncate result to this many rows at every level. Use -1 for
-                unlimited.
-              </div>
             </div>
 
             <div className="mt-2 flex h-5 w-full items-center">
@@ -264,9 +270,10 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                   )
                 }
               />
-              <div className="ml-2 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
+              <div className="ml-3 mr-1 flex h-full flex-shrink-0 items-center text-sm">
+                Color:
+              </div>
               <FormColorPickerButton
-                className="ml-2"
                 color={configuration.gridLineColor}
                 defaultColor={DEFAULT_GRID_LINE_COLOR}
                 onChange={(value) => configuration.setGridLineColor(value)}
@@ -291,7 +298,6 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
               />
               <FormCheckbox
                 className="ml-3"
-                label="Custom: Alternate color every"
                 checked={configuration.alternateRows}
                 onChange={() => {
                   if (configuration.alternateRows) {
@@ -302,8 +308,20 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                   }
                 }}
               />
+              <div className="ml-1 mr-1 flex h-full flex-shrink-0 items-center text-sm">
+                Custom: Alternate color:
+              </div>
+              <FormColorPickerButton
+                disabled={!configuration.alternateRows}
+                color={configuration.alternateRowsColor}
+                defaultColor={DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR}
+                onChange={(value) => configuration.setAlternateRowsColor(value)}
+              />
+              <div className="ml-1 flex h-full flex-shrink-0 items-center text-sm">
+                every:
+              </div>
               <FormNumberInput
-                className="ml-1.5 w-16 text-sm"
+                className="ml-1 w-16 text-sm"
                 disabled={!configuration.alternateRows}
                 min={1}
                 step={1}
@@ -314,14 +332,7 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                   configuration.setAlternateRowsCount(value ?? 1)
                 }
               />
-              <div className="ml-1.5 flex-shrink-0 text-sm">{`row(s)`}</div>
-              <FormColorPickerButton
-                className="ml-[5px]"
-                disabled={!configuration.alternateRows}
-                color={configuration.alternateRowsColor}
-                defaultColor={DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR}
-                onChange={(value) => configuration.setAlternateRowsColor(value)}
-              />
+              <div className="ml-1 flex-shrink-0 text-sm">rows</div>
             </div>
 
             <div className="my-2 h-[1px] w-full bg-neutral-200" />

package/src/stores/core/DataCubeQueryBuilder.ts

@@ -46,6 +46,7 @@ import {
   _primitiveValue,
   _var,
   _functionCompositionProcessor,
+  _extendRootAggregation,
 } from './DataCubeQueryBuilderUtils.js';
 import type { DataCubeQueryAggregateOperation } from './aggregation/DataCubeQueryAggregateOperation.js';
 import type { DataCubeSource } from './models/DataCubeSource.js';
@@ -67,6 +68,11 @@ export function buildExecutableQuery(
       filterOperations: DataCubeQueryFilterOperation[],
       aggregateOperations: DataCubeQueryAggregateOperation[],
     ) => void;
+    rootAggregation?:
+      | {
+          columnName: string;
+        }
+      | undefined;
     pagination?:
       | {
           start: number;
@@ -91,6 +97,8 @@ export function buildExecutableQuery(
         _col(col.name, _deserializeLambda(col.mapFn)),
       ]),
     );
+    // instead of batching all the extend() functions, we sequence them, and reference the first one
+    // in the function map
     _process('leafExtend', guaranteeNonNullable(leafExtendedFuncs[0]));
     leafExtendedFuncs.slice(1).forEach((func) => {
       sequence.push(func);
@@ -163,6 +171,9 @@ export function buildExecutableQuery(
 
   if (data.groupBy) {
     const groupBy = data.groupBy;
+    if (configuration.showRootAggregation && options?.rootAggregation) {
+      sequence.push(_extendRootAggregation(options.rootAggregation.columnName));
+    }
     _process(
       'groupBy',
       _function(DataCubeFunction.GROUP_BY, [
@@ -203,6 +214,8 @@ export function buildExecutableQuery(
         _col(col.name, _deserializeLambda(col.mapFn)),
       ]),
     );
+    // instead of batching all the extend() functions, we sequence them, and reference the first one
+    // in the function map
     _process('groupExtend', guaranteeNonNullable(groupExtendedFuncs[0]));
     groupExtendedFuncs.slice(1).forEach((func) => {
       sequence.push(func);

package/src/stores/core/DataCubeQueryBuilderUtils.ts

@@ -49,6 +49,10 @@ import {
   extractPackagePathFromPath,
   CORE_PURE_PATH,
   V1_GenericTypeInstance,
+  V1_createGenericTypeWithElementPath,
+  V1_createGenericTypeWithRawType,
+  V1_createRelationType,
+  V1_createRelationTypeColumn,
 } from '@finos/legend-graph';
 import {
   type DataCubeQuerySnapshotFilterCondition,
@@ -75,6 +79,7 @@ import {
   type DataCubeQueryFunctionMap,
   isPivotResultColumnName,
   getPivotResultColumnBaseColumnName,
+  DEFAULT_ROOT_AGGREGATION_COLUMN_VALUE,
 } from './DataCubeQueryEngine.js';
 import type { DataCubeQueryFilterOperation } from './filter/DataCubeQueryFilterOperation.js';
 import type { DataCubeQueryAggregateOperation } from './aggregation/DataCubeQueryAggregateOperation.js';
@@ -380,14 +385,18 @@ export function _pivotAggCols(
 }
 
 export function _castCols(columns: DataCubeColumn[]) {
-  const genericType = new V1_GenericTypeInstance();
-  genericType.fullPath = CORE_PURE_PATH.RELATION;
-  genericType.typeArguments = [
-    _cols(
-      columns.map((col) => _colSpec(col.name, undefined, undefined, col.type)),
+  const genericTypeInstance = new V1_GenericTypeInstance();
+  genericTypeInstance.genericType = V1_createGenericTypeWithElementPath(
+    CORE_PURE_PATH.RELATION,
+  );
+  genericTypeInstance.genericType.typeArguments = [
+    V1_createGenericTypeWithRawType(
+      V1_createRelationType(
+        columns.map((col) => V1_createRelationTypeColumn(col.name, col.type)),
+      ),
     ),
   ];
-  return genericType;
+  return genericTypeInstance;
 }
 
 export function _groupByAggCols(
@@ -487,6 +496,23 @@ export function _groupByAggCols(
   ]);
 }
 
+export function _extendRootAggregation(columnName: string) {
+  return _function(DataCubeFunction.EXTEND, [
+    _col(
+      columnName,
+      _lambda(
+        [_var()],
+        [
+          _primitiveValue(
+            PRIMITIVE_TYPE.STRING,
+            DEFAULT_ROOT_AGGREGATION_COLUMN_VALUE,
+          ),
+        ],
+      ),
+    ),
+  ]);
+}
+
 export function _filter(
   filter: DataCubeQuerySnapshotFilter | DataCubeQuerySnapshotFilterCondition,
   filterOperations: DataCubeQueryFilterOperation[],

package/src/stores/core/DataCubeQueryEngine.ts

@@ -305,6 +305,7 @@ export const DEFAULT_REPORT_NAME = 'New Report';
 export const DEFAULT_TREE_COLUMN_SORT_DIRECTION =
   DataCubeQuerySortDirection.ASCENDING;
 export const DEFAULT_PIVOT_STATISTIC_COLUMN_NAME = 'Total';
+export const DEFAULT_ROOT_AGGREGATION_COLUMN_VALUE = '[ROOT]';
 
 export const DEFAULT_URL_LABEL_QUERY_PARAM = 'dataCube.linkLabel';
 export const DEFAULT_MISSING_VALUE_DISPLAY_TEXT = '';
@@ -330,3 +331,10 @@ export const DEFAULT_ROW_BACKGROUND_COLOR = TailwindCSSPalette.white;
 export const DEFAULT_NEGATIVE_FOREGROUND_COLOR = TailwindCSSPalette.red[500];
 export const DEFAULT_ZERO_FOREGROUND_COLOR = TailwindCSSPalette.neutral[400];
 export const DEFAULT_ERROR_FOREGROUND_COLOR = TailwindCSSPalette.blue[600];
+
+// settings
+export const TAB_SIZE = 2;
+export const DATE_TIME_FORMAT = "yyyy-MM-dd'T'HH:mm:ss";
+export const TYPEAHEAD_SEARCH_MINIMUM_SEARCH_LENGTH = 3;
+export const TYPEAHEAD_SEARCH_LIMIT = 10;
+export const EMPTY_VALUE_PLACEHOLDER = '(None)';

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

@@ -63,6 +63,7 @@ export class DataCubeColumnConfiguration {
   negativeNumberInParens = false;
   numberScale?: DataCubeNumberScale | undefined;
   missingValueDisplayText?: string | undefined;
+  unit?: string | undefined;
 
   fontFamily?: DataCubeFont | undefined;
   fontSize?: number | undefined;
@@ -154,6 +155,7 @@ export class DataCubeColumnConfiguration {
       pivotStatisticColumnFunction: optional(primitive()),
       textAlign: optional(primitive()),
       type: primitive(),
+      unit: optional(primitive()),
       zeroBackgroundColor: optional(primitive()),
       zeroForegroundColor: optional(primitive()),
     }),

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

@@ -28,7 +28,7 @@ export class DataCubeEditorGeneralPropertiesPanelState
   readonly view!: DataCubeViewState;
   readonly editor!: DataCubeEditorState;
 
-  limit = -1;
+  limit: number | undefined = undefined;
   configuration = new DataCubeEditorMutableConfiguration();
 
   constructor(editor: DataCubeEditorState) {
@@ -45,7 +45,7 @@ export class DataCubeEditorGeneralPropertiesPanelState
     this.view = editor.view;
   }
 
-  setLimit(val: number) {
+  setLimit(val: number | undefined): void {
     this.limit = val;
   }
 
@@ -56,7 +56,7 @@ export class DataCubeEditorGeneralPropertiesPanelState
     this.setLimit(
       snapshot.data.limit !== undefined && snapshot.data.limit >= 0
         ? snapshot.data.limit
-        : -1,
+        : undefined,
     );
     this.configuration = DataCubeEditorMutableConfiguration.create(
       snapshot.data.configuration,
@@ -68,7 +68,8 @@ export class DataCubeEditorGeneralPropertiesPanelState
     baseSnapshot: DataCubeQuerySnapshot,
   ) {
     const data = newSnapshot.data;
-    data.limit = this.limit < 0 ? undefined : this.limit;
+    data.limit =
+      this.limit === undefined || this.limit < 0 ? undefined : this.limit;
     data.configuration = this.configuration.serialize();
   }
 }

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

@@ -96,6 +96,9 @@ export class DataCubeEditorMutableColumnConfiguration extends DataCubeColumnConf
       missingValueDisplayText: observable,
       setMissingValueDisplayText: action,
 
+      unit: observable,
+      setUnit: action,
+
       fontFamily: observable,
       setFontFamily: action,
 
@@ -273,6 +276,10 @@ export class DataCubeEditorMutableColumnConfiguration extends DataCubeColumnConf
     this.missingValueDisplayText = value;
   }
 
+  setUnit(value: string | undefined) {
+    this.unit = value;
+  }
+
   setFontFamily(value: DataCubeFont | undefined) {
     this.fontFamily = value;
   }

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

@@ -32,7 +32,6 @@ import {
 } from '@finos/legend-shared';
 import { buildExecutableQuery } from '../../core/DataCubeQueryBuilder.js';
 import { type TabularDataSet, V1_Lambda } from '@finos/legend-graph';
-import { generateRowGroupingDrilldownExecutableQueryPostProcessor } from './DataCubeGridQueryBuilder.js';
 import { makeObservable, observable, runInAction } from 'mobx';
 import type {
   DataCubeConfiguration,
@@ -49,10 +48,15 @@ import { buildQuerySnapshot } from './DataCubeGridQuerySnapshotBuilder.js';
 import { AlertType } from '../../../components/core/DataCubeAlert.js';
 import { sum } from 'mathjs';
 import type { DataCubeViewState } from '../DataCubeViewState.js';
-
-type GridClientCellValue = string | number | boolean | null | undefined;
-type GridClientRowData = {
-  [key: string]: GridClientCellValue;
+import {
+  _aggCountCol,
+  buildGridDataFetchExecutableQuery,
+} from './DataCubeGridQueryBuilder.js';
+import { _colSpecArrayParam } from '../../core/DataCubeQuerySnapshotBuilderUtils.js';
+
+type DataCubeGridClientCellValue = string | number | boolean | null | undefined;
+type DataCubeGridClientRowData = {
+  [key: string]: DataCubeGridClientCellValue;
 };
 
 export enum DataCubeGridClientExportFormat {
@@ -128,17 +132,19 @@ export const INTERNAL__GRID_CLIENT_TOOLTIP_SHOW_DELAY = 1500;
 export const INTERNAL__GRID_CLIENT_AUTO_RESIZE_PADDING = 10;
 export const INTERNAL__GRID_CLIENT_MISSING_VALUE = '__MISSING';
 export const INTERNAL__GRID_CLIENT_TREE_COLUMN_ID = 'ag-Grid-AutoColumn';
+export const INTERNAL__GRID_CLIENT_ROOT_AGGREGATION_COLUMN_ID =
+  'INTERNAL__rootAggregation';
 export const INTERNAL__GRID_CLIENT_DATA_FETCH_MANUAL_TRIGGER_COLUMN_ID =
   'INTERNAL__dataFetchManualTrigger';
 export const INTERNAL__GRID_CLIENT_ROW_GROUPING_COUNT_AGG_COLUMN_ID =
   'INTERNAL__count';
 
-export enum GridClientPinnedAlignement {
+export enum DataCubeGridClientPinnedAlignement {
   LEFT = 'left',
   RIGHT = 'right',
 }
 
-export enum GridClientSortDirection {
+export enum DataCubeGridClientSortDirection {
   ASCENDING = 'asc',
   DESCENDING = 'desc',
 }
@@ -209,9 +215,9 @@ export function computeHashCodeForDataFetchManualTrigger(
 function buildRowData(
   result: TabularDataSet,
   snapshot: DataCubeQuerySnapshot,
-): GridClientRowData[] {
+): DataCubeGridClientRowData[] {
   return result.rows.map((_row, rowIdx) => {
-    const row: GridClientRowData = {};
+    const row: DataCubeGridClientRowData = {};
     const cols = result.columns;
     _row.values.forEach((value, colIdx) => {
       // `ag-grid` shows `false` value as empty string so we have
@@ -281,6 +287,12 @@ async function getCastColumns(
         if (funcMap.groupExtend) {
           _unprocess('groupExtend');
         }
+
+        // when both pivot and groupBy present, we need to account for the count column
+        // in the cast expression
+        if (funcMap.pivot && currentSnapshot.data.groupBy) {
+          _colSpecArrayParam(funcMap.pivot, 1).colSpecs.push(_aggCountCol());
+        }
       },
     },
   );
@@ -299,6 +311,18 @@ async function getCastColumns(
   }));
 }
 
+export type DataCubeGridClientDataFetchRequest = {
+  startRow: number | undefined;
+  endRow: number | undefined;
+  rowGroupColumns: string[];
+  groupKeys: (string | null | undefined)[]; // NOTE: it's possible for these values to be nullish depending on row data
+  pivotColumns: string[];
+  sortColumns: {
+    name: string;
+    direction: DataCubeGridClientSortDirection;
+  }[];
+};
+
 export class DataCubeGridClientServerSideDataSource
   implements IServerSideDatasource
 {
@@ -316,39 +340,34 @@ export class DataCubeGridClientServerSideDataSource
   async fetchRows(params: IServerSideGetRowsParams<unknown, unknown>) {
     const task = this.grid.view.newTask('Fetching data');
 
-    // ------------------------------ GRID OPTIONS ------------------------------
-    // Here, we make adjustments to the grid display in response to the new
-    // request, in case the grid action has not impacted the layout in an
-    // adequate way.
-
-    // Toggle the visibility of the tree column based on the presence of row-group columns
-    if (params.request.rowGroupCols.length) {
-      params.api.setColumnsVisible(
-        [INTERNAL__GRID_CLIENT_TREE_COLUMN_ID],
-        true,
-      );
-    } else {
-      params.api.setColumnsVisible(
-        [INTERNAL__GRID_CLIENT_TREE_COLUMN_ID],
-        false,
-      );
-    }
-
     // ------------------------------ SNAPSHOT ------------------------------
 
     const currentSnapshot = guaranteeNonNullable(this.grid.getLatestSnapshot());
+    const request: DataCubeGridClientDataFetchRequest = {
+      startRow: params.request.startRow,
+      endRow: params.request.endRow,
+      rowGroupColumns: params.request.rowGroupCols.map((col) => col.id),
+      groupKeys: params.request.groupKeys.map((key) => key),
+      pivotColumns: params.request.pivotCols.map((col) => col.id),
+      sortColumns: params.request.sortModel.map((item) => ({
+        name: item.colId,
+        direction: item.sort as DataCubeGridClientSortDirection,
+      })),
+    };
+    const isTopLevelRequest = request.groupKeys.length === 0;
+
     let newSnapshot = currentSnapshot;
 
     // only recompute the snapshot if this is not a drilldown request
-    if (params.request.groupKeys.length === 0) {
-      newSnapshot = buildQuerySnapshot(params.request, currentSnapshot);
+    if (isTopLevelRequest) {
+      newSnapshot = buildQuerySnapshot(request, currentSnapshot);
 
       // NOTE: if h-pivot is enabled, update the cast columns
       // and panels which might be affected by this (e.g. sorts)
       // Because is an expensive operation in certain case, we only
       // recompute when it's not a drilldown or paging request,
       // but we could still optimize further if needed.
-      if (!this.grid.isPaginationEnabled || params.request.startRow === 0) {
+      if (!this.grid.isPaginationEnabled || request.startRow === 0) {
         if (newSnapshot.data.pivot) {
           try {
             const castColumns = await getCastColumns(
@@ -390,27 +409,14 @@ export class DataCubeGridClientServerSideDataSource
     // ------------------------------ DATA ------------------------------
 
     try {
-      const executableQuery = buildExecutableQuery(
+      const executableQuery = buildGridDataFetchExecutableQuery(
+        request,
         newSnapshot,
         this.grid.view.source,
         (source) => this.grid.view.engine.buildExecutionContext(source),
         this.grid.view.engine.filterOperations,
         this.grid.view.engine.aggregateOperations,
-        {
-          postProcessor:
-            generateRowGroupingDrilldownExecutableQueryPostProcessor(
-              params.request.groupKeys,
-            ),
-          pagination:
-            this.grid.isPaginationEnabled &&
-            params.request.startRow !== undefined &&
-            params.request.endRow !== undefined
-              ? {
-                  start: params.request.startRow,
-                  end: params.request.endRow,
-                }
-              : undefined,
-        },
+        this.grid.isPaginationEnabled,
       );
       const lambda = new V1_Lambda();
       lambda.body.push(executableQuery);
@@ -436,16 +442,16 @@ export class DataCubeGridClientServerSideDataSource
       if (this.grid.isPaginationEnabled) {
         params.success({ rowData });
         // only update row count when loading the top-level drilldown data
-        if (params.request.groupKeys.length === 0) {
+        if (isTopLevelRequest) {
           runInAction(() => {
-            this.rowCount = (params.request.startRow ?? 0) + rowData.length;
+            this.rowCount = (request.startRow ?? 0) + rowData.length;
           });
         }
 
         // toggle no-rows overlay
         if (
-          params.request.groupKeys.length === 0 &&
-          params.request.startRow === 0 &&
+          isTopLevelRequest &&
+          request.startRow === 0 &&
           rowData.length === 0
         ) {
           this.grid.client.showNoRowsOverlay();
@@ -506,19 +512,28 @@ export class DataCubeGridClientServerSideDataSource
         });
 
         // only update row count when loading the top-level drilldown data
-        if (params.request.groupKeys.length === 0) {
+        if (isTopLevelRequest) {
           runInAction(() => {
             this.rowCount = rowData.length;
           });
         }
 
         // toggle no-rows overlay
-        if (params.request.groupKeys.length === 0 && rowData.length === 0) {
+        if (isTopLevelRequest && rowData.length === 0) {
           this.grid.client.showNoRowsOverlay();
         } else {
           this.grid.client.hideOverlay();
         }
       }
+
+      // Resize columns to fit content on all actions (drilldown, changing queries, fetching new page, etc.)
+      // NOTE: we might want to restrict this to only happen on certain actions
+      //
+      // `setTimeout()` is need to ensure this runs after the grid has been updated with the new data
+      // since ag-grid does not provide an event hook for this action for server-side row model.
+      setTimeout(() => {
+        this.grid.client.autoSizeAllColumns();
+      }, 0);
     } catch (error) {
       assertErrorThrown(error);
       this.grid.view.engine.alertError(error, {