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 11, 2026 5:44pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 98f711e

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 dead code // overflow: 'visible', left in the outer wrapper div → Remove the comment
• ⚠️ PR description says "default is to show" but showDuration?: boolean defaults to undefined (falsy), so !!e.showDuration defaults to not showing → Either change check to e.showDuration !== false to match the stated intent, or update the PR description to reflect that it only shows when explicitly set to true

✅ No critical bugs or security issues. The feature logic is sound — spans show durations, logs don't, and placement (left/right of midpoint) is correct.

[github-actions]

E2E Test Results

✅ All tests passed • 86 passed • 3 skipped • 979s

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

Tests ran across 4 shards in parallel.

View full report →