fix: Fix column width calculation logic in grid (#2370)

- Noticed this when testing some things on Enterprise. The column header
“SPet500” in the stocks table is truncated when it shouldn’t be. For
some reason this case didn’t occur on Core, perhaps due to slight
differences in canvas configurations.
- Rounded down text measurement done in
`GridRenderer.binaryTruncateToWidth()` as the measured text width with
can differ slightly from the passed in estimated column width. This will
prevent cases where text is truncated when it shouldn't be.

Stocks table for testing:
```
import deephaven.plot.express as dx
stocks = dx.data.stocks();
```

Author: ericlln

packages/grid/src/GridMetricCalculator.test.ts

@@ -42,14 +42,18 @@ describe('trimMap', () => {
   });
 });
 
-describe('getTextWidth', () => {
-  const font = 'mock font';
+describe('calculateTextWidth', () => {
+  let font = 'mock font';
   const mockCharWidths = new Map([
     ['a', 10],
     ['b', 20],
     ['c', 30],
     ['d', 40],
     ['e', 50],
+    ['ab', 30],
+    ['bc', 50],
+    ['cd', 70],
+    ['de', 90],
   ]);
   let gridMetricCalculator;
   let allCharWidths;
@@ -70,7 +74,7 @@ describe('getTextWidth', () => {
       })),
     };
 
-    const textWidth = gridMetricCalculator.getTextWidth(
+    const textWidth = gridMetricCalculator.calculateTextWidth(
       mockContext,
       font,
       input
@@ -94,18 +98,17 @@ describe('getTextWidth', () => {
       measureText: jest.fn(),
     };
 
-    const firstRun = gridMetricCalculator.getTextWidth(
+    const firstRun = gridMetricCalculator.calculateTextWidth(
       mockContext,
       font,
       input
     );
-    const secondRun = gridMetricCalculator.getTextWidth(
+    const secondRun = gridMetricCalculator.calculateTextWidth(
       dummyMockContext,
       font,
       input
     );
 
-    expect(mockContext.measureText).toHaveBeenCalledTimes(input.length);
     expect(dummyMockContext.measureText).toHaveBeenCalledTimes(0);
     expect(firstRun).toEqual(100);
     expect(secondRun).toEqual(100);
@@ -119,7 +122,7 @@ describe('getTextWidth', () => {
       })),
     };
 
-    const textWidth = gridMetricCalculator.getTextWidth(
+    const textWidth = gridMetricCalculator.calculateTextWidth(
       mockContext,
       font,
       input,
@@ -128,4 +131,41 @@ describe('getTextWidth', () => {
 
     expect(textWidth).toEqual(50);
   });
+
+  // This test checks that the calculation logic is equivalent to the native canvas one.
+  // It doesn’t verify that it addresses font kerning properly, since it doesn’t actually render the text and context.measureText() just returns the text length
+  it.each([
+    [''],
+    ['a'],
+    ['a                                                                 b'],
+    [
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    ],
+    [
+      'iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
+    ],
+    [
+      'mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm',
+    ],
+    [
+      'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+    ],
+  ])(
+    'should match the value calculated by context.measureText(): "%s"',
+    text => {
+      const canvas = global.document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      font = '20px Arial';
+
+      if (context === null) {
+        throw new Error('Could not get canvas context');
+      }
+
+      context.font = font;
+      const a = gridMetricCalculator.calculateTextWidth(context, font, text);
+      const b = context.measureText(text).width;
+
+      expect(a).toEqual(b);
+    }
+  );
 });

packages/grid/src/GridMetricCalculator.ts

@@ -1752,7 +1752,7 @@ export class GridMetricCalculator {
     const headerText = model.textForColumnHeader(modelColumn, 0);
     if (headerText !== undefined && headerText !== '') {
       return (
-        this.getTextWidth(
+        this.calculateTextWidth(
           context,
           headerFont,
           headerText,
@@ -1809,7 +1809,7 @@ export class GridMetricCalculator {
         let cellWidth = 0;
         if (text) {
           cellWidth =
-            this.getTextWidth(
+            this.calculateTextWidth(
               context,
               font,
               text,
@@ -1837,36 +1837,62 @@ export class GridMetricCalculator {
     return columnWidth;
   }
 
-  getTextWidth(
+  /**
+   * Calculates the width of a string using widths of individual and pairs of characters to take into account font kerning
+   * @param context The canvas rendering context
+   * @param font The font to get the width for
+   * @param text The text to calculate the width for
+   * @param maxWidth The maximum width to calculate to
+   */
+  calculateTextWidth(
     context: CanvasRenderingContext2D,
     font: string,
     text: string,
     maxWidth?: number
   ): number {
+    if (text.length === 0) return 0;
+    context.font = font;
+
     if (!this.allCharWidths.has(font)) {
       this.allCharWidths.set(font, new Map());
     }
-
     const charWidths = getOrThrow(this.allCharWidths, font);
 
-    let width = 0;
+    let result = 0;
     for (let i = 0; i < text.length; i += 1) {
       const char = text[i];
+      const nextChar = text[i + 1];
 
-      if (charWidths.has(char)) {
-        width += getOrThrow(charWidths, char);
-      } else {
-        const textMetrics = context.measureText(char);
-        const { width: charWidth } = textMetrics;
-        charWidths.set(char, charWidth);
-        width += charWidth;
+      if (!charWidths.has(char)) {
+        charWidths.set(char, context.measureText(char).width);
       }
 
-      if (maxWidth !== undefined && width > maxWidth) {
-        return maxWidth;
+      if (nextChar !== undefined) {
+        if (!charWidths.has(nextChar)) {
+          charWidths.set(nextChar, context.measureText(nextChar).width);
+        }
+
+        const pair = char + nextChar;
+        if (!charWidths.has(pair)) {
+          charWidths.set(pair, context.measureText(pair).width);
+        }
+
+        result += getOrThrow(charWidths, pair);
+        if (i > 0) {
+          // Need to remove the current character that was already counted in the previous pair
+          result -= getOrThrow(charWidths, char);
+        }
+
+        if (maxWidth !== undefined && result > maxWidth) {
+          return maxWidth;
+        }
+      } else if (result === 0) {
+        // On last char and no pair found before that => Only one char in string
+        result = getOrThrow(charWidths, char);
       }
     }
-    return width;
+
+    return result;
   }
 
   /**
@@ -1896,7 +1922,7 @@ export class GridMetricCalculator {
   /**
    * Calculates the lower bound width of a character of the provided font.
    * @param font The font to get the width for
-   * @param state The grid metric state
+   * @param context The canvas rendering context
    */
   calculateLowerFontWidth(
     font: GridFont,
@@ -1920,7 +1946,7 @@ export class GridMetricCalculator {
   /**
    * Calculates the upper bound width of a character of the provided font.
    * @param font The font to get the width for
-   * @param state The grid metric state
+   * @param context The canvas rendering context
    */
   calculateUpperFontWidth(
     font: GridFont,