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 18, 2026 3:56pm

[changeset-bot]

🦋 Changeset detected

Latest commit: ff624d1

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' left in TimelineChartRowEvents.tsx:88 → Remove dead code; if parent containers clip the labels (they likely do in narrow spans), the feature may silently not work — verify labels are visible for very short spans near the timeline edges and add overflow: visible to the appropriate parent if needed

• ℹ️ !!e.showDuration double negation on the render condition is unnecessary since showDuration is boolean | undefined and already falsy when undefined → Use e.showDuration && directly

✅ Otherwise clean: good test coverage for the new renderMs µs branch, correct label placement logic, and appropriate use of pointerEvents: none on the label span.

[github-actions]

E2E Test Results

✅ All tests passed • 89 passed • 3 skipped • 978s

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

Tests ran across 4 shards in parallel.

View full report →

[wrn14897]

lgtm