Navigate and zoom the flamegraph just by (double) clicking

[julienw]

This idea comes from the hotspot tool.

Clicking a node does zoom on this node: it takes the full available width, but keeps the parent nodes that can still be clicked to zoom out. We could still keep the existing zoom in/out gestures using the mousewheel.

What do you think gregtatum mstange zoepage ?

┆Issue is synchronized with this Jira Task

[gregtatum]

Yes please, I've tried to do this already when using the tool.

[julienw]

This is where the code will happen src/components/flame-graph/Canvas.js. Some quick suggestions:

1. I believe everything should happen in this component, and we don't need to handle redux states here.
2. we can focus on an item when double clicking on it. We can very conveniently use onDoubleClickItem={...} that's already specified on Chartcanvas.
3. When an item is double clicked, we'll keep the start and end of this item in the local state. Note that start and end are numbers between 0 and 1, specified as a "percentage" of the total width.
4. Then in _drawCanvas we'll need to take these start/end into account. This will change the computations for x y and w.
5. Also in the loop we'll need to skip the elements that are outside of start/end. we'll want to keep the ones that are partly in the range but cut them, so that when we have to put some text, it will be completely visible.

Of course, tests are wanted :)

This issue is interesting if you're interested in canvas-based drawing, and you like drawing schemas on pieces or paper to understand what's happening.

[codershona]

Can I work on this issue and fix this issue? @julienw @canova @gregtatum

[canova]

@codershona Assigning it to you! Let us know if you need anything.

[codershona]

Ok, Thank you @canova @julienw

[julienw]

I cleared the assignee for inactivity, but if you're still interested please comment here.