feat: DH-10205: Add column text alignment to web (#2513)

For DH-10205. Allows users to override the default type-based alignment
logic on a per column basis using a context menu.

Text alignment is determined with the following priority order: 1.
context menu, 2.ui.table, 3. column type.

TODO:
- [ ] Bump package version in ui plugins
- [ ] Update `UITableModel` to use custom text alignment from the base
model

---------

Co-authored-by: Mike Bender <mikebender@deephaven.io>

Author: gzh2003

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

@@ -237,6 +237,14 @@ class MockIrisGridTreeModel
     // Ignore for mock
   }
 
+  get columnAlignmentMap(): ReadonlyMap<string, CanvasTextAlign> {
+    return new Map<string, CanvasTextAlign>();
+  }
+
+  set columnAlignmentMap(columnAlignmentMap: Map<string, CanvasTextAlign>) {
+    // Ignore for mock
+  }
+
   displayString(value: unknown): string {
     return `${value}`;
   }

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

@@ -187,6 +187,7 @@ interface IrisGridPanelState {
   advancedSettings: Map<AdvancedSettingsType, boolean>;
   customColumns: readonly ColumnName[];
   customColumnFormatMap: Map<string, FormattingRule>;
+  columnAlignmentMap: Map<string, CanvasTextAlign>;
   isFilterBarShown: boolean;
   quickFilters: ReadonlyQuickFilterMap;
   sorts: readonly dh.Sort[];
@@ -297,6 +298,7 @@ export class IrisGridPanel extends PureComponent<
       advancedSettings: new Map(AdvancedSettings.DEFAULTS),
       customColumns: [],
       customColumnFormatMap: new Map(),
+      columnAlignmentMap: new Map(),
       isFilterBarShown: false,
       quickFilters: new Map(),
       sorts: [],
@@ -1013,6 +1015,7 @@ export class IrisGridPanel extends PureComponent<
         advancedFilters,
         customColumns,
         customColumnFormatMap,
+        columnAlignmentMap,
         isFilterBarShown,
         quickFilters,
         reverse,
@@ -1047,6 +1050,7 @@ export class IrisGridPanel extends PureComponent<
         conditionalFormats,
         customColumns,
         customColumnFormatMap,
+        columnAlignmentMap,
         isFilterBarShown,
         isSelectingPartition,
         movedColumns,
@@ -1141,6 +1145,7 @@ export class IrisGridPanel extends PureComponent<
       conditionalFormats,
       customColumns,
       customColumnFormatMap,
+      columnAlignmentMap,
       error,
       isDisconnected,
       isFilterBarShown,
@@ -1222,6 +1227,7 @@ export class IrisGridPanel extends PureComponent<
             copyCursor="copy"
             customColumns={customColumns}
             customColumnFormatMap={customColumnFormatMap}
+            columnAlignmentMap={columnAlignmentMap}
             columnSelectionValidator={this.isColumnSelectionValid}
             conditionalFormats={conditionalFormats}
             inputFilters={this.getGridInputFilters(model.columns, inputFilters)}

packages/iris-grid/src/EmptyIrisGridModel.ts

@@ -21,10 +21,13 @@ class EmptyIrisGridModel extends IrisGridModel {
     super(dh);
 
     this.modelFormatter = formatter;
+    this.modelColumnAlignmentMap = new Map<string, CanvasTextAlign>();
   }
 
   modelFormatter: Formatter;
 
+  modelColumnAlignmentMap: Map<string, CanvasTextAlign>;
+
   get rowCount(): number {
     return 0;
   }
@@ -104,6 +107,14 @@ class EmptyIrisGridModel extends IrisGridModel {
     this.modelFormatter = formatter;
   }
 
+  get columnAlignmentMap(): ReadonlyMap<string, CanvasTextAlign> {
+    return this.modelColumnAlignmentMap;
+  }
+
+  set columnAlignmentMap(columnAlignmentMap: Map<string, CanvasTextAlign>) {
+    this.modelColumnAlignmentMap = columnAlignmentMap;
+  }
+
   displayString(
     value: unknown,
     columnType: string,

packages/iris-grid/src/IrisGrid.tsx

@@ -284,6 +284,7 @@ export interface IrisGridProps {
   applyInputFiltersOnInit: boolean;
   conditionalFormats: readonly SidebarFormattingRule[];
   customColumnFormatMap: Map<ColumnName, FormattingRule>;
+  columnAlignmentMap: Map<string, CanvasTextAlign>;
   movedColumns: readonly MoveOperation[];
   movedRows: readonly MoveOperation[];
   inputFilters: readonly InputFilter[];
@@ -408,6 +409,8 @@ export interface IrisGridState {
   isMenuShown: boolean;
   customColumnFormatMap: Map<ColumnName, FormattingRule>;
 
+  columnAlignmentMap: Map<string, CanvasTextAlign>;
+
   conditionalFormats: readonly SidebarFormattingRule[];
   conditionalFormatEditIndex: number | null;
   conditionalFormatPreview?: SidebarFormattingRule;
@@ -484,6 +487,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     alwaysFetchColumns: EMPTY_ARRAY,
     conditionalFormats: EMPTY_ARRAY,
     customColumnFormatMap: EMPTY_MAP,
+    columnAlignmentMap: EMPTY_MAP,
     isFilterBarShown: false,
     applyInputFiltersOnInit: false,
     movedColumns: EMPTY_ARRAY,
@@ -591,6 +595,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 +724,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       aggregationSettings,
       conditionalFormats,
       customColumnFormatMap,
+      columnAlignmentMap,
       isFilterBarShown,
       isSelectingPartition,
       partitions,
@@ -841,6 +848,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       formatter: new Formatter(dh),
       isMenuShown: false,
       customColumnFormatMap: new Map(customColumnFormatMap),
+      columnAlignmentMap: new Map(columnAlignmentMap),
 
       conditionalFormats,
       conditionalFormatEditIndex: null,
@@ -3129,6 +3137,24 @@ 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];
+
+    this.setState(({ columnAlignmentMap = EMPTY_MAP }) => {
+      const newColumnAlignmentMap = new Map(columnAlignmentMap);
+      if (alignment != null) {
+        newColumnAlignmentMap.set(column.name, alignment);
+      } else {
+        newColumnAlignmentMap.delete(column.name);
+      }
+      return { columnAlignmentMap: newColumnAlignmentMap };
+    });
+  }
+
   handleMenu(e: React.MouseEvent<HTMLButtonElement>): void {
     e.stopPropagation();
     this.setState({ isMenuShown: true });
@@ -4389,6 +4415,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       conditionalFormatPreview,
       conditionalFormatEditIndex,
 
+      columnAlignmentMap,
+
       sorts,
       reverse,
       customColumns,
@@ -4980,6 +5008,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
                 right={right}
                 filter={filter}
                 formatter={formatter}
+                columnAlignmentMap={columnAlignmentMap}
                 sorts={sorts}
                 reverse={reverse}
                 movedColumns={movedColumns}

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

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

packages/iris-grid/src/IrisGridCacheUtils.ts

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

packages/iris-grid/src/IrisGridModel.ts

@@ -249,6 +249,18 @@ abstract class IrisGridModel<
    */
   abstract set formatter(formatter: Formatter);
 
+  /**
+   * @returns The column alignment map
+   */
+  abstract get columnAlignmentMap(): ReadonlyMap<string, CanvasTextAlign>;
+
+  /**
+   * @param columnAlignmentMap The column alignment map to set
+   */
+  abstract set columnAlignmentMap(
+    columnAlignmentMap: Map<string, CanvasTextAlign>
+  );
+
   /**
    * @param value The value to format
    * @param columnType The column type to format

packages/iris-grid/src/IrisGridModelUpdater.tsx

@@ -39,6 +39,7 @@ interface IrisGridModelUpdaterProps {
   formatColumns: readonly dh.CustomColumn[];
   alwaysFetchColumns: readonly ColumnName[];
   formatter: Formatter;
+  columnAlignmentMap: Map<string, CanvasTextAlign>;
   rollupConfig?: dh.RollupConfig | null;
   totalsConfig?: UITotalsTableConfig | null;
   selectDistinctColumns?: readonly ColumnName[];
@@ -59,6 +60,7 @@ function IrisGridModelUpdater({
   right,
   filter,
   formatter,
+  columnAlignmentMap,
   reverse = false,
   sorts,
   customColumns,
@@ -126,6 +128,12 @@ function IrisGridModelUpdater({
     },
     [model, formatter]
   );
+  useOnChange(
+    function updateColumnAlignmentMap() {
+      model.columnAlignmentMap = columnAlignmentMap;
+    },
+    [model, columnAlignmentMap]
+  );
   useOnChange(
     function updateCustomColumns() {
       if (model.isCustomColumnsAvailable) {

packages/iris-grid/src/IrisGridProxyModel.ts

@@ -457,6 +457,14 @@ class IrisGridProxyModel extends IrisGridModel implements PartitionedGridModel {
     this.originalModel.formatter = formatter;
   }
 
+  get columnAlignmentMap(): ReadonlyMap<string, CanvasTextAlign> {
+    return this.originalModel.columnAlignmentMap;
+  }
+
+  set columnAlignmentMap(columnAlignmentMap: Map<string, CanvasTextAlign>) {
+    this.originalModel.columnAlignmentMap = columnAlignmentMap;
+  }
+
   setViewport = (
     top: number,
     bottom: number,

packages/iris-grid/src/IrisGridTableModelTemplate.ts

@@ -141,6 +141,8 @@ class IrisGridTableModelTemplate<
 
   private irisFormatter: Formatter;
 
+  private irisColumnAlignmentMap: Map<string, CanvasTextAlign>;
+
   inputTable: DhType.InputTable | null;
 
   private subscription: DhType.TableViewportSubscription | null;
@@ -193,12 +195,14 @@ class IrisGridTableModelTemplate<
    * @param table Iris data table to be used in the model
    * @param formatter The formatter to use when getting formats
    * @param inputTable Iris input table associated with this table
+   * @param columnAlignmentMap Map of column alignments
    */
   constructor(
     dh: typeof DhType,
     table: T,
     formatter = new Formatter(dh),
-    inputTable: DhType.InputTable | null = null
+    inputTable: DhType.InputTable | null = null,
+    columnAlignmentMap = new Map<string, CanvasTextAlign>()
   ) {
     super(dh);
 
@@ -212,6 +216,7 @@ class IrisGridTableModelTemplate<
 
     this.dh = dh;
     this.irisFormatter = formatter;
+    this.irisColumnAlignmentMap = columnAlignmentMap;
     this.irisGridUtils = new IrisGridUtils(dh);
     this.inputTable = inputTable;
     this.subscription = null;
@@ -656,6 +661,11 @@ class IrisGridTableModelTemplate<
   textAlignForCell(x: ModelIndex, y: ModelIndex): CanvasTextAlign {
     const column = this.sourceColumn(x, y);
 
+    const userTextAlignment = this.columnAlignmentMap.get(column.name);
+    if (userTextAlignment != null) {
+      return userTextAlignment;
+    }
+
     return IrisGridUtils.textAlignForValue(column.type, column.name);
   }
 
@@ -1220,6 +1230,14 @@ class IrisGridTableModelTemplate<
     );
   }
 
+  get columnAlignmentMap(): ReadonlyMap<string, CanvasTextAlign> {
+    return this.irisColumnAlignmentMap;
+  }
+
+  set columnAlignmentMap(columnAlignmentMap: Map<string, CanvasTextAlign>) {
+    this.irisColumnAlignmentMap = columnAlignmentMap;
+  }
+
   displayString(
     value: unknown,
     columnType: string,