feat: show inline span durations in trace timeline

[karl-power]

Summary

Adds duration labels next to each span bar in the trace waterfall timeline so users can read the duration at a glance without hovering the tooltip.

Changes

Timeline chart

• TimelineChartRowEvents
  • Renders a duration label (e.g. 12ms, 1.2s) outside each bar using position: absolute, so it doesn’t affect layout.
  • Placement: Label is on the right of the bar when most of the bar is before the timeline midpoint, and on the left when most of the bar is past the midpoint (based on bar center vs. maxVal / 2), to keep it in the emptier side.
  • Uses existing renderMs() from TimelineChart/utils for formatting.
  • Wraps each bar in a container with overflow: visible so the duration label is not clipped by the bar’s text-truncate (overflow hidden).
  • TTimelineEvent now supports optional showDuration?: boolean. When false, the duration label is hidden (default is to show).

DBTraceWaterfallChart

• When building timeline events, sets showDuration: type !== SourceKind.Log so log rows do not show a duration (only spans do).

Screenshots

Testing

• Open a trace with multiple spans and at least one correlated log; confirm duration appears beside span bars (left or right by midpoint) and does not appear beside log rows.

References

• Closes HDX-3671

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 16, 2026 9:38am

[changeset-bot]

🦋 Changeset detected

Latest commit: 2290d75

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]

PR Review

• ⚠️ Commented-out overflow: 'visible' on the wrapper div (TimelineChartRowEvents.tsx:88) → The duration label is position: absolute and placed outside the bar bounds via left: '100%' / right: '100%'. If any ancestor has overflow: hidden, labels will be clipped. The comment suggests this was tried; needs investigation to confirm labels render correctly in all trace panel scroll/overflow contexts, or restore the property.

• ⚠️ Unicode identifier µsRounded in utils.ts:3 → Using the Unicode µ character as a variable name is non-standard and can cause issues with certain editors, search tools, or copy-paste. Use a plain ASCII name like usRounded or microseconds.

• ✅ Logic, test coverage, and smart left/right placement are clean. No security or critical bugs found.

[github-actions]

E2E Test Results

✅ All tests passed • 88 passed • 3 skipped • 903s

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

Tests ran across 4 shards in parallel.

View full report →