Expandable columns for Pivots

Author: vbabich

packages/grid/src/index.ts

@@ -2,6 +2,7 @@ export * from './ColumnHeaderGroup';
 export * from './EditableGridModel';
 export * from './DeletableGridModel';
 export * from './ExpandableGridModel';
+export * from './ExpandableColumnGridModel';
 export { default as Grid } from './Grid';
 export * from './Grid';
 export * from './GridMetricCalculator';

packages/iris-grid/src/ColumnHeaderGroup.ts

@@ -14,6 +14,15 @@ export function isColumnHeaderGroup(x: unknown): x is ColumnHeaderGroup {
   return x instanceof ColumnHeaderGroup;
 }
 
+export type ColumnHeaderGroupConfig = {
+  name: string;
+  children: string[];
+  color?: string | null;
+  depth: number;
+  childIndexes: ModelIndex[];
+  parent?: string;
+};
+
 export default class ColumnHeaderGroup implements IColumnHeaderGroup {
   static NEW_GROUP_PREFIX = ':newGroup';
 
@@ -36,14 +45,7 @@ export default class ColumnHeaderGroup implements IColumnHeaderGroup {
     depth,
     childIndexes,
     parent,
-  }: {
-    name: string;
-    children: string[];
-    color?: string | null;
-    depth: number;
-    childIndexes: ModelIndex[];
-    parent?: string;
-  }) {
+  }: ColumnHeaderGroupConfig) {
     this.name = name;
     this.children = children;
     this.color = color ?? undefined;

packages/iris-grid/src/IrisGrid.test.tsx

@@ -4,8 +4,13 @@ import dh from '@deephaven/jsapi-shim';
 import { DateUtils, Settings } from '@deephaven/jsapi-utils';
 import { TestUtils } from '@deephaven/utils';
 import { TypeValue } from '@deephaven/filters';
+import {
+  ExpandableColumnGridModel,
+  isExpandableColumnGridModel,
+} from '@deephaven/grid';
 import IrisGrid from './IrisGrid';
 import IrisGridTestUtils from './IrisGridTestUtils';
+import IrisGridProxyModel from './IrisGridProxyModel';
 
 class MockPath2D {
   // eslint-disable-next-line class-methods-use-this
@@ -14,6 +19,13 @@ class MockPath2D {
 
 window.Path2D = MockPath2D as unknown as new () => Path2D;
 
+jest.mock('@deephaven/grid', () => ({
+  ...jest.requireActual('@deephaven/grid'),
+  isExpandableColumnGridModel: jest.fn(),
+}));
+
+const { asMock } = TestUtils;
+
 const VIEW_SIZE = 5000;
 
 const DEFAULT_SETTINGS: Settings = {
@@ -66,10 +78,12 @@ function createNodeMock(element: ReactElement) {
 
 function makeComponent(
   model = irisGridTestUtils.makeModel(),
-  settings = DEFAULT_SETTINGS
+  settings = DEFAULT_SETTINGS,
+  props = {}
 ) {
   const testRenderer = TestRenderer.create(
-    <IrisGrid model={model} settings={settings} />,
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <IrisGrid model={model} settings={settings} {...props} />,
     {
       createNodeMock,
     }
@@ -222,3 +236,96 @@ it('should set gotoValueSelectedColumnName to empty string if no columns are giv
 
   expect(component.state.gotoValueSelectedColumnName).toEqual('');
 });
+
+describe('rebuildFilters', () => {
+  it('updates state if filters not empty', () => {
+    const component = makeComponent(undefined, undefined, {
+      quickFilters: [
+        [
+          '2',
+          {
+            columnType: IrisGridTestUtils.DEFAULT_TYPE,
+            filterList: [
+              {
+                operator: 'eq',
+                text: 'null',
+                value: null,
+                startColumnIndex: 0,
+              },
+            ],
+          },
+        ],
+      ],
+    });
+    jest.spyOn(component, 'setState');
+    expect(component.setState).not.toBeCalled();
+    component.rebuildFilters();
+    expect(component.setState).toBeCalled();
+  });
+
+  it('does not update state for empty filters', () => {
+    const component = makeComponent();
+    jest.spyOn(component, 'setState');
+    component.rebuildFilters();
+    expect(component.setState).not.toBeCalled();
+  });
+});
+
+describe('column expand/collapse', () => {
+  let model: IrisGridProxyModel & ExpandableColumnGridModel;
+  let component: IrisGrid;
+
+  beforeEach(() => {
+    model = irisGridTestUtils.makeModel() as IrisGridProxyModel &
+      ExpandableColumnGridModel;
+    component = makeComponent(model);
+    model.setColumnExpanded = jest.fn();
+    model.isColumnExpanded = jest.fn(() => false);
+    model.expandAllColumns = jest.fn();
+    model.collapseAllColumns = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls setColumnExpanded if model supports expandable columns', () => {
+    asMock(isExpandableColumnGridModel).mockReturnValue(true);
+    model.hasExpandableColumns = true;
+    component.toggleExpandColumn(0);
+    expect(model.setColumnExpanded).toHaveBeenCalled();
+  });
+
+  it('ignores setColumnExpanded and expand/collapse all if model does not support expandable columns', () => {
+    asMock(isExpandableColumnGridModel).mockReturnValue(false);
+    component.toggleExpandColumn(0);
+    expect(model.setColumnExpanded).not.toHaveBeenCalled();
+
+    component.expandAllColumns();
+    expect(model.expandAllColumns).not.toHaveBeenCalled();
+
+    component.collapseAllColumns();
+    expect(model.collapseAllColumns).not.toHaveBeenCalled();
+  });
+
+  it('calls expandAllColumns if model supports expandable columns and expand all', () => {
+    asMock(isExpandableColumnGridModel).mockReturnValue(true);
+    model.isExpandAllColumnsAvailable = true;
+    component.expandAllColumns();
+    expect(model.expandAllColumns).toHaveBeenCalled();
+
+    component.collapseAllColumns();
+    expect(model.collapseAllColumns).toHaveBeenCalled();
+  });
+
+  it('ignores expandAllColumns if model does not support expand all', () => {
+    asMock(isExpandableColumnGridModel).mockReturnValue(true);
+    model.isExpandAllColumnsAvailable = false;
+
+    component.expandAllColumns();
+    expect(model.expandAllColumns).not.toHaveBeenCalled();
+
+    component.collapseAllColumns();
+    expect(model.collapseAllColumns).not.toHaveBeenCalled();
+  });
+});

packages/iris-grid/src/IrisGrid.tsx

@@ -46,6 +46,7 @@ import {
   BoundedAxisRange,
   isExpandableGridModel,
   isDeletableGridModel,
+  isExpandableColumnGridModel,
 } from '@deephaven/grid';
 import {
   dhEye,
@@ -387,6 +388,9 @@ export interface IrisGridState {
   // Current ongoing copy operation
   copyOperation: CopyOperation | null;
 
+  // Map of column indexes to their current names
+  columnNameMap: Map<ModelIndex, ColumnName>;
+
   // The filter that is currently being applied. Reset after update is received
   loadingText: string | null;
   loadingScrimProgress: number | null;
@@ -791,6 +795,9 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       focusedFilterBarColumn: null,
       metricCalculator,
       metrics: undefined,
+      columnNameMap: new Map(
+        model.columns.map((col, index) => [index, col.name])
+      ),
 
       partitionConfig:
         partitionConfig ??
@@ -1102,6 +1109,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
   getCachedOptionItems = memoize(
     (
       isChartBuilderAvailable: boolean,
+      isOrganizeColumnsAvailable: boolean,
       isCustomColumnsAvailable: boolean,
       isFormatColumnsAvailable: boolean,
       isRollupAvailable: boolean,
@@ -1126,11 +1134,13 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
           icon: dhGraphLineUp,
         });
       }
-      optionItems.push({
-        type: OptionType.VISIBILITY_ORDERING_BUILDER,
-        title: 'Organize Columns',
-        icon: dhEye,
-      });
+      if (isOrganizeColumnsAvailable) {
+        optionItems.push({
+          type: OptionType.VISIBILITY_ORDERING_BUILDER,
+          title: 'Organize Columns',
+          icon: dhEye,
+        });
+      }
       if (isFormatColumnsAvailable) {
         optionItems.push({
           type: OptionType.CONDITIONAL_FORMATTING,
@@ -1814,6 +1824,12 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
   rebuildFilters(): void {
     const { model } = this.props;
     const { advancedFilters, quickFilters } = this.state;
+
+    if (advancedFilters.size === 0 && quickFilters.size === 0) {
+      log.debug('No filters to rebuild');
+      return;
+    }
+
     const { columns, formatter } = model;
 
     log.debug('Rebuilding filters');
@@ -2483,6 +2499,36 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     });
   }
 
+  toggleExpandColumn(modelIndex: ModelIndex): void {
+    log.debug2('Toggle expand column', modelIndex);
+    const { model } = this.props;
+    if (isExpandableColumnGridModel(model) && model.hasExpandableColumns) {
+      model.setColumnExpanded(modelIndex, !model.isColumnExpanded(modelIndex));
+    }
+  }
+
+  expandAllColumns(): void {
+    log.debug2('Expand all columns');
+    const { model } = this.props;
+    if (
+      isExpandableColumnGridModel(model) &&
+      model.isExpandAllColumnsAvailable
+    ) {
+      model.expandAllColumns();
+    }
+  }
+
+  collapseAllColumns(): void {
+    log.debug2('Collapse all columns');
+    const { model } = this.props;
+    if (
+      isExpandableColumnGridModel(model) &&
+      model.isExpandAllColumnsAvailable
+    ) {
+      model.collapseAllColumns();
+    }
+  }
+
   handleColumnVisibilityChanged(
     modelIndexes: readonly ModelIndex[],
     isVisible: boolean
@@ -2653,6 +2699,42 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     this.grid?.forceUpdate();
   }
 
+  /**
+   * Update the user column widths when indexes change after expand/collapse.
+   */
+  updateUserColumnWidths(): void {
+    const { model } = this.props;
+    const { metricCalculator, columnNameMap: prevColumnNameMap } = this.state;
+    const columnNameMap = new Map(
+      model.columns.map((col, index) => [index, col.name])
+    );
+
+    // Map userColumnWidths to column names
+    const userColumnWidths = metricCalculator.getUserColumnWidths();
+    const namedUserColumnWidths = new Map<string, number>();
+    userColumnWidths.forEach((width, modelIndex) => {
+      const name = prevColumnNameMap.get(modelIndex);
+      if (width != null && name != null) {
+        namedUserColumnWidths.set(name, width);
+      }
+      metricCalculator.resetColumnWidth(modelIndex);
+    });
+
+    // Restore the column widths with new indexes
+    namedUserColumnWidths.forEach((width, name) => {
+      const modelIndex = model.getColumnIndexByName(name);
+      if (modelIndex != null) {
+        metricCalculator.setColumnWidth(modelIndex, width);
+      }
+    });
+
+    // We store metrics in both Grid and IrisGrid state, keep them in sync
+    this.setState({
+      metrics: this.grid?.updateMetrics(),
+      columnNameMap,
+    });
+  }
+
   toggleSort(columnIndex: VisibleIndex, addToExisting: boolean): void {
     log.info('Toggling sort for column', columnIndex);
 
@@ -3412,8 +3494,11 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     log.debug('custom columns changed');
     const { isReady } = this.state;
     if (isReady) {
+      this.updateUserColumnWidths();
+
+      // Make sure stopLoading() is called after the updateMetrics call in updateUserColumnWidths,
+      // otherwise IrisGridModelUpdater queues an extra setViewport based on old metrics.
       this.stopLoading();
-      this.grid?.forceUpdate();
     } else {
       this.loadTableState();
     }
@@ -4631,6 +4716,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
     const optionItems = this.getCachedOptionItems(
       onCreateChart !== undefined && model.isChartBuilderAvailable,
+      model.isOrganizeColumnsAvailable,
       model.isCustomColumnsAvailable,
       model.isFormatColumnsAvailable,
       model.isRollupAvailable,

packages/iris-grid/src/IrisGridModel.ts

@@ -407,6 +407,13 @@ abstract class IrisGridModel<
     return false;
   }
 
+  /**
+   * @returns True if this model supports column groups and moved columns
+   */
+  get isOrganizeColumnsAvailable(): boolean {
+    return false;
+  }
+
   /**
    * @returns True if this model supports customColumns
    */

packages/iris-grid/src/IrisGridTableModel.ts

@@ -67,6 +67,10 @@ class IrisGridTableModel
     return this.table.selectDistinct != null;
   }
 
+  get isOrganizeColumnsAvailable(): boolean {
+    return true;
+  }
+
   get isCustomColumnsAvailable(): boolean {
     return this.table.applyCustomColumns != null;
   }

packages/iris-grid/src/IrisGridTreeTableModel.ts

@@ -2,6 +2,7 @@
 import memoize from 'memoize-one';
 import {
   BoundedAxisRange,
+  ExpandableGridModel,
   GridCell,
   GridRange,
   ModelIndex,
@@ -50,10 +51,10 @@ function isLayoutTreeTable(table: DhType.TreeTable): table is LayoutTreeTable {
   return (table as LayoutTreeTable).layoutHints !== undefined;
 }
 
-class IrisGridTreeTableModel extends IrisGridTableModelTemplate<
-  DhType.TreeTable,
-  UITreeRow
-> {
+class IrisGridTreeTableModel
+  extends IrisGridTableModelTemplate<DhType.TreeTable, UITreeRow>
+  implements ExpandableGridModel
+{
   /** We keep a virtual column at the front that tracks the "group" that is expanded */
   private virtualColumns: DisplayColumn[];