fix: DH-21658: Fix grid rendering hidden columns (#2626)

Two performance optimizations:
- grid renderer should not iterate over hidden columns
- metrics should not recalculate the width of a hidden column

Author: dgodinez-dh

packages/grid/src/GridMetricCalculator.ts

@@ -262,7 +262,7 @@ export class GridMetricCalculator {
     const treePaddingY = 0; // We don't support trees on columns (at least not yet)
 
     const visibleRowHeights = this.getVisibleRowHeights(state);
-    const visibleColumnWidths = this.getVisibleColumnWidths(
+    const [visibleColumnWidths, columnsForRender] = this.getVisibleColumnWidths(
       state,
       firstColumn,
       treePaddingX
@@ -612,10 +612,13 @@ export class GridMetricCalculator {
       scrollableViewportWidth,
       scrollableViewportHeight,
 
-      // Array of visible rows/columns, by grid index
+      // Array of visible (i.e., in the viewport) rows/columns, by VisibleIndex
       visibleRows,
       visibleColumns,
 
+      // Array of visible, non-hidden columns, by VisibleIndex
+      columnsForRender,
+
       // Map of the height/width of columns in the viewport (excluding floating columns)
       visibleRowHeights,
       visibleColumnWidths,
@@ -1060,18 +1063,19 @@ export class GridMetricCalculator {
   /**
    * Retrieve a map of the width of all the visible columns (non-floating)
    * @param state The grid metric state
-   * @returns The widths of all the visible columns
+   * @returns The widths of all the visible columns and an array of visible, non-hidden columns
    */
   getVisibleColumnWidths(
     state: GridMetricState,
     firstColumn: VisibleIndex = this.getFirstColumn(state),
     treePaddingX: number = this.calculateTreePaddingX(state)
-  ): SizeMap {
+  ): [SizeMap, VisibleIndex[]] {
     const { left, leftOffset, width, model } = state;
 
     let x = 0;
     let column = left;
     const columnWidths = new Map();
+    const columnsForRender: VisibleIndex[] = [];
     const { columnCount, floatingRightColumnCount } = model;
     while (
       x < width + leftOffset &&
@@ -1084,11 +1088,14 @@ export class GridMetricCalculator {
         treePaddingX
       );
       columnWidths.set(column, columnWidth);
+      if (columnWidth > 0) {
+        columnsForRender.push(column);
+      }
       x += columnWidth;
       column += 1;
     }
 
-    return columnWidths;
+    return [columnWidths, columnsForRender];
   }
 
   /**
@@ -1706,6 +1713,13 @@ export class GridMetricCalculator {
       return columnWidth;
     }
 
+    const cachedValue = this.calculatedColumnWidths.get(modelColumn);
+
+    // Performance optimization: if the column is hidden and has a cached value, avoid recalculating until the column is shown again
+    if (cachedValue != null && this.isColumnHidden(modelColumn)) {
+      return cachedValue;
+    }
+
     const headerWidth = this.calculateColumnHeaderWidth(
       modelColumn,
       state,
@@ -1716,7 +1730,6 @@ export class GridMetricCalculator {
       state,
       maxColumnWidth
     );
-    const cachedValue = this.calculatedColumnWidths.get(modelColumn);
     let columnWidth = Math.ceil(Math.max(headerWidth, dataWidth));
     columnWidth = Math.max(minColumnWidth, columnWidth);
     columnWidth = Math.min(maxColumnWidth, columnWidth);
@@ -1737,6 +1750,21 @@ export class GridMetricCalculator {
     return columnWidth;
   }
 
+  /**
+   * Checks if a column is hidden either by a user setting the width to 0 or by initial width being 0
+   * @param modelIndex the model index of the column to check
+   * @returns true if the column is hidden, false otherwise
+   */
+  isColumnHidden(modelIndex: ModelIndex): boolean {
+    const userSetWidth = this.userColumnWidths.get(modelIndex);
+    // The column is hidden if the user set the width to 0 or if the initial width is 0 and the user hasn't set a width
+    return (
+      userSetWidth === 0 ||
+      (userSetWidth === undefined &&
+        this.initialColumnWidths.get(modelIndex) === 0)
+    );
+  }
+
   /**
    * Calculate the width of the specified column's header
    * @param modelColumn ModelIndex of the column to get the header width for

packages/grid/src/GridMetrics.ts

@@ -129,10 +129,14 @@ export type GridMetrics = {
   scrollableViewportWidth: number;
   scrollableViewportHeight: number;
 
-  // Array of visible rows/columns, by grid index
+  // Array of visible (i.e., in the viewport) rows/columns, by VisibleIndex
   visibleRows: readonly VisibleIndex[];
   visibleColumns: readonly VisibleIndex[];
 
+  // Renderer performance optimization - array of visible, non-hidden columns, by VisibleIndex
+  // Use visibleColumns if hidden columns should be included (e.g. rendering column headers)
+  columnsForRender: readonly VisibleIndex[];
+
   // Map of the height/width of visible rows/columns
   visibleRowHeights: SizeMap;
   visibleColumnWidths: SizeMap;

packages/grid/src/GridRenderer.ts

@@ -259,7 +259,7 @@ export class GridRenderer {
       floatingBottomRowCount,
       floatingRows,
       rowCount,
-      visibleColumns,
+      columnsForRender,
       allRowYs,
       allRowHeights,
     } = metrics;
@@ -284,7 +284,7 @@ export class GridRenderer {
     this.drawGridLinesForItems(
       context,
       state,
-      visibleColumns,
+      columnsForRender,
       floatingRows,
       theme.floatingGridColumnColor,
       theme.floatingGridRowColor
@@ -293,7 +293,7 @@ export class GridRenderer {
     this.drawCellBackgroundsForItems(
       context,
       state,
-      visibleColumns,
+      columnsForRender,
       floatingRows
     );
 
@@ -323,8 +323,8 @@ export class GridRenderer {
     }
 
     // Draw the cell content...
-    for (let c = 0; c < visibleColumns.length; c += 1) {
-      const column = visibleColumns[c];
+    for (let c = 0; c < columnsForRender.length; c += 1) {
+      const column = columnsForRender[c];
       for (let r = 0; r < floatingRows.length; r += 1) {
         const row = floatingRows[r];
         this.drawCellContent(context, state, column, row);
@@ -850,12 +850,12 @@ export class GridRenderer {
     state: GridRenderState
   ): void {
     const { metrics, theme } = state;
-    const { visibleColumns, visibleRows } = metrics;
+    const { columnsForRender, visibleRows } = metrics;
 
     this.drawGridLinesForItems(
       context,
       state,
-      visibleColumns,
+      columnsForRender,
       visibleRows,
       theme.gridColumnColor,
       theme.gridRowColor
@@ -927,11 +927,11 @@ export class GridRenderer {
     state: GridRenderState
   ): void {
     const { metrics } = state;
-    const { visibleColumns, visibleRows } = metrics;
+    const { columnsForRender, visibleRows } = metrics;
     this.drawCellBackgroundsForItems(
       context,
       state,
-      visibleColumns,
+      columnsForRender,
       visibleRows
     );
   }
@@ -1004,10 +1004,10 @@ export class GridRenderer {
     state: GridRenderState
   ): void {
     const { metrics } = state;
-    const { visibleColumns } = metrics;
+    const { columnsForRender } = metrics;
 
-    for (let i = 0; i < visibleColumns.length; i += 1) {
-      const column = visibleColumns[i];
+    for (let i = 0; i < columnsForRender.length; i += 1) {
+      const column = columnsForRender[i];
       this.drawColumnCellContents(context, state, column);
     }
   }