Add support for nbinteract

[choldgraf]

A previous version of Jupyter Book added support for nbinteract, an interesting project from @SamLau95 that facilitated interactive visualizations using Binder. It's similar to Thebelab, though focused around creating interactive widgets instead of editable code cells.

I'd like to see Jupyter Book support nbinteract once more - @SamLau95 do you have guidance on the path-of-least-resistance to doing this? I'm thinking:

• Adding the HTML for the button here: https://github.com/jupyter/jupyter-book/tree/master/_includes/buttons
• Adding an nbinteract.js that is called from the button: https://github.com/jupyter/jupyter-book/tree/master/_includes/js
• Adding some docs to explain how to use nbinteract (probably largely linking out to your site)
• Exposing some basic configuration for nbinteract in _config.yaml (maybe co-opting the binder config)
• Adding an example that uses nbinteract

What do you think?

[SamLau95]

This sounds good! You've listed all the important steps needed to add nbinteract support. I think adding support won't be hard. Communicating how to add interactivity will be trickier though, since it requires authors to learn the ipywidgets library.

Sadly, my cycles are quite full at the moment. Do you have a timeline in mind @choldgraf ?

[choldgraf]

@SamLau95 what's an example of a notebook that could be used to demo nbinteract? Does it only run the contents of cells and then render the output as widgets? Or does it require a particular notebook configuration etc?

[choldgraf]

If it doesn't require any special notebook setup, then perhaps some of the rendering could be offloaded onto Thebelab w/ jupyter-book/thebe#102

[SamLau95]

I think this notebook is a useful demo: https://github.com/SamLau95/nbinteract/blob/master/docs/notebooks/examples/examples_sampling_from_a_population.ipynb

Any other notebook in that examples/ folder should also work.

You don't have to modify the notebook at all for nbinteract to work. Instead, you have to load and run the nbinteract JS package on an HTML page with Jupyter cells. For example, this is the code we load in the nbinteract converter: https://github.com/SamLau95/nbinteract/blob/master/nbinteract/templates/partial.tpl

For the Data 100 textbook, we use the following code: https://github.com/DS-100/textbook/blob/master/assets/js/scripts.js#L133-L160

[choldgraf]

ok sounds great - in that case it shouldn't be too hard to get this working, since that's the same pattern that thebelab uses as well.

[luukalt]

Does jupyter book support nbinteract at this moment?
Or is the only way to create interactive html page through thebelab.

[choldgraf]

@luukalt thebelab (now just called thebe) is the way to go 👍 you could try to get nbinteract to manually work but it's not officially supported

[luukalt]

Thanks @choldgraf! What should be done to include nbinteract manually (since I like the look way better than thebe)?
I am able to use nbinteract to make a dynamic html of a jupyter notebook. However, a simple copy paste of this html in my jupyterbook does not do the trick (which ofcourse makes sense, since all the other stuff, like menus and sidebars are missing), so I was wondering if there is a simple trick to make the interactive html work in the jupyterbook. Thanks in advance.

[choldgraf]

hmmm - I'm not sure exactly, I'd recommend checking out the docs on custom JS code and try to figure it out from there