Add ability to view "head" or "tail" of functions in Flamegraph / Table

[Rperry2174]

When looking at flamegraphs like this one:

Its not very useful to see this portion of the function name. It would be more convenient if there were some kind of ability to control the portion that is shown on the flamegraph.

In the picture above selected in the red box, (one of) the full function name is: github.com/pyroscope-io/pyroscope/pkg/agent/upstream/direct.(*Direct).uploadLoop however, the only portion that we can see is the 23 character portion which starts off the function: github.com/pyroscope-io

In this case, if I am debugging an issue here and I can only see 23 characters, then I would like to have the option to see the last 23 characters rather than the first 23 characters. Something like: ct.(*Direct).uploadLoop

While I still need to "hover" over the node to see the full function name, I think being able to toggle between these two views would be a nice feature to add. The same principle applies to the table as well:

From a UI standpoint I picture this probably being a "toggle" type button like this:

where:

• head first: github.com/pyroscope-io
• tail first: ct.(*Direct).uploadLoop

and it would probabily go next to the other toggle buttons above the flamegraph:

But once we build the functionality we can figure out what best UI/UX would be

[eh-am]

Let me give it a try.

[Rperry2174]

closed in #353