Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widgets don't display on jupyterlab 4 / jupyter notebook 7 #3968

Open
mattragoza opened this issue Dec 16, 2024 · 6 comments
Open

Widgets don't display on jupyterlab 4 / jupyter notebook 7 #3968

mattragoza opened this issue Dec 16, 2024 · 6 comments

Comments

@mattragoza
Copy link

Description

I am trying to create interactive plots in jupyter notebook in a remote computing environment, which I am accessing through OnDemand. The system recently updated to notebook version 7, which to my understanding is effectively based on jupyter lab version 4 and no longer support notebook extensions, so my interactive plotting with %matplotlib notebook no longer works. I first tried %matplotlib ipympl, but a simple test plot only displays "Loading widget..." with no other output. Then I tried %matplotlib widget, with the same result. Importing ipywidgets and showing a simple widget gives me the same result too, which leads me to believe it is a problem with my ipywidgets install.

Reproduce

I ssh into the remote cluster and create a clean environment, then register it as an ipython kernel:

mamba env create -n test jupyterlab ipympl ipywidgets ipykernel
mamba activate test
python -m ipykernel install --user --name test

Then I go to the OnDemand portal and launch a jupyter lab job, and I run the following:

from ipywidgets import Button;
Button(description='test')

I see the text "Loading widget..." below the cell, with nothing else displayed.

Expected behavior

I expect to see an interactive Button widget.

Context

  • ipywidgets version
Selected Jupyter core packages...
IPython          : 8.30.0
ipykernel        : 6.29.5
ipywidgets       : 8.1.5
jupyter_client   : 8.6.3
jupyter_core     : 5.7.2
jupyter_server   : 2.14.2
jupyterlab       : 4.3.3
nbclient         : 0.10.1
nbconvert        : 7.16.4
nbformat         : 5.10.4
notebook         : not installed
qtconsole        : not installed
traitlets        : 5.14.3
  • Operating System and version:
Distributor ID: RedHatEnterprise
Description:    Red Hat Enterprise Linux release 8.10 (Ootpa)
Release:        8.10
Codename:       Ootpa
  • Browser and version: Google Chrome Version 131.0.6778.140 (Official Build) (64-bit)
Command Line Output
I do not know how to access the command line output since I am launching the job through an OnDemand portal.
Browser Output
Error: Could not create a model.
    at 272.2a8425db7209008188fc.js:1:2113
    at async _handleCommOpen (523.fa256ee012d38a89b65a.js:1:2798)
    at async b._handleCommOpen (jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1:1372268)
    at async b._handleMessage (jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1:1374264)
(anonymous) @ 272.2a8425db7209008188fc.js:1
Promise.catch
e.handle_comm_open @ 272.2a8425db7209008188fc.js:1
_handleCommOpen @ 523.fa256ee012d38a89b65a.js:1
_handleCommOpen @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleCommOpen
_handleMessage @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleMessage
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
Promise.then
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1Understand this errorAI
jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1 Exception opening new comm
_handleCommOpen @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleCommOpen
_handleMessage @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleMessage
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
Promise.then
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1Understand this errorAI
272.2a8425db7209008188fc.js:1 Could not instantiate widget
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
l @ 272.2a8425db7209008188fc.js:1
Promise.then
a @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
S @ 272.2a8425db7209008188fc.js:1
e._make_model @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
S @ 272.2a8425db7209008188fc.js:1
e.new_model @ 272.2a8425db7209008188fc.js:1
e.handle_comm_open @ 272.2a8425db7209008188fc.js:1
_handleCommOpen @ 523.fa256ee012d38a89b65a.js:1
_handleCommOpen @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleCommOpen
_handleMessage @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleMessage
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
Promise.then
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1Understand this errorAI
272.2a8425db7209008188fc.js:1 Error: Could not create a model.
    at 272.2a8425db7209008188fc.js:1:2113
    at async _handleCommOpen (523.fa256ee012d38a89b65a.js:1:2798)
    at async b._handleCommOpen (jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1:1372268)
    at async b._handleMessage (jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1:1374264)
(anonymous) @ 272.2a8425db7209008188fc.js:1
Promise.catch
e.handle_comm_open @ 272.2a8425db7209008188fc.js:1
_handleCommOpen @ 523.fa256ee012d38a89b65a.js:1
_handleCommOpen @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleCommOpen
_handleMessage @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleMessage
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
Promise.then
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1Understand this errorAI
jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1 Exception opening new comm
_handleCommOpen @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleCommOpen
_handleMessage @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleMessage
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
Promise.then
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1Understand this errorAI
2523.fa256ee012d38a89b65a.js:1 Uncaught (in promise) Error: Module @jupyter-widgets/base, semver range ^2.0.0 is not registered as a widget module
    at x.loadClass (523.fa256ee012d38a89b65a.js:1:6638)
    at x.<anonymous> (272.2a8425db7209008188fc.js:1:9277)
    at 272.2a8425db7209008188fc.js:1:5989
    at Object.next (272.2a8425db7209008188fc.js:1:6094)
    at 272.2a8425db7209008188fc.js:1:5030
    at new Promise (<anonymous>)
    at S (272.2a8425db7209008188fc.js:1:4775)
    at e._make_model (272.2a8425db7209008188fc.js:1:9156)
    at x.<anonymous> (272.2a8425db7209008188fc.js:1:9010)
    at 272.2a8425db7209008188fc.js:1:5989
loadClass @ 523.fa256ee012d38a89b65a.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
S @ 272.2a8425db7209008188fc.js:1
e._make_model @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
(anonymous) @ 272.2a8425db7209008188fc.js:1
S @ 272.2a8425db7209008188fc.js:1
e.new_model @ 272.2a8425db7209008188fc.js:1
e.handle_comm_open @ 272.2a8425db7209008188fc.js:1
_handleCommOpen @ 523.fa256ee012d38a89b65a.js:1
_handleCommOpen @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleCommOpen
_handleMessage @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
await in _handleMessage
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1
Promise.then
(anonymous) @ jlab_core.d25e823c058f4ae79a91.js?v=d25e823c058f4ae79a91:1Understand this errorAI
4523.fa256ee012d38a89b65a.js:1 Uncaught (in promise) Error: Module @jupyter-widgets/controls, semver range ^2.0.0 is not registered as a widget module
    at x.loadClass (523.fa256ee012d38a89b65a.js:1:6638)
    at x.<anonymous> (272.2a8425db7209008188fc.js:1:9277)
    at 272.2a8425db7209008188fc.js:1:5989
    at Object.next (272.2a8425db7209008188fc.js:1:6094)
    at 272.2a8425db7209008188fc.js:1:5030
    at new Promise (<anonymous>)
    at S (272.2a8425db7209008188fc.js:1:4775)
    at e._make_model (272.2a8425db7209008188fc.js:1:9156)
    at x.<anonymous> (272.2a8425db7209008188fc.js:1:9010)
    at 272.2a8425db7209008188fc.js:1:5989

If using JupyterLab

  • JupyterLab version: 4.2.5
Installed Labextensions
JupyterLab v4.3.3
/ocean/projects/asc170022p/mtragoza/mambaforge/envs/test/share/jupyter/labextensions
        jupyterlab_pygments v0.3.0 enabled OK (python, jupyterlab_pygments)
        jupyter-matplotlib v0.11.4 enabled OK
        @jupyter-widgets/jupyterlab-manager v5.0.13 enabled OK (python, jupyterlab_widgets)

@SoftwareLiteracy
Copy link

Similar behavior on fresh install jupyter lab 4.3.4, ipwidgets 8.1.5.

Code example from ipwidgets:

import ipywidgets as widgets

slider = widgets.IntSlider( value=7, min=0, max=10, step=1, description='Test:' )
slider

Result is text only, no widget rendered:

IntSlider(value=7, continuous_update=False, description='Test:', max=10)
display( slider )

Same result:

IntSlider(value=7, description='Test:', max=10)

System info

~> lsb_release -a
No LSB modules are available.
Distributor ID:	Debian
Description:	Debian GNU/Linux 12 (bookworm)
Release:	12
Codename:	bookworm
~> uname -a
Linux xxx 6.1.0-28-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.119-1 (2024-11-22) x86_64 GNU/Linux

Environment

~> jupyter --version
Selected Jupyter core packages...
IPython          : 8.31.0
ipykernel        : 6.29.5
ipywidgets       : 8.1.5
jupyter_client   : 8.6.3
jupyter_core     : 5.7.2
jupyter_server   : 2.15.0
jupyterlab       : 4.3.4
nbclient         : 0.10.2
nbconvert        : 7.16.4
nbformat         : 5.10.4
notebook         : 7.3.2
qtconsole        : 5.6.1
traitlets        : 5.14.3
~> firefox --version
Mozilla Firefox 128.5.0esr

@SoftwareLiteracy
Copy link

@BwandoWando : Apologies if I confused the issue, as the use cases are somewhat distinct. However the underlying behavior seems the same as reported by @mattragoza. If there is any clarification I can provide to progress toward resolution, please don't hesitate. Thank you.

@auxym
Copy link

auxym commented Jan 15, 2025

I currently am not able to get interactive figures with matplotlib and ipympl, even in old notebooks in which it worked (using %matplotlib widget). The figures show up, but not the widgets to zoom, pan, etc in the figure.

I believe this might be related to this issue?

Package versions:

│ jupyter-events            │ 0.11.0         │          │
│ jupyter-lsp               │ 2.2.5          │          │
│ jupyter_client            │ 8.6.1          │          │
│ jupyter_core              │ 5.7.2          │          │
│ jupyter_server            │ 2.15.0         │          │
│ jupyter_server_terminals  │ 0.5.3          │          │
│ jupyterlab                │ 4.3.4          │          │
│ jupyterlab_pygments       │ 0.3.0          │          │
│ jupyterlab_server         │ 2.27.3         │          │
│ jupyterlab_widgets        │ 3.0.11 
│ ipykernel                 │ 6.29.5         │          │
│ ipympl                    │ 0.9.6          │          │
│ matplotlib                │ 3.8.3          │          │

@auxym
Copy link

auxym commented Jan 16, 2025

Just tried to update to jupyterlab 4.4.0a2, seems to be fixed in this pre-release version, at least for ipympl.

@SoftwareLiteracy
Copy link

Also tried upgrade to jupyterlab 4.4.0a2, same result. No widgets rendered. Moved back to 4.3.4

@SoftwareLiteracy
Copy link

SoftwareLiteracy commented Jan 18, 2025

This is perhaps related to Java script. Testing Java Script at the debug console seems fine. For example in the debugger console:

alert('Alert')

pops up the box:

Image

This cell runs fine:

import ipywidgets as widgets
from IPython.display import display

When execute this in following cell:

w = widgets.IntSlider()

The browser inspect shows:

Exception opening new comm 3 default.js:1124:20
    _handleCommOpen default.js:1124
    _handleMessage default.js:1286
    _msgChain default.js:179
    (Async: promise callback)
    _onWSMessage default.js:176

Which is this code in default.js

    /**
     * Handle a `comm_open` kernel message.
     */
    async _handleCommOpen(msg) {
        this._assertCurrentMessage(msg);
        const content = msg.content;
        const comm = new comm_1.CommHandler(content.target_name, content.comm_id, this, () => {
            this._unregisterComm(content.comm_id);
        });
        this._comms.set(content.comm_id, comm);
        try {
            const target = await Private.loadObject(content.target_name, content.target_module, this._targetRegistry);
            await target(comm, msg);
        }
        catch (e) {
            // Close the comm asynchronously. We cannot block message processing on
            // kernel messages to wait for another kernel message.
            comm.close();
            console.error('Exception opening new comm');
            throw e;
        }
    }

This is as far as I can get. Any suggestions for progress appreciated.

Installed :

> jupyter --version
Selected Jupyter core packages...
IPython          : 8.31.0
ipykernel        : 6.29.5
ipywidgets       : 8.1.5
jupyter_client   : 8.6.3
jupyter_core     : 5.7.2
jupyter_server   : 2.15.0
jupyterlab       : 4.3.4
nbclient         : 0.10.2
nbconvert        : 7.16.5
nbformat         : 5.10.4
notebook         : not installed
qtconsole        : 5.6.1
traitlets        : 5.14.3
> lsb_release -a && uname -a
Distributor ID:	Debian
Description:	Debian GNU/Linux 12 (bookworm)
Release:	12
Codename:	bookworm
Linux xxx 6.1.0-28-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.119-1 (2024-11-22) x86_64 GNU/Linux

> firefox --version
Mozilla Firefox 128.5.0esr

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants