feat: IrisGridTheme iconSize (#2123)

This is part of the work needed for #885 that I felt would be better as
a separate PR.

Snapshot changes are going to be slightly shifted sort icon and vertical
center + slight left shift on tree table arrows.

Author: mattrunyon

packages/grid/src/GridRenderer.ts

@@ -1082,11 +1082,12 @@ export class GridRenderer {
       context.beginPath();
       for (let i = 0; i < depth - depthDiff; i += 1) {
         const lineX =
-          columnX +
-          i * treeDepthIndent +
-          treeDepthIndent * 0.5 +
-          treeHorizontalPadding +
-          0.5;
+          Math.floor(
+            columnX +
+              i * treeDepthIndent +
+              treeDepthIndent * 0.5 +
+              treeHorizontalPadding
+          ) + 0.5; // The 0.5 makes the line crisp https://stackoverflow.com/questions/9311428/draw-single-pixel-line-in-html5-canvas
         context.moveTo(lineX, rowY);
         context.lineTo(lineX, rowY + rowHeight);
       }
@@ -1098,18 +1099,19 @@ export class GridRenderer {
       context.beginPath();
       for (let i = depth - depthDiff; i < depth; i += 1) {
         const lineX =
-          columnX +
-          i * treeDepthIndent +
-          treeDepthIndent * 0.5 +
-          treeHorizontalPadding +
-          0.5;
+          Math.floor(
+            columnX +
+              i * treeDepthIndent +
+              treeDepthIndent * 0.5 +
+              treeHorizontalPadding
+          ) + 0.5;
         context.moveTo(lineX, rowY);
-        context.lineTo(lineX, rowY + Math.ceil(rowHeight / 2));
+        context.lineTo(lineX, rowY + Math.floor(rowHeight / 2));
         // extra moveTo prevents halfpixel in corner
-        context.moveTo(lineX - 0.5, rowY + Math.ceil(rowHeight / 2) + 0.5);
+        context.moveTo(lineX - 0.5, rowY + Math.floor(rowHeight / 2) + 0.5);
         context.lineTo(
           lineX + treeDepthIndent - 0.5,
-          rowY + Math.ceil(rowHeight / 2) + 0.5
+          rowY + Math.floor(rowHeight / 2) + 0.5
         );
       }
       context.stroke();

packages/iris-grid/src/IrisGrid.tsx

@@ -1498,7 +1498,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     return rowIndex != null ? modelRows.get(rowIndex) : null;
   }
 
-  getTheme(): Partial<IrisGridThemeType> {
+  getTheme(): IrisGridThemeType {
     const { model, theme } = this.props;
 
     return this.getCachedTheme(

packages/iris-grid/src/IrisGridCellRendererUtils.ts

@@ -13,12 +13,15 @@ class IrisGridCellRendererUtils {
     isExpanded: boolean
   ): void {
     context.save();
-    const { x1, y1 } = treeBox;
+    const { theme } = state;
+    const { iconSize } = theme;
+    const { x1, x2, y1, y2 } = treeBox;
     const markerIcon = isExpanded
-      ? getIcon('caretDown')
-      : getIcon('caretRight');
-    const iconX = columnX + x1 - 2;
-    const iconY = rowY + y1 + 2.5;
+      ? getIcon('caretDown', iconSize)
+      : getIcon('caretRight', iconSize);
+
+    const iconX = columnX + (x1 + x2) / 2 - iconSize / 2; // Midpoint of the tree box minus half the icon width
+    const iconY = rowY + (y2 - y1 - iconSize) / 2; // y2 - y1 is effectively rowHeight
 
     context.fillStyle = color;
     context.textAlign = 'center';

packages/iris-grid/src/IrisGridIcons.ts

@@ -1,15 +1,12 @@
 import { memoizeClear } from '@deephaven/grid';
 import {
-  dhSortDown,
-  dhSortUp,
   vsTriangleDown,
   vsTriangleRight,
+  vsTriangleUp,
   vsLinkExternal,
   IconDefinition,
 } from '@deephaven/icons';
 
-export const ICON_SIZE = 16;
-
 export type IconName =
   | 'sortUp'
   | 'sortDown'
@@ -18,15 +15,15 @@ export type IconName =
   | 'cellOverflow';
 
 const iconMap = new Map<IconName, IconDefinition>([
-  ['sortUp', dhSortUp],
-  ['sortDown', dhSortDown],
+  ['sortUp', vsTriangleUp],
+  ['sortDown', vsTriangleDown],
   ['caretDown', vsTriangleDown],
   ['caretRight', vsTriangleRight],
   ['cellOverflow', vsLinkExternal],
 ]);
 
 const makeIcon = memoizeClear(
-  (name: IconName) => {
+  (name: IconName, size: number) => {
     const faIcon = iconMap.get(name);
     if (faIcon === undefined) {
       throw new Error('Icon is undefined');
@@ -38,15 +35,15 @@ const makeIcon = memoizeClear(
     const icon = new Path2D(path);
     const scaledIcon = new Path2D();
     const scaleMatrix = {
-      a: ICON_SIZE / faIcon.icon[0],
-      d: ICON_SIZE / faIcon.icon[1],
+      a: size / faIcon.icon[0],
+      d: size / faIcon.icon[1],
     };
     scaledIcon.addPath(icon, scaleMatrix);
     return scaledIcon;
   },
   { max: 1000 }
 );
 
-export function getIcon(name: IconName): Path2D {
-  return makeIcon(name);
+export function getIcon(name: IconName, size: number): Path2D {
+  return makeIcon(name, size);
 }

packages/iris-grid/src/IrisGridRenderer.ts

@@ -1,6 +1,4 @@
-/* eslint react/destructuring-assignment: "off" */
 /* eslint class-methods-use-this: "off" */
-/* eslint no-param-reassign: "off" */
 import {
   BoundedAxisRange,
   Coordinate,
@@ -69,15 +67,15 @@ export class IrisGridRenderer extends GridRenderer {
 
   protected dataBarCellRenderer = new IrisGridDataBarCellRenderer();
 
-  getSortIcon(sort: dh.Sort | null): Path2D | null {
+  getSortIcon(sort: dh.Sort | null, size: number): Path2D | null {
     if (!sort) {
       return null;
     }
     if (sort.direction === TableUtils.sortDirection.ascending) {
-      return getIcon(ICON_NAMES.SORT_UP);
+      return getIcon(ICON_NAMES.SORT_UP, size);
     }
     if (sort.direction === TableUtils.sortDirection.descending) {
-      return getIcon(ICON_NAMES.SORT_DOWN);
+      return getIcon(ICON_NAMES.SORT_DOWN, size);
     }
     return null;
   }
@@ -135,7 +133,7 @@ export class IrisGridRenderer extends GridRenderer {
     mouseX: Coordinate | null;
     mouseY: Coordinate | null;
     metrics: GridMetrics | undefined;
-    theme: GridThemeType;
+    theme: IrisGridThemeType;
   }): {
     left: Coordinate | null;
     top: Coordinate | null;
@@ -173,6 +171,7 @@ export class IrisGridRenderer extends GridRenderer {
       cellHorizontalPadding,
       overflowButtonColor,
       overflowButtonHoverColor,
+      iconSize,
     } = theme;
 
     context.save();
@@ -191,9 +190,12 @@ export class IrisGridRenderer extends GridRenderer {
     } else if (overflowButtonColor != null) {
       context.fillStyle = overflowButtonColor;
     }
-    const icon = getIcon(ICON_NAMES.CELL_OVERFLOW);
-    if (buttonLeft != null && buttonTop != null) {
-      context.translate(buttonLeft + cellHorizontalPadding, buttonTop + 2);
+    const icon = getIcon(ICON_NAMES.CELL_OVERFLOW, iconSize);
+    if (buttonLeft != null && buttonTop != null && buttonHeight != null) {
+      context.translate(
+        buttonLeft + cellHorizontalPadding,
+        buttonTop + (buttonHeight - iconSize) / 2
+      );
     }
     context.fill(icon);
 
@@ -470,7 +472,8 @@ export class IrisGridRenderer extends GridRenderer {
       fontWidths,
     } = metrics;
 
-    const { headerHorizontalPadding } = theme;
+    const { headerHorizontalPadding, iconSize: themeIconSize } = theme;
+    const iconSize = Math.round(themeIconSize * 0.75); // The vsTriangle icons are a bit bigger than we want
     const columnWidth = getOrThrow(allColumnWidths, index, 0);
     const columnX = getOrThrow(allColumnXs, index) + gridX;
     const modelColumn = modelColumns.get(index);
@@ -491,7 +494,7 @@ export class IrisGridRenderer extends GridRenderer {
       return;
     }
 
-    const icon = this.getSortIcon(sort);
+    const icon = this.getSortIcon(sort, iconSize);
     if (!icon) {
       return;
     }
@@ -506,14 +509,14 @@ export class IrisGridRenderer extends GridRenderer {
     const textWidth = text.length * fontWidth;
     const textRight = gridX + columnX + textWidth + headerHorizontalPadding;
     let { maxX } = bounds;
-    maxX -= headerHorizontalPadding;
-    const defaultX =
-      gridX + columnX + columnWidth - headerHorizontalPadding - 1;
+    maxX -= headerHorizontalPadding; // Right visible edge of the headers
+    // Right edge of the column. The icon has its own horizontal padding
+    const defaultX = gridX + columnX + columnWidth - iconSize;
 
+    // If the text is partially off the screen, put the icon to the right of the text
+    // else put it at the right edge of the column/grid (whichever is smaller)
     const x = textRight > maxX ? textRight + 1 : Math.min(maxX, defaultX);
-    const yOffset =
-      sort.direction === TableUtils.sortDirection.ascending ? -6 : -12;
-    const y = columnHeaderHeight * 0.5 + yOffset;
+    const y = (columnHeaderHeight - iconSize) * 0.5;
 
     context.save();
 

packages/iris-grid/src/IrisGridTextCellRenderer.ts

@@ -5,15 +5,14 @@ import {
   DEFAULT_FONT_WIDTH,
   getOrThrow,
   GridMetrics,
-  GridThemeType,
   GridUtils,
   TextCellRenderer,
   VisibleIndex,
 } from '@deephaven/grid';
 import { TableUtils } from '@deephaven/jsapi-utils';
 import { IrisGridRenderState } from './IrisGridRenderer';
-import { ICON_SIZE } from './IrisGridIcons';
 import IrisGridCellRendererUtils from './IrisGridCellRendererUtils';
+import type { IrisGridThemeType } from './IrisGridTheme';
 
 class IrisGridTextCellRenderer extends TextCellRenderer {
   drawCellContent(
@@ -85,7 +84,7 @@ class IrisGridTextCellRenderer extends TextCellRenderer {
     mouseX: Coordinate | null,
     mouseY: Coordinate | null,
     metrics: GridMetrics | undefined,
-    theme: GridThemeType
+    theme: IrisGridThemeType
   ): {
     left: Coordinate | null;
     top: Coordinate | null;
@@ -107,9 +106,9 @@ class IrisGridTextCellRenderer extends TextCellRenderer {
     }
 
     const { width: gridWidth, verticalBarWidth } = metrics;
-    const { cellHorizontalPadding } = theme;
+    const { cellHorizontalPadding, iconSize } = theme;
 
-    const width = ICON_SIZE + 2 * cellHorizontalPadding;
+    const width = iconSize + 2 * cellHorizontalPadding;
     const height = rowHeight;
     // Right edge of column or of visible grid, whichever is smaller
     const right = Math.min(

packages/iris-grid/src/IrisGridTheme.ts

@@ -46,6 +46,7 @@ export type IrisGridThemeType = GridThemeType & {
   overflowButtonColor: GridColor;
   overflowButtonHoverColor: GridColor;
   floatingGridRowColor: NullableGridColor;
+  iconSize: number;
 };
 
 /**
@@ -149,6 +150,7 @@ export function createDefaultIrisGridTheme(): IrisGridThemeType {
     sortHeaderBarHeight: 2,
     reverseHeaderBarHeight: 4,
     filterBarHorizontalPadding: 4,
+    iconSize: 16,
 
     activeCellSelectionBorderWidth:
       parseInt(IrisGridTheme['active-cell-selection-border-width'], 10) || 2,
@@ -182,5 +184,5 @@ export function createDefaultIrisGridTheme(): IrisGridThemeType {
     positiveBarColor: IrisGridTheme['positive-bar-color'],
     negativeBarColor: IrisGridTheme['negative-bar-color'],
     markerBarColor: IrisGridTheme['marker-bar-color'],
-  });
+  } satisfies IrisGridThemeType);
 }

packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap

@@ -57,6 +57,7 @@ exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1`
   "headerSeparatorHoverColor": "IrisGridTheme['header-separator-hover-color']",
   "headerSortBarColor": "IrisGridTheme['header-sort-bar-color']",
   "hyperlinkColor": "IrisGridTheme['hyperlink-color']",
+  "iconSize": 16,
   "linkerColumnHoverBackgroundColor": "IrisGridTheme['linker-column-hover-bg']",
   "markerBarColor": "IrisGridTheme['marker-bar-color']",
   "maxColumnWidth": 600,

packages/iris-grid/src/mousehandlers/IrisGridCellOverflowMouseHandler.ts

@@ -51,7 +51,7 @@ class IrisGridCellOverflowMouseHandler extends GridMouseHandler {
     const { model } = props;
 
     const { canvasContext: context } = grid;
-    const theme = grid.getTheme();
+    const theme = this.irisGrid.getTheme();
     const rendererState = {
       context,
       mouseX: x,