vdk-jupyterlab-extension 0.1.931128384

A Jupyterlab extension for using VDK

vdk-jupyterlab-extension

A Jupyterlab extension for using VDK For more information see: https://github.com/vmware/versatile-data-kit/tree/main/specs/vep-994-jupyter-notebook-integration

This extension is composed of a Python package named vdk-jupyterlab-extension for the server extension and a NPM package named vdk-jupyterlab-extension for the frontend extension.

Requirements

• JupyterLab >= 3.0
• python ~=3.7
• Versatile Data Kit
• npm

Install and run

# install the extension
pip install vdk-jupyterlab-extension
# run jupyterlab
jupyter lab

Uninstall

To remove the extension, execute:

pip uninstall vdk-jupyterlab-extension

Troubleshoot

If you are seeing the frontend extension, but it is not working, check that the server extension is enabled:

jupyter server extension list

If the server extension is installed and enabled, but you are not seeing the frontend extension, check the frontend extension is installed:

jupyter labextension list

Contributing

Development install

Note: You will need NodeJS to build the extension package.

The jlpm command is JupyterLab's pinned version of yarn that is installed with JupyterLab. You may use yarn or npm in lieu of jlpm below.

# Clone the repo to your local environment
# Change directory to the vdk-jupyterlab-extension directory
# Once in the project directory, use the npm ci command to install
# the exact versions of the dependencies specified in the package-lock.json
npm ci
# Install package in development mode
pip install -e .
# Link your development version of the extension with JupyterLab
jupyter labextension develop . --overwrite
# Server extension must be manually installed in develop mode
jupyter server extension enable vdk-jupyterlab-extension
# Rebuild extension Typescript source after making changes
jlpm build

NB: If you're changing some dependencies of the project, meaning you're adding, removing, or updating packages, you'd use npm install.

You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.

# Watch the source directory in one terminal, automatically rebuilding when needed
jlpm watch
# Run JupyterLab in another terminal
jupyter lab

With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).

By default, the jlpm build command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:

jupyter lab build --minimize=False

Development uninstall

# Server extension must be manually disabled in develop mode
jupyter server extension disable vdk-jupyterlab-extension
pip uninstall vdk-jupyterlab-extension

In development mode, you will also need to remove the symlink created by jupyter labextension develop command. To find its location, you can run jupyter labextension list to figure out where the labextensions folder is located. Then you can remove the symlink named vdk-jupyterlab-extension within that folder.

Front-end extension

This extension uses JSX.

The components of the front-end extension are located in the /src directory. All the new UI elements are added there.

The main script for the extension is index.ts - this is where the front-end extension is loaded. In handlers.ts the connection with the server is done, while in serverRequests.ts all the requests are sent. In the subdirectory /components are located the JSX components that represent VDK menu elements. In the subdirectory /dataClasses are located the data classes responsible for saving the user input data for all the vdk operations.

Server extension

This extension uses Tordnado.

All the requests handlers are located in handlers.py file where the communication with the front-end is created.

The connection with VDK is done in the vdk_ui.py file - all the vdk operations are handled there.

Job data model

Follows the enum VdkOption from vdk_options.py.

In the front-end extension a global storage object (jobData), which holds the information about the current job, is present. It holds key value pairs, it's keys are generated automatically from the enum and the values of the keys are changed during vdk operations and after the operation ends they need to be set back to default.

For example, if we want to run a job we would set job path and arguments as: jobData.set(VdkOption.PATH, value) and jobData.set(VdkOption.ARGUMENTS, value) and after the operation has passed the values should be set back to default using setJobDataToDefault() function.

Every Jupyter instance has its own global storage object (jobData) that can only be changed from that instance. When a new Jupyter instance is loaded its jobData is set to default.

The enum is generated automatically from the python enum and shall not be changed directly in the .ts file. All the changes must be done in the python file and the .ts file will be automatically reloaded.

The front-end sends the data from jobData to the server extension in JSON format. In the server extension the JSON is loaded as input_data and the specific data can be accessed via the enum. For example, input_data[VdkOption.NAME.value] would return current job's name.

Testing the extension

Server tests

This extension is using Pytest for Python code testing.

Install test dependencies (needed only once):

pip install -e ".[test]"

To execute them, run:

pytest -vv -r ap --cov vdk-jupyterlab-extension

Frontend tests

This extension is using Jest for JavaScript code testing.

To execute them, execute:

jlpm
jlpm test

Integration tests

This extension uses Playwright for the integration tests (aka user level tests). More precisely, the JupyterLab helper Galata is used to handle testing the extension in JupyterLab.

More information are provided within the ui-tests README.