Uh oh!
There was an error while loading. Please reload this page.
[Deploy preview] Add a function list - #5233
Draft
mstange wants to merge 17 commits into
Draft
Conversation
mstangeforce-pushed
the
function-list
branch
4 times, most recently
from
April 2, 2026 18:48
25bc285 to
af75e01Comparemstangeforce-pushed
the
function-list
branch
2 times, most recently
from
April 7, 2026 18:28
26f8559 to
abde12bCompareCodecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@## main #5233 +/- ##
==========================================
- Coverage 83.82% 83.47% -0.36%
==========================================
Files 350 359 +9 Lines 37744 39388 +1644 Branches 10651 10882 +231 ==========================================
+ Hits 31638 32878 +1240 - Misses 5677 6076 +399 - Partials 429 434 +5 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
mstangeforce-pushed
the
function-list
branch
5 times, most recently
from
June 24, 2026 20:53
86bf68a to
5059e16Comparemstangeforce-pushed
the
function-list
branch
2 times, most recently
from
July 3, 2026 19:08
50bbdd4 to
2667660Compare…ming. The Canvas computed the tooltip percentage itself, by subtracting the box's start from its end. That only works because the non-inverted flame graph happens to lay boxes out relative to rootTotalSummary. Move the computation behind a getRatioOfRootTotalSummary() method on FlameGraphTiming so that each implementation can decide how its box widths relate to the percentage it wants to display.
The bottom box can currently only be opened for a call node. Add the equivalent lookup for a bare function index, so that views which select functions rather than call nodes can open the bottom box too.
Add a new "Function List" tab which shows a flat, sortable list of functions rather than a tree. Selection is per-function instead of per-call-node, so this adds selectedFunctionIndex to the per-thread view options along with the URL handling, reducers and selectors that go with it.
The call tree's context menu operates on a call node path, which the function list does not have. Add a sibling menu that operates on a function index instead. The menu items are described by a data table rather than repeated JSX, because the same set of transforms is about to be reused by more than one view.
These are the same single-key shortcuts the call tree context menu offers (m, f, S, c, C, r, R, d), applied to the selected function.
When the function list tab is active, the activity graph should highlight every sample whose stack contains the selected function, rather than the samples belonging to a selected call node.
Clicking a sample already selects the corresponding self call node. When the function list tab is active, also select that call node's function so the click has an effect there too.
Turn CallNodeInfoInverted from a concrete class into an interface, and rename the existing class to LazyInvertedCallNodeInfo. Along with that, stop assuming that an inverted tree has exactly one root per function: the timings are now keyed by root call node handle, obtained via getRootNodeForFunc(), rather than by func index directly. For the lazy implementation the two are still the same number, so this is behavior-preserving. This makes room for an inverted CallNodeInfo whose roots are restricted to a single function, which the next commit adds.
The lower wing answers "who calls the selected function?". It is an inverted tree, but unlike the regular inverted tree it has a single root — the selected function — and its totals count only the samples in which that function appears. LowerWingCallNodeInfo builds that tree eagerly from the selected function's root-most entry points, expanding by inverted depth as the view asks for it. computeLowerWingTimings maps each entry point's inclusive time onto the corresponding node so that the percentages stay relative to the full thread.
The upper wing answers "what does the selected function call?". It is a non-inverted tree rooted at the selected function, built by re-rooting the thread's stacks at that function's entry points.
Lay out the lower wing as a flame graph. Because the lower wing tree is materialized lazily by inverted depth, the layout is computed row by row and memoizes its prefix sums rather than walking a fully built table.
The flame graph currently derives box widths from rootTotalSummary, which also serves as the 100% reference for the displayed percentages. The upper wing needs those to differ: its root should fill the full width, while percentages should stay relative to all filtered samples. Add a separate flameGraphWidthTotal to CallTreeTimings for the width reference. It equals rootTotalSummary everywhere so far, so nothing changes yet.
The function list is about to grow three "wings" around the selected function: descendants (upper), ancestors (lower), and self. Each needs its own selected, expanded and right-clicked call node path. Rather than adding three more pairs of fields, key the existing per-thread paths by a CallNodeArea instead of by an isInverted boolean, and add the two wing areas alongside the two tree areas. The selected function itself moves into URL state so it can be shared and restored, and is mirrored into the wing paths as the wings' root. This commit adds the state, actions, reducers, selectors and URL handling; the views that consume them follow.
A collapsible section with a header, used by the function list wings in the next commit. The header can hold extra controls via headerActions.
Render the descendants and ancestors wings next to the function list, each in its own disclosure box. Both are the same TreeView-based component, differing only in which selectors they read and which context menu they open. The function list context menu is now shared between the function list and the wings, so rename it to WingContextMenu and give it a second connected variant for the lower wing, whose right-clicked target is a call node rather than a bare function.
The self wing shows where the selected function spends its own self time. It is built from the focusSelf-filtered thread, taken before the implementation filter so that native frames inside a JS function's self time stay visible when the filter is set to "JS only".
Each wing can now be displayed either as a call tree or as a flame graph, and WingViewToggle in the disclosure box header switches between them. The choice is per-wing and persisted in the URL.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Deploy preview
WIP implementing the approach outlined in #15 (comment)