voila-dashboards / voila-vuetify Failed to work with plotly

[eromoe]

I shift this issue to here since voila-vuetify is not in active maintainment and that repo also beyond to voila .

voila-dashboards/voila-vuetify#36

---

I found it have some problem with plotly , plotly figure can't be ploted , turn on console found a lot of error :

start with voila-vuetify

voila --Voila.ip=0.0.0.0 --ExecutePreprocessor.timeout=180 --template vuetify-default  vue_dashboard.ipynb

start without voila-vuetify is fine

plotly figure render fine without --template vuetify-default

voila --Voila.ip=0.0.0.0 --ExecutePreprocessor.timeout=180 vue_dashboard.ipynb

My env:

voila                             0.1.21
voila-vuetify                     0.3.0
ipyvuetify                        1.4.0

Other Info

[Voila] Serving static files from /home/xxxx/.conda/envs/py3/lib/python3.7/site-packages/voila/static.

I looked into this folder, only found a file extension.js

Add option --VoilaConfiguration.file_whitelist="['.*']" , 403 change to 404

Is this a bug ? How could I walk around it ?

[maartenbreddels]

voila-vuetify is not in active maintainment

it is.

Did you install the plotly and ipyvuetify libraries in the same environment as voila? This seems like a typical case of the library being installed in the kernel environment but not in the server environment.

[eromoe]

@maartenbreddels
Does ipyvuetify have a server extension ? There are only nbextensions as I see , it even coundn't import if I don't install those nbextensions .

PS: Do you have some suggestions of replacement for voila-vuetify?

[maartenbreddels]

No, only a nbextension, but that is served by the server, so all widget libraries also need to be installed at the server environment (a more accurate answer takes a bit longer..).

Why would you replace voila-vuetify, I think that template is good as it is?

[eromoe]

Because I can't solve this issue , detail see voila-dashboards/voila-vuetify#36

[maartenbreddels]

But it's the same issue here right?

[maartenbreddels]

And, did you try without the template, does the default template give the same issues?

[eromoe]

But it's the same issue here right?

Yes, I just copy here since no one answer me any more .

And, did you try without the template, does the default template give the same issues?

Everything render correctly except voila-vuetify , no matter with default template or not .

[maartenbreddels]

I think you confused voila-vuetify with jupyter-vuetify (the javascript package behind ipyvuetify).

If it doesn't matter what template you use, and it's a problem with jupyter-vuetify, it's an installation issue with jupyter-vuetify. Did you install ipyvuetify in the same environment as voila?

[eromoe]

Yes, I have tried several times in a conda env .

[maartenbreddels]

what does this output give you:

$ which voila
$ which jupyter
$ jupyter nbextension list

[eromoe]

(py3) ➜  scripts git:(feature/sales_disverge) ✗ which voila
/home/xxx/.conda/envs/py3/bin/voila
(py3) ➜  scripts git:(feature/sales_disverge) ✗ which jupyter
/home/xxx/.conda/envs/py3/bin/jupyter
(py3) ➜  scripts git:(feature/sales_disverge) ✗ jupyter nbextension list
Known nbextensions:
  config dir: /home/xxx/.jupyter/nbconfig
    notebook section
      nbextensions_configurator/config_menu/main  enabled
      - Validating: problems found:
        - require?  X nbextensions_configurator/config_menu/main
      contrib_nbextensions_help_item/main disabled
      execute_time/ExecuteTime  enabled
      - Validating: OK
      snippets_menu/main  enabled
      - Validating: OK
      keyboard_shortcut_editor/main disabled
      navigation-hotkeys/main  enabled
      - Validating: OK
      limit_output/main disabled
      varInspector/main disabled
      snippets/main disabled
      code_prettify/code_prettify disabled
      jupyter-js-widgets/extension disabled
      scratchpad/main disabled
      skip-traceback/main disabled
      help_panel/help_panel  enabled
      - Validating: OK
      notify/notify disabled
      rubberband/main disabled
      toc2/main  enabled
      - Validating: OK
      hide_input/main  enabled
      - Validating: OK
      latex_envs/latex_envs disabled
      bqplot/extension  enabled
      - Validating: OK
      nbdime/index disabled
      plotlywidget/extension disabled
      ipysheet/extension  enabled
      - Validating: OK
      jupyter-vuetify/extension  enabled
      - Validating: OK
      lineup_widget/extension disabled
      jupyter-vue/extension  enabled
      - Validating: OK
    tree section
      nbextensions_configurator/tree_tab/main  enabled
      - Validating: problems found:
        - require?  X nbextensions_configurator/tree_tab/main
  config dir: /home/xxx/.conda/envs/py3/etc/jupyter/nbconfig
    notebook section
      jupyter-require/extension  enabled
      - Validating: OK
      nbdime/index  enabled
      - Validating: OK
      plotlywidget/extension  enabled
      - Validating: OK
      jupyter-js-widgets/extension  enabled
      - Validating: OK
      jupyter-vuetify/extension  enabled
      - Validating: OK

[maynardflies]

Want to add my 2 cents that with Voila > 0.2 this doesn't work, but downgrading to Voila 0.1.23 works, and I am not using voila-vuetify or any other such template

[jeffyjefflabs]

Same here, works in 0.1 but not 0.2, default template. When calling show() on a plotly figure, I get Uncaught ReferenceError: require is not defined in the console. Looks like that would be fixed by #735.

As a work-around, wrapping it in a FigureWidget works fine for me.

Quick example to reproduce:

# cell 1
import plotly.express as px
import plotly.graph_objects as go
fig = px.line(x=[1,2,3], y=[2,4,6])
fig.show()  # blank display; "require" error in console

# cell 2
go.FigureWidget(fig)  # works

[jwminton]

It works because by the time cell 2 has executed, the voila notebook script element execution has happened and that pulls in require.min.js. Move all execution to be in cell 1 and I would expect it to fail as before, or move it all into cell 2 and it should work.

[maartenbreddels]

A workaround for now would be to use https://github.com/voila-dashboards/voila-vuetify which includes requirejs earlier.
Note that this template does not output cells, but only renders specific widgets. see:
https://github.com/voila-dashboards/voila-vuetify/blob/master/bqplot_vuetify_example.ipynb

[jeffyjefflabs]

Moving the cells around didn't change anything for me with the default template.

# cell 1
import plotly.express as px
import plotly.graph_objects as go
fig = px.line(x=[1,2,3], y=[2,4,6])
go.FigureWidget(fig)  # still works

# cell 1
import plotly.express as px
import plotly.graph_objects as go

# cell 2
fig = px.line(x=[1,2,3], y=[2,4,6])
fig.show() # still does not work

# cell 3
fig.show() # also does not work, with a second require error in the console

Since the vuetify template only shows widgets, fig.show() wouldn't work and you'd have to wrap it in a widget regardless, right?

[maartenbreddels]

The figurewidget can be used for that, or use show inside of an Output widget (see ipywidgets docs) (from mobile phone)

…

On Wed, 21 Oct 2020, 21:23 Jeff, ***@***.***> wrote: Moving the cells around didn't change anything for me with the default template. # cell 1 import plotly.express as px import plotly.graph_objects as go fig = px.line(x=[1,2,3], y=[2,4,6]) go.FigureWidget(fig) # still works # cell 1 import plotly.express as px import plotly.graph_objects as go # cell 2 fig = px.line(x=[1,2,3], y=[2,4,6]) fig.show() # still does not work # cell 3 fig.show() # also does not work, with a second require error in the console Since the vuetify template only shows widgets, fig.show() wouldn't work and you'd have to wrap it in a widget regardless, right? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#619 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANPEPKAXA2W5XSZTUFK4LDSL4YJZANCNFSM4NJ5XI4A> .

[jwminton]

I'm sorry. In my simple example that I made for #735, it's running pure plotly + voila. For me the go.FigureWidget(fig) still fails in every cell for me because nothing pulls in require.min.js in time without template changes. My own example was obviously oversimplified for this case and too low level.

[maartenbreddels]

Fixed in #735 should be in the next release.