feat: add one-turn situation graph update UI

2026-08-02 09:43:42 +01:00
parent a948910ba8
commit a9bce79658
11 changed files with 901 additions and 42 deletions
@@ -0,0 +1,169 @@
+import React from "react";
+
+function ListSection({ title, items, renderItem = (item) => item }) {
+  if (!items?.length) return null;
+
+  return (
+    <section className="rounded-lg border border-gray-200 bg-white p-4">
+      <h3 className="mb-2 text-sm font-semibold text-gray-800">{title}</h3>
+      <ul className="space-y-1 text-sm text-gray-700">
+        {items.map((item, index) => (
+          <li key={`${title}-${index}`}>{renderItem(item)}</li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default function GraphUpdateView({ updateResult }) {
+  if (!updateResult?.proposal) return null;
+
+  const {
+    resolvedUnknownNodeIds,
+    affectedNodeIds,
+    previousActiveUnknownNodeId,
+    newActiveUnknownNodeId,
+    changesApplied,
+    proposal,
+    previousSituationGraph,
+    updatedSituationGraph,
+  } = updateResult;
+
+  const previousNodesById = new Map(
+    (previousSituationGraph?.nodes || []).map((node) => [node.id, node]),
+  );
+  const updatedNodesById = new Map(
+    (updatedSituationGraph?.nodes || []).map((node) => [node.id, node]),
+  );
+  const proposalUpdatesByNodeId = new Map(
+    (proposal.updatedNodes || []).map((update) => [update.nodeId, update]),
+  );
+
+  function resolveNodePresentation(nodeId) {
+    const previousNode = previousNodesById.get(nodeId) || null;
+    const updatedNode = updatedNodesById.get(nodeId) || null;
+    const node = updatedNode || previousNode;
+    const update = proposalUpdatesByNodeId.get(nodeId) || null;
+
+    if (!node) {
+      return (
+        <div className="space-y-1">
+          <div className="font-medium text-gray-900">Unknown node (ID: {nodeId})</div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-1">
+        <div className="font-medium text-gray-900">{node.label}</div>
+        <div className="text-xs text-gray-600">
+          {node.kind} · {node.confidence}
+        </div>
+        {(update?.previousStatus || update?.newStatus || node.status) && (
+          <div className="text-xs text-gray-700">
+            {update?.previousStatus ? `Previous status: ${update.previousStatus}` : null}
+            {update?.previousStatus && update?.newStatus ? " → " : null}
+            {update?.newStatus
+              ? `New status: ${update.newStatus}`
+              : !update?.previousStatus
+                ? `Status: ${node.status}`
+                : null}
+          </div>
+        )}
+        {update?.reason && <div className="text-xs text-gray-700">{update.reason}</div>}
+      </div>
+    );
+  }
+
+  function resolveActiveUnknown(nodeId) {
+    if (!nodeId) return null;
+
+    const node = updatedNodesById.get(nodeId) || previousNodesById.get(nodeId);
+    if (!node) {
+      return `Unknown node (ID: ${nodeId})`;
+    }
+
+    return `${node.label} · ${node.status} · ${node.confidence}`;
+  }
+
+  const changeItems = [
+    changesApplied?.addedNodeCount
+      ? `${changesApplied.addedNodeCount} node(s) added`
+      : null,
+    changesApplied?.updatedNodeCount
+      ? `${changesApplied.updatedNodeCount} node(s) updated`
+      : null,
+    changesApplied?.addedEdgeCount
+      ? `${changesApplied.addedEdgeCount} edge(s) added`
+      : null,
+    changesApplied?.removedEdgeCount
+      ? `${changesApplied.removedEdgeCount} edge(s) removed`
+      : null,
+    changesApplied?.resolvedUnknownCount
+      ? `${changesApplied.resolvedUnknownCount} unknown(s) resolved`
+      : null,
+  ].filter(Boolean);
+
+  return (
+    <div className="space-y-4">
+      <section className="rounded-lg border border-blue-200 bg-blue-50 p-4">
+        <h2 className="mb-2 text-base font-semibold text-blue-900">
+          Graph update applied
+        </h2>
+        <div className="grid gap-2 text-sm text-blue-950 sm:grid-cols-2">
+          {previousActiveUnknownNodeId && (
+            <div>
+              <span className="font-medium">Previous active unknown:</span>{" "}
+              {resolveActiveUnknown(previousActiveUnknownNodeId)}
+            </div>
+          )}
+          {newActiveUnknownNodeId && (
+            <div>
+              <span className="font-medium">New active unknown:</span>{" "}
+              {resolveActiveUnknown(newActiveUnknownNodeId)}
+            </div>
+          )}
+          {!newActiveUnknownNodeId && previousActiveUnknownNodeId && (
+            <div>
+              <span className="font-medium">Next question status:</span> No next
+              question selected yet.
+            </div>
+          )}
+        </div>
+      </section>
+
+      <ListSection
+        title="Resolved unknowns"
+        items={resolvedUnknownNodeIds}
+        renderItem={resolveNodePresentation}
+      />
+      <ListSection
+        title="Affected nodes"
+        items={affectedNodeIds}
+        renderItem={resolveNodePresentation}
+      />
+      <ListSection title="Applied changes" items={changeItems} />
+
+      <details className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+        <summary className="cursor-pointer text-sm font-medium text-gray-700 underline">
+          Proposal details
+        </summary>
+        <pre className="mt-3 overflow-auto rounded bg-gray-900 p-3 text-xs text-green-400">
+          {JSON.stringify(proposal, null, 2)}
+        </pre>
+        <pre className="mt-3 overflow-auto rounded bg-gray-900 p-3 text-xs text-green-400">
+          {JSON.stringify(
+            {
+              previousActiveUnknownNodeId,
+              newActiveUnknownNodeId,
+              resolvedUnknownNodeIds,
+              affectedNodeIds,
+            },
+            null,
+            2,
+          )}
+        </pre>
+      </details>
+    </div>
+  );
+}