From d9712907ed5705c86f16e2bfa51306e14505c346 Mon Sep 17 00:00:00 2001
From: yoonieaj <144498960+yoonieaj@users.noreply.github.com>
Date: Mon, 19 Aug 2024 08:04:54 -0400
Subject: [PATCH] Improve website layout (#69)

* Adopt horizontal layout
* Display MemoryViz logo
* Change sample input and rendering options sections into dropdown menus
---
 CHANGELOG.md                                  |   2 +
 demo/jest.config.ts                           |   3 +
 demo/src/App.tsx                              |  70 +++---
 demo/src/DownloadJSONButton.tsx               |   7 +-
 demo/src/DownloadSVGButton.tsx                |   4 +-
 demo/src/Header.tsx                           |  42 ++++
 demo/src/MemoryModelsMenu.tsx                 |  37 +++
 demo/src/MemoryModelsSample.tsx               |  58 ++---
 demo/src/MemoryModelsUserInput.tsx            | 218 ++++++++----------
 demo/src/SvgDisplay.tsx                       |  23 +-
 .../src/__tests__/DownloadJSONButton.spec.tsx |   2 +-
 demo/src/__tests__/DownloadSVGButton.spec.tsx |   2 +-
 .../src/__tests__/MemoryModelsSample.spec.tsx |  20 +-
 .../__tests__/MemoryModelsUserInput.spec.tsx  |   7 +-
 demo/src/css/styles.css                       |  14 ++
 demo/src/declarations.d.ts                    |   5 +
 demo/src/html/index.html                      |  17 +-
 demo/src/index.tsx                            |  17 +-
 demo/src/mocks/fileMock.js                    |   2 +
 demo/webpack.common.js                        |   4 +
 20 files changed, 318 insertions(+), 236 deletions(-)
 create mode 100644 demo/src/Header.tsx
 create mode 100644 demo/src/MemoryModelsMenu.tsx
 create mode 100644 demo/src/declarations.d.ts
 create mode 100644 demo/src/mocks/fileMock.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81e3e745..775e2e5b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### 📚 Documentation and demo website changes
 
+-   Reformatted demo website to horizontal layout.
+
 ### 🔧 Internal changes
 
 ## [0.3.0] - 2024-08-02
diff --git a/demo/jest.config.ts b/demo/jest.config.ts
index 2b313f7c..76676a39 100644
--- a/demo/jest.config.ts
+++ b/demo/jest.config.ts
@@ -93,6 +93,9 @@ const config: Config = {
         // Force module roughjs to resolve with the CJS entry point, because Jest does not support package.json.exports. Elaborated in PR#15.
         roughjs: require.resolve("roughjs"),
         "memory-viz": require.resolve("../memory-viz/src"),
+        // Mocks a file (see fileMock.js) each time any of the below file types are imported.
+        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|less|sass|scss)$":
+            "./mocks/fileMock.js",
     },
 
     // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 4a0c3c4d..ac85dca4 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from "react";
+import { Box, Stack } from "@mui/material";
 import SvgDisplay from "./SvgDisplay";
 import MemoryModelsUserInput from "./MemoryModelsUserInput";
 import { ErrorBoundary } from "react-error-boundary";
 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("");
@@ -33,45 +34,46 @@ export default function App() {
     };
 
     return (
-        <>
+        <main className="container">
+            <Header />
             {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}
+            <Stack direction="row" spacing={2}>
+                <Box sx={{ width: "40%" }}>
+                    <h2>Input</h2>
+                    <MemoryModelsUserInput
+                        textData={textData}
+                        setTextData={setTextData}
                         configData={configData}
-                        setSvgResult={setSvgResult}
+                        setConfigData={setConfigData}
+                        onTextDataSubmit={onTextDataSubmit}
+                        setFailureBanner={setFailureBanner}
+                        jsonResult={jsonResult}
                     />
-                </ErrorBoundary>
-            </section>
-        </>
+                </Box>
+                <Box sx={{ width: "60%" }}>
+                    <h2>Output</h2>
+                    <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}
+                            setSvgResult={setSvgResult}
+                        />
+                    </ErrorBoundary>
+                    <DownloadSVGButton svgResult={svgResult} />
+                </Box>
+            </Stack>
+        </main>
     );
 }
diff --git a/demo/src/DownloadJSONButton.tsx b/demo/src/DownloadJSONButton.tsx
index 838613a9..bbbfd8bf 100644
--- a/demo/src/DownloadJSONButton.tsx
+++ b/demo/src/DownloadJSONButton.tsx
@@ -3,7 +3,6 @@ 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)], {
@@ -12,7 +11,7 @@ export default function DownloadJSONButton(props: DownloadJSONButtonPropTypes) {
 
     return (
         <Button
-            variant="contained"
+            variant="text"
             color="primary"
             data-testid="download-json-btn"
             disabled={!props.jsonResult}
@@ -20,9 +19,9 @@ export default function DownloadJSONButton(props: DownloadJSONButtonPropTypes) {
             target="_blank"
             rel="noreferrer"
             href={window.URL.createObjectURL(file)}
-            sx={{ ...props.sx, textTransform: "none" }}
+            sx={{ textTransform: "none" }}
         >
-            Download This JSON
+            Download JSON
         </Button>
     );
 }
diff --git a/demo/src/DownloadSVGButton.tsx b/demo/src/DownloadSVGButton.tsx
index 00cf0a96..2ca8ba0d 100644
--- a/demo/src/DownloadSVGButton.tsx
+++ b/demo/src/DownloadSVGButton.tsx
@@ -9,8 +9,8 @@ export default function DownloadSVGButton(props: DownloadSVGButtonPropTypes) {
 
     return (
         <Button
-            variant="contained"
             color="primary"
+            variant="text"
             data-testid="download-svg-btn"
             disabled={!props.svgResult}
             href={URL.createObjectURL(file)}
@@ -19,7 +19,7 @@ export default function DownloadSVGButton(props: DownloadSVGButtonPropTypes) {
             download="output.svg"
             sx={{ textTransform: "none" }}
         >
-            Download This SVG
+            Download SVG
         </Button>
     );
 }
diff --git a/demo/src/Header.tsx b/demo/src/Header.tsx
new file mode 100644
index 00000000..36f96777
--- /dev/null
+++ b/demo/src/Header.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Box, Link, Stack, Typography } from "@mui/material";
+import image from "../../assets/logo_square.png";
+
+export default function Header() {
+    return (
+        <header className="container">
+            <Stack direction={"row"} justifyContent={"space-between"}>
+                <Box>
+                    <h1 style={{ marginBottom: 0 }}>MemoryViz Demo</h1>
+                    <Typography variant="subtitle1">
+                        Demos of the{" "}
+                        <Link
+                            href="https://github.com/david-yz-liu/memory-viz"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            MemoryViz
+                        </Link>{" "}
+                        Javascript library for visualizing Python memory. Click{" "}
+                        <Link
+                            href="https://www.cs.toronto.edu/~david/memory-viz/docs/api/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            here
+                        </Link>{" "}
+                        for documentation.
+                    </Typography>
+                </Box>
+                <img
+                    src={image}
+                    alt="MemoryViz Logo"
+                    style={{
+                        width: "100px",
+                        objectFit: "contain",
+                    }}
+                />
+            </Stack>
+        </header>
+    );
+}
diff --git a/demo/src/MemoryModelsMenu.tsx b/demo/src/MemoryModelsMenu.tsx
new file mode 100644
index 00000000..26d03c4b
--- /dev/null
+++ b/demo/src/MemoryModelsMenu.tsx
@@ -0,0 +1,37 @@
+import React, { ReactNode, useState } from "react";
+import { Box, Button, Menu } from "@mui/material";
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
+import "./css/styles.css";
+
+type MemoryModelsMenuPropTypes = {
+    menuName: string;
+    testId: string;
+    menuItems: ReactNode;
+};
+
+export default function MemoryModelsMenu(props: MemoryModelsMenuPropTypes) {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <Button
+                onClick={handleClick}
+                data-testid={props.testId}
+                className={`menu-button ${open ? "open" : ""}`}
+            >
+                {props.menuName}
+                <ExpandMoreRoundedIcon />
+            </Button>
+            <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+                <Box>{props.menuItems}</Box>
+            </Menu>
+        </>
+    );
+}
diff --git a/demo/src/MemoryModelsSample.tsx b/demo/src/MemoryModelsSample.tsx
index fe528583..04a89ff8 100644
--- a/demo/src/MemoryModelsSample.tsx
+++ b/demo/src/MemoryModelsSample.tsx
@@ -1,14 +1,6 @@
 import React, { useEffect, useState } from "react";
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    Button,
-    Card,
-    CardContent,
-    Grid,
-} from "@mui/material";
-import { ExpandMore } from "@mui/icons-material";
+import { Box, MenuItem } from "@mui/material";
+import MemoryModelsMenu from "./MemoryModelsMenu";
 
 import { SAMPLES } from "./sample";
 
@@ -40,39 +32,17 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) {
     };
 
     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>
+        <MemoryModelsMenu
+            menuName="Sample Inputs"
+            testId="sample-inputs-menu"
+            menuItems={SAMPLES.map((sample, index) => (
+                <MenuItem
+                    key={index}
+                    onClick={() => handleButtonClick(index, sample)}
+                >
+                    {sample["name"]}
+                </MenuItem>
+            ))}
+        />
     );
 }
diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx
index 1f392135..eba69408 100644
--- a/demo/src/MemoryModelsUserInput.tsx
+++ b/demo/src/MemoryModelsUserInput.tsx
@@ -1,21 +1,18 @@
 import React, { useState } from "react";
 import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
+    Box,
     Button,
-    Card,
-    CardContent,
     Checkbox,
     FormControlLabel,
-    Grid,
     Input,
-    Stack,
     TextField,
     Tooltip,
+    MenuItem,
+    Stack,
 } from "@mui/material";
 import DownloadJSONButton from "./DownloadJSONButton";
-import { ExpandMore } from "@mui/icons-material";
+import MemoryModelsMenu from "./MemoryModelsMenu";
+import MemoryModelsSample from "./MemoryModelsSample";
 
 interface configDataPropTypes {
     useAutomation: boolean;
@@ -44,7 +41,7 @@ type MemoryModelsTextInputPropTypes = {
 type MemoryModelsUserInputPropTypes = MemoryModelsFileInputPropTypes &
     MemoryModelsTextInputPropTypes &
     MemoryModelsConfigInputPropTypes & {
-        onTextDataSubmit: (event: React.MouseEvent<HTMLFormElement>) => void;
+        onTextDataSubmit: (event?: React.MouseEvent<HTMLFormElement>) => void;
     };
 
 function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
@@ -73,36 +70,26 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
     };
 
     return (
-        <CardContent>
-            <Stack
-                direction={{ xs: "column", sm: "row" }}
-                spacing={{ xs: 1, sm: 2, md: 4 }}
+        <Stack direction={"row"} spacing={2}>
+            <Input
+                type="file"
+                onChange={onChange}
+                inputProps={{
+                    accept: "application/JSON",
+                    "data-testid": "file-input",
+                }}
+                disableUnderline={true}
+            />
+            <Button
+                data-testid="file-input-reapply-button"
+                variant="contained"
+                disabled={!uploadedFileString}
+                onClick={onLoadButtonClick}
+                sx={{ textTransform: "none" }}
             >
-                <Input
-                    type="file"
-                    onChange={onChange}
-                    inputProps={{
-                        accept: "application/JSON",
-                        "data-testid": "file-input",
-                    }}
-                    sx={{ width: "33.33%" }}
-                    disableUnderline={true}
-                />
-                <Button
-                    data-testid="file-input-reapply-button"
-                    variant="contained"
-                    disabled={!uploadedFileString}
-                    onClick={onLoadButtonClick}
-                    sx={{ width: "33.33%", textTransform: "none" }}
-                >
-                    Load file data
-                </Button>
-                <DownloadJSONButton
-                    jsonResult={props.jsonResult}
-                    sx={{ width: "33.33%" }}
-                />
-            </Stack>
-        </CardContent>
+                Load file data
+            </Button>
+        </Stack>
     );
 }
 
@@ -112,24 +99,17 @@ function MemoryModelsTextInput(props: MemoryModelsTextInputPropTypes) {
     };
 
     return (
-        <CardContent>
-            <TextField
-                id="multiline-memory-models-textfield"
-                data-testid="textfield-input"
-                label="Enter memory model JSON here"
-                multiline
-                fullWidth
-                rows={10}
-                variant="outlined"
-                value={props.textData}
-                onChange={handleTextFieldChange}
-                style={{
-                    width: "100%",
-                    height: "80%",
-                    fontFamily: "Monospace",
-                }}
-            />
-        </CardContent>
+        <TextField
+            id="multiline-memory-models-textfield"
+            data-testid="textfield-input"
+            label="Enter memory model JSON here"
+            multiline
+            fullWidth
+            rows={10}
+            variant="outlined"
+            value={props.textData}
+            onChange={handleTextFieldChange}
+        />
     );
 }
 
@@ -157,36 +137,42 @@ function MemoryModelsConfigInput(props: MemoryModelsConfigInputPropTypes) {
     };
 
     return (
-        <CardContent>
-            <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
-                <TextField
-                    label="Seed"
-                    id="config-seed"
-                    variant="outlined"
-                    value={props.configData.overallDrawConfig.seed}
-                    onChange={handleSeedChange}
-                    type="number"
-                    InputProps={{
-                        inputProps: {
-                            min: 0,
-                            max: 2 ** 31,
-                            "data-testid": "config-seed",
-                        },
-                    }}
-                    sx={{ width: "50%" }}
-                />
-                <FormControlLabel
-                    control={
-                        <Checkbox
-                            checked={props.configData.useAutomation}
-                            onChange={handleAutomationChange}
+        <MemoryModelsMenu
+            menuName="Rendering Options"
+            testId="rendering-options-menu"
+            menuItems={
+                <>
+                    <MenuItem>
+                        <TextField
+                            label="Seed"
+                            id="config-seed"
+                            variant="outlined"
+                            value={props.configData.overallDrawConfig.seed}
+                            type="number"
+                            onChange={handleSeedChange}
+                            InputProps={{
+                                inputProps: {
+                                    min: 0,
+                                    max: 2 ** 31,
+                                    "data-testid": "config-seed",
+                                },
+                            }}
                         />
-                    }
-                    label="Use automatic layout"
-                    sx={{ width: "50%" }}
-                />
-            </Stack>
-        </CardContent>
+                    </MenuItem>
+                    <MenuItem>
+                        <FormControlLabel
+                            control={
+                                <Checkbox
+                                    checked={props.configData.useAutomation}
+                                    onChange={handleAutomationChange}
+                                />
+                            }
+                            label="Use automatic layout"
+                        />
+                    </MenuItem>
+                </>
+            }
+        />
     );
 }
 
@@ -195,36 +181,34 @@ export default function MemoryModelsUserInput(
 ) {
     return (
         <form data-testid="input-form" onSubmit={props.onTextDataSubmit}>
-            <Grid container spacing={2}>
-                <Grid item xs={12}>
-                    <Card color="neutral">
-                        <MemoryModelsFileInput
-                            textData={props.textData}
-                            setTextData={props.setTextData}
-                            setFailureBanner={props.setFailureBanner}
-                            jsonResult={props.jsonResult}
-                        />
-                        <MemoryModelsTextInput
-                            textData={props.textData}
-                            setTextData={props.setTextData}
-                        />
-                        <Accordion>
-                            <AccordionSummary
-                                expandIcon={<ExpandMore />}
-                                data-testid="rendering-options-accordion"
-                            >
-                                Rendering Options
-                            </AccordionSummary>
-                            <AccordionDetails>
-                                <Card color="neutral" variant="outlined">
-                                    <MemoryModelsConfigInput
-                                        configData={props.configData}
-                                        setConfigData={props.setConfigData}
-                                    />
-                                </Card>
-                            </AccordionDetails>
-                        </Accordion>
-                    </Card>
+            <Stack spacing={2}>
+                <MemoryModelsFileInput
+                    textData={props.textData}
+                    setTextData={props.setTextData}
+                    setFailureBanner={props.setFailureBanner}
+                    jsonResult={props.jsonResult}
+                />
+                <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+                    <MemoryModelsSample
+                        setTextData={props.setTextData}
+                        setConfigData={props.setConfigData}
+                        onTextDataSubmit={props.onTextDataSubmit}
+                    />
+                    <MemoryModelsConfigInput
+                        configData={props.configData}
+                        setConfigData={props.setConfigData}
+                    />
+                </Box>
+                <MemoryModelsTextInput
+                    textData={props.textData}
+                    setTextData={props.setTextData}
+                />
+                <Stack
+                    direction="row"
+                    spacing={2}
+                    sx={{ justifyContent: "space-between" }}
+                >
+                    <DownloadJSONButton jsonResult={props.jsonResult} />
                     <Tooltip title="Input JSON to draw diagram">
                         <span>
                             <Button
@@ -239,8 +223,8 @@ export default function MemoryModelsUserInput(
                             </Button>
                         </span>
                     </Tooltip>
-                </Grid>
-            </Grid>
+                </Stack>
+            </Stack>
         </form>
     );
 }
diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx
index 5dbdcb76..cfede943 100644
--- a/demo/src/SvgDisplay.tsx
+++ b/demo/src/SvgDisplay.tsx
@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from "react";
 import mem from "memory-viz";
+import { Paper } from "@mui/material";
 import { configDataPropTypes } from "./MemoryModelsUserInput";
 
 type SvgDisplayPropTypes = {
@@ -29,11 +30,21 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) {
     }, [props.jsonResult]);
 
     return (
-        <canvas
-            data-testid="memory-models-canvas"
-            ref={canvasRef}
-            width={canvasWidth}
-            height={canvasHeight}
-        />
+        <Paper
+            sx={{
+                height: 500,
+                overflow: "auto",
+            }}
+            variant="outlined"
+        >
+            <canvas
+                data-testid="memory-models-canvas"
+                ref={canvasRef}
+                width={canvasWidth}
+                height={canvasHeight}
+            />
+        </Paper>
     );
 }
+
+export type { SvgDisplayPropTypes };
diff --git a/demo/src/__tests__/DownloadJSONButton.spec.tsx b/demo/src/__tests__/DownloadJSONButton.spec.tsx
index 82b5d00b..8313fce9 100644
--- a/demo/src/__tests__/DownloadJSONButton.spec.tsx
+++ b/demo/src/__tests__/DownloadJSONButton.spec.tsx
@@ -10,7 +10,7 @@ describe("DownloadJSONButton", () => {
     });
 
     test("renders with correct text", () => {
-        const downloadButton = screen.getByText("Download This JSON");
+        const downloadButton = screen.getByText("Download JSON");
         expect(downloadButton).toBeDefined();
     });
 });
diff --git a/demo/src/__tests__/DownloadSVGButton.spec.tsx b/demo/src/__tests__/DownloadSVGButton.spec.tsx
index 00bc9d97..fe4d0baa 100644
--- a/demo/src/__tests__/DownloadSVGButton.spec.tsx
+++ b/demo/src/__tests__/DownloadSVGButton.spec.tsx
@@ -9,7 +9,7 @@ describe("DownloadSVGButton", () => {
     });
 
     test("renders with correct text", () => {
-        const downloadButton = screen.getByText("Download This SVG");
+        const downloadButton = screen.getByText("Download SVG");
         expect(downloadButton).toBeDefined();
     });
 });
diff --git a/demo/src/__tests__/MemoryModelsSample.spec.tsx b/demo/src/__tests__/MemoryModelsSample.spec.tsx
index 933207c7..6871c7c6 100644
--- a/demo/src/__tests__/MemoryModelsSample.spec.tsx
+++ b/demo/src/__tests__/MemoryModelsSample.spec.tsx
@@ -37,23 +37,27 @@ describe("MemoryModelsSample", () => {
         );
     });
 
-    it("renders Accordion", () => {
-        expect(
-            screen.getByTestId("sample-inputs-accordion").textContent
-        ).toEqual("Sample Inputs");
+    it("renders Menu", () => {
+        expect(screen.getByTestId("sample-inputs-menu").textContent).toEqual(
+            "Sample Inputs"
+        );
         expect(screen.getByText("Sample Inputs")).toBeDefined();
     });
 
-    it("renders all sample buttons", () => {
+    it("renders all sample buttons", async () => {
         // sx for MUI comps or non-inline CSS in general will not be loaded into Jest by default
         // might be achievable with some libs but this test makes sure the base texts are present.
         // Therefore, we can't test for capitalization (via sx) here
-        SAMPLES.map((sample) =>
-            expect(screen.getByText(sample["name"])).toBeDefined()
-        );
+        fireEvent.click(screen.getByText("Sample Inputs"));
+        await waitFor(() => {
+            SAMPLES.map((sample) =>
+                expect(screen.getByText(sample["name"])).toBeDefined()
+            );
+        });
     });
 
     it("handles sample button click", async () => {
+        fireEvent.click(screen.getByText("Sample Inputs"));
         const button = screen.getByText("Automated Layout");
         fireEvent.click(button);
 
diff --git a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
index 9f580016..924d6ec7 100644
--- a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
+++ b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
@@ -21,7 +21,7 @@ describe("MemoryModelsUserInput", () => {
         textDataMock = "";
     });
 
-    it("renders Accordion for MemoryModelsConfigInput", () => {
+    it("renders Menu for MemoryModelsConfigInput", () => {
         render(
             <MemoryModelsUserInput
                 onTextDataSubmit={onSubmitMock}
@@ -34,7 +34,7 @@ describe("MemoryModelsUserInput", () => {
             />
         );
         expect(
-            screen.getByTestId("rendering-options-accordion").textContent
+            screen.getByTestId("rendering-options-menu").textContent
         ).toEqual("Rendering Options");
     });
 
@@ -223,6 +223,7 @@ describe("MemoryModelsUserInput", () => {
         });
 
         it("renders a number input with correct props and checkbox that is checked by default", () => {
+            fireEvent.click(screen.getByText("Rendering Options"));
             const seedInput: HTMLInputElement =
                 screen.getByTestId("config-seed");
             [
@@ -242,6 +243,7 @@ describe("MemoryModelsUserInput", () => {
         });
 
         it("handles seed change", () => {
+            fireEvent.click(screen.getByText("Rendering Options"));
             const seedInput: HTMLInputElement =
                 screen.getByTestId("config-seed");
             const mockSeed = "123";
@@ -256,6 +258,7 @@ describe("MemoryModelsUserInput", () => {
         });
 
         it("handles automation change", () => {
+            fireEvent.click(screen.getByText("Rendering Options"));
             const automationCheckbox: HTMLInputElement = screen.getByLabelText(
                 "Use automatic layout"
             );
diff --git a/demo/src/css/styles.css b/demo/src/css/styles.css
index 61ac33e6..43c1785e 100644
--- a/demo/src/css/styles.css
+++ b/demo/src/css/styles.css
@@ -6,3 +6,17 @@ input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
+
+.menu-button {
+    text-transform: none !important;
+}
+
+.menu-button .MuiSvgIcon-root {
+    transition: transform 0.2s ease-in-out;
+    transform: rotate(0deg);
+}
+
+.menu-button.open .MuiSvgIcon-root {
+    transition: transform 0.2s ease-in-out;
+    transform: rotate(180deg);
+}
diff --git a/demo/src/declarations.d.ts b/demo/src/declarations.d.ts
new file mode 100644
index 00000000..a860a74b
--- /dev/null
+++ b/demo/src/declarations.d.ts
@@ -0,0 +1,5 @@
+// Prevents module not found errors when importing images
+declare module "*.png" {
+    const value: any;
+    export default value;
+}
diff --git a/demo/src/html/index.html b/demo/src/html/index.html
index cfe91ced..417cd489 100644
--- a/demo/src/html/index.html
+++ b/demo/src/html/index.html
@@ -4,21 +4,8 @@
         <meta charset="UTF-8" />
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
+
     <body>
-        <header class="container">
-            <hgroup>
-                <h1><%= htmlWebpackPlugin.options.title %></h1>
-                <p>
-                    Demos of the
-                    <a href="https://github.com/david-yz-liu/memory-viz"
-                        >MemoryViz</a
-                    >
-                    Javascript library for visualizing Python memory.
-                </p>
-            </hgroup>
-        </header>
-        <main class="container">
-            <div id="app"></div>
-        </main>
+        <div id="root"></div>
     </body>
 </html>
diff --git a/demo/src/index.tsx b/demo/src/index.tsx
index 6aa66ed1..bbe295e7 100644
--- a/demo/src/index.tsx
+++ b/demo/src/index.tsx
@@ -4,9 +4,22 @@ import App from "./App";
 import "@picocss/pico";
 import "./css/styles";
 
-const root = createRoot(document.getElementById("app"));
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+const theme = createTheme({
+    palette: {
+        primary: {
+            main: "#2a6b2c",
+            dark: "#005ea5",
+            light: "#72ac56",
+        },
+    },
+});
+
+const root = createRoot(document.getElementById("root"));
 root.render(
     <StrictMode>
-        <App />
+        <ThemeProvider theme={theme}>
+            <App />
+        </ThemeProvider>
     </StrictMode>
 );
diff --git a/demo/src/mocks/fileMock.js b/demo/src/mocks/fileMock.js
new file mode 100644
index 00000000..d435a1b1
--- /dev/null
+++ b/demo/src/mocks/fileMock.js
@@ -0,0 +1,2 @@
+// Mock file for Jest tests which include images or imported styling
+module.exports = "";
diff --git a/demo/webpack.common.js b/demo/webpack.common.js
index ace98fef..0090834b 100644
--- a/demo/webpack.common.js
+++ b/demo/webpack.common.js
@@ -28,6 +28,10 @@ module.exports = {
                 use: ["style-loader", "css-loader"],
             },
             { test: /\.json$/, type: "json" },
+            {
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+                type: "asset/resource",
+            },
         ],
     },
     externals: {