This extends svg script to zoom/unzoom.
This was only tested under chromium, but should not break from standard svg.
You may consider moving the "Reset Zoom" button to a more "clean" position.
Added Zoom inside SVG. Currently tested with Chromium only
zoom / unzoom seems to work fine on Firefox too.
However I noticed that if you click on an empty box, because it is too narrow, then the zoomed view is empty too. Could this limitation be fixed ? It would be very useful to drill down complex flame graphs.
I uploaded an example of a such flame graph here. You can easily reproduce the issue by clicking on one of the left boxes.
Thanks for testing cykl. Do you mean the zoomed boxes doesn't have the text inside ?
I tried to implement that, but I don't know how to get the "text" box, generated by the "title" to be re-calculated by the renderer.
I'll try to implemented that. I found it also limitating :(
I just read flamegraph.pl source code. Basically the clipping is done in the Perl script and not in the browser. The only way to achieve what we want is to always put the full string in the text element and find a way to let the browser do the clipping.
Unfortunately, it seems that most browsers do not support the CSS3/SVG2 text-overflow property and SVG 1 does not provide an easy way to automatically manage the overflow. I believe that a rect clipMask could be used but then zoom_child and zoom_reset must be updated to update the mask too ... I can give it a try if you want, but I am definitively not fluent in SVG.
Sorry, I'm late
The initial clipping should still be done by flamegraph.pl. Otherwise it would break png creation (convert out.svg out.png). I can polish up the patch if needed.
convert out.svg out.png
Added text content generation while zooming
Ok, I added some fixes and parts of your diff without touching a lot to the standard structure.
Also, I'm using the "title" instead of adding another attribute to keep small size when a lot of attributes are generated.
It's still working correctly with convert. Can you test it with firefox ?
Tested with Chromium 38 and Firefox 24.1.1 on Windows, also working.
I can see three issues:
Thanks for pointing them :)
var txt = e.childNodes.textContent.replace(/\([^(]*\)/,"");
[Fix] Fixed title split function, chars calculation and misalignment …
…with high zoom
Maybe because of the rouding or float calculation, I wasn't able to fix properly the "+3" pixels. So I aligned the "x" with the parent rect.
Maybe there is too many index relations between the DOM Nodes (2 is rect, 4 is text, etc...). Maybe replacing these numbers with a function may be cleaner, but it'll also add complexity.
@cykl can you provide me a heavy stack (like the one used to generate flamegraph35.svg) ? I'd like to test what a search function for a tagname will imply as performance hit, versus direct index.
This is awesome Saruspete, thanks!
Something minor to do later: when zoomed, I'd still like to see the lower ancestry frames.
@Saruspete If you want a beta tester or sharing ideas, feel free to contact me via email to stop polluting brendan's inbox :)
The stack straces I use in my unit tests for hprof2flamegraph are quite heavy, you can use them:
git clone https://github.com/cykl/hprof2flamegraph.git