[Solved] How to get ipywidgets working in Jupyter Lab?

In Jupyter Notebook, ipywidgets work fine, however they seem to not work in Jupyter Lab (which is supposedly better than Notebook).

I followed these directions.

Step 1: Installed Node.js (https://nodejs.org/en/)

Step 2: Installed requirements on Python 3 with conda:

conda install -c conda-forge ipywidgets
jupyter labextension install @jupyter-widgets/jupyterlab-manager

Unfortunately, basic widgets do not work inside the jupyter lab notebook:

enter image description here

Enquirer: user5601

||

Solution #1:

JupyterLab now prefers a model where arbitrary javascript is no longer allowed to be embedded in a cell’s output, which is how many interactive Jupyter Notebook modules used to work. They now ask that modules with interactivity create a JupyterLab extension. IPyWidgets has an extension that can be activated by running this on your command line (which assumes you already have NodeJS installed):

jupyter labextension install @jupyter-widgets/jupyterlab-manager
Respondent: scnerd

Solution #2:

I had the same pbm, and tried this solution (hope it can help others):

The jupyter labextension install @jupyter-widgets/jupyterlab-manager gave this kind of error in my case:

> /Users/user/.nvm/versions/node/v8.7.0/bin/npm pack @jupyter-widgets/jupyterlab-manager
jupyter-widgets-jupyterlab-manager-0.35.0.tgz

Errored, use --debug for full output:
ValueError:
"@jupyter-widgets/[email protected]" is not compatible with the current JupyterLab
Conflicting Dependencies:
JupyterLab              Extension            Package
>=0.15.4-0 <0.16.0-0    >=0.16.0-0 <0.17.0-0 @jupyterlab/application
>=1.1.4-0 <2.0.0-0      >=2.0.0-0 <3.0.0-0   @jupyterlab/services
>=0.15.4-0 <0.16.0-0    >=0.16.0-0 <0.17.0-0 @jupyterlab/rendermime
>=0.15.4-0 <0.16.0-0    >=0.16.0-0 <0.17.0-0 @jupyterlab/notebook

Then, what I did is to use a previous version 0.34 instead of 0.35:
jupyter labextension install @jupyter-widgets/[email protected]

In fact, according to this, sometime teams get time to consider the last version.

UP (according to comments):
You can check jupyter lab --version and find match on its version compatibility.

And it works now !

enter image description here

Respondent: 4givN

Solution #3:

Had the same issue, and what worked for me today was running the ‘clean’ command, as mentioned here: https://ipywidgets.readthedocs.io/en/latest/user_install.html#installing-the-jupyterlab-extension

So:

jupyter lab clean
jupyter labextension install @jupyter-widgets/jupyterlab-manager

And that got it working right for me just now.

Respondent: rocksteady

Solution #4:

I was getting a Permission Denied error, so adding sudo to the accepted command helped: sudo jupyter labextension install @jupyter-widgets/jupyterlab-manager.

Respondent: David Albrecht

Solution #5:

According to ipywidgets.readthedocs.io documentation (Installing the JupyterLab Extension), for “JupyterLab” do the following steps in “Anaconda Prompt“.

Step 1

conda install -c conda-forge nodejs

Step 2

jupyter labextension install @jupyter-widgets/jupyterlab-manager
Respondent: Iman Irajian

Solution #6:

I have the same issue as @jtlz2 that none of the above suggestion works for me except @hainm’s very specific version combination for jupyter-lab, ipywidgests, and jupyter-widgets/jupyterlab-manager.

Following the initial version numbers listed in this post (https://github.com/jupyter-widgets/ipywidgets/issues/2488#issuecomment-509719214), I tried to find the most updated version combination that works. I list them below, such that one can try it if there is really nothing else working for him/her.

pythonversion=3.8.0
labversion=2.1.5
labmanagerversion=2.0
ipywidgetsversion=7.5.1
nodejsversion=10.13.0

conda create -n lab python=$pythonversion -y
source activate lab
conda install nodejs=$nodejsversion -c conda-forge -y
conda install ipywidgets=$ipywidgetsversion -c conda-forge -y
conda install jupyterlab=$labversion  -y -c conda-forge
jupyter-labextension install @jupyter-widgets/[email protected]$labmanagerversion

It seems that the version of nodejs plays a key role. Holing everything else equal, if I update nodejsversion to 12.x+ or the latest 14.x, this combination as well as @hainm’s combination both fail to make ipywidgets behave normally in Jupyterlab.

Other than the one I listed in the above code cell, below 6 combinations also work for me.

(pythonversion ,labversion ,labmanagerversion ,ipywidgets ,nodejsversion)

  1. (3.7 , 0.34 , 0.37 , 7.4.2 , 10.13)
  2. (3.7 , 1.0 , 1.0 , 7.4.2 , 10.13)
  3. (3.7 , 2.0 , 2.0 , 7.4.2 , 10.13)
  4. (3.8 , 2.0 , 2.0 , 7.4.2 , 10.13)
  5. (3.8 , 2.0 , 2.0 , 7.5.1 , 10.13)
  6. (3.8 , 2.1.5 , 2.0 , 7.5.1 , 10.13)
Respondent: ???

Solution #7:

None of the other answers worked to me. It all seems to be down to version compatibility. Finally got it working – see below.
All credit to @hainm on github (original link: https://github.com/jupyter-widgets/ipywidgets/issues/2488#issuecomment-509719214)
My SO answer on this: https://stackoverflow.com/a/60059786/1021819
Here is a straight copy of that answer:

Leveraging https://github.com/jupyter-widgets/ipywidgets/issues/2488#issuecomment-509719214, in a jupyterlab terminal – running on jupyterhub – execute:

pythonversion=3.7
labversion=0.34.12
labmanagerversion=0.37.4
ipywidgetsversion=7.4.2

conda install ipywidgets=$ipywidgetsversion -c conda-forge -y --override-channels -c main
conda install jupyterlab=$labversion  -y -c conda-forge --override-channels -c main
jupyter-labextension install @jupyter-widgets/[email protected]$labmanagerversion

At this point a jupyter lab clean; jupyter lab build might be of interest.

Then in a .ipynb notebook running in the same jupyterlab window, hit the restart kernel button.

IMPORTANT: Don’t forget to also REFRESH the browser page – or all efforts will have been in vain . :

Then execute the example:

from ipywidgets import interact

@interact(x=(0, 100, 10))
def p(x=50):
    pass

I never thought I would live to see the day but – hey presto – the widget finally appears!

The sad things are that the setup is extremely sensitive to the installation of other extensions and the combination of compatible versions is very specific.

enter image description here

Respondent: jtlz2

Solution #8:

If you’re on linux and you’d rather avoid conda entirely, and use virtual envs (venvs) to keep python happy, AND you happen to be using an ‘older’/LTS Debian based OS, which may not have upto date nodejs: Ie, Ubuntu 16.04 LTS, which doesn’t have a node but rather nodejs (node belongs to another package, and the ‘legacy nodejs’ version is too old), then read on.

This is a little more complicated to setup, but much easier to maintain long-term than conda is. (you can always just mk a new venv for a new project, without breaking your old projects).

Main points are:

  • use PPA’s to get fresh versions of the things you need
  • Use virtualenvwrapper so you can:
    • use up-to-date python3
    • avoid messing up your ‘pip install”s
    • avoid getting the system package manager confused
    • also easily work with people with different versions of python
    • follow python Best Practise
    • easily have different venvs which might have old or incompatible python and pip packages.
  • Use Nodejs binary distributions
    • need node.js version “10.x” for jupyterlab widgets
    • allows using the system’s package manager to keep nodejs fresh
    • will be maintained and available as long as LTS’s are

So, all actual steps (these were tested to work on Linux Mint 18.3 Sylvia, which is basically compatible with ubuntu xenial aka Ubuntu 16.04 LTS. Differences will arise mostly in nodejs, read the readme in the github link above to solve for other OS):

Get an admin to do (or do yourself if you can sudo):

sudo apt update
sudo apt install software-properties-common
sudo add-apt-repository ppa:deadsnakes/ppa
sudo apt update
sudo apt install -y python3.8 python3.8-dev python3.8-distutils python3-pip python3-venv
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

Then, as your own user, you can complete the rest of the steps:

pip3 install --user virtualenv virtualenvwrapper
mkdir ~/.envs

You’ll then want to add the following to the end of your .bashrc :

export PATH=~/.local/bin:$PATH
export WORKON_HOME=~/.envs
export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
source ~/.local/bin/virtualenvwrapper.sh

At this point, make a new shell, and you will be able to run the rest of the setup, actually installing jupyterlab:

mkvirtualenv -p python3.8 jupenv
pip install jupyter matplotlib pandas ipympl tqdm
jupyter labextension install @jupyter-widgets/jupyterlab-manager

Now you’re done.

To open/use jupyter, you want (because of the venv I’ve called jupenv above, you can name it as you like in that mkvirtualenv line):

workon jupenv
jupyter lab

Otherwise, I had no end of hell trying to get nodejs to work with outdated ubuntu packages. Sometimes it would work, for a few restarts, and then fail. Other times it would just keep giving me the same missing widgets, or sometimes little lines of junk js code.

Virtualenvs are well worth using, especially when you start using python seriously, and working with others who may use different versions / different sets of pip packages. VirtualEnvWrapper makes this pretty painless.
The basic point is that everything you ‘pip install’, even jupyter, ends up being kept cleanly separate (and separate from the system packages), which keeps everything working very nicely.

There are some basic DO’s and DON’T’s:

  • DON’T run pip install ... lines without being in a venv
  • DON’T use pip3 in place of pip within a venv.
  • DO just use python and not python3 to run within.
  • DON’T use conda...!
  • DO know that you can have all your virtualenvs updated at once with:
    • allvirtualenv pip install -U pip

As for the nodejs binary distribution packages: These are highly recommended where they support your particular OS. They’ll be very up-to-date and should present the minimum of trouble.

Respondent: RGD2

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.