Add a "top functions" call tree view

[mstange]

In a "top functions" view, all functions are displayed in a flat list (no tree structure), sorted by "inclusive time", i.e. sorted by the number of samples where this function is present anywhere on the stack.

Example:

Normal:

total self
19    -     (root)
19    -       RunLoop
10    -         ProcessCircles
10    2           ProcessElement
 8    8             Circle::Circumference()
 9    -         ProcessSquares
 9    3           ProcessElement
 6    6             Square::Circumference()

Inverted:

total self
8     8     Circle::Circumference()
8     -       ProcessElement
8     -         ProcessCircles
8     -           RunLoop
8     -             (root)
6     6     Square::Circumference()
6     -       ProcessElement
6     -         ProcessSquares
6     -           RunLoop
6     -             (root)
5     5     ProcessElement
5     -       ProcessSquares
5     -         RunLoop
5     -           (root)
5     -       ProcessCircles
5     -         RunLoop
5     -           (root)

Top functions:

total self
19    -     (root)
19    -     RunLoop
19    5     ProcessElement
10    -     ProcessCircles
 9    -     ProcessSquares
 8    8     Circle::Circumference()
 6    6     Square::Circumference()

In this example, ProcessElement is near the top of the list, and easy to find. In the current call tree you have to look for it under two different stacks.

---

I think we should have such a mode. We could make it a different mode inside the existing Call Tree tab, or we could have a new tab for it.

---

As a follow up, outside of the scope of this issue, it should would be nice to have the following abilities for each function:

1. Restrict the profile to only show samples that contained this function in the stack
2. Do the inverse of 1, i.e. remove all samples containing this function in the stack
3. Look at the call tree of functions called by the selected function
4. Look at the (inverted) call tree of functions that call the selected function

For example, we could split the tab three ways: the list on the left, and two tree views on the right, above each other, with the upper one showing 3 and the lower one showing 4.

┆Issue is synchronized with this Jira Task

[mikeconley]

FWIW, Jan de Mooij built an external tool to help find the top functions:

https://jandem.github.io/profileviewer/

Would it be possible to use that as a starting point to get something like this added to perf.html?

[julienw]

The hotspot tool has a nice view that is similar to what Markus suggested:

[julienw]

Note that the view is sortable both by self time or children-included time.

[digitarald]

@mikeconley is that the Heaviest Stack Trace sidebar from Instruments

If not, Instruments has also the Top Functions view options for the call tree. It also sounds similar to your description, as Top Functions is defined as

Enabling this makes Instruments consider the total time spent in a function as the sum of the time directly within that function, as well as the time spent in functions called by that function. So if function A calls B, then A’s time is reported as the time spent in A PLUS the time spent in B. This can be really useful, as it lets you pick the largest time figure each time you descend into the call stack, zeroing in on your most time-consuming methods.

[julienw]

See also this butterfly view experiment (where functions are ordered by self time instead of running time like it should)

[digitarald]

This also came up in user feedback again as a list of hot spots that help to orient in a profile.

[julienw]

Here is the updated butterfly view experiment, this time using the running time.

[digitarald]

I like it, but the UI does take its own tab and we'll have to train users on its own workflow.

I wonder if a v0 for this could be simpler. XCode solves it as checkbox in the call tree; which exposes it similarly to "Invert Call Tree" – which seems nice as it has a similar explorational use case.

@mstange @mikeconley would love your input on this Call Tree-based approach.

[mstange]

I don't have a strong opinion. But I think a tri-state selector in the Call Tree tab might work:

[Top-down | Bottom-up | Butterfly]

(actual names to be discussed)

[julienw]

Interestingly I thought of that too :-) The tab was a cheap way to get it out but I think we can do better.