Enable serving notebook as interactive docs with static code cells

[MarcSkovMadsen]

Serving a (Panel) notebook as an interactive notebook document with static code is a powerful way to serve documentation.

• It is faster to open than to open a notebook and run all cells manually.
• For some users starting to learn it can be intimidating to 1) find out how to execute cells 2) run the "risk" of corrupting the code.

I also see a use case when running Panel on Binder enabling users to work with

• Interactive Notebooks
• Apps
• Interactive Notebooks with static code (This Feature Request)

Potential Solutions

Is see two potential solutions. Something like

• New, Panel based: panel serve-doc my_notebook.ipynb
• Existing, Voila based: voila examples --strip_sources=False --base_url=/docs/ (The image above is based on this)

Voila Based

Local

After having installed voila you can run something like

jupyter trust examples/**/**/*.ipynb

and then

run voila examples --strip_sources=False --base_url=/docs/

Then you can open http://localhost:8866/docs/ and navigate via file explorer or open directly via http://localhost:8866/docs/voila/render/gallery/apis/stocks_altair.ipynb. If you do the latter you will see something like the above image.

But there are two issues.

• [] The altair plots are not shown before you resize the window.
• [] The widgets are not responding.

voila_not_interactive.mp4

I also see the below in my console

(panel_dev) root@2320959f1951:/workspaces/panel# voila examples --strip_sources=False --base_url=/docs/
[Voila] Using /tmp to store connection files
[Voila] Storing connection files in /tmp/voila_d0aig8yd.
[Voila] Serving static files from /opt/conda/envs/panel_dev/lib/python3.7/site-packages/voila/static.
[Voila] Voilà is running at:
http://localhost:8866/docs/
WARNING:tornado.general:404 GET /docs/api/kernels/cae033b1-8b4c-4eb9-ad86-22b9b9a274bd/channels?session_id=c5055e5e-95e5-4cfe-adc5-697f373c8c89 (127.0.0.1): Kernel does not exist: cae033b1-8b4c-4eb9-ad86-22b9b9a274bd
WARNING:tornado.access:404 GET /docs/api/kernels/cae033b1-8b4c-4eb9-ad86-22b9b9a274bd/channels?session_id=c5055e5e-95e5-4cfe-adc5-697f373c8c89 (127.0.0.1) 3.78ms
[Voila] WARNING | Replacing stale connection: cae033b1-8b4c-4eb9-ad86-22b9b9a274bd:c5055e5e-95e5-4cfe-adc5-697f373c8c89
[Voila] Kernel started: 8560c6fe-704f-4a22-a6e7-55195c3a3d25
/opt/conda/envs/panel_dev/lib/python3.7/site-packages/nbconvert/filters/datatypefilter.py:41: UserWarning: Your element with mimetype(s) dict_keys([]) is not able to be represented.
  mimetypes=output.keys())
[Voila] WARNING | No handler found for comm target 'f5495fe16b39407b996ce9e095ad0047'

I tried following the description in Deploy and Export - ipywidgets but could not get it working.

Furthermore adding pn.config.comms = 'ipywidgets' to all notebooks would not work as the would be running in different environments: Notebook, Labs, Voila, VS Code,Colab etc.

Binder

I have added a voila docs server to Binder.

https://mybinder.org/v2/gh/holoviz/panel/binder?urlpath=lab/tree/examples

But I have not been able to see anything yet. Probably due to some misconfiguration of the jupyter server proxy.

binder_voila_docs.mp4

The branch is binder and the current commit is 01fc5d4d21b7bc58283b932b7a46d2444d010bcd.

The current configuration of the jupyter server proxy is in https://github.com/holoviz/panel/blob/01fc5d4d21b7bc58283b932b7a46d2444d010bcd/binder/jupyter-voila-docs-server/jupyter_voila_docs_server.py