Demo sandbox milestone 1 (#18)

* set up webpack and package.json
* set up material ui (mui) components
* refactor, prepare type definitions
* disable dev overlay, remove validation TODOs, add error boundary, refactor
* address comments

demo/package.json

@@ -4,7 +4,8 @@
     "description": "Demo website for memory-models-rough",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build-dev": "webpack"
+        "build-dev": "webpack",
+        "start": "webpack serve"
     },
     "repository": {
         "type": "git",
@@ -33,8 +34,10 @@
         "webpack-cli": "^5.1.4"
     },
     "dependencies": {
+        "@mui/material": "^5.15.7",
         "@picocss/pico": "^1.5.10",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.12"
     }
 }

demo/src/App.tsx

@@ -1,32 +1,35 @@
-import React from "react";
+import React, { useState } from "react";
 import SvgDisplay from "./SvgDisplay";
-
-const DEMO_OBJECTS = [
-    {
-        isClass: true,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    {
-        isClass: false,
-        name: "str",
-        id: 19,
-        value: "David is cool!",
-        style: ["highlight"],
-    },
-    { isClass: false, name: "int", id: 13, value: 7 },
-];
+import MemoryModelsUserInput from "./MemoryModels";
+import { ErrorBoundary } from "react-error-boundary";
 
 export default function App() {
+    const [formData, setFormData] = useState("");
+    const [jsonResult, setJsonResult] = useState(null);
+
+    const onSubmit = async (event) => {
+        event.preventDefault();
+        try {
+            setJsonResult(JSON.parse(formData));
+        } catch (error) {
+            console.error("Error parsing inputted JSON: ", error);
+            setJsonResult(null);
+        }
+    };
+
     return (
         <>
+            <MemoryModelsUserInput
+                formData={formData}
+                setFormData={setFormData}
+                onSubmit={onSubmit}
+            />
             <section>
-                <h2>Input</h2>
-                <pre>{JSON.stringify(DEMO_OBJECTS)}</pre>
+                <h2>Output</h2>
+                <ErrorBoundary fallback={<div>Something went wrong</div>}>
+                    <SvgDisplay jsonResult={jsonResult} />
+                </ErrorBoundary>
             </section>
-            <SvgDisplay />
         </>
     );
 }

demo/src/MemoryModels.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Button, Card, CardContent, TextField, Grid } from "@mui/material";
+
+export default function MemoryModelsUserInput(props) {
+    const handleTextFieldChange = (event) => {
+        props.setFormData(event.target.value);
+    };
+
+    return (
+        <form onSubmit={props.onSubmit}>
+            <Card>
+                <CardContent>
+                    <Grid container spacing={2}>
+                        <Grid item xs={12}>
+                            <TextField
+                                id="multiline-textfield"
+                                label="Enter memory model JSON here"
+                                multiline
+                                fullWidth
+                                rows={10}
+                                maxRows={20}
+                                variant="outlined"
+                                value={props.formData}
+                                onChange={handleTextFieldChange}
+                                style={{
+                                    width: "100%",
+                                    fontFamily: "Monospace",
+                                }}
+                            />
+                        </Grid>
+                        <Grid item xs={12}>
+                            <Button
+                                type="submit"
+                                variant="contained"
+                                color="primary"
+                                style={{ textTransform: "none" }}
+                            >
+                                Draw Diagram
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </CardContent>
+            </Card>
+        </form>
+    );
+}

demo/src/SvgDisplay.tsx

@@ -1,36 +1,20 @@
 import React, { useRef, useEffect } from "react";
 import mem from "../../src/index"; // TODO: replace with import of the package after it's been published
 
-const DEMO_OBJECTS = [
-    {
-        isClass: true,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    {
-        isClass: false,
-        name: "str",
-        id: 19,
-        value: "David is cool!",
-        style: ["highlight"],
-    },
-    { isClass: false, name: "int", id: 13, value: 7 },
-];
-
-export default function SvgDisplay() {
+export default function SvgDisplay(props) {
     const canvasRef = useRef(null);
 
     useEffect(() => {
-        const m = mem.draw(DEMO_OBJECTS, true, { width: 1300 });
-        m.render(canvasRef.current);
-    }, []);
+        if (props.jsonResult !== null) {
+            const m = mem.draw(props.jsonResult, true, { width: 1300 });
+            m.clear(canvasRef.current);
+            m.render(canvasRef.current);
+        }
+    }, [props.jsonResult]);
 
     return (
-        <section>
-            <h2>Output</h2>
+        <>
             <canvas ref={canvasRef} width={1000} height={1000} />;
-        </section>
+        </>
     );
 }

demo/webpack.config.js

@@ -8,6 +8,16 @@ module.exports = [
             path: path.resolve(__dirname, "dist"),
             filename: "index.js",
         },
+        devServer: {
+            static: {
+                directory: path.join(__dirname, "dist"),
+            },
+            compress: true,
+            port: 9000,
+            client: {
+                overlay: false,
+            },
+        },
         module: {
             rules: [
                 {