WIP: Speed up rendering for SVG backend

[darwindarak]

So it turns out that inserting ~10000 <text> elements directly into the DOM is very slow. This PR is an experiment in using React.js to render the flame graph.

The rendering speed is much faster for large datasets (< 1s as opposed to > 2 minutes). Here's an example output (should work on Firefox and Chrome) generated by

using DataFrames, ProfileView
@profile reload("DataFrames")
ProfileView.svgwrite("testdata.html", C=true)

Major Issues:

• There are some problems with embedding React.js into a standalone SVG file. Dynamically inserting SVG elements seems to only work on '.html' files right now.
• Does not work with Safari for some reason

Still missing:

• Animated transition
• Scroll-wheel zooming
• Better text alignment

[timholy]

Sounds cool! But when I test that link with chrome, I get the following error: "This webpage has a redirect loop".

The performance change from 2 minutes to < 1s is very impressive, and sounds like the kind of gain we needed. Without asking you to go into gory detail, for a javascript-ignorant person like me, what are the advantages of using React.js over directly targeting HTML5 Canvas? Is it kind of like the difference between a high-level GUI toolkit and low level drawing commands?

[darwindarak]

This link might work better: http://www.seas.ucla.edu/~darwin/profileview_react.html It just takes a while to load the file, so it might be easier to work with if you download it first. Let me know if there are still problems getting the link to work.

From what I understand, HTML5 Canvas basically provides a low level bitmap surface to draw on while HTML/SVG provides a more declarative means of specifying the scene. Javascript libraries like React.js works on manipulating the elements of a HTML or SVG document, while libraries such as Zebra builds a GUI toolkit on top of HTML5 Canvas. In terms of performance, I think Canvas has a faster rendering speed since it acts only as a surface and does not have to keep track of the objects after they are drawn.

I've been hesitant to move away from the SVG output, but if we're ok with having the output of ProfileView be an HTML document or a Canvas object, then it's definitly worth exploring Canvas based libraries.

[timholy]

Link works! Thanks. Looking good.

I was just curious, not knowing a thing about this area. I'm fine with whatever you think is the best approach. Any advice I could give would surely be wrong 😄.

[timholy]

While not at all specific for SVG, ccb4439 might help a lot.

[hayd]

This still doesn't work in Safari, I wonder if anything fixes this in the latest React release. In Chrome this seems near instant!

[Keno]

Bump! It would be nice to get this.

[timholy]

I haven't seen @darwindarak around in a while, this might need adoption by someone.

[timholy]

No longer relevant, as all SVG functionality moved to https://github.com/timholy/ProfileSVG.jl. It should be far easier to work with than the representation used here.