feat: DH-10205: Add column text alignment to web

packages/code-studio/src/styleguide/MockIrisGridTreeModel.ts

@@ -17,6 +17,7 @@ import {
   type PendingDataMap,
   type UITreeRow,
   type ColumnHeaderGroup,
+  type TextAlignment,
 } from '@deephaven/iris-grid';
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import { type Formatter } from '@deephaven/jsapi-utils';
@@ -237,6 +238,16 @@ class MockIrisGridTreeModel
     // Ignore for mock
   }
 
+  get customColumnAlignmentMap(): Map<string, TextAlignment> {
+    return new Map<string, TextAlignment>();
+  }
+
+  set customColumnAlignmentMap(
+    customColumnAlignmentMap: Map<string, TextAlignment>
+  ) {
+    // Ignore for mock
+  }
+
   displayString(value: unknown): string {
     return `${value}`;
   }

packages/dashboard-core-plugins/src/panels/IrisGridPanel.tsx

@@ -45,6 +45,7 @@ import {
   type ColumnHeaderGroup,
   type IrisGridContextMenuData,
   type PartitionConfig,
+  type TextAlignment,
 } from '@deephaven/iris-grid';
 import {
   type RowDataMap,
@@ -187,6 +188,7 @@ interface IrisGridPanelState {
   advancedSettings: Map<AdvancedSettingsType, boolean>;
   customColumns: readonly ColumnName[];
   customColumnFormatMap: Map<string, FormattingRule>;
+  customColumnAlignmentMap: Map<string, TextAlignment>;
   isFilterBarShown: boolean;
   quickFilters: ReadonlyQuickFilterMap;
   sorts: readonly dh.Sort[];
@@ -297,6 +299,7 @@ export class IrisGridPanel extends PureComponent<
       advancedSettings: new Map(AdvancedSettings.DEFAULTS),
       customColumns: [],
       customColumnFormatMap: new Map(),
+      customColumnAlignmentMap: new Map(),
       isFilterBarShown: false,
       quickFilters: new Map(),
       sorts: [],
@@ -1013,6 +1016,7 @@ export class IrisGridPanel extends PureComponent<
         advancedFilters,
         customColumns,
         customColumnFormatMap,
+        customColumnAlignmentMap,
         isFilterBarShown,
         quickFilters,
         reverse,
@@ -1047,6 +1051,7 @@ export class IrisGridPanel extends PureComponent<
         conditionalFormats,
         customColumns,
         customColumnFormatMap,
+        customColumnAlignmentMap,
         isFilterBarShown,
         isSelectingPartition,
         movedColumns,
@@ -1141,6 +1146,7 @@ export class IrisGridPanel extends PureComponent<
       conditionalFormats,
       customColumns,
       customColumnFormatMap,
+      customColumnAlignmentMap,
       error,
       isDisconnected,
       isFilterBarShown,
@@ -1222,6 +1228,7 @@ export class IrisGridPanel extends PureComponent<
             copyCursor="copy"
             customColumns={customColumns}
             customColumnFormatMap={customColumnFormatMap}
+            customColumnAlignmentMap={customColumnAlignmentMap}
             columnSelectionValidator={this.isColumnSelectionValid}
             conditionalFormats={conditionalFormats}
             inputFilters={this.getGridInputFilters(model.columns, inputFilters)}

packages/iris-grid/src/CommonTypes.tsx

@@ -10,6 +10,7 @@ export type RowIndex = ModelIndex;
 
 export type { AdvancedFilterOptions };
 export type ColumnName = string;
+export type TextAlignment = 'left' | 'center' | 'right';
 export type AdvancedFilterMap = Map<ModelIndex, AdvancedFilter>;
 export type QuickFilterMap = Map<ModelIndex, QuickFilter>;
 export type ReadonlyAdvancedFilterMap = ReadonlyMap<ModelIndex, AdvancedFilter>;

packages/iris-grid/src/EmptyIrisGridModel.ts

@@ -11,6 +11,7 @@ import { EMPTY_ARRAY, EMPTY_MAP } from '@deephaven/utils';
 import IrisGridModel from './IrisGridModel';
 import type ColumnHeaderGroup from './ColumnHeaderGroup';
 import {
+  type TextAlignment,
   type PendingDataErrorMap,
   type PendingDataMap,
   type UITotalsTableConfig,
@@ -21,10 +22,13 @@ class EmptyIrisGridModel extends IrisGridModel {
     super(dh);
 
     this.modelFormatter = formatter;
+    this.modelCustomColumnAlignmentMap = new Map<string, TextAlignment>();
   }
 
   modelFormatter: Formatter;
 
+  modelCustomColumnAlignmentMap: Map<string, TextAlignment>;
+
   get rowCount(): number {
     return 0;
   }
@@ -104,6 +108,16 @@ class EmptyIrisGridModel extends IrisGridModel {
     this.modelFormatter = formatter;
   }
 
+  get customColumnAlignmentMap(): Map<string, TextAlignment> {
+    return this.modelCustomColumnAlignmentMap;
+  }
+
+  set customColumnAlignmentMap(
+    customColumnAlignmentMap: Map<string, TextAlignment>
+  ) {
+    this.modelCustomColumnAlignmentMap = customColumnAlignmentMap;
+  }
+
   displayString(
     value: unknown,
     columnType: string,

packages/iris-grid/src/IrisGrid.tsx

@@ -189,6 +189,7 @@ import {
   type ReadonlyAdvancedFilterMap,
   type ReadonlyAggregationMap,
   type ReadonlyQuickFilterMap,
+  type TextAlignment,
   type UITotalsTableConfig,
 } from './CommonTypes';
 import type ColumnHeaderGroup from './ColumnHeaderGroup';
@@ -284,6 +285,7 @@ export interface IrisGridProps {
   applyInputFiltersOnInit: boolean;
   conditionalFormats: readonly SidebarFormattingRule[];
   customColumnFormatMap: Map<ColumnName, FormattingRule>;
+  customColumnAlignmentMap: Map<string, TextAlignment>;
   movedColumns: readonly MoveOperation[];
   movedRows: readonly MoveOperation[];
   inputFilters: readonly InputFilter[];
@@ -408,6 +410,8 @@ export interface IrisGridState {
   isMenuShown: boolean;
   customColumnFormatMap: Map<ColumnName, FormattingRule>;
 
+  customColumnAlignmentMap: Map<string, TextAlignment>;
+
   conditionalFormats: readonly SidebarFormattingRule[];
   conditionalFormatEditIndex: number | null;
   conditionalFormatPreview?: SidebarFormattingRule;
@@ -484,6 +488,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     alwaysFetchColumns: EMPTY_ARRAY,
     conditionalFormats: EMPTY_ARRAY,
     customColumnFormatMap: EMPTY_MAP,
+    customColumnAlignmentMap: EMPTY_MAP,
     isFilterBarShown: false,
     applyInputFiltersOnInit: false,
     movedColumns: EMPTY_ARRAY,
@@ -591,6 +596,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     this.handleTooltipRef = this.handleTooltipRef.bind(this);
     this.handleViewChanged = this.handleViewChanged.bind(this);
     this.handleFormatSelection = this.handleFormatSelection.bind(this);
+    this.handleColumnAlignmentChange =
+      this.handleColumnAlignmentChange.bind(this);
     this.handleConditionalFormatCreate =
       this.handleConditionalFormatCreate.bind(this);
     this.handleConditionalFormatEdit =
@@ -718,6 +725,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       aggregationSettings,
       conditionalFormats,
       customColumnFormatMap,
+      customColumnAlignmentMap,
       isFilterBarShown,
       isSelectingPartition,
       partitions,
@@ -841,6 +849,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       formatter: new Formatter(dh),
       isMenuShown: false,
       customColumnFormatMap: new Map(customColumnFormatMap),
+      customColumnAlignmentMap: new Map(customColumnAlignmentMap),
 
       conditionalFormats,
       conditionalFormatEditIndex: null,
@@ -3125,6 +3134,26 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     this.updateFormatter({ customColumnFormatMap });
   }
 
+  handleColumnAlignmentChange(
+    modelIndex: ModelIndex,
+    alignment: CanvasTextAlign | null
+  ): void {
+    const { model } = this.props;
+    const column = model.columns[modelIndex];
+    const {
+      customColumnAlignmentMap: prevCustomColumnAlignmentMap = new Map(),
+    } = this.state;
+    const customColumnAlignmentMap = new Map(prevCustomColumnAlignmentMap);
+
+    if (alignment != null) {
+      customColumnAlignmentMap.set(column.name, alignment);
+    } else {
+      customColumnAlignmentMap.delete(column.name);
+    }
+
+    this.setState({ customColumnAlignmentMap });
+  }
+
   handleMenu(e: React.MouseEvent<HTMLButtonElement>): void {
     e.stopPropagation();
     this.setState({ isMenuShown: true });
@@ -4385,6 +4414,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       conditionalFormatPreview,
       conditionalFormatEditIndex,
 
+      customColumnAlignmentMap,
+
       sorts,
       reverse,
       customColumns,
@@ -4971,6 +5002,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
                 right={right}
                 filter={filter}
                 formatter={formatter}
+                customColumnAlignmentMap={customColumnAlignmentMap}
                 sorts={sorts}
                 reverse={reverse}
                 movedColumns={movedColumns}

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

@@ -27,6 +27,7 @@ const irisGridState = {
     showOnTop: false,
   },
   customColumnFormatMap: new Map(),
+  customColumnAlignmentMap: new Map(),
   isFilterBarShown: false,
   quickFilters: new Map(),
   customColumns: [],

packages/iris-grid/src/IrisGridCacheUtils.ts

@@ -48,6 +48,7 @@ function areIrisGridStatesEqual(
     'advancedFilters',
     'aggregationSettings',
     'customColumnFormatMap',
+    'customColumnAlignmentMap',
     'isFilterBarShown',
     'quickFilters',
     'customColumns',

packages/iris-grid/src/IrisGridModel.ts

@@ -20,6 +20,7 @@ import {
   type UITotalsTableConfig,
   type PendingDataMap,
   type PendingDataErrorMap,
+  type TextAlignment,
 } from './CommonTypes';
 import type ColumnHeaderGroup from './ColumnHeaderGroup';
 
@@ -249,6 +250,18 @@ abstract class IrisGridModel<
    */
   abstract set formatter(formatter: Formatter);
 
+  /**
+   * @returns The custom column alignment map
+   */
+  abstract get customColumnAlignmentMap(): Map<string, TextAlignment>;
+
+  /**
+   * @param customColumnAlignmentMap The custom column alignment map to set
+   */
+  abstract set customColumnAlignmentMap(
+    customColumnAlignmentMap: Map<string, TextAlignment>
+  );
+
   /**
    * @param value The value to format
    * @param columnType The column type to format

packages/iris-grid/src/IrisGridModelUpdater.tsx

@@ -11,6 +11,7 @@ import {
   type ColumnName,
   type UITotalsTableConfig,
   type PendingDataMap,
+  type TextAlignment,
 } from './CommonTypes';
 import type IrisGridModel from './IrisGridModel';
 import type ColumnHeaderGroup from './ColumnHeaderGroup';
@@ -39,6 +40,7 @@ interface IrisGridModelUpdaterProps {
   formatColumns: readonly dh.CustomColumn[];
   alwaysFetchColumns: readonly ColumnName[];
   formatter: Formatter;
+  customColumnAlignmentMap: Map<string, TextAlignment>;
   rollupConfig?: dh.RollupConfig | null;
   totalsConfig?: UITotalsTableConfig | null;
   selectDistinctColumns?: readonly ColumnName[];
@@ -59,6 +61,7 @@ function IrisGridModelUpdater({
   right,
   filter,
   formatter,
+  customColumnAlignmentMap,
   reverse = false,
   sorts,
   customColumns,
@@ -126,6 +129,12 @@ function IrisGridModelUpdater({
     },
     [model, formatter]
   );
+  useOnChange(
+    function updateCustomColumnAlignmentMap() {
+      model.customColumnAlignmentMap = customColumnAlignmentMap;
+    },
+    [model, customColumnAlignmentMap]
+  );
   useOnChange(
     function updateCustomColumns() {
       if (model.isCustomColumnsAvailable) {

packages/iris-grid/src/IrisGridProxyModel.ts

@@ -11,7 +11,7 @@ import IrisGridTableModel from './IrisGridTableModel';
 import IrisGridPartitionedTableModel from './IrisGridPartitionedTableModel';
 import IrisGridTreeTableModel from './IrisGridTreeTableModel';
 import IrisGridModel from './IrisGridModel';
-import { type ColumnName } from './CommonTypes';
+import { type TextAlignment, type ColumnName } from './CommonTypes';
 import { isIrisGridTableModelTemplate } from './IrisGridTableModelTemplate';
 import {
   type PartitionConfig,
@@ -457,6 +457,16 @@ class IrisGridProxyModel extends IrisGridModel implements PartitionedGridModel {
     this.originalModel.formatter = formatter;
   }
 
+  get customColumnAlignmentMap(): Map<string, TextAlignment> {
+    return this.originalModel.customColumnAlignmentMap;
+  }
+
+  set customColumnAlignmentMap(
+    customColumnAlignmentMap: Map<string, TextAlignment>
+  ) {
+    this.originalModel.customColumnAlignmentMap = customColumnAlignmentMap;
+  }
+
   setViewport = (
     top: number,
     bottom: number,