fix(traces): add precision to waterfall ticks to prevent duplicate labels

[pulpdrew]

Summary

On the trace minimap and waterfall viewer, short traces (or traces zoomed in far enough) produced duplicate tick values for values that rounded to the same ms value. Now, we ensure that adjacent tick labels differ by adding precision when adjacent values would round to the same number.

What changed

• Trace viewer and trace minimap tick labels now show just enough precision to ensure that adjacent values are different
• The trace viewer cursor / tooltip displays precision matching the tick labels

Before

Screen.Recording.2026-07-16.at.8.30.18.AM.mov

After

Screen.Recording.2026-07-16.at.8.29.32.AM.mov

How to test in Preview

Pick a relatively short trace and zoom way in. Observe the trace viewer ticks and cursor/tooltip.

References

Closes HDX-4803
Closes #2650

[changeset-bot]

🦋 Changeset detected

Latest commit: afe63dd

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Jul 16, 2026 7:25pm
hyperdx-storybook	Ready	Preview, Comment	Jul 16, 2026 7:25pm

[greptile-apps]

Greptile Summary

This PR fixes duplicate tick labels on the trace waterfall and minimap when traces are short or heavily zoomed in. It extends renderMs with an optional step parameter and adds a decimalsForStep helper that computes just enough fractional digits to keep adjacent ticks distinct, then threads the tick interval through to both the axis labels and the mouse-cursor tooltip for consistent formatting.

• utils.ts gains decimalsForStep, a new step parameter on renderMs, and an extracted tickIntervalForWidth helper (moved from TimelineXAxis).
• TimelineMinimap now passes the computed interval to renderMs and fixes a pre-existing React key={label} collision (now key={frac}).
• TimelineMouseCursor derives its formatting interval from tickIntervalForWidth, matching the precision shown on the X-axis at the current zoom level.

Confidence Score: 5/5

Safe to merge — all changes are confined to display formatting helpers with no effect on data fetching, state management, or business logic.

The change touches only label-rendering utilities and the React key for minimap ticks. The new decimalsForStep helper is deterministic and fully tested across µs/ms/s unit transitions, edge inputs (null, 0, negative, non-finite), and the rollover boundary where a µs value rounds up to 1 ms.

No files require special attention.

Important Files Changed

Filename	Overview
packages/app/src/components/TimelineChart/utils.ts	Core change: adds decimalsForStep, extends renderMs with optional step for precision, and extracts tickIntervalForWidth/MIN_TICK_PX so they can be shared. Logic is correct and well-guarded against edge cases (null, 0, negative, non-finite step).
packages/app/src/components/TimelineChart/TimelineMinimap.tsx	Passes interval to renderMs for precision-aware labels and switches the tick React key from label to frac, fixing a key-collision bug when duplicate labels existed.
packages/app/src/components/TimelineChart/TimelineXAxis.tsx	Replaces inline interval/MIN_TICK_PX logic with tickIntervalForWidth from utils, and passes interval to renderMs. Clean refactor with no behavioral regression.
packages/app/src/components/TimelineChart/TimelineMouseCursor.tsx	Cursor tooltip now derives its display precision from tickIntervalForWidth, ensuring the readout matches the axis tick labels at the current zoom level.
packages/app/src/components/TimelineChart/tests/utils.test.ts	Thorough new test suite covers ms/µs/s precision variants, edge cases (null/0/negative/infinite step), unit transitions (µs → ms rollover), and tickIntervalForWidth pixel-budgeting behavior.
.changeset/waterfall-tick-precision.md	Patch-level changeset entry for the @hyperdx/app package — correct classification.

_{Reviews (6): Last reviewed commit: "Merge branch 'main' into cursor/waterfal..." | Re-trigger Greptile}

[github-actions]

E2E Test Results

✅ All tests passed • 241 passed • 1 skipped • 1048s

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

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

🔵 Tier 2 — Low Risk

Small, isolated change with no API route or data model modifications.

Why this tier:

• Standard feature/fix — introduces new logic or modifies core functionality

Review process: AI review + quick human skim (target: 5–15 min). Reviewer validates AI assessment and checks for domain-specific concerns.
SLA: Resolve within 4 business hours.

Stats

• Production files changed: 4
• Production lines changed: 86 (+ 114 in test files, excluded from tier calculation)
• Branch: cursor/waterfall-tick-precision-469a
• Author: pulpdrew

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

[github-actions]

Deep Review

✅ No critical issues found.

This is a small, well-tested, backward-compatible change. renderMs's new step parameter is optional and the no-step path preserves prior output, so the three unchanged callers (aiSummarize/helpers.ts, TimelineChartRowEvents.tsx, DBRowSidePanel.tsx) are unaffected. The rounding math in decimalsForStep/renderMs (µs/ms/s branch transitions, the round-up-to-1000 fall-through, and non-finite/≤0 step guards) is exercised by the added unit tests, and the minimap key={frac} change correctly resolves the duplicate-key case that duplicate labels previously produced.

No P2 findings.

🔵 P3 nitpicks (2)

• packages/app/src/components/TimelineChart/TimelineMouseCursor.tsx:112 — the cursor derives its readout precision from a computed eventsContentWidth (clientWidth * scale - labelW) while TimelineXAxis derives its interval from a measured gridContainer.getBoundingClientRect().width, so the two widths can differ by sub-pixel/layout amounts and, only at exact MIN_TICK_PX multiples, yield a different interval and a precision that no longer matches the ticks.
  • Fix: derive the cursor interval from the same measured element width the axis uses, or document that the two width sources are intentionally treated as equivalent.
• packages/app/src/components/TimelineChart/utils.ts:35 — the renderMs JSDoc contains a duplicated word ("the value is is rounded").
  • Fix: remove the repeated "is".

---

Reviewers (6): correctness, testing, maintainability, project-standards, kieran-typescript, julik-frontend-races.

Testing gaps: The cursor↔axis width-source equivalence (the mechanism that keeps cursor precision matched to tick precision) is asserted only by comment, not by a test that pins the two derivations together.

[teeohhem]

Great change!