Waterfall

A timeline waterfall for run traces and profiling data. The component splits into two synced panes: a searchable tree of events on the left, and a zoomable time axis on the right. Each row is positioned against the same clock, so parent/child timing and overlap read at a glance.

Rows come in two shapes, decided by their fields:

• Duration bars — rows with startTime + duration render as a bar spanning that interval.
• Instant events — rows with a bare time render as a single dot on the axis.

The hierarchy is built from parentId (a root row has parentId: null). Collapsible parents can be expanded and collapsed in the tree; the search bar at the top of the left pane filters rows by label (with case-sensitive and regex toggles).

Interaction

The time axis manages its own viewport, so the whole timeline is navigable without any external state:

• Zoom — Shift/Alt + mouse wheel zooms the time axis in and out around the cursor. Tune the feel with zoomFactor, and clamp the range with minWindow / maxWindow.
• Pan — drag horizontally (or use the navigation controls at the bottom) to scroll through time while staying at the current zoom.
• Mark — click anywhere on a bar or the axis to drop a temporal marker (T1, T2, …) for measuring against. Click a marker again to remove it.
• Hover — hovering a row in either pane highlights its counterpart in the other.

Example

A small agent run trace: a root task, two attempts, and the steps inside each. Duration bars use varied color tones; the halt, checkpoint, and completion rows are instant time events. getIcon returns a small lucide icon per row based on its etype.

The <Waterfall> fills its container, so wrap it in a fixed-height element (here 360px).

Props — WaterfallProps

Row shape — LogItemType

A row is either an instant event (time) or a duration bar (startTime + duration). It extends the shared TreeDataItem, so id, parentId, and label come from there.