ipympl

ipympl copied to clipboard

Possibly related to #124, I am trying to run a super simple example after following the installation instructions:

pip install ipympl

# If using JupyterLab
# Install nodejs: https://nodejs.org/en/download/
jupyter labextension install @jupyter-widgets/jupyterlab-manager
jupyter labextension install jupyter-matplotlib

nodejs info:

$ node -v
v10.16.0
$ npm version
{ npm: '6.9.0',
...
}

Jupyter info:

$ jupyter --version
jupyter core     : 4.5.0
jupyter-notebook : 6.0.0
qtconsole        : not installed
ipython          : 7.6.1
ipykernel        : 5.1.1
jupyter client   : 5.3.1
jupyter lab      : 1.0.2
nbconvert        : 5.5.0
ipywidgets       : 7.5.0
nbformat         : 4.4.0
traitlets        : 4.3.2

Simple example:

# Enabling the `widget` backend.
# This requires jupyter-matplotlib a.k.a. ipympl.
# ipympl can be install via pip or conda.
%matplotlib widget
# aka import ipympl
 
import matplotlib.pyplot as plt
 
plt.plot([0, 1, 2, 2])
plt.show()

Error:

Error displaying widget

Not sure what else I need, or where a version mismatch is, any help is appreciated. Thank you!

Could you please share the content of the javascript console?

@SylvainCorlay I am new to Jupyter, so I am not sure what you mean. Do you want me to run the kernel in a Code Console instead of the Notebook, and share the output? Or is their another console that I can use for debugging?

Interesting, I had a similar error today after waking up my PC from Standby. It didn't happen before the update to v1.0.2. But it worked nicely after restarting the kernel. I will keep an eye on the is console in case it happens again!

@neoblizz JavaScript is used to provide the interactivity in the web browser. Every web browser comes with developer tools which includes a JavaScript console. For instance in chrome you can find them in the browser menu "Tools - developer tools" or just press [F12] when you are in the jupyterlab tab of your browser. In the developer tools you can find the "console". If understand @SylvainCorlay right, you should get some output in this "console" when you run your jupyter cell.

Ah, that makes a lot of sense! @scimax I was thinking of Jupyterlab's console. Here's the output of my chrome console: (I am not sure if there was a nicer way to export the console output, I just copy/pasted it, and its long...)

manager-base.js:281 Could not instantiate widget
(anonymous) @ manager-base.js:281
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
s @ manager-base.js:18
Promise.then (async)
l @ manager-base.js:19
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e._make_model @ manager-base.js:265
(anonymous) @ manager-base.js:254
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e.new_model @ manager-base.js:240
e.handle_comm_open @ manager-base.js:152
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
utils.js:125 Error: Could not create a model.
    at n (utils.js:125)
n @ utils.js:125
Promise.catch (async)
e.handle_comm_open @ manager-base.js:157
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
default.js:924 Exception opening new comm
(anonymous) @ default.js:924
s @ default.js:7
Promise.then (async)
l @ default.js:8
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
default.js:132 Module @jupyter-widgets/base, semver range ^1.2.0 is not registered as a widget module
(anonymous) @ default.js:132
Promise.catch (async)
_onWSMessage @ default.js:129
manager-base.js:281 Could not instantiate widget
(anonymous) @ manager-base.js:281
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
s @ manager-base.js:18
Promise.then (async)
l @ manager-base.js:19
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e._make_model @ manager-base.js:265
(anonymous) @ manager-base.js:254
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e.new_model @ manager-base.js:240
e.handle_comm_open @ manager-base.js:152
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
utils.js:125 Error: Could not create a model.
    at n (utils.js:125)
n @ utils.js:125
Promise.catch (async)
e.handle_comm_open @ manager-base.js:157
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
default.js:924 Exception opening new comm
(anonymous) @ default.js:924
s @ default.js:7
Promise.then (async)
l @ default.js:8
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
default.js:132 Module jupyter-matplotlib, semver range ^0.4.2 is not registered as a widget module
(anonymous) @ default.js:132
Promise.catch (async)
_onWSMessage @ default.js:129
manager-base.js:281 Could not instantiate widget
(anonymous) @ manager-base.js:281
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
s @ manager-base.js:18
Promise.then (async)
l @ manager-base.js:19
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e._make_model @ manager-base.js:265
(anonymous) @ manager-base.js:254
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e.new_model @ manager-base.js:240
e.handle_comm_open @ manager-base.js:152
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
utils.js:125 Error: Could not create a model.
    at n (utils.js:125)
n @ utils.js:125
Promise.catch (async)
e.handle_comm_open @ manager-base.js:157
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
default.js:924 Exception opening new comm
(anonymous) @ default.js:924
s @ default.js:7
Promise.then (async)
l @ default.js:8
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
default.js:132 Module @jupyter-widgets/base, semver range ^1.2.0 is not registered as a widget module
(anonymous) @ default.js:132
Promise.catch (async)
_onWSMessage @ default.js:129
manager-base.js:281 Could not instantiate widget
(anonymous) @ manager-base.js:281
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
s @ manager-base.js:18
Promise.then (async)
l @ manager-base.js:19
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e._make_model @ manager-base.js:265
(anonymous) @ manager-base.js:254
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e.new_model @ manager-base.js:240
e.handle_comm_open @ manager-base.js:152
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
utils.js:125 Error: Could not create a model.
    at n (utils.js:125)
n @ utils.js:125
Promise.catch (async)
e.handle_comm_open @ manager-base.js:157
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
default.js:924 Exception opening new comm
(anonymous) @ default.js:924
s @ default.js:7
Promise.then (async)
l @ default.js:8
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
default.js:132 Module jupyter-matplotlib, semver range ^0.4.2 is not registered as a widget module
(anonymous) @ default.js:132
Promise.catch (async)
_onWSMessage @ default.js:129
renderer.js:45 Error displaying widget
renderer.js:46 Module jupyter-matplotlib, semver range ^0.4.2 is not registered as a widget module
lab:1 Uncaught (in promise) Module @jupyter-widgets/base, semver range ^1.2.0 is not registered as a widget module
Promise.then (async)
e.register_model @ manager-base.js:216
(anonymous) @ manager-base.js:256
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e.new_model @ manager-base.js:240
e.handle_comm_open @ manager-base.js:152
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
lab:1 Uncaught (in promise) Module jupyter-matplotlib, semver range ^0.4.2 is not registered as a widget module
Promise.then (async)
e.register_model @ manager-base.js:216
(anonymous) @ manager-base.js:256
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e.new_model @ manager-base.js:240
e.handle_comm_open @ manager-base.js:152
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
lab:1 Uncaught (in promise) Module @jupyter-widgets/base, semver range ^1.2.0 is not registered as a widget module
Promise.then (async)
e.register_model @ manager-base.js:216
(anonymous) @ manager-base.js:256
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e.new_model @ manager-base.js:240
e.handle_comm_open @ manager-base.js:152
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124
lab:1 Uncaught (in promise) Module jupyter-matplotlib, semver range ^0.4.2 is not registered as a widget module
Promise.then (async)
e.register_model @ manager-base.js:216
(anonymous) @ manager-base.js:256
l @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
i @ manager-base.js:16
e.new_model @ manager-base.js:240
e.handle_comm_open @ manager-base.js:152
(anonymous) @ manager.js:58
(anonymous) @ manager.js:9
Z/Y6.r @ manager.js:5
_handleCommOpen @ manager.js:56
(anonymous) @ default.js:918
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleCommOpen @ default.js:909
(anonymous) @ default.js:1016
o @ default.js:6
Promise.then (async)
l @ default.js:8
(anonymous) @ default.js:9
YC29.r @ default.js:5
_handleMessage @ default.js:973
(anonymous) @ default.js:127
Promise.then (async)
_onWSMessage @ default.js:124

@SylvainCorlay any suggestions?

I'm also experiencing this issue so a fix or workaround would be great.

I also have this problem.

Which versions of JupyterLab @jupyter-widgets/jupyterlab-manager and ipympl are you using?

@martinRenou I was able to get it working by updating jupyter and jupyterlab. Somehow the jupyter lab command worked even when jupyterlab wasn't installed, only jupyter. For reference, this is what's I'm running now:

jupyter core     : 4.6.0
jupyter-notebook : 6.0.1
qtconsole        : 4.5.5
ipython          : 7.8.0
ipykernel        : 5.1.2
jupyter client   : 5.3.4
jupyter lab      : 1.1.4
nbconvert        : 5.6.0
ipywidgets       : 7.5.1
nbformat         : 4.4.0
traitlets        : 4.3.3

JupyterLab v1.1.4
Known labextensions:
   app dir: /usr/local/share/jupyter/lab
        @jupyter-widgets/jupyterlab-manager v1.0.2  enabled  OK
        jupyter-matplotlib v0.4.2  enabled  OK

I had the same problem. Finally I made it work after a few upgrades. Here is what I did in upgrade order:

• (not working) pip install jupyterlab --upgrade
• (not working) jupyter labextension update @jupyter-widgets/jupyterlab-manager

Then it worked after the following two upgrades. I am not sure which one was the key step. Maybe try both since we are upgrading anyway.

• pip install notebook --upgrade
• pip install jupyter-core --upgrade

Good luck!

I could get it only to work using ipympl 0.4.0 and jupyter-matplotlib 0.5.0. Curiously, updating ipympl actually downgraded my jupyter-matplotlib extension and I had to run labextension update TWICE to get it from 0.4.0 -> 0.4.1 -> 0.5.0. Strange. So, this worked for me (starting from a previous installation):

$ conda install ipympl=0.4.0
$ jupyter labextension update --all
$ jupyter labextension update --all
$ jupyter labextension list
JupyterLab v1.2.4
Known labextensions:
   app dir: /Users/david/anaconda3/envs/labplot/share/jupyter/lab
        @jupyter-widgets/jupyterlab-manager v1.1.0  enabled  OK
        jupyter-matplotlib v0.5.0  enabled  OK

Since ipympl 0.4.0 is in conda-forge, a minimal fresh installation can be (currently) created with:

$ conda create -n labplot -c conda-forge python=3 jupyterlab ipympl nodejs
$ conda activate labplot
$ jupyter labextension install @jupyter-widgets/jupyterlab-manager jupyter-matplotlib
$ jupyter labextension update --all

The above worked for me with one addition (note that I did not do this in a new fresh environment). I ended up running $ jupyter lab build before everything worked.

Also a note to others that may be getting tripped up with this. I previously thought I had the latest ipympl because conda update ipympl said it was already up to date. However, the version was < 0.4.0 because it was not from the conda-forge channel. Make sure to check the version number as @davidfokkema mentioned above.

Finally, I'm sure everyone agrees, but this really needs to be made much more seamless. Without nice plots jupyterlab is pretty lacking.