Webstepper style updates and added support for scss (#121)

david-yz-liu · Dec 8, 2024 · 229a46e · 229a46e
1 parent 167e1df
commit 229a46e
Show file tree

Hide file tree

Showing 12 changed files with 517 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/webstepper/CHANGELOG.md b/webstepper/CHANGELOG.md
@@ -11,6 +11,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 - Launchd an initial prototype!
 - Improved UI to indicate when the end of the program is reached.
+- Expanded code and svg displays in UI.
 
 ### 🐛 Bug fixes
 
@@ -24,3 +25,4 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 - Added a script for installing the Webstepper build to a specified path.
 - Updated to use the window object to serve app data.
+- Enabled SCSS support.
diff --git a/webstepper/package.json b/webstepper/package.json
@@ -40,6 +40,8 @@
         "html-webpack-plugin": "^5.6.0",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.7.0",
+        "sass": "^1.82.0",
+        "sass-loader": "^16.0.4",
         "style-loader": "^3.3.3",
         "typescript": "^5.7.2",
         "webpack": "^5.94.0",

diff --git a/webstepper/src/App.tsx b/webstepper/src/App.tsx
@@ -4,7 +4,6 @@ import { Button, Box, Typography, Stack } from "@mui/material";
 import SvgDisplay from "./SvgDisplay";
 import CodeDisplay from "./CodeDisplay";
 import placeholder from "./placeholder";
-import "./css/styles.css";
 
 if (typeof window === "object" && process.env.NODE_ENV !== "production") {
     window.svgArray = placeholder.svgArray;
@@ -21,21 +20,16 @@ export default function App() {
     };
 
     return (
-        <main className="container">
+        <>
             <Header />
-            <Stack direction="row" spacing={2}>
-                <Box sx={{ width: "40%" }}>
-                    <h2>Code</h2>
-                    <Typography>
-                        Step {step + 1}/{limit}
-                    </Typography>
-                    <Box className="code-display">
-                        <CodeDisplay
-                            text={codeText}
-                            startingLineNumber={window.svgArray[0].lineNumber}
-                            highlightLine={window.svgArray[step].lineNumber}
-                        />
-                        <Box className="button-container">
+            <main className="container-fluid">
+                <Stack direction="row" spacing={2} sx={{ height: "100%" }}>
+                    <Stack direction="column" sx={{ width: "45%" }}>
+                        <h2>Code</h2>
+                        <Stack direction="row" className="code-controls">
+                            <Typography>
+                                Step {step + 1}/{limit}
+                            </Typography>
                             <Button
                                 disabled={step === 0}
                                 onClick={() => handleStep(step - 1)}
@@ -48,14 +42,23 @@ export default function App() {
                             >
                                 Next
                             </Button>
+                        </Stack>
+                        <Box className="code-display">
+                            <CodeDisplay
+                                text={codeText}
+                                startingLineNumber={
+                                    window.svgArray[0].lineNumber
+                                }
+                                highlightLine={window.svgArray[step].lineNumber}
+                            />
                         </Box>
-                    </Box>
-                </Box>
-                <Box sx={{ width: "60%" }}>
-                    <h2>Memory diagrams</h2>
-                    <SvgDisplay step={step} />
-                </Box>
-            </Stack>
-        </main>
+                    </Stack>
+                    <Stack direction="column" sx={{ width: "55%" }}>
+                        <h2>Memory visualization</h2>
+                        <SvgDisplay step={step} />
+                    </Stack>
+                </Stack>
+            </main>
+        </>
     );
 }
diff --git a/webstepper/src/CodeDisplay.tsx b/webstepper/src/CodeDisplay.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { a11yLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { Box } from "@mui/material";
-import "./css/styles.css";
 
 type CodeDisplayPropTypes = {
     text: string;
@@ -21,7 +20,6 @@ export default function CodeDisplay(props: CodeDisplayPropTypes) {
                 wrapLines={true}
                 wrapLongLines={true}
                 style={a11yLight}
-                customStyle={{ backgroundColor: "transparent" }}
                 lineProps={(lineNumber: number) => {
                     if (lineNumber == props.highlightLine) {
                         return { className: "code-box__line--highlighted" };

diff --git a/webstepper/src/Header.tsx b/webstepper/src/Header.tsx
@@ -10,38 +10,24 @@ export default function Header() {
         : lightLogo;
 
     return (
-        <header className="container">
+        <header className="container-fluid">
             <Stack direction={"row"} justifyContent={"space-between"}>
                 <Box>
-                    <h1 style={{ marginBottom: 0 }}>MemoryViz Stepper</h1>
+                    <h1>MemoryViz Webstepper</h1>
                     <Typography variant="subtitle1">
-                        A web debugger for the{" "}
+                        A web-based interactive tool for visualizing Python
+                        memory, based on 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.
+                        Javascript library.
                     </Typography>
                 </Box>
-                <img
-                    src={logo}
-                    alt="MemoryViz Logo"
-                    style={{
-                        width: "100px",
-                        objectFit: "contain",
-                    }}
-                />
+                <img src={logo} alt="MemoryViz Logo" className="logo" />
             </Stack>
         </header>
     );

diff --git a/webstepper/src/SvgDisplay.tsx b/webstepper/src/SvgDisplay.tsx
@@ -1,7 +1,6 @@
 import React, { useRef, useEffect } from "react";
 import { Paper } from "@mui/material";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
-import "./css/styles.css";
 
 type SvgDisplayPropTypes = {
     step: number;
@@ -36,10 +35,11 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) {
     return (
         <Paper
             className="svg-display"
+            elevation={3}
             sx={{ bgcolor: "primary.paper" }}
-            variant="outlined"
         >
             <TransformWrapper
+                centerZoomedOut={true}
                 minScale={0.2}
                 wheel={{ step: 0.2, smoothStep: 0.01 }}
             >

diff --git a/webstepper/src/__tests__/App.spec.tsx b/webstepper/src/__tests__/App.spec.tsx
@@ -34,7 +34,7 @@ describe("App", () => {
     it("renders initial state correctly", async () => {
         expect(screen.getByText(/Step \d+\/\d+/)).toBeInTheDocument();
         expect(screen.getByText("Code")).toBeInTheDocument();
-        expect(screen.getByText("Memory diagrams")).toBeInTheDocument();
+        expect(screen.getByText("Memory visualization")).toBeInTheDocument();
     });
 
     it("handles next button click correctly", () => {

diff --git a/webstepper/src/css/styles.css b/webstepper/src/css/styles.css
diff --git a/webstepper/src/css/styles.scss b/webstepper/src/css/styles.scss
@@ -0,0 +1,61 @@
+@use "@picocss/pico";
+
+/* Override default picocss variables */
+h1 {
+    --typography-spacing-vertical: 0.5rem;
+}
+
+h2 {
+    --typography-spacing-vertical: 0.5rem;
+}
+
+pre > code {
+    --spacing: 0.25rem;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+#root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+main {
+    flex: 1;
+}
+
+.code-controls {
+    align-items: center;
+    gap: 10px;
+
+    > button {
+        flex: 1;
+    }
+}
+
+.code-display__code-box > pre {
+    background-color: transparent;
+}
+
+.code-box__line--highlighted {
+    background-color: yellow;
+}
+
+.svg-display {
+    flex: 1;
+    margin-bottom: 1rem;
+}
+
+.react-transform-wrapper {
+    height: 100%;
+    width: 100%;
+}
+
+.logo {
+    object-fit: contain;
+    width: 100px;
+}
diff --git a/webstepper/src/index.tsx b/webstepper/src/index.tsx
@@ -1,7 +1,7 @@
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
-import "@picocss/pico";
+import "./css/styles.scss";
 
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { useMediaQuery } from "@mui/material";

diff --git a/webstepper/webpack.common.js b/webstepper/webpack.common.js
@@ -23,6 +23,10 @@ module.exports = {
                     },
                 },
             },
+            {
+                test: /\.s[ac]ss$/i,
+                use: ["style-loader", "css-loader", "sass-loader"],
+            },
             {
                 test: /\.css$/i,
                 use: ["style-loader", "css-loader"],