Home

Custom Jupyter Widget

1. Run cookiecutter https://github.com/jupyter/widget-cookiecutter.git and fill out details

2. cd <npm_package_name> where npm_package_name is from the details in step 1

3. python setup.py build; pip install -e .

4. pip install -e .

5. jupyter nbextension install --py --symlink --sys-prefix <python_package_name>

6. jupyter nbextension enable --py --sys-prefix <python_package_name>

7. Must also install lab extension: cd js; jupyter labextension install .

8. Create python file and matching js file (expand on this) Coding the widget

after changes to javascript (otherwise changes do not get picked up):

1. jupyter nbextension uninstall --py --sys-prefix <python_package_name>

2. jupyter nbextension install --py --symlink --sys-prefix <python_package_name>

3. jupyter nbextension enable --py --sys-prefix <python_package_name>

4. jupyter lab clean; jupyter lab build

Must restart jupyter afterwards

Notes:

• require('vtk.js'); NOT var vtk = require('vtk.js'); BUT must use var $ = require('jquery');

• After mac crash /home/vagrant/.pyenv/versions/3.7.2/envs/py3/share/jupyter/lab/static/package.jon was empty. Run pip install --upgrade --no-deps --ignore-installed jupyterlab to get it back

• Must install @jupyter-widgets/controls in order to subclass widgets: npm install --save @jupyter-widgets/controls

• in widget js: let controls = require('@jupyter-widgets/controls');

• Must invoke super.render in this roundabout way (from Backbone.js): controls.<super class>.prototype.render.apply((this));

• When including multiple js files in jupyter package, embed.js and index.js should set exports thus:

module.exports = Object.assign(
    require('./<js file 1>.js'),
    require('./<js file 1>.js'),
    ...
);