Make Your Own JupyterLab Extension
Presented by Roy Hyunjin Han of CrossCompute
for Data Umbrella on January 7, 2025
Presenter
Roy Hyunjin Han
My mission is to inspire people to make tools that improve health, safety, quality of life.
Presenter
CrossCompute
Share Runnable Tools
CrossCompute Product History
| Years | Product | Framework | License |
|---|---|---|---|
| 2015-2022 | CrossCompute Framework | Pyramid | Open Source (MIT) |
| 2023-Now | CrossCompute Analytics SDK | FastAPI | Open Source (MIT) |
| Years | Product | Framework | License |
|---|---|---|---|
| 2017-2018 | CrossCompute Notebook Extensions | Jupyter Notebook | Open Source (MIT) |
| 2021-Now | CrossCompute JupyterLab Extensions | JupyterLab | Open Source (MIT) |
Host Runnable Tools (Single Machine)
Develop Runnable Tools
Host Runnable Tools (Distributed Machines)
Host Runnable Tools (Peer to Peer)
| Years | Product | Framework | License |
|---|---|---|---|
| ? | ? | ? | ? |
CrossCompute Product History
| Years | Product | Framework | License |
|---|---|---|---|
| 2015-2022 | CrossCompute Framework | Pyramid | Open Source (MIT) |
| 2023-Now | CrossCompute Analytics SDK | FastAPI | Open Source (MIT) |
| Years | Product | Framework | License |
|---|---|---|---|
| 2017-2018 | CrossCompute Notebook Extensions | Jupyter Notebook | Open Source (MIT) |
| 2021-Now | CrossCompute JupyterLab Extensions | JupyterLab | Open Source (MIT) |
Host Runnable Tools (Single Machine)
Develop Runnable Tools
Host Runnable Tools (Distributed Machines)
Host Runnable Tools (Peer to Peer)
| Years | Product | Framework | License |
|---|---|---|---|
| ? | ? | ? | ? |
crosscompute.com
Today's Tools
Try Different JupyterLab Extensions
https://crosscompute.net/a/try-jupyterlab-rtc
Try our CrossCompute JupyterLab Extension
https://crosscompute.net/a/try-crosscompute-sdk
Start a Command Line Session for Pair Programming
https://crosscompute.com/t/pair-program
Make Your Own JupyterLab Extension
➤ Notebook vs JupyterLab
Useful Extensions
Make an Extension
Resources
Notebook vs JupyterLab
- Interactive Programming
- Faster Mini Iterations
- Great for Prototyping
- Exploratory Data Analysis
IPython (2001 - Now)
IPython Notebook (2011-2013)
Jupyter Notebook (2014 - Now)
JupyterLab (2018 - Now)
Left Sidebar
Right Sidebar
Main Work Area
Minimap (v4.3)
Workspaces (v4.2)
Diagrams in Markdown (v4.1)
Inline Completer (v4.1)
Real Time Collaboration (v3, v4)
Dark Theme (v0)
Extensions (v0)
Framework :: Jupyter :: JupyterLab :: Extensions :: Prebuilt
pip install jupyterlab
CTRL-ENTER
SHIFT-ENTER
ALT-ENTER
Code Cells, Markdown Cells
TAB
SHIFT-TAB
0 0
CTRL-SHIFT--
SHIFT-m
ESC a
ESC b
ESC m
ESC y
CTRL-z
CTRL-SHIFT-z
CTRL-SHIFT-c
CTRL-/
➤ Lint code
Diff
➤ pip install nbdime
nbdime extensions --enable
Lint code quality
Debug
➤ pip install xeus-python
Diff
pip install nbdime
Lint code quality
Make Your Own JupyterLab Extension
Notebook vs JupyterLab
➤ Useful Extensions
Make an Extension
Resources
Try Different Extensions Now
Extensions: Plotting
Extensions: Publishing
Extensions: Code
Extensions: Repository
Extensions: Data
Extensions: Deployment
Make Your Own JupyterLab Extension
Notebook vs JupyterLab
Useful Extensions
➤ Make an Extension
Resources
Make an Extension
Work incrementally
Make an Extension
Make an Extension
Notable Examples
extension-examples/commands
extension-examples/signals
extension-examples/react-widget
git clone https://github.com/jupyterlab/extension-examples
cd extension-examples/signals
pip install -e .
jupyter labextension develop . --overwrite
jlpm run build
Entrypoints
src/index.ts
PACKAGE/handlers.py
jupyter lab
Make an Extension
SEVEN MINUTES!!
Make an Extension
pip install "copier~=9.2" jinja2-time
mkdir myextension; cd myextension
copier copy --trust \
https://github.com/jupyterlab/extension-template .
pip install -e .[test]
jupyter labextension develop . --overwrite
jupyter server extension enable myextension
jlpm build
jlpm watch
jupyter lab --auto-reload
Make an Extension
Add right sidebar
Make an Extension
Add right sidebar
Listen for events in shell
Make an Extension
Add right sidebar
Listen for events in shell
Make an Extension
Add right sidebar
Listen for events in shell
Make an Extension
Add right sidebar
Listen for events in shell
Listen for events in file browser
Make an Extension
Add right sidebar with icon
Listen for events in shell
Listen for events in file browser
Open file in shell
Make an Extension
Add right sidebar with icon
Listen for events in shell
Listen for events in file browser
Open file in shell
Add button to call server
Make an Extension
git clone https://github.com/jupyterlab/jupyterlab
cd jupyterlab/packages
# grep -InR FileBrowser *
# vim $(grep -InR FileBrowser * -l)
grep- FileBrowser
vimgrep- FileBrowser
Make Your Own JupyterLab Extension
Notebook vs JupyterLab
Useful Extensions
Make an Extension
➤ Resources
Resources
Thank you to Abdourahamane Issaka Sani and Reshama Shaikh