fix: plant steps were wrongly showing statechart output events

src/App/App.css

@@ -33,6 +33,9 @@ details:has(+ details) {
   background-color: rgba(0,0,255,0.2);
   border: solid blue 1px;
 }
+.runtimeState.plantStep:not(.active) {
+  background-color: #f7f7f7;
+}
 .runtimeState.plantStep * {
   color: grey;
 }

src/App/App.tsx

@@ -5,10 +5,10 @@ import { Dispatch, ReactElement, SetStateAction, useCallback, useEffect, useMemo
 
 import AddIcon from '@mui/icons-material/Add';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 
 import { Statechart } from "@/statecharts/abstract_syntax";
 import { detectConnections } from "@/statecharts/detect_connections";
@@ -18,7 +18,7 @@ import { parseStatechart } from "../statecharts/parser";
 import { BigStep, RaisedEvent } from "../statecharts/runtime_types";
 import { getSimTime, getWallClkDelay, TimeMode } from "../statecharts/time";
 import { BottomPanel } from "./BottomPanel";
-import { PersistentDetails } from "./PersistentDetails";
+import { PersistentDetails, PersistentDetailsLocalStorage } from "./PersistentDetails";
 import { digitalWatchPlant } from "./Plant/DigitalWatch/DigitalWatch";
 import { dummyPlant } from "./Plant/Dummy/Dummy";
 import { microwavePlant } from "./Plant/Microwave/Microwave";
@@ -26,14 +26,11 @@ import { Plant } from "./Plant/Plant";
 import { trafficLightPlant } from "./Plant/TrafficLight/TrafficLight";
 import { RTHistory } from "./RTHistory";
 import { ShowAST, ShowInputEvents, ShowInternalEvents, ShowOutputEvents } from "./ShowAST";
-import { InsertMode } from "./TopPanel/InsertModes";
 import { TopPanel } from "./TopPanel/TopPanel";
 import { VisualEditor, VisualEditorState } from "./VisualEditor/VisualEditor";
 import { checkProperty, PropertyCheckResult } from "./check_property";
-import { usePersistentState } from "./persistent_state";
 import { useEditor } from "./useEditor";
 import { useUrlHashState } from "./useUrlHashState";
-import { formatTime } from "@/util/util";
 
 export type EditHistory = {
   current: VisualEditorState,
@@ -112,6 +109,10 @@ export function App() {
     setInsertMode,
     plantName,
     setPlantName,
+    showConnections,
+    setShowConnections,
+    showProperties,
+    setShowProperties,
     showExecutionTrace,
     setShowExecutionTrace,
     showPlantTrace,
@@ -417,33 +418,33 @@ export function App() {
             style={{flex: '0 0 content', backgroundColor: ''}}
           >
             {/* State tree */}
-            <PersistentDetails localStorageKey="showStateTree" initiallyOpen={true}>
+            <PersistentDetailsLocalStorage localStorageKey="showStateTree" initiallyOpen={true}>
               <summary>state tree</summary>
               <ul>
                 {ast && <ShowAST {...{...ast, trace, highlightActive}}/>}
               </ul>
-            </PersistentDetails>
+            </PersistentDetailsLocalStorage>
             {/* Input events */}
-            <PersistentDetails localStorageKey="showInputEvents" initiallyOpen={true}>
+            <PersistentDetailsLocalStorage localStorageKey="showInputEvents" initiallyOpen={true}>
               <summary>input events</summary>
               {ast && <ShowInputEvents
                 inputEvents={ast.inputEvents}
                 onRaise={(e,p) => onRaise("debug."+e,p)}
                 disabled={trace===null || trace.trace[trace.idx].kind === "error"}
                 showKeys={showKeys}/>}
-            </PersistentDetails>
+            </PersistentDetailsLocalStorage>
             {/* Internal events */}
-            <PersistentDetails localStorageKey="showInternalEvents" initiallyOpen={true}>
+            <PersistentDetailsLocalStorage localStorageKey="showInternalEvents" initiallyOpen={true}>
               <summary>internal events</summary>
               {ast && <ShowInternalEvents internalEvents={ast.internalEvents}/>}
-            </PersistentDetails>
+            </PersistentDetailsLocalStorage>
             {/* Output events */}
-            <PersistentDetails localStorageKey="showOutputEvents" initiallyOpen={true}>
+            <PersistentDetailsLocalStorage localStorageKey="showOutputEvents" initiallyOpen={true}>
               <summary>output events</summary>
               {ast && <ShowOutputEvents outputEvents={ast.outputEvents}/>}
-            </PersistentDetails>
+            </PersistentDetailsLocalStorage>
             {/* Plant */}
-            <PersistentDetails localStorageKey="showPlant" initiallyOpen={true}>
+            <PersistentDetailsLocalStorage localStorageKey="showPlant" initiallyOpen={true}>
               <summary>plant</summary>
               <select
                 disabled={trace!==null}
@@ -458,9 +459,9 @@ export function App() {
               {<plant.render state={plant.cleanupState(plantState)} speed={speed}
                 raiseUIEvent={e => onRaise("plant.ui."+e.name, e.param)}
                 />}
-            </PersistentDetails>
+            </PersistentDetailsLocalStorage>
             {/* Connections */}
-            <PersistentDetails localStorageKey="showConnEditor" initiallyOpen={false}>
+            <PersistentDetails state={showConnections} setState={setShowConnections}>
               <summary>connections</summary>
               <button title="auto-connect (name-based)" className={autoConnect?"active":""}
                 onClick={() => setAutoConnect(c => !c)}>
@@ -469,8 +470,13 @@ export function App() {
               {ast && ConnEditor(ast, plant, plantConns, setPlantConns)}
             </PersistentDetails>
             {/* Properties */}
-            <PersistentDetails localStorageKey="showProperty" initiallyOpen={false}>
+            <details open={showProperties} onToggle={e => setShowProperties(e.newState === "open")}>
               <summary>properties</summary>
+              {plant && <div>
+                available signals:
+                &nbsp;
+                {plant.signals.join(', ')}
+              </div>}
               {properties.map((property, i) => {
                 const result = propertyResults && propertyResults[i];
                 let violated = null, propertyError = null;
@@ -495,7 +501,7 @@ export function App() {
                   <AddIcon fontSize="small"/> add property
                 </button>
               </div>
-            </PersistentDetails>
+            </details>
             {/* Traces */}
             <details open={showExecutionTrace} onToggle={e => setShowExecutionTrace(e.newState === "open")}><summary>execution trace</summary>
               <div>
@@ -517,9 +523,9 @@ export function App() {
               </div>
               <div className="toolbar">
                 <input id="checkbox-show-plant-items" type="checkbox" checked={showPlantTrace} onChange={e => setShowPlantTrace(e.target.checked)}/>
-                <label htmlFor="checkbox-show-plant-items">show plant steps</label>
+                <label title="plant steps are steps where only the state of the plant changed" htmlFor="checkbox-show-plant-items">show plant steps</label>
                 <input id="checkbox-autoscroll" type="checkbox" checked={autoScroll} onChange={e => setAutoScroll(e.target.checked)}/>
-                <label htmlFor="checkbox-autoscroll">auto-scroll</label>
+                <label title="automatically scroll down event trace when new events occur" htmlFor="checkbox-autoscroll">auto-scroll</label>
                 &emsp;
                 <button title="save current trace" disabled={trace === null} onClick={() => onSaveTrace()}>
                   <SaveOutlinedIcon fontSize="small"/> save trace
@@ -617,9 +623,9 @@ function ConnEditor(ast: Statechart, plant: Plant<any, any>, plantConns: Conns,
       </select>
     </div>)]}
 
-    {/* Plant UI events can go to SC or to Plant */}
+    {/* Plant UI events typically go to the Plant */}
     {plant.uiEvents.map(e => <div style={{width:'100%', textAlign:'right'}}>
-      <label htmlFor={`select-dst-plant-ui-${e.event}`} style={{width:'50%'}}>ui.{e.event}&nbsp;→&nbsp;</label>
+      <label htmlFor={`select-dst-plant-ui-${e.event}`} style={{width:'50%', color: 'grey'}}>ui.{e.event}&nbsp;→&nbsp;</label>
       <select id={`select-dst-plant-ui-${e.event}`}
         style={{width:'50%'}}
         value={plantConns['plant.ui.'+e.event]?.join('.')}

src/App/BottomPanel.tsx

@@ -4,7 +4,7 @@ import { TraceableError } from "../statecharts/parser";
 import "./BottomPanel.css";
 
 import logo from "../../artwork/logo-playful.svg";
-import { PersistentDetails } from "./PersistentDetails";
+import { PersistentDetailsLocalStorage } from "./PersistentDetails";
 
 export function BottomPanel(props: {errors: TraceableError[]}) {
   const [greeting, setGreeting] = useState(
@@ -24,7 +24,7 @@ export function BottomPanel(props: {errors: TraceableError[]}) {
     {greeting}
     {props.errors.length > 0 &&
       <div className="errorStatus">
-        <PersistentDetails initiallyOpen={false} localStorageKey="errorsExpanded">
+        <PersistentDetailsLocalStorage initiallyOpen={false} localStorageKey="errorsExpanded">
           <summary>{props.errors.length} errors</summary>
           <div style={{maxHeight: '25vh', overflow: 'auto'}}>
           {props.errors.map(({message, shapeUid})=>
@@ -32,7 +32,7 @@ export function BottomPanel(props: {errors: TraceableError[]}) {
               {shapeUid}: {message}
             </div>)}
           </div>
-        </PersistentDetails>
+        </PersistentDetailsLocalStorage>
       </div>
     }
   </div>;

src/App/PersistentDetails.tsx

@@ -1,5 +1,5 @@
 import { usePersistentState } from "@/App/persistent_state"
-import { DetailsHTMLAttributes, PropsWithChildren } from "react";
+import { DetailsHTMLAttributes, Dispatch, PropsWithChildren, SetStateAction } from "react";
 
 type Props = {
   localStorageKey: string,
@@ -7,9 +7,15 @@ type Props = {
 } & DetailsHTMLAttributes<HTMLDetailsElement>;
 
 // A <details> node that remembers whether it was open or closed by storing that state in localStorage.
-export function PersistentDetails({localStorageKey, initiallyOpen, children, ...rest}: PropsWithChildren<Props>) {
+export function PersistentDetailsLocalStorage({localStorageKey, initiallyOpen, children, ...rest}: PropsWithChildren<Props>) {
   const [open, setOpen] = usePersistentState(localStorageKey, initiallyOpen);
   return <details open={open} onToggle={e => setOpen(e.newState === "open")} {...rest}>
     {children}
   </details>;
 }
+
+export function PersistentDetails({state, setState, children, ...rest}: PropsWithChildren<{state: boolean, setState: Dispatch<SetStateAction<boolean>>}>) {
+  return <details open={state} onToggle={e => setState(e.newState === "open")} {...rest}>
+    {children}
+  </details>;
+}

src/App/Plant/DigitalWatch/DigitalWatch.tsx

@@ -156,4 +156,21 @@ export const digitalWatchPlant = makeStatechartPlant({
     { kind: "event", event: "bottomRightMouseUp" },
     { kind: "event", event: "bottomLeftMouseUp" },
   ],
+  signals: [
+    "lightOn",
+    "beep",
+    "alarmOn",
+    "displayingTime",
+    "displayingAlarm",
+    "displayingChrono",
+    "hideH",
+    "hideM",
+    "hideS",
+
+    // these properties are true for as long as the mouse button is down:
+    "topLeftPressed",
+    "topRightPressed",
+    "bottomRightPressed",
+    "bottomLeftPressed",
+  ],
 });

src/App/Plant/Dummy/Dummy.tsx

@@ -15,4 +15,5 @@ export const dummyPlant: Plant<{}, {}> = {
   execution: dummyExecution,
   cleanupState: ({}) => ({}),
   render: ({}) => <></>,
+  signals: [],
 };

src/App/Plant/Microwave/Microwave.tsx

@@ -143,6 +143,16 @@ const microwavePlantSpec: StatechartPlantSpec<MicrowaveState> = {
     {kind: "event", event: "incTimeMouseDown"},
     {kind: "event", event: "incTimeMouseUp"},
   ],
+  signals: [
+    "bellRinging",
+    "magnetronRunning",
+    "doorOpen",
+
+    // these booleans are true for as long as the respective button is pressed (i.e., mouse button is down)
+    "startPressed",
+    "stopPressed",
+    "incTimePressed",
+  ]
 }
 
 export const microwavePlant = makeStatechartPlant(microwavePlantSpec);

src/App/Plant/Plant.ts

@@ -17,6 +17,8 @@ export type Plant<StateType, CleanStateType> = {
   inputEvents: EventTrigger[];
   outputEvents: EventTrigger[];
 
+  signals: string[]; // signal names. all signals are booleans.
+
   execution: TimedReactive<StateType>;
   cleanupState: (state: StateType) => CleanStateType;
   render: (props: PlantRenderProps<CleanStateType>) => ReactNode;
@@ -59,9 +61,10 @@ export type StatechartPlantSpec<CleanStateType> = {
   ast: Statechart,
   cleanupState: (rtConfig: RT_Statechart) => CleanStateType,
   render: (props: PlantRenderProps<CleanStateType>) => ReactNode,
+  signals: string[],
 }
 
-export function makeStatechartPlant<CleanStateType>({uiEvents, ast, cleanupState, render}: StatechartPlantSpec<CleanStateType>): Plant<BigStep, CleanStateType> {
+export function makeStatechartPlant<CleanStateType>({uiEvents, ast, cleanupState, render, signals}: StatechartPlantSpec<CleanStateType>): Plant<BigStep, CleanStateType> {
   return {
     uiEvents,
     inputEvents: ast.inputEvents,
@@ -69,6 +72,7 @@ export function makeStatechartPlant<CleanStateType>({uiEvents, ast, cleanupState
     execution: statechartExecution(ast),
     cleanupState,
     render,
+    signals,
   }
 }
 

src/App/Plant/TrafficLight/TrafficLight.tsx

@@ -109,6 +109,13 @@ const trafficLightPlantSpec: StatechartPlantSpec<TrafficLightState> = {
   uiEvents: [
     {kind: "event", event: "policeInterrupt"},
   ],
+  signals: [
+    "redOn",
+    "yellowOn",
+    "greenOn",
+    "timerGreen",
+    "timerValue",
+  ],
 }
 
 export const trafficLightPlant = makeStatechartPlant(trafficLightPlantSpec);

src/App/RTHistory.tsx

@@ -90,6 +90,7 @@ function RTEventParam(props: {param?: any}) {
 
 export const RTHistoryItem = memo(function RTHistoryItem({ast, idx, item, prevItem, isPlantStep, active, onMouseDown, propertyStatus}: {idx: number, ast: Statechart, item: TraceItem, prevItem?: TraceItem, isPlantStep: boolean, active: boolean, onMouseDown: (idx: number, timestamp: number) => void, propertyStatus: PropertyStatus}) {
   if (item.kind === "bigstep") {
+    const outputEvents = isPlantStep ? item.state.plant.outputEvents : item.state.sc.outputEvents;
     // @ts-ignore
     const newStates = item.state.sc.mode.difference(prevItem?.state.sc.mode || new Set());
     return <div
@@ -104,8 +105,8 @@ export const RTHistoryItem = memo(function RTHistoryItem({ast, idx, item, prevIt
       </div>
       <ShowMode mode={newStates} statechart={ast}/>
       <ShowEnvironment environment={item.state.sc.environment}/>
-      {item.state.sc.outputEvents.length>0 && <>^
+      {outputEvents.length>0 && <>^
-        {item.state.sc.outputEvents.map((e:RaisedEvent) => <span className="outputEvent">{e.name}<RTEventParam param={e.param}/></span>)}
+        {outputEvents.map((e:RaisedEvent) => <span className="outputEvent">{e.name}<RTEventParam param={e.param}/></span>)}
       </>}
     </div>;
   }

src/App/useUrlHashState.ts

@@ -8,7 +8,7 @@ import { Conns } from "@/statecharts/timed_reactive";
 export function useUrlHashState(editorState: VisualEditorState | null, setEditHistory: Dispatch<SetStateAction<EditHistory|null>>) {
 
   // i should probably put all these things into a single object, the 'app state'...
-  const [autoScroll, setAutoScroll] = useState(true);
+  const [autoScroll, setAutoScroll] = useState(false);
   const [autoConnect, setAutoConnect] = useState(true);
   const [plantConns, setPlantConns] = useState<Conns>({});
   const [showKeys, setShowKeys] = useState(true);
@@ -16,6 +16,8 @@ export function useUrlHashState(editorState: VisualEditorState | null, setEditHi
   const [insertMode, setInsertMode] = useState<InsertMode>("and");
   const [plantName, setPlantName] = useState("dummy");
 
+  const [showConnections, setShowConnections] = useState(false);
+  const [showProperties, setShowProperties] = useState(false);
   const [showExecutionTrace, setShowExecutionTrace] = useState(true);
   const [showPlantTrace, setShowPlantTrace] = useState(false);
   const [properties, setProperties] = useState<string[]>([]);
@@ -82,6 +84,12 @@ export function useUrlHashState(editorState: VisualEditorState | null, setEditHi
           if (recoveredState.insertMode !== undefined) {
             setInsertMode(recoveredState.insertMode);
           }
+          if (recoveredState.showConnections !== undefined) {
+            setShowConnections(recoveredState.showConnections);
+          }
+          if (recoveredState.showProperties !== undefined) {
+            setShowProperties(recoveredState.showProperties);
+          }
           if (recoveredState.showExecutionTrace !== undefined) {
             setShowExecutionTrace(recoveredState.showExecutionTrace);
           }
@@ -123,6 +131,8 @@ export function useUrlHashState(editorState: VisualEditorState | null, setEditHi
         insertMode,
         plantName,
         editorState,
+        showConnections,
+        showProperties,
         showExecutionTrace,
         showPlantTrace,
         properties,
@@ -149,6 +159,8 @@ export function useUrlHashState(editorState: VisualEditorState | null, setEditHi
     zoom,
     insertMode,
     plantName,
+    showConnections,
+    showProperties,
     showExecutionTrace,
     showPlantTrace,
     properties,
@@ -171,6 +183,10 @@ export function useUrlHashState(editorState: VisualEditorState | null, setEditHi
     setInsertMode,
     plantName,
     setPlantName,
+    showConnections,
+    setShowConnections,
+    showProperties,
+    setShowProperties,
     showExecutionTrace,
     setShowExecutionTrace,
     showPlantTrace,