timestamps visible in execution history

src/App/App.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 import { ConcreteState, emptyStatechart, isAncestorOf, Statechart, stateDescription, Transition } from "../VisualEditor/ast";
 import { VisualEditor } from "../VisualEditor/VisualEditor";
-import { Environment, Mode, RT_Statechart } from "../VisualEditor/runtime_types";
+import { BigStepOutput, Environment, Mode, RT_Statechart } from "../VisualEditor/runtime_types";
 import { initialize, handleEvent, handleInputEvent } from "../VisualEditor/interpreter";
 import { Action, Expression } from "../VisualEditor/label_ast";
 
@@ -67,11 +67,18 @@ export function AST(props: {root: ConcreteState, transitions: Map<string, Transi
 }
 
 
+function formatTime(timeMs: number) {
+  const leadingZeros = "00" + timeMs % 1000;
+  const formatted = `${Math.floor(timeMs / 1000)}.${(leadingZeros).substring(leadingZeros.length-3)}`;
+  return formatted;
+}
+
+
 export function App() {
   const [ast, setAST] = useState<Statechart>(emptyStatechart);
   const [errors, setErrors] = useState<[string,string][]>([]);
-  
+
-  const [rt, setRT] = useState<RT_Statechart[]>([]);
+  const [rt, setRT] = useState<BigStep[]>([]);
   const [rtIdx, setRTIdx] = useState<number|null>(null);
 
   const [time, setTime] = useState<TimeMode>({kind: "paused", simtime: 0});
@@ -80,23 +87,24 @@ export function App() {
 
 
   function restart() {
-    const rt = initialize(ast);
+    const config = initialize(ast);
     console.log('runtime: ', rt);
-    setRT([rt]);
+    setRT([{inputEvent: null, simtime: 0, ...config}]);
     setRTIdx(0);
-    setTime({kind: "paused", simtime: 0});
   }
 
   function stop() {
     setRT([]);
     setRTIdx(null);
+    setTime({kind: "paused", simtime: 0});
   }
 
-  function raise(event: string) {
+  function raise(inputEvent: string) {
     console.log(rtIdx);
-    if (rt.length>0 && rtIdx!==null && ast.inputEvents.has(event)) {
+    if (rt.length>0 && rtIdx!==null && ast.inputEvents.has(inputEvent)) {
-      const nextConfig = handleInputEvent(event, ast, rt[rtIdx]!);
+      const simtime = getSimTime(time, performance.now());
-      setRT([...rt.slice(0, rtIdx+1), nextConfig]);
+      const nextConfig = handleInputEvent(inputEvent, ast, rt[rtIdx]!);
+      setRT([...rt.slice(0, rtIdx+1), {inputEvent, simtime, ...nextConfig}]);
       setRTIdx(rtIdx+1);
     }
   }
@@ -104,10 +112,7 @@ export function App() {
   function updateDisplayedTime() {
     const now = performance.now();
     const timeMs = getSimTime(time, now);
-    const leadingZeros = "00" + timeMs % 1000;
+    setDisplayTime(formatTime(timeMs));
-    const formatted = `${Math.floor(timeMs / 1000)}.${(leadingZeros).substring(leadingZeros.length-3)}`;
-    // console.log(now, timeMs, formatted);
-    setDisplayTime(formatted);
   }
 
   useEffect(() => {
@@ -148,6 +153,11 @@ export function App() {
       }
     })
   }
+  
+  function gotoRt(idx: number, timestamp: number) {
+    setRTIdx(idx);
+    setTime({kind: "paused", simtime: timestamp});
+  }
 
   return <div className="layoutVertical">
     <div className="panel">
@@ -155,7 +165,7 @@ export function App() {
     </div>
     <div className="panel">
       <button onClick={restart}>(re)start</button>
-      <button onClick={stop} disabled={rt===null}>stop</button>
+      <button onClick={stop} disabled={rtIdx===null}>stop</button>
       &emsp;
       raise&nbsp;
       {[...ast.inputEvents].map(event => <button disabled={rtIdx===null} onClick={() => raise(event)}>{event}</button>)}
@@ -168,12 +178,8 @@ export function App() {
       <label htmlFor="number-timescale">timescale</label>&nbsp;
       <input type="number" min={0} id="number-timescale" disabled={rtIdx===null} value={timescale} style={{width:40}} onChange={e => onTimeScaleChange(e.target.value, performance.now())}/>
       &emsp;
-      {rtIdx !== null &&
+      <label htmlFor="time">time (s)</label>&nbsp;
-        <>
+      <input id="time" disabled={rtIdx===null} value={displayTime} readOnly={true} style={{width:56, backgroundColor:"#eee", textAlign: "right"}}/>
-          <label htmlFor="time">time (s)</label>&nbsp;
-          <input id="time" value={displayTime} readOnly={true} style={{width:56, backgroundColor:"#eee", textAlign: "right"}}/>
-        </>
-      }
     </div>
     <div className="layout">
       <main className="content">
@@ -181,9 +187,13 @@ export function App() {
       </main>
       <aside className="sidebar">
         <AST {...ast}/>
-        {rt.map((rt, idx) => <><hr/><div className={"runtimeState"+(idx===rtIdx?" active":"")} onClick={() => setRTIdx(idx)}>
+        {rt.map((rt, idx) => <><hr/><div className={"runtimeState"+(idx===rtIdx?" active":"")} onClick={() => gotoRt(idx, rt.simtime)}>
-          <ShowEnvironment environment={rt.environment}/>
+          <div>({formatTime(rt.simtime)}, {rt.inputEvent || "<init>"})</div>
           <ShowMode mode={rt.mode} statechart={ast}/>
+          <ShowEnvironment environment={rt.environment}/>
+          {rt.outputEvents.length>0 && <div>
+            {rt.outputEvents.map((e:string) => '^'+e).join(', ')}
+          </div>}
         </div></>)}
       </aside>
     </div>
@@ -198,7 +208,7 @@ function ShowEnvironment(props: {environment: Environment}) {
 
 function ShowMode(props: {mode: Mode, statechart: Statechart}) {
   const activeLeafs = getActiveLeafs(props.mode, props.statechart);
-  return <div>{[...activeLeafs].map(uid =>
+  return <div>mode: {[...activeLeafs].map(uid =>
     stateDescription(props.statechart.uid2State.get(uid)!)).join(", ")}</div>;
 }
 

src/VisualEditor/interpreter.ts

@@ -1,9 +1,9 @@
 import { evalExpr } from "./actionlang_interpreter";
 import { computeArena, ConcreteState, getDescendants, isAncestorOf, isOverlapping, OrState, Statechart, stateDescription, Transition } from "./ast";
 import { Action } from "./label_ast";
-import { Environment, RaisedEvents, Mode, RT_Statechart, initialRaised, BigStep } from "./runtime_types";
+import { Environment, RaisedEvents, Mode, RT_Statechart, initialRaised, BigStepOutput } from "./runtime_types";
 
-export function initialize(ast: Statechart): BigStep {
+export function initialize(ast: Statechart): BigStepOutput {
   let {enteredStates, environment, ...raised} = enterDefault(ast.root, {
     environment: new Map(),
     ...initialRaised,
@@ -204,7 +204,7 @@ export function handleEvent(event: string, statechart: Statechart, activeParent:
   return {environment, mode, ...raised};
 }
 
-export function handleInputEvent(event: string, statechart: Statechart, {mode, environment}: {mode: Mode, environment: Environment}): BigStep {
+export function handleInputEvent(event: string, statechart: Statechart, {mode, environment}: {mode: Mode, environment: Environment}): BigStepOutput {
   let raised = initialRaised;
 
   ({mode, environment, ...raised} = handleEvent(event, statechart, statechart.root, {mode, environment, ...raised}));
@@ -212,7 +212,7 @@ export function handleInputEvent(event: string, statechart: Statechart, {mode, e
   return handleInternalEvents(statechart, {mode, environment, ...raised});
 }
 
-export function handleInternalEvents(statechart: Statechart, {mode, environment, ...raised}: RT_Statechart & RaisedEvents): BigStep {
+export function handleInternalEvents(statechart: Statechart, {mode, environment, ...raised}: RT_Statechart & RaisedEvents): BigStepOutput {
   while (raised.internalEvents.length > 0) {
     const [internalEvent, ...rest] = raised.internalEvents;
     ({mode, environment, ...raised} = handleEvent(internalEvent, statechart, statechart.root, {mode, environment, internalEvents: rest, outputEvents: raised.outputEvents}));

src/VisualEditor/runtime_types.ts

@@ -12,7 +12,15 @@ export type RT_Statechart = {
   // history: // TODO
 }
 
-export type BigStep = RT_Statechart & {outputEvents: string[]};
+export type BigStepOutput = RT_Statechart & {
+  outputEvents: string[],
+};
+
+export type BigStep = {
+  inputEvent: string | null, // null if initialization
+  simtime: number,
+} & BigStepOutput;
+
 
 export type RaisedEvents = {
   internalEvents: string[];
@@ -24,4 +32,4 @@ export type Timers = Map<string, number>; // transition uid -> timestamp
 export const initialRaised: RaisedEvents = {
   internalEvents: [],
   outputEvents: [],
-}
+};

src/VisualEditor/time.ts

@@ -1,18 +1,24 @@
 
 export type TimeMode = TimePaused | TimeRealTime;
 
+// When the simulation is paused, we only need to know the current simulated time.
 export type TimePaused = {
   kind: "paused",
   simtime: number, // the current simulated time
 }
 
+// When the simulation is running in real time, we need to know the time when the simulation was set to real time (both in simulated and wall-clock time), and the time scale. This allows us to compute the simulated time of every future event.
+// Such a 'future event' may be:
+//  - raising an input event
+//  - changing of the time scale parameter
+//  - pausing the simulation
 export type TimeRealTime = {
   kind: "realtime",
-  scale: number, // time scale relative to wall-clock time
   since: {
     simtime: number,  // the simulated time at which the time was set to realtime
     wallclktime: number, // the wall-clock time at which the time was set to realtime
   }
+  scale: number, // time scale relative to wall-clock time
 }
 
 export function getSimTime(currentMode: TimeMode, wallclktime: number): number {