Add example dropdown

Author: saulshanabrook

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "examples/extraction-gym"]
+	path = examples/extraction-gym
+	url = https://github.com/egraphs-good/extraction-gym
+[submodule "examples/egraph-serialize"]
+	path = examples/egraph-serialize
+	url = https://github.com/egraphs-good/egraph-serialize

examples/egraph-serialize

@@ -1,23 +1,64 @@
+/// <reference types="react/canary" />
+
+import { startTransition, use, useEffect, useMemo, useState } from "react";
 import MonacoEditor from "react-monaco-editor";
 
+const modules = {
+  ...import.meta.glob("/examples/egraph-serialize/tests/*.json"),
+  ...import.meta.glob("/examples/extraction-gym/data/*/*.json"),
+  ...import.meta.glob("/examples/extraction-gym/test-data/*/*.json"),
+};
+
 function Monaco({ code, setCode }: { code: string; setCode: (code: string) => void }) {
+  const [selectedPreset, setSelectedPreset] = useState("");
+  const [loadPreset, setLoadPreset] = useState(false);
+  const handlePresetChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const preset = event.target.value;
+    startTransition(() => {
+      setSelectedPreset(preset);
+      setLoadPreset(true);
+    });
+  };
+  const presetPromise = useMemo(() => (loadPreset ? modules[selectedPreset]() : null), [selectedPreset, loadPreset]);
+  const loadedPreset = presetPromise ? use(presetPromise) : null;
+
+  useEffect(() => {
+    if (loadedPreset) {
+      startTransition(() => {
+        setCode(JSON.stringify(loadedPreset, null, 2));
+        setLoadPreset(false);
+      });
+    }
+  }, [loadedPreset, setCode, setLoadPreset]);
+
   return (
-    <MonacoEditor
-      language="json"
-      theme="vs-dark"
-      value={code}
-      onChange={setCode}
-      /// include all default props bc they are now deprecated
-      width="100%"
-      height="100%"
-      defaultValue=""
-      options={{}}
-      overrideServices={{}}
-      editorWillMount={() => {}}
-      editorDidMount={() => {}}
-      editorWillUnmount={() => {}}
-      className={null}
-    />
+    <div className="flex flex-col h-full w-full">
+      <select value={selectedPreset} onChange={handlePresetChange} className="m-1 p-2 border border-gray-300 rounded">
+        <option value="" disabled>
+          Select a preset
+        </option>
+        {Object.keys(modules).map((preset) => (
+          <option key={preset} value={preset}>
+            {preset}
+          </option>
+        ))}
+      </select>
+      <MonacoEditor
+        language="json"
+        theme="vs-dark"
+        value={code}
+        onChange={setCode}
+        width="100%"
+        height="100%"
+        defaultValue=""
+        options={{}}
+        overrideServices={{}}
+        editorWillMount={() => {}}
+        editorDidMount={() => {}}
+        editorWillUnmount={() => {}}
+        className={null}
+      />
+    </div>
   );
 }
 

examples/extraction-gym

@@ -63,8 +63,8 @@ type EGraphClassData = {
 };
 type EGraph = {
   nodes: { [id: EGraphNodeID]: EGraphNode };
-  root_eclasses: EGraphClassID[];
-  class_data: { [id: EGraphClassID]: EGraphClassData };
+  root_eclasses?: EGraphClassID[];
+  class_data?: { [id: EGraphClassID]: EGraphClassData };
 };
 
 type Color = string;
@@ -154,9 +154,9 @@ function toELKNode(
       }
     }
   }
-
+  const class_data = egraph.class_data || {};
   const type_to_color = new Map<string | undefined, Color>();
-  for (const { type } of Object.values(egraph.class_data)) {
+  for (const { type } of Object.values(class_data)) {
     if (!type_to_color.has(type)) {
       type_to_color.set(type, colorScheme[type_to_color.size % colorScheme.length]);
     }
@@ -165,7 +165,7 @@ function toELKNode(
   const children = [...classToNodes.entries()].map(([id, nodes]) => {
     return {
       id: `class-${id}`,
-      data: { color: type_to_color.get(egraph.class_data[id]?.type) || null, port: `port-${id}`, id },
+      data: { color: type_to_color.get(class_data[id]?.type) || null, port: `port-${id}`, id },
       type: "class" as const,
       children: nodes.map(([id, node]) => {
         // compute the size of the text by setting a dummy node element then measureing it

src/Monaco.tsx

@@ -0,0 +1 @@
+export const examples = import.meta.glob("/examples/egraph-serialize/tests/*.json");