Render Python Plotly using JSON MIME bundle

Fixes #79.

Author: georgestagg

_extensions/live/live.lua

@@ -529,6 +529,9 @@ function setupPyodide(doc)
   -- Initial Pyodide startup options
   local pyodide_options = {
     indexURL = "https://cdn.jsdelivr.net/pyodide/v0.27.0/full/",
+    env = {
+      PLOTLY_RENDERER = 'plotly_mimetype',
+    }
   }
   if (pyodide["engine-url"]) then
     pyodide_options["indexURL"] = pandoc.utils.stringify(pyodide["engine-url"])

_extensions/live/resources/live-runtime.js

@@ -73,7 +73,7 @@ def solve_lorenz(N=10, max_time=4.0, sigma=10.0, beta=8./3, rho=28.0):
   return x_t
 
 x_t = solve_lorenz(N, sigma = sigma, beta = beta, rho = rho)
-fig = go.FigureWidget()
+fig = go.Figure()
 for i in range(N):
   fig.add_trace(
       go.Scatter3d(
@@ -86,10 +86,8 @@ for i in range(N):
       )
   )
 fig.update_layout(
-    autosize=False,
     scene_camera_eye=dict(x=1.5, y=-1.5, z=1.5),
     width=800,
-    height=800,
     margin=dict(l=0, r=0, b=0, t=0)
 )
 fig

docs/interactive/dashboards.qmd

@@ -14,13 +14,15 @@ import { loadScriptAsync, replaceScriptChildren } from './utils';
 
 declare global {
   interface Window {
+    Plotly: any;
     _ojs: {
       ojsConnector: any;
     }
   }
 }
 
 let stateElement: HTMLScriptElement | undefined;
+let plotly: boolean = false;
 
 export class PyodideEvaluator implements ExerciseEvaluator {
   container: OJSEvaluateElement;
@@ -186,7 +188,7 @@ export class PyodideEvaluator implements ExerciseEvaluator {
 
     const resultObject = await this.pyodide.runPythonAsync(
       atob(require('./scripts/Python/capture.py'))
-    , { locals });
+      , { locals });
     locals.destroy();
 
     const value = await resultObject.get("value");
@@ -294,6 +296,24 @@ export class PyodideEvaluator implements ExerciseEvaluator {
       dispatchEvent(new Event('load'));
     }
 
+    const appendPlotlyFigure = async (figure: PyProxy) => {
+      const locals = await this.pyodide.toPy({ figure });
+      const figureJson = await this.pyodide.runPythonAsync(`
+        import json
+        json.dumps(figure)
+      `, { locals });
+
+      if (!plotly) {
+        await loadScriptAsync("https://cdn.plot.ly/plotly-2.35.2.min.js");
+        plotly = true;
+      }
+      var figureObj = JSON.parse(figureJson);
+
+      const figureDiv = document.createElement('div');
+      window.Plotly.newPlot(figureDiv, figureObj.data, figureObj.layout);
+      container.appendChild(figureDiv);
+    }
+
     const appendHtml = async (html: string) => {
       if (options.output) {
         const outputDiv = document.createElement("div");
@@ -342,11 +362,12 @@ export class PyodideEvaluator implements ExerciseEvaluator {
       container.appendChild(errorDiv);
     }
 
-    for(let i = 0; i < await result.outputs.length; i++) {
+    for (let i = 0; i < await result.outputs.length; i++) {
       const item = await result.outputs.get(i);
       const imagebitmap = await item._repr_mime_("application/html-imagebitmap");
       const html = await item._repr_mime_("text/html");
       const widget = await item._repr_mime_("application/vnd.jupyter.widget-view+json");
+      const plotly = await item._repr_mime_("application/vnd.plotly.v1+json");
       const plain = await item._repr_mime_("text/plain");
       const png = await item._repr_mime_("image/png");
       const jpeg = await item._repr_mime_("image/jpeg");
@@ -358,6 +379,8 @@ export class PyodideEvaluator implements ExerciseEvaluator {
         appendHtml(html);
       } else if (widget) {
         appendJupyterWidget(widget);
+      } else if (plotly) {
+        appendPlotlyFigure(plotly);
       } else if (png) {
         appendDataUrlImage("image/png", png);
       } else if (jpeg) {