fix: DH-21616: Databar overrides text color when using format prop (#1323)

For DH-21616. Databar cells were using the databar bar color for both
the bar and the text, ignoring any explicit text color set via
formatting.

Companion PR: deephaven/web-client-ui#2640

Author: gzh2003

plugins/ui/src/js/src/elements/UITable/UITableModel.ts

@@ -402,11 +402,30 @@ class UITableModel extends IrisGridModel {
       negativeColor = this.colorMap.get(negativeColor) ?? negativeColor;
     }
 
+    const barColor = value >= 0 ? positiveColor : negativeColor;
+    const hasGradient = Array.isArray(barColor) && barColor.length > 1;
+    const formatTextColor = this.getFormatOptionForCell(
+      columnIndex,
+      rowIndex,
+      'color'
+    );
+
+    let textColor: string;
+    if (formatTextColor != null) {
+      textColor = this.colorMap.get(formatTextColor) ?? formatTextColor;
+    } else if (hasGradient) {
+      textColor = value >= 0 ? barColor[barColor.length - 1] : barColor[0];
+    } else {
+      textColor = Array.isArray(barColor) ? barColor[0] : barColor;
+    }
+
     return {
       columnMin: minRowValue,
       columnMax: maxRowValue,
       axis,
-      color: value >= 0 ? positiveColor : negativeColor,
+      color: barColor,
+      // @ts-expect-error TODO: bump web version
+      textColor,
       valuePlacement,
       opacity,
       markers,

tests/app.d/ui_table.py

@@ -298,3 +298,30 @@ def t_selection_component():
         ),
     ],
 )
+
+t_databar_text_color = ui.table(
+    _stocks,
+    format_=[
+        ui.TableFormat(
+            cols="Size", color="red", mode=ui.TableDatabar(color="purple-800")
+        ),
+    ],
+)
+
+t_databar_gradient_text_color = ui.table(
+    _stocks,
+    format_=[
+        ui.TableFormat(
+            cols="Size",
+            color="orange",
+            mode=ui.TableDatabar(color=["negative", "positive"]),
+        ),
+    ],
+)
+
+t_databar_pos_neg_text_color = ui.table(
+    _stocks,
+    format_=[
+        ui.TableFormat(cols="Random", color="info", mode=ui.TableDatabar()),
+    ],
+)

tests/ui_table.spec.ts

@@ -22,6 +22,9 @@ test.describe('UI table', () => {
     't_databar_priority',
     't_databar_mixed',
     't_databar_gradient',
+    't_databar_text_color',
+    't_databar_gradient_text_color',
+    't_databar_pos_neg_text_color',
   ].forEach(name => {
     test(name, async ({ page }) => {
       await gotoPage(page, '');