Ipywidgets: widget not rendering on nbviewer or HTML

[cornhundred]

Hi

My widget (repo for clustergrammer_widget) is not rendering on nbviewer or when I save to HTML (it is rendering locally on jupyter notebook) and see the following errors in the developer console:

link to notebook on nbviewer where widget does not load

I believe this started happened when I upgraded (using pip) ipywidgets. Old notebooks are still loading in nbviewer link to notebook on nbviewer where the widget loads.

I'm using ipywidgets version 7.0.0 and widgetsnbextension 3.0.2. I noticed that the widgets menu has also changed to include Save and Clear Notebook Widget State options.

Best,
Nick

[cornhundred]

It looks like the widget javascript is being loaded twice from unpkg.com in the notebook that does not render on Nbviewer, see below:

Nbviewer seems to be loading an old version (1.0.0) of the widget along with the latest version (1.13.1). Maybe this is causing the problem.

The old notebook that renders correctly on Nbviewer only loads one version of clustergrammer_widget (version 1.13.1), see below

[maartenbreddels]

I took a quick look, and I see in the source a '"_view_module_version": "*", and also "model_module": "jupyter-js-widgets". So it seems that you have a mix of old and new widgets, and one of your widgets is missing a version number, or it is set to '*'.
Make sure your widget state is clean, hit restart kernel/clear output, then Clear Notebook Widget State, and refresh page should leave you with a clean slate.

[cornhundred]

Thanks. I tried setting _view_module_version in the widget source code example.py and example.js. I was only able to get _view_module_version to show up in the ipynb notebook file when I set this in example.py but not in example.js.

I can now see "_view_module_version": "1.13.1" in the notebook Running_clustergrammer_widget.ipynb, but it is still not rendering. I also restarted/cleared output and cleared widget state before saving.

[maartenbreddels]

@jasongrout or @SylvainCorlay : i guess nbviewer needs an update for this to work I guess, since it still includes the version 6 jupyter-js-widgets javascript file.

@cornhundred does the html work?

[cornhundred]

@jasongrout the html does not work either link to html file on testing branch

[maartenbreddels]

Try Widgets->Embed widgets and save that html to a page, does that work?

[cornhundred]

@maartenbreddels the Embed widgets html file does not show the widget link to test_embed_widget.html

I'm also noticing that model_module_version is 1.0.0 see here. Maybe this is also causing a problem. I did not find documentation on how to set this widget docs

[cornhundred]

@maartenbreddels @jasongrout @SylvainCorlay I checked that reverting to ipywidgets version 6.0.0 saves the widgets in the notebook correctly nbviewer link. I'm guessing that my widget has something wrong with how it is saving its version in the notebook and this is only causing a problem in the new ipywidgets version 7.0.0.

[jasongrout]

I'm also noticing that model_module_version is 1.0.0 see here. Maybe this is also causing a problem. I did not find documentation on how to set this widget docs

Are you correctly setting the _model_module_version in the custom widget? I notice you are setting the _model_module, so _model_module_version should be set to the appropriate version number.

[jasongrout]

Do you have your code posted somewhere? We could check it for the module version number.

[cornhundred]

Yeah the widget code is here (this is a link to the testing branch where I am trying to fix this issue)

I tried setting the _model_module_version in example.py and example.js

and I can see the updated model_module_version in the notebook but it is still not rendering on nbviewer.

[maartenbreddels]

nbviewer won't work I think, since it includes the js file for ipywidget6, but copy pasting html HTML from the 'Embed Widgets' should work.

[maartenbreddels]

The issue is in line 1 of the js file, you should use @jupyter-widget/base instead of jupyter-js-widgets, can you try that?

[maartenbreddels]

See http://ipywidgets.readthedocs.io/en/latest/migration_guides.html for documentation of this.

[cornhundred]

thanks @maartenbreddels I'm reading over the documentation

[maartenbreddels]

Lets us know if you managed to fix it.

[cornhundred]

@maartenbreddels I followed the migration guidelines (e.g. updated package.json) and I'm still not able to view the downloaded html. I'll have to double check the migration steps.

Here is a notebook and html file if you would like to have a look. Rendering locally still works after the migration changes.

[maartenbreddels]

What do you mean by locally? The only think that I know that should work is copying and pasting the html from 'Embed Widget', or using ipwidgets.embed, Let us first establish if this works.. Nbviewer and nbconvert I don't know (I would be surprised if they would actually).

[cornhundred]

Okay, by locally I meant that the widget renders within a running Jupyter notebook.

I tried copying and pasting the HTML from the Embed Widgets option from the Widgets menu and that is not working: see migration_7.0.0_test_embed_copy.html

It is also weird that it has more properties in the state object than it needs. I'm only making one widget, but I see data for seven (e.g. I see seven 'network' properties in the state here). Maybe the clear widget state is not working?

[maartenbreddels]

Ok, thanks. I'll let you know how I debugged this. In chrome, in the developer tools (View->Developer) go to the network tab (if you see nothing, refresh it). You should see a request to jupyter-js-widgets.js after index.js (your package), this seems to be the problematic one. Opening up this file you see that it still refers to jupyter-js-widgets.js.
To solve this you need to republish your package using the @jupyter-widgets/base package, or put it in the same directory as clustergrammer_widget.js (only when this file is not found it will try to get it from a CDN).

[cornhundred]

Thanks for debugging I see the request, but do you mean put@jupyter-widgets/base in the same directory as the copy-and-pasted html file (and if so where can I find that JS, on unpkg.com)? I'm reluctant to publish to npm for fear of breaking old notebooks that are being rendered on nbviewer.

[cornhundred]

I'm guessing that ipywidgets will support versioning of front-end JS from npm. Currently, any updates I make to the published npm package are pushed to all old notebooks. I think this is because I was not passing versioning info along correctly.

[maartenbreddels]

No, as the migration docs say, change require('jupyter-js-widgets') to
require('@jupyter-widgets/base'). Run webpack or setup.py, copy
js/dist/index.js to the same dir as the html file, but rename it to
clustergrammer_widget.js
.
Do a grep for jupyter-js-widgets to make sure it is removed everywhere,
hope this works!

(from mobile phone)

Op 1 sep. 2017 23:41 schreef "Nicolas Fernandez" [e-mail]:

Thanks for debugging, but do you mean put@jupyter-widgets/base in the same
directory (and if so where can I find that JS, on unpkg.com)? I'm reluctant
to publish to npm for fear of breaking old notebooks that are being
rendered on nbviewer.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/jupyter-widgets/ipywidgets/issues/1692#issuecomment-326689802,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABryPQIvVh-_DnuUq0vD3PqKXBh6oUrBks5seHoHgaJpZM4PKYC8
.

[cornhundred]

Thanks that worked :) I had to add JQuery (from CDN) since my script required it, but now the widget loads from the copy-and-paste embed HTML. I'll hold off on using ipywidgets 7.0.0 until NBviewer support is working.

[maartenbreddels]

Thanks for sharing that it works. And I agree, we should get nbviewer working.

[cornhundred]

Thanks, also @maartenbreddels really cool talk at JupyterCon about visualizing a billion stars.

[maartenbreddels]

👍 thanks, glad you liked it.
We'll keep this issue open, then you'll get notified when we fix and close this.

[jasongrout]

I've opened https://github.com/jupyter/nbviewer/issues/717 in nbviewer where the fix needs to be made. I'm closing this in deference to that issue (please subscribe there to be notified when it is fixed).

[maartenbreddels]

That does leave the generated html from I guess nbconvert right? I guess that does something similar.

[jasongrout]

The nbconvert issue I should have linked as well is https://github.com/jupyter/nbconvert/issues/636

[tlinnet]

I had to downgrade to ipywidget 6.0.0 from 7.0.3 to get it to work.

pip install ipywidgets==6.0.0

I believe it is also mentioned here:
https://github.com/JuliaGizmos/Interact.jl/issues/176

ipywidgets 6 goes with widgetsnbextension 2.x, and ipywidgets 7 goes with widgetsnbextension 3.x.