Fix some things

src/frontend/app.tsx

@@ -99,7 +99,7 @@ export function getApp() {
                                         <Tabs.Panel value="corr">
                                             <DemoCorr/>
                                         </Tabs.Panel>
-                                        <Tabs.Panel value="bm" style={{height: '100%'}}>
+                                        <Tabs.Panel value="bm">
                                             <DemoBM/>
                                         </Tabs.Panel>
                                         <Tabs.Panel value="le">

src/frontend/demos/demo_bm.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Center, Grid, Group, Space, Stack, Text, Title} from '@mantine/core';
+import {Center, Group, SimpleGrid, Space, Stack, Text, Title} from '@mantine/core';
 
 import {OnionContext} from "../onion_context";
 import {DeltaRegistry} from "onion/delta_registry";
@@ -166,48 +166,15 @@ export function getDemoBM() {
             return <Center><Title order={4}>{text}</Title></Center>;
         }
 
-        return (<div style={{minWidth: 2200}}>
+        return (<div style={{minWidth: 2400}}>
             <OnionContext.Provider value={{generateUUID, deltaRegistry}}>
             <ModalManualRenderer manualRendererState={manualRendererState}/>
-            <Grid columns={5} grow>
-                <Grid.Col span={1}>
+            <SimpleGrid cols={5}>
+                <Stack>
                     {centeredCaption("Concrete Syntax 0")}
-                </Grid.Col>
-                <Grid.Col span={1}>
-                    {centeredCaption("Correspondence 0")}
-                </Grid.Col>
-                <Grid.Col span={1}>
-                    {centeredCaption("Abstract Syntax")}
-                </Grid.Col>
-                <Grid.Col span={1}>
-                    {centeredCaption("Correspondence 1")}
-                </Grid.Col>
-                <Grid.Col span={1}>
-                    {centeredCaption("Concrete Syntax 1")}
-                </Grid.Col>
-
-                <Grid.Col span={1}>
                     <Group position="right">
                         {onions[0].onionCorr.components.getCaptionWithParseButton(onions[0].autoParse, onions[0].setAutoParse)}
                     </Group>
-                </Grid.Col>
-                <Grid.Col span={1}>
-                </Grid.Col>
-                <Grid.Col span={1}>
-                    <Group position="apart">
-                        {onions[0].onionCorr.components.getCaptionWithRenderButton(onions[0].autoRender, onions[0].setAutoRender, setManualRendererState)}
-                        {onions[1].onionCorr.components.getCaptionWithRenderButton(onions[1].autoRender, onions[1].setAutoRender, setManualRendererState, "right")}
-                    </Group>
-                </Grid.Col>
-                <Grid.Col span={1}>
-                </Grid.Col>
-                <Grid.Col span={1}>
-                    <Group position="left">
-                        {onions[1].onionCorr.components.getCaptionWithParseButton(onions[1].autoParse, onions[1].setAutoParse, "left")}
-                    </Group>
-                </Grid.Col>
-
-                <Grid.Col span={1}>
                     <Stack>
                         {onions[0].onionCs.components.makeTabs("editor", csTabs)}
                         {onions[0].onionCs.components.makeTabs("merge", csTabs)}
@@ -219,8 +186,9 @@ export function getDemoBM() {
                             </InfoHoverCard>
                         </Center>
                     </Stack>
-                </Grid.Col>
-                <Grid.Col span={1}>
+                </Stack>
+                <Stack>
+                    {centeredCaption("Correspondence 0")}
                     <Stack>
                         {onions[0].onionCorr.components.makeTabs("state", corrTabs)}
                         {onions[0].onionCorr.components.makeTabs("merge", corrTabs)}
@@ -234,8 +202,13 @@ export function getDemoBM() {
                             </InfoHoverCard>
                         </Center>
                     </Stack>
-                </Grid.Col>
-                <Grid.Col span={1}>
+                </Stack>
+                <Stack>
+                    {centeredCaption("Abstract Syntax")}
+                    <Group position="apart">
+                        {onions[0].onionCorr.components.getCaptionWithRenderButton(onions[0].autoRender, onions[0].setAutoRender, setManualRendererState)}
+                        {onions[1].onionCorr.components.getCaptionWithRenderButton(onions[1].autoRender, onions[1].setAutoRender, setManualRendererState, "right")}
+                    </Group>
                     <Stack>
                         {onionAs.components.makeTabs("state", asTabs)}
                         {onionAs.components.makeTabs("merge", asTabs)}
@@ -247,8 +220,9 @@ export function getDemoBM() {
                             </InfoHoverCard>
                         </Center>
                     </Stack>
-                </Grid.Col>
-                <Grid.Col span={1}>
+                </Stack>
+                <Stack>
+                    {centeredCaption("Correspondence 1")}
                     <Stack>
                         {onions[1].onionCorr.components.makeTabs("state", corrTabs)}
                         {onions[1].onionCorr.components.makeTabs("merge", corrTabs)}
@@ -262,8 +236,12 @@ export function getDemoBM() {
                             </InfoHoverCard>
                         </Center>
                     </Stack>
-                </Grid.Col>
-                <Grid.Col span={1}>
+                </Stack>
+                <Stack>
+                    {centeredCaption("Concrete Syntax 1")}
+                    <Group position="left">
+                        {onions[1].onionCorr.components.getCaptionWithParseButton(onions[1].autoParse, onions[1].setAutoParse, "left")}
+                    </Group>
                     <Stack>
                         {onions[1].onionCs.components.makeTabs("editor", csTabs)}
                         {onions[1].onionCs.components.makeTabs("merge", csTabs)}
@@ -275,8 +253,8 @@ export function getDemoBM() {
                             </InfoHoverCard>
                         </Center>
                     </Stack>
-                </Grid.Col>
-            </Grid>
+                </Stack>
+            </SimpleGrid>
             </OnionContext.Provider>
         </div>);
     }

src/frontend/demos/demo_live.tsx

@@ -30,8 +30,6 @@ export const demo_Live_description = <>
 
 const getStateName = s => (s.getOutgoingEdges().get("name") as IValueState).value as string;
 
-const initialStateColor = "#b2f4e0";
-
 export function getDemoLive() {
   const deltaRegistry = new DeltaRegistry();
   const generateUUID = mockUuid();
@@ -90,7 +88,7 @@ export function getDemoLive() {
 
     type Transition = [string, string, string, INodeState];
 
-    const getDesignModelStuff = graphState => {
+    const getDesignModelStuff = (graphState: GraphState) => {
       const states: Array<[string, INodeState]> = [];
       const transitions: Array<Transition> = [];
       const events: Array<[string,Array<Transition>]> = [];
@@ -147,7 +145,7 @@ export function getDemoLive() {
       return result;
     }
 
-    const getRuntimeModelStuff = graphState => {
+    const getRuntimeModelStuff = (graphState: GraphState) => {
       const designModelStuff = getDesignModelStuff(graphState);
       let runtimeModelNode: INodeState|null = null;
       let currentStateName : string|null = null;
@@ -164,16 +162,15 @@ export function getDemoLive() {
         }[nodeType])?.();
       }
 
-      const dotGraph = `
-        digraph {
-          bgcolor="transparent";
-          rankdir="LR";
-          ${designModelStuff.states.map(([name])=>name
-            + (name === designModelStuff.initialStateName ? `[fillcolor="${initialStateColor}", style=filled]`:`[fillcolor=white, style=filled]`)
-            + (name === currentStateName ? `[penwidth=4.0, shape=circle]`:`[shape=circle]`)
-          ).join(' ')}
-          ${designModelStuff.transitions.map(([src,tgt,label])=> src + ' -> ' + tgt + ' [label='+label+']').join('\n')}
-        }`;
+      const dotGraph = `digraph {
+        bgcolor="transparent";
+        rankdir="LR";
+        ${designModelStuff.initial !== undefined ? "I [shape=point, width=0.1]; I -> S_"+designModelStuff.initialStateName:""}
+        ${designModelStuff.states.map(([name])=>'S_'+name+`[label=${name}, fillcolor=white, style=filled]`
+          + (name === currentStateName ? `[penwidth=4.0, shape=circle]`:`[shape=circle]`)
+        ).join(' ')}
+        ${designModelStuff.transitions.map(([src,tgt,label])=> 'S_'+src + ' -> ' + 'S_'+tgt + ' [label='+label+']').join('\n')}
+      }`;
 
       const result: {
         runtimeModelNode: INodeState|null,
@@ -472,11 +469,6 @@ export function getDemoLive() {
                 data={runtimeStuff.states.map(([stateName]) => ({value:stateName, label:stateName}))}
                 value={runtimeStuff.initialStateName}
                 onChange={onInitialStateChange}
-                styles={(theme) => ({
-                  input: {
-                    backgroundColor: runtimeStuff.initialStateName === null ? undefined : initialStateColor,
-                  },
-                })}
               />
             </Group>
             <div style={{minHeight: 26}}>

src/frontend/versioned_model/single_model.tsx

@@ -67,9 +67,6 @@ export function newOnion({readonly, deltaRegistry, versionRegistry}) {
 
   // The "current version" is both part of the React state (for rendering undo/redo buttons) and a local variable here, such that we can get the current version (synchronously), even outside of a setState-callback.
   let currentVersion = versionRegistry.initialVersion;
-  function getCurrentVersion() {
-    return currentVersion;
-  }
 
   function useOnion(overridenCallbacks: (any) => VersionedModelCallbacks) {
     const [version, setVersion] = React.useState<Version>(versionRegistry.initialVersion);

src/onion/graph_state.ts

@@ -157,9 +157,10 @@ class NodeState extends Common implements INodeState {
 
   readonly creation: NodeCreation;
 
-  // For every *currently* outgoing edge, the Delta that set this edge to its current value
+  // For every outgoing edge, the Delta that set this edge to its current value
   readonly outgoing: Map<string, EdgeUpdate> = new Map();
 
+  // All currently outgoing edges. Edges that were set to null will not be part of this mapping.
   readonly outgoingStates: Map<string, IValueState | INodeState> = new Map();
 
   isDeleted: boolean = false; // has the node been deleted?
@@ -540,6 +541,7 @@ export class GraphState {
     if (edge instanceof NewEdge) {
       // Nothing was overwritten
       sourceState.outgoing.delete(label);
+      sourceState.outgoingStates.delete(label);
     }
     else if (edge instanceof ExistingEdge) {
       const overwrittenUpdate = edge.delta;