Plotly support (#1226)

Author: loiswells97

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.32.0] - 2025-10-13
 
 ### Added

cypress/e2e/spec-wc-pyodide.cy.js

@@ -56,7 +56,7 @@ describe("Running the code with pyodide", () => {
 
   it("interrupts the code when the stop button is clicked", () => {
     runCode(
-      "from time import sleep\nfor i in range(100):\n\tprint(i)\n\tsleep(1)"
+      "from time import sleep\nfor i in range(100):\n\tprint(i)\n\tsleep(1)",
     );
     cy.get("editor-wc")
       .shadow()
@@ -115,7 +115,7 @@ describe("Running the code with pyodide", () => {
       .find(".error-message__content")
       .should(
         "contain",
-        "FileExistsError: File 'output.txt' already exists on line 1 of main.py"
+        "FileExistsError: File 'output.txt' already exists on line 1 of main.py",
       );
   });
 
@@ -126,7 +126,7 @@ describe("Running the code with pyodide", () => {
       .find("div[class=cm-content]")
       .invoke(
         "text",
-        'with open("output.txt", "a") as f:\n\tf.write("Hello again world")'
+        'with open("output.txt", "a") as f:\n\tf.write("Hello again world")',
       );
     cy.get("editor-wc")
       .shadow()
@@ -153,7 +153,7 @@ describe("Running the code with pyodide", () => {
 
   it("runs a simple program with a built-in pyodide module", () => {
     runCode(
-      "import simplejson as json\nprint(json.dumps(['foo', {'bar': ('baz', None, 1.0, 2)}]))"
+      "import simplejson as json\nprint(json.dumps(['foo', {'bar': ('baz', None, 1.0, 2)}]))",
     );
     cy.get("editor-wc")
       .shadow()
@@ -163,7 +163,7 @@ describe("Running the code with pyodide", () => {
 
   it("runs a simple pygal program", () => {
     runCode(
-      "import pygal\nbar_chart = pygal.Bar()\nbar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])\nbar_chart.render()"
+      "import pygal\nbar_chart = pygal.Bar()\nbar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])\nbar_chart.render()",
     );
     cy.get("editor-wc")
       .shadow()
@@ -173,7 +173,7 @@ describe("Running the code with pyodide", () => {
 
   it("runs a simple matplotlib program", () => {
     runCode(
-      "import matplotlib.pyplot as plt\nx = [1,2,3]\ny = [2,4,1]\nplt.plot(x, y)\nplt.title('My first graph!')\nplt.show()"
+      "import matplotlib.pyplot as plt\nx = [1,2,3]\ny = [2,4,1]\nplt.plot(x, y)\nplt.title('My first graph!')\nplt.show()",
     );
     cy.wait(5000);
     cy.get("editor-wc")
@@ -193,12 +193,24 @@ describe("Running the code with pyodide", () => {
       .should("be.visible");
   });
 
+  it("runs a simple plotly program", () => {
+    runCode(
+      'import plotly.express as px\ndf = px.data.gapminder().query("country==\'Canada\'")\nfig = px.line(df, x="year", y="lifeExp", title=\'Life expectancy in Canada\')\nfig.show()',
+    );
+    cy.wait(3000);
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pyodiderunner")
+      .find("div.js-plotly-plot")
+      .should("be.visible");
+  });
+
   it("runs a simple urllib program", () => {
     cy.intercept("GET", "https://www.my-amazing-website.com", {
       statusCode: 200,
     });
     runCode(
-      "import urllib.request\nresponse = urllib.request.urlopen('https://www.my-amazing-website.com')\nprint(response.getcode())"
+      "import urllib.request\nresponse = urllib.request.urlopen('https://www.my-amazing-website.com')\nprint(response.getcode())",
     );
     cy.get("editor-wc")
       .shadow()
@@ -208,7 +220,7 @@ describe("Running the code with pyodide", () => {
 
   it("runs a simple program with a module from PyPI", () => {
     runCode(
-      "from strsimpy.levenshtein import Levenshtein\nlevenshtein = Levenshtein()\nprint(levenshtein.distance('hello', 'world'))"
+      "from strsimpy.levenshtein import Levenshtein\nlevenshtein = Levenshtein()\nprint(levenshtein.distance('hello', 'world'))",
     );
     cy.get("editor-wc")
       .shadow()
@@ -236,7 +248,7 @@ text_in = "This is a test message"
 rotor_start = "FNZ"
 text_out = use_enigma_machine(text_in, rotor_start)
 print(text_out)
-      `
+      `,
     );
     cy.get("editor-wc")
       .shadow()
@@ -251,7 +263,7 @@ print(text_out)
       .find(".error-message__content")
       .should(
         "contain",
-        "ModuleNotFoundError: No module named 'i_do_not_exist' on line 1 of main.py"
+        "ModuleNotFoundError: No module named 'i_do_not_exist' on line 1 of main.py",
       );
   });
 

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/"),
     },