Ipywidgets: Embed Widgets: does not work with 3rd party widget (e.g: nglview)

[hainm]

Hi,

I am trying 6.0.0.beta6 version for embedding widget. This works fine with ipydigets Widgets (Text, ...) but did not work with our nglview:

• nothing shows up if hitting Embed Widgets
• console error:

Uncaught (in promise) TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at :8795/nbextensions/jupyter-js-widgets/extension.js?v=20170113130756:34960

widgetsnbextension.__version__
Out[4]:
'2.0.0.beta9'

cheers. Hai

[SylvainCorlay]

Hi, I think that you have a model attribute that is not json-serializable.

[hainm]

thanks.

• should ipywidgets be more aggressive in error report?
• is it possible to report which attribute that is not json-ized?

[jasongrout]

It looks like that's the browser javascript function giving the error, and the error message indicates that there is a circular reference in the structure. We could use a replacer to try to narrow this down (see http://stackoverflow.com/questions/11616630/json-stringify-avoid-typeerror-converting-circular-structure-to-json for many solutions), but I'm not sure what performance cost we'd pay. Regardless, you could use a replacer or inspector directly in your code like in several of those answers to detect where your cycle is.

[hainm]

thanks for you debug info.

Hai

[jasongrout]

@hainm, is this fixed in #1044? (https://github.com/jupyter-widgets/ipywidgets/issues/1044#issuecomment-293777646).

[hainm]

@jasongrout I have not tried this yet. Do we need to wait for https://github.com/jupyter-widgets/ipywidgets/issues/1283?

[jasongrout]

Do we need to wait for #1283?

Okay, yes, let's wait for the beta coming out soon.

[jasongrout]

@hainm - I just released an alpha of all of the packages. Can you test to see if this is fixed now?

[hainm]

I will do tonight. thanks Jason.

[hainm]

hi,

I just tried.

nothing shows up if hitting Embed Widgets

This issue is fixed but there is still no-show in web browser.

Notebook

import nglview
nglview.demo()

Console after open html file having embedded code:

Attach file is the html file

test.txt

[hainm]

I guess I need to publish "nglview-js-widgets" (the _view_module) in unpkg.com too, right?

[jasongrout]

I guess I need to publish "nglview-js-widgets" (the _view_module) in unpkg.com too, right?

Or write your own embedded widget manager that slips in your own copy instead of going to unpkg.com.

[hainm]

Or write your own embedded widget manager that slips in your own copy instead of going to unpkg.com.

ha, is there any tutorial for dummy regarding this? If I remember correctly, previous ipywidgets version handles that.

[hainm]

I guess I need to read ipyvolume here. Seems closely related.
https://ipyvolume.readthedocs.io/en/latest/animation.html

[hainm]

Sounds like this is what you meant about "slips"

https://github.com/maartenbreddels/ipyvolume/blob/master/ipyvolume/embed.py

[maartenbreddels]

Hi @hainm, ipyvolume doesn't use it's own widget manager (I only have some custom code to generate the html, which will hopefully go upstream one day), that would be some js code.
However, it's odd that when I open your html file, I don't see an attempt get fetch 'nglview-js-widgets.js', which ipywidgets 6 did. Is this something you changed @jasongrout? Since that is ideal for testing.

[SylvainCorlay]

The current embed manager already checks whether a version of the custom widget is vendored locally.

[maartenbreddels]

I'm not sure what you mean, for the above test.txt file (it's html), you'd expect to see a request to nglview-js-widgets.js before the last 403 right?

[SylvainCorlay]

Unless @jasongrout removed it for 7.0, If you go to e.g. http://jupyter.org/widgets, you see failed requests to locally served static resources for custom widgets:

[maartenbreddels]

indeed, but that is https://unpkg.com/[email protected]/dist/embed.js, not https://unpkg.com/[email protected]/dist/embed.js, so I guess it's removed.

[SylvainCorlay]

Then we should add it back before the final.

[jasongrout]

The embed manager doesn't assume require is on the page anymore. Is that what you are talking about?

[maartenbreddels]

I don't think so.
For example when opening this page you see that it first tries to load ipyvolume.js, only when that fails, it should go to https://unpkg.com/...., that feature disappeared in [email protected], it now directly goes to https://unpkg.com/....

[maartenbreddels]

Now i cannot test the dev version of ipyvolume anymore, any idea where this feature disappeared@SylvainCorlay or @jasongrout, then maybe I can take a look at it?

[jasongrout]

any idea where this feature disappeared@SylvainCorlay or @jasongrout, then maybe I can take a look at it?

Probably this PR: https://github.com/jupyter-widgets/ipywidgets/pull/1313

Basically I deleted the base loadClass method and made each widget manager completely in charge of implementing loadClass. We'd just have to add back in the require-based loading to the embed manager.

[maartenbreddels]

thx, should I take a shot at it?

[jasongrout]

Go for it if you want. I won't be able to work on it for a few days.

[jasongrout]

Should be fixed by #1336.

[jasongrout]

Reopening so you can test it.

[jasongrout]

@hainm - this should hopefully be fixed by #1336. I'll close it, but please reopen if you find it still doesn't work.

[hainm]

Thanks. I will test.

Hai

[hainm]

hi @jasongrout, unfortunately there is no good news yet. Please see error below + the attached html file (need to rename it)

try.txt

[hainm]

btw, there is no reopen button in this issue.

[jasongrout]

Are you sure you're setting the _view_module and _view_name attributes in that particular model you are trying to display?

[hainm]

I don't know anything about that. I thought embedding is just as easy as display it?

[jasongrout]

This is the model that you're trying to display in the example above with the error? https://github.com/arose/nglview/blob/master/nglview/widget.py#L85

It looks like it indeed does have a _view_module and _view_name defined.

Looking at your try.txt file, here's what I see as the widget state for the nglview widget:

{"state": {"22e65513d02547ce807baf6ad763f296": {"model_name": "DOMWidgetModel", "model_module": "jupyter-js-widgets", "state": {"_dom_classes": [], "_scene_position": {}, "_original_stage_parameters": {}, "_scene_rotation": {}, "picked": {}, "layout": "IPY_MODEL_f020583843da4929997ae33d498ccc2a", "orientation": [], "_full_stage_parameters": {}}, "model_module_version": "3.0.0"}

There is no _view_module or _view_name, so it relies on the defaults for that particular model. That model has a default view name set to null, though. I think that is where the error is coming from.

The code that saves the widget state is here: https://github.com/jupyter-widgets/ipywidgets/blob/3ae4d117d086c2c02ce5d8fdfb0c45230a46d1db/jupyter-js-widgets/src/widget.ts#L228. Can you try setting a breakpoint there and seeing what happens if you choose the Widgets | Embed Widgets menu item?

Also, it looks like in your screenshot that it is running jupyter-js-widgets 2.1.4, instead of some 3.0 alpha, which would be current master.

[hainm]

It looks like it indeed does have a _view_module and _view_name defined.

Yes, you helped that. https://github.com/jupyter-widgets/ipywidgets/issues/1044#issuecomment-293776680

Per debugging, I will follow your guide.

Also, it looks like in your screenshot that it is running jupyter-js-widgets 2.1.4, instead of some 3.0 alpha, which would be current master.

I guess I need to update this https://github.com/arose/nglview/blob/master/js/package.json#L32-L47, right?

Is there (or will be) any script to update version info about core libraries? Following this repo for a while but I still feel get trapped in scattering info.

cheers
Hai

[hainm]

and native question: How can I check the versions in notebook? Sometimes web-browser caching is evil.

[hainm]

uhm, this simple code (example.html) does not show anything

<html>
<script src="https://unpkg.com/jupyter-js-widgets@~3.0.0-alpha.6/dist/embed.js"></script>
<script type="application/vnd.jupyter.widget-state+json">
{
    "version_major": 2,
    "version_minor": 0,
    "state": {
        "cd151d618c364fccbe336abf1c6960f1": {
            "model_name": "LayoutModel",
            "model_module": "jupyter-js-widgets",
            "model_module_version": "3.0.0",
            "state": {}
        },
        "f44bf9592480492bbd74a5a5ea7599ee": {
            "model_name": "TextModel",
            "model_module": "jupyter-js-widgets",
            "model_module_version": "3.0.0",
            "state": {
                "value": "hello",
                "layout": "IPY_MODEL_cd151d618c364fccbe336abf1c6960f1"
            }
        }
    }
}
</script>
<script type="application/vnd.jupyter.widget-view+json">
{
    "version_major": "2",
    "model_id": "f44bf9592480492bbd74a5a5ea7599ee",
    "version_minor": "0"
}
</script>
</html>

[jasongrout]

Thanks. I'll look into this Monday.

[jasongrout]

uhm, this simple code (example.html) does not show anything

You need to put the widget-view into a <body> tag:

<html>
<script src="https://unpkg.com/jupyter-js-widgets@~3.0.0-alpha.6/dist/embed.js"></script>
<script type="application/vnd.jupyter.widget-state+json">
{
    "version_major": 2,
    "version_minor": 0,
    "state": {
        "cd151d618c364fccbe336abf1c6960f1": {
            "model_name": "LayoutModel",
            "model_module": "jupyter-js-widgets",
            "model_module_version": "3.0.0",
            "state": {}
        },
        "f44bf9592480492bbd74a5a5ea7599ee": {
            "model_name": "TextModel",
            "model_module": "jupyter-js-widgets",
            "model_module_version": "3.0.0",
            "state": {
                "value": "hello",
                "layout": "IPY_MODEL_cd151d618c364fccbe336abf1c6960f1"
            }
        }
    }
}
</script>
<body>
<script type="application/vnd.jupyter.widget-view+json">
{
    "version_major": "2",
    "model_id": "f44bf9592480492bbd74a5a5ea7599ee",
    "version_minor": "0"
}
</script>
</body>
</html>

[hainm]

ah yes, sorry for the noise.

[jasongrout]

@hainm - where are we on this?

[hainm]

it's likely NGL needs to work on its serialization.
buzz @arose so you can prioritize this.

Close now.