Skip to main content

Waterfall view - request timelines and concurrency at a glance

· 4 min read
Thibaut Raballand
Creator of Spider

Spider already offers a grid for browsing communications one by one and a sequence diagram for reading call flows.
Neither of them answers the question at a glance: when exactly did this request happen, how long did it take, and what else was running at the same time?

The waterfall view is the answer.
It places every communication on a shared timeline as a horizontal bar.
The bar's left edge is the start time; its width is the duration. Slow requests are instantly visible as wide bars; gaps between bars reveal idle time; overlapping bars reveal parallel activity.

The centrepiece feature is lane grouping, which groups communications by endpoint pair and stacks concurrent ones vertically - turning the waterfall into a concurrency map.

The flat view​

In the default flat mode, each communication occupies its own row, ordered by start time. A vertical timeline runs across the top with labelled tick marks. Every bar is coloured by status: green for success, amber for client errors, red for server errors, grey for PostgreSQL.

This is the most direct way to read a sequence of calls. You see the shape of the traffic: whether requests are evenly spaced or bursty, whether responses come back quickly or trail off. Hovering over a bar shows a tooltip with the source, destination, request text, status code, and duration.

FlatView.png

Lane grouping​

The flat view tells you what happened. Lane grouping tells you who was talking to whom, and how much in parallel.

Enable Group by lane in the Grouping menu. The waterfall reorganises into lanes - one row per unique (client, identification, server) combination. When two communications on the same lane overlap in time, they stack vertically within the lane. When they do not overlap, they share the same horizontal track.

The result is a visual fingerprint of the concurrency behaviour between each pair of endpoints:

  • A lane with a single horizontal track is fully serial.
  • A lane with many stacked bars is heavily parallel.
  • Bulges at a particular moment in time reveal a burst of concurrent requests.

LaneGrouping.png

This makes it straightforward to answer questions like: how many parallel connections does this client maintain to that server? or is this service pipelining requests or sending them serially? - without writing any query.

Merge replicas​

With Merge replicas enabled, servers matching your configured merge patterns are grouped under their functional name. Multiple api-1, api-2, api-3 pods collapse into a single api lane. The merged name is shown in the left column instead of the individual IP or hostname.

Hide reverse proxies​

With Hide reverse proxies enabled, the originating client IP (src.origin) is used instead of the direct source IP, collapsing proxy hops. When a gateway fans out to many backends, you see the real client-to-backend lanes instead of the gateway-to-backend ones.

Both modifiers are only available when lane grouping is active.
They respect the merge and compacting patterns already configured in your team or personal settings - the same ones used by the sequence diagram - so you do not need to set them up twice.

Request text inside bars​

In lane grouping mode, the request text - method + URI for HTTP, SQL command for PostgreSQL, or the template when the Template option is selected - is overlaid directly inside each bar when the bar is wide enough to show it legibly. For narrow bars, the text appears in the hover tooltip instead.

This lets you read what a request was without clicking into it, which is especially useful when comparing many parallel lanes.

Display features​

Content​

The left column has configurable content:

  • Server only
  • Client -> Server
  • Identification -> Server

Resizable left column​

The left column - showing server, client, or identity labels depending on the Content option - is resizable.
Drag the vertical divider in the header to widen or narrow it.

Adaptive timeline graduation​

The timeline header adjusts its tick density automatically based on the available panel width.

Compact mode​

Compact mode reduces the row height to fit more requests on the screen. It is useful when you have a lot of requests and want to see more details at once.

Auto-scale timeline​

Auto-scale timeline adjusts the time range to fit the visible requests. It is useful when you're navigating across a long time range.

Export​

PNG and SVG export buttons in the options bar let you save the current waterfall view. The SVG format can be edited in vector tools like Inkscape for use in reports or architecture documentation.

Where it is available​

The waterfall view is available in the All, HTTP, and PostgreSQL views.
All features described here apply to all three.

Bonus​

The waterfall view was all vibe-coded with Claude Code from design to implementation in two evenings!