ipywidgets "Error displaying widget" on example pages

[sandertyu]

On the example pages, such as the Activate/Status button example, ipywidgets displays an error;

However, when this same code is ran on https://minrk.github.io/thebelab/ , the widget works fine;

This may not be an issue per se, but I am curious why the widget works on one page but not on the other. I am part of a team which has created a ckeditor plugin for Libretexts.org to enable users to input live interactive code via ThebeLab. In our ckeditor plugin, the same ipywidgets code as above also gives an "Error displaying widgets" message. I would like to know how to remedy this error displaying issue, as it seems that there is a current fix for it.

Additionally, one of our users is trying to implement the widgets via the interact() function but the widgets are not displaying at all (user's full code and libretexts implementation available here). The Issues here are confusing and some hint that fixes have been made, but obviously it is not working for us. The console error messages are exactly the same as outlined in issue #72. There is mention of an output implementation in that issue, but no follow up. Any help diagnosing and debugging this output widget issue would be greatly appreciated.

Edit: I've tried to run the widgets on both ThebeLab pages today, and they both appear to work. I'm not sure if something has changed behind the scenes and/or ThebeLab is inconsistent with ipywidgets.

Edit again: Not sure if I'm seeing things, but the ipywidgets are again no longer working on the example code pages. Very strange.

[celine168]

After poking around a bit, I only see the issue so far happening on widgets that involve sliders. Other widgets seems to work completely fine.

For example, see this: https://github.com/sandertyu/widgetstuffs/blob/ipywidgets-test/Thebe/ipywidgets.html

When running this in the browser, I get an error with: "Error: Could not create a view for model id ".
I think the error might have to do with creating the slider widget or child widgets...not sure.

[celine168]

As an update to this, calling IntSlider seems to work fine in the current version of Thebe on the master branch.
I believe that his githubio page may have been using a development version of ipywidgets.

However, calling interact is very inconsistent. The slider appeared for me once, but other times it flashed very quickly for less than a second and disappear immediately afterwards. I also do not get the child view/model view errors anymore.

Here is an image of it appearing fully one time: (which I cannot seem to reproduce)

[sandertyu]

I was playing with some of the output widget documentation in both Thebe and JupyterLab and I came across this curious difference;

ipywidgets.widgets.Output() in JupyterLab

ipywidgets.widgets.Output() in an HTML page using Thebe

In JupyterLab, all the calls and modications done to the Output() widget out are taking place within the same output "space" (it's all beneath one code cell). In Thebe, each modification to out is being rendered within the output of each individual cell. I believe that Thebe is probably instantiating a new Output() widget for each new cell, rather than layering on to a single one as intended.

You can see this more plainly for yourself using this HTML page. The prints to output widget print statements should be seen in the first code cell where display(out) is called, but they are printed within their own code cells;

[sandertyu]

The above behavior is present in 0.6.0, but is fixed on the master branch so far as I can tell. It was this commit which made the fix I think. However, ipywidgets is still a little broken as mentioned here

[sandertyu]

I've added console messages to manager.js and output.js to try and trace where the remaining issues could be. I used the following code to do a simple test of the widget callback functionality;

from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets
def f(x):
    return x
interact(f, x=10);

I found that once the widget is initialized and after the first change to the widget (once the cell recognizes that the button has been moved one tick), the clear_output(wait = false) function is called but does not get called afterwards. From there, no visible changes are made to the output of the widget (shown as 11 in the image below). The callbacks(view) is printed each time I make a change to the widget. Hopefully the following image is helpful to understand;

[sandertyu]

I believe that output.js needs to include a setOutputs() method for the OutputModel class and to include this in the initialize() and defaults() methods. I'm basing this off of ipywidget's own output.ts. I believe the setOutputs() method is important because it includes a call to clear_output which Thebe is currently not doing.

[mandeepika]

To add on to what @sandertyu explained, we investigated more and put more console logs in the output.js and got the results as displayed in the image below:

As is shown in the image, the first time when a change happens and it works, onMsgIdChange() function is called. This points out that there was a change in the msgId and the msgType becomes ‘clear_output’ which is when the clear_output() function is called. There are several steps which happen after that like the msgType changing to display_data, comm_msg, and so on. But none of this happens in any subsequent changes we make to the slider. Only the callbacks() function runs. It never goes to onMsgIdChange() and the msgId never gets changed.

[mandeepika]

Additionally, the first change to the slider which actually works goes through another file services-shim.js which is the comm API and handles the communication between the front-end and the kernel. As can be seen from the image, it first goes through the send() function which sends a message to the sibling comm in the backend. Then, it goes to the _hookupCallbacks() function in the same file which hooks the callback object up with the kernel. But again none of this happens for any subsequent changes to the slider. So maybe the change is not even getting registered with the kernel since the data is not getting sent.

[moorepants]

This is fixed by #418.