KQ-945 · TRACE/WATERFALL

Trace Waterfall

A request drawn as the time each of its parts took. Every span is a bar on one shared axis — left is its start as a share of the trace, width is its duration — drawn in from its own left edge on glide and staggered by cascade, with every percentage rounded to three decimals before it reaches a style. Hover or focus reads a span back in a header whose two readings cross-fade in one grid cell, and collapsing a parent folds its descendants out under layout while the parent grows a quieter bar spanning what it now hides.

KQ-945 · TRACE/WATERFALL

11 spans · 148 ms · none folded

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/trace-waterfall

Props

spans: TraceSpan[]; default —; The trace in start order; each span carries id, optional parentId, name, service, start and duration in ms, and an optional status.
collapsed / defaultCollapsed: string[]; default []; Controlled or initial set of collapsed parent ids.
onCollapsedChange: (ids: string[]) => void; default —; Fires from a press and from the Left and Right keys.
onActiveChange: (id: string | null) => void; default —; Fires as hover or focus moves to a span, and with null when both leave.
onAnnounce: (sentence: string) => void; default —; The sentence the polite region just spoke.
unit: string; default "ms"; Printed after every duration.
label: string; default "Trace"; Names the tree.

Prop	Type	Default	Description
spans	TraceSpan[]	—	The trace in start order; each span carries id, optional parentId, name, service, start and duration in ms, and an optional status.
collapsed / defaultCollapsed	string[]	[]	Controlled or initial set of collapsed parent ids.
onCollapsedChange	(ids: string[]) => void	—	Fires from a press and from the Left and Right keys.
onActiveChange	(id: string \| null) => void	—	Fires as hover or focus moves to a span, and with null when both leave.
onAnnounce	(sentence: string) => void	—	The sentence the polite region just spoke.
unit	string	"ms"	Printed after every duration.
label	string	"Trace"	Names the tree.