Use the categories in the flame graph tooltip instead of the old implementation information

[julienw]

The changes

As we discussed several times, with this PR we now use the categories information in the flame graph tooltip.

This also changes some logic and CSS.

1. This changes how they're styled, using a flex container instead of absolute positioning. This also adds a subtle border (top or bottom depending on total count / self count) for accessibility reason, so that the less visible category color still has some contrast (especially yellow and white).
2. Meter bars for categories (not subcategories!) now use the overall total time as their denominator, previously this was always taking the full width. Happy to hear feedback about that one.

Here are some more thoughts about point 2:

• without this change, all categories always took the full width. I believe this didn't make it easy to visualize at the first glance what percentage of a node each category take
• however I didn't do the same for the subcategories, because they would usually be very small as a result; instead I kept the denominator to the category value.
• I'm not super happy about the result to be honest: the categories are related to the overall value, while the subcategories are related to their category value. I believe it still makes the most sense, but visually this is a bit confusing at first. Happy to hear ideas!

Some screenshots

Before:

Without the CSS changes:

After, with all CSS changes:

Here is also an example with some self time:

Deploy preview

Deploy preview / production

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 88.45%. Comparing base (50798ee) to head (3d39ffa).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #4966 +/- ## ========================================== + Coverage 88.32% 88.45% +0.13% ========================================== Files 304 304 Lines 27330 27309 -21 Branches 7380 7372 -8 ========================================== + Hits 24139 24156 +17 + Misses 2963 2931 -32 + Partials 228 222 -6 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[mstange]

And yet another follow-up: Maybe we should remove the self time bars altogether. Half the bars are useless for call nodes that don't have any self time. And for call nodes that do have self time, in most cases, the "self" samples all have the same category + subcategory. This means that at most one "self" bar is non-zero.

[julienw]

Got another idea about the border: using a border-right instead of a border-top/bottom:

wdyt @mstange ?

[julienw]

Another follow-up: I think all meter bars in the tooltip should use the same scale. In the deploy preview, the length of the bar in a subcategory is relative to its category's value. This is very misleading.

Yeah I was also wondering about that (see the PR description). 2 options:

1. all categories + subcategories use the same scale in the whole tooltip => smaller values are super small and barely visible
2. or like before: each category + subcategory have their own scale => it's easier to see the proportion of a subcategory within its category, but then it's difficult to compare the proportion of each category with each other.

Because it's so easy to change I'd like to get this right in this PR. So here are a few screenshots to compare all these options.

Current deploy preview:

Option 1:

Option 2:

I think I'd rather go with option 1. Then there are many things to do in follow-ups (possibly):

• group categories with less values into "other"
• sort subcategories by value (maybe categories too?) though there's also value in having them always with the same order.
• I also like your suggestion about removing self time where it's not useful, because it clutters the view in most cases. Let's think about that later.

[julienw]

I pushed option 1 to the PR, so that it's ready to be merged if we all agree on that.