NEVER GIVE UP

demo/src/App.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
-import { configDataPropTypes } from "./UserInput";
-import UserInput from "./UserInput";
-import Header from "./Header";
-import { Box } from "@mui/material";
+import SvgDisplay from "./SvgDisplay";
+import MemoryModelsUserInput from "./MemoryModelsUserInput";
 import { ErrorBoundary } from "react-error-boundary";
-import UserOutput from "./UserOutput";
+import DownloadSVGButton from "./DownloadSVGButton";
+import { Alert } from "@mui/material";
+import { configDataPropTypes } from "./MemoryModelsUserInput";
+import MemoryModelsSample from "./MemoryModelsSample";
+import Header from "./Header";
 
 export default function App() {
     const [textData, setTextData] = useState("");
@@ -34,33 +36,44 @@ export default function App() {
     return (
         <>
             <Header />
-            <Box
-                sx={{
-                    display: "flex",
-                    gap: "2rem",
-                }}
-            >
-                <Box sx={{ width: "40%" }}>
-                    <UserInput
-                        textData={textData}
-                        setTextData={setTextData}
-                        configData={configData}
-                        setConfigData={setConfigData}
-                        onTextDataSubmit={onTextDataSubmit}
-                        setFailureBanner={setFailureBanner}
-                        jsonResult={jsonResult}
-                    />
-                </Box>
-                <Box sx={{ width: "60%" }}>
-                    <UserOutput
+            {failureBanner && (
+                <Alert severity="error" data-testid="json-parse-alert">
+                    {failureBanner}
+                </Alert>
+            )}
+            <MemoryModelsSample
+                setTextData={setTextData}
+                setConfigData={setConfigData}
+                onTextDataSubmit={onTextDataSubmit}
+            />
+            <MemoryModelsUserInput
+                textData={textData}
+                setTextData={setTextData}
+                configData={configData}
+                setConfigData={setConfigData}
+                onTextDataSubmit={onTextDataSubmit}
+                setFailureBanner={setFailureBanner}
+                jsonResult={jsonResult}
+            />
+            <section>
+                <h2>Output</h2>
+                <DownloadSVGButton svgResult={svgResult} />
+                <ErrorBoundary
+                    fallback={
+                        <p data-testid="svg-display-error-boundary">
+                            This is valid JSON but not valid Memory Models JSON.
+                            Please refer to the repo for more details.
+                        </p>
+                    }
+                    key={jsonResult}
+                >
+                    <SvgDisplay
                         jsonResult={jsonResult}
                         configData={configData}
-                        setConfigData={setConfigData}
-                        svgResult={svgResult}
                         setSvgResult={setSvgResult}
                     />
-                </Box>
-            </Box>
+                </ErrorBoundary>
+            </section>
         </>
     );
 }

demo/src/AppTwo.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { configDataPropTypes } from "./UserInput";
+import UserInput from "./UserInput";
+import Header from "./Header";
+import { Box } from "@mui/material";
+import { ErrorBoundary } from "react-error-boundary";
+import UserOutput from "./UserOutput";
+
+export default function AppTwo() {
+    const [textData, setTextData] = useState("");
+    const [configData, setConfigData] = useState<configDataPropTypes>({
+        useAutomation: true,
+        overallDrawConfig: {
+            seed: 0,
+        },
+    });
+    const [jsonResult, setJsonResult] = useState(null);
+    const [svgResult, setSvgResult] = useState(null);
+    const [failureBanner, setFailureBanner] = useState("");
+
+    const onTextDataSubmit = (event?) => {
+        event?.preventDefault();
+        try {
+            setJsonResult(JSON.parse(textData));
+            setFailureBanner("");
+        } catch (error) {
+            const errorMessage = `Error parsing inputted JSON: ${error.message}`;
+            console.error(errorMessage);
+            setFailureBanner(errorMessage);
+            setJsonResult(null);
+        }
+    };
+
+    return (
+        <>
+            <Header />
+            <Box
+                sx={{
+                    display: "flex",
+                    gap: "2rem",
+                }}
+            >
+                <Box sx={{ width: "40%" }}>
+                    <UserInput
+                        textData={textData}
+                        setTextData={setTextData}
+                        configData={configData}
+                        setConfigData={setConfigData}
+                        onTextDataSubmit={onTextDataSubmit}
+                        setFailureBanner={setFailureBanner}
+                        jsonResult={jsonResult}
+                    />
+                </Box>
+                <Box sx={{ width: "60%" }}>
+                    <UserOutput
+                        jsonResult={jsonResult}
+                        configData={configData}
+                        setConfigData={setConfigData}
+                        svgResult={svgResult}
+                        setSvgResult={setSvgResult}
+                    />
+                </Box>
+            </Box>
+        </>
+    );
+}

demo/src/DownloadJSONButton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Button } from "@mui/material";
+
+type DownloadJSONButtonPropTypes = {
+    jsonResult: string;
+    sx: object;
+};
+export default function DownloadJSONButton(props: DownloadJSONButtonPropTypes) {
+    const file = new Blob([JSON.stringify(props.jsonResult, null, 2)], {
+        type: "application/JSON",
+    });
+
+    return (
+        <Button
+            variant="contained"
+            color="primary"
+            data-testid="download-json-btn"
+            disabled={!props.jsonResult}
+            download="memory_model.json"
+            target="_blank"
+            rel="noreferrer"
+            href={window.URL.createObjectURL(file)}
+            sx={{ ...props.sx, textTransform: "none" }}
+        >
+            Download This JSON
+        </Button>
+    );
+}

demo/src/DownloadSVGButton.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Button } from "@mui/material";
+
+type DownloadSVGButtonPropTypes = {
+    svgResult: string;
+};
+export default function DownloadSVGButton(props: DownloadSVGButtonPropTypes) {
+    const file = new global.Blob([props.svgResult], { type: "image/svg+xml" });
+
+    return (
+        <Button
+            variant="contained"
+            color="primary"
+            data-testid="download-svg-btn"
+            disabled={!props.svgResult}
+            href={URL.createObjectURL(file)}
+            target="_blank"
+            rel="noreferrer"
+            download="output.svg"
+            sx={{ textTransform: "none" }}
+        >
+            Download This SVG
+        </Button>
+    );
+}

demo/src/MemoryModelsSample.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Button,
+    Card,
+    CardContent,
+    Grid,
+} from "@mui/material";
+import { ExpandMore } from "@mui/icons-material";
+
+import { SAMPLES } from "./sample";
+
+type MemoryModelsSamplePropTypes = {
+    setTextData: React.Dispatch<React.SetStateAction<string>>;
+    setConfigData: React.Dispatch<React.SetStateAction<object>>;
+    onTextDataSubmit: () => void;
+};
+
+export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) {
+    const [clickedBtnIndex, setClickedBtnIndex] = useState<Number>(null);
+
+    useEffect(() => {
+        if (clickedBtnIndex !== null) {
+            props.onTextDataSubmit();
+        }
+    }, [clickedBtnIndex]);
+
+    const handleButtonClick = (index: Number, sample: Object) => {
+        // Note: the following conversion to a string is inefficient, as the data is later parsed
+        // back into JSON for rendering.
+        // TODO: fix this.
+        props.setTextData(JSON.stringify(sample["data"], null, 4));
+        props.setConfigData((prevConfigData) => ({
+            ...prevConfigData,
+            ...sample["config"],
+        }));
+        setClickedBtnIndex(index);
+    };
+
+    return (
+        <Accordion>
+            <AccordionSummary
+                expandIcon={<ExpandMore />}
+                data-testid="sample-inputs-accordion"
+            >
+                Sample Inputs
+            </AccordionSummary>
+            <AccordionDetails>
+                <Card color="neutral">
+                    <CardContent>
+                        <Grid container spacing={2}>
+                            {SAMPLES.map((sample, index) => (
+                                <Grid item xs={12} sm={6} md={4} key={index}>
+                                    <Button
+                                        variant="contained"
+                                        onClick={() =>
+                                            handleButtonClick(index, sample)
+                                        }
+                                        color={
+                                            index === clickedBtnIndex
+                                                ? "success"
+                                                : "primary"
+                                        }
+                                        sx={{ textTransform: "capitalize" }}
+                                    >
+                                        {sample["name"]}
+                                    </Button>
+                                </Grid>
+                            ))}
+                        </Grid>
+                    </CardContent>
+                </Card>
+            </AccordionDetails>
+        </Accordion>
+    );
+}