ds
Data display
Flame graph

Flame graph

Where the time goes in a profile.

Where a program spends its time. Each frame is a function, as wide as its share of samples; the frames under it are what it called. The widest frames at the bottom of a tower are where to look first.

nightly_orders_etl, CPU

Root at the top. Click a frame to select it.

app
boto
pyarrow
pandas
runtime

01,000 samples, 100 Hz, 10.0 s of CPU100%

Show code

<div class="flame" role="group" aria-label="CPU profile …">
  <div class="fl-row"><button class="fl s6" style="--x:0;--w:1" title="main: 100%">main</button></div>
  <div class="fl-row">
    <button class="fl s1" style="--x:0;--w:.962">run_pipeline</button>
    <button class="fl s6" style="--x:.962;--w:.031">gc.collect</button>
  </div>
  …
</div>
<div class="fl-axis"><span>0</span><span>1,000 samples …</span><span>100%</span></div>

Drawn as an icicle, root on top, which reads like a call tree. Frames are tinted by package with a solid left edge in the same colour, so neighbours stay apart even when they share a colour. Labels truncate with an ellipsis and the full name and share are in the title. A selected frame gets an ink outline; search matches turn amber and everything else dims.

States

Code

<div class="flame">
  <div class="fl-row"><button class="fl s1" style="--x:0;--w:1">transform</button></div>
  <div class="fl-row"><button class="fl s1 dim" style="--x:0;--w:.42">dedupe_events</button><button class="fl s4 on" style="--x:.42;--w:.37" aria-pressed="true">join_customers</button><button class="fl s1 dim" style="--x:.79;--w:.17">validate_schema</button></div>
  <div class="fl-row"><button class="fl s4 match" style="--x:0;--w:.29">hash_rows</button><button class="fl s4 match" style="--x:.42;--w:.33">pandas.merge</button></div>
</div>

Class	On	What it does
`.flame`	div	The graph. `--fh` is the row height (1.375rem).
`.fl-row`	div	One stack depth.
`.fl`	button	A frame from `--x` for `--w`, fractions of all samples. Colour from a series class. States: `.on` or `aria-pressed`, `.dim`, `.match`.
`.fl-axis`	div	The scale under the graph.

Colour by package or module, so libraries stand out from your code.
Zoom by re-rooting on the clicked frame: its --x becomes 0 and its --w 1.

Don't

Random warm colours. They look like heat and mean nothing.
Sorting frames by time: siblings are sorted by name, so profiles compare.

Accessibility

Frames are buttons, so they are reachable, and each has its name and share in the title. For screen readers, also offer the profile as a nested list or a table of self and total time.