Add a lab extension to display memory usage

.github/workflows/build.yml

@@ -0,0 +1,41 @@
+name: Build
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: '*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Install node
+      uses: actions/setup-node@v1
+      with:
+       node-version: '14.x'
+
+    - name: Install Python
+      uses: actions/setup-python@v2
+      with:
+        python-version: '3.7'
+        architecture: 'x64'
+
+    - name: Install dependencies
+      run: python -m pip install jupyterlab --pre
+
+    - name: Build the extension
+      run: |
+        python -m pip install .
+
+        jupyter labextension list 2>&1 | grep -ie "@jupyter-server/resource-usage.*OK"
+        python -m jupyterlab.browser_check
+
+    - name: Lint
+      run: |
+        cd packages/labextension/
+        jlpm
+        jlpm run lint:check

.gitignore

@@ -31,3 +31,13 @@ var/
 .vscode
 *.code-workspace
 .history
+
+# Labextension
+*.bundle.*
+lib/
+node_modules/
+*.egg-info/
+.ipynb_checkpoints
+*.tsbuildinfo
+nbresuse/labextension
+yarn-error.log

CONTRIBUTING.md

@@ -6,71 +6,142 @@ you can follow the [Jupyter contributor guide](https://jupyter.readthedocs.io/en
 Make sure to also follow [Project Jupyter's Code of Conduct](https://github.com/jupyter/governance/blob/master/conduct/code_of_conduct.md)
 for a friendly and welcoming collaborative environment.
 
-## Development set up
+## Setting up a development environment
 
 We recommend using [pipenv](https://docs.pipenv.org/) to make development easier.
 
-1. Clone the git repository:
+Alternatively, you can also use `conda` or `mamba` to create new virtual environments.
 
-   ```bash
-   git clone https://github.com/yuvipanda/nbresuse
-   ```
+Clone the git repository:
 
-2. Create an environment that will hold our dependencies.
+```bash
+git clone https://github.com/yuvipanda/nbresuse
+```
+
+Create an environment that will hold our dependencies:
+
+```bash
+cd nbresuse
+pipenv --python 3.6
+```
 
-   ```bash
-   cd nbresuse
-   pipenv --python 3.6
-   ```
+With conda:
 
-3. Activate the virtual environment that pipenv created for us
+```bash
+conda create -n nbresuse -c conda-forge python
+```
 
-   ```bash
-   pipenv shell
-   ```
+Activate the virtual environment that pipenv created for us
 
-4. Do a dev install of nbresuse and its dependencies
+```bash
+pipenv shell
+```
 
-   ```bash
-   pip install --editable .[dev]
-   ```
+With conda:
 
-5. Install and enable the nbextension for use with Jupyter Classic Notebook.
+```bash
+conda activate nbresuse
+```
 
-   ```bash
-   jupyter nbextension install --py nbresuse --symlink --sys-prefix
-   jupyter serverextension enable --py nbresuse  --sys-prefix
-   jupyter nbextension enable --py nbresuse --sys-prefix
-   ```
+Do a dev install of nbresuse and its dependencies
 
-6. Start a Jupyter Notebook instance, open a new notebook and check out the memory usage
-   in the top right!
+```bash
+pip install --editable .[dev]
+```
 
-   ```bash
-   jupyter notebook
-   ```
+Enable the server extension:
 
-7. If you want to test the memory limit display functionality, you can do so by setting
-   the `MEM_LIMIT` environment variable (in bytes) when starting `jupyter notebook`.
+```bash
+jupyter serverextension enable --py nbresuse  --sys-prefix
+```
 
-   ```bash
-   MEM_LIMIT=$(expr 128 \* 1024 \* 1024) jupyter notebook
-   ```
+*Note: if you're using Jupyter Server:*
 
-8. NBResuse has adopted automatic code formatting so you shouldn't
-need to worry too much about your code style.
+```bash
+jupyter server extension enable --py nbresuse  --sys-prefix
+```
+
+## Classic notebook extension
+
+Install and enable the nbextension for use with Jupyter Classic Notebook.
+
+```bash
+jupyter nbextension install --py nbresuse --symlink --sys-prefix
+jupyter nbextension enable --py nbresuse --sys-prefix
+```
+
+Start a Jupyter Notebook instance, open a new notebook and check out the memory usage in the top right!
+
+```bash
+jupyter notebook
+```
+
+If you want to test the memory limit display functionality, you can do so by setting the `MEM_LIMIT` environment variable (in bytes) when starting `jupyter notebook`.
+
+```bash
+MEM_LIMIT=$(expr 128 \* 1024 \* 1024) jupyter notebook
+```
+
+## JupyterLab extension
+
+The JupyterLab extension for `nbresuse` was bootstrapped from the [extension cookiecutter](https://github.com/jupyterlab/extension-cookiecutter-ts), and follows the common patterns and tooling for developing extensions.
+
+```bash
+# activate the environment (conda, pipenv)
+
+# install the package in development mode
+python -m pip install -e ".[dev]"
+
+# link your development version of the extension with JupyterLab
+jupyter labextension develop . --overwrite
+
+# go to the labextension directory
+cd labextension/
+
+# Rebuild extension Typescript source after making changes
+jlpm run 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.
+
+```bash
+# Watch the source directory in one terminal, automatically rebuilding when needed
+jlpm run 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).
+
+To check the extension is correctly installed, run:
+
+```bash
+jupyter labextension list
+```
+
+It should show something like the following:
+
+```bash
+JupyterLab v3.0.0
+/path/to/env/share/jupyter/labextensions
+        nbresuse v0.1.0 enabled OK
+```
+
+## pre-commit
+
+`nbresuse` has adopted automatic code formatting so you shouldn't need to worry too much about your code style.
 As long as your code is valid,
 the pre-commit hook should take care of how it should look. Here is how to set up pre-commit hooks for automatic code formatting, etc.
 
-    ```bash
-    pre-commit install
-    ```
+```bash
+pre-commit install
+```
 
-    You can also invoke the pre-commit hook manually at any time with
+You can also invoke the pre-commit hook manually at any time with
 
-    ```bash
-    pre-commit run
-    ```
+```bash
+pre-commit run
+```
 
 which should run any autoformatting on your code
 and tell you about any errors it couldn't fix automatically.
@@ -82,11 +153,11 @@ hook with `pre-commit install`, you can fix everything up using
 `pre-commit run --all-files`.  You need to make the fixing commit
 yourself after that.
 
-9. It's a good idea to write tests to exercise any new features,
-or that trigger any bugs that you have fixed to catch regressions. `pytest` is used to run the test suite. You can run the tests with:
+## Tests
+
+It's a good idea to write tests to exercise any new features,
+or that trigger any bugs that you have fixed to catch regressions. `pytest` is used to run the test suite. You can run the tests with in the repo directory:
 
 ```bash
 python -m pytest -vvv nbresuse
 ```
-
-in the repo directory.

MANIFEST.in

@@ -1 +1,22 @@
 include LICENSE
+
+include README.md
+include pyproject.toml
+include package.json
+include install.json
+include ts*.json
+
+graft nbresuse/labextension
+
+# Javascript files
+graft src
+graft style
+prune **/node_modules
+prune lib
+
+# Patterns to exclude from any directory
+global-exclude *~
+global-exclude *.pyc
+global-exclude *.pyo
+global-exclude .git
+global-exclude .ipynb_checkpoints

install.json

@@ -0,0 +1,5 @@
+{
+  "packageManager": "python",
+  "packageName": "nbresuse",
+  "uninstallInstructions": "Use your Python package manager (pip, conda, etc.) to uninstall the package nbresuse"
+}

nbresuse/__init__.py

@@ -1,3 +1,6 @@
+import json
+import os.path as osp
+
 from notebook.utils import url_path_join
 from tornado import ioloop
 
@@ -6,6 +9,15 @@
 from nbresuse.metrics import PSUtilMetricsLoader
 from nbresuse.prometheus import PrometheusHandler
 
+HERE = osp.abspath(osp.dirname(__file__))
+
+with open(osp.join(HERE, "labextension", "package.json")) as fid:
+    data = json.load(fid)
+
+
+def _jupyter_labextension_paths():
+    return [{"src": "labextension", "dest": data["name"]}]
+
 
 def _jupyter_server_extension_paths():
     """

packages/labextension/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+coverage
+**/*.d.ts
+tests

packages/labextension/.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: true,
+        },
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/quotes': [
+      'error',
+      'single',
+      { avoidEscape: true, allowTemplateLiterals: false },
+    ],
+    curly: ['error', 'all'],
+    eqeqeq: 'error',
+    'prefer-arrow-callback': 'error',
+  },
+};

packages/labextension/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+**/node_modules
+**/lib
+**/package.json

packages/labextension/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}