Feature/use widget in colab

.gitignore

@@ -18,6 +18,7 @@ eggs/
 .eggs/
 lib/
 lib64/
+nbsv/static
 parts/
 sdist/
 var/

README.md

@@ -15,21 +15,13 @@ You can install using `pip`:
 pip install nbsv
 ```
 
-If you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
-the nbextension:
-```bash
-jupyter nbextension enable --py [--sys-prefix|--user|--system] nbsv
-```
-
 ## Development Installation
 
 Create a dev environment:
 ```bash
-conda create -n nbsv -c conda-forge yarn python jupyterlab=3.6.4
+conda create -n nbsv -c conda-forge yarn python=3.9 jupyterlab notebook
 conda activate nbsv
-nvm use 18
 ```
-Note: make sure you are using the node managed by nvm and not in your conda env by checking `which node`
 
 Install and build:
 ```bash
@@ -52,6 +44,8 @@ jupyter lab
 
 After a change wait for the build to finish and then refresh your browser and the changes should take effect.
 
+The viewer widget is also compatible with Jupyter Notebook, so that can be used for development instead if preferred over JupyterLab.
+
 #### Python:
 If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
 

build.sh

@@ -1,16 +1,5 @@
 # Install the python. This will also build the TS package.
 pip install -e '.[test, examples]'
 
-# For classic notebook, you need to run:
-jupyter nbextension install --py --overwrite --symlink --sys-prefix nbsv
-jupyter nbextension enable --py --sys-prefix nbsv
-# Note that the `--symlink` flag doesn't work on Windows, so you will here have to run
-# the `install` command every time that you rebuild your extension. For certain installations
-# you might also need another flag instead of `--sys-prefix`, but we won't cover the meaning
-# of those flags here.
-
-# When developing your extensions, you need to manually enable your extensions with the
-# notebook / lab frontend. For lab, this is done by the command:
-jupyter labextension develop --overwrite .
 yarn clean
 yarn build

docs/source/conf.py

@@ -181,7 +181,7 @@
 
 
 # Example configuration for intersphinx: refer to the Python standard library.
-intersphinx_mapping = {'https://docs.python.org/': None}
+intersphinx_mapping = {'python': ('https://docs.python.org/3', None)}
 
 # Read The Docs
 # on_rtd is whether we are on readthedocs.org, this line of code grabbed from

nbsv/__init__.py

@@ -7,43 +7,3 @@
 from .viewer import ViewerWidget
 from ._version import __version__, version_info
 
-def _jupyter_labextension_paths():
-    """Called by Jupyter Lab Server to detect if it is a valid labextension and
-    to install the widget
-    Returns
-    =======
-    src: Source directory name to copy files from. Webpack outputs generated files
-        into this directory and Jupyter Lab copies from this directory during
-        widget installation
-    dest: Destination directory name to install widget files to. Jupyter Lab copies
-        from `src` directory into <jupyter path>/labextensions/<dest> directory
-        during widget installation
-    """
-    return [{
-        'src': 'labextension',
-        'dest': 'nbsv',
-    }]
-
-
-def _jupyter_nbextension_paths():
-    """Called by Jupyter Notebook Server to detect if it is a valid nbextension and
-    to install the widget
-    Returns
-    =======
-    section: The section of the Jupyter Notebook Server to change.
-        Must be 'notebook' for widget extensions
-    src: Source directory name to copy files from. Webpack outputs generated files
-        into this directory and Jupyter Notebook copies from this directory during
-        widget installation
-    dest: Destination directory name to install widget files to. Jupyter Notebook copies
-        from `src` directory into <jupyter path>/nbextensions/<dest> directory
-        during widget installation
-    require: Path to importable AMD Javascript module inside the
-        <jupyter path>/nbextensions/<dest> directory
-    """
-    return [{
-        'section': 'notebook',
-        'src': 'nbextension',
-        'dest': 'nbsv',
-        'require': 'nbsv/extension'
-    }]

nbsv/viewer.py

@@ -7,8 +7,9 @@
 """
 TODO: Add module docstring
 """
-import ipywidgets
+import anywidget
 import numpy as np
+import pathlib
 from simulariumio import (
     TrajectoryData,
     TrajectoryConverter,
@@ -21,17 +22,11 @@
 )
 from traitlets import Unicode, Int, Instance
 from typing import List, Dict
-from ._frontend import module_name, module_version
 
 
-@ipywidgets.register
-class ViewerWidget(ipywidgets.DOMWidget):
-    _model_name = Unicode("TrajectoryModel").tag(sync=True)
-    _model_module = Unicode(module_name).tag(sync=True)
-    _model_module_version = Unicode(module_version).tag(sync=True)
-    _view_name = Unicode("Viewport").tag(sync=True)
-    _view_module = Unicode(module_name).tag(sync=True)
-    _view_module_version = Unicode(module_version).tag(sync=True)
+class ViewerWidget(anywidget.AnyWidget):
+    _esm = pathlib.Path(__file__).parent / "static" / "widget.js"
+    _css = pathlib.Path(__file__).parent / "static" / "widget.css"
     trajectory = Instance(TrajectoryData)
     converter = Instance(TrajectoryConverter)
     trajectory_str = Unicode("").tag(sync=True)
@@ -54,7 +49,7 @@ def __init__(self, trajectory: TrajectoryData, width: int = 500, height: int = 3
             Height of the simularium viewer widget
             Default: 300
         """
-        super(ipywidgets.DOMWidget, self).__init__()
+        super().__init__()
         self.width = width
         self.height = height
         self.load_trajectory(trajectory)

package.json

@@ -5,7 +5,6 @@
   "keywords": [
     "jupyter",
     "jupyterlab",
-    "jupyterlab-extension",
     "widgets"
   ],
   "files": [
@@ -29,86 +28,44 @@
     "url": "https://github.com/simularium/nbsv"
   },
   "scripts": {
-    "build": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension:dev",
-    "build:prod": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension",
-    "build:labextension": "jupyter labextension build .",
-    "build:labextension:dev": "jupyter labextension build --development True .",
-    "build:lib": "tsc",
-    "build:nbextension": "webpack",
-    "clean": "yarn run clean:lib && yarn run clean:nbextension && yarn run clean:labextension",
-    "clean:lib": "rimraf lib",
-    "clean:labextension": "rimraf nbsv/labextension",
-    "clean:nbextension": "rimraf nbsv/nbextension/static/index.js",
+    "build": "esbuild src/widget.tsx --bundle --minify --format=esm --outdir=./nbsv/static",
+    "clean": "rimraf nbsv/static",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "lint:check": "eslint . --ext .ts,.tsx",
-    "prepack": "yarn run build:lib",
     "test": "yarn jest --runInBand",
-    "watch": "npm-run-all -p watch:lib watch:nbextension watch:labextension",
-    "watch:lib": "tsc -w",
-    "watch:nbextension": "webpack --watch --mode=development",
-    "watch:labextension": "jupyter labextension watch ."
+    "watch": "yarn run build --sourcemap=inline --watch"
   },
   "dependencies": {
-    "@aics/simularium-viewer": "^3.7.0",
-    "@ant-design/icons": "4.0.0",
-    "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4 || ^5 || ^6",
-    "antd": "^5.4.2",
-    "crypto": "1.0.1",
-    "jest-cli": "^29.7.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@aics/simularium-viewer": "^3.9.1",
+    "@anywidget/react": "^0.0.8",
+    "@jupyter-widgets/base": "^6.0.10",
+    "antd": "^5.22.1",
+    "classnames": "^2.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "uuid": "^11.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",
     "@babel/plugin-transform-runtime": "^7.21.4",
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@jest/globals": "^29.5.0",
-    "@jupyter-widgets/base-manager": "^1.0.2",
-    "@jupyterlab/builder": "^3.6.4",
-    "@lumino/application": "^2.1.0",
-    "@lumino/domutils": "^2.0.0",
-    "@lumino/widgets": "^2.1.0",
     "@types/jest": "^29.5.0",
-    "@types/react": "^18.0.34",
-    "@types/react-dom": "^18.0.11",
-    "@types/webpack-env": "^1.13.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^6",
     "@typescript-eslint/parser": "^6",
-    "acorn": "^7.2.0",
-    "babel-loader": "^9.1.2",
     "babel-plugin-transform-import-meta": "^2.2.0",
-    "browser-env": "^3.3.0",
-    "css-loader": "^3.2.0",
+    "esbuild": "0.24.0",
     "eslint": "^7.4.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "fs-extra": "^7.0.0",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jsdom-global": "^3.0.2",
-    "mkdirp": "^0.5.1",
-    "npm-run-all": "^4.1.3",
     "prettier": "^2.0.5",
     "rimraf": "^2.6.2",
-    "source-map-loader": "^1.1.3",
-    "style-loader": "^1.0.0",
     "ts-jest": "^29.1.0",
-    "ts-loader": "^8.0.0",
-    "typescript": "^5.0.4",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^5.1.3"
-  },
-  "jupyterlab": {
-    "extension": "lib/plugin",
-    "outputDir": "nbsv/labextension/",
-    "sharedPackages": {
-      "@jupyter-widgets/base": {
-        "bundled": false,
-        "singleton": true
-      }
-    }
+    "typescript": "^5.6.3"
   }
 }