Add starter code

.github/workflows/ci.yml

@@ -29,6 +29,7 @@ jobs:
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
 
+    # TODO: add webstepper here
     build:
         runs-on: ubuntu-latest
         if: github.event.pull_request.draft == false

package.json

@@ -7,7 +7,8 @@
     "workspaces": [
         "memory-viz",
         "demo",
-        "docs"
+        "docs",
+        "webstepper"
     ],
     "devDependencies": {
         "husky": "^9.1.5",

webstepper/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "memory-viz-webstepper",
+    "version": "0.1.0",
+    "description": "An interactive web stepper for memory-viz",
+    "scripts": {
+        "test": "jest --no-cache",
+        "test-cov": "jest --no-cache --coverage",
+        "build-dev": "webpack --config webpack.dev.js",
+        "build": "webpack --config webpack.prod.js",
+        "start": "webpack serve --config webpack.dev.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/david-yz-liu/memory-viz.git"
+    },
+    "author": "David Liu",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/david-yz-liu/memory-viz/issues"
+    },
+    "private": true,
+    "homepage": "https://github.com/david-yz-liu/memory-viz#readme",
+    "devDependencies": {
+        "@babel/core": "^7.23.6",
+        "@babel/preset-env": "^7.23.6",
+        "@babel/preset-react": "^7.23.3",
+        "@babel/preset-typescript": "^7.24.7",
+        "@testing-library/react": "^14.2.1",
+        "@types/react": "^18.3.5",
+        "@types/react-dom": "^18.2.18",
+        "babel-jest": "^29.7.0",
+        "babel-loader": "^9.1.3",
+        "css-loader": "^6.8.1",
+        "html-webpack-plugin": "^5.6.0",
+        "jest-canvas-mock": "^2.5.2",
+        "jest-environment-jsdom": "^29.7.0",
+        "style-loader": "^3.3.3",
+        "typescript": "^5.5.4",
+        "webpack": "^5.94.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-merge": "^5.10.0"
+    },
+    "dependencies": {
+        "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^6.0.1",
+        "@mui/material": "^6.0.1",
+        "@picocss/pico": "^1.5.10",
+        "memory-viz": "*",
+        "react": "^18.3.1",
+        "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.12",
+        "react-zoom-pan-pinch": "^3.6.1"
+    }
+}

webstepper/src/App.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Header from "./Header";
+
+export default function App() {
+    return (
+        <main className="container">
+            <Header />
+        </main>
+    );
+}

webstepper/src/Header.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Box, Link, Stack, Typography, useMediaQuery } from "@mui/material";
+import lightLogo from "../../assets/logo_square.png";
+import darkLogo from "../../assets/logo_square_dark.png";
+import { dark } from "@mui/material/styles/createPalette";
+
+export default function Header() {
+    const logo = useMediaQuery("(prefers-color-scheme: dark)")
+        ? darkLogo
+        : lightLogo;
+
+    return (
+        <header className="container">
+            <Stack direction={"row"} justifyContent={"space-between"}>
+                <Box>
+                    <h1 style={{ marginBottom: 0 }}>MemoryViz Stepper</h1>
+                    <Typography variant="subtitle1">
+                        A web debugger for 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={logo}
+                    alt="MemoryViz Logo"
+                    style={{
+                        width: "100px",
+                        objectFit: "contain",
+                    }}
+                />
+            </Stack>
+        </header>
+    );
+}

webstepper/src/SvgDisplay.tsx

@@ -0,0 +1,66 @@
+import React, { useRef, useEffect } from "react";
+import mem from "memory-viz";
+import { Paper } from "@mui/material";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+
+type SvgDisplayPropTypes = {
+    jsonResult: object | null;
+    setSvgResult: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export default function SvgDisplay(props: SvgDisplayPropTypes) {
+    const canvasRef = useRef(null);
+    const canvasWidth = 1300;
+    const canvasHeight = 1000;
+
+    useEffect(() => {
+        if (props.jsonResult !== null) {
+            // deep copy jsonResult as mem.draw mutates input JSON
+            // https://github.com/david-yz-liu/memory-viz/pull/20#discussion_r1513235452
+            const jsonResultCopy = structuredClone(props.jsonResult);
+            // const m = mem.draw(jsonResultCopy, props.configData.useAutomation, {
+            //     ...props.configData.overallDrawConfig,
+            //     width: canvasWidth,
+            // });
+            // props.setSvgResult(m.serializeSVG());
+            // m.clear(canvasRef.current);
+            // m.render(canvasRef.current);
+        } else {
+            props.setSvgResult(null);
+        }
+    }, [props.jsonResult]);
+
+    return (
+        <Paper
+            sx={{
+                bgcolor: `primary.paper`,
+                height: 500,
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            }}
+            variant="outlined"
+        >
+            <TransformWrapper
+                minScale={0.2}
+                wheel={{ step: 0.2, smoothStep: 0.01 }}
+            >
+                <TransformComponent>
+                    <canvas
+                        style={{
+                            height: "100%",
+                            width: "100%",
+                        }}
+                        data-testid="memory-models-canvas"
+                        ref={canvasRef}
+                        width={canvasWidth}
+                        height={canvasHeight}
+                    />
+                </TransformComponent>
+            </TransformWrapper>
+        </Paper>
+    );
+}
+
+export type { SvgDisplayPropTypes };

webstepper/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;
+}

webstepper/src/html/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

webstepper/src/index.tsx

@@ -0,0 +1,55 @@
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "@picocss/pico";
+
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { useMediaQuery } from "@mui/material";
+
+declare module "@mui/material/styles" {
+    interface PaletteColor {
+        paper?: String;
+    }
+
+    interface SimplePaletteColorOptions {
+        paper?: string;
+    }
+}
+
+const lightTheme = createTheme({
+    palette: {
+        primary: {
+            main: "#2a6b2c",
+            dark: "#005ea5",
+            light: "#72ac56",
+            paper: "#ffffff",
+        },
+    },
+});
+
+const darkTheme = createTheme({
+    palette: {
+        mode: "dark",
+        primary: {
+            main: "#89c48c",
+            paper: "#cacaca",
+        },
+    },
+});
+
+function Root() {
+    const usingDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    return (
+        <ThemeProvider theme={usingDarkMode ? darkTheme : lightTheme}>
+            <App />
+        </ThemeProvider>
+    );
+}
+
+const root = createRoot(document.getElementById("root"));
+
+root.render(
+    <StrictMode>
+        <Root />
+    </StrictMode>
+);

webstepper/src/types.ts

@@ -0,0 +1,6 @@
+export interface configDataPropTypes {
+    useAutomation: boolean;
+    overallDrawConfig: {
+        [key: string]: any;
+    };
+}

webstepper/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist",
+        "allowJs": true,
+        "declaration": true,
+        "emitDeclarationOnly": true,
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "module": "nodenext",
+        "moduleResolution": "nodenext",
+        "target": "esnext",
+        "sourceMap": true
+    },
+    "include": ["./src/**/*"]
+}

webstepper/webpack.common.js

@@ -0,0 +1,54 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+    entry: path.resolve(__dirname, "src/index.tsx"),
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: "index.bundle.js",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.([jt]sx?)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            "@babel/preset-env",
+                            "@babel/preset-typescript",
+                            "@babel/preset-react",
+                        ],
+                    },
+                },
+            },
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"],
+            },
+            { test: /\.json$/, type: "json" },
+            {
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+                type: "asset/resource",
+            },
+        ],
+    },
+    externals: {
+        fs: "fs",
+    },
+    externalsType: "window",
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: "MemoryViz Demo",
+            filename: "./index.html",
+            template: "./src/html/index.html",
+        }),
+    ],
+    resolve: {
+        extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css"],
+        alias: {
+            "memory-viz": path.resolve(__dirname, "../memory-viz"),
+        },
+    },
+};

webstepper/webpack.dev.js

@@ -0,0 +1,18 @@
+const { merge } = require("webpack-merge");
+const path = require("path");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        static: {
+            directory: path.join(__dirname, "dist"),
+        },
+        compress: true,
+        port: 9000,
+        client: {
+            overlay: false,
+        },
+    },
+});

webstepper/webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "production",
+    devtool: "source-map",
+});