Trace waterfall

One request across services. Each row is a span: the work one service did, nested under the span that called it, with its bar on a shared time axis. Gaps between bars are waiting; long bars at the bottom of a chain are the cost.

<div class="trace">
  <div class="tr-head">
    <span class="label">Trace</span><b>4bf92f3577b34da6</b> …
    <ul class="ch-legend">…</ul>
  </div>
  <div class="tr-scale"><span>Service and operation</span>
    <div class="tr-ticks"><span style="--at:0">0 ms</span><span style="--at:.2075">100 ms</span> …</div>
  </div>
  <ul class="tr-spans" role="listbox" aria-label="Spans">
    <li class="tr-span s1" role="option" style="--d:0">
      <span class="tr-name"><span>POST /v1/checkout</span><small>gateway</small></span>
      <span class="tr-bar"><i style="--x:0;--w:1" data-v="482 ms"></i></span>
    </li>
    <li class="tr-span s4 err" role="option" aria-selected="true" style="--d:2">…</li>
  </ul>
</div>

The name column indents by depth with a guide for each level, and the dot and bar take the service colour, so a service reads the same in every row. A failed span is hatched red and its name turns red. Here the first payment charge timed out after 120 ms, and waiting for it and retrying cost 124 ms, a quarter of the request. Arrow keys move the selection.

Accessibility

• The spans are a listbox: one tab stop, arrow keys to move, Enter to open the span's details. Each option's text has the operation, service and duration.