Plotly support

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- `plotly` support (#1226)
+
 ## [0.30.2] - 2025-07-22
 
 ### Fixed

package.json

@@ -26,6 +26,7 @@
     "@sentry/tracing": "7.16.0",
     "@szhsin/react-menu": "^3.2.0",
     "apollo-link-sentry": "^3.2.3",
+    "assert": "^2.1.0",
     "axios": "^0.24.0",
     "classnames": "^2.3.2",
     "codemirror": "^6.0.1",
@@ -51,6 +52,7 @@
     "node-html-parser": "^6.1.5",
     "oidc-client": "^1.11.5",
     "parse-link-header": "^2.0.0",
+    "plotly.js": "^3.0.2",
     "prismjs": "^1.29.0",
     "prompts": "2.4.0",
     "prop-types": "^15.8.1",
@@ -76,6 +78,7 @@
     "react-toggle": "^4.1.3",
     "redux-oidc": "^4.0.0-beta1",
     "skulpt": "^1.2.0",
+    "stream-browserify": "^3.0.0",
     "three": "0.169.0",
     "ts-pnp": "1.2.0",
     "url": "^0.11.4",

src/PyodideWorker.js

@@ -367,6 +367,32 @@ const PyodideWorker = () => {
         `);
       },
     },
+    plotly: {
+      before: async () => {
+        if (!pyodide.micropip) {
+          await pyodide.loadPackage("micropip");
+          pyodide.micropip = pyodide.pyimport("micropip");
+        }
+
+        // If the import is for a PyPi package then load it.
+        // Otherwise, don't error now so that we get an error later from Python.
+        await pyodide.micropip.install("plotly").catch(() => {});
+        await pyodide.micropip.install("pandas").catch(() => {});
+        pyodide.registerJsModule("basthon", fakeBasthonPackage);
+        pyodide.runPython(`
+          import plotly.graph_objs as go
+
+          def _hacked_show(self, *args, **kwargs):
+              basthon.kernel.display_event({
+                  "display_type": "plotly",
+                  "content": self.to_json()
+              })
+
+          go.Figure.show = _hacked_show
+      `);
+      },
+      after: () => {},
+    },
   };
 
   const fakeBasthonPackage = {

src/assets/stylesheets/ExternalStyles.scss

@@ -4,3 +4,4 @@
 @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
 @use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/alert.scss";
 @use "../../../node_modules/material-symbols/sharp.scss";
+@use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle;

src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import AstroPiModel from "../../../../AstroPiModel/AstroPiModel";
 import Highcharts from "highcharts";
+import Plotly from "plotly.js";
 
 const VisualOutputPane = ({ visuals, setVisuals }) => {
   const senseHatEnabled = useSelector((s) => s.editor.senseHatEnabled);
@@ -49,6 +50,13 @@ const VisualOutputPane = ({ visuals, setVisuals }) => {
         )}`;
         output.current.innerHTML = img.outerHTML;
         break;
+      case "plotly":
+        const plotlyJson = visual.content;
+        // Parse the JSON
+        const figure = JSON.parse(plotlyJson);
+        // Render using Plotly.js
+        Plotly.newPlot(output.current, figure.data, figure.layout);
+        break;
       default:
         throw new Error(`Unsupported origin: ${visual.origin}`);
     }

src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.test.js

@@ -119,6 +119,31 @@ describe("When there is a matplotlib output", () => {
   });
 });
 
+describe("when there is plotly output", () => {
+  beforeEach(() => {
+    const visuals = [
+      {
+        origin: "plotly",
+        content: JSON.stringify({
+          data: [{ x: [1, 2, 3], y: [4, 5, 6], type: "scatter" }],
+          layout: { title: { text: "Test Plot" } },
+        }),
+      },
+    ];
+    renderPaneWithVisuals(visuals);
+  });
+
+  test("it renders without crashing", () => {
+    expect(document.getElementsByClassName("pythonrunner-graphic").length).toBe(
+      1,
+    );
+  });
+
+  test("it renders the plotly chart as an svg", () => {
+    expect(screen.getByText("Test Plot")).toBeInTheDocument();
+  });
+});
+
 describe("When there is an unsupported origin", () => {
   test("it throws an error", () => {
     const visuals = [

webpack.config.js

@@ -84,6 +84,8 @@ module.exports = {
   resolve: {
     extensions: [".*", ".js", ".jsx", ".css"],
     fallback: {
+      stream: require.resolve("stream-browserify"),
+      assert: require.resolve("assert"),
       path: require.resolve("path-browserify"),
       url: require.resolve("url/"),
     },