Problem with JupyterLab UI commands from Voila page

General
1

I tested the following commands in a Markdown cell. All worked when in a notebook, but none in the Voila rendered page.

<button data-commandLinker-command="notebook:run-all-below" href="#">START</button>
<button data-commandLinker-command="kernelmenu:interrupt" href="#">STOP</button>
<button data-commandLinker-command="notebook:clear-all-cell-outputs" href="#">CLEAR</button>
<button data-commandLinker-command="help:about" href="#">TEST</button>

The error messages copied from the developer tool console when clicking on the buttons:
image

Any suggestions would be greatly appreciated!
Thanks.

2

My understanding of Voila is that you are using the .ipynb file converted to run standalone applications. As such, these UI commands meant for JupyterLab have nothing with which to connect and do anything.
From the README there :

“Voilà turns Jupyter notebooks into standalone web applications.
Unlike the usual HTML-converted notebooks, each user connecting to the Voilà tornado application gets a dedicated Jupyter kernel which can execute the callbacks to changes in Jupyter interactive widgets.”

The documentation also talks about what is rendered having been converted from the notebook file, see here:

“Voilà uses nbconvert under the hood to render the notebooks …”

(I do note though that the information in the Voila changelog concerning version 0.5.0 emphasizes less reliance on nbconvert, and I don’t know how well the documentation now reflects this change. I may well be citing things that held for earlier versions.)

Code from the originating code cells has already been run in the rendered result you see in Voila and at this time my understanding is that the only interactions allowed are the ones linked to implemented interactive widgets.

You would implement the actions you need with widgets.
The Gallery examples may help you in that regard. Further down on the referenced README page:

“Most of the examples rely on widget libraries such as ipywidgets, ipyleaflet, ipyvolume, bqplot and ipympl, and showcase how to build complex web applications entirely based on notebooks.”

The documentation talks about pre-launch hooks, and so I suppose you could detect the presence of these markdown buttons and modify things downstream on-the-fly accordingly, if you need to have notebooks with the markdown in them while also having them work ultimately in your Voila apps as-is.

1 Like
3

Thanks @fomightez! What I want to achieve is really just to be able to start from a Voila-rendered notebook and click on a link to open another Voila-rendered notebook within JupyterLab. After rendering, the Javascript library is no longer available to support that. Any alternate solutions?

4

One could try ipylab.

1 Like
5

For those ending up here looking for related ideas on switching Voila displayed, this old discussion may be of interest, too.

6

Thanks, @bollwyvl. Tried it, and once the sample notebook is rendered by Voila, the underlying Javascript libraries again appear wiped out when converted to static HTML:

image
image662×764 25.6 KB

And detailed error:

[Open Browser Console for more detailed log - Double click to close this message]
Failed to load model class 'PanelModel' from module 'ipylab'
ReferenceError: Cannot access 'h' before initialization
    at Module.JupyterFrontEndModel (http://localhost:8888/voila/labextensions/ipylab/static/856.9dc62dfa1fc2e1667e5a.js?v=9dc62dfa1fc2e1667e5a:1:222)
    at exports (http://localhost:8888/voila/labextensions/ipylab/static/480.16044a8abb039e4c2a69.js?v=16044a8abb039e4c2a69:1:446)
    at async T.loadClass (http://localhost:8888/voila/static/2336.voila.js:1:76572)
    at async T.loadModelClass (http://localhost:8888/voila/static/2336.voila.js:1:73281)
    at async T._make_model (http://localhost:8888/voila/static/2336.voila.js:1:70174)
1 Like