Add Show spans/Show logs visibility toggles to trace waterfall panel

[MikeShi42]

Summary

Adds dedicated visibility toggles to the trace waterfall panel, enabling users to independently show or hide trace spans, correlated log events, and span events. This makes it much easier to isolate and review logs within a trace context without visually scanning through all the span rows.

Uses a compact Show: [Spans] [Logs] [Span events] chip-toggle pattern — a "Show:" label followed by tight, pill-shaped Mantine Chips with reduced padding (8px inline, 22px height) in muted gray. Active chips show a subtle dark fill with a checkmark; inactive chips fade to near-transparent. The result is sleek and unobtrusive while remaining easy to discover and interact with.

The filtering is client-side only — both data sources are still fetched so toggling is instant with no re-query. The span/error counts in the header update to reflect only visible rows.

• Spans chip is always visible
• Logs chip only appears when a log source is configured
• All are active by default, preserving existing behavior

Screenshots or video

Default state — all toggles active:

Trace waterfall with all visibility chips active showing 8 spans

Spans toggled off — logs-only view:

Spans chip inactive, waterfall shows only correlated log rows

Logs toggled off — spans-only view:

Logs chip inactive, waterfall shows only span timing bars

Full demo (toggle on/off walkthrough):

pr_demo_trace_visibility_toggles.mp4

How to test locally or on Vercel

1. Start the dev stack (yarn dev) and ensure you have trace + log data (e.g., send OTel traces and correlated logs, or insert directly into ClickHouse)
2. Open the Search page, select the Traces source, and click on a trace row to open the side panel
3. In the trace waterfall panel, verify the "Show:" label followed by "Spans", "Logs", and "Span events" chip toggles in muted gray
4. Toggle each chip and confirm:
   • Toggling off "Spans" hides all span rows, leaving only log rows
   • Toggling off "Logs" hides all log rows, leaving only span rows
   • The count text (e.g., "8 spans, 2 errors") updates to reflect visible rows
   • Toggling back on restores the full waterfall

References

• Linear Issue: HDX-4133

_{To show artifacts inline, enable in settings.}

Linear Issue: HDX-4133

  

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3e4343e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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	May 2, 2026 0:36am

[github-actions]

E2E Test Results

✅ All tests passed • 159 passed • 3 skipped • 1172s

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

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: 1
• Production lines changed: 86 (+ 51 in test files, excluded from tier calculation)
• Branch: cursor/trace-log-filter-toggle-7dd0
• Author: MikeShi42

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]

PR Review

• ⚠️ spanCountString labels all visible nodes as "spans" (visibleNodes.length includes log rows) → The header can read "8 spans" when 3 of those are logs. Pre-existing, but now more noticeable since users can toggle spans/logs independently. Consider separate span vs. log counts, or a neutral label like "8 items".

• ⚠️ When spans are hidden but logs are shown, log rows retain their original indentation level from the tree traversal — orphaned from their parent spans. No crash, but the visual hierarchy may look broken. Consider resetting log row level to 0 when their parent span is hidden, or documenting this as a known visual trade-off.

• ✅ Filter logic is correct — showSpanEvents intentionally kept out of visibleNodes since span events are markers, not rows.

• ✅ Conditional rendering of the Logs chip based on logTableSource is correct.

• ✅ Empty-state disambiguation ("All items are hidden by filters" vs "No matching spans or logs found") is a good fix.

• ✅ Tests cover the new toggle behavior with userEvent and async waitFor.