address comments

demo/package.json

@@ -34,11 +34,11 @@
         "webpack-cli": "^5.1.4"
     },
     "dependencies": {
-        "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
         "@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,42 +1,35 @@
 import React, { useState } from "react";
 import SvgDisplay from "./SvgDisplay";
-import { MemoryModels, MemoryModel } from "./MemoryModels";
-
-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([]);
+    const [jsonResult, setJsonResult] = useState(null);
 
     const onSubmit = async (event) => {
         event.preventDefault();
-        setJsonResult(JSON.parse(formData));
+        try {
+            setJsonResult(JSON.parse(formData));
+        } catch (error) {
+            console.error("Error parsing inputted JSON: ", error);
+            setJsonResult(null);
+        }
     };
 
     return (
         <>
-            <MemoryModels
+            <MemoryModelsUserInput
                 formData={formData}
                 setFormData={setFormData}
                 onSubmit={onSubmit}
             />
-            <SvgDisplay jsonResult={jsonResult} />
+            <section>
+                <h2>Output</h2>
+                <ErrorBoundary fallback={<div>Something went wrong</div>}>
+                    <SvgDisplay jsonResult={jsonResult} />
+                </ErrorBoundary>
+            </section>
         </>
     );
 }

demo/src/MemoryModels.tsx

@@ -1,17 +1,7 @@
 import React from "react";
 import { Button, Card, CardContent, TextField, Grid } from "@mui/material";
 
-interface MemoryModel {
-    isClass: boolean;
-    name: string;
-    id: string | number | null;
-    value: any;
-    stack_frame: boolean;
-    show_indexes: boolean;
-    style?: any[] | null;
-}
-
-function MemoryModels(props) {
+export default function MemoryModelsUserInput(props) {
     const handleTextFieldChange = (event) => {
         props.setFormData(event.target.value);
     };
@@ -24,24 +14,28 @@ function MemoryModels(props) {
                         <Grid item xs={12}>
                             <TextField
                                 id="multiline-textfield"
-                                label="Multi-line Text"
+                                label="Enter memory model JSON here"
                                 multiline
                                 fullWidth
                                 rows={10}
                                 maxRows={20}
                                 variant="outlined"
                                 value={props.formData}
                                 onChange={handleTextFieldChange}
-                                style={{ width: "100%" }}
+                                style={{
+                                    width: "100%",
+                                    fontFamily: "Monospace",
+                                }}
                             />
                         </Grid>
                         <Grid item xs={12}>
                             <Button
                                 type="submit"
                                 variant="contained"
                                 color="primary"
+                                style={{ textTransform: "none" }}
                             >
-                                Submit
+                                Draw Diagram
                             </Button>
                         </Grid>
                     </Grid>
@@ -50,6 +44,3 @@ function MemoryModels(props) {
         </form>
     );
 }
-
-export { MemoryModels };
-export type { MemoryModel };

demo/src/SvgDisplay.tsx

@@ -1,38 +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(props) {
     const canvasRef = useRef(null);
 
     useEffect(() => {
-        if (props.jsonResult.length > 0) {
+        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/src/index.tsx

@@ -3,14 +3,10 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import "@picocss/pico";
 import "./css/styles";
-("use client");
-import { ErrorBoundary } from "react-error-boundary";
 
 const root = createRoot(document.getElementById("app"));
 root.render(
     <StrictMode>
-        <ErrorBoundary fallback={<div>Something went wrong</div>}>
-            <App />
-        </ErrorBoundary>
+        <App />
     </StrictMode>
 );

package.json

@@ -26,7 +26,6 @@
     "dependencies": {
         "@xmldom/xmldom": "^0.8.6",
         "deepmerge": "^4.3.1",
-        "react-error-boundary": "^4.0.12",
         "roughjs": "^4.5.0"
     },
     "devDependencies": {

src/memory_model.ts

@@ -129,6 +129,15 @@ export class MemoryModel {
         };
     }
 
+    /**
+     * Clear a given canvas object.
+     * @param canvas - the element that is currently used to draw graphics
+     */
+    clear(canvas) {
+        const ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
     /**
      * Distribute the object drawing depending on type
      * @param {number} x - value for x coordinate of top left corner