Voila: Altair visualizations don't work out-of-box

[choldgraf]

I just tried making a simple Altair visualization and found that it didn't work:

It returned the error that's normally returned when Altair isn't installed properly in the environment (either notebook or jupyterlab). It does render properly in jupyterlab, so I'm wondering if there's something particular I need to do for it to render with Voila?

[Zsailer]

I think this is likely related to altair-viz/altair#1339.

I've had success embedding Altair plots in arbitrary HTML environments using vega/vega-embed.

[choldgraf]

I wonder if Voila could check whether altair is imported and, if so, include the relevant renders.enable( statement? Sounds a bit hacky though...

[chekos]

@zsailer Hi! Could you point me to some of these examples using vega-embed? 👀

thanks!

and @choldgraf, just wishful thinking _is_ there a correct alt.renderer.enable( to display Altair plots with voilà?

[choldgraf]

@chekos I'd try the kaggle renderer, that often seems to work more "out of the box" for me but i'm not sure in this case :-)

[afonit]

Is there a flag to get voila to use jupyterlab instead of jupyter notebook?

Background:
I too use jupyterlab and when I was using voila I received the prior messages showing that altair won't render - apparently due to voila using notebook rather than lab.

In my lab environment I installed vega and used alt.renderers.enable('notebook') to no avail getting other javascript errors require not defined.

To clarify my question:
Is voila going to use jupyterlab in the near future, or is it going to stick with the notebook as the renderer?

Just trying to get a handle on how much effort I should put into trying to figure out a workaround.

[vidartf]

@afonit I think the goal is to switch to using the jupyterlab renderers in the future. The timeline is dependent on some underlying work on the server side (ref #270). I've made a proof-of-concept layer on top of voila in this repo: https://github.com/vidartf/phoila That is not intended for wide consumption yet, but is available for testing or use "as-is" 😉 The hope is for that PoC to inform how to best get support for lab renderers in voila later on.

[choldgraf]

lol, I appreciate your project naming @vidartf 😅

[minrk]

FWIW, I was able to get altair into a form that works with voila with:

from altair.utils.display import HTMLRenderer

voila_renderer = HTMLRenderer(
    mode="vega-lite",
    fullhtml=False,
    requirejs=False,
    output_div="altair-viz-{}",
    vega_version=alt.VEGA_VERSION,
    vegaembed_version=alt.VEGAEMBED_VERSION,
    vegalite_version=alt.VEGALITE_VERSION,
)
alt.renderers.register("voilá", voila_renderer)
alt.renderers.enable("voilá")

this suggestion almost worked, but fails with two things:

1. missing {} in output_div to enable a different div for multiple charts, and
2. without vegalite_version, voila output fails with Gr.compile is not a function where Gr was the minified name of vegaLite, and turned out to to be the absence of vega-lite upon inspection.