From b74e0dfb40c6016dc05e2bf1a9ba8f75d2f8821a Mon Sep 17 00:00:00 2001
From: Alex Fedotyev <61838744+alex-fedotyev@users.noreply.github.com>
Date: Wed, 24 Jun 2026 15:33:28 +0000
Subject: [PATCH 1/3] feat(dashboards): per-column color on table tiles

Bring the number-tile color features to builder table tiles: a per-column
static palette color plus ordered conditional color rules, applied per cell
at render via the shared resolver.

- Add optional `color` and `colorRules` to `DerivedColumnSchema` (the
  per-column builder config), mirroring the existing per-column
  `numberFormat`. Move the chart palette tokens and `ColorConditionSchema`
  above `DerivedColumnSchema` so it can reference them; pure relocation, no
  logic change (the repo deliberately avoids `z.lazy` forward refs). The
  legacy-token migration helpers and number-tile schemas stay in place.
- Build per-column `colorByColumn` / `rulesByColumn` lookups in DBTableChart
  alongside `formatByColumn`, and resolve + apply each cell's color in the
  table renderer, guarding unknown tokens so legacy configs never crash.
- Add a per-column color drawer (SeriesColorDrawer) opened from the series
  row, gated to table tiles, reusing ColorSwatchInput and ColorRulesEditor.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .changeset/table-tile-column-color.md         |  11 +
 packages/app/src/HDXMultiSeriesTableChart.tsx |  50 ++-
 .../HDXMultiSeriesTableChart.test.tsx         | 103 ++++++
 .../ChartEditorControls.tsx                   |   1 +
 .../DBEditTimeChartForm/ChartSeriesEditor.tsx |  52 ++-
 .../__tests__/DBEditTimeChartForm.test.tsx    |  60 ++++
 packages/app/src/components/DBTableChart.tsx  |  53 ++-
 .../app/src/components/SeriesColorDrawer.tsx  | 156 +++++++++
 .../__tests__/SeriesColorDrawer.test.tsx      |  85 +++++
 .../common-utils/src/__tests__/types.test.ts  | 104 +++++-
 packages/common-utils/src/types.ts            | 318 +++++++++---------
 11 files changed, 835 insertions(+), 158 deletions(-)
 create mode 100644 .changeset/table-tile-column-color.md
 create mode 100644 packages/app/src/components/SeriesColorDrawer.tsx
 create mode 100644 packages/app/src/components/__tests__/SeriesColorDrawer.test.tsx

diff --git a/.changeset/table-tile-column-color.md b/.changeset/table-tile-column-color.md
new file mode 100644
index 0000000000..26301448db
--- /dev/null
+++ b/.changeset/table-tile-column-color.md
@@ -0,0 +1,11 @@
+---
+"@hyperdx/common-utils": minor
+"@hyperdx/app": minor
+---
+
+Add per-column color to dashboard table tiles. On builder table tiles you can
+now set a static color on a column and layer ordered conditional rules (for
+example `> 500` turns the cell red), the table-cell counterpart of the
+number-tile color. Rules are authored from the column editor and applied per
+cell at render, reusing the existing palette tokens so colors reflow across
+light and dark themes.
diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
index 23544d5e17..8a5006e559 100644
--- a/packages/app/src/HDXMultiSeriesTableChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -1,6 +1,11 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
 import cx from 'classnames';
+import {
+  ChartPaletteToken,
+  ColorCondition,
+  isChartPaletteToken,
+} from '@hyperdx/common-utils/dist/types';
 import { Tooltip, UnstyledButton } from '@mantine/core';
 import {
   IconArrowUpRight,
@@ -29,7 +34,11 @@ import type { RowAction } from './hooks/useOnClickLinkBuilder';
 import { useBrandDisplayName } from './theme/ThemeProvider';
 import { UNDEFINED_WIDTH } from './tableUtils';
 import type { NumberFormat } from './types';
-import { formatNumber } from './utils';
+import {
+  formatNumber,
+  getColorFromCSSToken,
+  resolveConditionalColor,
+} from './utils';
 
 import styles from './HDXMultiSeriesTableChart.module.scss';
 import focusStyles from '@styles/focus.module.scss';
@@ -61,6 +70,12 @@ export const Table = ({
     columnWidthPercent?: number;
     visible?: boolean;
     sortingFn?: SortingFnOption<any>;
+    // Per-column static palette-token color (table tiles). Applied to the
+    // cell text; falls back through `colorRules` then the default color.
+    color?: ChartPaletteToken;
+    // Ordered conditional color rules evaluated against each cell's value
+    // (last match wins). Resolves to `color` when no rule matches.
+    colorRules?: ColorCondition[];
   }[];
   groupColumnName?: string;
   // Returns the row click destination + a hover-hint description. When
@@ -136,6 +151,8 @@ export const Table = ({
             numberFormat,
             columnWidthPercent,
             sortingFn,
+            color,
+            colorRules,
           },
           i,
         ) =>
@@ -162,6 +179,28 @@ export const Table = ({
                 formattedValue = formatNumber(value, numberFormat);
               }
 
+              // Resolve this cell's color from the column config: ordered
+              // rules first (last match wins), then the column's static
+              // color, else no override. The raw value drives evaluation
+              // (numbers for comparisons, strings for equality / string
+              // match); non-primitive values (stringified above) never match.
+              const colorValue =
+                typeof value === 'number' || typeof value === 'string'
+                  ? value
+                  : null;
+              const resolvedColorToken = resolveConditionalColor(
+                colorValue,
+                colorRules,
+                color,
+              );
+              // Guard the CSS resolver: it throws on an unrecognized token,
+              // so an unknown / legacy token (e.g. a hand-edited config)
+              // renders with the default color instead of crashing the cell.
+              const colorStyle =
+                resolvedColorToken && isChartPaletteToken(resolvedColorToken)
+                  ? { color: getColorFromCSSToken(resolvedColorToken) }
+                  : undefined;
+
               const className = cx('align-top overflow-hidden py-1 pe-3', {
                 'text-break': wrapLinesEnabled,
                 'text-truncate': !wrapLinesEnabled,
@@ -191,6 +230,7 @@ export const Table = ({
                       href={action.url}
                       prefetch={false}
                       className={interactiveClassName}
+                      style={colorStyle}
                       data-testid="dashboard-table-row-action"
                       data-shape="link"
                     >
@@ -211,6 +251,7 @@ export const Table = ({
                   <button
                     type="button"
                     className={cx(interactiveClassName, focusStyles.cellButton)}
+                    style={colorStyle}
                     onClick={action.onClickError}
                     data-testid="dashboard-table-row-action"
                     data-shape="button"
@@ -228,6 +269,7 @@ export const Table = ({
                       href={url}
                       prefetch={false}
                       className={interactiveClassName}
+                      style={colorStyle}
                       data-testid="dashboard-table-row-action"
                       data-shape="link"
                     >
@@ -237,7 +279,11 @@ export const Table = ({
                 }
               }
 
-              return <div className={className}>{formattedValue}</div>;
+              return (
+                <div className={className} style={colorStyle}>
+                  {formattedValue}
+                </div>
+              );
             },
             size:
               i === numColumns - 2
diff --git a/packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx b/packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx
index 13fc33b8a1..b7962a213a 100644
--- a/packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx
+++ b/packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import type { ChartPaletteToken } from '@hyperdx/common-utils/dist/types';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Table } from '@/HDXMultiSeriesTableChart';
+import { getColorFromCSSToken } from '@/utils';
 
 // Next.js Link needs a router context; the router isn't exercised
 // because we never trigger client-side navigation in these tests.
@@ -325,4 +327,105 @@ describe('HDXMultiSeriesTableChart <Table>', () => {
       expect(screen.queryByTestId('row-action-hint')).toBeNull();
     });
   });
+
+  describe('per-column cell color', () => {
+    const serviceCol = {
+      id: 'service',
+      dataKey: 'ServiceName',
+      displayName: 'Service',
+    };
+    const colorData = [
+      { ServiceName: 'web', Count: 600 },
+      { ServiceName: 'api', Count: 10 },
+    ];
+
+    // Normalize an expected token through the same CSSOM the rendered cell
+    // uses, so the assertion is exact without depending on hex-vs-rgb
+    // serialization details.
+    const normalizedColor = (token: ChartPaletteToken) => {
+      const probe = document.createElement('span');
+      probe.style.color = getColorFromCSSToken(token);
+      return probe.style.color;
+    };
+
+    it('applies a static palette-token color to every cell in the column', () => {
+      renderWithMantine(
+        <Table
+          data={colorData}
+          columns={[
+            serviceCol,
+            {
+              id: 'count',
+              dataKey: 'Count',
+              displayName: 'Count',
+              color: 'chart-blue',
+            },
+          ]}
+          sorting={[]}
+          onSortingChange={() => {}}
+        />,
+      );
+
+      const expected = normalizedColor('chart-blue');
+      expect(expected).not.toBe('');
+      expect((screen.getByText('600') as HTMLElement).style.color).toBe(
+        expected,
+      );
+      expect((screen.getByText('10') as HTMLElement).style.color).toBe(
+        expected,
+      );
+      // The uncolored group-by-style column stays default.
+      expect((screen.getByText('web') as HTMLElement).style.color).toBe('');
+    });
+
+    it('applies a conditional rule only to cells whose value matches', () => {
+      renderWithMantine(
+        <Table
+          data={colorData}
+          columns={[
+            serviceCol,
+            {
+              id: 'count',
+              dataKey: 'Count',
+              displayName: 'Count',
+              colorRules: [
+                { operator: 'gt', value: 100, color: 'chart-error' },
+              ],
+            },
+          ]}
+          sorting={[]}
+          onSortingChange={() => {}}
+        />,
+      );
+
+      // 600 > 100 matches the rule; 10 does not, so it falls back to the
+      // default color (no static color set).
+      expect((screen.getByText('600') as HTMLElement).style.color).not.toBe('');
+      expect((screen.getByText('10') as HTMLElement).style.color).toBe('');
+    });
+
+    it('renders the default color for an unknown token without throwing', () => {
+      expect(() =>
+        renderWithMantine(
+          <Table
+            data={[{ ServiceName: 'web', Count: 10 }]}
+            columns={[
+              serviceCol,
+              {
+                id: 'count',
+                dataKey: 'Count',
+                displayName: 'Count',
+                // Simulates a legacy / hand-edited token absent from the
+                // current palette; the renderer must not crash.
+                color: 'chart-1' as unknown as ChartPaletteToken,
+              },
+            ]}
+            sorting={[]}
+            onSortingChange={() => {}}
+          />,
+        ),
+      ).not.toThrow();
+      expect((screen.getByText('10') as HTMLElement).style.color).toBe('');
+    });
+  });
 });
diff --git a/packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx b/packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx
index 6b2e4574a4..4b6fdbc08e 100644
--- a/packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx
@@ -176,6 +176,7 @@ export function ChartEditorControls({
                 fields.length === 1 && displayType === DisplayType.Table
               }
               showDuplicate={canAddSeries}
+              showColor={displayType === DisplayType.Table}
               tableName={tableName ?? ''}
               tableSource={tableSource}
               errors={
diff --git a/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx b/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx
index d0eab77d64..137d328cbe 100644
--- a/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react-hook-form';
 import {
   DateRange,
+  isChartPaletteToken,
   MetricsDataType,
   SourceKind,
   TSource,
@@ -26,6 +27,7 @@ import {
   IconArrowDown,
   IconArrowUp,
   IconCopy,
+  IconPalette,
   IconTrash,
 } from '@tabler/icons-react';
 
@@ -43,6 +45,7 @@ import { MetricAttributeHelperPanel } from '@/components/MetricAttributeHelperPa
 import { MetricNameSelect } from '@/components/MetricNameSelect';
 import { FORMAT_ICONS } from '@/components/NumberFormat';
 import SearchWhereInput from '@/components/SearchInput/SearchWhereInput';
+import SeriesColorDrawer from '@/components/SeriesColorDrawer';
 import SeriesNumberFormatDrawer from '@/components/SeriesNumberFormatDrawer';
 import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
 import { useFetchMetricMetadata } from '@/hooks/useFetchMetricMetadata';
@@ -50,7 +53,7 @@ import {
   parseAttributeKeysFromSuggestions,
   useFetchMetricResourceAttrs,
 } from '@/hooks/useFetchMetricResourceAttrs';
-import { getMetricTableName } from '@/utils';
+import { getColorFromCSSToken, getMetricTableName } from '@/utils';
 
 type SeriesItem = NonNullable<
   SavedChartConfigWithSelectArray['select']
@@ -72,6 +75,7 @@ type ChartSeriesEditorProps = {
   showGroupBy: boolean;
   showHaving: boolean;
   showDuplicate: boolean;
+  showColor: boolean;
   tableName: string;
   length: number;
   tableSource?: TSource;
@@ -93,6 +97,7 @@ export function ChartSeriesEditor({
   showGroupBy,
   showHaving,
   showDuplicate,
+  showColor,
   tableName: _tableName,
   parentRef,
   length,
@@ -214,6 +219,17 @@ export function ChartSeriesEditor({
     { open: openSeriesNumberFormat, close: closeSeriesNumberFormat },
   ] = useDisclosure(false);
 
+  const seriesColor = useWatch({ control, name: `${namePrefix}color` });
+  const seriesColorRules = useWatch({
+    control,
+    name: `${namePrefix}colorRules`,
+  });
+
+  const [
+    isSeriesColorOpen,
+    { open: openSeriesColor, close: closeSeriesColor },
+  ] = useDisclosure(false);
+
   return (
     <>
       <Divider
@@ -287,6 +303,27 @@ export function ChartSeriesEditor({
                 {FORMAT_ICONS[seriesNumberFormat?.output ?? 'number']}
               </ActionIcon>
             </Tooltip>
+            {showColor && (
+              <Tooltip label="Edit column color">
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  size="xs"
+                  onClick={openSeriesColor}
+                  aria-label="Edit column color"
+                  data-testid="series-color-button"
+                >
+                  <IconPalette
+                    size={16}
+                    color={
+                      seriesColor && isChartPaletteToken(seriesColor)
+                        ? getColorFromCSSToken(seriesColor)
+                        : undefined
+                    }
+                  />
+                </ActionIcon>
+              </Tooltip>
+            )}
           </Group>
         }
         labelPosition="right"
@@ -454,6 +491,19 @@ export function ChartSeriesEditor({
           closeSeriesNumberFormat();
         }}
       />
+      {showColor && (
+        <SeriesColorDrawer
+          opened={isSeriesColorOpen}
+          color={seriesColor}
+          colorRules={seriesColorRules}
+          onChange={next => {
+            setValue(`${namePrefix}color`, next.color);
+            setValue(`${namePrefix}colorRules`, next.colorRules);
+            onSubmit();
+          }}
+          onClose={closeSeriesColor}
+        />
+      )}
     </>
   );
 }
diff --git a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
index aee5fbded4..a9aed8fe8d 100644
--- a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
@@ -68,6 +68,7 @@ jest.mock('@/source', () => ({
   }),
   getFirstTimestampValueExpression: jest.fn().mockReturnValue('Timestamp'),
   getFirstSeriesNumberFormat: jest.fn().mockReturnValue(undefined),
+  useSources: jest.fn().mockReturnValue({ data: [] }),
 }));
 
 jest.mock('../../MetricNameSelect', () => ({
@@ -556,3 +557,62 @@ describe('DBEditTimeChartForm - Duplicate series', () => {
     expect(saved.select[1]).toMatchObject({ alias: 'p95 latency' });
   });
 });
+
+describe('DBEditTimeChartForm - Column color', () => {
+  // Per-column color targets builder table tiles on log / trace / event
+  // sources; point useSource at a non-metric source for these.
+  const logSource = {
+    id: 'log-source',
+    kind: SourceKind.Log,
+    name: 'Logs',
+    from: { databaseName: 'default', tableName: 'otel_logs' },
+    connection: 'default',
+    timestampValueExpression: 'Timestamp',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useSource as jest.Mock).mockReturnValue({ data: logSource });
+  });
+
+  const colorSeries = {
+    aggFn: 'count' as const,
+    aggCondition: '',
+    aggConditionLanguage: 'lucene' as const,
+    valueExpression: '',
+    alias: 'event count',
+  };
+
+  const tableConfig = {
+    ...defaultChartConfig,
+    source: 'log-source',
+    displayType: DisplayType.Table,
+    select: [colorSeries],
+  };
+
+  it('shows the per-column color control on table tiles', () => {
+    renderComponent({ chartConfig: tableConfig });
+
+    expect(screen.getByTestId('series-color-button')).toBeInTheDocument();
+  });
+
+  it('hides the per-column color control on non-table tiles', () => {
+    renderComponent({
+      chartConfig: { ...tableConfig, displayType: DisplayType.Line },
+    });
+
+    expect(screen.queryByTestId('series-color-button')).not.toBeInTheDocument();
+  });
+
+  it('opens the column color drawer when the control is clicked', async () => {
+    renderComponent({ chartConfig: tableConfig });
+
+    await userEvent.click(screen.getByTestId('series-color-button'));
+
+    // The drawer renders the reused color swatch + rules editor.
+    expect(
+      await screen.findByTestId('color-swatch-input-trigger'),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('series-color-apply')).toBeInTheDocument();
+  });
+});
diff --git a/packages/app/src/components/DBTableChart.tsx b/packages/app/src/components/DBTableChart.tsx
index 41bd3f0f5b..931f13b688 100644
--- a/packages/app/src/components/DBTableChart.tsx
+++ b/packages/app/src/components/DBTableChart.tsx
@@ -5,7 +5,11 @@ import {
   isPromqlChartConfig,
   isRawSqlChartConfig,
 } from '@hyperdx/common-utils/dist/guards';
-import { ChartConfigWithOptTimestamp } from '@hyperdx/common-utils/dist/types';
+import {
+  ChartConfigWithOptTimestamp,
+  ChartPaletteToken,
+  ColorCondition,
+} from '@hyperdx/common-utils/dist/types';
 import { Text } from '@mantine/core';
 import { SortingState } from '@tanstack/react-table';
 
@@ -127,6 +131,39 @@ export default function DBTableChart({
 
   const { formatByColumn } = useChartNumberFormats(queriedConfig, data?.meta);
 
+  // Per-column color config (static token + ordered conditional rules) for
+  // builder table tiles. Mirrors `formatByColumn`: each series in `select`
+  // maps by index to its result column (meta[i].name), so these maps key
+  // identically and the columns memo consumes them the same way. Color targets
+  // aggregation (series) columns only; group-by columns are not select items
+  // and never appear here. Ratio configs merge two series into one column, so
+  // per-column color is skipped (matching the numberFormat treatment).
+  const { colorByColumn, rulesByColumn } = useMemo(() => {
+    const colorByColumn = new Map<string, ChartPaletteToken>();
+    const rulesByColumn = new Map<string, ColorCondition[]>();
+    const meta = data?.meta;
+    if (
+      !meta ||
+      !isBuilderChartConfig(queriedConfig) ||
+      !Array.isArray(queriedConfig.select) ||
+      isRatioChartConfig(queriedConfig.select, queriedConfig)
+    ) {
+      return { colorByColumn, rulesByColumn };
+    }
+    for (let i = 0; i < queriedConfig.select.length; i++) {
+      const series = queriedConfig.select[i];
+      const key = meta[i]?.name;
+      if (key == null) continue;
+      if (series.color) {
+        colorByColumn.set(key, series.color);
+      }
+      if (series.colorRules && series.colorRules.length > 0) {
+        rulesByColumn.set(key, series.colorRules);
+      }
+    }
+    return { colorByColumn, rulesByColumn };
+  }, [data?.meta, queriedConfig]);
+
   const columns = useMemo(() => {
     const rows = data?.data ?? [];
     if (rows.length === 0) {
@@ -172,9 +209,21 @@ export default function DBTableChart({
         numberFormat: groupByKeys.includes(key)
           ? undefined
           : (formatByColumn.get(key) ?? queriedConfig.numberFormat),
+        color: groupByKeys.includes(key) ? undefined : colorByColumn.get(key),
+        colorRules: groupByKeys.includes(key)
+          ? undefined
+          : rulesByColumn.get(key),
         sortingFn: getClientSideSortingFn(data?.meta, key),
       }));
-  }, [data, queriedConfig, hiddenColumns, aliasMap, formatByColumn]);
+  }, [
+    data,
+    queriedConfig,
+    hiddenColumns,
+    aliasMap,
+    formatByColumn,
+    colorByColumn,
+    rulesByColumn,
+  ]);
 
   const toolbarItemsMemo = useMemo(() => {
     const allToolbarItems = [];
diff --git a/packages/app/src/components/SeriesColorDrawer.tsx b/packages/app/src/components/SeriesColorDrawer.tsx
new file mode 100644
index 0000000000..c166613556
--- /dev/null
+++ b/packages/app/src/components/SeriesColorDrawer.tsx
@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { Controller, useForm, useWatch } from 'react-hook-form';
+import type {
+  ChartPaletteToken,
+  ColorCondition,
+} from '@hyperdx/common-utils/dist/types';
+import { Button, Drawer, Group, Stack, Text } from '@mantine/core';
+
+import {
+  attachLocalIds,
+  ColorRulesEditor,
+  ColorRuleWithId,
+  stripLocalIds,
+} from './ColorRulesEditor';
+import { ColorSwatchInput } from './ColorSwatchInput';
+
+type ColorFormState = {
+  color?: ChartPaletteToken;
+  colorRules?: ColorRuleWithId[];
+};
+
+interface SeriesColorDrawerProps {
+  opened: boolean;
+  color?: ChartPaletteToken;
+  colorRules?: ColorCondition[];
+  onChange: (next: {
+    color?: ChartPaletteToken;
+    colorRules?: ColorCondition[];
+  }) => void;
+  onClose: () => void;
+}
+
+/**
+ * Per-column color editor for builder table tiles, opened from the series
+ * row. A static palette-token color plus ordered conditional rules, the
+ * table-cell counterpart of the number-tile color in
+ * `ChartDisplaySettingsDrawer`. Reuses `ColorSwatchInput` and
+ * `ColorRulesEditor`; resolution happens per cell in `HDXMultiSeriesTableChart`
+ * via the shared `resolveConditionalColor`.
+ */
+export default function SeriesColorDrawer({
+  opened,
+  color,
+  colorRules,
+  onChange,
+  onClose,
+}: SeriesColorDrawerProps) {
+  // Attach client-side localIds once per incoming value so the dnd-kit rows
+  // keep stable keys for the editing session; strip them on apply. Mirrors
+  // ChartDisplaySettingsDrawer's handling of number-tile color rules.
+  const appliedDefaults = useMemo<ColorFormState>(
+    () => ({
+      color,
+      colorRules: colorRules ? attachLocalIds(colorRules) : undefined,
+    }),
+    [color, colorRules],
+  );
+
+  const { control, handleSubmit, reset, setValue } = useForm<ColorFormState>({
+    defaultValues: appliedDefaults,
+  });
+
+  useEffect(() => {
+    reset(appliedDefaults);
+  }, [appliedDefaults, reset]);
+
+  const currentColor = useWatch({ control, name: 'color' });
+  const currentRules = useWatch({ control, name: 'colorRules' });
+  const hasSelection = currentColor != null || (currentRules?.length ?? 0) > 0;
+
+  const handleClose = useCallback(() => {
+    reset(appliedDefaults);
+    onClose();
+  }, [reset, appliedDefaults, onClose]);
+
+  const applyChanges = useCallback(() => {
+    handleSubmit(values => {
+      onChange({
+        color: values.color,
+        colorRules:
+          values.colorRules && values.colorRules.length > 0
+            ? stripLocalIds(values.colorRules)
+            : undefined,
+      });
+    })();
+    onClose();
+  }, [handleSubmit, onChange, onClose]);
+
+  const clearColor = useCallback(() => {
+    setValue('color', undefined);
+    setValue('colorRules', undefined);
+  }, [setValue]);
+
+  return (
+    <Drawer
+      title="Column Color"
+      opened={opened}
+      onClose={handleClose}
+      position="right"
+    >
+      <Stack>
+        <Stack gap="xs">
+          <div>
+            <Text size="xs" fw={500} mb={2}>
+              Color
+            </Text>
+            <Text size="xs" c="dimmed">
+              Applies to every cell in this column unless a rule below matches.
+            </Text>
+          </div>
+          <Controller
+            control={control}
+            name="color"
+            render={({ field }) => (
+              <ColorSwatchInput
+                value={field.value}
+                onChange={field.onChange}
+                ariaLabel="Column color"
+              />
+            )}
+          />
+        </Stack>
+        <Controller
+          control={control}
+          name="colorRules"
+          render={({ field }) => (
+            <ColorRulesEditor
+              value={field.value ?? []}
+              onChange={field.onChange}
+            />
+          )}
+        />
+        <Group gap="xs" mt="xs" justify="space-between">
+          {hasSelection ? (
+            <Button
+              variant="secondary"
+              onClick={clearColor}
+              data-testid="series-color-clear"
+            >
+              Clear
+            </Button>
+          ) : (
+            <span />
+          )}
+          <Button
+            variant="primary"
+            onClick={applyChanges}
+            data-testid="series-color-apply"
+          >
+            Apply
+          </Button>
+        </Group>
+      </Stack>
+    </Drawer>
+  );
+}
diff --git a/packages/app/src/components/__tests__/SeriesColorDrawer.test.tsx b/packages/app/src/components/__tests__/SeriesColorDrawer.test.tsx
new file mode 100644
index 0000000000..7f0e312a0a
--- /dev/null
+++ b/packages/app/src/components/__tests__/SeriesColorDrawer.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { randomUUID } from 'crypto';
+import type { ColorCondition } from '@hyperdx/common-utils/dist/types';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import SeriesColorDrawer from '@/components/SeriesColorDrawer';
+
+// The jsdom test environment may not expose crypto.randomUUID, which
+// ColorRulesEditor uses for stable dnd keys. Back it with Node's
+// implementation when absent so the rules path is deterministic.
+if (typeof globalThis.crypto === 'undefined') {
+  (globalThis as any).crypto = {};
+}
+if (typeof (globalThis.crypto as any).randomUUID !== 'function') {
+  (globalThis.crypto as any).randomUUID = randomUUID;
+}
+
+describe('SeriesColorDrawer', () => {
+  it('calls onChange with the picked static color on Apply', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+
+    renderWithMantine(
+      <SeriesColorDrawer opened onChange={onChange} onClose={() => {}} />,
+    );
+
+    await user.click(screen.getByTestId('color-swatch-input-trigger'));
+    await user.click(
+      await screen.findByTestId('color-swatch-option-chart-blue'),
+    );
+    await user.click(screen.getByTestId('series-color-apply'));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0]).toMatchObject({ color: 'chart-blue' });
+  });
+
+  it('round-trips existing rules on Apply and strips client-side ids', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    const colorRules: ColorCondition[] = [
+      { operator: 'gt', value: 500, color: 'chart-error' },
+    ];
+
+    renderWithMantine(
+      <SeriesColorDrawer
+        opened
+        colorRules={colorRules}
+        onChange={onChange}
+        onClose={() => {}}
+      />,
+    );
+
+    await user.click(screen.getByTestId('series-color-apply'));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0].colorRules).toEqual(colorRules);
+    // The client-side localId must not leak into the persisted shape.
+    expect(onChange.mock.calls[0][0].colorRules[0]).not.toHaveProperty(
+      'localId',
+    );
+  });
+
+  it('clears color and rules when Clear is clicked', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+
+    renderWithMantine(
+      <SeriesColorDrawer
+        opened
+        color="chart-error"
+        onChange={onChange}
+        onClose={() => {}}
+      />,
+    );
+
+    await user.click(screen.getByTestId('series-color-clear'));
+    await user.click(screen.getByTestId('series-color-apply'));
+
+    expect(onChange).toHaveBeenCalledWith({
+      color: undefined,
+      colorRules: undefined,
+    });
+  });
+});
diff --git a/packages/common-utils/src/__tests__/types.test.ts b/packages/common-utils/src/__tests__/types.test.ts
index eaab3c41af..67706107d7 100644
--- a/packages/common-utils/src/__tests__/types.test.ts
+++ b/packages/common-utils/src/__tests__/types.test.ts
@@ -1,6 +1,10 @@
 import { z } from 'zod';
 
-import { BackgroundChartSchema, ColorConditionSchema } from '@/types';
+import {
+  BackgroundChartSchema,
+  ColorConditionSchema,
+  DerivedColumnSchema,
+} from '@/types';
 
 describe('ColorConditionSchema', () => {
   // ─── Positive cases ─────────────────────────────────────────────────────────
@@ -321,3 +325,101 @@ describe('BackgroundChartSchema', () => {
     ).toBe(false);
   });
 });
+
+describe('DerivedColumnSchema color fields', () => {
+  // A minimal valid select item (count aggregation) the table builder emits.
+  const baseColumn = {
+    aggFn: 'count' as const,
+    aggCondition: '',
+    aggConditionLanguage: 'sql' as const,
+    valueExpression: '',
+  };
+
+  // ─── Positive cases ─────────────────────────────────────────────────────────
+
+  it('parses a column with no color fields (backward compatible)', () => {
+    expect(DerivedColumnSchema.safeParse(baseColumn).success).toBe(true);
+  });
+
+  it('round-trips a static palette-token color', () => {
+    const result = DerivedColumnSchema.safeParse({
+      ...baseColumn,
+      color: 'chart-error',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.color).toBe('chart-error');
+    }
+  });
+
+  it.each(['gt', 'gte', 'lt', 'lte'] as const)(
+    'round-trips a %s colorRule',
+    operator => {
+      const result = DerivedColumnSchema.safeParse({
+        ...baseColumn,
+        colorRules: [{ operator, value: 500, color: 'chart-warning' }],
+      });
+      expect(result.success).toBe(true);
+    },
+  );
+
+  it('round-trips a between colorRule', () => {
+    const result = DerivedColumnSchema.safeParse({
+      ...baseColumn,
+      colorRules: [
+        { operator: 'between', value: [10, 100], color: 'chart-blue' },
+      ],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it.each(['eq', 'neq'] as const)('round-trips a %s colorRule', operator => {
+    const result = DerivedColumnSchema.safeParse({
+      ...baseColumn,
+      colorRules: [{ operator, value: 'OK', color: 'chart-success' }],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it('round-trips a static color and rules together', () => {
+    const result = DerivedColumnSchema.safeParse({
+      ...baseColumn,
+      color: 'chart-blue',
+      colorRules: [{ operator: 'gt', value: 500, color: 'chart-error' }],
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.color).toBe('chart-blue');
+      expect(result.data.colorRules).toHaveLength(1);
+    }
+  });
+
+  // ─── Negative cases ──────────────────────────────────────────────────────────
+
+  it('rejects an unknown static color token', () => {
+    expect(
+      DerivedColumnSchema.safeParse({ ...baseColumn, color: 'not-a-token' })
+        .success,
+    ).toBe(false);
+  });
+
+  it('rejects a colorRule with an unknown color token', () => {
+    expect(
+      DerivedColumnSchema.safeParse({
+        ...baseColumn,
+        colorRules: [{ operator: 'gt', value: 1, color: 'puce' }],
+      }).success,
+    ).toBe(false);
+  });
+
+  it('rejects more than 10 colorRules', () => {
+    const colorRules = Array.from({ length: 11 }, (_, i) => ({
+      operator: 'gte' as const,
+      value: i * 10,
+      color: 'chart-blue' as const,
+    }));
+    expect(
+      DerivedColumnSchema.safeParse({ ...baseColumn, colorRules }).success,
+    ).toBe(false);
+  });
+});
diff --git a/packages/common-utils/src/types.ts b/packages/common-utils/src/types.ts
index 8513e6e802..5b81189f7f 100644
--- a/packages/common-utils/src/types.ts
+++ b/packages/common-utils/src/types.ts
@@ -227,6 +227,158 @@ export const RootValueExpressionSchema = z
       isDelta: z.boolean().optional(),
     }),
   );
+/**
+ * The set of palette tokens a user can pick for chart series colors,
+ * number-tile colors, reference lines, and threshold rules.
+ *
+ * Tokens map to CSS variables in
+ * `packages/app/src/theme/themes/<theme>/_tokens.scss`:
+ *   chart-{hue}                 -> --color-chart-{hue}                    (10 hues, unified across themes)
+ *   chart-success/warning/error -> --color-chart-{success|warning|error}  (semantic; unified across brands)
+ *
+ * `chart-info` is a render-time CSS variable (defined in the shared
+ * `chart-semantic-tokens` SCSS mixin) but is intentionally *not* in the
+ * picker enum; it's consumed only by code paths that always want
+ * brand-primary (e.g. info-level log series, `getChartColorInfo()`).
+ *
+ * Storing tokens (not hex) lets user choices reflow correctly across
+ * themes and color modes; see notes/repo-conventions/hyperdx/tile-styling.md.
+ *
+ * Lives in common-utils because the schema is shared between the app
+ * and the API; the theme-aware CSS resolver (`getColorFromCSSToken`)
+ * stays in `packages/app/src/utils.ts` because it depends on
+ * `getComputedStyle(document.documentElement)`.
+ */
+/** Categorical tokens (10 hues). Tuple literal so the element type
+ * stays narrow (`'chart-blue' | 'chart-orange' | ...`) rather than
+ * widening to `ChartPaletteToken`; downstream consumers like
+ * `CATEGORICAL_HEX_BY_TOKEN` in `packages/app/src/utils.ts` rely on
+ * the narrow element type to enforce 1:1 coverage at compile time. */
+export const CATEGORICAL_PALETTE_TOKENS = [
+  'chart-blue',
+  'chart-orange',
+  'chart-red',
+  'chart-cyan',
+  'chart-green',
+  'chart-pink',
+  'chart-purple',
+  'chart-light-blue',
+  'chart-brown',
+  'chart-gray',
+] as const;
+
+/** Semantic tokens (success / warning / error). Tuple literal for the
+ * same narrow-element-type reason as the categorical list above. */
+export const SEMANTIC_PALETTE_TOKENS = [
+  'chart-success',
+  'chart-warning',
+  'chart-error',
+] as const;
+
+export const CHART_PALETTE_TOKENS = [
+  ...CATEGORICAL_PALETTE_TOKENS,
+  ...SEMANTIC_PALETTE_TOKENS,
+] as const;
+
+export type ChartPaletteToken = (typeof CHART_PALETTE_TOKENS)[number];
+
+/**
+ * Strict Zod schema for the curated palette tokens. Intentionally
+ * does NOT accept legacy numeric tokens (`chart-1` .. `chart-10`)
+ * from #2265. Wrapping the enum in `z.preprocess` would force the
+ * schema's input type to `unknown`, which breaks downstream `z.infer`
+ * consumers (e.g. `validateRequest` in the API handlers infers
+ * `req.body` as `unknown` for any field reached through this schema).
+ *
+ * Legacy data is healed at load time instead: see
+ * `normalizeDashboardTileColors` in `packages/app/src/dashboard.ts`,
+ * which walks `tiles[i].config.color` and replaces any legacy token
+ * with its hue-named equivalent via `resolveChartPaletteToken`.
+ * Render-time consumers also call `resolveChartPaletteToken` as
+ * belt-and-suspenders against any data path that bypasses the
+ * fetch-time normalizer.
+ */
+export const ChartPaletteTokenSchema = z.enum(CHART_PALETTE_TOKENS);
+
+/**
+ * A single conditional color rule. Rules are evaluated in order against
+ * the tile's displayed value; the LAST matching rule's color wins
+ * (last-match-wins: higher-priority rules go last). If no rule matches,
+ * the tile's static `color` applies; if that is unset, the default text
+ * color applies.
+ *
+ * String operators (`contains`, `startsWith`, `endsWith`, `regex`) are
+ * included at the schema level so a future table-tile slice can reuse
+ * the same type without a schema change. The number-tile UI only exposes
+ * numeric / equality operators.
+ *
+ * Lives in common-utils so both the app and a future external-API parity
+ * PR can import it.
+ */
+// Numeric ordered operators (gt | gte | lt | lte).
+const numericOrderedColorCondition = z.object({
+  operator: z.enum(['gt', 'gte', 'lt', 'lte']),
+  value: z.number().finite(),
+  color: ChartPaletteTokenSchema,
+  label: z.string().max(40).optional(),
+});
+
+const betweenColorCondition = z.object({
+  operator: z.literal('between'),
+  value: z.tuple([z.number().finite(), z.number().finite()]),
+  color: ChartPaletteTokenSchema,
+  label: z.string().max(40).optional(),
+});
+
+// Equality against a number or a string value.
+const equalityColorCondition = z.object({
+  operator: z.enum(['eq', 'neq']),
+  value: z.union([z.number().finite(), z.string().max(200)]),
+  color: ChartPaletteTokenSchema,
+  label: z.string().max(40).optional(),
+});
+
+// String-match operators, kept at the schema level only for a future
+// table-tile slice (see the doc comment above). The number-tile editor
+// never emits these.
+const stringMatchColorCondition = z.object({
+  operator: z.enum(['contains', 'startsWith', 'endsWith']),
+  value: z.string().min(1).max(200),
+  color: ChartPaletteTokenSchema,
+  label: z.string().max(40).optional(),
+});
+
+const regexColorCondition = z.object({
+  operator: z.literal('regex'),
+  value: z
+    .string()
+    .min(1)
+    .max(500)
+    .refine(
+      v => {
+        try {
+          new RegExp(v);
+          return true;
+        } catch {
+          return false;
+        }
+      },
+      { message: 'Invalid regex pattern' },
+    ),
+  color: ChartPaletteTokenSchema,
+  label: z.string().max(40).optional(),
+});
+
+export const ColorConditionSchema = z.discriminatedUnion('operator', [
+  numericOrderedColorCondition,
+  betweenColorCondition,
+  equalityColorCondition,
+  stringMatchColorCondition,
+  regexColorCondition,
+]);
+
+export type ColorCondition = z.infer<typeof ColorConditionSchema>;
+
 export const DerivedColumnSchema = z.intersection(
   RootValueExpressionSchema,
   z.object({
@@ -238,6 +390,20 @@ export const DerivedColumnSchema = z.intersection(
     countExpression: z.string().optional(),
     heatmapScaleType: z.enum(['log', 'linear']).optional(),
     numberFormat: NumberFormatSchema.optional(),
+    // Per-column palette-token color, applied by the renderer to this
+    // column's cells on table tiles only (gated in the series editor by
+    // display type); other display types ignore the field. Mirrors the
+    // per-column `numberFormat` above. The select item is the per-column
+    // config home for builder table tiles, so the table-cell counterpart
+    // of the number tile's static color lives here.
+    color: ChartPaletteTokenSchema.optional(),
+    // Ordered conditional color rules for this column's cells on table
+    // tiles. Last matching rule wins (higher-priority rules go last); when
+    // no rule matches the column's static `color` applies. The table-cell
+    // counterpart of the number tile's `colorRules`, reusing the same
+    // `ColorConditionSchema` so no schema change was needed (the union's
+    // string-match operators were always intended for this slice).
+    colorRules: z.array(ColorConditionSchema).max(10).optional(),
   }),
 );
 export const SelectListSchema = z.array(DerivedColumnSchema).or(z.string());
@@ -793,61 +959,6 @@ export function isOnClickDashboardById(
   );
 }
 
-/**
- * The set of palette tokens a user can pick for chart series colors,
- * number-tile colors, reference lines, and threshold rules.
- *
- * Tokens map to CSS variables in
- * `packages/app/src/theme/themes/<theme>/_tokens.scss`:
- *   chart-{hue}                 -> --color-chart-{hue}                    (10 hues, unified across themes)
- *   chart-success/warning/error -> --color-chart-{success|warning|error}  (semantic; unified across brands)
- *
- * `chart-info` is a render-time CSS variable (defined in the shared
- * `chart-semantic-tokens` SCSS mixin) but is intentionally *not* in the
- * picker enum; it's consumed only by code paths that always want
- * brand-primary (e.g. info-level log series, `getChartColorInfo()`).
- *
- * Storing tokens (not hex) lets user choices reflow correctly across
- * themes and color modes; see notes/repo-conventions/hyperdx/tile-styling.md.
- *
- * Lives in common-utils because the schema is shared between the app
- * and the API; the theme-aware CSS resolver (`getColorFromCSSToken`)
- * stays in `packages/app/src/utils.ts` because it depends on
- * `getComputedStyle(document.documentElement)`.
- */
-/** Categorical tokens (10 hues). Tuple literal so the element type
- * stays narrow (`'chart-blue' | 'chart-orange' | ...`) rather than
- * widening to `ChartPaletteToken`; downstream consumers like
- * `CATEGORICAL_HEX_BY_TOKEN` in `packages/app/src/utils.ts` rely on
- * the narrow element type to enforce 1:1 coverage at compile time. */
-export const CATEGORICAL_PALETTE_TOKENS = [
-  'chart-blue',
-  'chart-orange',
-  'chart-red',
-  'chart-cyan',
-  'chart-green',
-  'chart-pink',
-  'chart-purple',
-  'chart-light-blue',
-  'chart-brown',
-  'chart-gray',
-] as const;
-
-/** Semantic tokens (success / warning / error). Tuple literal for the
- * same narrow-element-type reason as the categorical list above. */
-export const SEMANTIC_PALETTE_TOKENS = [
-  'chart-success',
-  'chart-warning',
-  'chart-error',
-] as const;
-
-export const CHART_PALETTE_TOKENS = [
-  ...CATEGORICAL_PALETTE_TOKENS,
-  ...SEMANTIC_PALETTE_TOKENS,
-] as const;
-
-export type ChartPaletteToken = (typeof CHART_PALETTE_TOKENS)[number];
-
 /** Numeric tokens (`chart-1` .. `chart-10`) shipped in #2265. */
 type LegacyChartPaletteTokenKey =
   | 'chart-1'
@@ -999,103 +1110,6 @@ export function walkRawDashboardTileColors(
   return changed ? { ...root, tiles: nextTiles } : input;
 }
 
-/**
- * Strict Zod schema for the curated palette tokens. Intentionally
- * does NOT accept legacy numeric tokens (`chart-1` .. `chart-10`)
- * from #2265. Wrapping the enum in `z.preprocess` would force the
- * schema's input type to `unknown`, which breaks downstream `z.infer`
- * consumers (e.g. `validateRequest` in the API handlers infers
- * `req.body` as `unknown` for any field reached through this schema).
- *
- * Legacy data is healed at load time instead: see
- * `normalizeDashboardTileColors` in `packages/app/src/dashboard.ts`,
- * which walks `tiles[i].config.color` and replaces any legacy token
- * with its hue-named equivalent via `resolveChartPaletteToken`.
- * Render-time consumers also call `resolveChartPaletteToken` as
- * belt-and-suspenders against any data path that bypasses the
- * fetch-time normalizer.
- */
-export const ChartPaletteTokenSchema = z.enum(CHART_PALETTE_TOKENS);
-
-/**
- * A single conditional color rule. Rules are evaluated in order against
- * the tile's displayed value; the LAST matching rule's color wins
- * (last-match-wins: higher-priority rules go last). If no rule matches,
- * the tile's static `color` applies; if that is unset, the default text
- * color applies.
- *
- * String operators (`contains`, `startsWith`, `endsWith`, `regex`) are
- * included at the schema level so a future table-tile slice can reuse
- * the same type without a schema change. The number-tile UI only exposes
- * numeric / equality operators.
- *
- * Lives in common-utils so both the app and a future external-API parity
- * PR can import it.
- */
-// Numeric ordered operators (gt | gte | lt | lte).
-const numericOrderedColorCondition = z.object({
-  operator: z.enum(['gt', 'gte', 'lt', 'lte']),
-  value: z.number().finite(),
-  color: ChartPaletteTokenSchema,
-  label: z.string().max(40).optional(),
-});
-
-const betweenColorCondition = z.object({
-  operator: z.literal('between'),
-  value: z.tuple([z.number().finite(), z.number().finite()]),
-  color: ChartPaletteTokenSchema,
-  label: z.string().max(40).optional(),
-});
-
-// Equality against a number or a string value.
-const equalityColorCondition = z.object({
-  operator: z.enum(['eq', 'neq']),
-  value: z.union([z.number().finite(), z.string().max(200)]),
-  color: ChartPaletteTokenSchema,
-  label: z.string().max(40).optional(),
-});
-
-// String-match operators, kept at the schema level only for a future
-// table-tile slice (see the doc comment above). The number-tile editor
-// never emits these.
-const stringMatchColorCondition = z.object({
-  operator: z.enum(['contains', 'startsWith', 'endsWith']),
-  value: z.string().min(1).max(200),
-  color: ChartPaletteTokenSchema,
-  label: z.string().max(40).optional(),
-});
-
-const regexColorCondition = z.object({
-  operator: z.literal('regex'),
-  value: z
-    .string()
-    .min(1)
-    .max(500)
-    .refine(
-      v => {
-        try {
-          new RegExp(v);
-          return true;
-        } catch {
-          return false;
-        }
-      },
-      { message: 'Invalid regex pattern' },
-    ),
-  color: ChartPaletteTokenSchema,
-  label: z.string().max(40).optional(),
-});
-
-export const ColorConditionSchema = z.discriminatedUnion('operator', [
-  numericOrderedColorCondition,
-  betweenColorCondition,
-  equalityColorCondition,
-  stringMatchColorCondition,
-  regexColorCondition,
-]);
-
-export type ColorCondition = z.infer<typeof ColorConditionSchema>;
-
 /**
  * The subset of color-rule operators the number-tile editor actually
  * emits (`ColorRulesEditor.tsx` OPERATOR_OPTIONS: gt, gte, lt, lte,

From d13319f13ae0f6da432201ae9b0e2072748d545f Mon Sep 17 00:00:00 2001
From: Alex Fedotyev <61838744+alex-fedotyev@users.noreply.github.com>
Date: Wed, 24 Jun 2026 17:50:00 +0000
Subject: [PATCH 2/3] fix(dashboards): close the color drawer only after a
 valid submit

Address review on #2517: move onClose() inside the handleSubmit success
callback in SeriesColorDrawer so closing follows a valid submit instead of
firing unconditionally. Harmless today (no validation rules) but avoids
silently discarding an in-progress edit if a resolver or required field is
added later.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/app/src/components/SeriesColorDrawer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/SeriesColorDrawer.tsx b/packages/app/src/components/SeriesColorDrawer.tsx
index c166613556..1f09c94c81 100644
--- a/packages/app/src/components/SeriesColorDrawer.tsx
+++ b/packages/app/src/components/SeriesColorDrawer.tsx
@@ -74,6 +74,8 @@ export default function SeriesColorDrawer({
   }, [reset, appliedDefaults, onClose]);
 
   const applyChanges = useCallback(() => {
+    // Close inside the success callback so a future validation rule cannot
+    // discard an in-progress edit on Apply (close only follows a valid submit).
     handleSubmit(values => {
       onChange({
         color: values.color,
@@ -82,8 +84,8 @@ export default function SeriesColorDrawer({
             ? stripLocalIds(values.colorRules)
             : undefined,
       });
+      onClose();
     })();
-    onClose();
   }, [handleSubmit, onChange, onClose]);
 
   const clearColor = useCallback(() => {

From a51df75972a5b157b8905b367500d0e8c1a07fc9 Mon Sep 17 00:00:00 2001
From: Alex Fedotyev <61838744+alex-fedotyev@users.noreply.github.com>
Date: Wed, 24 Jun 2026 17:57:32 +0000
Subject: [PATCH 3/3] fix(dashboards): coerce numeric-string cells before
 conditional color

Address testing feedback on #2517: ClickHouse serializes numeric aggregates
(count is UInt64, sums) as strings, so the cell value arrives as "15770" not
15770. The numeric color operators (gt / lt / between) require a number, so a
rule like "> 100 -> red" never matched and every cell fell back to the static
color. Coerce a numeric-looking string to a number before resolving (genuine
strings stay as-is for equality / string-match rules), mirroring DBNumberChart.

Add a render test that drives string-serialized values so the regression is
locked.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/app/src/HDXMultiSeriesTableChart.tsx | 27 +++++++++++++----
 .../HDXMultiSeriesTableChart.test.tsx         | 30 +++++++++++++++++++
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
index 8a5006e559..c282973708 100644
--- a/packages/app/src/HDXMultiSeriesTableChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -181,13 +181,28 @@ export const Table = ({
 
               // Resolve this cell's color from the column config: ordered
               // rules first (last match wins), then the column's static
-              // color, else no override. The raw value drives evaluation
-              // (numbers for comparisons, strings for equality / string
-              // match); non-primitive values (stringified above) never match.
-              const colorValue =
-                typeof value === 'number' || typeof value === 'string'
-                  ? value
+              // color, else no override. ClickHouse serializes numeric
+              // aggregates (count is UInt64, sums, etc.) as strings, so coerce
+              // a numeric-looking value to a number first; otherwise the
+              // numeric operators (gt / lt / between) never match. Genuine
+              // strings (group-by labels, status values) stay as-is so the
+              // equality / string-match rules still work. Mirrors the value
+              // coercion in DBNumberChart.
+              //
+              // react-table types the getter as `number`, but the runtime
+              // value can be a string (see above), so read it through
+              // `unknown` to narrow honestly without an unsafe cast.
+              const cellValue: unknown = value;
+              const primitiveValue =
+                typeof cellValue === 'number' || typeof cellValue === 'string'
+                  ? cellValue
                   : null;
+              const colorValue =
+                typeof primitiveValue === 'string' &&
+                primitiveValue.trim() !== '' &&
+                Number.isFinite(Number(primitiveValue))
+                  ? Number(primitiveValue)
+                  : primitiveValue;
               const resolvedColorToken = resolveConditionalColor(
                 colorValue,
                 colorRules,
diff --git a/packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx b/packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx
index b7962a213a..ec5a00cdae 100644
--- a/packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx
+++ b/packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx
@@ -404,6 +404,36 @@ describe('HDXMultiSeriesTableChart <Table>', () => {
       expect((screen.getByText('10') as HTMLElement).style.color).toBe('');
     });
 
+    it('matches numeric rules against string-serialized values (ClickHouse counts)', () => {
+      // ClickHouse serializes count() (UInt64) and other numeric aggregates as
+      // strings, so the cell value arrives as "600" / "10", not 600 / 10. The
+      // numeric `gt` rule must still match after coercion.
+      renderWithMantine(
+        <Table
+          data={[
+            { ServiceName: 'web', Count: '600' },
+            { ServiceName: 'api', Count: '10' },
+          ]}
+          columns={[
+            serviceCol,
+            {
+              id: 'count',
+              dataKey: 'Count',
+              displayName: 'Count',
+              colorRules: [
+                { operator: 'gt', value: 100, color: 'chart-error' },
+              ],
+            },
+          ]}
+          sorting={[]}
+          onSortingChange={() => {}}
+        />,
+      );
+
+      expect((screen.getByText('600') as HTMLElement).style.color).not.toBe('');
+      expect((screen.getByText('10') as HTMLElement).style.color).toBe('');
+    });
+
     it('renders the default color for an unknown token without throwing', () => {
       expect(() =>
         renderWithMantine(