Flamegraph: Code preview

[ghost]

Would be cool if a preview of the relevant code can be shown from the flamegraph.

• Could have hovercard that shows function details
• Could link to line in github, or perhaps even open in their code editor

[Rperry2174]

Yeah this would be awesome... Right now we're trying to figure out a way to distinguish "our" code from library code. For example:

Here: services/customer/client.py:16 is part of our code while flask/app.py is part of the flask package in python

So we could link to services/customer/client.py:16 in our github repo and if there was some way to know on the frontend that flask/app.py is not in our repo then we could just use that logic to determine whether or not to include the linking behavior on the frontend.

Right now thats the blocker here (we may need to do more digging on the backend for this).

[Rperry2174]

Just ftr I think that we would probably try and do something like this:

Which would keep the current behavior that "zooms" in on a node when you click on it. Then after it's clicked on we could make it slightly larger height and show a little github icon inside of there that would link to:

https://github.com/pyroscope-io/[REPO_NAME]/services/frontend/server.py:38

[ghost]

Easier way to distinguish on frontend may be just create a hard coded list. libraries-denylist.js that looks like export new set(['list of top 1000 libraries for each language']) then check when rendering each box

[ghost]

Think it'll look ok to add the github logo to every single box? Also how would user access the link for the boxes that are too thin to even have words in them

[Rperry2174]

Yeah that might work and I don't think we would add the github logo to every box, just the one in focus (when a box is in focus). So in the picture above it would only be that row that has the logo inside of it.

The reason for this is because what you said about the boxes that are too thin.. If you have selected a particular node (aka clicked on one), then the nodes above it dim and the node itself becomes the "base" and takes up 100% of the width.

I think this would ensure that most of the time when the logo is included in this "focused" node then it wont get too crowded

[Rperry2174]

Just made our demo repos public so this could work now: Python: https://github.com/pyroscope-io/hotrod-python Ruby: https://github.com/pyroscope-io/hotrod-ruby Go: https://github.com/pyroscope-io/jaeger.git

/cc @LouisInFlow