2. Grader Labextension

Grader Labextension is a JupyterLab extension that allows users with the role of instructor/tutor to upload, monitor, and grade assignments for students. Students who are enrolled in a lecture that uses Jupyter as a service can work on their assignments, submit them, and view their scores.

• For detailed information on how to use Grader Labextension as an instructor, refer to the Instrucor Guide.
• For detailed information on how to use Grader Labextension as a student, refer to the Student Guide.

This extension is composed of a Python package named grader_labextension for the server extension and a NPM package named grader-labextension for the frontend extension.

To install Grader Labextension, make sure you have JupyterLab installed on your machine. (If you followed the Installation Guide, this requirement is already satisfied).

Requirements

JupyterHub>=4.0.0

Installation

To install Grader labextension, execute:

pip install grader_labextension

Uninstall

To remove Grader Labextension, execute:

pip uninstall grader_labextension

After a successful installation, you will be able to see two additional tabs (Assignments and Course Management) when running JupyterHub, provided you have the role of an instructor:

Users logged in as students only see additional Assignments card:

Troubleshoot

If you are seeing the frontend extension, but it is not working, check if 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 whether frontend extension is installed:

Development Installation

Warning

You will need NodeJS to build the extension package. Make sure you have installed all Requirements before building the extension package.

Note

The jlpm is Jupyterlab's pinned version of yarn that is installed with JupyterLab. You may use yarn or npm instead of jlpm if further steps.

• Navigate to grader_labextension directory and 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 development mode:

jupyter server extension enable grader_labextension

• Rebuild extension TypeScript source after making changes:

jlpm build

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 changes are made
jlpm watch
# Run JupyterHub instance 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 developer mode:

jupyter server extension disable grader_labextension
pip uninstall grader_labextension

• In developer mode, you will also need to remove the symlink created by jupyter labextension develop command. To find out where labextensions directory is located, run:

jupyter labextension list

• Now remove the symlink named grader-labextension within that folder.

Testing the extension

Server tests

This extension is using Pytest for python code test. To run them, execute:

pytest -vv -r ap --cov grader_labextension

Frontend tests

This extension is using Jest for JavaScript code testing.

To exectute tests, run following command line:

jlpm
jlpm test

Integration tests

Integration Tests are found in grader_labextension/ui-tests directory. This extension uses Playwright for integration (user-level tests). More precisely, the Jupyterlab helper Galata is used to handle testing extension in JupyterLab.

The Playwright configuration is found in playwright.config.js. The JupyterLab server configuration to use for the integration test is defined in jupyter_server_test_config.

Runing the tests

Note

All commands are executed from the root directory.

To run the tests, you need to:

1. Compile the extension:

jlpm install
jlpm build:prod

Make sure that extension is installed in Jupyterlab!

2. Install test dependencies (needed only once):

cd ./ui-tests
jlpm install
jlpm playwright install
cd ..

3. Execute the Playwright for integration (user-level tests). More precisely, the Jupyterlab helper Galata tests.

cd ./ui-tests
jlpm playwright test

The results will be shown in the terminal. In case of any test failures, the test report will be opened in your browser at the end of the tests execution. Refer to Playwright documentation for configuring that behaviour.

Update the tests snapshots

If you are comparing snapshots to validate your tests, you may need to update the reference snapshots stored in the repository. To do that, you need to:

1. Compile the extension:

jlpm install
jlpm build:prod

2. Install test dependencies (needed only once):

cd ./ui-tests
jlpm install
jlpm playwright install
cd ..

3. Execute Playwright command:

cd ./ui-tests
jlpm playwright test -u

Note

Some discrepancy may occurs between the snapshots generated on your computer and the one generated on the CI. To ease updating the snapshots on a PR, you can type please update playwright snapshots to trigger the update by a bot on the CI. Once the bot has computed new snapshots, it will commit them to the PR branch.

Create integration tests

1. Compile the extension:

jlpm install
jlpm build:prod

2. Install test dependencies (needed only once):

cd ./ui-tests
jlpm install
jlpm playwright install
cd ..

3. Start the server:

cd ./ui-tests
jlpm start

4. Execute the Playwright code generator in another terminal:

cd ./ui-tests
jlpm playwright codegen localhost:8888

Debugging integration tests

To debug tests, a good way is to use the Playwright inspector tool:

1. Compile the extension:

jlpm install
jlpm build:prod

2. Install test dependencies (needed only once):

cd ./ui-tests
jlpm install
jlpm playwright install
cd ..

3. Execute Playwright tests in debug mode:

cd ./ui-tests
jlpm playwright test --debug

Upgrade Playwright and the browsers

To update the web browser versions, you must update the package @playwright/test:

cd ./ui-tests
jlpm up "@playwright/test"
jlpm playwright install

Grader Labextension Release

The Grader Labextension can be published to PyPI and npm manually or using the Jupyter Releaser.

Manual release as Python package

This extension can be distributed as Python packages. All of the Python packaging instructions are in the pyproject.toml file to wrap your extension in a Python package. Before generating a package, you first need to install some tools:

Note

Following commands are executed from grader_labextension/ directory.

pip install build twine hatch

Bump the version using hatch. By default this will create a tag. See documentation of hatch-nodejs-version for more details.

hatch version <new-version>

Make sure to clean up all the development files before building the package:

jlpm clean:all

You also need to clean up the local git repository:

git clean -dfX

To create a Python source package (.tar.gz) and the binary package (.whl) in the dist/ directory, execute:

python -m build

Warning

python setup.py sdist bdist_wheel is deprecated and will not work for this package.

To upload the built package to PyPi, execute:

twine upload dist/*

Manual release as NPM package

To publish the frontend part of the extension as a NPM package, execute following commands:

npm login
npm publish --access public

Automated releases with Jupyter Releaser

The extension repository should already be compatible with the Jupyter Releaser.

For more information refer to Jupyter releaser workflow documentation.

Here is a summary of the steps to cut a new release:

1. Add ADMIN_GITHUB_TOKEN, PYPI_TOKEN and NPM_TOKEN to the GitHub Secrets in the repository
2. Go to the Actions panel
3. Run the "Step 1: Prep Release" workflow
4. Check the draft changelog
5. Run the "Step 2: Publish Release" workflow