adding nbinteract support

[choldgraf]

This PR adds support for nbinteract which lets you display interactive widgets powered by Binder. It is originally developed by @SamLau95 who also helps out with jupyter-book!

@SamLau95 if you have a moment, could you see if there's anything wrong with this implementation? I tried to mimic what you're doing on DS100...I don't quite have it working the way we'd like to properly ask Binder for a kernel and/or display update messages, any help would be appreciated

closes #82

[choldgraf]

For some reason this still isn't yet working...the kernel seems to correctly connect upon landing on the page, but:

1. the eventlistener still doesn't seem connected to the interact button at the top
2. nbinteract expects code cells to be in a div with this structure: div.code_cell div.input_area. While jupyter-book is just using div.input_area (no wrapping code cell). As such nbinteract doesn't seem to be finding the code cell text (and I assume this will also break the output execution and such.

[jasmainak]

@choldgraf is this ready to use? I am happy to give it a test drive if you want. I have some interacts in my jupyter-book and I'd love to try this out.

[jasmainak]

No tests updated? :)

[choldgraf]

nope not yet, I'm supposed to chat with @SamLau95 sometime this week to explain how to best-use nbinteract, I couldn't quite figure it out :-)

[choldgraf]

Notes from a chat with @SamLau95

Here's what nbinteract does:

when you click a button that launches nbinteract, it will do the following:

• Loop through cells (expected to be something like div.cell with inputs/output divs inside it.
• For each cell, run the contents of the input in Binder
• If there is an output div called div.output_widget_view, then look at what binder sent back, if there is a widget in that then replace the contents of output_widget_view with the widget data that Binder sent back.

Normally, nbinteract uses a custom liquid template in order to add the .cell divs etc to the output HTML when you run it on a notebook...this is so that it adds the buttons to each cell that outputs a widget. However, we can get around that by using only one button (at the top of the page), and then adding the output_widget_view div code manually according to some metadata that the user gives in the cell (instead of automatically detecting this if there's a widget in the cell output metadata)

We should do something like:

1. Add

   {% block codecell %}
   <div markdown="1" class="cell border-box-sizing code_cell rendered">
   {{ super() }}
   </div>
   {%- endblock codecell %}
   

   so that cell components are grouped together in a div

2. Let use specify cell metadata for interactive outputs, if found, then add the classes that nbinteract looks for in running the cell (which is "div.output_widget_view")

3. We should probably not call this nbinteract specifically, in case we'd like to change
   the backend of how the interactivity happens. Perhaps just call it "interactive output"

[choldgraf]

Wooo, got it working :-) thanks @SamLau95 for the advice:

https://811-137292803-gh.circle-artifacts.com/0/html/features/interact.html

now how the heck do we add a test for this 0.o

[jasmainak]

@choldgraf when I click the "show widgets" button, it's stuck forever ...

[choldgraf]

@jasmainak can you try clicking it again after waiting a moment? It took a second for nbinteract to initialize for me (I just tried the latest build and it seemed to work)...alternatively can you check the JS console to see if there are any errors?

[jasmainak]

hmm ... it did work this time. But it took a while. Could this button be added next to all the widgets? Just like in the nbinteract documentation page?

[choldgraf]

we could do it that way as well with some modifications to the templates...I was thinking that it'd be simpler to just have it at the top (since once it's been activated once, it'll auto-activate in subsequent runs, and since clicking any one button will activate all of the widgets). Do you feel strongly on that one?

[jasmainak]

umm ... not too strongly, but I think the other one is more intuitive. At the moment, I am struggling to explain to people how to use the jupyter-book. Nobody seems to notice the buttons ... maybe it will be easier when I demo in person.

[choldgraf]

ok, I think this is pretty much ready to go except for tests

https://874-137292803-gh.circle-artifacts.com/0/html/features/interact.html

@SamLau95 do you have any recommendations for how to test nbinteract support?

[SamLau95]

@choldgraf One simple method is to make sure that the nbinteract-specific button(s) are present after converting notebooks into HTML.

[choldgraf]

I meant more like testing on the Javascript side :-) How did you test that kinda stuff in nbinteract? e.g., that when I click the button, the binder kernel properly connects etc

[choldgraf]

I'm gonna merge this in because it updates some of the cell CSS structure and could be useful in other PRs as well - we can iterate on the UI for nbinteract later on to see how it feels