patch pyodide

app/epics/pyodideEpics.ts

@@ -20,6 +20,8 @@ import {
   plotTestPlot,
   saveEpochs,
   loadPyodide,
+  loadPatches,
+  applyPatches,
   loadUtils,
 } from '../utils/pyodide';
 import {
@@ -43,8 +45,11 @@ const launchEpic: Epic<PyodideActionType, PyodideActionType, RootState> = (
     tap(() => console.log('launching')),
     mergeMap(loadPyodide),
     tap((worker) => {
-      console.log('loadPyodide completed, laoding utils');
-      // loadUtils(worker);
+      console.log('loadPyodide completed, loading patches');
+      loadPatches(worker);
+      applyPatches(worker);
+      console.log('Now loading utils');
+      loadUtils(worker);
     }),
     map(PyodideActions.SetPyodideWorker)
   );

app/utils/pyodide/index.ts

@@ -14,6 +14,16 @@ export const loadPyodide = async () => {
   return freshWorker;
 };
 
+export const loadPatches = async (worker: Worker) =>
+  worker.postMessage({
+    data: readFileSync(path.join(__dirname, '/utils/pyodide/patches.py'), 'utf8'),
+  });
+
+export const applyPatches = async (worker: Worker) =>
+  worker.postMessage({
+    data: `apply_patches()`,
+  });
+
 export const loadUtils = async (worker: Worker) =>
   worker.postMessage({
     data: readFileSync(path.join(__dirname, '/utils/pyodide/utils.py'), 'utf8'),
@@ -117,7 +127,7 @@ export const plotTestPlot = async (worker: Worker | null) => {
   }
   // TODO: Figure out how to get image results from pyodide
   return worker.postMessage({
-    data: `print('hello world')`,
+    data: `import matplotlib.pyplot as plt; fig= plt.plot([1,2,3,4])`,
   });
 };
 

app/utils/pyodide/patches.py

@@ -0,0 +1,57 @@
+# patch implemented in Pyolite
+# https://github.com/jupyterlite/jupyterlite/blob/0d563b9a4cca4b54411229128cb51ac4ba333c8f/packages/pyolite-kernel/py/pyolite/pyolite/patches.py
+def patch_matplotlib():
+    import os
+    from io import BytesIO
+
+    # before importing matplotlib
+    # to avoid the wasm backend (which needs `js.document`, not available in worker)
+    os.environ["MPLBACKEND"] = "AGG"
+
+    import matplotlib.pyplot
+    from IPython.display import display
+
+    from .display import Image
+
+    _old_show = matplotlib.pyplot.show
+    assert _old_show, "matplotlib.pyplot.show"
+
+    def show():
+        buf = BytesIO()
+        matplotlib.pyplot.savefig(buf, format="png")
+        buf.seek(0)
+        display(Image(buf.read()))
+        matplotlib.pyplot.clf()
+
+    matplotlib.pyplot.show = show
+
+
+def patch_pillow():
+    import base64
+
+    from PIL import Image as PILImage
+
+    _old_repr_png = PILImage.Image._repr_png_
+    assert _old_repr_png
+
+    def _repr_png_(self):
+        byte = _old_repr_png(self)
+        return base64.b64encode(byte).decode("utf-8")
+
+    PILImage.Image._repr_png_ = _repr_png_
+
+
+ALL_PATCHES = [
+    patch_pillow,
+    patch_matplotlib,
+]
+
+
+def apply_patches():
+    import warnings
+
+    for patch in ALL_PATCHES:
+        try:
+            patch()
+        except Exception as err:
+            warnings.warn("faield to apply patch", patch, err)

app/utils/pyodide/utils.py

@@ -12,7 +12,6 @@
                  find_events, read_epochs, set_eeg_reference, viz)
 from mne.io import RawArray
 from io import StringIO
-from mne.channels import read_montage
 
 
 # plt.style.use(fivethirtyeight)
@@ -68,15 +67,14 @@ def load_data(sfreq=128., replace_ch_names=None):
 
         # type of each channels
         ch_types = ['eeg'] * (len(ch_ind) - 1) + ['stim']
-        montage = read_montage('standard_1005')
 
         # get data and exclude Aux channel
         data = data.values[:, ch_ind].T
 
         # create MNE object
         info = create_info(ch_names=ch_names, ch_types=ch_types,
-                           sfreq=sfreq, montage=montage)
-        raw.append(RawArray(data=data, info=info))
+                           sfreq=sfreq)
+        raw.append(RawArray(data=data, info=info).set_montage('standard_1005'))
 
     # concatenate all raw objects
     raws = concatenate_raws(raw)

app/utils/pyodide/webworker.js

@@ -8,7 +8,7 @@ importScripts('./src/pyodide/pyodide.js');
 
 async function loadPyodideAndPackages() {
   self.pyodide = await loadPyodide({ indexURL: './src/pyodide/' });
-  await self.pyodide.loadPackage(['numpy']);
+  await self.pyodide.loadPackage(['matplotlib', 'mne', 'pandas']);
 }
 let pyodideReadyPromise = loadPyodideAndPackages();
 

internals/scripts/InstallPyodide.js

@@ -6,7 +6,7 @@ import tar from 'tar-fs';
 import url from 'url';
 import bz2 from 'unbzip2-stream';
 
-const PYODIDE_VERSION = '0.17.0';
+const PYODIDE_VERSION = '0.18.0';
 const TAR_NAME = `pyodide-build-${PYODIDE_VERSION}.tar.bz2`;
 const TAR_URL = `https://github.com/pyodide/pyodide/releases/download/${PYODIDE_VERSION}/pyodide-build-${PYODIDE_VERSION}.tar.bz2`;
 const PYODIDE_DIR = 'app/utils/pyodide/src/';