Flamegraph: Add collapsing for similar items in the stack

[aocenas]

closes: #77689

What is this feature?

Note: hidden behind flameGraphItemCollapsing feature flag

Sometimes stacks contain lots of levels with similar repeating items, for example long stacks of framework code that usually isn't of interest but takes up a lot of visual real estate. This PR adds collapsing of similar items, that means that instead of rendering all of the similar items we render only one and allow to expand those collapsed items on demand.

At this moment, what similar items mean is pretty simple. We collapse items if they have the same value as a parent. This usually indicates very fast wrapper code without much 'self' code which should correctly collapse some of the highly nested wrapper code but probably not all so it is something to improve in the future based on feedback.

collapsing2.mp4

Why do we need this feature?

[Add a description of the problem the feature is trying to solve.]

Who is this feature for?

[Add information on what kind of user the feature is for.]

Which issue(s) does this PR fix?:

Fixes #

Special notes for your reviewer:

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[joey-grafana]

This is pretty cool - few observations below 👍

• Would it be possible to make it clearer when items are collapsed? Not sure if an icon or a different kind of UI element. Feels like it's easy to miss or not see when something is collapsed or can be collapsed. I think UX feedback could help here with this patten.

• It would be worth greying Expand all groups when they are already expanded. We could use a tooltip to tell the user why it's greyed out.

• An added benefit of adding the collapse items to their own section is that we could also have description above the collapse group that specifies how many nodes this will collapse and what the label is.

• I'm a little bit confused as to why github.com/grafana/pyroscope-go.TagWrapper and runtime/pprof.Do are linked as being collapsible?

• If you align text right, the collapse vertical bar is overlayed on the text, making both difficult to read/recognise.

• Collapse/expand all groups appears in context menu in sandwich view but appears to do nothing. No indication in flame graph of what nodes can be collapsed if any.

• FlameGraphContainer is missing useMemo dependency

[aocenas]

Would it be possible to make it clearer when items are collapsed? Not sure if an icon or a different kind of UI element. Feels like it's easy to miss or not see when something is collapsed or can be collapsed. I think UX feedback could help here with this patten.

Something we will get feedback on I assume. When collapsed there is a number in front of the label. The problem is it's canvas so it's harder to design something elaborate here.

It would be worth greying Expand all groups when they are already expanded. We could use a tooltip to tell the user why it's greyed out.

Will take a look at that.

An added benefit of adding the collapse items to their own section is that we could also have description above the collapse group that specifies how many nodes this will collapse and what the label is.

Not sure what would be the benefit here, when expanded you see all the items so it's mainly about visually removing them. Whether it's exactly 10 or 11 items isn't that relevant I think. When it's collapsed then we show a number because otherwise you wouldn't know if it's 2 or 100 items so there I think it's more important. Regarding the label not sure what you mean which label.

I'm a little bit confused as to why github.com/grafana/pyroscope-go.TagWrapper and runtime/pprof.Do are linked as being collapsible?

Because they have the same value so there isn't really much code that they individually execute.

If you align text right, the collapse vertical bar is overlayed on the text, making both difficult to read/recognise.

Will take a look.

Collapse/expand all groups appears in context menu in sandwich view but appears to do nothing. No indication in flame graph of what nodes can be collapsed if any.

Yeah will remove it. This does not work in sandwich view right now. We may add it later if people think this would be usefull

FlameGraphContainer is missing useMemo dependency

Will fix

[joey-grafana]

Btw meant to say the last UI tweak that should be made is to improve the elongating (along x axis) of items that have the horizontal collapse bar where the item is small e.g. purple & green or purple & yellow in screenshot.

[aocenas]

Ahh good catch. Hmm I feel like the best thing in that case would be to hide it altogether, not sure it makes sense to try to make it smaller and unreadable.