The Clinic Flame UI controls have three main sections:
Hovering the mouse over a block will temporarily show info about that block in the info panel at the top of the screen.
Clicking will select the block, so that the info panel reverts to that block when you are no longer hovering over anything.
If you find an interesting-looking block, it can be useful to click on it so you can hover around exploring its neighbours without losing it.
After single-clicking on a block, or hovering over it for a moment, a tooltip appears, with one or more buttons:
When a block is double-clicked, or its tooltip "Expand" button is used, it will expand to fill the full width of the flamegraph. Blocks below will also expand and fill the full width, while blocks above the clicked block will increase in ratio to the block they sit on. Expanding a block essentially creates a new flamegraph which represents a particular partition of the main flamegraph.
The block that has been expanded is marked with a shadow underneath. Every block below this 'shadow' is probably wider (longer on the CPU) than the block that has expanded to fill the screen.
To get back to the main, non-expanded view, you can either click on the background, click "Return to main view" at the bottom of the screen, double-click on the expanded frame, or click on its "Contract" tooltip button.
There are five main features in the Info Panel:
We previously explained, in the Flamegraphs page, how it is useful to consider how much time a function was at the top of the stack, meaning the Node.js event loop was blocked as the CPU executes code within that function; and how this is represented by the brightness or "heat" of the colour of the exposed part of a block.
This bar shows you the heat of those exposed stack tops, of every block in the flamegraph, in order of heat i.e. in order of how long that block's function was blocking the event loop.
You can run the cursor along this bar from left to right to see where these "hot" functions are on the main flamegraph, with the same interaction as above: hover to see info, click to select and show tooltip, double click to expand.
The left-most (hottest) block is selected by default when a Clinic Flame profile is first opened.
These buttons allow you to easily jump from the currently selected block, to the block that is one to the left or right of it in the hottness-ranking shown by the Stack Bar.
A good place to start with a Clinic Flame flamegraph, is to cycle through using the "Next hottest" button, and for each block it selects, think why that function might be spending so much time active. For example, it might be a slow function needing optimising, or it might be a function you know is fast, but when you look at what is below it in the flamegraph, you might discover that it is being called too many times (for example, it might be in a nested loop).
This gives you more complete information about the code behind the block that is currently highlighted.
If there is some particular file or function(s) you want to locate, you can type part of the function name, file path or equivalent here, and any matches will be highlighted, in the same colour used for text and outlines (white for code from the profiled application, blue from a dependencies, grey from Node.js itself).
This can be useful if you've done such a good job optimizing an operation, you can no longer find it on the flamegraph!
If a function you know exists can't be found anywhere, even using search, it's possible it might have been inlined by V8: try searching again after turning off "Merge" in the Options Menu. For more on merging and inlined blocks, see the section "Merging and Unmerging" in Advanced Controls
If it is possible the function was so fast, or on the CPU for so little time, that it was never on the CPU while a sample was being taken, it might appear if you create a new profile with a longer duration and/or more connections in Autocannon.
Clicking "Options" on the right side of the Info Panel opens a menu with more advanced options.
These toggle buttons show (tick) or hide (untick) blocks based on where the code is in the application or Node.js framework.
node_modulesdirectory. Visible by default.
Profiles can be set to show in Presentation Mode by default by
PRESENTATION_MODE environment variable to