Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PARKED] Highlight all the occurrences for the selected frame #76

Open
wants to merge 17 commits into
base: main
Choose a base branch
from

Conversation

cuginoAle
Copy link
Contributor

@cuginoAle cuginoAle commented Jan 22, 2019

This PR won't be merged but we'll keep it as a proof of concept

This PR allows the user to quickly see how many other occurrences of the selected function are displayed in the graph.
When hovering over a frame, the new component (sitting just next to the selection-controls) shows the number of other occurrences of the hovered frame, as well as the total % of the time spent by the function.
Clicking on the button triggers an overlay (tooltip) containing the list of all the other occurrences (not including the selected frame) and the % of time spent running them.

On hover, the corresponding frame on the graph gets highlighted.
On click, the corresponding frame on the graph gets selected

screenshot 2019-01-25 at 16 25 50

@cuginoAle
Copy link
Contributor Author

Maybe we can do the highlighting in renderFrame() on the canvas instead? this method could set a property on the frame objects and renderFrame() can check it. then it would automagically work with animations and stuff (and it should be very performant even if there are hundreds/thousands of occurrences)

Absolutely

@cuginoAle cuginoAle changed the title [wip] Highlight all the occurrences for the selected frame Highlight all the occurrences for the selected frame Jan 24, 2019
@cuginoAle
Copy link
Contributor Author

@AlanSl
Copy link
Contributor

AlanSl commented Jan 29, 2019

Great work, very interesting. It's great to be able to explore how common multiple occurrences are.

As discussed last week the UX needs some refining so it's a bit less surprising - will experiment with this and make some suggestions. Really awesome to be able to explore the possibilities like this.

My first thought is to maybe only show the same occurrences on the flamegraph strongly on selecting a frame, so there's a bit less noise while hovering around, and to use a subtle background and/or a little marker triangle in the corner rather than strong outlines, but it needs some experimentation.

@goto-bus-stop
Copy link
Contributor

This dropdown is super cool. My first thoughts from playing with this are similar; the outline can be hard to see so a light background similar to what the search does may be better (and there's precedent for it, so)

I feel like one option for the button/dropdown combo is to split it up, the dropdown can still be useful even if other occurences aren't being highlighted right now.

I'd perhaps also like to see the dropdown labelled with something like '16 occurences' instead of just '16' to clarify what it's for without having to hover, if that doesn't take too much space

@cuginoAle
Copy link
Contributor Author

This PR won't be merged but we'll keep it as a proof of concept

@goto-bus-stop goto-bus-stop changed the title Highlight all the occurrences for the selected frame [PARKED] Highlight all the occurrences for the selected frame Oct 29, 2019
@jasnell jasnell changed the base branch from master to main August 21, 2020 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants