updates

.github/workflows/deploy_gh_pages.yml

@@ -2,6 +2,8 @@ name: Deploy to GitHub Pages
 on:
   push:
     branches: ['main']
+    paths:
+      - 'gui/**'
   workflow_dispatch:
 
 # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages

gui/package.json

@@ -11,13 +11,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@types/plotly.js": "^2.35.1",
     "discrete-wavelets": "^5.0.15",
-    "plotly.js-dist-min": "^2.35.3",
+    "plotly.js": "^2.34.0",
+    "react-plotly.js": "^2.6.0",
     "pyodide": "^0.27.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-plotly.js": "^2.6.0",
     "wasmlets": "^0.0.4"
   },
   "devDependencies": {

gui/src/App.tsx

@@ -1,14 +1,36 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { BenchmarkConfig, type BenchmarkSettings } from './components/BenchmarkConfig';
 import { BenchmarkRunner, type BenchmarkResult } from './components/BenchmarkRunner';
 import { ResultsTable } from './components/ResultsTable';
 import { BenchmarkPlot } from './components/BenchmarkPlot';
 
+interface StoredBenchmarkData {
+  config: BenchmarkSettings;
+  results: BenchmarkResult[];
+}
+
+const STORAGE_KEY = 'wasmlets-benchmark-data';
+
 function App() {
   const [isRunning, setIsRunning] = useState(false);
   const [config, setConfig] = useState<BenchmarkSettings | null>(null);
   const [results, setResults] = useState<BenchmarkResult[]>([]);
 
+  // Load stored data on component mount
+  useEffect(() => {
+    const storedData = localStorage.getItem(STORAGE_KEY);
+    if (storedData) {
+      try {
+        const data: StoredBenchmarkData = JSON.parse(storedData);
+        setConfig(data.config);
+        setResults(data.results);
+      } catch (error) {
+        console.error('Failed to parse stored benchmark data:', error);
+        localStorage.removeItem(STORAGE_KEY);
+      }
+    }
+  }, []);
+
   const handleStartBenchmark = (settings: BenchmarkSettings) => {
     setConfig(settings);
     setIsRunning(true);
@@ -17,6 +39,13 @@ function App() {
   const handleBenchmarkComplete = (benchmarkResults: BenchmarkResult[]) => {
     setResults(benchmarkResults);
     setIsRunning(false);
+
+    // Store the results and config
+    const dataToStore: StoredBenchmarkData = {
+      config: config!,
+      results: benchmarkResults
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(dataToStore));
   };
 
   return (
@@ -46,6 +75,7 @@ function App() {
                 onClick={() => {
                   setResults([]);
                   setConfig(null);
+                  localStorage.removeItem(STORAGE_KEY);
                 }}
                 className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
               >

gui/src/benchmark.ts

@@ -28,26 +28,19 @@ export async function runBenchmarks(o: {
   const wasmletsInitTime = postWasmlets - preWasmlets;
   console.log(`wasmlets initialized in ${wasmletsInitTime}ms`);
 
-  console.log("Initializing Pyodide...");
+  setProgress?.("Initializing Pyodide...");
   // all this does is heat up the cache, so we can measure the time it takes to load the packages
   // without internet speed affecting the results
-  await loadPyodide({
-    ...(
-      o.pyodideIndexUrl ? { // don't work well if indexUrl is undefined but provided
-        indexURL: o.pyodideIndexUrl,
-      } : {}
-    ),
-    packages: ["numpy", "pywavelets"],
+  const pyodideWarmup = await loadPyodide({
+    indexURL: o.pyodideIndexUrl
   });
+  await pyodideWarmup.loadPackage(["numpy", "pywavelets"]);
 
   const prePyodide = performance.now();
   const pyodide = await loadPyodide({
-    ...(
-      o.pyodideIndexUrl ? {
-        indexURL: o.pyodideIndexUrl,
-    } : {}),
-    packages: ["numpy", "pywavelets"],
+    indexURL: o.pyodideIndexUrl
   });
+  await pyodide.loadPackage(["numpy", "pywavelets"]);
 
   const postPyodide = performance.now();
   const pyodideInitTime = postPyodide - prePyodide;