feat(dashboards): per-column color on table tiles

[alex-fedotyev]

Bring the number-tile color features to dashboard table tiles. On a builder table tile 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 picker. This extends the tile color work from #1360 to tables.

Summary

• Add optional color and colorRules to the per-column builder config (DerivedColumnSchema), mirroring the existing per-column numberFormat. colorRules reuses the existing ColorConditionSchema (ordered, last matching rule wins, falling back to the static color).
• Render: DBTableChart builds per-column colorByColumn / rulesByColumn lookups alongside formatByColumn, and HDXMultiSeriesTableChart resolves and applies each cell's color via the shared resolveConditionalColor and getColorFromCSSToken. Numeric-string values (ClickHouse serializes counts as strings) are coerced so numeric rules match, and unknown tokens are guarded so older configs render the default color instead of throwing.
• Editor: a new per-column color drawer (SeriesColorDrawer) opens from a palette icon in the series row, shown only on table tiles. It reuses the existing ColorSwatchInput and ColorRulesEditor.
• Colors persist as palette tokens, never hex, so they reflow across light and dark themes.

Screenshots

A builder table tile with a static chart-success base on the count column plus a > 50000 rule mapped to chart-error, over the demo logs. Values above the threshold render red, the rest green; the group-by column stays the default color.

Why the types.ts move

To let DerivedColumnSchema reference the palette and color-condition schemas (defined lower in the file), I relocated those primitive schemas above it. This is a pure move with no logic change. The legacy-token migration helpers and the number-tile schemas stay where they were, so the relocation is kept to the minimum the ordering requires.

What's not in this PR (follow-ups)

• Group-by / dimension column coloring (the select array addresses aggregation columns only).
• Raw-SQL table color (no per-column schema slot to attach to).
• String / regex operators in the rules UI (the schema accepts them; the editor emits the numeric and equality subset today, same as the number tile).
• External API, MCP, and customer-docs parity, each as its own follow-up, matching how the number-tile color shipped.

Test plan

• yarn lint:fix
• make ci-lint (lint + tsc), yarn knip
• Unit: schema round-trip (color + colorRules per operator family, plus rejections for unknown tokens and more than 10 rules); table render (static color, conditional match / no-match, numeric-string coercion, unknown-token renders default without throwing); the color drawer (swatch sets the color, rules round-trip and strip client-side ids, clear); the series editor (color control shown on table tiles, hidden otherwise, opens the drawer).
• Manual UI verification in light and dark on the Vercel preview build (screenshots above).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ignored	Preview	Jul 23, 2026 10:31am
hyperdx-storybook	Ignored	Preview	Jul 23, 2026 10:31am

[changeset-bot]

🦋 Changeset detected

Latest commit: bb0cafe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@hyperdx/common-utils	Minor
@hyperdx/app	Minor
@hyperdx/api	Minor
@hyperdx/otel-collector	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟡 Tier 3 — Standard

Introduces new logic, modifies core functionality, or touches areas with non-trivial risk.

Why this tier:

• Diff size: 647 production lines changed (Tier 2 max: < 250)
• Cross-layer change: touches frontend (packages/app) + shared utils (packages/common-utils)

Review process: Full human review — logic, architecture, edge cases.
SLA: First-pass feedback within 1 business day.

Stats

• Production files changed: 6
• Production lines changed: 647 (+ 387 in test files, excluded from tier calculation)
• Branch: alex/table-cell-color
• Author: alex-fedotyev

To override this classification, remove the review/tier-3 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[greptile-apps]

Greptile Summary

This PR extends the existing number-tile color feature to dashboard table tiles, adding optional color and colorRules fields to DerivedColumnSchema and wiring them through DBTableChart → HDXMultiSeriesTableChart.Table so each cell resolves and applies a palette-token color at render time.

• Schema: color (static ChartPaletteToken) and colorRules (up to 10 ordered ColorCondition rules) are added to DerivedColumnSchema, reusing the existing discriminated-union schema; the palette/condition schema definitions are relocated above DerivedColumnSchema to satisfy Zod's forward-reference constraint.
• Render: DBTableChart builds colorByColumn/rulesByColumn Maps mirroring the existing formatByColumn approach; HDXMultiSeriesTableChart coerces ClickHouse string-serialized numerics before rule evaluation and guards the CSS resolver with isChartPaletteToken so unknown legacy tokens degrade gracefully.
• Editor: A new SeriesColorDrawer (reusing ColorSwatchInput and ColorRulesEditor) opens from a palette icon visible only on table tiles; colors persist as tokens for theme reflow.

Confidence Score: 4/5

Safe to merge after fixing the missing color style on the external-link cell path.

The external-link rendering branch in HDXMultiSeriesTableChart.tsx is the only cell variant that omits style={colorStyle}. Every other interactive path — internal Link, error button, and getRowSearchLink Link — correctly applies it. When a configured color rule is in effect and a row resolves to an external URL, the cell renders with the default text color while all surrounding cells in the same column show the chosen palette color. The rest of the implementation is clean: schema, render logic, drawer, and tests are all consistent.

packages/app/src/HDXMultiSeriesTableChart.tsx — the external-link cell branch needs style={colorStyle} added to the tag.

Important Files Changed

Filename	Overview
packages/app/src/HDXMultiSeriesTableChart.tsx	Adds per-column color and colorRules to the Table component's column definition, resolving and applying a colorStyle to each cell. The external-link rendering branch is missing the style application while all other three interactive paths have it.
packages/app/src/components/DBTableChart.tsx	Builds colorByColumn and rulesByColumn maps from select-array indices aligned to meta column names, mirroring the existing formatByColumn approach; cleanly skips group-by columns.
packages/app/src/components/SeriesColorDrawer.tsx	New drawer component for per-column color editing; correctly places onClose inside the handleSubmit success callback, resets the form on cancel, and strips client-side localIds before calling onChange.
packages/common-utils/src/types.ts	Relocates palette and color-condition schema definitions above DerivedColumnSchema to satisfy reference ordering; adds optional color and colorRules fields to DerivedColumnSchema with a 10-rule cap. Pure structural move with no logic change.
packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx	Adds showColor prop, palette icon button gated on displayType === Table, and SeriesColorDrawer integration; color icon previews the active token.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[DerivedColumnSchema\ncolor? + colorRules?] -->|persisted in select array| B[DBTableChart]
    B -->|builds Maps per meta index| C[colorByColumn Map\nrulesByColumn Map]
    C -->|passed as column props| D[HDXMultiSeriesTableChart Table]
    D -->|per cell| E{coerce value\nto number if numeric string}
    E --> F[resolveConditionalColor\nlast-match-wins rules → static color → undefined]
    F --> G{isChartPaletteToken?}
    G -->|yes| H[getColorFromCSSToken\nCSS var lookup]
    G -->|no / unknown token| I[colorStyle = undefined\ndefault text color]
    H --> J[colorStyle applied to cell element]
    J --> K1[internal Link ✓]
    J --> K2[error button ✓]
    J --> K3[getRowSearchLink Link ✓]
    J --> K4[plain div ✓]
    J -.->|missing| K5[external a tag ✗]

Loading

_{Reviews (10): Last reviewed commit:} "Merge branch 'main' into alex/table-cell..." | Re-trigger Greptile

[github-actions]

E2E Test Results

✅ All tests passed • 242 passed • 1 skipped • 959s

Status	Count
✅ Passed	242
❌ Failed	0
⚠️ Flaky	1
⏭️ Skipped	1

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

Deep Review

✅ No critical issues found. No P0/P1 defects: the schema is backward-compatible and additive, tokens persist as palette tokens, the unknown-token render path is guarded against throwing, and the numeric-string coercion for ClickHouse-serialized counts is correct. The items below are recommended follow-ups.

🟡 P2 -- recommended

• packages/app/src/HDXMultiSeriesTableChart.tsx:248 -- The external-link cell branch renders <a href target="_blank"> without style={colorStyle}, so a colored column's cells render uncolored whenever getRowAction resolves to an external URL, while every other cell shape (internal Link, button, search Link, plain div) applies the color.
  • Fix: Add style={colorStyle} to the external-link <a> element so external-link cells color consistently with the other cell shapes.
  • _correctness
• packages/app/src/components/DBTableChart.tsx:153 -- The new colorByColumn/rulesByColumn builder (select-index → meta[i].name → row-key mapping, group-by exclusion at lines 212-215, ratio-config skip at line 149) has no test; only the presentational Table, which receives columns directly, is covered, so a wiring/off-by-one regression in this mapping would go undetected.
  • Fix: Add a DBTableChart color suite (mirroring the existing groupByColumnsOnLeft/alternateRowBackground suites, Table already mocked) asserting mapped color/colorRules land on the right column, group-by columns are excluded, and ratio configs skip per-column color.
  • _{testing, correctness}

🔵 P3 nitpicks (2)

• packages/app/src/HDXMultiSeriesTableChart.tsx:206 -- The render-time coercion converts any Number.isFinite string cell to a number before rule evaluation, so string operators (contains/startsWith/endsWith/regex) can never match a numeric-looking string cell; not reachable through the current editor (its operator list is numeric/equality only), only via API or hand-edited configs.
  • Fix: Evaluate string operators against the pre-coercion string value, or coerce only when the active rule set uses a numeric operator.
• packages/app/src/HDXMultiSeriesTableChart.tsx:221 -- The render path guards with the strict isChartPaletteToken, whereas resolveChartPaletteToken's docstring directs render-time consumers (e.g. the number-tile path) to heal legacy numeric tokens (chart-1..chart-10); a legacy token in a per-column config renders the default color instead of its healed hue. Behaviorally inert today because this field is new and holds no legacy data.
  • Fix: Resolve the token via resolveChartPaletteToken at render to match the number-tile consumer and the ColorSwatchInput preview.

---

Reviewers (2): correctness, testing. An adversarial reviewer was also dispatched; its scenarios (operator switching persistence, display-type-switch stranding color config, Clear-not-persisting-until-Apply, drag-reorder priority) were independently verified against the code and found to be non-issues (the editor coerces eq/neq numeric text to numbers, operator changes reset the value to a schema-valid shape, and dormant color fields on non-table configs are simply ignored). Note: the environment could not produce a git diff (shell/git unavailable), so scope was reconstructed by reading the checked-out PR head; findings are confined to the cohesive color feature and cross-checked against the actual files.

Testing gaps:

• No DBTableChart-level test for the colorByColumn/rulesByColumn builder (mapping, group-by exclusion, ratio skip) — see P2 above.
• No render test for a color-configured column whose cell resolves to an external-link row action (would catch the missing colorStyle).
• No test for a numeric-looking string cell against a string operator (contains/startsWith/etc.), documenting the coercion side-effect.
• Well-covered already: ColorConditionSchema/DerivedColumnSchema round-trips and rejections, evaluateColorCondition/resolveConditionalColor helpers (all operators, between normalization, eq/neq cross-type, regex, last-match-wins), presentational cell rendering (static, conditional, numeric-string, unknown-token), and the drawer/editor components.

[kodiakhq]

This PR currently has a merge conflict. Please resolve this and then re-add the automerge label.

[karl-power]

LGTM but I think the SeriesColorDrawer and ColorRulesEditor could use a review from @elizabetdev to improve UX.

[karl-power]

Suggested change

	// Resolve this cell's color from the column config: ordered
	// rules first (last match wins), then the column's static
	// 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.
	// Resolve this cell's color from the column config: ordered rules first (last match wins).
	// react-table types the getter as `number`, but the runtime value can be a string