Make an Output model and view for the embedded widget manager #986

stsievert · 2016-12-14T16:24:03Z

Summary

Figure out how to save the state of the output widget (i.e., the output messages) and make an embedded widget manager output view.

Original issue

#16 is much appreciated! Thanks for this 👍

I have (tried) to embed a widget in a static webpage but haven't had any luck. I follow the documentation and select "Widgets > Embed widget" and copy that snippet into an HTML page. When I open that HTML page, I see a blank screen and can inspect to find a Javascript error:

This is with 1b9af7e and python setup.py install in a virtualenv. It's with a simple widget:

from ipywidgets import interact

def(x):
    return x

interact(f, x=10)

The text was updated successfully, but these errors were encountered:

stsievert · 2016-12-14T17:19:37Z

Issues shouldn't go on beta software, closing.

SylvainCorlay · 2016-12-14T18:48:47Z

@stsievert this feature requires the current state of master

stsievert · 2017-01-13T01:39:37Z

I am reopening this issue; I still can't embed widgets into a static HTML page (I am on beta6). My process for trying to embed widgets:

I define a (simple) function and develop a widget around it.
I click on "Embed Widgets" and copy/paste the HTML into widget.html.
I open widget.html in my browser. I expect to see the widget in the browser, however a blank screen shows (and the console shows no errors).

It's not clear from the documentation if I'm supposed to define my own HTML code for the widget. That's the reason the documentation goes into such detail on the JSON schema?

SylvainCorlay · 2017-01-13T08:33:23Z

Hi @stsievert Can you provide the generated html file?

stsievert · 2017-01-13T22:06:57Z

Here's a dropbox link: https://www.dropbox.com/s/b85fath9kiqxxv8/widget.html?dl=0

It implements the function above.

SylvainCorlay · 2017-01-14T00:34:38Z

You are missing the <html> and <body> tags. The snippet of code that is generated by the embed widgets is meant to be pasted in the content of an already valid html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Your Title</title>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Maybe we should add a checkbox to wrap add the minimal html file content optionally.

stsievert · 2017-01-14T00:51:06Z

D'oh.

I tried inserting the script tags at  and it still shows a blank webpage (at the same dropbox link).

A checkbox would be a good idea. I expected standalone minimal widgets but it'd be a good idea to provide code to embed too.

SylvainCorlay · 2017-01-14T09:59:41Z

I tried inserting the script tags at and it still shows a blank webpage (at the same dropbox link).

This is where it should be inserted. However, the dropbox link does not work anymore.

stsievert · 2017-01-14T15:14:51Z

https://www.dropbox.com/s/i6tv27vtyyjuymj/widget.html?dl=0

SylvainCorlay · 2017-01-14T18:20:16Z

Thanks. There is a legitimate issue here with the Output widget.

jasongrout · 2017-01-31T16:15:48Z

To elaborate, it seems that the output widget model did not have state exposed (see below). However, even if it did have state, there would still likely be a problem since the output model and view is provided by the widget manager, and I'm not sure that the embedded widget manager has an output renderer.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Your Title</title>
  </head>
  <body>
    <script src="https://unpkg.com/jupyter-js-widgets@~2.0.20/dist/embed.js"></script>
    <script type="application/vnd.jupyter.widget-state+json">
    {
        "version_major": 1,
        "version_minor": 0,
        "state": {
            "50427d04869a4f18a279eeb7c91bde3f": {
                "model_name": "LayoutModel",
                "model_module": "jupyter-js-widgets",
                "model_module_version": "*",
                "state": {}
            },
            "828fd92ce1424fed83a67f887f4854b8": {
                "model_name": "VBoxModel",
                "model_module": "jupyter-js-widgets",
                "model_module_version": "*",
                "state": {
                    "_dom_classes": [
                        "widget-interact"
                    ],
                    "layout": "IPY_MODEL_50427d04869a4f18a279eeb7c91bde3f",
                    "children": [
                        "IPY_MODEL_3c48f013af5e4eb199ad56737ea09e5e",
                        "IPY_MODEL_feb0e69b4b8f4f11aa89f42ead586dcf"
                    ]
                }
            },
            "8c71a8ac3b224bd08ea546ab3c057431": {
                "model_name": "LayoutModel",
                "model_module": "jupyter-js-widgets",
                "model_module_version": "*",
                "state": {}
            },
            "3c48f013af5e4eb199ad56737ea09e5e": {
                "model_name": "IntSliderModel",
                "model_module": "jupyter-js-widgets",
                "model_module_version": "*",
                "state": {
                    "min": -10,
                    "layout": "IPY_MODEL_8c71a8ac3b224bd08ea546ab3c057431",
                    "value": 24,
                    "max": 30,
                    "description": "x"
                }
            },
            "6a4ef29ac9804a36a0f43c7468821097": {
                "model_name": "LayoutModel",
                "model_module": "jupyter-js-widgets",
                "model_module_version": "*",
                "state": {}
            },
            "feb0e69b4b8f4f11aa89f42ead586dcf": {
                "model_name": "OutputModel",
                "model_module": "jupyter-js-widgets",
                "model_module_version": "*",
                "state": {
                    "_model_module_version": "*",
                    "layout": "IPY_MODEL_6a4ef29ac9804a36a0f43c7468821097",
                    "_dom_classes": [],
                    "_model_module": "jupyter-js-widgets",
                    "_view_module": "jupyter-js-widgets",
                    "_view_module_version": "*",
                    "msg_throttle": 1
                }
            }
        }
    }
    </script>
    <script type="application/vnd.jupyter.widget-view+json">
    {
        "model_id": "828fd92ce1424fed83a67f887f4854b8"
    }
    </script>
    <!-- page content -->
  </body>
</html>

jasongrout · 2017-01-31T16:17:40Z

I've updated the title to reflect what needs to be done.

SylvainCorlay · 2017-02-14T23:04:07Z

Now that we have the placeholder widget in case of missing model,, this will not crash pages with embedded widgets that include output widgets anymore. I removed the critical label.

SylvainCorlay · 2017-02-14T23:04:47Z

Pushing this forward to 6.1.

ccordoba12 · 2017-03-03T16:04:25Z

Subscribing to this issue (sorry for the noise :-)

kmallick2000 · 2017-04-08T04:48:29Z

I am anxious to know when it is resolved as well. On hold on a few projects unless this is resolved.

jasongrout · 2017-04-08T12:02:08Z

Note to whoever does this: one way to do it without having to sync the output messages back to the kernel is to make a custom private field, say _output_messages, which is either null or the list of outputs. Generally, it will be null, but it has a custom serializer that puts in the output messages. Since we'll never save changes manually on this field, the output messages are never sent to the kernel. But saving the output widget state to the notebook will substitute in the output messages so they are persisted. On instantiation, the output widget will look at this field for an initial set of output messages, and then clear the field.

kmallick2000 · 2017-04-08T16:12:22Z

You mean there is a temporary workaround? Can you please provide a tiny code example for us mere mortals who just want it to work? Really appreciate it!

jasongrout · 2017-04-08T19:32:19Z

No, there isn't a temporary work around. That was just me jotting down a few notes about how it could be implemented for whoever volunteers to fix this issue.

jasongrout · 2017-04-17T21:39:11Z

one way to do it without having to sync the output messages back to the kernel

Note to self: I've been working on this, and maybe we shouldn't try to be so clever. It increases the sync bandwidth (quadratically, since each new message syncs everything), but makes the output widget much more understandable if the outputs are synced back to the server, and then we get saving and restoring for free.

And if we do try to be clever, we should probably also strip the output messages to just the information needed to render them. For example, we don't need the username in the header, nor do we need the parent_header. It looks like we need just the message type and the content fields.

jasongrout · 2017-04-18T22:33:18Z

To elaborate, it seems that the output widget model did not have state exposed (see below).

This is fixed in #1294.

jasongrout · 2017-04-18T22:49:40Z

Note to whoever develops this: with #1294, we have the output messages being stored. To do the rendering, I'd suggest writing an output widget very similar to the JupyterLab output widget (we'll have to create a default renderer, though). That will likely be much easier to package up than the classic notebook output area.

In fact, we might be able to write a separate output widget package that can be used in both places, and just make an appropriate widget manager in each case (which would need context and rendermime attributes).

jasongrout · 2017-06-24T05:43:17Z

This is done in #1410. Thanks @pbugnion!

stsievert closed this as completed Dec 14, 2016

stsievert reopened this Jan 13, 2017

jasongrout changed the title ~~Embedding widgets in static webpages~~ Make an Output model and view for the embedded widget manager Jan 31, 2017

jasongrout added this to the 6.0 milestone Jan 31, 2017

jasongrout mentioned this issue Jan 31, 2017

Embedder: provide a way to render all known widgets and skip unknown #1042

Closed

SylvainCorlay added the critical label Feb 2, 2017

SylvainCorlay added environment and removed critical labels Feb 14, 2017

SylvainCorlay added the enhancement label Feb 14, 2017

SylvainCorlay modified the milestones: 6.1, 6.0 Feb 14, 2017

SylvainCorlay removed the environment label Feb 14, 2017

jasongrout mentioned this issue Mar 2, 2017

interact + plotting with ipywidgets 6.0.0 produces many graphs or none #1179

Closed

jasongrout mentioned this issue Apr 4, 2017

Class OutputModel not found in module jupyter-js-widgets #1183

Closed

jasongrout removed this from the 6.1 milestone Apr 4, 2017

jasongrout modified the milestones: 7.0, 6.1 Apr 4, 2017

jasongrout mentioned this issue Apr 17, 2017

Make the output widget store its state. #1294

Merged

pbugnion mentioned this issue May 23, 2017

[WIP] Export output widget in embed bundle #1380

Closed

pbugnion mentioned this issue Jun 5, 2017

Export output widget in embed bundle #1410

Merged

4 tasks

jasongrout closed this as completed Jun 24, 2017

github-actions bot added the resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Feb 12, 2021

github-actions bot locked as resolved and limited conversation to collaborators Feb 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make an Output model and view for the embedded widget manager #986

Make an Output model and view for the embedded widget manager #986

stsievert commented Dec 14, 2016 •

edited by jasongrout

Loading

stsievert commented Dec 14, 2016

SylvainCorlay commented Dec 14, 2016

stsievert commented Jan 13, 2017

SylvainCorlay commented Jan 13, 2017

stsievert commented Jan 13, 2017

SylvainCorlay commented Jan 14, 2017 •

edited

Loading

stsievert commented Jan 14, 2017

SylvainCorlay commented Jan 14, 2017

stsievert commented Jan 14, 2017

SylvainCorlay commented Jan 14, 2017

jasongrout commented Jan 31, 2017 •

edited

Loading

jasongrout commented Jan 31, 2017

SylvainCorlay commented Feb 14, 2017

SylvainCorlay commented Feb 14, 2017

ccordoba12 commented Mar 3, 2017

kmallick2000 commented Apr 8, 2017 •

edited

Loading

jasongrout commented Apr 8, 2017

kmallick2000 commented Apr 8, 2017

jasongrout commented Apr 8, 2017

jasongrout commented Apr 17, 2017

jasongrout commented Apr 18, 2017

jasongrout commented Apr 18, 2017

jasongrout commented Jun 24, 2017

Make an Output model and view for the embedded widget manager #986

Make an Output model and view for the embedded widget manager #986

Comments

stsievert commented Dec 14, 2016 • edited by jasongrout Loading

Summary

Original issue

stsievert commented Dec 14, 2016

SylvainCorlay commented Dec 14, 2016

stsievert commented Jan 13, 2017

SylvainCorlay commented Jan 13, 2017

stsievert commented Jan 13, 2017

SylvainCorlay commented Jan 14, 2017 • edited Loading

stsievert commented Jan 14, 2017

SylvainCorlay commented Jan 14, 2017

stsievert commented Jan 14, 2017

SylvainCorlay commented Jan 14, 2017

jasongrout commented Jan 31, 2017 • edited Loading

jasongrout commented Jan 31, 2017

SylvainCorlay commented Feb 14, 2017

SylvainCorlay commented Feb 14, 2017

ccordoba12 commented Mar 3, 2017

kmallick2000 commented Apr 8, 2017 • edited Loading

jasongrout commented Apr 8, 2017

kmallick2000 commented Apr 8, 2017

jasongrout commented Apr 8, 2017

jasongrout commented Apr 17, 2017

jasongrout commented Apr 18, 2017

jasongrout commented Apr 18, 2017

jasongrout commented Jun 24, 2017

stsievert commented Dec 14, 2016 •

edited by jasongrout

Loading

SylvainCorlay commented Jan 14, 2017 •

edited

Loading

jasongrout commented Jan 31, 2017 •

edited

Loading

kmallick2000 commented Apr 8, 2017 •

edited

Loading