feat: chart UX polish & heatmap fixes by alex-fedotyev · Pull Request #1834 · ClickHouse/ClickStack

alex-fedotyev · 2026-03-02T17:06:55Z

Summary

PropertyComparisonChart: Typed tooltip (replaces any props), TruncatedTick custom XAxis tick with native SVG tooltip for long attribute labels, per-bar Cell coloring for the "Other" aggregated bucket, CSS ellipsis on chart titles
deltaChartUtils: applyTopNAggregation() with adaptive threshold (shows all values up to 8, collapses beyond 6 into "Other (N)"), color constants (ALL_SPANS_COLOR, OTHER_BUCKET_COLOR)
DBHeatmapChart: Fix tooltip showing on page load (mouseInsideRef gate for uPlot setCursor init), fix invalid rgba(#hex ...) CSS syntax (2 occurrences), fix tooltip overflow near right edge (flip at 50% width, add maxWidth), ignore zero-size selections, red selection rectangle color for heatmap (scoped CSS), keyboard accessibility on "Filter by Selection" button
Tests: 8 unit tests for applyTopNAggregation covering adaptive threshold, top-N sorting, Other bucket accumulation

Test plan

Verify heatmap tooltip no longer appears on initial page load (before hovering)
Verify tooltip flips correctly near the right edge without overflow
Verify heatmap selection rectangle is red (not green)
Verify "Filter by Selection" button is keyboard-accessible (Tab + Enter)
Verify attribute charts show "Other (N)" bucket for high-cardinality fields
Verify truncated axis labels show full text on hover (native tooltip)
Run npx jest src/components/__tests__/deltaChartUtils.test.ts — 8 tests pass

🤖 Generated with Claude Code

- PropertyComparisonChart: typed tooltip, TruncatedTick for long labels, per-bar Cell coloring for "Other" bucket, CSS ellipsis on chart titles - deltaChartUtils: applyTopNAggregation with adaptive threshold (MAX_CHART_VALUES=6, upper=8), constants for colors - DBHeatmapChart: fix tooltip showing on page load (mouseInsideRef gate), fix invalid rgba(#hex) CSS, fix tooltip overflow near right edge, ignore zero-size selections, red selection color for heatmap, keyboard a11y on filter button - Tests: 8 unit tests for applyTopNAggregation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel · 2026-03-02T17:07:01Z

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 3, 2026 6:45pm

changeset-bot · 2026-03-02T17:07:03Z

🦋 Changeset detected

Latest commit: 241146c

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

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

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 · 2026-03-02T17:13:35Z

E2E Test Results

✅ All tests passed • 78 passed • 4 skipped • 839s

Status	Count
✅ Passed	78
❌ Failed	0
⚠️ Flaky	0
⏭️ Skipped	4

Tests ran across 4 shards in parallel.

View full report →

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-03-02T21:42:57Z

Claude finished @teeohhem's task in 1m 18s —— View job

PR Review

✅ The fixes for rgba(#hex ...) invalid CSS, mouseInsideRef tooltip gate, zero-size selection guard, and keyboard accessibility are all solid. Good test coverage for applyTopNAggregation.

A few items worth addressing:

⚠️ Tooltip whiteSpace: 'nowrap' without overflow: hidden (DBHeatmapChart.tsx:874) — maxWidth: '50%' limits the container box, but whiteSpace: 'nowrap' prevents wrapping and the default overflow: visible means long content can still bleed outside the box. Either drop whiteSpace: 'nowrap' (allow wrapping within maxWidth) or add overflow: 'hidden' to actually clip. Fix this →
⚠️ Non-existent ESLint rule in disable comment (DBHeatmapChart.tsx:757) — // eslint-disable-next-line react-hooks/refs is not a real rule (the real ones are react-hooks/rules-of-hooks and react-hooks/exhaustive-deps). This comment does nothing and is misleading. Since mouseInsideRef is a ref (exempt from deps arrays), the comment should just be removed. Fix this →
🔵 Tooltip zIndex jumped from 1000 → 9998 (PropertyComparisonChart.tsx:170) — Not a bug but worth being intentional; 9998 is very aggressive and could layer over modals/dialogs. Consider whether 1000–2000 would suffice.

- Add overflow: hidden + textOverflow: ellipsis to heatmap tooltip so long content respects maxWidth with whiteSpace: nowrap - Lower tooltip z-index from 9998 to 1000 to avoid layering over modals - Add missing changeset Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-03-03T03:07:57Z

Claude finished @alex-fedotyev's task in 1m 7s —— View job

PR Review

✅ Solid fixes overall — tooltip overflow (overflow: 'hidden'), mouseInsideRef gate, zero-size selection guard, keyboard a11y, and test coverage are all good. Previous review items have been addressed.

One remaining item from the prior review:

⚠️ Fake ESLint disable comment (DBHeatmapChart.tsx:759) — // eslint-disable-next-line react-hooks/refs is not a real ESLint rule and does nothing. The comment text itself is a good explanation but should just be a plain comment, not an eslint-disable. Fix this →

teeohhem · 2026-03-03T14:33:44Z

Thanks. This is super close. The bottom (X-Axis) labels are a darker color and hard to read vs. main

This branch

Main

The custom SVG <text> element had no explicit fill, defaulting to black which was unreadable in dark mode. Using fill="currentColor" inherits the text color from Mantine's theme provider, adapting to both themes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-03-03T15:44:13Z

Claude finished @alex-fedotyev's task in 1m 38s —— View job

PR Review

⚠️ X-axis tick labels too dark (PropertyComparisonChart.tsx:101) — TruncatedTick uses fill="currentColor", which inherits the full CSS text color. All other recharts axis ticks in the codebase (e.g. DBRowTable.tsx, DBHistogramChart.tsx) use recharts' default, which renders as a muted gray #666. Using currentColor produces fully-saturated text that reads as heavier/darker. Fix: replace with fill="var(--color-text-muted)" to match the visual weight of default recharts ticks and maintain light/dark theme compatibility. Fix this →
⚠️ Fake ESLint disable comment (DBHeatmapChart.tsx:759) — // eslint-disable-next-line react-hooks/refs is not a real rule and does nothing. Should be a plain // mouseInsideRef is read at event time, not during render comment. Fix this →

alex-fedotyev · 2026-03-03T15:52:22Z

@teeohhem - good eye! Both themes should have correct fonts now, please take a look.

Replace fill="currentColor" with fill="var(--color-text-muted)" so X-axis tick labels have the same muted visual weight as Recharts' default ticks. The CSS variable adapts to both light and dark themes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-03-03T15:54:44Z

Claude finished @alex-fedotyev's task in 42s —— View job

PR Review

✅ All prior review items have been addressed. One remaining cleanup committed:

Fixed (DBHeatmapChart.tsx:759): Replaced // eslint-disable-next-line react-hooks/refs with a plain // mouseInsideRef is read at event time, not during render comment — react-hooks/refs is not a real ESLint rule.

No other issues found.

Co-authored-by: Alex Fedotyev <undefined@users.noreply.github.com>

github-actions · 2026-03-03T16:34:50Z

Claude finished @teeohhem's task in 1m 6s —— View job

PR Review

✅ All prior review items have been addressed. The code is clean and the fixes are solid.

One minor note:

🔵 ALL_SPANS_COLOR exported but unused (deltaChartUtils.ts:94) — exported constant with no imports elsewhere in the codebase. Either use it or remove it to avoid dead exports. Not a blocker.

No critical issues found.

The previous commit converted the eslint-disable-next-line to a plain comment, but react-hooks/refs IS a real ESLint rule that flags passing refs to functions. The disable is correct: mouseInsideRef is only read at event time inside highlightDataPlugin, not during render. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-03-03T16:44:27Z

Claude finished @alex-fedotyev's task in 52s —— View job

PR Review

✅ Solid fixes overall. Two minor remaining items:

🔵 ALL_SPANS_COLOR exported but unused (deltaChartUtils.ts:94) — the constant is exported but has no imports elsewhere in the codebase. Either use it or remove it. Not a blocker. Fix this →
⚠️ react-hooks/refs is not a real ESLint rule (DBHeatmapChart.tsx:759) — eslint-plugin-react-hooks only ships two rules: rules-of-hooks and exhaustive-deps. There is no refs rule; this disable comment is a no-op and misleading. Since mouseInsideRef is a ref (not a dep), there's nothing to suppress anyway — just use a plain comment: // mouseInsideRef is read at event time, not during render. Fix this →

This constant is not used in this PR. It will be introduced in #1824 (Always-on Distribution) where it's actually needed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-03-03T18:43:46Z

Claude finished @alex-fedotyev's task in 1m 7s —— View job

PR Review

✅ Previous review items are resolved: overflow: 'hidden' added to tooltip, ALL_SPANS_COLOR dead export removed, tick label color uses var(--color-text-muted), zIndex lowered to 1000.

One item persists:

⚠️ react-hooks/refs is still a fake ESLint rule (DBHeatmapChart.tsx:759) — eslint-plugin-react-hooks only exports rules-of-hooks and exhaustive-deps. The refs variant doesn't exist; this disable comment is a no-op. Commit d5a72688 labels it "real rule, needed" but it is not. Just use a plain comment: // mouseInsideRef is read at event time, not during render. Fix this →

Resolve conflict in deltaChartUtils.ts: keep both applyTopNAggregation (from merged #1834) and field classification helpers (this branch). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

## Summary Closes #1823 - **PropertyComparisonChart**: Typed tooltip (replaces `any` props), `TruncatedTick` custom XAxis tick with native SVG tooltip for long attribute labels, per-bar `Cell` coloring for the "Other" aggregated bucket, CSS ellipsis on chart titles - **deltaChartUtils**: `applyTopNAggregation()` with adaptive threshold (shows all values up to 8, collapses beyond 6 into "Other (N)"), color constants (`ALL_SPANS_COLOR`, `OTHER_BUCKET_COLOR`) - **DBHeatmapChart**: Fix tooltip showing on page load (`mouseInsideRef` gate for uPlot `setCursor` init), fix invalid `rgba(#hex ...)` CSS syntax (2 occurrences), fix tooltip overflow near right edge (flip at 50% width, add `maxWidth`), ignore zero-size selections, red selection rectangle color for heatmap (scoped CSS), keyboard accessibility on "Filter by Selection" button - **Tests**: 8 unit tests for `applyTopNAggregation` covering adaptive threshold, top-N sorting, Other bucket accumulation ## Test plan - [ ] Verify heatmap tooltip no longer appears on initial page load (before hovering) - [ ] Verify tooltip flips correctly near the right edge without overflow - [ ] Verify heatmap selection rectangle is red (not green) - [ ] Verify "Filter by Selection" button is keyboard-accessible (Tab + Enter) - [ ] Verify attribute charts show "Other (N)" bucket for high-cardinality fields - [ ] Verify truncated axis labels show full text on hover (native tooltip) - [ ] Run `npx jest src/components/__tests__/deltaChartUtils.test.ts` — 8 tests pass 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

vercel Bot deployed to Preview March 2, 2026 17:10

View deployment

fix: prettier formatting in applyTopNAggregation sort callback

433a4d4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview March 2, 2026 17:27

View deployment

alex-fedotyev requested review from a team, knudtty and teeohhem and removed request for a team and knudtty March 2, 2026 19:46

Merge branch 'main' into event-deltas/chart-ux-polish

80859c6

vercel Bot deployed to Preview March 2, 2026 20:18

View deployment

Merge branch 'main' into event-deltas/chart-ux-polish

2d6383b

vercel Bot deployed to Preview March 2, 2026 21:45

View deployment

vercel Bot deployed to Preview March 3, 2026 03:10

View deployment

alex-fedotyev added the automerge label Mar 3, 2026

vercel Bot deployed to Preview March 3, 2026 15:46

View deployment

fix: remove fake eslint-disable react-hooks/refs comment

26d80cf

Co-authored-by: Alex Fedotyev <undefined@users.noreply.github.com>

vercel Bot deployed to Preview March 3, 2026 15:58

View deployment

Merge branch 'main' into event-deltas/chart-ux-polish

ea6c66c

vercel Bot deployed to Preview March 3, 2026 16:37

View deployment

vercel Bot deployed to Preview March 3, 2026 16:46

View deployment

chore: remove unused ALL_SPANS_COLOR export

241146c

This constant is not used in this PR. It will be introduced in #1824 (Always-on Distribution) where it's actually needed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview March 3, 2026 18:45

View deployment

teeohhem approved these changes Mar 3, 2026

View reviewed changes

kodiakhq Bot merged commit bbb1f1f into main Mar 3, 2026
26 of 27 checks passed

kodiakhq Bot deleted the event-deltas/chart-ux-polish branch March 3, 2026 19:41

Conversation

alex-fedotyev commented Mar 2, 2026

Summary

Test plan

Uh oh!

vercel Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E Test Results

Uh oh!

github-actions Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

github-actions Bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

teeohhem commented Mar 3, 2026

Uh oh!

github-actions Bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

alex-fedotyev commented Mar 3, 2026

Uh oh!

github-actions Bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

github-actions Bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

github-actions Bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

github-actions Bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Mar 2, 2026 •

edited

Loading

changeset-bot Bot commented Mar 2, 2026 •

edited

Loading

github-actions Bot commented Mar 2, 2026 •

edited

Loading

github-actions Bot commented Mar 2, 2026 •

edited

Loading

github-actions Bot commented Mar 3, 2026 •

edited

Loading

github-actions Bot commented Mar 3, 2026 •

edited

Loading

github-actions Bot commented Mar 3, 2026 •

edited

Loading

github-actions Bot commented Mar 3, 2026 •

edited

Loading

github-actions Bot commented Mar 3, 2026 •

edited

Loading

github-actions Bot commented Mar 3, 2026 •

edited

Loading