feat: Cherry-pick DH-18779: Auto-resize column header groups (deephaven#2566) (deephaven#2574)

- Calculate adjusted paddings for columns based on the width of column
header groups. Pre-requisite for DH-18780
- Add optional `getMetricCalculator` prop in `IrisGrid` and
`IrisGridPanel`, needed to override metric calculator for Pivots
Fix duplicated `mouseHanders` prop in the handlers array in `IrisGrid`
- Add unit and e2e tests for column header separators

Author: vbabich

packages/dashboard-core-plugins/src/panels/IrisGridPanel.tsx

@@ -47,6 +47,7 @@ import {
   PartitionConfig,
   IrisGridRenderer,
   MouseHandlersProp,
+  GetMetricCalculatorType,
 } from '@deephaven/iris-grid';
 import {
   type RowDataMap,
@@ -156,7 +157,10 @@ export interface OwnProps extends DashboardPanelProps {
   theme?: Partial<IrisGridThemeType> & Record<string, unknown>;
 
   mouseHandlers?: MouseHandlersProp;
+
   renderer?: IrisGridRenderer;
+
+  getMetricCalculator?: GetMetricCalculatorType;
 }
 
 interface StateProps {
@@ -1115,6 +1119,7 @@ export class IrisGridPanel extends PureComponent<
       user,
       renderer,
       settings,
+      getMetricCalculator,
       theme,
     } = this.props;
     const {
@@ -1250,6 +1255,7 @@ export class IrisGridPanel extends PureComponent<
             frozenColumns={frozenColumns}
             theme={theme}
             columnHeaderGroups={columnHeaderGroups}
+            getMetricCalculator={getMetricCalculator}
           >
             {childrenContent}
           </IrisGrid>

packages/grid/src/Grid.test.tsx

@@ -175,6 +175,25 @@ function mouseMove(
   );
 }
 
+function mouseHover(
+  column: VisibleIndex,
+  row: VisibleIndex,
+  component: Grid,
+  extraMouseArgs?: MouseEventInit,
+  clientX?: number,
+  clientY?: number
+) {
+  mouseEvent(
+    column,
+    row,
+    component.handleMouseMove,
+    'mousemove',
+    extraMouseArgs,
+    clientX,
+    clientY
+  );
+}
+
 function mouseUp(
   column: VisibleIndex,
   row: VisibleIndex,
@@ -1038,3 +1057,163 @@ describe('paste tests', () => {
     });
   });
 });
+
+describe('column separators', () => {
+  const resizableTheme = { ...defaultTheme, allowColumnResize: true };
+
+  function getColumnSeparatorX(columnIndex: VisibleIndex): number {
+    // Position mouse at the right edge of the column (separator position)
+    const { rowHeaderWidth, columnWidth } = resizableTheme;
+    return rowHeaderWidth + columnWidth * (columnIndex + 1) - 2;
+  }
+
+  function getColumnHeaderY(): number {
+    // Position mouse in the column header area
+    return Math.floor(resizableTheme.columnHeaderHeight / 2);
+  }
+
+  describe('column separator detection', () => {
+    it('should detect column separator on mouse move and update cursor', () => {
+      const component = makeGridComponent(new MockGridModel(), resizableTheme);
+      const { columnWidth } = resizableTheme;
+      const separatorX = getColumnSeparatorX(0);
+      const headerY = getColumnHeaderY();
+
+      // Move mouse to the middle of the column header
+      mouseHover(0, 0, component, {}, separatorX - columnWidth / 2, headerY);
+      expect(component.state.cursor).toBeNull();
+
+      // Move mouse over the column separator
+      mouseHover(0, 0, component, {}, separatorX, headerY);
+
+      // Check that the grid recognizes we're over a separator
+      // The cursor should change to indicate resize capability
+      expect(component.state.cursor).toBe('col-resize');
+    });
+
+    it('should not detect separator when column resize is disabled', () => {
+      const noResizeTheme = { ...defaultTheme, allowColumnResize: false };
+      const component = makeGridComponent(new MockGridModel(), noResizeTheme);
+      const separatorX = getColumnSeparatorX(0);
+      const headerY = getColumnHeaderY();
+
+      // Move mouse to where separator would be
+      mouseHover(0, 0, component, {}, separatorX, headerY);
+
+      // Should not detect separator when resize is disabled
+      expect(component.state.draggingColumnSeparator).toBeNull();
+      expect(component.state.cursor).toBeNull();
+    });
+  });
+
+  describe('column separator drag interactions', () => {
+    it('should initiate column resize on mouse down at separator', () => {
+      const component = makeGridComponent(new MockGridModel(), resizableTheme);
+      const separatorX = getColumnSeparatorX(0);
+      const headerY = getColumnHeaderY();
+
+      // Click down on the separator
+      mouseDown(0, 0, component, {}, separatorX, headerY);
+
+      // Should initiate drag state
+      expect(component.state.isDragging).toBe(true);
+      expect(component.state.draggingColumnSeparator).toBeDefined();
+    });
+
+    it('should update column width during drag', () => {
+      const component = makeGridComponent(new MockGridModel(), resizableTheme);
+      const separatorX = getColumnSeparatorX(0);
+      const headerY = getColumnHeaderY();
+
+      // Start drag
+      mouseDown(0, 0, component, {}, separatorX, headerY);
+
+      // Drag to resize
+      const newX = separatorX + 50; // Drag 50px to the right
+      mouseMove(0, 0, component, {}, newX, headerY);
+
+      // Should be in drag state
+      expect(component.state.isDragging).toBe(true);
+      expect(component.state.draggingColumnSeparator).toBeDefined();
+    });
+
+    it('should complete resize on mouse up', () => {
+      const component = makeGridComponent(new MockGridModel(), resizableTheme);
+      const separatorX = getColumnSeparatorX(0);
+      const headerY = getColumnHeaderY();
+
+      // Start drag
+      mouseDown(0, 0, component, {}, separatorX, headerY);
+
+      // Drag to resize
+      const newX = separatorX + 50;
+      mouseMove(0, 0, component, {}, newX, headerY);
+
+      // End drag
+      mouseUp(0, 0, component, {}, newX, headerY);
+
+      // Should complete the resize
+      expect(component.state.isDragging).toBe(false);
+      expect(component.state.draggingColumnSeparator).toBeNull();
+    });
+
+    it('should not initiate resize when not over separator', () => {
+      const component = makeGridComponent(new MockGridModel(), resizableTheme);
+      const centerX = getClientX(0); // Center of column, not separator
+      const headerY = getColumnHeaderY();
+
+      // Click in center of column header
+      mouseDown(0, 0, component, {}, centerX, headerY);
+
+      // Should not initiate column resize
+      expect(component.state.isDragging).toBe(false);
+      expect(component.state.draggingColumnSeparator).toBeNull();
+    });
+  });
+
+  describe('column separator double-click interactions', () => {
+    it('should auto-size column on double-click on separator', () => {
+      const component = makeGridComponent(new MockGridModel(), resizableTheme);
+      const separatorX = getColumnSeparatorX(0);
+      const headerY = getColumnHeaderY();
+
+      // Double-click on separator using the correct function name
+      mouseDoubleClick(0, 0, component, {}, separatorX, headerY);
+
+      // Should trigger auto-sizing (exact behavior depends on implementation)
+      // The key is that the getSeparator path was exercised
+      expect(component.state).toBeDefined();
+    });
+
+    it('should not auto-size when double-clicking away from separator', () => {
+      const component = makeGridComponent(new MockGridModel(), resizableTheme);
+      const centerX = getClientX(0); // Center of column
+      const headerY = getColumnHeaderY();
+
+      // Double-click in center of column header
+      mouseDoubleClick(0, 0, component, {}, centerX, headerY);
+
+      // Should not trigger auto-sizing behavior
+      expect(component.state.isDragging).toBe(false);
+    });
+  });
+
+  describe('column separator with different grid configurations', () => {
+    it('should handle separator detection with floating columns', () => {
+      const model = new MockGridModel({
+        floatingLeftColumnCount: 1,
+        columnCount: 5,
+      });
+      const component = makeGridComponent(model, resizableTheme);
+
+      // Test separator for floating column
+      const separatorX = getColumnSeparatorX(0);
+      const headerY = getColumnHeaderY();
+
+      mouseMove(0, 0, component, {}, separatorX, headerY);
+
+      // Should handle floating column separators
+      expect(component.state.cursor).toBeDefined();
+    });
+  });
+});

packages/iris-grid/src/IrisGrid.tsx

@@ -277,6 +277,10 @@ export type MouseHandlersProp = readonly (
   | ((irisGrid: IrisGrid) => GridMouseHandler)
 )[];
 
+export type GetMetricCalculatorType = (
+  ...args: ConstructorParameters<typeof IrisGridMetricCalculator>
+) => IrisGridMetricCalculator;
+
 export interface IrisGridProps {
   children: React.ReactNode;
   advancedFilters: ReadonlyAdvancedFilterMap;
@@ -365,6 +369,8 @@ export interface IrisGridProps {
   renderer?: IrisGridRenderer;
 
   density?: 'compact' | 'regular' | 'spacious';
+
+  getMetricCalculator: GetMetricCalculatorType;
 }
 
 export interface IrisGridState {
@@ -550,6 +556,9 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     canToggleSearch: true,
     mouseHandlers: EMPTY_ARRAY,
     keyHandlers: EMPTY_ARRAY,
+    getMetricCalculator: (
+      ...args: ConstructorParameters<typeof IrisGridMetricCalculator>
+    ): IrisGridMetricCalculator => new IrisGridMetricCalculator(...args),
   };
 
   constructor(props: IrisGridProps) {
@@ -735,20 +744,16 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       canCopy,
       frozenColumns,
       columnHeaderGroups,
+      getMetricCalculator,
     } = props;
 
-    const { mouseHandlers: mouseHandlersProp } = props;
-
     const { dh } = model;
     const keyHandlers: KeyHandler[] = [
       new CopyCellKeyHandler(this),
       new ReverseKeyHandler(this),
       new ClearFilterKeyHandler(this),
     ];
-    const mouseHandlers: (
-      | GridMouseHandler
-      | ((irisGrid: IrisGrid) => GridMouseHandler)
-    )[] = [
+    const mouseHandlers: MouseHandlersProp = [
       new IrisGridCellOverflowMouseHandler(this),
       new IrisGridRowTreeMouseHandler(this),
       new IrisGridTokenMouseHandler(this),
@@ -760,11 +765,10 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       new IrisGridDataSelectMouseHandler(this),
       new PendingMouseHandler(this),
       new IrisGridPartitionedTableMouseHandler(this),
-      ...mouseHandlersProp,
+      ...(canCopy ? [new IrisGridCopyCellMouseHandler(this)] : []),
     ];
     if (canCopy) {
       keyHandlers.push(new CopyKeyHandler(this));
-      mouseHandlers.push(new IrisGridCopyCellMouseHandler(this));
     }
     const movedColumns =
       movedColumnsProp.length > 0
@@ -773,7 +777,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     const movedRows =
       movedRowsProp.length > 0 ? movedRowsProp : model.initialMovedRows;
 
-    const metricCalculator = new IrisGridMetricCalculator({
+    const metricCalculator = getMetricCalculator({
       userColumnWidths: new Map(userColumnWidths),
       userRowHeights: new Map(userRowHeights),
       movedColumns,

packages/iris-grid/src/IrisGridMetricCalculator.test.ts

@@ -47,6 +47,9 @@ describe('IrisGridMetricCalculator', () => {
         const index = columns.findIndex(col => col.name === name);
         return index !== -1 ? index : undefined;
       },
+      get columnHeaderGroups() {
+        return [];
+      },
     });
     calculator = new IrisGridMetricCalculator();
     state = makeGridMetricState(model);