fix: DH-19614: Add tree table formatting logic to tree model (#2461)

Part of DH-19614. Fixes an issue with rollups where tree table
aggregated constituents were not being rendered based on the original
column type. This change ensures that leaf nodes in tree tables use the
appropriate column type for formatting and alignment.

Changes:
- Added tree table specific overrides to `IrisGridTreeTableModel`:
- Updated `colorForCell` to use `column.constituentType` instead of
`column,type` for leaf node values
- Updated `textAlignForCell` to use `column.constituentType` for leaf
node values
- Added type guard `isUITreeRow` function in `IrisGridTreeTableModel.ts`

Author: gzh2003

packages/iris-grid/src/IrisGridTableModelTemplate.ts

@@ -630,22 +630,12 @@ class IrisGridTableModelTemplate<
       // Fallback to formatting based on the value/type of the cell
       if (value != null) {
         const column = this.sourceColumn(x, y);
-        if (TableUtils.isDateType(column.type) || column.name === 'Date') {
-          assertNotNull(theme.dateColor);
-          return theme.dateColor;
-        }
-        if (TableUtils.isNumberType(column.type)) {
-          if ((value as number) > 0) {
-            assertNotNull(theme.positiveNumberColor);
-            return theme.positiveNumberColor;
-          }
-          if ((value as number) < 0) {
-            assertNotNull(theme.negativeNumberColor);
-            return theme.negativeNumberColor;
-          }
-          assertNotNull(theme.zeroNumberColor);
-          return theme.zeroNumberColor;
-        }
+        return IrisGridUtils.colorForValue(
+          theme,
+          column.type,
+          column.name,
+          value
+        );
       }
     } else if (this.isPendingRow(y) && this.isKeyColumn(x)) {
       assertNotNull(theme.errorTextColor);
@@ -663,17 +653,10 @@ class IrisGridTableModelTemplate<
     return this.formatForCell(x, y)?.backgroundColor ?? null;
   }
 
-  textAlignForCell(x: ModelIndex): CanvasTextAlign {
-    const column = this.columns[x];
-    const { type } = column;
+  textAlignForCell(x: ModelIndex, y: ModelIndex): CanvasTextAlign {
+    const column = this.sourceColumn(x, y);
 
-    if (TableUtils.isNumberType(type)) {
-      return 'right';
-    }
-    if (TableUtils.isDateType(type) || column.name === 'Date') {
-      return 'center';
-    }
-    return 'left';
+    return IrisGridUtils.textAlignForValue(column.type, column.name);
   }
 
   textForColumnHeader(x: ModelIndex, depth = 0): string | undefined {

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

@@ -4,7 +4,10 @@ import { type dh as DhType } from '@deephaven/jsapi-types';
 import { TestUtils } from '@deephaven/test-utils';
 import { act } from 'react-dom/test-utils';
 import IrisGridTestUtils from './IrisGridTestUtils';
-import IrisGridTreeTableModel from './IrisGridTreeTableModel';
+import IrisGridTreeTableModel, {
+  type UITreeRow,
+} from './IrisGridTreeTableModel';
+import type { IrisGridThemeType } from './IrisGridTheme';
 
 const irisGridTestUtils = new IrisGridTestUtils(dh);
 
@@ -160,3 +163,157 @@ describe('IrisGridTreeTableModel snapshot', () => {
     }).not.toThrow();
   });
 });
+
+describe('IrisGridTreeTableModel colorForCell and textAlignForCell', () => {
+  let model: IrisGridTreeTableModel;
+
+  const mockTheme: IrisGridThemeType = {
+    textColor: '#text-color',
+    dateColor: '#date-color',
+    positiveNumberColor: '#positive-color',
+    negativeNumberColor: '#negative-color',
+    zeroNumberColor: '#zero-color',
+    nullStringColor: '#null-string-color',
+  } as IrisGridThemeType;
+
+  const columns = {
+    string: irisGridTestUtils.makeColumn('StrCol', 'java.lang.String', 0),
+    number: irisGridTestUtils.makeColumn('NumCol', 'int', 0),
+    date: irisGridTestUtils.makeColumn(
+      'DateCol',
+      'io.deephaven.time.DateTime',
+      0
+    ),
+    dateNamed: irisGridTestUtils.makeColumn('Date', 'java.lang.String', 0),
+  };
+
+  const rows = {
+    default: {
+      data: new Map(),
+      hasChildren: false,
+      isExpanded: false,
+      depth: 1,
+    } as UITreeRow,
+    parent: {
+      data: new Map(),
+      hasChildren: true,
+      isExpanded: false,
+      depth: 1,
+    } as UITreeRow,
+    leaf: {
+      data: new Map(),
+      hasChildren: false,
+      isExpanded: false,
+      depth: 2,
+    } as UITreeRow,
+  };
+
+  beforeEach(() => {
+    const testColumns = irisGridTestUtils.makeColumns();
+    const table = irisGridTestUtils.makeTreeTable(
+      testColumns,
+      testColumns.slice(0, 1),
+      100,
+      []
+    );
+    model = new IrisGridTreeTableModel(dh, table);
+
+    // Setup the basic mocks needed for assertNotNull checks
+    jest.spyOn(model, 'sourceColumn').mockReturnValue(columns.string);
+    jest.spyOn(model, 'row').mockReturnValue(rows.default);
+  });
+
+  const mockCell = (
+    value: unknown,
+    format?: { color?: string },
+    column?: DhType.Column,
+    row?: UITreeRow
+  ) => {
+    if (column) jest.spyOn(model, 'sourceColumn').mockReturnValue(column);
+    if (row) jest.spyOn(model, 'row').mockReturnValue(row);
+    jest.spyOn(model, 'dataForCell').mockReturnValue({ value, format });
+  };
+
+  describe('colorForCell', () => {
+    it('returns nullStringColor for null values', () => {
+      mockCell(null);
+      const result = model.colorForCell(0, 0, mockTheme);
+      expect(result).toBe(mockTheme.nullStringColor);
+    });
+
+    it('returns nullStringColor for empty strings', () => {
+      mockCell('');
+      const result = model.colorForCell(0, 0, mockTheme);
+      expect(result).toBe(mockTheme.nullStringColor);
+    });
+
+    it('returns custom color when available', () => {
+      const customColor = '#e0e0e0';
+      mockCell('test', { color: customColor });
+      const result = model.colorForCell(0, 0, mockTheme);
+      expect(result).toBe(customColor);
+    });
+
+    it('delegates to IrisGridUtils.colorForValue for standard color logic', () => {
+      mockCell(42, undefined, columns.number);
+      const result = model.colorForCell(0, 0, mockTheme);
+      expect(result).toBe(mockTheme.positiveNumberColor);
+    });
+  });
+
+  describe('colorForCell constituent type handling', () => {
+    it('uses constituent type for tree table leaf nodes', () => {
+      const constituentColumn = {
+        ...irisGridTestUtils.makeColumn('TestCol', 'java.lang.String', 0),
+        constituentType: 'int',
+      } as DhType.Column;
+
+      mockCell(1, undefined, constituentColumn, rows.leaf);
+      const result = model.colorForCell(0, 0, mockTheme);
+      expect(result).toBe(mockTheme.positiveNumberColor);
+    });
+
+    it('ignores constituent type for non-leaf nodes', () => {
+      const constituentColumn = {
+        ...irisGridTestUtils.makeColumn('TestCol', 'java.lang.String', 0),
+        constituentType: 'int',
+      } as DhType.Column;
+
+      mockCell('test', undefined, constituentColumn, rows.parent);
+      const result = model.colorForCell(0, 0, mockTheme);
+      expect(result).toBe(mockTheme.textColor);
+    });
+  });
+
+  describe('textAlignForCell', () => {
+    it('delegates to IrisGridUtils.textAlignForValue for standard alignment logic', () => {
+      mockCell('ignored', undefined, columns.number);
+      const result = model.textAlignForCell(0, 0);
+      expect(result).toBe('right');
+    });
+  });
+
+  describe('textAlignForCell constituent type handling', () => {
+    it('uses constituent type for tree table leaf nodes', () => {
+      const constituentColumn = {
+        ...irisGridTestUtils.makeColumn('TestCol', 'java.lang.String', 0),
+        constituentType: 'double',
+      } as DhType.Column;
+
+      mockCell('ignored', undefined, constituentColumn, rows.leaf);
+      const result = model.textAlignForCell(0, 0);
+      expect(result).toBe('right');
+    });
+
+    it('ignores constituent type for non-leaf nodes', () => {
+      const constituentColumn = {
+        ...irisGridTestUtils.makeColumn('TestCol', 'java.lang.String', 0),
+        constituentType: 'int',
+      } as DhType.Column;
+
+      mockCell('ignored', undefined, constituentColumn, rows.parent);
+      const result = model.textAlignForCell(0, 0);
+      expect(result).toBe('left');
+    });
+  });
+});

packages/iris-grid/src/IrisGridTreeTableModel.ts

@@ -13,6 +13,8 @@ import { assertNotNull, EventShimCustomEvent } from '@deephaven/utils';
 import { type UIRow, type ColumnName } from './CommonTypes';
 import IrisGridTableModelTemplate from './IrisGridTableModelTemplate';
 import IrisGridModel, { type DisplayColumn } from './IrisGridModel';
+import { type IrisGridThemeType } from './IrisGridTheme';
+import IrisGridUtils from './IrisGridUtils';
 
 const log = Log.module('IrisGridTreeTableModel');
 
@@ -55,6 +57,24 @@ export interface UITreeRow extends UIRow {
   depth: number;
 }
 
+/**
+ * Check if a row is a UITreeRow
+ * @param row The row to check
+ * @returns True if the row is a UITreeRow and false otherwise
+ */
+export function isUITreeRow(row: unknown): row is UITreeRow {
+  return (
+    row != null &&
+    typeof row === 'object' &&
+    'hasChildren' in row &&
+    'isExpanded' in row &&
+    'depth' in row &&
+    typeof row.hasChildren === 'boolean' &&
+    typeof row.isExpanded === 'boolean' &&
+    typeof row.depth === 'number'
+  );
+}
+
 type LayoutTreeTable = DhType.TreeTable & {
   layoutHints?: null | DhType.LayoutHints;
 };
@@ -155,6 +175,66 @@ class IrisGridTreeTableModel extends IrisGridTableModelTemplate<
     return super.textForCell(x, y);
   }
 
+  colorForCell(x: ModelIndex, y: ModelIndex, theme: IrisGridThemeType): string {
+    const data = this.dataForCell(x, y);
+    if (data) {
+      const { format, value } = data;
+      if (value == null || value === '') {
+        assertNotNull(theme.nullStringColor);
+        return theme.nullStringColor;
+      }
+      if (format?.color != null && format.color !== '') {
+        return format.color;
+      }
+
+      // Fallback to formatting based on the value/type of the cell
+      if (value != null) {
+        const column = this.sourceColumn(x, y);
+        const row = this.row(y);
+        assertNotNull(row);
+
+        let columnTypeForFormatting = column.type;
+
+        // For tree table leaf nodes, use the constituent type for formatting
+        if (
+          isUITreeRow(row) &&
+          row.hasChildren === false &&
+          column.constituentType != null
+        ) {
+          columnTypeForFormatting = column.constituentType;
+        }
+
+        return IrisGridUtils.colorForValue(
+          theme,
+          columnTypeForFormatting,
+          column.name,
+          value
+        );
+      }
+    }
+
+    return theme.textColor;
+  }
+
+  textAlignForCell(x: ModelIndex, y: ModelIndex): CanvasTextAlign {
+    const column = this.sourceColumn(x, y);
+    const row = this.row(y);
+    assertNotNull(row);
+
+    let typeForFormatting = column.type;
+
+    // For tree table leaf nodes, use the constituent type for formatting
+    if (
+      isUITreeRow(row) &&
+      row.hasChildren === false &&
+      column.constituentType != null
+    ) {
+      typeForFormatting = column.constituentType;
+    }
+
+    return IrisGridUtils.textAlignForValue(typeForFormatting, column.name);
+  }
+
   extractViewportRow(row: DhType.TreeRow, columns: DhType.Column[]): UITreeRow {
     const { isExpanded, hasChildren, depth } = row;
     const extractedRow = super.extractViewportRow(row, columns);