feat: switch to ELK layout engine with visual polish

- Replace dagre with cytoscape-elk for proper layered graph layout
- Add post-layout edge routing that curves skip connections around
intermediate nodes with staggered offsets to prevent crossovers
- Fixed-size 40px circular nodes with thin coloured borders
- Thin 1px black edges with small arrows
- Add Playwright browser env vars to flake.nix for NixOS

dfgraph/frontend/package-lock.json

···
       "dependencies": {
         "cytoscape": "^3.30.0",
         "cytoscape-dagre": "^2.5.0",
+        "cytoscape-elk": "^2.3.0",
         "cytoscape-svg": "^0.4.0"
       },
       "devDependencies": {
···
         "cytoscape": "^3.2.22"
       }
     },
+    "node_modules/cytoscape-elk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-elk/-/cytoscape-elk-2.3.0.tgz",
+      "integrity": "sha512-1h2ZmPOy5HD2+mrfF3P2ICxfnDyPCWg/xLVs7fIjTOzdQu51ydrMtm6Sb7KnhFwLBzhGIVYI2Gbns0njggBarQ==",
+      "license": "MIT",
+      "dependencies": {
+        "elkjs": "^0.9.3"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
     "node_modules/cytoscape-svg": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/cytoscape-svg/-/cytoscape-svg-0.4.0.tgz",
···
         "graphlib": "^2.1.8",
         "lodash": "^4.17.15"
       }
+    },
+    "node_modules/elkjs": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.3.tgz",
+      "integrity": "sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==",
+      "license": "EPL-2.0"
     },
     "node_modules/esbuild": {
       "version": "0.24.2",

dfgraph/frontend/package.json

···
   "dependencies": {
     "cytoscape": "^3.30.0",
     "cytoscape-dagre": "^2.5.0",
+    "cytoscape-elk": "^2.3.0",
     "cytoscape-svg": "^0.4.0"
   },
   "devDependencies": {

dfgraph/frontend/src/cytoscape-elk.d.ts

···
+declare module "cytoscape-elk" {
+  const ext: cytoscape.Ext;
+  export default ext;
+}

dfgraph/frontend/src/layout.ts

···
 export function logicalLayout(): object {
   return {
-    name: "dagre",
-    rankDir: "TB",
-    nodeSep: 60,
-    rankSep: 80,
-    edgeSep: 20,
+    name: "elk",
+    elk: {
+      algorithm: "layered",
+      "elk.direction": "DOWN",
+      "elk.spacing.nodeNode": 40,
+      "elk.layered.spacing.nodeNodeBetweenLayers": 45,
+      "elk.spacing.edgeNode": 25,
+      "elk.spacing.edgeNodeBetweenLayers": 20,
+      "elk.spacing.edgeEdge": 12,
+      "elk.spacing.edgeEdgeBetweenLayers": 12,
+      "elk.edgeRouting": "ORTHOGONAL",
+      "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+      "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+    },
     animate: false,
   };
 }
 
 export function physicalLayout(): object {
   return {
-    name: "dagre",
-    rankDir: "TB",
-    nodeSep: 40,
-    rankSep: 60,
-    edgeSep: 15,
+    name: "elk",
+    elk: {
+      algorithm: "layered",
+      "elk.direction": "DOWN",
+      "elk.spacing.nodeNode": 35,
+      "elk.layered.spacing.nodeNodeBetweenLayers": 40,
+      "elk.spacing.edgeNode": 20,
+      "elk.spacing.edgeNodeBetweenLayers": 15,
+      "elk.spacing.edgeEdge": 10,
+      "elk.spacing.edgeEdgeBetweenLayers": 10,
+      "elk.edgeRouting": "ORTHOGONAL",
+      "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+      "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+    },
     animate: false,
   };
 }

dfgraph/frontend/src/main.ts

···
 import cytoscape from "cytoscape";
-import dagre from "cytoscape-dagre";
+import elk from "cytoscape-elk";
 import svg from "cytoscape-svg";
 import type { GraphUpdate, GraphNode, GraphEdge, GraphRegion } from "./types";
 import { stylesheet } from "./style";
 import { logicalLayout, physicalLayout } from "./layout";
 import { exportSvg, exportPng, copyPng } from "./export";
 
-cytoscape.use(dagre);
+cytoscape.use(elk);
 cytoscape.use(svg);
 
 const ROUTING_CATEGORY = "routing";
···
   container: document.getElementById("graph"),
   style: stylesheet,
   elements: [],
+  maxZoom: 2.0,
+  minZoom: 0.1,
 });
 
 function buildLabel(node: GraphNode): string {
···
 let currentView: ViewMode = "logical";
 let latestUpdate: GraphUpdate | null = null;
 
+function routeEdges(): void {
+  const nodes = cy.nodes().not(":parent");
+  const nodePositions: Array<{ x: number; y: number }> = [];
+  nodes.forEach((n) => {
+    nodePositions.push({ x: n.position("x"), y: n.position("y") });
+  });
+
+  let leftCount = 0;
+  let rightCount = 0;
+
+  cy.edges().forEach((edge) => {
+    const sy = edge.source().position("y");
+    const ty = edge.target().position("y");
+    const sx = edge.source().position("x");
+    const tx = edge.target().position("x");
+    const span = Math.abs(ty - sy);
+
+    if (span < 80) {
+      edge.style({ "curve-style": "bezier" });
+      return;
+    }
+
+    const blocked = nodePositions.some((p) => {
+      return (
+        p.y > Math.min(sy, ty) + 25 &&
+        p.y < Math.max(sy, ty) - 25
+      );
+    });
+
+    if (!blocked) {
+      edge.style({ "curve-style": "bezier" });
+      return;
+    }
+
+    const avgX = (sx + tx) / 2;
+    const centerX = (Math.min(...nodePositions.map((p) => p.x)) +
+                     Math.max(...nodePositions.map((p) => p.x))) / 2;
+    const goLeft = avgX >= centerX;
+
+    const baseOffset = 30;
+    const stagger = goLeft ? 12 * leftCount : 12 * rightCount;
+    const offset = (goLeft ? -1 : 1) * (baseOffset + stagger);
+
+    if (goLeft) leftCount++;
+    else rightCount++;
+
+    edge.style({
+      "curve-style": "unbundled-bezier",
+      "control-point-distances": [offset * 0.6, offset, offset * 0.6],
+      "control-point-weights": [0.2, 0.5, 0.8],
+    });
+  });
+}
+
 function renderLogical(update: GraphUpdate): void {
   cy.batch(() => {
     cy.elements().remove();
     cy.add(buildElements(update));
   });
-  cy.layout(logicalLayout()).run();
-  cy.fit(undefined, 40);
+  const layout = cy.layout(logicalLayout());
+  layout.on("layoutstop", () => {
+    routeEdges();
+    cy.fit(undefined, 40);
+  });
+  layout.run();
 }
 
 function renderPhysical(update: GraphUpdate): void {
···
     cy.elements().remove();
     cy.add(buildPhysicalElements(update));
   });
-  cy.layout(physicalLayout()).run();
-  cy.fit(undefined, 40);
+  const layout = cy.layout(physicalLayout());
+  layout.on("layoutstop", () => {
+    routeEdges();
+    cy.fit(undefined, 40);
+  });
+  layout.run();
 }
 
 function renderUpdate(update: GraphUpdate): void {

dfgraph/frontend/src/style.ts

···
     selector: "node",
     style: {
       shape: "ellipse",
-      width: "label",
-      height: "label",
-      padding: "12px",
+      width: 40,
+      height: 40,
       "text-valign": "center",
       "text-halign": "center",
       label: "data(label)",
-      "font-size": 11,
+      "text-wrap": "wrap",
+      "text-max-width": "36px",
+      "font-size": 8,
       "font-family": "monospace",
-      color: "#fff",
+      color: "#111",
       "text-outline-width": 0,
-      "background-color": "data(colour)",
-      "border-width": 2,
+      "background-color": "#fff",
+      "background-opacity": 1,
+      "border-width": 1.5,
       "border-color": "data(colour)",
     },
   },
···
     selector: "$node > node",
     style: {
       shape: "roundrectangle",
+      width: "label",
+      height: "label",
       "border-style": "dashed",
-      "border-width": 2,
+      "border-width": 1,
       "border-color": "#888",
-      "background-color": "rgba(200, 200, 200, 0.08)",
-      padding: "24px",
+      "background-color": "rgba(200, 200, 200, 0.06)",
+      padding: "20px",
       "text-valign": "top",
       "text-halign": "center",
       label: "data(label)",
-      "font-size": 12,
+      "font-size": 9,
       color: "#666",
     },
   },
   {
     selector: "edge",
     style: {
-      "curve-style": "bezier",
+      "curve-style": "unbundled-bezier",
       "target-arrow-shape": "triangle",
-      "target-arrow-color": "#999",
-      "line-color": "#999",
-      width: 2,
+      "arrow-scale": 0.6,
+      "target-arrow-color": "#333",
+      "line-color": "#333",
+      width: 1,
       "target-label": "data(targetLabel)",
-      "target-text-offset": 18,
-      "target-text-margin-y": -10,
+      "target-text-offset": 14,
+      "target-text-margin-y": -6,
       "source-label": "data(sourceLabel)",
-      "source-text-offset": 18,
-      "source-text-margin-y": -10,
-      "font-size": 9,
+      "source-text-offset": 14,
+      "source-text-margin-y": -6,
+      "font-size": 7,
       "font-family": "monospace",
-      color: "#666",
+      color: "#333",
       "text-background-color": "#fff",
-      "text-background-opacity": 0.8,
-      "text-background-padding": "2px",
+      "text-background-opacity": 0.9,
+      "text-background-padding": "1px",
     },
   },
   {
     selector: "node.error",
     style: {
       "border-style": "dashed",
-      "border-width": 3,
+      "border-width": 1.5,
       "border-color": "#e53935",
     },
   },
···
     selector: "node.pe-cluster",
     style: {
       shape: "roundrectangle",
-      "border-width": 2,
+      width: "label",
+      height: "label",
+      "border-width": 1.5,
       "border-color": "#5c6bc0",
-      "background-color": "rgba(92, 107, 192, 0.06)",
-      padding: "20px",
+      "background-color": "rgba(92, 107, 192, 0.04)",
+      padding: "16px",
       "text-valign": "top",
       "text-halign": "center",
       label: "data(label)",
-      "font-size": 13,
+      "font-size": 9,
       "font-weight": "bold",
       color: "#5c6bc0",
     },
···
   {
     selector: "edge.cross-pe",
     style: {
-      width: 3,
+      width: 1.5,
       "line-color": "#5c6bc0",
       "target-arrow-color": "#5c6bc0",
     },
···
   {
     selector: "edge.intra-pe",
     style: {
-      width: 1.5,
-      "line-color": "#bbb",
-      "target-arrow-color": "#bbb",
+      width: 0.75,
+      "line-color": "#999",
+      "target-arrow-color": "#999",
     },
   },
 ];

flake.nix

···
 
             nodejs
             nodePackages.npm
+            playwright-driver.browsers
           ];
 
           # Point nix-ld at the libs these wheels need
···
             pkgs.proj
             pkgs.hdf5
           ];
+
+          PLAYWRIGHT_BROWSERS_PATH = "${pkgs.playwright-driver.browsers}";
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "1";
+          PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS = true;
+          PLAYWRIGHT_HOST_PLATFORM_OVERRIDE = "ubuntu-24.04";
 
           shellHook = ''
             # Create/reuse a local venv so uv has somewhere to install to.