Implement Output Widget for thebelab

[lukasheinrich]

It would be nice to be abled to use interactive widgets created via the interact() decorator in ipywidgets. As @SylvainCorlay explained in #72 this needs the Output widget to be implemented in thebelab. I'm happy to try ot give it a shot, but unsure were to start.

`

The main use-case we are targeting is to be abled to embed interactive views of statistical models built with https://github.com/diana-hep/pyhf (e.g. like here https://www.youtube.com/watch?v=9egt9ZTm7T0 )

cc @kratsg @matthewfeickert

[choldgraf]

just a quick note that this may be possible with nbinteract:

https://github.com/SamLau95/nbinteract

and a home page w/ some demos:

https://www.nbinteract.com/

It is similar to Thebelab, though it doesn't create interactive inputs, it focuses on creating output widgets. I'd also love to get support for that into jupyter-book (jupyter-book/jupyter-book#82)

Ideally I'd love to see nbinteract and thebelab merge in some way

[lukasheinrich]

oh nice! I'll try that. In the meantime I have a prelim version that just requires a re-execution per cell

http://www.lukasheinrich.com/capbinder/staticweb/index.html

though it's not clear to me how nbi and thebe would interact, is the point that the output of nbi is more easily renderable? I'd like to avoid running a server myself (like bokeh or it seems nbi) but rather use a remote kernel from e.g. binder

[lukasheinrich]

I asked to quickly.. this works very nicely

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

and using the widgets.html template with code

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)

I get a working interactive plot. Thanks @choldgraf

[choldgraf]

woot! I'd love to hear your thoughts on nbi as you play around with it - it's been on my list to learn more about for a while now. I think it should "just work" with ipywidgets output, no? (and it's using Binder for a kernel)

[lukasheinrich]

I think it's great. especially since it works :) It is a bit limited in the sense that only histograms, bar and line charts are supported and cannot be overlaid (see the viz we want to achieve here: http://www.lukasheinrich.com/capbinder/staticweb/index.html -- a stacked bar plot with a scatter on top)

The basic widgets from ipywidgets work as discussed in #72 but widgets.interactive_output does not, so it was not very straight forward. I also tried altair but that also did not work with thebelab (perhaps @jakevdp has an idea?)

[choldgraf]

argg - I didn't realize that nbinteract didn't support "arbitrary" cell output. I'd love to see this baked into Thebelab as well (and would also like the ability to display outputs without creating interactive input cells, see #102 )

[jakevdp]

Altair requires vega/vega-lite javascript libraries to be present in the frontend. Thebe would have to find a way to provide these. (cf. https://github.com/vega/ipyvega)

[lukasheinrich]

@jakevdp here

https://github.com/minrk/thebelab/blob/master/examples/widgets.html

require js is loaded so there should be an ability to pull in the required libs ( I assume this is how ipyleaflet does it) but one could also include the vega libs explicitly if you think that would work

Edit: just tried adding

  <script src="https://vega.github.io/vega/vega.min.js"></script>

but still see

<VegaLite 2 object>

If you see this message, it means the renderer has not been properly enabled
for the frontend that you are using. For more information, see
https://altair-viz.github.io/user_guide/troubleshooting.html

(to be safe I also tried enabling the notebook renderer, but I'm pretty sure thebelab goes through the jupyter lab APIs, in any case that throws "JavaScript not enabled")

(using this fork as a binder kernel which should have the widgets installed: https://github.com/lukasheinrich/altair_notebooks)

[jakevdp]

The kaggle renderer might work... sounds like it's a similar frontend environment.

[lukasheinrich]

@jakevdp that was it! I didn't see the kaggle renderer in the docs, but it works

[lukasheinrich]

@choldgraf in the end, nbinteract worked best and I wanted to share the result is. I had to fork nbi and hack in colors which I should make into a proper PR to upstream, but I'm happy for now

http://www.lukasheinrich.com/nbinteract-pyhf/static/

Coming back to the original issue of this PR. Whatever nbinteract uses to render may be a good pointer to how to implement the output widget?

[choldgraf]

I love it! Way to go @lukasheinrich :-) and thanks for helping out @jakevdp !

How much did you end up deviating from nbinteract? Think this is addressable with documentation right now, to some degree?

[SylvainCorlay]

Note on the original issue:

We have a working implementation of the output widget and mime renderers coming up in Voila, and I will port it to thebelab, hopefully the coming week.

[lukasheinrich]

excellent news @SylvainCorlay -- can't wait to try it out.

[choldgraf]

@SylvainCorlay I'd love to hear about this as well once it's working! I only heard about voila recently but it seems quite useful for jupyter-book too

[choldgraf]

I just gave this a shot and it seems like interactive widgets are almost there, but I think I've run into a bug:

If you open the final cell on this page:

https://jupyter.org/jupyter-book/features/interactive_cells.html

and click the "pencil" button (which activates thebelab) then run the cell, the output of the interact function is displayed, but it seems to cover up the ipywidgets buttons underneath.

[moorepants]

@SylvainCorlay you wrote:

We have a working implementation of the output widget and mime renderers coming up in Voila, and I will port it to thebelab, hopefully the coming week.

What is the status of this? We'd like to get this working in Thebelab and have some dev cycles to contribute. Can you point my two students @sandertyu and @rkevin-arch to the relevant code in Voila, for example?

[choldgraf]

I believe they have also now contributed this to nbclient as well - and if I am correct in saying this then this is the PR where it happened, which might help: jupyter/nbclient#68

Agree this would be awesome to have in thebelab. I think once we have an easy story for widgets etc, then we could do some really cool stuff with thebelab and widgets!

[moorepants]

Thanks for the pointer! We'll have a look.

[minrk]

I can confirm that while other widgets work, even after updating to the 3.0rc in #268, @interact examples do not work, which suggests something is probably missing from our WidgetManager. I don't recall what @interact does differently that prevents it from displaying.

[choldgraf]

Maybe this is something that some JupyterLab folks could advise on? @jasongrout do you have any thoughts on how we could get @interact working in other contexts?

[thomasfermi]

Since interact is not working: Is there a workaround to get sliders that manipulate a plot into a jupyter book?

[moorepants]

@SylvainCorlay can you provide some pointers to the code in voila that should be ported to thebelab? I have some students that can work on this but they just need a bit of starting guidance on what to work with and what to look for.

[sandertyu]

So far as I can tell, widget callbacks are working properly through Thebe 0.7.1, but their new outputs are not being displayed. For instance, if you display an IntSlider() through interact(), the slider will display along with the outputed value of whatever function you are feeding to interact, but the outputted value will not visually update after the first change made to the slider. I explain this in more detail here.

My guess is that output.js may need some code to replicate the setOutputs() method in ipywidgets/output.ts and similar such changes. I checked the source code for nbinteract and found that their outputWidget has no such setOutputs() code, so my suggestion may not be exactly what is needed.

Ultimately, will we need to create an entirely new file to implement this Output Widget or is the current thinking that we just need modifications to output.js and possibly manager.js?

[moorepants]

Ultimately, will we need to create an entirely new file to implement this Output Widget or is the current thinking that we just need modifications to output.js and possibly manager.js?

Modifications to the existing files should be sufficient.

[stevejpurves]

@moorepants @choldgraf this issue can now be closed?

[moorepants]

Yes, I think there may be a few more issues we can close too.

[moorepants]

We've implemented the jupyter lab output manager in #418. This resolves the issue here.