Merge pull request #5096 from plotly/notebook-connected-default

Add back the mime renderer JL extension

Author: marthacryan

.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,66 @@
+on: push
+
+jobs:
+  check-js-build:
+    name: Check JS build artifacts
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - 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: '22'
+
+    - name: Copy current files to a temporary directory
+      run: |
+        cp -R plotly/labextension/ plotly/labextension-tmp/
+
+    - name: Install dependencies and build
+      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
+
+        # 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

.github/workflows/test-release.yml

@@ -10,8 +10,6 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
-      with:
-        persist-credentials: false
     - name: Set up Python
       uses: actions/setup-python@v5
       with:
@@ -20,7 +18,7 @@ jobs:
     - name: Install Node
       uses: actions/setup-node@v2
       with:
-        node-version: '18'
+        node-version: '22'
 
     - name: Install npm dependencies
       run: |

.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,19 @@ 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 files in the `js/` directory.**
+If you make changes to any files in the `js/` directory, you must run `npm install && npm run build` from the `js/` directory to rebuild the FigureWidget and JupyterLab extension.
+You must then commit the build artifacts produced in `plotly/labextension`. A CI job will verify that this step has been done correctly.
+
+**Notes on the contents of the `js/` directory:**
+The `js/` directory contains Javascript code which helps with using Plotly in Jupyter notebooks.
+
+There are two kinds of Jupyter support included in the `js/` directory:
+1. **Mime Renderer JupyterLab extension**: This is the default renderer for Plotly `Figure()` objects in Jupyter notebooks. The Plotly mime renderer JupyterLab extension is used automatically by JupyterLab / Jupyter Notebook
+when it sees the mimetype `application/vnd.plotly.v1+json` in the notebook output. The mime renderer loads `plotly.js` a single time and references it each time a Plotly figure is used in the notebook. This allows us to avoid embedding `plotly.js` in the notebook output. The JupyterLab extension source code is located at `js/src/mimeExtension.ts` and the compiled extension code is located at `plotly/labextension` in the built Python package. The command `jupyter labextension build` (which is one of the steps called by `npm run build`) compiles the extension and places the build artifacts in `plotly/labextension`. 
+2. **FigureWidget**: This is a more-interactive method for rendering Plotly charts in notebooks. FigureWidget used by creating a `FigureWidget()` object inside the notebook code (in place of a `Figure()`). It allows for communication between the Javascript frontend and Python backend, and requires the installation of an additional Python package (`anywidget`). The FigureWidget source code is located at `js/src/widget.ts`, and is included in the built Python package at `plotly/package_data/widgetbundle.js`. 
+
 ### 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"
+    }
+}
+