interact() from ipywidgets not working with Thebe

[TimStewartJ]

While we have #136 which is related, I'm opening up this issue to explore interact() specifically, and seeing if we can get that to work with Thebe.

Known behavior: using interact with thebe currently allows for only a single slider movement before no longer working. Within the Thebe code, this is reflected by the send() function in services-shim.js running only once. This applies to other types of interact(), whether they be true/false boxes or dropdown menus.

[TimStewartJ]

Interestingly, using interact_manual() communicates properly with services-shim.js on every movement of the slider. However, this isn't as useful since the function only applies the slider's value when manually clicking a button.

Perhaps we could explore the differences in code between interact() and interact_manual() further to see how their communication works.

[TimStewartJ]

A big difference between the two that I've found appears to be here. Interact() appears to rely on the widget's ability to observe changes in 'value' while interact_manual() does not. I also think this might have something to do with traitlets but I'm not sure yet.

[sandertyu]

I see the same behavior with interact_manual() working and interact() not. Furthermore, using interact() with continuous_update=False has nearly the same behavior in Thebe as regular interact() does (it updates when releasing the mouse rather than the first tick, but afterwards, no changes are sent to the output).

interact_manual() works by displaying a button along with your widget to manually update the output area on press. Whatever interact_manual() is doing on button press, that needs to be replicated for the key trigger events in interact() as well.'

As for traitlets, they are definitely using the observe function in the cases that interact_manual() is not being used. We see this same function in the python backend for our widget.

[TimStewartJ]

The widget that we made works nicely with thebe, including its slider, which is very interesting.
You can see it in action here:

To accomplish this, I had to grab js/dist/index.js and put it in the root folder, renamed as jupyterteam_widget.js, since thebe was unable to find where the extension actually was. An alternative would've been to publish the widget to npm. Either way, it is curious to see our own widget's slider working when ipywidget's does not.

[moorepants]

That's very nice to see working!

The extensions do have to be installed for general use in JupyterLab, so maybe that's the issue here. Could be worth making your extension installable.

[sandertyu]

I've began writing an interact-esque function, and at the moment it just displays the function (our widget) along with an IntSlider, with no interactivity between the two widgets;

(where w = HermiteWidget())

However, this same code in Thebe will give no output or console errors;

In the actual interact() function, sliders and whatnot are able to properly display, but the interactivity just doesn't work. This is an additional problem that Thebe is having, just from using the ipywidgets Output() widget.

[sandertyu]

I'm able to replicate the basic behavior of our custom "interact" function in Thebe by doing the following;

If I try to display the output widget after I have used the with out: code, there is no output. This is true for anything you are trying to display, as far as I can tell;

I believe this is why the myInteract function method does not display either, because it is returning out after the with out: statements have been ran. In Jupyter Notebook, the widget displays properly either way.

Furthermore, if you do not display anything specific through out, there will be a small output area that appears underneath your code cell (note the green outline), which is absent in the previous screenshot;

It seems that Thebe is simply mishandling the Output widget, and this screws with interact later down the line.

[moorepants]

The few threads in the thebe repo discussing this state that thebe needs to implement and "OutputManager" (as far as I can remember). That seems to possible relate? Maybe try to learn what the output manager is and does would help.

[sandertyu]

Yes, I think Thebe's implementation of the Output widget is incomplete. At the moment, I am trying to figure out on a conceptual level why Thebe shows out only when it is displayed before the with out: calls. Maybe revisiting the nbinteract and viola PRs with fresh eyes and a new understanding might help.

[sandertyu]

I found a PR in javascript which fixed interact and the output widget in Viola. The main idea is to use @jupyter-widgets/jupyterlab-manager. The related issue is here.

[TimStewartJ]

I went through some of the older thebe stuff and tried using nbinteract after seeing someone say they were successful with it. Trying it with the latest thebe and latest version of the nbinteract image resulted in similar behavior to using interact() normally (i.e. the slider updates once and stops working thereafter). This makes me question nbinteract's relevance. Is it something that used to work before? Am I just not using the right code? Here's what I used for context:

  <script type="text/x-thebe-config">
    {
      bootstrap: true,
      binderOptions: {
        repo: "SamLau95/nbinteract-image",
        ref: "master"
      },
      kernelOptions: {
        name: "python3"
      }
    }
  </script>

import numpy as np
import nbinteract as nbi

def normal(mean, sd):
    '''Returns 1000 points drawn at random fron N(mean, sd)'''
    return np.random.normal(mean, sd, 1000)

normal(10, 1.0)

options = {
    'xlim': (-2, 12),
    'ylim': (0, 0.7),
    'bins': 20
}

# Pass in the `normal` function and let user change mean and sd.
# Whenever the user interacts with the sliders, the `normal` function
# is called and the returned data are plotted.
nbi.hist(normal, mean=(0, 10), sd=(0, 2.0), options=options)

[moorepants]

I'm not sure. nbinteract's development was abandoned and I think it may have only worked for special cases. Understanding how voila works is probably a more fruitful path.

[moorepants]

abandoned

I take that back, looks like there have been some commits lately: https://github.com/SamLau95/nbinteract/graphs/contributors?from=2020-10-11&to=2021-07-12&type=c

You can ask on their issue tracker questions about the software.

[TimStewartJ]

Okay yeah, it definitely seems nbinteract isn't too useful to us at the moment. Regarding voila, it looks like before that pr Noah mentioned, there were output.js and services-shim.js that were nearly identical to the ones in thebe. They, in addition to the old manager.js, were replaced with a new implementation utilizing jupyterlab-manager. I've been trying to do something similar in thebe but with no luck.

[moorepants]

If you open a PR on thebe with what you are trying, we and others can comment on it and help you.

[TimStewartJ]

I believe jupyter-book/thebe#111 already addresses this, but hasn't seen much attention recently.

[TimStewartJ]

I just realized you said PR and not issue, I suppose we could try that.

[moorepants]

Yes, please open a PR.

[moorepants]

This is fixed with the 0.8.0 thebe release!