How to run automatic demos based on Jupyter

[nthiery]

For ODK's formal review (and certainly elsewhere), we will want to have self-running demos that our reviewers can glance through. A nice way to author such demos would be to produce a collection of Jupyter notebooks. And then have some "run demo" gadget that would take each notebook in turn, and execute the cells one by one at a slow pace (every 10s maybe?). And then pause longer and switch to the next demo. That ideally with the option to pause, play around with the notebook (hopefully not breaking it too much), and restart the demo.

Does something like this already exist? If not, is this something that could be implemented before the project review (last week of April)?

We discussed this a bit with @defeo; one way to model the "collection of notebooks" would be to put them all in a folder. Another would be to build a linked list (possibly going in round) by addinng an hyperlink at the end of each notebook pointing to the next one.

cc: @minrk, @takluyver (feel free to redirect that discussion to some appropriate Jupyter channel).

[nthiery]

This could actually be relevant for #151.

[minrk]

I'm not aware of such a thing. The slowly step through the notebook (ignoring user intervention) is pretty simple. Switching to other notebooks and allowing it to pause/resume when users interact with it would be a bit more complicated.

[defeo]

Switching to other notebooks

Very hackishly: embed a link "next notebook" in the last (markdown) cell. When execution is finished, change `window.location` to it.

and allowing it to pause/resume

I agree. Doable, but certainly more painful. I can give a hand. But you certainly know the JS API better than me.

[minrk]

Here's a bit of javascript that will cause the notebook to step through each cell every ten seconds until the end:

function step() {
    // don't do anything if explicitly paused
    // or another window has focus
    if (window.paused || !document.hasFocus()) {
        return;
    }
    require(['base/js/namespace'], function (Jupyter) {
        var nb = Jupyter.notebook;
        if (nb.keyboard_manager.mode === 'edit') {
            // don't auto-execute while a cell is being edited
            return;
        }
        if (nb.get_selected_index() + 1 === nb.ncells()
            && nb.get_selected_cell().get_text().trim() === '') {
            // at the end
            console.log("at end");
        } else {
            Jupyter.notebook.execute_cell_and_select_below();
        }
    });
}

if (window.stepInterval) {
    clearInterval(window.stepInterval);
    delete window.stepInterval;
}

window.stepInterval = setInterval(step, 10000);

This could be loaded in an extension to run such a demo for a single notebook. Switching between tabs automatically would be more challenging without running afoul of pop-up blockers.

[nthiery]

Thanks @minrk, @defeo for investigating this! That's already a nice start. @minrk Could you provide an example notebook demonstrating your javascript code in action? For now, it's fine if, e.g., the first cell of the notebook is dedicated to loading the javascript from some external file (to not clutter the notebook) and running it. We can do without the "stop and restart" feature for the project review. If we can get the multi-notebook feature, that would be nice. Otherwise I guess it would be straightforward to pause one minute when the bottom of the notebook is reached, and start over at the beginning after clearing all output and restarting the kernel, right? Cheers, Nicolas

[minrk]

@nthiery Sure. I'll try to put up a demo notebook soon.

[nthiery]

***@***.*** Sure. I'll try to put up a demo notebook soon.

Great, thanks!

[jdemeyer]

It might be useful to have support for ipywidgets too, for example showing some interact and change the widgets. I know that one can easily modify widgets from Javascript, so this shouldn't be too hard.

[nthiery]

It might be useful to have support for ipywidgets too, for example showing some interact and change the widgets. I know that one can easily modify widgets from Javascript, so this shouldn't be too hard.

Good point! If some widget (e.g. a slider) is connected to some Python variable v via a traitlet, an easy approach for the notebook author would be, in a cell just below, to write a little script that changes `v` as desired. The advantage is that this is very flexible while not requiring anything new. Could this be made to work with an interact? E.g. do we have a way to access the traitlets / variables of an interact in the cell just above?

[minrk]

@nthiery if you use interactive instead of interact, you have a handle on the widgets.

[nthiery]

I was precisely trying this out; thanks for the tip though! This indeed works smoothly:

    from ipywidgets import interact, interactive
    from IPython.display import display
    import time

    def f(z=(0,10)):
        return z^2
    I = interactive(f); display(I)
    slider = I.children[0]
    for i in range(10): time.sleep(1); slider.value=i

This clutters a tiny bit the notebook but nothing bad.

[jdemeyer]

You can do it with @interact too:

from ipywidgets import interact
import time

@interact
def f(z=(0,10)):
    return z^2
slider = f.widget.children[0]
for i in range(10): time.sleep(1); slider.value=i

[nthiery]

You can do it with @interact too:

Ah ah, much better! I had tried something like that, but had missed that the widget was inserted into f as an attribute. I guess that does the job for your use case, right?

[minrk]

I made this as an example of stepping through a notebook automatically.

[fangohr]

@minrk - it just works! Very cool. 👍