Show conflict kind in delta graph

src/frontend/d3graph/reducers/delta_graph.ts

@@ -22,7 +22,7 @@ export function deltaGraphReducer(prevState: DeltaGraphState, action: DeltaGraph
         links: prevState.links.map(l => {
           if (l.source.id === deltaId || l.target.id === deltaId) {
             if (l.bidirectional) {
-              return conflictToDepGraphLink(l.source.obj, l.target.obj);
+              return conflictToDepGraphLink(l.source.obj, l.target.obj, l.label);
             } else {
               return dependencyToDepGraphLink(l.source.obj, l.target.obj, l.label);
             }
@@ -39,7 +39,7 @@ export function deltaGraphReducer(prevState: DeltaGraphState, action: DeltaGraph
         links: prevState.links.map(l => {
           if (l.source.id === deltaId || l.target.id === deltaId) {
             if (l.bidirectional) {
-              return conflictToDepGraphLink(l.source.obj, l.target.obj);
+              return conflictToDepGraphLink(l.source.obj, l.target.obj, l.label);
             } else {
               return dependencyToDepGraphLink(l.source.obj, l.target.obj, l.label);
             }
@@ -60,7 +60,9 @@ export function deltaGraphReducer(prevState: DeltaGraphState, action: DeltaGraph
         // for every dependency and conflict, add a link:
         links: prevState.links.concat(
             ...delta.getDependencies().map(([dep,depSummary]) => dependencyToDepGraphLink(delta, dep, depSummary)),
-            ...delta.conflictsWith.filter(([conflictingDelta]) => prevState.nodes.some(n => n.id === fullDeltaId(conflictingDelta))).map(([conflictingDelta]) => conflictToDepGraphLink(delta, conflictingDelta)),
+            ...delta.conflictsWith
+              .filter(([conflictingDelta]) => prevState.nodes.some(n => n.id === fullDeltaId(conflictingDelta)))
+              .map(([conflictingDelta, kind]) => conflictToDepGraphLink(delta, conflictingDelta, kind)),
           ),
       };
     }
@@ -92,10 +94,10 @@ function dependencyToDepGraphLink(fromDelta: Delta, toDelta: Delta, label: strin
     obj: null,
   };
 }
-function conflictToDepGraphLink(fromDelta: Delta, toDelta: Delta): D3LinkData<null> {
+function conflictToDepGraphLink(fromDelta: Delta, toDelta: Delta, kind: string): D3LinkData<null> {
   return {
     source: fullDeltaId(fromDelta),
-    label: "",
+    label: kind,
     color: 'red',
     bidirectional: true,
     target: fullDeltaId(toDelta),

src/frontend/demos/demo_live.tsx

@@ -192,7 +192,18 @@ export function getDemoLive() {
     const designStuff = React.useMemo(() => getDesignModelStuff(designModelGraphState),
       [state.version.getEmbedding("design").version]); // memoize the values for each version
 
-    const notReplayable = [...state.version.embeddings.values()].some(embedding => embedding.overridings.size > 0);
+    // If the current (runtime) version, or any of its ancestors overrides some delta, we know that there was a conflict between a delta of the runtime version and its embedded design version, meaning that the current execution trace cannot be replayed.
+    const notReplayable = (() => {
+      let v = state.version;
+      while (v !== undefined) {
+        const designEmbedding = v.embeddings.get("design");
+        if (designEmbedding && designEmbedding.overridings.size > 0) {
+          return true;
+        }
+        v = v.parents[0]?.[0];
+      }
+      return false;
+    })();
 
     const [addStateName, setAddStateName] = React.useState<string>("A");
     const [addTransitionSrc, setAddTransitionSrc] = React.useState<string|null>(null);
@@ -425,7 +436,7 @@ export function getDemoLive() {
             runtimeStuff.runtimeModelNode!.getDeltaForSetEdge(deltaRegistry,
               "current", // label
               findState(graphState, tgtName)?.creation || null, // target
-              // reads:
+              // read dependency on src,tgt,label of transition:
               ["src", "tgt", "event"].map(label => transition.outgoingDeltas.get(label)!.read()),
             )
           );