better looks

src/App/AST.css

@@ -17,4 +17,33 @@ details {
   color: black;
   width: fit-content;
   border-radius: 10px;
-}
+}
+
+.outputEvent {
+  border: 1px black solid;
+  border-radius: 6px;
+  margin-left: 4px;
+  padding-left: 2px;
+  padding-right: 2px;
+  background-color: rgb(230, 249, 255);
+}
+
+.activeState {
+  border: rgb(192, 125, 0);
+  background-color:rgb(255, 251, 244);
+  filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.856));
+  border-radius: 6px;
+  margin-left: 4px;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 0;
+  margin-bottom: -3px;
+  padding: 0;
+}

src/App/App.tsx

@@ -12,7 +12,7 @@ import "./App.css";
 import { Box, Stack } from "@mui/material";
 import { TopPanel } from "./TopPanel";
 import { RTHistory } from "./RTHistory";
-import { ShowAST } from "./ShowAST";
+import { ShowAST, ShowOutputEvents } from "./ShowAST";
 import { TraceableError } from "../statecharts/parser";
 import { getKeyHandler } from "./shortcut_handler";
 import { BottomPanel } from "./BottomPanel";
@@ -142,6 +142,8 @@ export function App() {
 
   const highlightTransitions = (rtIdx === undefined) ? [] : rt[rtIdx].firedTransitions;
 
+  console.log(ast);
+
   return <Stack sx={{height:'100vh'}}>
     {/* Top bar */}
     <Box
@@ -157,9 +159,12 @@ export function App() {
         {...{rtIdx, ast, time, setTime, onInit, onClear, onRaise, onBack, mode, setMode}}
       />
     </Box>
+
+    {/* Everything below the top bar */}
     <Stack direction="row" sx={{
       overflow: 'auto',
       }}>
+
       {/* main */}
       <Box sx={{
         flexGrow:1,
@@ -167,6 +172,7 @@ export function App() {
       }}>
         <VisualEditor {...{ast, setAST, rt: rt.at(rtIdx!), setRT, errors, setErrors, mode, highlightActive, highlightTransitions}}/>
       </Box>
+
       {/* right sidebar */}
       <Box
         sx={{
@@ -174,8 +180,10 @@ export function App() {
           borderColor: "divider",
           flex: '0 0 content',
           overflow: "auto",
+          maxWidth: 350,
         }}>
           <ShowAST {...{...ast, rt: rt.at(rtIdx!), highlightActive}}/>
+          <ShowOutputEvents outputEvents={ast.outputEvents}/>
           <br/>
           <div ref={refRightSideBar}>
           <RTHistory {...{ast, rt, rtIdx, setTime, setRTIdx, refRightSideBar}}/>

src/App/BottomPanel.css

@@ -5,5 +5,7 @@
 }
 
 .bottom {
+  border-top: 1px lightgrey solid;
   background-color: lightyellow;
+  /* background-color: rgb(255, 251, 244); */
 }

src/App/BottomPanel.tsx

@@ -6,7 +6,7 @@ import "./BottomPanel.css";
 import head from "../head.svg" ;
 
 export function BottomPanel(props: {errors: TraceableError[]}) {
-  const [greeting, setGreeting] = useState(<><img src={head}/>&emsp;"Welcome to StateBuddy, buddy!"</>);
+  const [greeting, setGreeting] = useState(<b><img src={head}/>&emsp;"Welcome to StateBuddy, buddy!"</b>);
 
   useEffect(() => {
     setTimeout(() => {

src/App/RTHistory.tsx

@@ -21,13 +21,14 @@ export function RTHistory({rt, rtIdx, ast, setRTIdx, setTime, refRightSideBar}:
 
   return <div>
     {rt.map((r, idx) => <>
+    <hr/>
     <div className={"runtimeState"+(idx===rtIdx?" active":"")} onClick={() => gotoRt(idx, r.simtime)}>
-      <div>({formatTime(r.simtime)}, {r.inputEvent || "<init>"})</div>
+      <div>{formatTime(r.simtime)}, {r.inputEvent || "<init>"}</div>
       <ShowMode mode={r.mode} statechart={ast}/>
       <ShowEnvironment environment={r.environment}/>
-      {r.outputEvents.length>0 && <div>
-        {r.outputEvents.map((e:RaisedEvent) => '^'+e.name).join(', ')}
-      </div>}
+      {r.outputEvents.length>0 && <>^
+        {r.outputEvents.map((e:RaisedEvent) => <span className="outputEvent">{e.name}</span>)}
+      </>}
     </div></>)}
   </div>;
 }
@@ -43,8 +44,8 @@ function ShowEnvironment(props: {environment: Environment}) {
 
 function ShowMode(props: {mode: Mode, statechart: Statechart}) {
   const activeLeafs = getActiveLeafs(props.mode, props.statechart);
-  return <div>mode: {[...activeLeafs].map(uid =>
-    stateDescription(props.statechart.uid2State.get(uid)!)).join(", ")}</div>;
+  return <div>{[...activeLeafs].map(uid =>
+    <span className="activeState">{stateDescription(props.statechart.uid2State.get(uid)!)}</span>)}</div>;
 }
 
 function getActiveLeafs(mode: Mode, sc: Statechart) {

src/App/ShowAST.tsx

@@ -25,7 +25,7 @@ export function ShowExpr(props: {expr: Expression}) {
 
 export function ShowAction(props: {action: Action}) {
   if (props.action.kind === "raise") {
-    return <>^{props.action.event}</>;
+    return <>^<span className="outputEvent">{props.action.event}</span></>;
   }
   else if (props.action.kind === "assignment") {
     return <>{props.action.lhs} = <ShowExpr expr={props.action.rhs}/>;</>;
@@ -59,3 +59,12 @@ export function ShowAST(props: {root: ConcreteState | PseudoState, transitions:
     }
   </details>
 }
+
+export function ShowOutputEvents(props: {outputEvents: Set<string>}) {
+  return <div style={{whiteSpace: 'wrap'}}>
+    out:
+    {[...props.outputEvents].map(eventName => {
+      return <><span className="outputEvent">{eventName}</span> </>;
+    })}
+  </div>;
+}