Add back the mime renderer JL extension

.circleci/config.yml

@@ -58,9 +58,6 @@ commands:
             source .venv/bin/activate
             uv pip install .
             uv pip install -r ./test_requirements/requirements_optional.txt
-            cd js
-            npm ci
-            npm run build
 
       - when:
           condition: 
@@ -269,22 +266,18 @@ jobs:
 
     steps:
       - checkout
-
       - run:
-          name: initial NPM Build
+          name: PyPI Build
           command: |
-            python -m venv venv
-            . venv/bin/activate
+            curl -LsSf https://astral.sh/uv/install.sh | sh
+            uv venv
+            source .venv/bin/activate
+            uv pip install build
+            uv pip install jupyter
             cd js
             npm ci
             npm run build
-            git status
-
-      - run:
-          name: PyPI Build
-          command: |
-            . venv/bin/activate
-            pip install build
+            cd ..
             python -m build --sdist --wheel -o dist
             cp -R dist output
             git status
@@ -310,7 +303,6 @@ jobs:
       - checkout
       - browser-tools/install-chrome
       - browser-tools/install-chromedriver
-
       - run:
           name: Install dependencies
           command: |
@@ -319,16 +311,11 @@ jobs:
             uv venv
             source .venv/bin/activate
             uv pip install -r requirements.txt
+            cd ..
             if [ "${CIRCLE_BRANCH}" != "doc-prod" ]; then
               uv pip uninstall plotly
-              cd ..
               uv pip install -e .
-              cd js
-              npm ci
-              npm run build
-              cd ../doc
             fi
-            cd ..
 
       - run:
           name: make html
@@ -420,7 +407,7 @@ workflows:
   release_build:
     jobs:
       - full_build
-
+  
   build:
     jobs:
       - test_core_py:
@@ -449,4 +436,4 @@ workflows:
           pandas_version: "1.2.4"
           numpy_version: "1.26.4"
       - python_311_percy
-      - build-doc
+      - build-doc

.github/workflows/check-js-build.yml

@@ -0,0 +1,73 @@
+on:
+    pull_request:
+        paths:
+        - 'js/**'
+        - 'plotly/labextension/**'
+
+jobs:
+  check-js-build:
+    name: Check JS build artifacts
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        persist-credentials: false
+    - name: Set up Python
+      uses: actions/setup-python@v5
+      with:
+        python-version: "3.x"
+
+    - name: Install Node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '18'
+
+    - name: Copy current files to a temporary directory
+      run: |
+        cp -R plotly/labextension/ plotly/labextension-tmp/
+
+    - name: Install dependencies
+      run: |
+        curl -LsSf https://astral.sh/uv/install.sh | sh
+        uv venv
+        source .venv/bin/activate
+        uv pip install jupyter
+        cd js
+        npm ci
+        npm run build
+    - name: Check JupyterLab build artifacts
+      run: |
+        # 1. Hash contents of all static files, sort by content hash
+        find plotly/labextension/static -type f -exec sha256sum {} \; | awk '{print $1}' | sort > new_hashes.txt
+        find plotly/labextension-tmp/static -type f -exec sha256sum {} \; | awk '{print $1}' | sort > old_hashes.txt
+
+        # 2. Compare the sorted content hashes
+        diff old_hashes.txt new_hashes.txt > content_diff.txt
+        cat content_diff.txt
+
+        # Remove the "load" line from both package.json files before comparing
+        grep -v '"load": "static/' plotly/labextension/package.json > pkg1.json
+        grep -v '"load": "static/' plotly/labextension-tmp/package.json > pkg2.json
+
+        # Compare stripped versions
+        diff pkg1.json pkg2.json > package_json_diff.txt
+
+        # 5. Final check
+        if [ -s content_diff.txt ] || [ -s package_json_diff.txt ]; then
+        echo "❌ Build artifacts differ:"
+        echo "--- Unexpected diffs ---"
+        cat content_diff.txt
+        echo "--- Unexpected package.json diffs ---"
+        cat package_json_diff.txt
+        echo "Please replace the 'plotly/labextension' directory with the artifacts of this CI run."
+        exit 1
+        else
+        echo "✅ Build artifacts match expected output (ignoring known 'load' hash in package.json)."
+        fi
+
+    - name: Store the build artifacts from plotly/labextension
+      uses: actions/upload-artifact@v4
+      if: failure()
+      with:
+        name: labextension
+        path: plotly/labextension

.gitignore

@@ -59,7 +59,6 @@ doc/python/.mapbox_token
 doc/.ipynb_checkpoints
 tags
 doc/check-or-enforce-order.py
-plotly/package_data/widgetbundle.js
 
 tests/percy/*.html
 tests/percy/pandas2/*.html

CONTRIBUTING.md

@@ -169,6 +169,26 @@ and
 [`pip`](https://pip.pypa.io/en/stable/reference/pip_install/#install-editable)
 documentation on _development mode_.
 
+### Updating the `js/` directory
+**This is only necessary if you're making changes to the `js/` directory.**
+To rebuild the javascript, you can run `npm install && npm run build` from the `js/` directory. 
+
+**Notes on the contents of the `js/` directory:**
+The `js/` directory contains code to run plotly in Jupyter notebooks. It is shipped
+as part of the python package, so the build files are located in the `plotly/` directory
+under `plotly/labextension`. The files in that directory are committed so that if you
+aren't making a change to the `js/` directory, you don't have to worry about building it.
+There are two kinds of Jupyter support included in the `js/` directory:
+1. **Widget**: This is a more interactive model for rendering plotly in notebooks. You can use this
+through `FigureWidget`. It allows for communication between the javascript frontend and the python backend,
+but it has the drawback of requiring an additional package (`anywidget`). The code for this is located under
+`js/src/widget.ts`, and is included in the python package through `plotly/package_data/widgetbundle.js`. 
+2. **Mime Renderer**: This is a less interactive model. The plot is rendered but can't send any
+information back to the python side. For most people this is enough, so this is the default
+renderer for the `Figure` class. The mime renderer is used automatically by JupyterLab / Jupyter Notebook
+when it sees the mimetype `application/vnd.plotly.v1+json` in the notebook output. We include a JupyterLab extension in our python package that loads `plotly.js` and renders it when that mimetype is found in notebook
+output. This allows for us to avoid having to embed `plotly.js` in the notebook output. The code for this is found under `js/src/mimeExtension.ts` and is compiled into `plotly/labextension` through `jupyter labextension build`, which is included in `npm run build`. 
+
 ### Configure black code formatting
 
 This repo uses the [Black](https://black.readthedocs.io/en/stable/) code formatter,

js/install.json

@@ -0,0 +1,9 @@
+{
+    "schemaVersion": 1,
+    "name": "jupyterlab-plotly",
+    "version": "6.0.1",
+    "jupyterlab": {
+      "mimeExtension": "lib/mimeExtension.js"
+    }
+}
+