Model graph: decision and registry links on by default, placed near their elements

src/graph/layout.ts

@@ -70,11 +70,19 @@ export function layeredLayout(nodes: GraphNode[], edges: GraphEdge[], options: L
     list.forEach((n, i) => positions.set(n.id, { x: index * options.columnGap, y: offset + i * options.rowGap }));
   });
   const width = Math.max(0, used.length - 1) * options.columnGap;
+  // Registries and decisions sit above or below the elements they link to: at the mean x of those
+  // elements, pushed apart only as far as needed so they do not overlap.
   const spread = (list: GraphNode[], y: number, gap: number) => {
-    const total = Math.max(0, list.length - 1) * gap;
-    list.forEach((n, i) => positions.set(n.id, { x: width / 2 - total / 2 + i * gap, y }));
+    const wanted = list.map((n) => {
+      const xs = (neighbours.get(n.id) ?? []).map((id) => positions.get(id)?.x).filter((x): x is number => x !== undefined);
+      return { n, x: xs.length ? xs.reduce((a, b) => a + b, 0) / xs.length : width / 2 };
+    });
+    wanted.sort((a, b) => a.x - b.x || a.n.label.localeCompare(b.n.label));
+    for (let i = 1; i < wanted.length; i += 1) wanted[i].x = Math.max(wanted[i].x, wanted[i - 1].x + gap);
+    for (let i = wanted.length - 2; i >= 0; i -= 1) wanted[i].x = Math.min(wanted[i].x, wanted[i + 1].x - gap);
+    for (const { n, x } of wanted) positions.set(n.id, { x, y });
   };
-  spread(registries, -options.rowGap * 1.6, Math.max(options.columnGap, 200));
-  spread(decisions, tallest * options.rowGap + options.rowGap * 0.6, Math.max(options.columnGap, 240));
+  spread(registries, -options.rowGap * 1.6, 200);
+  spread(decisions, tallest * options.rowGap + options.rowGap * 0.6, 250);
   return positions;
 }