Merge pull request #426 from saulshanabrook/interactive-visualizer

Add support for the interactive visualizer
egraphs-good · Oct 16, 2024 · 43de12f · 43de12f
2 parents 34b5d7b + 47e231f
commit 43de12f
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 9 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/web-demo/Cargo.toml b/web-demo/Cargo.toml
@@ -16,7 +16,7 @@ wee_alloc = "0.4.5"
 
 log = "0.4.19"
 wasm-logger = "0.2"
-
+serde_json = "1.0"
 console_error_panic_hook = "0.1.7"
 js-sys = "0.3"
 wasm-bindgen = "0.2"

diff --git a/web-demo/src/lib.rs b/web-demo/src/lib.rs
@@ -11,6 +11,7 @@ static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
 pub struct Result {
     pub text: String,
     pub dot: String,
+    pub json: String,
 }
 
 #[wasm_bindgen]
@@ -23,14 +24,17 @@ pub fn run_program(input: &str) -> Result {
                 max_calls_per_function: Some(40),
                 ..Default::default()
             });
+            let json = serde_json::to_string(&serialized).unwrap();
             Result {
                 text: outputs.join("<br>"),
                 dot: serialized.to_dot(),
+                json,
             }
         }
         Err(e) => Result {
             text: e.to_string(),
             dot: "".to_string(),
+            json: "{}".to_string(),
         },
     }
 }

diff --git a/web-demo/static/index.html b/web-demo/static/index.html
@@ -7,10 +7,10 @@
     <link rel="icon" type="image/svg+xml" href="https://egraphs-good.github.io/assets/egg.svg">
     <style>
         body {
-            margin: 0;
-            display: flex;
-            height: 100vh;
-            width: 100vw;
+            margin: 0 !important;
+            display: flex !important;
+            height: 100vh !important;
+            width: 100vw !important;
         }
 
         #editor {
@@ -104,6 +104,7 @@
     </style>
 
     <link rel="stylesheet" href="//unpkg.com/codemirror@5.65.2/lib/codemirror.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/egraph-visualizer@2/dist/style.css" />
     <script src="//unpkg.com/codemirror@5.65.2/lib/codemirror.js"></script>
     <script src="//unpkg.com/codemirror@5.65.2/mode/scheme/scheme.js"></script>
     <script src="//unpkg.com/codemirror@5.65.2/addon/edit/matchbrackets.js"></script>
@@ -113,6 +114,7 @@
     <script src="https://cdn.jsdelivr.net/npm/d3-graphviz@5.4.0/build/d3-graphviz.min.js"></script>
     <script type="module">
         import { compressUrlSafe, decompressUrlSafe } from './lzma-url.mjs';
+        import { mount } from "https://cdn.jsdelivr.net/npm/egraph-visualizer@2/+esm";
 
         let editor, output, examples, loginfo;
         let fulllog = [];
@@ -127,15 +129,36 @@
             hasRun: true,
             contentBySexp: [],
         };
-
+        // previous saved serializations of egraphs for react viewer
+        window.previousEGraphs = [];
         worker.onmessage = function (message) {
             console.log("got message", message);
+            window.lastMessage = message;
             output.innerHTML = message.data.text;
             output.scrollTop = output.scrollHeight;
             fulllog = message.data.log;
+            window.previousEGraphs.push(message.data.json);
             refreshLog();
+            window.fillGraph();
+        }
 
-            const graphContainer = d3.select("#graph-inner")
+        window.fillGraph = function () {
+          const message = window.lastMessage;
+          if (!message) {
+            return;
+          }
+          const visualizerSelectValue = document.getElementById("visualizer-select").value;
+          if (visualizerSelectValue == "graphviz") {
+            if (window.lastGraph?.type === "elk") {
+              window.lastGraph.mounted.unmount();
+            }
+            let graphContainer;
+            if (window.lastGraph?.type !== "graphviz") {
+              graphContainer = d3.select("#graph-inner");
+              window.lastGraph = { type: "graphviz", graphContainer };
+            } else {
+              graphContainer = window.lastGraph.graphContainer;
+            }
             const width = graphContainer.node().clientWidth;
             const height = graphContainer.node().clientHeight;
             const graphviz = graphContainer.graphviz({
@@ -149,6 +172,20 @@
             })
                 .transition(d3.transition().duration(2000))
                 .dot(message.data.dot).render();
+            window.lastGraph.graphviz = graphviz;
+          } else {
+            if (window.lastGraph?.type === "graphviz") {
+              window.lastGraph.graphviz.destroy();
+            }
+            let mounted;
+            if (window.lastGraph?.type !== "elk") {
+              mounted = mount(document.getElementById("graph-inner"));
+              window.lastGraph = { type: "elk", mounted };
+            } else {
+              mounted = window.lastGraph.mounted;
+            }
+            mounted.render(window.previousEGraphs);
+          }
         }
 
         window.onpopstate = function (event) {
@@ -361,6 +398,7 @@
                 console.log("Loading example", select.value);
 
                 if (select.value) {
+                    window.previousEGraphs = [];
                     editor.setValue(examples[select.value]);
                     pushState()
                 }
@@ -386,6 +424,10 @@
             githubButton = document.getElementById("github");
             slideNumber = document.getElementById("slideNumber");
             examplesDropDown = document.getElementById("examples");
+            const visualizerSelect = document.getElementById("visualizer-select");
+            visualizerSelect.onchange = function () {
+              window.fillGraph();
+            }
 
             loadEditor();
             updateSlideMode();
@@ -429,6 +471,10 @@
             <select name="examples" id="examples">
                 <option value=""> Load an example </option>
             </select>
+            <select name="select visualizer" id="visualizer-select">
+                <option value="graphviz">Graphviz</option>
+                <option value="elk">React Flow</option>
+            </select>
             <div class="right" id="github">
                 <a class="badge" href="https://github.com/egraphs-good/egglog">
                     <img alt="GitHub Repo"

diff --git a/web-demo/static/worker.js b/web-demo/static/worker.js
@@ -13,10 +13,10 @@ async function work() {
             console.log("Got result from worker", result);
             // Can't send the result directly, since it contains a reference to the
             // wasm memory. Instead, we send the dot and text separately.
-            self.postMessage({ dot: result.dot, text: result.text, log: logbuffer });
+            self.postMessage({ dot: result.dot, text: result.text, log: logbuffer, json: result.json });
         } catch (error) {
             console.log(error);
-            self.postMessage({ dot: "", text: "Something panicked! Check the console logs...", log: logbuffer });
+            self.postMessage({ dot: "", text: "Something panicked! Check the console logs...", log: logbuffer, json: "{}" });
         }
     };
 }