feat: support for jupyterlab (#271)

- uses prebuilt js that can be distributed in python package
- swaps jquery ui to use version managed by the jquery ui team
- updates @jupyterlab-widgets/base to support newer versions (for jlab3)
- slightly tidied (?) the setup.py script

Author: zacharyrs

install.json

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

setup.py

@@ -10,31 +10,31 @@
     combine_commands, HERE, widgets_root
 )
 
-nb_path = pjoin(HERE, 'src', 'graph_notebook', 'widgets', 'nbextension', 'static')
-lab_path = pjoin(HERE, 'src', 'graph_notebook', 'widgets', 'labextension')
+nb_path = pjoin(widgets_root, 'nbextension')
+lab_path = pjoin(widgets_root, 'labextension')
 
 js_targets = [
     pjoin(nb_path, 'index.js'),
-    pjoin(HERE, 'src', 'graph_notebook', 'widgets', 'lib', 'plugin.d.ts')
+    pjoin(lab_path, 'package.json')
 ]
 
 package_data_spec = {
     'graph_notebook_widgets': [
-        'nbextension/static/*.*js*',
-        'labextension/*.tgz'
+        'nbextension/**js*',
+        'labextension/**'
     ]
 }
 
 data_files_spec = [
-    ('share/jupyter/nbextensions/graph_notebook_widgets',
-     nb_path, '*.js*'),
-    ('share/jupyter/lab/extensions', lab_path, '*.tgz'),
+    ('share/jupyter/nbextensions/graph_notebook_widgets', nb_path, '**'),
+    ('share/jupyter/labextensions/graph_notebook_widgets', lab_path, '**'),
+    ('share/jupyter/labextensions/graph_notebook_widgets', HERE, 'install.json'),
     ('etc/jupyter/nbconfig/notebook.d', HERE, 'graph_notebook_widgets.json')
 ]
 
 cmd_class = create_cmdclass('jsdeps', package_data_spec=package_data_spec, data_files_spec=data_files_spec)
 cmd_class['jsdeps'] = combine_commands(
-    install_npm(widgets_root, build_cmd='build:all'),
+    install_npm(widgets_root, build_cmd='build:prod'),
     ensure_targets(js_targets),
 )
 
@@ -88,8 +88,8 @@ def get_version():
         'markupsafe<2.1.0'
     ],
     package_data={
-        'graph_notebook': ['graph_notebook/widgets/nbextensions/static/*.js',
-                           'graph_notebook/widgets/labextension/*.tgz'],
+        'graph_notebook': ['graph_notebook/widgets/nbextensions/**',
+                           'graph_notebook/widgets/labextension/**'],
         '': ['*.ipynb', '*.html', '*.css', '*.js', '*.txt', '*.json', '*.ts', '*.css', '*.yaml', '*.md', '*.tgz']
     },
     cmdclass=cmd_class,

setupbase.py

@@ -384,7 +384,7 @@ def run(self):
 
             # ensure that __init__.py files are added to generated directories, otherwise it will not be packaged with
             # package distribution to pypi
-            dirs_from_node_path = ['nbextension', pjoin('nbextension', 'static'), 'lib', 'labextension']
+            dirs_from_node_path = ['nbextension', 'nbextension', 'lib', 'labextension']
             for init_path in dirs_from_node_path:
                 full_path = pjoin(node_package, init_path, '__init__.py')
                 with open(full_path, 'w+'):

src/graph_notebook/widgets/src/css/__init__.py renamed to src/graph_notebook/widgets/css/__init__.py

@@ -4,16 +4,17 @@
   "author": "amazon",
   "description": "A Custom Jupyter Library for rendering NetworkX MultiDiGraphs using vis-network",
   "dependencies": {
-    "@jupyter-widgets/base": "2.0.2",
+    "@jupyter-widgets/base": "^2 || ^3 || ^4",
     "feather-icons": "4.28.0",
-    "jquery": "3.5.1",
-    "jqueryui": "1.11.1",
+    "jquery": "3.6.0",
+    "jquery-ui": "1.13.1",
     "lodash": "4.17.21",
     "vis-data": "6.5.1",
     "vis-network": "7.6.3",
     "vis-util": "4.0.0"
   },
   "devDependencies": {
+    "@jupyterlab/builder": "^3.0.0",
     "@phosphor/application": "1.7.3",
     "@phosphor/widgets": "1.9.3",
     "@types/chai": "4.2.11",
@@ -62,7 +63,14 @@
     "css/*.css"
   ],
   "jupyterlab": {
-    "extension": "lib/plugin"
+    "extension": "lib/plugin",
+    "outputDir": "labextension",
+    "sharedPackages": {
+      "@jupyter-widgets/base": {
+        "bundled": false,
+        "singleton": true
+      }
+    }
   },
   "keywords": [
     "jupyter",
@@ -74,19 +82,23 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "build": "webpack -p",
+    "build": "npm run build:lib && npm run build:nbextension && npm run build:labextension:dev",
+    "build:prod": "npm run build:lib && npm run build:nbextension && npm run build:labextension",
+    "build:labextension": "jupyter labextension build .",
+    "build:labextension:dev": "jupyter labextension build --development True .",
     "build:lib": "tsc",
-    "build:labextension": "mkdirp labextension && cd labextension && npm pack ../",
-    "build:all": "npm run build && npm run build:labextension",
-    "clean": "rimraf dist && rimraf docs && rimraf lib && rimraf nbextension && rimraf labextension",
-    "dist": "npm run clean && npm run build:all",
-    "dev": "npm run clean && webpack -d --config webpack.dev.config.js",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}'",
-    "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
-    "test": "karma start karma.conf.js",
-    "start": "webpack-dev-server --config webpack.dev.config.js",
+    "build:nbextension": "webpack",
+    "clean": "npm run clean:lib && npm run clean:nbextension && npm run clean:labextension",
+    "clean:lib": "rimraf lib",
+    "clean:labextension": "rimraf labextension",
+    "clean:nbextension": "rimraf nbextension",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "lint:check": "eslint . --ext .ts,.tsx",
+    "prepack": "npm run build:lib",
+    "test": "jest",
     "watch": "npm-run-all -p watch:*",
     "watch:lib": "tsc -w",
-    "watch:nbextension": "webpack --watch"
+    "watch:nbextension": "webpack --watch --mode=development",
+    "watch:labextension": "jupyter labextension watch ."
   }
 }

src/graph_notebook/widgets/src/css/widget.css renamed to src/graph_notebook/widgets/css/widget.css

@@ -28,10 +28,11 @@ import { MODULE_NAME, MODULE_VERSION } from "./version";
 
 import feather from "feather-icons";
 import $ from "jquery";
-import "jqueryui";
+import "jquery-ui/ui/widgets/draggable";
+import "jquery-ui/ui/widgets/resizable";
 
 // Import the CSS
-import "./css/widget.css";
+import "../css/widget.css";
 import DraggableOptions = JQueryUI.DraggableOptions;
 import ResizableOptions = JQueryUI.ResizableOptions;
 

src/graph_notebook/widgets/package.json

@@ -37,6 +37,6 @@ const plugin: IPlugin<Application<Widget>, void> = {
   requires: [IJupyterWidgetRegistry],
   activate: activateWidgetExtension,
   autoStart: true,
-};
+} as unknown as IPlugin<Application<Widget>, void>;
 
 export default plugin;

src/graph_notebook/widgets/src/force_widget.ts

@@ -57,7 +57,7 @@ module.exports = [
     entry: "./src/extension.js",
     output: {
       filename: "extension.js",
-      path: path.resolve(__dirname, "nbextension", "static"),
+      path: path.resolve(__dirname, "nbextension"),
       libraryTarget: "var",
     },
     module: {
@@ -80,7 +80,7 @@ module.exports = [
     entry: "./src/extension.ts",
     output: {
       filename: "index.js",
-      path: path.resolve(__dirname, "nbextension", "static"),
+      path: path.resolve(__dirname, "nbextension"),
       // Using amd target without giving a library name requires the module being loaded by a RequireJS module loader.
       // See https://webpack.js.org/configuration/output/#outputlibrary and src/extension.js.
       libraryTarget: "amd",