SnakeViz inline SVG / PNG output

[FuriouslyCurious]

Hey @jiffyclub Matt,

Thanks for the awesome visualization and % magics. I had an idea to share with you.

Interactive computing and Jupyter Notebooks are the dominant paradigm in data science and ML development. There are several possible front-ends that people use for Interactive computing:

1. Jupyter Notebooks
2. Jupyter Lab
3. Atom + Hydrogen
4. VSCode + vscodeJupyter extension

All of these front ends support inline output like this:

For small cell or line profiling, it might be much better if SnakeViz simply outputted the ring-graph as an inline SVG or PNG image instead of starting a webserver + browser.

Thanks!

[FuriouslyCurious]

Some more ideas:

You can use something like this matplotlib config and allow users to select which backend to use:

%config InlineBackend.figure_format = 'svg'
%config InlineBackend.figure_format = 'png'
%config InlineBackend.figure_format = 'inline-html'

Instead of popping open a new browser window, you can also inject inline-HTML using code similar to this example for Atom + Hydrogen: this snippet creates an inline-iframe inside notebook.

from IPython.display import HTML
HTML("<iframe src='https://nteract.io/' width='900' height='490'></iframe>")

[jiffyclub]

Great thoughts, thanks! SnakeViz pages are at this point basically static pages (see https://gist.github.com/jiffyclub/6b5e0f0f05ab487ff607) so there are probably definitely opportunities to embed in other places. I know the Continuum folks got snakeviz working inline with notebooks but I haven't looked into how they did it (and they never tried to contribute it back).

Do you have any thoughts on going from SVG (D3's output) to PNG? I haven't looked into that. I think it loses a lot of its value when it's not interactive.

[FuriouslyCurious]

Hey Matt @jiffyclub , Static HTML script is awesome: it will make it much more feasible to inline the output from SnakeViz.

There are two options for inlining output. More common one is the "inline" backend provided by IPython: http://ipython.readthedocs.io/en/stable/interactive/magics.html#magic-matplotlib

With this backend, the output of plotting commands is displayed inline within frontends like the Jupyter notebook, directly below the code cell that produced it. The resulting plots will then also be stored in the notebook document.

There is a second backend called "%matplotlib notebook backend", which provides inline-interactive graphs. But probably better to start small: we can inline current HTML / SVG file and go from there. Fully interactive inline-HTML can come down the road.

Regarding output formats, I prefer the superior clarity of SVG, but PNG is a fail-safe backend that works everywhere. For example, VSCode doesn't support inline SVG output yet but it does support PNG output.

[FuriouslyCurious]

Hey @jiffyclub I have an update on how to inline the output in Jupyter :

Step 1: expose SnakeViz as Cell Magic / Line Magic functions:

Looks like you have already done that in https://github.com/jiffyclub/snakeviz/blob/master/snakeviz/ipymagic.py

Step 2: Inline the output

Once you dump the profile pie chart as SVG on disk/tempfile, do:

from IPython.display import Image, display
display(Image(filename=profile.svg))

For HTML profile dump, we can inline it with iframe.

That will display the profile info inline.