Merge branch 'dev' into refactor/merge-polling-socket-setup

Author: tonypzy

.github/workflows/deploy-docs.yml

@@ -26,7 +26,7 @@ jobs:
         working-directory: ./website
     steps:
       - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020
         with:
           node-version: 24
           cache: npm

.github/workflows/process-changes.yml

@@ -13,7 +13,7 @@ jobs:
     - name: "Checkout Repository"
       uses: actions/checkout@v7.0.0
     - name: "Install Node"
-      uses: actions/setup-node@v6.4.0
+      uses: actions/setup-node@v7.0.0
       with:
           node-version: '24'
     - name: "Install Dependencies"
@@ -148,6 +148,76 @@ jobs:
           name: cypress-screenshots-visual
           path: cypress/screenshots
 
+  playwright-visual-regression-test-init:
+    name: "Initialize Playwright Visual Regression Test"
+    runs-on: ubuntu-latest
+    needs: install-and-build
+    steps:
+      - name: "Checkout Repository"
+        uses: actions/checkout@v7.0.0
+
+      - name: "Save current Head-Ref as PR-branch"
+        shell: bash
+        run: git checkout -B PR-HEAD
+
+      - uses: ./.github/actions/prepare
+        with:
+          usebasebranch: true
+          loadprbuild: false
+
+      - name: "Checkout Playwright tests from Head-Ref"
+        shell: bash
+        run: |
+          git checkout PR-HEAD -- ./playwright
+          git checkout PR-HEAD -- ./example
+          git checkout PR-HEAD -- ./package.json
+          git checkout PR-HEAD -- ./playwright.config.js
+          git checkout PR-HEAD -- ./playwright.init.config.js
+          git checkout PR-HEAD -- ./playwright.visual.config.js
+
+      - name: "Install PR npm dependencies"
+        run: ELECTRON_SKIP_BINARY_DOWNLOAD=1 npm install
+
+      - name: "Install Playwright Chromium"
+        run: npx playwright install --with-deps chromium
+
+      - name: "Generate Playwright baseline screenshots"
+        run: npm run test:pw:init
+
+      - uses: actions/upload-artifact@v7
+        with:
+          name: playwright-init-screenshots
+          path: playwright/screenshots_init
+
+  playwright-visual-regression-test:
+    name: "Playwright Visual Regression Test"
+    runs-on: ubuntu-latest
+    needs: playwright-visual-regression-test-init
+    steps:
+      - name: "Checkout Repository"
+        uses: actions/checkout@v7.0.0
+
+      - uses: ./.github/actions/prepare
+
+      - name: "Install Playwright Chromium"
+        run: npx playwright install --with-deps chromium
+
+      - uses: actions/download-artifact@v8
+        with:
+          name: playwright-init-screenshots
+          path: playwright/screenshots_init
+
+      - name: "Run Playwright visual regression tests"
+        run: npm run test:pw:visual
+
+      - uses: actions/upload-artifact@v7
+        if: failure()
+        with:
+          name: playwright-screenshots-visual
+          path: |
+            playwright/test-results/
+            playwright/playwright-report/
+
   functional-test:
     name: "Functional Test (Websocket)"
     runs-on: ubuntu-latest

.github/workflows/pypi.yml

@@ -38,7 +38,7 @@ jobs:
           generate_release_notes: true
       - name: Set up Python
         if: ${{ steps.version.outputs.TAG_EXISTS == '0' }}
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v7
         with:
             python-version: '3.x'
       - name: Install dependencies

.github/workflows/python-tests.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Checkout Repository
         uses: actions/checkout@v7.0.0
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v7
         with:
           python-version: ${{ matrix.python-version }}
       - name: Install package and test dependencies

.github/workflows/update-js-build-files.yml

@@ -22,7 +22,7 @@ jobs:
         # see: https://stackoverflow.com/questions/57921401/push-to-origin-from-github-action/58393457#58393457
         # with:
         #   token: ${{ secrets.PAT }}
-      - uses: actions/setup-node@v6.4.0
+      - uses: actions/setup-node@v7.0.0
         with:
           node-version: '24'
       - run: ELECTRON_SKIP_BINARY_DOWNLOAD=1 npm install

download.sh

@@ -5,7 +5,7 @@ wget https://unpkg.com/jquery@3.1.1/dist/jquery.min.js -O py/static/js/jquery.mi
 wget https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js -O py/static/js/bootstrap.min.js
 wget https://unpkg.com/react@16.2.0/umd/react.production.min.js -O py/static/js/react-react.min.js
 wget https://unpkg.com/react-dom@16.2.0/umd/react-dom.production.min.js -O py/static/js/react-dom.min.js
-wget "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_SVG" -O py/static/js/mathjax-MathJax.js
+wget "https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-svg.js" -O py/static/js/mathjax-tex-mml-svg.js
 wget https://cdn.rawgit.com/plotly/plotly.js/master/dist/plotly.min.js -O py/static/js/plotly-plotly.min.js
 wget https://unpkg.com/sjcl@1.0.7/sjcl.js -O py/static/js/sjcl.js
 wget https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.6.1/react-modal.min.js -o py/static/js/react-modal.min.js

js/panes/ImageComparePane.js

@@ -7,12 +7,22 @@
  *
  */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import Pane from './Pane';
+import { typesetMathJax } from './utils/mathjaxHelpers';
 
 function ImageComparePane(props) {
   const { content, title, id } = props;
+  const containerRef = useRef();
+
+  useEffect(() => {
+    let cancelled = false;
+    typesetMathJax(containerRef.current, () => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, [content]);
 
   // If content isn't an array, fallback
   if (!Array.isArray(content)) {
@@ -38,6 +48,7 @@ function ImageComparePane(props) {
   return (
     <Pane {...props} handleDownload={handleDownload}>
       <div
+        ref={containerRef}
         style={{
           display: 'flex',
           flexDirection: 'row',

js/panes/ImagePane.js

@@ -12,6 +12,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import ApiContext from '../api/ApiContext';
 import EventSystem from '../EventSystem';
 import Pane from './Pane';
+import { typesetMathJax } from './utils/mathjaxHelpers';
 
 const DEFAULT_HEIGHT = 400;
 const DEFAULT_WIDTH = 300;
@@ -25,6 +26,7 @@ function ImagePane(props) {
   // --------------
   const paneRef = useRef();
   const imgRef = useRef();
+  const captionRef = useRef();
   const mouseLocationRef = useRef({ x: null, y: null });
   const [view, setView] = useState({ scale: 1, tx: 0, ty: 0 });
   const [imgDim, setImgDim] = useState({ width: null, height: 0 });
@@ -147,7 +149,11 @@ function ImagePane(props) {
   const commitSliderSelection = (value) => {
     const idx = parseInt(value, 10);
     if (Number.isNaN(idx)) return;
-    sendPaneMessage({ event_type: 'SliderMoved', index: idx, pane_data: false }, id, envID);
+    sendPaneMessage(
+      { event_type: 'SliderMoved', index: idx, pane_data: false },
+      id,
+      envID
+    );
   };
 
   const finalizeSlider = (evt) => {
@@ -307,12 +313,20 @@ function ImagePane(props) {
     content = content[actualSelected];
   }
 
+  useEffect(() => {
+    let cancelled = false;
+    typesetMathJax(captionRef.current, () => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, [content.caption]);
+
   // add caption as widget
   if (content.caption) {
     widgets.splice(
       0,
       0,
-      <span className="widget" key="img_caption">
+      <span className="widget" key="img_caption" ref={captionRef}>
         {content.caption}
       </span>
     );

js/panes/PlotPane.js

@@ -11,6 +11,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 const { usePrevious } = require('../util');
 import ApiContext from '../api/ApiContext';
 import Pane from './Pane';
+import { typesetMathJax } from './utils/mathjaxHelpers';
 const { sgg } = require('ml-savitzky-golay-generalized');
 
 var PlotPane = (props) => {
@@ -20,6 +21,7 @@ var PlotPane = (props) => {
   // state variables
   // --------------
   const plotlyRef = useRef();
+  const captionRef = useRef();
   const maxsmoothvalue = 100;
   const [smoothWidgetActive, setSmoothWidgetActive] = useState(false);
   const [smoothvalue, setSmoothValue] = useState(1);
@@ -41,6 +43,14 @@ var PlotPane = (props) => {
     }
   }, [selected]);
 
+  useEffect(() => {
+    let cancelled = false;
+    typesetMathJax(captionRef.current, () => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, [content && content.caption]);
+
   // private events
   // -------------
   const toggleSmoothWidget = () => {
@@ -327,7 +337,7 @@ var PlotPane = (props) => {
   var caption_widget = '';
   if (content && content.caption) {
     caption_widget = (
-      <div className="widget plot-caption" key="plot_caption">
+      <div className="widget plot-caption" key="plot_caption" ref={captionRef}>
         {content.caption}
       </div>
     );

js/panes/TextPane.js

@@ -7,16 +7,18 @@
  *
  */
 
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import ScrollToBottom from 'react-scroll-to-bottom';
 
 import ApiContext from '../api/ApiContext';
 import EventSystem from '../EventSystem';
 import Pane from './Pane';
+import { typesetMathJax } from './utils/mathjaxHelpers';
 
 function TextPane(props) {
   const { sendPaneMessage } = useContext(ApiContext);
   const { envID, id, content, isFocused } = props;
+  const contentRef = useRef();
 
   // private events
   // --------------
@@ -70,6 +72,14 @@ function TextPane(props) {
     };
   });
 
+  useEffect(() => {
+    let cancelled = false;
+    typesetMathJax(contentRef.current, () => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, [content]);
+
   // rendering
   // ---------
 
@@ -88,7 +98,7 @@ function TextPane(props) {
         initialScrollBehavior={initialScrollBehavior}
         mode="bottom"
       >
-        <div dangerouslySetInnerHTML={{ __html: content }} />
+        <div ref={contentRef} dangerouslySetInnerHTML={{ __html: content }} />
       </ScrollToBottom>
     </Pane>
   );