remove dependency on MUI

bun.lock

@@ -4,10 +4,8 @@
     "": {
       "name": "bun-react-template",
       "dependencies": {
-        "@emotion/styled": "^11.14.1",
         "@fontsource/roboto": "^5.2.8",
         "@mui/icons-material": "^7.3.4",
-        "@mui/material": "^7.3.4",
         "react": "^19",
         "react-dom": "^19",
       },

package.json

@@ -11,10 +11,8 @@
     "start": "NODE_ENV=production bun src/index.tsx"
   },
   "dependencies": {
-    "@emotion/styled": "^11.14.1",
     "@fontsource/roboto": "^5.2.8",
     "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
     "react": "^19",
     "react-dom": "^19"
   },

src/App/App.css

@@ -94,3 +94,13 @@ button.active {
   max-height: 100vh;
   overflow: auto;
 }
+
+div.stackVertical {
+  display: flex;
+  flex-direction: column;
+}
+
+div.stackHorizontal {
+  display: flex;
+  flex-direction: row;
+}

src/App/App.tsx

@@ -8,8 +8,6 @@ import { getSimTime, getWallClkDelay, TimeMode } from "../statecharts/time";
 import "../index.css";
 import "./App.css";
 
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
 import { TopPanel } from "./TopPanel";
 import { ShowAST, ShowInputEvents, ShowInternalEvents, ShowOutputEvents } from "./ShowAST";
 import { parseStatechart } from "../statecharts/parser";
@@ -92,6 +90,7 @@ export function App() {
     console.log('recovering state...');
     const compressedState = window.location.hash.slice(1);
     if (compressedState.length === 0) {
+      // empty URL hash
       console.log("no state to recover");
       setEditHistory(() => ({current: emptyState, history: [], future: []}));
       return;
@@ -100,6 +99,7 @@ export function App() {
     try {
       compressedBuffer = Uint8Array.fromBase64(compressedState); // may throw
     } catch (e) {
+      // probably invalid base64
       console.error("failed to recover state:", e);
       setEditHistory(() => ({current: emptyState, history: [], future: []}));
       return;
@@ -114,6 +114,7 @@ export function App() {
         setEditHistory(() => ({current: recoveredState, history: [], future: []}));
       })
       .catch(e => {
+        // any other error: invalid JSON, or decompression failed.
         console.error("failed to recover state:", e);
         setEditHistory({current: emptyState, history: [], future: []});
       });
@@ -370,16 +371,16 @@ export function App() {
     </div>
   </div>}
 
-  <Stack sx={{height:'100%'}}>
+  <div className="stackVertical" style={{height:'100%'}}>
-    <Stack direction="row" sx={{flexGrow:1, overflow: "auto"}}>
+    <div className="stackHorizontal" style={{flexGrow:1, overflow: "auto"}}>
 
       {/* Left: top bar and main editor */}
-      <Box sx={{flexGrow:1, overflow: "auto"}}>
+      <div style={{flexGrow:1, overflow: "auto"}}>
-        <Stack sx={{height:'100%'}}>
+        <div style={{height:'100%'}}>
           {/* Top bar */}
-          <Box
+          <div
             className="shadowBelow"
-            sx={{
+            style={{
               display: "flex",
               borderBottom: 1,
               borderColor: "divider",
@@ -390,16 +391,16 @@ export function App() {
             {editHistory && <TopPanel
               {...{trace, time, setTime, onUndo, onRedo, onInit, onClear, onBack, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}}
             />}
-          </Box>
+          </div>
           {/* Below the top bar: Editor */}
-          <Box sx={{flexGrow:1, overflow: "auto"}}>
+          <div style={{flexGrow:1, overflow: "auto"}}>
             {editorState && conns && syntaxErrors && <VisualEditor {...{state: editorState, setState: setEditorState, conns, trace, setTrace, syntaxErrors, insertMode, highlightActive, highlightTransitions, setModal, makeCheckPoint, zoom}}/>}
-          </Box>
+          </div>
-        </Stack>
+        </div>
-      </Box>
+      </div>
 
       {/* Right: sidebar */}
-      <Box sx={{
+      <div style={{
         borderLeft: 1,
         borderColor: "divider",
         flex: '0 0 content',
@@ -407,10 +408,10 @@ export function App() {
         overflowX: "visible",
         maxWidth: 'min(300px, 30vw)',
       }}>
-        <Stack sx={{height:'100%'}}>
+        <div className="stackVertical" style={{height:'100%'}}>
-          <Box
+          <div
             className={showExecutionTrace ? "shadowBelow" : ""}
-            sx={{flex: '0 0 content', backgroundColor: ''}}
+            style={{flex: '0 0 content', backgroundColor: ''}}
           >
             <PersistentDetails localStorageKey="showStateTree" initiallyOpen={true}>
               <summary>state tree</summary>
@@ -447,36 +448,34 @@ export function App() {
                 plant.render(trace.trace[trace.idx].plantState, event => onRaise(event.name, event.param))}
             </PersistentDetails>
             <details open={showExecutionTrace} onToggle={e => setShowExecutionTrace(e.newState === "open")}><summary>execution trace</summary></details>
-          </Box>
+          </div>
 
+          {/* We cheat a bit, and render the execution trace depending on whether the <details> above is 'open' or not, rather than putting it as a child of the <details>. We do this because only then can we get the execution trace to scroll without the rest scrolling as well. */}
           {showExecutionTrace &&
-            <Box sx={{
+            <div style={{
               flexGrow:1,
               overflow:'auto',
               minHeight: '50vh',
               // minHeight: '75%', // <-- allows us to always scroll down the sidebar far enough such that the execution history is enough in view
               }}>
-                {/* <PersistentDetails localStorageKey="showExecutionTrace" initiallyOpen={true}> */}
+                <div ref={refRightSideBar}>
-                  {/* <summary>execution trace</summary> */}
+                  {ast && <RTHistory {...{ast, trace, setTrace, setTime}}/>}
-                  <div ref={refRightSideBar}>
+                </div>
-                    {ast && <RTHistory {...{ast, trace, setTrace, setTime}}/>}
+            </div>}
-                  </div>
-                {/* </PersistentDetails> */}
-            </Box>}
 
-          <Box sx={{flex: '0 0 content'}}>
+          <div style={{flex: '0 0 content'}}>
-          </Box>
+          </div>
-        </Stack>
+        </div>
-      </Box>
+      </div>
 
 
-    </Stack>
+    </div>
 
     {/* Bottom panel */}
-    <Box sx={{flex: '0 0 content'}}>
+    <div style={{flex: '0 0 content'}}>
       {syntaxErrors && <BottomPanel {...{errors: syntaxErrors}}/>}
-    </Box>
+    </div>
-  </Stack>
+  </div>
   </>;
 }
 

src/App/BottomPanel.tsx

@@ -3,11 +3,16 @@ import { TraceableError } from "../statecharts/parser";
 
 import "./BottomPanel.css";
 
-import head from "../head.svg" ;
+import logo from "../../artwork/logo-playful.svg";
 import { PersistentDetails } from "./PersistentDetails";
 
 export function BottomPanel(props: {errors: TraceableError[]}) {
-  const [greeting, setGreeting] = useState(<><b><img src={head} style={{transform: "scaleX(-1)"}}/>&emsp;"Welcome to StateBuddy, buddy!"</b><br/></>);
+  const [greeting, setGreeting] = useState(
+    <div style={{textAlign:'center'}}>
+      <span style={{fontSize: 18, fontStyle: 'italic'}}>
+        Welcome to <img src={logo} style={{maxWidth:'100%'}}/>
+      </span>
+    </div>);
 
   useEffect(() => {
     setTimeout(() => {

src/statecharts/detect_connections.ts

@@ -13,6 +13,7 @@ export type Connections = {
 }
 
 export function detectConnections(state: VisualEditorState): Connections {
+  const startTime = performance.now();
   // detect what is 'connected'
   const arrow2SideMap = new Map<string,[{ uid: string; part: RectSide; } | undefined, { uid: string; part: RectSide; } | undefined]>();
   const side2ArrowMap = new Map<string, Set<["start"|"end", string]>>();
@@ -72,6 +73,11 @@ export function detectConnections(state: VisualEditorState): Connections {
     }
   }
 
+  const endTime = performance.now();
+
+  // rather slow, about 10ms for a large model:
+  // console.debug("connection detection took", endTime-startTime);
+
   return {
     arrow2SideMap,
     side2ArrowMap,

src/statecharts/parser.ts

@@ -78,6 +78,8 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [
 
   // step 1: figure out state hierarchy
 
+  const startTime = performance.now();
+
   // IMPORTANT ASSUMPTION: state.rountangles is sorted from big to small surface area:
   for (const rt of state.rountangles) {
     const parent = findParent(rt);
@@ -132,6 +134,11 @@ export function parseStatechart(state: VisualEditorState, conns: Connections): [
     historyStates.push(historyState);
   }
 
+  const endTime = performance.now();
+
+  // currently seems to be quite fast:
+  // console.log('built state tree', endTime-startTime);
+
   // step 2: figure out transitions
 
   const transitions = new Map<string, Transition[]>();

todo.txt

@@ -27,8 +27,9 @@
 
 TODO
 
-- digital watch:
+- testing
-    highlight when watch button pressed/released
+    use STL for testing
+        https://github.com/mvcisback/py-metric-temporal-logic
 
 - maybe support:
     - explicit order of:
@@ -51,17 +52,21 @@ TODO
       don't crash and show the error
     - buttons to rotate selection 90 degrees
 
+- performance:
+    maybe try this for rendering the execution trace:
+        https://legacy.reactjs.org/docs/optimizing-performance.html#virtualize-long-lists
+
 - experimental features:
     - multiverse execution history
         stable tree layout?
             https://pub.dev/packages/ploeg_tree_layout
     - local scopes
 
-
-
 for the assignment:
     *ALL* features
         add history (look at original Harel paper)
+    add microwave oven
+    add traffic light
 
 Publish StateBuddy paper(s):
     compare CS approach to other tools, not only YAKINDU