Use Grafana flamegraph component

[aocenas]

Changes the flamegraph component to use the one from grafana:

At this moment this still contains all the old flamegraph code and uses a switch in features.ts isGrafanaFlamegraphEnabled to enable one or the other.

[CLAassistant]

All committers have signed the CLA.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[petethepig]

Looking food so far. I found a couple of issues though:

• z issue with search vs dropdown

• extra new line in the tooltip

• also in the previous screenshot I selected CPU profiles and the new tooltip does not show the right units. I expected to see duration, e.g here's how it looks in the old UI:

[Rperry2174]

Also noticed we lost the percentages and proper units for the flamegraphs and table

[aocenas]

Added fixes for the units here. The css fixes need to be in flamegraph so have separate PR here grafana/grafana#75369.

@Rperry2174 U think the percentages are just hidden because the view is too narrow and the table is then horizontally scrollable this is what I see:

[Rperry2174]

found another edge case -- when diff selected and one side doesn't have data it creates this weird black flamegraph. Might be better to handle this case outside of the component and prompt user to make a valid selection but might mean something should be handled inside the component to never get in this "black and white" state

[Rperry2174]

Can we add more padding between the table and the flamegraph. I think make the flamegraph slightly smaller (since table is already cramped for space)

[Rperry2174]

For diffs

• Tooltip inner content should take up the full width of the tooltip
• Tooltip itself should have a (at least a min-width=400px for diffs)
• numeric columns should be wide enough where they never overflow to the next line like below:

38
%

[Rperry2174]

what are these bright white nodes? Despite them not having content and seeming to be the least important they stand out the most. They should either be a dimmer color (like the dark grey) or we should emphasize them if they are important.

[aocenas]

@Rperry2174 regarding the tooltip table, we have a bit weird styling there and it seems it hasn't it's own intrinsic size so best I can do right now is to make it's min width a bit bigger that way it should not squish text into 2 lines.

[aocenas]

@Rperry2174 updated the flamegraph version so things should be fixed now. This is for example how the wrong diff selection looks like, which is also how currently it works in pyroscope, also it shows change in the greyed out parts, some more spacing and background for table, also units should be correct now:

[Rperry2174]

lgtm!!! Amazing 💯