Echart's panel extension does not load in voila

[dbeniamine]

Hi there,

I am trying to render a notebook with panel's extension echart.

The code:

import panel as pn
pn.extension('echarts')

gauge = {
    'tooltip': {
        'formatter': '{a} <br/>{b} : {c}%'
    },
    'series': [
        {
            'name': 'Gauge',
            'type': 'gauge',
            'detail': {'formatter': '{value}%'},
            'data': [{'value': 50, 'name': 'Value'}]
        }
    ]
};
gauge_pane = pn.pane.ECharts(gauge, width=400, height=400)

slider = pn.widgets.IntSlider(start=0, end=100, width = 200)

slider.jscallback(args={'gauge': gauge_pane}, value="""
gauge.data.series[0].data[0].value = cb_obj.value
gauge.properties.data.change.emit()
""")

pn.Column(slider, gauge_pane)

On jupyter lab, this works fine, but on voilà, it fails.

When looking at the web console I see that voila tries to load echart.js locally instead of using CDN (while echarts-gl is always loaded via CDN.

echarts loading in jupyter:

echarts loading in voilà:

Question

How can I force voila to load echarts from CDN (something like pn.extension('echarts', fromCDN=True), or even better, serve the echart.js staticly ?

Configuration

Jupyter and voila runs in separated docker container behind a proxy, note that other panel widgets works fine

• Voila
  • version 0.2.7 (with more recent version panel interaction does not work but I have not identified why yet)
  • Command: /usr/local/bin/python /usr/local/bin/voila --no-browser --enable_nbextensions=True --strip_sources=False --port 8866 --server_url=/voila/ --base_url=/voila/ /opt/dashboards
  • jupyter nbextension list

Known nbextensions:
  config dir: /usr/local/etc/jupyter/nbconfig
    notebook section
      jupyter-matplotlib/extension  enabled 
      - Validating: OK
      jupyter_bokeh/extension  enabled 
      - Validating: OK
      nbdime/index  enabled 
      - Validating: OK
      voila/extension  enabled 
      - Validating: OK
      jupyter-js-widgets/extension  enabled 
      - Validating: OK

+ `jupyter labextension list`

 JupyterLab v2.3.1
Known labextensions:
   app dir: /usr/local/share/jupyter/lab
        @bokeh/jupyter_bokeh v2.0.4  enabled  OK
        @jupyter-widgets/jupyterlab-manager v2.0.0  enabled  OK
        @pyviz/jupyterlab_pyviz v1.0.4  enabled  OK
        nbdime-jupyterlab v2.1.0  enabled  OK

• Jupyter
  • version 2.3.1
  • jupyter nbextension list

Known nbextensions:
  config dir: /usr/local/etc/jupyter/nbconfig
    notebook section
      jupyter-matplotlib/extension  enabled 
      - Validating: OK
      jupyter_bokeh/extension  enabled 
      - Validating: OK
      nbdime/index  enabled 
      - Validating: OK
      jupyter-js-widgets/extension  enabled 
      - Validating: OK

+ `jupyter labextension list`

JupyterLab v2.3.1
Known labextensions:
   app dir: /usr/local/share/jupyter/lab
        @bokeh/jupyter_bokeh v2.0.4  enabled  OK
        @jupyter-widgets/jupyterlab-manager v2.0.0  enabled  OK
        @pyviz/jupyterlab_pyviz v1.0.4  enabled  OK
        nbdime-jupyterlab v2.1.0  enabled  OK

[daxid]

It works with pn.extension(js_files={'echarts': 'https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js'})

Is the problem in Voilà or in Panel ?

[trungleduc]

This example works in 0.5.0b