feat: allow collapsing child spans in trace timeline

[karl-power]

Summary

Trace waterfall chart: Alt+click to collapse a node and all its children, plus memoization, tooltip UX.

Behavior

• Normal click on the expand/collapse chevron: toggles only that row (unchanged).
• Alt+click on the chevron: collapses that row and all its descendants in one go.
• Chevron click no longer selects the row (stopPropagation in the handler).

Implementation

• getDescendantIds: Recursively collects all descendant node ids from the tree; used when Alt+click collapses a node so every descendant id is added to collapsedIds.
• toggleCollapse(id, event): Accepts the click event; on collapse, if event.altKey is true, adds the node’s id and all ids from getDescendantIds(node) to collapsedIds. Calls event.stopPropagation() so the row is not selected.
• Memoization: Tree build and flatten (nodesMap, flattenedNodes) are computed in one useMemo with deps [collapsedIds, rows, validSpanIDs]. timelineRows is memoized in a useMemo with the appropriate deps so the timeline row list is not recomputed on every render.

Tests

• New describe('getDescendantIds') in DBTraceWaterfallChart.test.tsx with six unit tests: no children, undefined children, single level, nested tree, children without id (still recurses to grandchildren), single child.

Screenshots or video

Untitled.mov

How to test locally or on Vercel

1. Open a trace with a multi-level span tree (parent → children → grandchildren).
2. Expand a parent; click the chevron normally — only that row toggles.
3. With the subtree expanded, hold Alt and click the parent’s chevron — the parent and all descendants collapse in one action.
4. Do the same when expanding parent. All collapsed children will be expanded too.

References

• Closes HDX-3672

[changeset-bot]

🦋 Changeset detected

Latest commit: d03ec79

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	Mar 16, 2026 10:20am

[github-actions]

PR Review

• ⚠️ Tree building and flattening share one useMemo with collapsedIds as a dep → Every collapse/expand rebuilds the entire nodesMap from scratch (O(n) tree construction), even though the tree structure only changes when rows/validSpanIDs change. Split into two memos: nodesMap on [rows, validSpanIDs], flattenedNodes on [nodesMap, collapsedIds].

• ⚠️ toggleCollapse depends on nodesMap, which is recreated on every collapse (since collapsedIds is in the nodesMap memo deps). This means toggleCollapse and timelineRows also recompute on every collapse. This cascade is partially a consequence of the above — fixing the split memos would stabilize nodesMap and thus toggleCollapse.

• ℹ️ getDescendantIds type uses children?: any[] for the recursive inner type → Loses type safety at depth >1. Minor, but consider a self-referential type or just use the existing Node type.

• ℹ️ PR description still mentions the Tooltip that was removed in the d03ec797 follow-up commit — description should be updated to reflect the final state (tooltip is gone).

[github-actions]

E2E Test Results

✅ All tests passed • 87 passed • 3 skipped • 964s

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

Tests ran across 4 shards in parallel.

View full report →

[karl-power]

@alex-fedotyev Let me know if you have more thoughts on this UX. I've removed the tooltip for the moment (still visible in the video) as the feeling was that it was distracting/invasive.

[alex-fedotyev]

Let me know if you have more thoughts on this UX. I've removed the tooltip for the moment (still visible in the video) as the feeling was that it was distracting/invasive.

It looks like a completely hidden feature now... am I right?
Few ideas below, we could pick up one or few as they are not conflicting.

1. Maybe implement a custom right-click popup menu which the user can choose to expand/collapse or "all" which also has text about using ALT + mouse click?
   Like in Chrome dev tools HTML object hierarchy: https://umaar.com/dev-tips/181-expand-nodes/

2. Show a hint during mouse over the chevron icon like you had before (but only a few times and store that in the session?)

3. When the cursor is mouse over the chevron icon and ALT is pressed, show a hint or change the cursor to affirm the user’s intent.