Ipywidgets: htmlmanager does not seem to work with 3rd party widgets

[maartenbreddels]

The output for this html is fine:

import ipywidgets as widgets
import ipywidgets.embed
slider = widgets.FloatSlider()
slider
widgets.embed.embed_minimal_html('slider.html', slider)

However, using other libraries such as ipyvolume or pythreejs does not seem to work.

from pythreejs import *
import numpy as np
from IPython.display import display
from ipywidgets import HTML, Text
from traitlets import link, dlink
ball = Mesh(geometry=SphereGeometry(radius=1), 
                                    material=LambertMaterial(color='red'),
                                    position=[2, 1, 0])

scene = Scene(children=[ball, AmbientLight(color='#777777')])

c = PerspectiveCamera(position=[0, 5, 5], up=[0, 0, 1],
                      children=[DirectionalLight(color='white', 
                                                 position=[3, 5, 1], 
                                                 intensity=0.5)])
renderer = Renderer(camera=c, 
                    scene=scene, 
                    controls=[OrbitControls(controlling=c)])
display(renderer)

Chrome's screenshot for network gives this:

When I put jupyter-threejs.js in the same folder, it gives this:

I tried to debug it, but I'm not sure what's going on here. Not that in the last case, it even tried to fetch file:///Users/maartenbreddels/src/ipywidgets/@jupyter-widgets/base.js
(pythreejs master and ipywidgets master)

[pbugnion]

Good catch. I don't think that threejs has been migrated to ipywidgets 7.0.0. As far as I can tell, the migration would involve:

• setting the _model_module_version traitlet explicitly -- at the moment it defaults to the version on the base widget (hence why it tries to look for [email protected] on unpkg).
• changing references from jupyter-js-widgets to @jupyter-widgets/base.

We should probably write a migration guide for widget libraries and make an effort to help widget library developers with the migration?

That said, looking at ipyleaflet 0.4.0-alpha1, which has been migrated, the htmlmanager still doesn't work. As far as I can tell, this is because we've split the htmlmanager from the base package. Before, we could just rely on declaring that jupyter-js-widgets is available as an external dependency when building external widgets. Now (looking at webpack.config.js for ipyleaflet and the cookiecutter), we declare that @jupyter-widgets/base should be provided as an external dependency, but we don't provide it explicitly.

I can see two possible fixes:

• remove the externals field for the embeddable bundle for ipyleaflet (see this PR on ipyleaflet). The base widget classes then get bundled with ipyleaflet. This definitely works, but might be confusing to the user: there are then two versions of @jupyter-widgets/base in the DOM: the one provided by the html-manager and the one provided by ipyleaflet.

• explicitly pass in the base widgets to the requirejs configuration (presumably in /packages/html-manager/src/embed-webpack.ts?). This could also be confusing for the end-user because they developed against one version of @jupyter-widgets/base, but when their code is embedded, they actually get a different one.

[jasongrout]

We should probably write a migration guide for widget libraries and make an effort to help widget library developers with the migration?

+1!

[jasongrout]

explicitly pass in the base widgets to the requirejs configuration (presumably in /packages/html-manager/src/embed-webpack.ts?). This could also be confusing for the end-user because they developed against one version of @jupyter-widgets/base, but when their code is embedded, they actually get a different one.

I think we'll need to have the base widget code shared.

The kernel side should be specifying versions of the widget js that are compatible with the underlying ipywidgets base packages. Maybe we could also do some more version checking to verify we are using the correct base version of widgets.

[pbugnion]

I think we'll need to have the base widget code shared.

That makes sense. It also mirrors more closely how we inject the base widgets in a notebook.

[jasongrout]

The root issue seems to be fixed in #1556 - now the three packages @jupyter-widgets/base, @jupyter-widgets/controls, and @jupyter-widgets/html-manager are all defined in require on a page that just includes the embed.js script.