The avenger-html renderer does not display charts

[joelostblom]

Thanks for starting this exciting project @jonmmease ! I was playing around with it a bit and it seems like I can't get the html renderer to work in either jupyterlab or vscode. This is the output I see using the example from the readme:

This is on Pop!_OS 22.04 LTS in a new conda env with the following:

# packages in environment at /home/joel/miniconda3/envs/avenger:
altair                    5.3.0                    pypi_0    pypi
altair-tiles              0.3.0                    pypi_0    pypi
avenger                   0.0.6                    pypi_0    pypi
vega-datasets             0.9.0                    pypi_0    pypi
vegafusion                1.6.7                    pypi_0    pypi
vegafusion-python-embed   1.6.7                    pypi_0    pypi
vl-convert-python         1.4.0                    pypi_0    pypi

Code

import altair as alt
from vega_datasets import data

source = data.cars()
chart = alt.Chart(source).mark_circle().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
)
chart

alt.renderers.enable('avenger-html')
chart

alt.renderers.enable('avenger-png')
chart

[jonmmease]

I haven't tried in VSCode, but it's been working for me in JupyterLab. Could you check the browser console for logging/errors?

[jonmmease]

Also, what browser did you use for JupyterLab? I've been working in Chrome mostly

[joelostblom]

I use JupyterLab 4.1.8 with Chromium 123.0.6312.58. Checking the browser console shows three warnings and two errors:

[jonmmease]

Ah, WebGPU isn't available by default on Linux yet (https://developer.chrome.com/docs/web-platform/webgpu/troubleshooting-tips), and it's not falling back to WebGL for some reason.

I might publish a new version that only uses WebGL since I don't think there's much of a performance difference.

[jonmmease]

I just pushed a new version that should use WebGL all the time. Try 0.0.7

[joelostblom]

Thanks @jonmmease , interestingly I see the same warnings and errors are above after installing 0.0.7 (and confirming in the notebook that this is the loaded version of avenger). I can also confirm that enabling the flags chrome://flags/#enable-unsafe-webgpu and chrome://flags/#enable-vulkan removes both the errors and warnings, and I can see the chart, so maybe webgpu is still used somehow even in 0.0.7? I tried clearing all the outputs of the notebook and restart in case the old version of avenger was still loaded, but I can't see the charts without the flags still.

[jonmmease]

Huh, ok. I'll need to dig in some more. Does using those flags work for you for now?

[joelostblom]

Yup, no rush from my end on this.

[jonmmease]

@joelostblom could you try again with 0.0.8? I think I worked out how to force the use of WebGL, so those browser flags shouldn't be needed any more.

[joelostblom]

Thanks for working on this Jon! It seems the previous error is fixed, but the chart is not showing up for me still. The new error I'm seeing is the following:

[jonmmease]

huh, that's coming from inside Vega embed. Here's a standalone html file that loads vega-embed and avenger in dev mode (so that the source isn't minified). Could you unzip this and open this in the same web browser?

avenger_chart.html.zip

I assume it will still error, but hopefully the stack trace will be more useful

[joelostblom]

I tried the file in both chromium and firefox and I can see the chart just fine without any message in the console log. Running jupyterlab in the same two browsers shows the error message above an no chart (same behavior in VS Code too). Let me know if there is anything else that would be informative if I try.

[jonmmease]

Huh, the only difference between that HTML file and what is displayed in JupyterLab should be the dev url. Could you try this HTML file, which doesn't use the dev URLs and I would think would produce the original error.

avenger_chart_no_dev.html.zip

If this does not error, then there must be something about displaying in JupyterLab/VSCode that's interfering somehow.

[joelostblom]

That file also works fine. In fact, I can even display it inside the notebook via IPython.display.HTML, but the same approach does not work if I save the chart I created to an HTML file:

[jonmmease]

The avenger-html renderer shouldn't affect chart.save, could you attach that file here? What error do you get when you display the result of chart.save with HTML in the notebook?

[joelostblom]

Running the following code gives an error on the two first cell executions, but on the third execution the chart shows up:

from IPython.display import HTML
import altair as alt
from vega_datasets import data

source = data.cars.url
chart = alt.Chart(source).mark_circle().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N',
)
chart.save('avenger-test.html')
HTML('avenger-test.html')

The first time I run the cell I see this error and no chart:

The second time I see this error and still no chart:

The third time I run the cell, there is no error and the chart shows up. With the chart you sent, it shows up on the first try and there are no warnings. This is the produced HTML content in the file:

<!DOCTYPE html>
<html>
<head>
  <style>
    #vis.vega-embed {
      width: 100%;
      display: flex;
    }

    #vis.vega-embed details,
    #vis.vega-embed details summary {
      position: relative;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    (function(vegaEmbed) {
      var spec = {"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}}, "data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/cars.json"}, "mark": {"type": "circle"}, "encoding": {"color": {"field": "Origin", "type": "nominal"}, "x": {"field": "Horsepower", "type": "quantitative"}, "y": {"field": "Miles_per_Gallon", "type": "quantitative"}}, "$schema": "https://vega.github.io/schema/vega-lite/v5.17.0.json"};
      var embedOpt = {"mode": "vega-lite"};

      function showError(el, error){
          el.innerHTML = ('<div style="color:red;">'
                          + '<p>JavaScript Error: ' + error.message + '</p>'
                          + "<p>This usually means there's a typo in your chart specification. "
                          + "See the javascript console for the full traceback.</p>"
                          + '</div>');
          throw error;
      }
      const el = document.getElementById('vis');
      vegaEmbed("#vis", spec, embedOpt)
        .catch(error => showError(el, error));
    })(vegaEmbed);

  </script>
</body>
</html>

Since you mentioned that this is not related to avenger, we don't need to troubleshoot it, I was just trying to understand what was going wrong along the way. Maybe I messed up something with the setup, but I just tried recreating an environment and then running python -m pip install -U altair'[all]' avenger "vl-convert-python>=1.2.3" jupyterlab and I see the same result