fix: DH-20229: Value is null or undefined when scrolling rollup (#2538)

The "Value is null or undefined" error was thrown from calling
`IrisGridTreeTableModel.textAlignForCell`when scrolling a table with
expanded rollups while hovering on a row.

I think these errors are due to `textAlignForCell` not being able to
find the row in the viewport when scrolling rapidly as it has already
left the viewport, and so it shouldn't matter what is returned in this
case if the cell isn't displayed on screen.
- In this case, the row is only used to determine whether the
constituent type should be used for formatting, and will now fallback to
the column type when the row is null.

To address potential issues with scrolling in the future, some tests
involving scrolling a table were added. These mainly represent the
failure scenario seen in the ticket, but more can be added in the future
to test other scenarios.
- From running the tests, a similar error was found in
`IrisGridRenderer.getExpandButtonPosition`, and a fallback value has
been added to replace the not null assertions there as well. This is the
same pattern used in
`IrisGridTextCellRenderer.ts.getCellOverflowButtonPosition`

Author: ericlln

packages/iris-grid/src/IrisGridRenderer.ts

@@ -915,9 +915,10 @@ export class IrisGridRenderer extends GridRenderer {
       metrics
     );
 
-    assertNotNull(left);
-    assertNotNull(rowHeight);
-    assertNotNull(top);
+    if (left == null || rowHeight == null || top == null) {
+      return NULL_POSITION;
+    }
+
     const { cellHorizontalPadding } = theme;
 
     const width = EXPAND_ICON_SIZE + 2 * cellHorizontalPadding;

packages/iris-grid/src/IrisGridTreeTableModel.ts

@@ -248,8 +248,6 @@ class IrisGridTreeTableModel
     }
 
     const row = this.row(y);
-    assertNotNull(row);
-
     let typeForFormatting = column.type;
 
     // For tree table leaf nodes, use the constituent type for formatting

tests/table-operations.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect, Page } from '@playwright/test';
+import { test, expect, type Page } from '@playwright/test';
 import {
   makeTableCommand,
   pasteInMonaco,
@@ -113,6 +113,9 @@ test.beforeEach(async ({ page }) => {
       throw new Error(msg.text());
     }
   });
+  page.on('pageerror', error => {
+    throw error;
+  });
 
   await openTable(page, 'all_types');
 

tests/table-scroll.spec.ts

@@ -0,0 +1,131 @@
+import { test, expect, type Page } from '@playwright/test';
+import {
+  waitForLoadingDone,
+  openTableOption,
+  openTable,
+  gotoPage,
+} from './utils';
+
+// Scroll the table by scrolling the mouse wheel, whilst moving the mouse up and down to test hovering functionality
+async function scrollTableWhileMovingMouse(page: Page) {
+  const gridCanvas = page.locator('.iris-grid .grid-wrapper');
+  const box = await gridCanvas.boundingBox();
+  if (!box) throw new Error('No bounding box found for grid canvas');
+
+  let mouseY = box.y + 120;
+  const mouseX = box.x + 20;
+  const mouseStep = 40;
+
+  const scrollDeltas = [
+    1000, -600, 1600, -1200, 2000, -2000, 1000, -400, 1400, -1000,
+  ];
+
+  for (let i = 0; i < scrollDeltas.length; i += 1) {
+    mouseY += i % 2 === 0 ? -mouseStep : mouseStep;
+    // eslint-disable-next-line no-await-in-loop
+    await page.mouse.move(mouseX, mouseY);
+
+    let remaining = Math.abs(scrollDeltas[i]);
+    const direction = Math.sign(scrollDeltas[i]);
+    const scrollStep = 100;
+
+    while (remaining > 0) {
+      const step = Math.min(scrollStep, remaining);
+      // eslint-disable-next-line no-await-in-loop
+      await page.mouse.wheel(0, step * direction);
+      remaining -= step;
+    }
+  }
+}
+
+test.beforeEach(async ({ page }) => {
+  await gotoPage(page, '');
+
+  // Fail quickly if console errors are detected
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      throw new Error(msg.text());
+    }
+  });
+  page.on('pageerror', error => {
+    throw error;
+  });
+});
+
+test('scroll with keyboard shortcuts', async ({ page }) => {
+  // Use simple_table for its scrollable number of rows
+  await openTable(page, 'simple_table');
+
+  const gridCanvas = page.locator('.iris-grid .grid-wrapper');
+  await gridCanvas.click({ position: { x: 10, y: 80 } });
+  await waitForLoadingDone(page);
+
+  // Down
+  await page.keyboard.press('ArrowDown');
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  // Up
+  await page.keyboard.press('ArrowUp');
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  // Page Down
+  await page.keyboard.press('PageDown');
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  // Page Up
+  await page.keyboard.press('PageUp');
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  // End
+  await page.keyboard.press('ControlOrMeta+ArrowDown');
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+
+  // Home
+  await page.keyboard.press('ControlOrMeta+ArrowUp');
+  await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+});
+
+test('scroll while moving mouse over rows', async ({ page }) => {
+  // Use simple_table for its scrollable number of rows
+  await openTable(page, 'simple_table');
+
+  const gridCanvas = page.locator('.iris-grid .grid-wrapper');
+  await gridCanvas.click({ position: { x: 10, y: 80 } });
+  await waitForLoadingDone(page);
+
+  await scrollTableWhileMovingMouse(page);
+});
+
+test('scroll expanded rollup while moving mouse over rows', async ({
+  page,
+}) => {
+  // Use simple_table for its scrollable number of rows
+  await openTable(page, 'simple_table');
+
+  await test.step('Open Rollup Rows option', async () => {
+    const tableOperationsMenu = page.locator(
+      'data-testid=btn-iris-grid-settings-button-table'
+    );
+    await tableOperationsMenu.click();
+    // Wait for Table Options menu to show
+    await expect(page.locator('.table-sidebar')).toHaveCount(1);
+    await openTableOption(page, 'Rollup Rows');
+
+    await test.step('Rollup column', async () => {
+      const xColumn = page.getByRole('button', { name: 'y' });
+      expect(xColumn).toBeTruthy();
+      await xColumn.dblclick();
+      await waitForLoadingDone(page);
+    });
+
+    await test.step('Expand constituent with non-aggregated columns visible', async () => {
+      const gridCanvas = page.locator('.iris-grid .grid-wrapper');
+      await gridCanvas.click({ position: { x: 10, y: 80 } });
+      await waitForLoadingDone(page);
+    });
+
+    await test.step('Scroll while moving mouse over rows', async () => {
+      await scrollTableWhileMovingMouse(page);
+    });
+  });
+});