Performance: Approximately 3 second delay between code completion and ipywidgets rendering in browser

[julian-west]

Description

There is a long delay between the code execution completing and the ipywidgets rendering in the browser (approximately 3 seconds) - see screen recording below.

In the example below I have a very simple app to demonstrate the issue.

The app renders some HTML text to signal the the beginning and end of the Python script and displays a single widget. There is a considerable time delay between the code completion and the actual widget rendering in the browser. There is at least a 3 second delay no matter which widget I use, even for the simplest possible webapp as demonstrated below.

This issue is potentially related to issue #764

I am not sure if this is an issue with Voila or IpyWidgets. There is no noticeable delay when rendering the same simple ipywidgets in a Jupyter notebook.

Why is there a consistent delay before rendering the widgets? How can this time delay be reduced?

Reproducing the Simple Example App

App Code

# simple_app.py
import ipywidgets as widgets
from IPython.display import display, HTML

display(HTML("<h2> My Simple App</h2>"))

slider = widgets.IntSlider(description="x")
display(slider)

display(HTML("<p>Code execution completed</p>"))

Requirements

# requirements.txt
voila==0.2.10

Deployment command

# set up virtual environment
pyenv virtualenv 3.8.8 voila-test
pyenv activate voila-test
pip install -r requirements.txt

# deploy voila app
voila simple_app.py --VoilaConfiguration.extension_language_mapping .py=python

Testing environment

• Local machine (MacBook Pro Intel i7, 16GB RAM)
• Python version = 3.8.8
• Google Chrome (also observed in Firefox and Edge)

# pip freeze
anyio==3.3.0
argon2-cffi==20.1.0
async-generator==1.10
attrs==21.2.0
bleach==4.0.0
certifi==2021.5.30
cffi==1.14.6
charset-normalizer==2.0.4
defusedxml==0.7.1
entrypoints==0.3
idna==3.2
ipython-genutils==0.2.0
Jinja2==3.0.1
jsonschema==3.2.0
jupyter-client==6.1.12
jupyter-core==4.7.1
jupyter-server==1.10.2
jupyterlab-pygments==0.1.2
MarkupSafe==2.0.1
mistune==0.8.4
nbclient==0.5.3
nbconvert==6.1.0
nbformat==5.1.3
nest-asyncio==1.5.1
packaging==21.0
pandocfilters==1.4.3
prometheus-client==0.11.0
ptyprocess==0.7.0
pycparser==2.20
Pygments==2.9.0
pyparsing==2.4.7
pyrsistent==0.18.0
python-dateutil==2.8.2
pyzmq==22.2.1
requests==2.26.0
requests-unixsocket==0.2.0
Send2Trash==1.8.0
six==1.16.0
sniffio==1.2.0
terminado==0.10.1
testpath==0.5.0
tornado==6.1
traitlets==5.0.5
urllib3==1.26.6
voila==0.2.10
webencodings==0.5.1
websocket-client==1.2.0

[agoose77]

This isn't a "fix" inasmuch as a workaround — could you install (and use) the xeus-python kernel and report back your findings? I switched out ipykernel for xeus-python in production because it was so much quicker to load the page.

[martinRenou]

@agoose77 I'm curious, is it still the case with recent xeus-python releases which makes use of IPython?

[agoose77]

I actually haven't tried it for a new release: I was running into #430 at the time and I needed to make a very quick release, so I pinned the dependency on 0.8.3.

IIRC it was the fact that xeus-python was much faster at establishing the ws connections, but thinking about it that doesn't make sense as the WS is all done Python/JS side.

[julian-west]

@agoose77, unfortunately, the rendering delay issue is not resolved by switching out ipykernel for xeus-python.

Using the xeus-python kernel reduced the initial loading time of the app (i.e. the time for the 'running' spinning wheel to finish), however, there was still an identical 3 second rendering delay for both ipykernel and xeus-python after the python application code had completed.

[maartenbreddels]

could it be the downloading of js files? If you check the dev console, you might see the network tab with timings (although watch the checkbox to disable caching).

[julian-west]

It's strange because the js files seem to load relatively quickly (all within the first ~1.5 seconds), then there is a considerable 'dead' period in the network calls before the widget finally renders. Not sure what is happening in this long gap

Network Tab

Performance tab

[agoose77]

Can you share a reproducer notebook with us?

[maartenbreddels]

@mariobuikhuizen didn't you fix this with jupyter lab? I remember you were working on exactly this!

[mariobuikhuizen]

Yeah, I fixed a 3s delay in startup here: jupyterlab/jupyterlab#10321

[maartenbreddels]

I guess we need to bump some js packages and build again.

[julian-west]

@agoose77 here is a zip file of the code to reproduce my current simple app (if that is what you mean by reproducer notebook)
voila-rendering-delay.zip

[agoose77]

Thanks for this, it will be useful.

[jtpio]

I guess we need to bump some js packages and build again.

Bumping to the latest @jupyterlab/services here might be enough:

voila/packages/voila/package.json

Line 21 in 9d89e82

"@jupyterlab/services": "^6.0.0",

[julian-west]

Looks like that works! Increasing the @jupyterlab/services dependency to version 6.1.8 (latest stable release) almost completely removes rendering delay. Thanks a lot!

[jtpio]

Thanks @julian-west for the heads-up!

Would you like to open a PR to apply the change here in voila? So it can be part of the next release.

[jtpio]

Fixed by #933

widgets-3s-startup.mp4