Build using JupyterLab 4 (#543)

* Build using JupyterLab 4

* Exclude figure captions from image comparison tests

.binder/environment.yml

@@ -4,7 +4,6 @@ channels:
 dependencies:
   - yarn
   - numpy
-  - jupyterlab>=3,<4
+  - jupyterlab~=4.0
   - retrolab
   - matplotlib-base>=2.2.2
-  - jupyter-packaging=0.7

.github/workflows/main.yml

@@ -92,16 +92,15 @@ jobs:
 
       - name: Test installation files
         run: |
+          ls -l $CONDA_PREFIX/share/jupyter/nbextensions/jupyter-matplotlib
           test -d $CONDA_PREFIX/share/jupyter/nbextensions/jupyter-matplotlib
           test -f $CONDA_PREFIX/share/jupyter/nbextensions/jupyter-matplotlib/extension.js
           test -f $CONDA_PREFIX/share/jupyter/nbextensions/jupyter-matplotlib/index.js
+          ls -l $CONDA_PREFIX/share/jupyter/labextensions/jupyter-matplotlib
           test -d $CONDA_PREFIX/share/jupyter/labextensions/jupyter-matplotlib
           test -f $CONDA_PREFIX/share/jupyter/labextensions/jupyter-matplotlib/package.json
           test -d $CONDA_PREFIX/share/jupyter/labextensions/jupyter-matplotlib/static
 
-      - name: Validate the nbextension
-        run: jupyter nbextension list 2>&1 | grep "jupyter-matplotlib/extension"
-
       - name: Validate the labextension
         run: jupyter labextension list 2>&1 | grep jupyter-matplotlib
 
@@ -115,21 +114,9 @@ jobs:
           jlpm playwright install chromium
         working-directory: ui-tests
 
-      - name: Launch JupyterLab
-        if: matrix.os == 'ubuntu'
-        run: jlpm start:detached
-        working-directory: ui-tests
-
-      - name: Wait for JupyterLab
-        if: matrix.os == 'ubuntu'
-        uses: ifaxity/wait-on-action@v1
-        with:
-          resource: http-get://localhost:8888/api
-          timeout: 20000
-
       - name: Run UI Tests
         if: matrix.os == 'ubuntu'
-        run: jlpm test
+        run: jlpm playwright test
         working-directory: ui-tests
 
       - name: Upload UI Test artifacts

.yarnrc.yml

@@ -0,0 +1,3 @@
+compressionLevel: mixed
+enableGlobalCache: false
+nodeLinker: node-modules

dev-environment.yml

@@ -3,8 +3,8 @@ channels:
     - conda-forge
 dependencies:
     - pip
-    - yarn
-    - jupyterlab=3
+    - yarn~=3.0
+    - jupyterlab~=4.0
     - ipywidgets>=7.6
     - pillow
     - numpy

package.json

@@ -53,33 +53,43 @@
     "devDependencies": {
         "@babel/core": "^7.5.0",
         "@babel/preset-env": "^7.5.0",
-        "@jupyterlab/builder": "^3.0.0",
+        "@jupyterlab/builder": "^4.0.0",
+        "@jupyterlab/testutils": "^4.0.0",
         "@phosphor/application": "^1.6.0",
         "@phosphor/widgets": "^1.6.0",
-        "@types/jest": "^26.0.0",
+        "@types/jest": "^29.2.0",
+        "@types/json-schema": "^7.0.11",
         "@types/lodash": "^4.14.202",
+        "@types/react": "^18.0.26",
+        "@types/react-addons-linked-state-mixin": "^0.14.22",
         "@types/webpack-env": "^1.13.6",
-        "@typescript-eslint/eslint-plugin": "^3.6.0",
-        "@typescript-eslint/parser": "^3.6.0",
+        "@typescript-eslint/eslint-plugin": "^6.1.0",
+        "@typescript-eslint/parser": "^6.1.0",
         "acorn": "^7.2.0",
-        "css-loader": "^3.2.0",
-        "eslint": "^7.4.0",
-        "eslint-config-prettier": "^6.11.0",
-        "eslint-plugin-prettier": "^3.1.4",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0",
         "fs-extra": "^7.0.0",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^26.0.0",
+        "jest": "^29.2.0",
         "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",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.0.0",
+        "rimraf": "^5.0.1",
+        "source-map-loader": "^1.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-csstree-validator": "^3.0.0",
+        "stylelint-prettier": "^4.0.0",
         "ts-jest": "^26.0.0",
         "ts-loader": "^8.0.0",
-        "typescript": "^4.0.0",
+        "typescript": "~5.0.2",
         "webpack": "^5.61.0",
-        "webpack-cli": "^4.0.0"
+        "webpack-cli": "^4.0.0",
+        "yjs": "^13.5.40"
     },
     "dependencies": {
         "@jupyter-widgets/base": "^2 || ^3 || ^4 || ^5 || ^6",

pyproject.toml

@@ -1,7 +1,8 @@
 [build-system]
 requires = [
     "hatchling",
-    "jupyterlab>=3.0.0,==3.*",
+    "jupyterlab==4.*",
+    "hatch-nodejs-version>=0.3.2",
 ]
 build-backend = "hatchling.build"
 
@@ -22,8 +23,17 @@ keywords = [
 classifiers = [
     "Development Status :: 4 - Beta",
     "Framework :: IPython",
+    "Framework :: Jupyter",
+    "Framework :: Jupyter :: JupyterLab",
+    "Framework :: Jupyter :: JupyterLab :: 3",
+    "Framework :: Jupyter :: JupyterLab :: 4",
+    "Framework :: Jupyter :: JupyterLab :: Extensions",
+    "Framework :: Jupyter :: JupyterLab :: Extensions :: Prebuilt",
     "Intended Audience :: Developers",
     "Intended Audience :: Science/Research",
+    "License :: OSI Approved :: BSD License",
+    "Programming Language :: Python",
+    "Programming Language :: Python :: 3",
     "Programming Language :: Python :: 3.9",
     "Programming Language :: Python :: 3.10",
     "Programming Language :: Python :: 3.11",
@@ -39,6 +49,7 @@ dependencies = [
     "pillow",
     "traitlets<6",
 ]
+requires-python = ">=3.9"
 version = "0.9.3"
 
 [project.optional-dependencies]
@@ -66,7 +77,7 @@ artifacts = [
 [tool.hatch.build.targets.wheel.shared-data]
 "ipympl/nbextension" = "share/jupyter/nbextensions/jupyter-matplotlib"
 "ipympl/labextension" = "share/jupyter/labextensions/jupyter-matplotlib"
-"./jupyter-matplotlib.json" = "etc/jupyter/nbconfig/notebook.d/jupyter-matplotlib.json"
+"jupyter-matplotlib.json" = "etc/jupyter/nbconfig/notebook.d/jupyter-matplotlib.json"
 
 [tool.hatch.build.targets.sdist]
 exclude = [

ui-tests/jupyter_server_config.py

@@ -1,10 +1,12 @@
-from tempfile import mkdtemp
+"""Server configuration for integration tests.
 
-c.ServerApp.port = 8888  # noqa
-c.ServerApp.token = ""  # noqa
-c.ServerApp.password = ""  # noqa
-c.ServerApp.disable_check_xsrf = True  # noqa
-c.ServerApp.open_browser = False  # noqa
-c.ServerApp.root_dir = mkdtemp(prefix='galata-test-')  # noqa
+!! Never use this configuration in production because it
+opens the server to the world and provide access to JupyterLab
+JavaScript objects through the global window variable.
+"""
+from jupyterlab.galata import configure_jupyter_server
 
-c.LabApp.expose_app_in_browser = True  # noqa
+configure_jupyter_server(c)  # noqa F821
+
+# Uncomment to set server log level to debug level
+# c.ServerApp.log_level = "DEBUG"

ui-tests/package.json

@@ -5,17 +5,15 @@
   "private": true,
   "scripts": {
     "start": "jupyter lab --config ./jupyter_server_config.py",
-    "start:detached": "jlpm start&",
-    "test": "playwright test",
-    "test:debug": "PWDEBUG=1 playwright test",
-    "test:report": "http-server ./playwright-report -a localhost -o",
-    "test:update": "playwright test --update-snapshots"
+    "test": "jlpm playwright test",
+    "test:debug": "PWDEBUG=1 jlpm playwright test",
+    "test:update": "jlpm playwright test --update-snapshots"
   },
   "author": "ipympl",
   "license": "Apache-2.0",
-  "dependencies": {
-    "@jupyterlab/galata": "~4.5.0",
-    "@playwright/test": "^1.16.2",
+  "devDependencies": {
+    "@jupyterlab/galata": "^5.0.5",
+    "@playwright/test": "^1.37.0",
     "klaw-sync": "^6.0.0",
     "rimraf": "^3.0.2"
   }

ui-tests/playwright.config.js

@@ -1,7 +1,14 @@
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
 const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
 
 module.exports = {
   ...baseConfig,
-  timeout: 600000,
-  retries: 1,
+  webServer: {
+    command: 'jlpm start',
+    url: 'http://localhost:8888/lab',
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI
+  }
 };

ui-tests/tests/notebooks/ipympl.ipynb

@@ -12,12 +12,14 @@
     "import matplotlib.pyplot as plt\n",
     "import numpy as np\n",
     "\n",
-    "fig = plt.figure()\n",
-    "plt.plot(np.sin(np.linspace(0, 20, 100)))\n",
+    "fig, ax = plt.subplots()\n",
     "\n",
     "# Remove text to avoid tiny differences in rendered output.\n",
     "from matplotlib.testing.decorators import remove_ticks_and_titles\n",
-    "remove_ticks_and_titles(fig)"
+    "remove_ticks_and_titles(fig)\n",
+    "fig.canvas.header_visible = False\n",
+    "\n",
+    "ax.plot(np.sin(np.linspace(0, 20, 100)));"
    ]
   },
   {
@@ -29,27 +31,6 @@
    "source": [
     "fig.canvas"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "9018cb24",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "fig.canvas.toolbar_visible = False\n",
-    "fig.canvas"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "46af41c8",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "display(fig)"
-   ]
   }
  ],
  "metadata": {

ui-tests/tests/notebooks/ipympl_update.ipynb

@@ -12,12 +12,14 @@
     "import matplotlib.pyplot as plt\n",
     "import numpy as np\n",
     "\n",
-    "fig = plt.figure()\n",
-    "plt.plot(np.sin(np.linspace(0, 20, 100)))\n",
+    "fig, ax = plt.subplots()\n",
     "\n",
     "# Remove text to avoid tiny differences in rendered output.\n",
     "from matplotlib.testing.decorators import remove_ticks_and_titles\n",
-    "remove_ticks_and_titles(fig)"
+    "remove_ticks_and_titles(fig)\n",
+    "fig.canvas.header_visible = False\n",
+    "\n",
+    "ax.plot(np.sin(np.linspace(0, 20, 100)));"
    ]
   },
   {
@@ -27,7 +29,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "plt.plot(np.cos(np.linspace(0, 20, 100)));"
+    "ax.plot(np.cos(np.linspace(0, 20, 100)));"
    ]
   },
   {
@@ -130,16 +132,6 @@
     "fig.canvas.toolbar.button_style = ''"
    ]
   },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "0d86fce3",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "fig.canvas.header_visible = False"
-   ]
-  },
   {
    "cell_type": "code",
    "execution_count": null,