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 ( - <> +
+
{failureBanner && ( {failureBanner} )} - - -
-

Output

- - - This is valid JSON but not valid Memory Models JSON. - Please refer to the repo for more details. -

- } - key={jsonResult} - > - + +

Input

+ - -
- + + +

Output

+ + This is valid JSON but not valid Memory Models + JSON. Please refer to the repo for more details. +

+ } + key={jsonResult} + > + + + + + +
); } 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 ( ); } 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 ( ); } 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 ( +
+ + +

MemoryViz Demo

+ + Demos of the{" "} + + MemoryViz + {" "} + Javascript library for visualizing Python memory. Click{" "} + + here + {" "} + for documentation. + + + MemoryViz Logo + +
+ ); +} 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); + const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + <> + + + {props.menuItems} + + + ); +} 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 ( - - } - data-testid="sample-inputs-accordion" - > - Sample Inputs - - - - - - {SAMPLES.map((sample, index) => ( - - - - ))} - - - - - + ( + handleButtonClick(index, sample)} + > + {sample["name"]} + + ))} + /> ); } 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) => void; + onTextDataSubmit: (event?: React.MouseEvent) => void; }; function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { @@ -73,36 +70,26 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { }; return ( - - + + - - - + Load file data + + ); } @@ -112,24 +99,17 @@ function MemoryModelsTextInput(props: MemoryModelsTextInputPropTypes) { }; return ( - - - + ); } @@ -157,36 +137,42 @@ function MemoryModelsConfigInput(props: MemoryModelsConfigInputPropTypes) { }; return ( - - - - + + - } - label="Use automatic layout" - sx={{ width: "50%" }} - /> - - + + + + } + label="Use automatic layout" + /> + + + } + /> ); } @@ -195,36 +181,34 @@ export default function MemoryModelsUserInput( ) { return (
- - - - - - - } - data-testid="rendering-options-accordion" - > - Rendering Options - - - - - - - - + + + + + + + + +