@takodotid/circuit 0.34.2 → 0.35.0

package/src/studio/public/graph.js

@@ -2,1463 +2,1540 @@
 /// <reference lib="dom" />
 // The graph view: a force layout of every node, drawn one layer at a time, with panning, zooming, dragging, and a side panel for what is selected.
 
-import { byId, enter, go, h, link, s, still, store, svgById } from "./dom.js";
-import { changeKey } from "./evaluate.js";
-import { pngOf, save, svgOf } from "./export.js";
-
-/** @typedef {import("../../core/graph").GraphNode} GraphNode */
-/** @typedef {import("../../core/graph").GraphEdge} GraphEdge */
-/** @typedef {import("../../core/graph").Layer} Layer */
-/** @typedef {import("../../core/graph").CarriedVlan} CarriedVlan */
-/** @typedef {import("../../core/graph").Annotated} Annotated */
+import { Dom } from "./dom.js";
+import { Evaluate } from "./evaluate.js";
+import { Export } from "./export.js";
+
+/** @typedef {import("../../core/topology").GraphNode} GraphNode */
+/** @typedef {import("../../core/topology").GraphEdge} GraphEdge */
+/** @typedef {import("../../core/topology").Layer} Layer */
+/** @typedef {import("../../core/topology").CarriedVlan} CarriedVlan */
+/** @typedef {import("../../core/topology").Annotated} Annotated */
 /** @typedef {{ x: number, y: number }} Point */
 /** An edge as drawn: one of the graph's, or several between the same two nodes drawn as one, or one a comparison shows is gone. @typedef {GraphEdge & { members?: DrawnEdge[], gone?: true }} DrawnEdge */
 /** @typedef {{ node: string } | { edge: DrawnEdge } | undefined} Selection */
+/** @typedef {{ x: number, y: number, k: number }} View */
+
+export class Graph {
+    /** @type {Record<Layer, string>} */
+    static LAYER_NAMES = {
+        l1: "Cables",
+        l2: "VLANs",
+        l3: "Addresses",
+        bgp: "BGP",
+        ospf: "OSPF",
+        tunnels: "Tunnels",
+    };
 
-/** @type {Record<Layer, string>} */
-export const LAYER_NAMES = {
-    l1: "Cables",
-    l2: "VLANs",
-    l3: "Addresses",
-    bgp: "BGP",
-    ospf: "OSPF",
-    tunnels: "Tunnels",
-};
-
-/** @type {Record<Layer, string>} */
-const LAYER_HELP = {
-    l1: "Each cable a port's link names. A LAG's cables are one line.",
-    l2: "The VLANs each cable carries. Pick a VLAN to light up every cable that carries it.",
-    l3: "Prefixes two or more devices hold an address in, and point-to-point addresses. Loopbacks and prefixes only one device holds are left out.",
-    bgp: "BGP sessions: between our devices, matched by the address each names, and to every AS outside.",
-    ospf: "OSPF adjacencies: devices with OSPF in one area on one prefix, neither side passive.",
-    tunnels: "GRE and VXLAN tunnels matched by their endpoints, and WireGuard peers.",
-};
-
-export const LAYERS = /** @type {Layer[]} */ (Object.keys(LAYER_NAMES));
-
-/**
- * @param {string | undefined} name
- * @returns {name is Layer}
- */
-export const isLayer = (name) => LAYERS.includes(/** @type {Layer} */ (name));
-
-// The parts of index.html this view draws into.
-const graphView = byId("graph-view");
-const layersNav = byId("layers");
-const svg = svgById("canvas");
-const viewport = svgById("viewport");
-const edgeLayer = svgById("edges");
-const nodeLayer = svgById("nodes");
-const panel = byId("panel");
-const presentButton = byId("present");
-const caption = byId("present-caption");
-
-// State.
-/** @type {Annotated | undefined} */
-let data;
-/** @type {Layer} */
-let layer = LAYERS.find((name) => name === store.get("layer")) ?? "l1";
-/** The graph has been drawn while visible at least once; until then it is fitted when shown. */
-let drawn = false;
-/** @type {Selection} */
-let selection;
-/** @type {string | undefined} */
-let hovered;
-/** @type {number | undefined} */
-let vlanFocus;
-/** A VLAN to light up once the VLAN layer is shown, asked for from the tables. @type {number | undefined} */
-let pendingVlan;
-/** Cables to light up as one path, asked for from the tools, and those lit now. @type {GraphEdge[] | undefined} */
-let pendingPath;
-/** @type {Set<string> | undefined} */
-let pathFocus;
-/** A comparison with another commit: its name, the edges it adds, and those gone. @type {{ name: string, added: Set<string>, removed: GraphEdge[] } | undefined} */
-let comparison;
-/** Presenting: the network on a big screen, going through every layer and lighting its busiest devices in turn. Kept, so a screen that reloads stays on it. */
-let presenting = store.get("present") === true;
-/** The device lit while presenting; none while the whole layer is shown. @type {string | undefined} */
-let touring;
-/** @type {ReturnType<typeof setInterval> | undefined} */
-let tour;
-
-/** @param {GraphEdge} edge */
-const edgeKey = (edge) => `${edge.layer} ${edge.from} ${edge.to} ${edge.label}`;
-let view = { x: 0, y: 0, k: 1 };
-/** Where the reader left each layer's view, as each layer is a drawing of its own. @type {Map<Layer, typeof view>} */
-const views = new Map();
-
-/** @typedef {Record<string, [number, number]>} SavedPlaces */
-
-const saved = /** @type {Partial<Record<Layer, SavedPlaces>>} */ (store.get("layouts") ?? {});
-// The one layout an earlier Studio kept for every layer carries on as the cables layer's.
-const earlier = /** @type {SavedPlaces | undefined} */ (store.get("positions"));
-
-/** Where each node is on each layer: every layer is laid out for its own lines, and keeps where its devices were moved. @type {Map<Layer, Map<string, Point>>} */
-const layouts = new Map(
-    LAYERS.map((name) => {
-        const places = saved[name] ?? (name === "l1" ? earlier : undefined) ?? {};
-        return [name, new Map(Object.entries(places).map(([id, [x, y]]) => [id, { x, y }]))];
-    })
-);
-
-/** @param {Layer} name */
-const layoutOf = (name) => /** @type {Map<string, Point>} */ (layouts.get(name));
-
-/** Where nodes are drawn now: the layer's own places, or, while the layer changes, the places on the way there. */
-let positions = layoutOf(layer);
-
-/** @type {Map<string, SVGGElement>} */
-const nodeElements = new Map();
-/** @type {{ edge: DrawnEdge, group: SVGGElement, path: SVGPathElement, hit: SVGPathElement, label: SVGTextElement, offset: number }[]} */
-const edgeElements = [];
-
-function savePositions() {
-    /** @param {Map<string, Point>} places */
-    const rounded = (places) => Object.fromEntries([...places].map(([id, point]) => [id, [Math.round(point.x), Math.round(point.y)]]));
-    store.set("layouts", Object.fromEntries([...layouts].map(([name, places]) => [name, rounded(places)])));
-}
-
-/**
- * A number from 0 to 1 that is always the same for the same text, so a layout comes out the same each time.
- *
- * @param {string} text
- */
-function hash(text) {
-    let value = 2166136261;
-    for (const char of text) value = Math.imul(value ^ char.charCodeAt(0), 16777619);
-    return (value >>> 0) / 4294967296;
-}
+    /** @type {Record<Layer, string>} */
+    static #LAYER_HELP = {
+        l1: "Each cable a port's link names. A LAG's cables are one line.",
+        l2: "The VLANs each cable carries. Pick a VLAN to light up every cable that carries it.",
+        l3: "Prefixes two or more devices hold an address in, and point-to-point addresses. Loopbacks and prefixes only one device holds are left out.",
+        bgp: "BGP sessions: between our devices, matched by the address each names, and to every AS outside.",
+        ospf: "OSPF adjacencies: devices with OSPF in one area on one prefix, neither side passive.",
+        tunnels: "GRE and VXLAN tunnels matched by their endpoints, and WireGuard peers.",
+    };
 
-/**
- * Place one layer's nodes with a force layout: every node pushes every other away, and each of the layer's edges pulls its ends together. A node placed before keeps its place unless `fresh`, so the drawing does not jump when the config changes.
- * A node new to a layer starts where it is on the cables layer, so each layer is laid out for its own lines yet still looks like the same network.
- *
- * @param {GraphNode[]} nodes
- * @param {GraphEdge[]} edges
- * @param {boolean} fresh
- * @param {Map<string, Point>} places the layer's places, filled in
- * @param {Map<string, Point>} [seed] places to start new nodes from
- */
-function layout(nodes, edges, fresh, places, seed) {
-    if (fresh) places.clear();
+    static LAYERS = /** @type {Layer[]} */ (Object.keys(Graph.LAYER_NAMES));
 
-    /** @param {GraphNode} node */
-    const halfWidth = (node) =>
-        node.kind === "device" ? Math.max(node.label.length * 10, (node.detail[0] ?? "").length * 7) / 2 + 60 : node.label.length * 4 + 30;
-
-    const fixed = new Set(nodes.filter((node) => places.has(node.id)).map((node) => node.id));
-    /** @type {Map<string, Set<string>>} */
-    const neighbors = new Map();
-
-    for (const edge of edges) {
-        if (edge.from === edge.to) continue;
-        if (!neighbors.has(edge.from)) neighbors.set(edge.from, new Set());
-        if (!neighbors.has(edge.to)) neighbors.set(edge.to, new Set());
-        neighbors.get(edge.from)?.add(edge.to);
-        neighbors.get(edge.to)?.add(edge.from);
+    /**
+     * @param {string | undefined} name
+     * @returns {name is Layer}
+     */
+    static isLayer(name) {
+        return Graph.LAYERS.includes(/** @type {Layer} */ (name));
     }
 
-    // A device with no line on this layer is set in a row under the drawing, rather than pushed out to its edges by the rest.
-    const loose = edges.length ? nodes.filter((node) => !neighbors.has(node.id) && !places.has(node.id)) : [];
-    const linked = nodes.filter((node) => !loose.includes(node));
+    // The parts of index.html this view draws into.
+    static #graphView = Dom.byId("graph-view");
+    static #layersNav = Dom.byId("layers");
+    static #svg = Dom.svgById("canvas");
+    static #viewport = Dom.svgById("viewport");
+    static #edgeLayer = Dom.svgById("edges");
+    static #nodeLayer = Dom.svgById("nodes");
+    static #panel = Dom.byId("panel");
+    static #presentButton = Dom.byId("present");
+    static #caption = Dom.byId("present-caption");
+
+    // State.
+    /** @type {Annotated | undefined} */
+    static #data;
+    /** @type {Layer} */
+    static #layer = Graph.LAYERS.find((name) => name === Dom.store.get("layer")) ?? "l1";
+    /** The graph has been drawn while visible at least once; until then it is fitted when shown. */
+    static #drawn = false;
+    /** @type {Selection} */
+    static #selection;
+    /** @type {string | undefined} */
+    static #hovered;
+    /** @type {number | undefined} */
+    static #vlanFocus;
+    /** A VLAN to light up once the VLAN layer is shown, asked for from the tables. @type {number | undefined} */
+    static #pendingVlan;
+    /** Cables to light up as one path, asked for from the tools, and those lit now. @type {GraphEdge[] | undefined} */
+    static #pendingPath;
+    /** @type {Set<string> | undefined} */
+    static #pathFocus;
+    /** A comparison with another commit: its name, the edges it adds, and those gone. @type {{ name: string, added: Set<string>, removed: GraphEdge[] } | undefined} */
+    static #comparison;
+    /** Presenting: the network on a big screen, going through every layer and lighting its busiest devices in turn. Kept, so a screen that reloads stays on it. */
+    static #presenting = Dom.store.get("present") === true;
+    /** The device lit while presenting; none while the whole layer is shown. @type {string | undefined} */
+    static #touring;
+    /** @type {ReturnType<typeof setInterval> | undefined} */
+    static #tour;
 
-    function park() {
-        if (!loose.length) return;
+    /** @param {GraphEdge} edge */
+    static #edgeKey(edge) {
+        return `${edge.layer} ${edge.from} ${edge.to} ${edge.label}`;
+    }
 
-        const placed = linked.flatMap((node) => places.get(node.id) ?? []);
-        const left = placed.length ? Math.min(...placed.map((point) => point.x)) : 0;
-        const right = left + Math.max(placed.length ? Math.max(...placed.map((point) => point.x)) - left : 0, 900);
-        let x = left;
-        let y = (placed.length ? Math.max(...placed.map((point) => point.y)) : 0) + 130;
+    static #view = { x: 0, y: 0, k: 1 };
+    /** Where the reader left each layer's view, as each layer is a drawing of its own. @type {Map<Layer, View>} */
+    static #views = new Map();
 
-        for (const node of [...loose].sort((a, b) => a.label.localeCompare(b.label))) {
-            const half = halfWidth(node);
-            if (x > left && x + half * 2 > right) {
-                x = left;
-                y += 96;
-            }
+    /** @typedef {Record<string, [number, number]>} SavedPlaces */
 
-            places.set(node.id, { x: x + half, y });
-            x += half * 2 + 24;
-        }
+    static #saved = /** @type {Partial<Record<Layer, SavedPlaces>>} */ (Dom.store.get("layouts") ?? {});
+    // The one layout an earlier Studio kept for every layer carries on as the cables layer's.
+    static #earlier = /** @type {SavedPlaces | undefined} */ (Dom.store.get("positions"));
 
-        savePositions();
+    /** Where each node is on each layer: every layer is laid out for its own lines, and keeps where its devices were moved. @type {Map<Layer, Map<string, Point>>} */
+    static #layouts = new Map(
+        Graph.LAYERS.map((name) => {
+            const places = Graph.#saved[name] ?? (name === "l1" ? Graph.#earlier : undefined) ?? {};
+            return [name, new Map(Object.entries(places).map(([id, [x, y]]) => [id, { x, y }]))];
+        })
+    );
+
+    /** @param {Layer} name */
+    static #layoutOf(name) {
+        return /** @type {Map<string, Point>} */ (Graph.#layouts.get(name));
     }
 
-    nodes = linked;
+    /** Where nodes are drawn now: the layer's own places, or, while the layer changes, the places on the way there. */
+    static #positions = Graph.#layoutOf(Graph.#layer);
 
-    // A new node starts beside a neighbor already placed, or on a circle.
-    const radius = 60 * Math.sqrt(nodes.length + 1);
+    /** @type {Map<string, SVGGElement>} */
+    static #nodeElements = new Map();
+    /** @type {{ edge: DrawnEdge, group: SVGGElement, path: SVGPathElement, hit: SVGPathElement, label: SVGTextElement, offset: number }[]} */
+    static #edgeElements = [];
 
-    for (const node of nodes) {
-        if (places.has(node.id)) continue;
+    static #savePositions() {
+        /** @param {Map<string, Point>} places */
+        const rounded = (places) => Object.fromEntries([...places].map(([id, point]) => [id, [Math.round(point.x), Math.round(point.y)]]));
+        Dom.store.set("layouts", Object.fromEntries([...Graph.#layouts].map(([name, places]) => [name, rounded(places)])));
+    }
+
+    /**
+     * A number from 0 to 1 that is always the same for the same text, so a layout comes out the same each time.
+     *
+     * @param {string} text
+     */
+    static #hash(text) {
+        let value = 2166136261;
+        for (const char of text) value = Math.imul(value ^ char.charCodeAt(0), 16777619);
+        return (value >>> 0) / 4294967296;
+    }
 
-        const start = seed?.get(node.id);
-        if (start) {
-            places.set(node.id, { ...start });
-            continue;
+    /**
+     * Place one layer's nodes with a force layout: every node pushes every other away, and each of the layer's edges pulls its ends together. A node placed before keeps its place unless `fresh`, so the drawing does not jump when the config changes.
+     * A node new to a layer starts where it is on the cables layer, so each layer is laid out for its own lines yet still looks like the same network.
+     *
+     * @param {GraphNode[]} nodes
+     * @param {GraphEdge[]} edges
+     * @param {boolean} fresh
+     * @param {Map<string, Point>} places the layer's places, filled in
+     * @param {Map<string, Point>} [seed] places to start new nodes from
+     */
+    static #layout(nodes, edges, fresh, places, seed) {
+        if (fresh) places.clear();
+
+        /** @param {GraphNode} node */
+        const halfWidth = (node) =>
+            node.kind === "device"
+                ? Math.max(node.label.length * 10, (node.detail[0] ?? "").length * 7) / 2 + 60
+                : node.label.length * 4 + 30;
+
+        const fixed = new Set(nodes.filter((node) => places.has(node.id)).map((node) => node.id));
+        /** @type {Map<string, Set<string>>} */
+        const neighbors = new Map();
+
+        for (const edge of edges) {
+            if (edge.from === edge.to) continue;
+            if (!neighbors.has(edge.from)) neighbors.set(edge.from, new Set());
+            if (!neighbors.has(edge.to)) neighbors.set(edge.to, new Set());
+            neighbors.get(edge.from)?.add(edge.to);
+            neighbors.get(edge.to)?.add(edge.from);
         }
 
-        const angle = hash(node.id) * Math.PI * 2;
-        const placed = [...(neighbors.get(node.id) ?? [])].map((id) => places.get(id)).find(Boolean);
-        const distance = placed ? 90 : radius;
-        const origin = placed ?? { x: 0, y: 0 };
+        // A device with no line on this layer is set in a row under the drawing, rather than pushed out to its edges by the rest.
+        const loose = edges.length ? nodes.filter((node) => !neighbors.has(node.id) && !places.has(node.id)) : [];
+        const linked = nodes.filter((node) => !loose.includes(node));
 
-        places.set(node.id, { x: origin.x + Math.cos(angle) * distance, y: origin.y + Math.sin(angle) * distance });
-    }
+        function park() {
+            if (!loose.length) return;
 
-    const moving = nodes.filter((node) => !fixed.has(node.id));
-    if (!moving.length) return park();
+            const placed = linked.flatMap((node) => places.get(node.id) ?? []);
+            const left = placed.length ? Math.min(...placed.map((point) => point.x)) : 0;
+            const right = left + Math.max(placed.length ? Math.max(...placed.map((point) => point.x)) - left : 0, 900);
+            let x = left;
+            let y = (placed.length ? Math.max(...placed.map((point) => point.y)) : 0) + 130;
 
-    const pairs = [...neighbors].flatMap(([from, tos]) => [...tos].filter((to) => from < to).map((to) => [from, to]));
-    const ideal = 170;
-    const rounds = fixed.size ? 200 : 500;
+            for (const node of [...loose].sort((a, b) => a.label.localeCompare(b.label))) {
+                const half = halfWidth(node);
+                if (x > left && x + half * 2 > right) {
+                    x = left;
+                    y += 96;
+                }
 
-    /** @param {string} id */
-    const at = (id) => /** @type {Point} */ (places.get(id));
+                places.set(node.id, { x: x + half, y });
+                x += half * 2 + 24;
+            }
 
-    for (let round = 0; round < rounds; round++) {
-        const heat = 40 * (1 - round / rounds) + 1;
-        const push = new Map(nodes.map((node) => [node.id, { x: 0, y: 0 }]));
-        /** @param {string} id */
-        const pushOf = (id) => /** @type {Point} */ (push.get(id));
+            Graph.#savePositions();
+        }
 
-        for (const [index, a] of nodes.entries()) {
-            for (const b of nodes.slice(index + 1)) {
-                let dx = at(a.id).x - at(b.id).x;
-                let dy = at(a.id).y - at(b.id).y;
+        nodes = linked;
 
-                // Two nodes in one place are pulled apart in a direction of their own.
-                if (dx === 0 && dy === 0) {
-                    dx = hash(a.id + b.id) - 0.5;
-                    dy = hash(b.id + a.id) - 0.5;
-                }
+        // A new node starts beside a neighbor already placed, or on a circle.
+        const radius = 60 * Math.sqrt(nodes.length + 1);
 
-                // Nodes far apart no longer push, so parts that are not connected stay near each other.
-                const distance = Math.max(Math.hypot(dx, dy), 1);
-                if (distance > ideal * 3) continue;
+        for (const node of nodes) {
+            if (places.has(node.id)) continue;
 
-                const force = (ideal * ideal) / distance;
-                pushOf(a.id).x += (dx / distance) * force;
-                pushOf(a.id).y += (dy / distance) * force;
-                pushOf(b.id).x -= (dx / distance) * force;
-                pushOf(b.id).y -= (dy / distance) * force;
+            const start = seed?.get(node.id);
+            if (start) {
+                places.set(node.id, { ...start });
+                continue;
             }
-        }
 
-        for (const [from, to] of pairs) {
-            if (!from || !to || !places.has(from) || !places.has(to)) continue;
-
-            const dx = at(from).x - at(to).x;
-            const dy = at(from).y - at(to).y;
-            const distance = Math.max(Math.hypot(dx, dy), 1);
-            const force = (distance * distance) / ideal;
-            pushOf(from).x -= (dx / distance) * force;
-            pushOf(from).y -= (dy / distance) * force;
-            pushOf(to).x += (dx / distance) * force;
-            pushOf(to).y += (dy / distance) * force;
+            const angle = Graph.#hash(node.id) * Math.PI * 2;
+            const placed = [...(neighbors.get(node.id) ?? [])].map((id) => places.get(id)).find(Boolean);
+            const distance = placed ? 90 : radius;
+            const origin = placed ?? { x: 0, y: 0 };
+
+            places.set(node.id, { x: origin.x + Math.cos(angle) * distance, y: origin.y + Math.sin(angle) * distance });
         }
 
-        for (const node of moving) {
-            const point = at(node.id);
-            const force = pushOf(node.id);
+        const moving = nodes.filter((node) => !fixed.has(node.id));
+        if (!moving.length) return park();
 
-            // A pull to the middle keeps parts that are not connected from drifting away.
-            force.x -= point.x * 0.15;
-            force.y -= point.y * 0.15;
+        const pairs = [...neighbors].flatMap(([from, tos]) => [...tos].filter((to) => from < to).map((to) => [from, to]));
+        const ideal = 170;
+        const rounds = fixed.size ? 200 : 500;
 
-            const length = Math.max(Math.hypot(force.x, force.y), 1);
-            const step = Math.min(length, heat);
-            point.x += (force.x / length) * step;
-            point.y += (force.y / length) * step;
+        /** @param {string} id */
+        const at = (id) => /** @type {Point} */ (places.get(id));
+
+        for (let round = 0; round < rounds; round++) {
+            const heat = 40 * (1 - round / rounds) + 1;
+            const push = new Map(nodes.map((node) => [node.id, { x: 0, y: 0 }]));
+            /** @param {string} id */
+            const pushOf = (id) => /** @type {Point} */ (push.get(id));
+
+            for (const [index, a] of nodes.entries()) {
+                for (const b of nodes.slice(index + 1)) {
+                    let dx = at(a.id).x - at(b.id).x;
+                    let dy = at(a.id).y - at(b.id).y;
+
+                    // Two nodes in one place are pulled apart in a direction of their own.
+                    if (dx === 0 && dy === 0) {
+                        dx = Graph.#hash(a.id + b.id) - 0.5;
+                        dy = Graph.#hash(b.id + a.id) - 0.5;
+                    }
+
+                    // Nodes far apart no longer push, so parts that are not connected stay near each other.
+                    const distance = Math.max(Math.hypot(dx, dy), 1);
+                    if (distance > ideal * 3) continue;
+
+                    const force = (ideal * ideal) / distance;
+                    pushOf(a.id).x += (dx / distance) * force;
+                    pushOf(a.id).y += (dy / distance) * force;
+                    pushOf(b.id).x -= (dx / distance) * force;
+                    pushOf(b.id).y -= (dy / distance) * force;
+                }
+            }
+
+            for (const [from, to] of pairs) {
+                if (!from || !to || !places.has(from) || !places.has(to)) continue;
+
+                const dx = at(from).x - at(to).x;
+                const dy = at(from).y - at(to).y;
+                const distance = Math.max(Math.hypot(dx, dy), 1);
+                const force = (distance * distance) / ideal;
+                pushOf(from).x -= (dx / distance) * force;
+                pushOf(from).y -= (dy / distance) * force;
+                pushOf(to).x += (dx / distance) * force;
+                pushOf(to).y += (dy / distance) * force;
+            }
+
+            for (const node of moving) {
+                const point = at(node.id);
+                const force = pushOf(node.id);
+
+                // A pull to the middle keeps parts that are not connected from drifting away.
+                force.x -= point.x * 0.15;
+                force.y -= point.y * 0.15;
+
+                const length = Math.max(Math.hypot(force.x, force.y), 1);
+                const step = Math.min(length, heat);
+                point.x += (force.x / length) * step;
+                point.y += (force.y / length) * step;
+            }
         }
-    }
 
-    // No box may cover another: two that overlap are pushed apart the shorter way out, with room for the label of the line between them.
+        // No box may cover another: two that overlap are pushed apart the shorter way out, with room for the label of the line between them.
 
-    for (let round = 0; round < 80; round++) {
-        let overlapping = false;
+        for (let round = 0; round < 80; round++) {
+            let overlapping = false;
 
-        for (const [index, a] of nodes.entries()) {
-            for (const b of nodes.slice(index + 1)) {
-                const aMoves = !fixed.has(a.id);
-                const bMoves = !fixed.has(b.id);
-                if (!aMoves && !bMoves) continue;
+            for (const [index, a] of nodes.entries()) {
+                for (const b of nodes.slice(index + 1)) {
+                    const aMoves = !fixed.has(a.id);
+                    const bMoves = !fixed.has(b.id);
+                    if (!aMoves && !bMoves) continue;
 
-                const pa = at(a.id);
-                const pb = at(b.id);
-                const overlapX = halfWidth(a) + halfWidth(b) + 24 - Math.abs(pa.x - pb.x);
-                const overlapY = 96 - Math.abs(pa.y - pb.y);
-                if (overlapX <= 0 || overlapY <= 0) continue;
+                    const pa = at(a.id);
+                    const pb = at(b.id);
+                    const overlapX = halfWidth(a) + halfWidth(b) + 24 - Math.abs(pa.x - pb.x);
+                    const overlapY = 96 - Math.abs(pa.y - pb.y);
+                    if (overlapX <= 0 || overlapY <= 0) continue;
 
-                overlapping = true;
-                const share = aMoves && bMoves ? 0.5 : 1;
-                const alongX = overlapX < overlapY * 2;
-                const sign = alongX ? Math.sign(pa.x - pb.x) || 1 : Math.sign(pa.y - pb.y) || 1;
-                const distance = (alongX ? overlapX : overlapY) * share;
+                    overlapping = true;
+                    const share = aMoves && bMoves ? 0.5 : 1;
+                    const alongX = overlapX < overlapY * 2;
+                    const sign = alongX ? Math.sign(pa.x - pb.x) || 1 : Math.sign(pa.y - pb.y) || 1;
+                    const distance = (alongX ? overlapX : overlapY) * share;
 
-                if (aMoves) alongX ? (pa.x += sign * distance) : (pa.y += sign * distance);
-                if (bMoves) alongX ? (pb.x -= sign * distance) : (pb.y -= sign * distance);
+                    if (aMoves) alongX ? (pa.x += sign * distance) : (pa.y += sign * distance);
+                    if (bMoves) alongX ? (pb.x -= sign * distance) : (pb.y -= sign * distance);
+                }
             }
+
+            if (!overlapping) break;
         }
 
-        if (!overlapping) break;
+        park();
+        Graph.#savePositions();
     }
 
-    park();
-    savePositions();
-}
+    // What is drawn.
 
-// What is drawn.
-
-/**
- * A layer's edges, with those a comparison says are gone.
- *
- * @param {Layer} name
- * @returns {DrawnEdge[]}
- */
-const edgesOn = (name) => {
-    const current = data?.edges.filter((edge) => edge.layer === name) ?? [];
-    if (!comparison) return current;
-
-    // An edge the comparison says is gone is drawn when both its ends are still drawn.
-    const nodes = new Set(data?.nodes.map((node) => node.id));
-    const gone = comparison.removed.filter((edge) => edge.layer === name && nodes.has(edge.from) && nodes.has(edge.to));
-    return [...current, ...gone.map((edge) => ({ ...edge, gone: /** @type {const} */ (true) }))];
-};
-
-/**
- * A layer's nodes: every device, and whatever else its edges end at.
- *
- * @param {Layer} name
- * @returns {GraphNode[]}
- */
-function nodesOn(name) {
-    const ends = new Set(edgesOn(name).flatMap((edge) => [edge.from, edge.to]));
-    return data?.nodes.filter((node) => node.kind === "device" || ends.has(node.id)) ?? [];
-}
+    /**
+     * A layer's edges, with those a comparison says are gone.
+     *
+     * @param {Layer} name
+     * @returns {DrawnEdge[]}
+     */
+    static #edgesOn(name) {
+        const current = Graph.#data?.edges.filter((edge) => edge.layer === name) ?? [];
+        if (!Graph.#comparison) return current;
+
+        // An edge the comparison says is gone is drawn when both its ends are still drawn.
+        const nodes = new Set(Graph.#data?.nodes.map((node) => node.id));
+        const gone = Graph.#comparison.removed.filter((edge) => edge.layer === name && nodes.has(edge.from) && nodes.has(edge.to));
+        return [...current, ...gone.map((edge) => ({ ...edge, gone: /** @type {const} */ (true) }))];
+    }
 
-const visibleEdges = () => edgesOn(layer);
-const visibleNodes = () => nodesOn(layer);
+    /**
+     * A layer's nodes: every device, and whatever else its edges end at.
+     *
+     * @param {Layer} name
+     * @returns {GraphNode[]}
+     */
+    static #nodesOn(name) {
+        const ends = new Set(Graph.#edgesOn(name).flatMap((edge) => [edge.from, edge.to]));
+        return Graph.#data?.nodes.filter((node) => node.kind === "device" || ends.has(node.id)) ?? [];
+    }
 
-/**
- * Lay out a layer for its own lines. The cables layer comes first, as every other layer's new nodes start from it.
- *
- * @param {Layer} name
- * @param {boolean} fresh forget where the layer's nodes were, and lay it out again
- */
-function layOut(name, fresh) {
-    if (!data) return;
-    if (name !== "l1") layOut("l1", false);
+    static #visibleEdges() {
+        return Graph.#edgesOn(Graph.#layer);
+    }
 
-    layout(nodesOn(name), edgesOn(name), fresh, layoutOf(name), name === "l1" ? undefined : layoutOf("l1"));
-}
+    static #visibleNodes() {
+        return Graph.#nodesOn(Graph.#layer);
+    }
 
-/** The node glide between two layers' places, which a press stops. @type {number | undefined} */
-let regrouping;
+    /**
+     * Lay out a layer for its own lines. The cables layer comes first, as every other layer's new nodes start from it.
+     *
+     * @param {Layer} name
+     * @param {boolean} fresh forget where the layer's nodes were, and lay it out again
+     */
+    static #layOut(name, fresh) {
+        if (!Graph.#data) return;
+        if (name !== "l1") Graph.#layOut("l1", false);
+
+        Graph.#layout(
+            Graph.#nodesOn(name),
+            Graph.#edgesOn(name),
+            fresh,
+            Graph.#layoutOf(name),
+            name === "l1" ? undefined : Graph.#layoutOf("l1")
+        );
+    }
 
-/** Put the nodes at their own layer's places now, ending a glide between layers. */
-function settle() {
-    if (regrouping !== undefined) cancelAnimationFrame(regrouping);
-    regrouping = undefined;
-    positions = layoutOf(layer);
-}
+    /** The node glide between two layers' places, which a press stops. @type {number | undefined} */
+    static #regrouping;
 
-/**
- * Move the nodes from where they are drawn to their places on the layer shown, so the eye can follow each device to where it is on this layer.
- *
- * @param {Map<string, Point>} from
- */
-function glideNodes(from) {
-    settle();
-
-    const to = layoutOf(layer);
-    if (still.matches || from === to) return;
-
-    /** @type {Map<string, Point>} */
-    const shown = new Map();
-    const began = performance.now();
-
-    /** @param {number} now */
-    const step = (now) => {
-        const t = Math.min((now - began) / 700, 1);
-        const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
-
-        for (const [id, end] of to) {
-            const start = from.get(id) ?? end;
-            shown.set(id, { x: start.x + (end.x - start.x) * eased, y: start.y + (end.y - start.y) * eased });
-        }
+    /** Put the nodes at their own layer's places now, ending a glide between layers. */
+    static #settle() {
+        if (Graph.#regrouping !== undefined) cancelAnimationFrame(Graph.#regrouping);
+        Graph.#regrouping = undefined;
+        Graph.#positions = Graph.#layoutOf(Graph.#layer);
+    }
 
-        positions = t < 1 ? shown : to;
-        place();
-        regrouping = t < 1 ? requestAnimationFrame(step) : undefined;
-    };
+    /**
+     * Move the nodes from where they are drawn to their places on the layer shown, so the eye can follow each device to where it is on this layer.
+     *
+     * @param {Map<string, Point>} from
+     */
+    static #glideNodes(from) {
+        Graph.#settle();
 
-    positions = shown;
-    step(began);
-}
+        const to = Graph.#layoutOf(Graph.#layer);
+        if (Dom.still.matches || from === to) return;
 
-/** @param {string} id */
-const nodeById = (id) => data?.nodes.find((node) => node.id === id);
+        /** @type {Map<string, Point>} */
+        const shown = new Map();
+        const began = performance.now();
 
-/**
- * @param {GraphNode} node
- * @returns {"error" | "warning" | undefined}
- */
-function markOf(node) {
-    if (!data || node.kind !== "device") return undefined;
+        /** @param {number} now */
+        const step = (now) => {
+            const t = Math.min((now - began) / 700, 1);
+            const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
 
-    const findings = data.findings.filter((finding) => finding.device === node.label);
-    if (findings.some((finding) => finding.level === "error")) return "error";
+            for (const [id, end] of to) {
+                const start = from.get(id) ?? end;
+                shown.set(id, { x: start.x + (end.x - start.x) * eased, y: start.y + (end.y - start.y) * eased });
+            }
 
-    const drift = data.drift[node.label]?.status;
-    if (findings.length || drift === "differs" || drift === "cannot plan") return "warning";
+            Graph.#positions = t < 1 ? shown : to;
+            Graph.#place();
+            Graph.#regrouping = t < 1 ? requestAnimationFrame(step) : undefined;
+        };
 
-    return undefined;
-}
+        Graph.#positions = shown;
+        step(began);
+    }
 
-/**
- * @param {GraphEdge} edge
- * @param {number} offset
- * @returns {{ d: string, label: Point }}
- */
-function curve(edge, offset) {
-    const a = positions.get(edge.from) ?? { x: 0, y: 0 };
-    const b = positions.get(edge.to) ?? { x: 0, y: 0 };
-    const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-
-    const length = Math.max(Math.hypot(b.x - a.x, b.y - a.y), 1);
-    const normal = { x: -(b.y - a.y) / length, y: (b.x - a.x) / length };
-    const control = { x: mid.x + normal.x * offset * 2, y: mid.y + normal.y * offset * 2 };
-
-    return {
-        d: `M${a.x},${a.y} Q${control.x},${control.y} ${b.x},${b.y}`,
-        label: { x: mid.x + normal.x * offset, y: mid.y + normal.y * offset },
-    };
-}
+    /** @param {string} id */
+    static #nodeById(id) {
+        return Graph.#data?.nodes.find((node) => node.id === id);
+    }
+
+    /**
+     * @param {GraphNode} node
+     * @returns {"error" | "warning" | undefined}
+     */
+    static #markOf(node) {
+        if (!Graph.#data || node.kind !== "device") return undefined;
 
-/** Move what is drawn to where the nodes are now, without drawing it again. */
-function place() {
-    viewport.setAttribute("transform", `translate(${view.x},${view.y}) scale(${view.k})`);
-    svg.classList.toggle("far", view.k < 0.4);
+        const findings = Graph.#data.findings.filter((finding) => finding.device === node.label);
+        if (findings.some((finding) => finding.level === "error")) return "error";
 
-    for (const [id, group] of nodeElements) {
-        const point = positions.get(id) ?? { x: 0, y: 0 };
-        group.setAttribute("transform", `translate(${point.x},${point.y})`);
-    }
+        const drift = Graph.#data.drift[node.label]?.status;
+        if (findings.length || drift === "differs" || drift === "cannot plan") return "warning";
 
-    for (const { edge, path, hit, label, offset } of edgeElements) {
-        const { d, label: middle } = curve(edge, offset);
-        path.setAttribute("d", d);
-        hit.setAttribute("d", d);
-        label.setAttribute("x", String(middle.x));
-        label.setAttribute("y", String(middle.y));
+        return undefined;
     }
-}
 
-/** Past this many edges between the same two nodes, they are drawn as one, which lists them all when selected. */
-const MOST_APART = 3;
-
-/** @type {Record<Layer, string>} */
-const MANY = { l1: "cables", l2: "cables", l3: "shared prefixes", bgp: "sessions", ospf: "adjacencies", tunnels: "tunnels" };
-
-/** @type {Record<Layer, string>} */
-const ONE = { l1: "cable", l2: "cable", l3: "shared prefix", bgp: "session", ospf: "adjacency", tunnels: "tunnel" };
-
-/**
- * The edges to draw: each on its own, or, past a few between the same two nodes, one for all of them.
- *
- * @param {DrawnEdge[]} edges
- * @returns {DrawnEdge[]}
- */
-function bundled(edges) {
-    /** @type {Map<string, DrawnEdge[]>} */
-    const byPair = new Map();
-    for (const edge of edges) {
-        const pair = `${[edge.from, edge.to].sort().join("|")}${edge.gone ? " gone" : ""}`;
-        byPair.set(pair, [...(byPair.get(pair) ?? []), edge]);
+    /**
+     * @param {GraphEdge} edge
+     * @param {number} offset
+     * @returns {{ d: string, label: Point }}
+     */
+    static #curve(edge, offset) {
+        const a = Graph.#positions.get(edge.from) ?? { x: 0, y: 0 };
+        const b = Graph.#positions.get(edge.to) ?? { x: 0, y: 0 };
+        const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+
+        const length = Math.max(Math.hypot(b.x - a.x, b.y - a.y), 1);
+        const normal = { x: -(b.y - a.y) / length, y: (b.x - a.x) / length };
+        const control = { x: mid.x + normal.x * offset * 2, y: mid.y + normal.y * offset * 2 };
+
+        return {
+            d: `M${a.x},${a.y} Q${control.x},${control.y} ${b.x},${b.y}`,
+            label: { x: mid.x + normal.x * offset, y: mid.y + normal.y * offset },
+        };
     }
 
-    return [...byPair.values()].flatMap((members) => {
-        const [first] = members;
-        if (!first || members.length <= MOST_APART) return members;
-
-        /** @type {Map<number, import("../../core/graph").CarriedVlan>} */
-        const vlans = new Map();
-        for (const member of members) for (const vlan of member.vlans ?? []) vlans.set(vlan.id, vlan);
-
-        return [
-            {
-                layer: first.layer,
-                from: first.from,
-                to: first.to,
-                label: `${members.length} ${MANY[first.layer]}`,
-                detail: members.flatMap((member) => [member.label, ...member.detail.map((line) => `  ${line}`)]),
-                ...(members.some((member) => member.oneSided) ? { oneSided: /** @type {const} */ (true) } : {}),
-                ...(vlans.size ? { vlans: [...vlans.values()].sort((a, b) => a.id - b.id) } : {}),
-                ...(first.gone ? { gone: /** @type {const} */ (true) } : {}),
-                members,
-            },
-        ];
-    });
-}
+    /** Move what is drawn to where the nodes are now, without drawing it again. */
+    static #place() {
+        Graph.#viewport.setAttribute("transform", `translate(${Graph.#view.x},${Graph.#view.y}) scale(${Graph.#view.k})`);
+        Graph.#svg.classList.toggle("far", Graph.#view.k < 0.4);
 
-/**
- * Dots that travel a cable both ends declare, so a link that works reads as one that carries traffic: one dot, or one each way while presenting. A cable only one end declares, or one a comparison shows is gone, carries none.
- *
- * @param {DrawnEdge} edge
- * @param {string} id the id of the cable's drawn path, which the dots follow as it moves
- */
-function signals(edge, id) {
-    if (still.matches || edge.oneSided || edge.gone) return [];
-
-    const a = positions.get(edge.from) ?? { x: 0, y: 0 };
-    const b = positions.get(edge.to) ?? { x: 0, y: 0 };
-    const seconds = Math.min(Math.max(Math.hypot(b.x - a.x, b.y - a.y) / (presenting ? 110 : 45), 1.6), 12);
-    const phase = hash(`${edge.from}${edge.to}${edge.label}`) * seconds;
-    const backwards = presenting ? [false, true] : [hash(edge.label) < 0.5];
-
-    return backwards.map((back, index) => {
-        const dot = s("circle", { class: "signal", r: 3.5 });
-        const motion = s("animateMotion", {
-            dur: `${seconds.toFixed(2)}s`,
-            begin: `-${(phase + (index * seconds) / 2).toFixed(2)}s`,
-            repeatCount: "indefinite",
-            ...(back ? { keyPoints: "1;0", keyTimes: "0;1", calcMode: "linear" } : {}),
-        });
+        for (const [id, group] of Graph.#nodeElements) {
+            const point = Graph.#positions.get(id) ?? { x: 0, y: 0 };
+            group.setAttribute("transform", `translate(${point.x},${point.y})`);
+        }
 
-        motion.append(s("mpath", { href: `#${id}` }));
-        dot.append(motion);
-        return dot;
-    });
-}
+        for (const { edge, path, hit, label, offset } of Graph.#edgeElements) {
+            const { d, label: middle } = Graph.#curve(edge, offset);
+            path.setAttribute("d", d);
+            hit.setAttribute("d", d);
+            label.setAttribute("x", String(middle.x));
+            label.setAttribute("y", String(middle.y));
+        }
+    }
 
-/** A confident arrival: fast at first, settling at the end. */
-const EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+    /** Past this many edges between the same two nodes, they are drawn as one, which lists them all when selected. */
+    static #MOST_APART = 3;
 
-/**
- * Draw the network in from its busiest device outward, a ring of neighbours at a time, each cable drawn from its nearer end.
- *
- * @param {Set<string>} fresh the nodes this drawing adds, which fade in; the others are already on screen
- */
-function arrive(fresh) {
-    if (still.matches || !edgeElements.length) return;
+    /** @type {Record<Layer, string>} */
+    static #MANY = { l1: "cables", l2: "cables", l3: "shared prefixes", bgp: "sessions", ospf: "adjacencies", tunnels: "tunnels" };
 
-    /** @param {string} id */
-    const degree = (id) => edgeElements.filter(({ edge }) => edge.from === id || edge.to === id).length;
-    const hub = [...nodeElements.keys()].sort((a, b) => degree(b) - degree(a))[0];
-
-    /** @type {Map<string, number>} */
-    const ring = new Map(hub ? [[hub, 0]] : []);
-    for (let queue = hub ? [hub] : []; queue.length;) {
-        const id = /** @type {string} */ (queue.shift());
-        for (const { edge } of edgeElements) {
-            const other = edge.from === id ? edge.to : edge.to === id ? edge.from : undefined;
-            if (other === undefined || ring.has(other)) continue;
-            ring.set(other, (ring.get(id) ?? 0) + 1);
-            queue.push(other);
+    /** @type {Record<Layer, string>} */
+    static #ONE = { l1: "cable", l2: "cable", l3: "shared prefix", bgp: "session", ospf: "adjacency", tunnels: "tunnel" };
+
+    /**
+     * The edges to draw: each on its own, or, past a few between the same two nodes, one for all of them.
+     *
+     * @param {DrawnEdge[]} edges
+     * @returns {DrawnEdge[]}
+     */
+    static #bundled(edges) {
+        /** @type {Map<string, DrawnEdge[]>} */
+        const byPair = new Map();
+        for (const edge of edges) {
+            const pair = `${[edge.from, edge.to].sort().join("|")}${edge.gone ? " gone" : ""}`;
+            byPair.set(pair, [...(byPair.get(pair) ?? []), edge]);
         }
-    }
 
-    // The whole drawing arrives within about a second, however many rings it has.
-    const farthest = Math.max(0, ...ring.values()) + 1;
-    const step = Math.min(110, 800 / farthest);
-    /** @param {string} id */
-    const ringOf = (id) => ring.get(id) ?? farthest;
+        return [...byPair.values()].flatMap((members) => {
+            const [first] = members;
+            if (!first || members.length <= Graph.#MOST_APART) return members;
+
+            /** @type {Map<number, import("../../core/topology").CarriedVlan>} */
+            const vlans = new Map();
+            for (const member of members) for (const vlan of member.vlans ?? []) vlans.set(vlan.id, vlan);
+
+            return [
+                {
+                    layer: first.layer,
+                    from: first.from,
+                    to: first.to,
+                    label: `${members.length} ${Graph.#MANY[first.layer]}`,
+                    detail: members.flatMap((member) => [member.label, ...member.detail.map((line) => `  ${line}`)]),
+                    ...(members.some((member) => member.oneSided) ? { oneSided: /** @type {const} */ (true) } : {}),
+                    ...(vlans.size ? { vlans: [...vlans.values()].sort((a, b) => a.id - b.id) } : {}),
+                    ...(first.gone ? { gone: /** @type {const} */ (true) } : {}),
+                    members,
+                },
+            ];
+        });
+    }
 
-    for (const [id, group] of nodeElements) {
-        if (!fresh.has(id)) continue;
-        group.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 360, delay: ringOf(id) * step, easing: EASE, fill: "backwards" });
+    /**
+     * Dots that travel a cable both ends declare, so a link that works reads as one that carries traffic: one dot, or one each way while presenting. A cable only one end declares, or one a comparison shows is gone, carries none.
+     *
+     * @param {DrawnEdge} edge
+     * @param {string} id the id of the cable's drawn path, which the dots follow as it moves
+     */
+    static #signals(edge, id) {
+        if (Dom.still.matches || edge.oneSided || edge.gone) return [];
+
+        const a = Graph.#positions.get(edge.from) ?? { x: 0, y: 0 };
+        const b = Graph.#positions.get(edge.to) ?? { x: 0, y: 0 };
+        const seconds = Math.min(Math.max(Math.hypot(b.x - a.x, b.y - a.y) / (Graph.#presenting ? 110 : 45), 1.6), 12);
+        const phase = Graph.#hash(`${edge.from}${edge.to}${edge.label}`) * seconds;
+        const backwards = Graph.#presenting ? [false, true] : [Graph.#hash(edge.label) < 0.5];
+
+        return backwards.map((back, index) => {
+            const dot = Dom.s("circle", { class: "signal", r: 3.5 });
+            const motion = Dom.s("animateMotion", {
+                dur: `${seconds.toFixed(2)}s`,
+                begin: `-${(phase + (index * seconds) / 2).toFixed(2)}s`,
+                repeatCount: "indefinite",
+                ...(back ? { keyPoints: "1;0", keyTimes: "0;1", calcMode: "linear" } : {}),
+            });
+
+            motion.append(Dom.s("mpath", { href: `#${id}` }));
+            dot.append(motion);
+            return dot;
+        });
     }
 
-    for (const { edge, group, path, label } of edgeElements) {
-        const forward = ringOf(edge.from) <= ringOf(edge.to);
-        const delay = (Math.min(ringOf(edge.from), ringOf(edge.to)) + 0.5) * step;
-
-        if (edge.oneSided || edge.gone) {
-            path.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 420, delay, easing: EASE, fill: "backwards" });
-        } else {
-            // Measured as one whole length, so the line draws in right even while its ends glide to a new layer's places.
-            path.setAttribute("pathLength", "1");
-            const start = { strokeDasharray: "1 1", strokeDashoffset: forward ? 1 : -1 };
-            const end = { strokeDasharray: "1 1", strokeDashoffset: 0 };
-            const drawing = path.animate([start, end], { duration: 560, delay, easing: EASE, fill: "backwards" });
-            drawing.addEventListener("finish", () => path.removeAttribute("pathLength"));
-            drawing.addEventListener("cancel", () => path.removeAttribute("pathLength"));
+    /** A confident arrival: fast at first, settling at the end. */
+    static #EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+
+    /**
+     * Draw the network in from its busiest device outward, a ring of neighbours at a time, each cable drawn from its nearer end.
+     *
+     * @param {Set<string>} fresh the nodes this drawing adds, which fade in; the others are already on screen
+     */
+    static #arrive(fresh) {
+        if (Dom.still.matches || !Graph.#edgeElements.length) return;
+
+        /** @param {string} id */
+        const degree = (id) => Graph.#edgeElements.filter(({ edge }) => edge.from === id || edge.to === id).length;
+        const hub = [...Graph.#nodeElements.keys()].sort((a, b) => degree(b) - degree(a))[0];
+
+        /** @type {Map<string, number>} */
+        const ring = new Map(hub ? [[hub, 0]] : []);
+        for (let queue = hub ? [hub] : []; queue.length;) {
+            const id = /** @type {string} */ (queue.shift());
+            for (const { edge } of Graph.#edgeElements) {
+                const other = edge.from === id ? edge.to : edge.to === id ? edge.from : undefined;
+                if (other === undefined || ring.has(other)) continue;
+                ring.set(other, (ring.get(id) ?? 0) + 1);
+                queue.push(other);
+            }
         }
 
-        for (const part of [label, ...group.querySelectorAll(".signal")]) {
-            part.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, delay: delay + 420, fill: "backwards" });
+        // The whole drawing arrives within about a second, however many rings it has.
+        const farthest = Math.max(0, ...ring.values()) + 1;
+        const step = Math.min(110, 800 / farthest);
+        /** @param {string} id */
+        const ringOf = (id) => ring.get(id) ?? farthest;
+
+        for (const [id, group] of Graph.#nodeElements) {
+            if (!fresh.has(id)) continue;
+            group.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: 360,
+                delay: ringOf(id) * step,
+                easing: Graph.#EASE,
+                fill: "backwards",
+            });
         }
-    }
-}
 
-/**
- * Draw the layer. `arrival` says what is new to the eye: the whole network the first time it is shown, its cables when the layer changes, and nothing when the config is read again.
- *
- * @param {"network" | "cables"} [arrival]
- */
-function draw(arrival) {
-    const before = new Set(nodeElements.keys());
-
-    edgeLayer.replaceChildren();
-    nodeLayer.replaceChildren();
-    nodeElements.clear();
-    edgeElements.length = 0;
-
-    const edges = bundled(visibleEdges());
-
-    // Edges between the same two nodes bend apart, so each stays readable.
-    /** @type {Map<string, number>} */
-    const between = new Map();
-    /** @param {DrawnEdge} edge */
-    const pairOf = (edge) => [edge.from, edge.to].sort().join("|");
-    for (const edge of edges) between.set(pairOf(edge), (between.get(pairOf(edge)) ?? 0) + 1);
-    /** @type {Map<string, number>} */
-    const seen = new Map();
-
-    for (const [number, edge] of edges.entries()) {
-        const pair = pairOf(edge);
-        const index = seen.get(pair) ?? 0;
-        seen.set(pair, index + 1);
-
-        // Bend in one direction whichever way round the edge was written.
-        const sign = edge.from < edge.to ? 1 : -1;
-        const offset = (index - ((between.get(pair) ?? 1) - 1) / 2) * 34 * sign;
-
-        const added = comparison && [edge, ...(edge.members ?? [])].some((one) => !one.gone && comparison?.added.has(changeKey(one)));
-        const change = edge.gone ? " gone" : added ? " added" : "";
-        const group = s("g", { class: `edge${edge.oneSided ? " one-sided" : ""}${change}` });
-        const hit = s("path", { class: "hit" });
-        const path = s("path", { id: `cable-${number}` });
-        const label = s("text", { "text-anchor": "middle", "dominant-baseline": "central" });
-        label.textContent = edge.label;
-
-        group.append(path, hit, ...signals(edge, `cable-${number}`), label);
-
-        // Selected on press: the canvas captures the pointer for panning, so no click would reach the edge.
-        group.addEventListener("pointerdown", (event) => {
-            event.stopPropagation();
-            select({ edge });
-        });
+        for (const { edge, group, path, label } of Graph.#edgeElements) {
+            const forward = ringOf(edge.from) <= ringOf(edge.to);
+            const delay = (Math.min(ringOf(edge.from), ringOf(edge.to)) + 0.5) * step;
+
+            if (edge.oneSided || edge.gone) {
+                path.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 420, delay, easing: Graph.#EASE, fill: "backwards" });
+            } else {
+                // Measured as one whole length, so the line draws in right even while its ends glide to a new layer's places.
+                path.setAttribute("pathLength", "1");
+                const start = { strokeDasharray: "1 1", strokeDashoffset: forward ? 1 : -1 };
+                const end = { strokeDasharray: "1 1", strokeDashoffset: 0 };
+                const drawing = path.animate([start, end], { duration: 560, delay, easing: Graph.#EASE, fill: "backwards" });
+                drawing.addEventListener("finish", () => path.removeAttribute("pathLength"));
+                drawing.addEventListener("cancel", () => path.removeAttribute("pathLength"));
+            }
 
-        edgeLayer.append(group);
-        edgeElements.push({ edge, group, path, hit, label, offset });
+            for (const part of [label, ...group.querySelectorAll(".signal")]) {
+                part.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, delay: delay + 420, fill: "backwards" });
+            }
+        }
     }
 
-    for (const node of visibleNodes()) {
-        const group = s("g", { class: `node ${node.kind} ${markOf(node) ?? ""}`, tabindex: 0 });
-        const rect = s("rect", { rx: node.kind === "segment" ? 14 : 8 });
-        group.append(rect);
-
-        const device = node.kind === "device";
-        const lines = device ? [node.label, node.detail[0] ?? ""] : [node.label];
-        const texts = lines.map((line, index) => {
-            const y = device ? (index === 0 ? -9 : 13) : 0;
-            const text = s("text", { class: index === 0 ? "name" : "sub", y });
-            text.textContent = line;
-            group.append(text);
-            return text;
-        });
+    /**
+     * Draw the layer. `arrival` says what is new to the eye: the whole network the first time it is shown, its cables when the layer changes, and nothing when the config is read again.
+     *
+     * @param {"network" | "cables"} [arrival]
+     */
+    static #draw(arrival) {
+        const before = new Set(Graph.#nodeElements.keys());
+
+        Graph.#edgeLayer.replaceChildren();
+        Graph.#nodeLayer.replaceChildren();
+        Graph.#nodeElements.clear();
+        Graph.#edgeElements.length = 0;
+
+        const edges = Graph.#bundled(Graph.#visibleEdges());
+
+        // Edges between the same two nodes bend apart, so each stays readable.
+        /** @type {Map<string, number>} */
+        const between = new Map();
+        /** @param {DrawnEdge} edge */
+        const pairOf = (edge) => [edge.from, edge.to].sort().join("|");
+        for (const edge of edges) between.set(pairOf(edge), (between.get(pairOf(edge)) ?? 0) + 1);
+        /** @type {Map<string, number>} */
+        const seen = new Map();
+
+        for (const [number, edge] of edges.entries()) {
+            const pair = pairOf(edge);
+            const index = seen.get(pair) ?? 0;
+            seen.set(pair, index + 1);
+
+            // Bend in one direction whichever way round the edge was written.
+            const sign = edge.from < edge.to ? 1 : -1;
+            const offset = (index - ((between.get(pair) ?? 1) - 1) / 2) * 34 * sign;
+
+            const added =
+                Graph.#comparison &&
+                [edge, ...(edge.members ?? [])].some((one) => !one.gone && Graph.#comparison?.added.has(Evaluate.changeKey(one)));
+            const change = edge.gone ? " gone" : added ? " added" : "";
+            const group = Dom.s("g", { class: `edge${edge.oneSided ? " one-sided" : ""}${change}` });
+            const hit = Dom.s("path", { class: "hit" });
+            const path = Dom.s("path", { id: `cable-${number}` });
+            const label = Dom.s("text", { "text-anchor": "middle", "dominant-baseline": "central" });
+            label.textContent = edge.label;
+
+            group.append(path, hit, ...Graph.#signals(edge, `cable-${number}`), label);
+
+            // Selected on press: the canvas captures the pointer for panning, so no click would reach the edge.
+            group.addEventListener("pointerdown", (event) => {
+                event.stopPropagation();
+                Graph.#select({ edge });
+            });
+
+            Graph.#edgeLayer.append(group);
+            Graph.#edgeElements.push({ edge, group, path, hit, label, offset });
+        }
 
-        nodeLayer.append(group);
-
-        // Each box fits its text, so it is measured once drawn. A device's text starts after its chassis mark.
-        const mark = device ? 46 : 0;
-        const width = Math.max(...texts.map((text) => text.getComputedTextLength()), device ? 110 : 0) + 32 + mark;
-        const height = device ? 62 : 34;
-        rect.setAttribute("x", String(-width / 2));
-        rect.setAttribute("y", String(-height / 2));
-        rect.setAttribute("width", String(width));
-        rect.setAttribute("height", String(height));
-
-        // The mark of the device presenting lights now: a ring around its frame, shown only then.
-        const beacon = s("g", { class: "beacon", "aria-hidden": "true" });
-        beacon.append(s("rect", { x: -width / 2 - 10, y: -height / 2 - 10, width: width + 20, height: height + 20, rx: 16 }));
-        group.insertBefore(beacon, rect);
-
-        if (device) {
-            for (const text of texts) text.setAttribute("x", String(-width / 2 + 16 + mark));
-
-            // A small front panel: a chassis with two rows of ports, drawn rather than pictured.
-            const left = -width / 2 + 16;
-            const chassis = s("g", { class: "chassis", "aria-hidden": "true" });
-            chassis.append(s("rect", { x: left, y: -15, width: 34, height: 30, rx: 4 }));
-            for (const row of [0, 1]) {
-                for (const column of [0, 1, 2]) {
-                    chassis.append(s("rect", { class: "socket", x: left + 6 + column * 8, y: -8 + row * 9, width: 6, height: 6, rx: 1 }));
+        for (const node of Graph.#visibleNodes()) {
+            const group = Dom.s("g", { class: `node ${node.kind} ${Graph.#markOf(node) ?? ""}`, tabindex: 0 });
+            const rect = Dom.s("rect", { rx: node.kind === "segment" ? 14 : 8 });
+            group.append(rect);
+
+            const device = node.kind === "device";
+            const lines = device ? [node.label, node.detail[0] ?? ""] : [node.label];
+            const texts = lines.map((line, index) => {
+                const y = device ? (index === 0 ? -9 : 13) : 0;
+                const text = Dom.s("text", { class: index === 0 ? "name" : "sub", y });
+                text.textContent = line;
+                group.append(text);
+                return text;
+            });
+
+            Graph.#nodeLayer.append(group);
+
+            // Each box fits its text, so it is measured once drawn. A device's text starts after its chassis mark.
+            const mark = device ? 46 : 0;
+            const width = Math.max(...texts.map((text) => text.getComputedTextLength()), device ? 110 : 0) + 32 + mark;
+            const height = device ? 62 : 34;
+            rect.setAttribute("x", String(-width / 2));
+            rect.setAttribute("y", String(-height / 2));
+            rect.setAttribute("width", String(width));
+            rect.setAttribute("height", String(height));
+
+            // The mark of the device presenting lights now: a ring around its frame, shown only then.
+            const beacon = Dom.s("g", { class: "beacon", "aria-hidden": "true" });
+            beacon.append(Dom.s("rect", { x: -width / 2 - 10, y: -height / 2 - 10, width: width + 20, height: height + 20, rx: 16 }));
+            group.insertBefore(beacon, rect);
+
+            if (device) {
+                for (const text of texts) text.setAttribute("x", String(-width / 2 + 16 + mark));
+
+                // A small front panel: a chassis with two rows of ports, drawn rather than pictured.
+                const left = -width / 2 + 16;
+                const chassis = Dom.s("g", { class: "chassis", "aria-hidden": "true" });
+                chassis.append(Dom.s("rect", { x: left, y: -15, width: 34, height: 30, rx: 4 }));
+                for (const row of [0, 1]) {
+                    for (const column of [0, 1, 2]) {
+                        chassis.append(
+                            Dom.s("rect", { class: "socket", x: left + 6 + column * 8, y: -8 + row * 9, width: 6, height: 6, rx: 1 })
+                        );
+                    }
                 }
+                group.insertBefore(chassis, texts[0] ?? null);
             }
-            group.insertBefore(chassis, texts[0] ?? null);
+
+            group.addEventListener("pointerdown", (event) => Graph.#startDrag(event, node.id));
+            group.addEventListener("pointerenter", () => {
+                Graph.#hovered = node.id;
+                Graph.#emphasize();
+            });
+            group.addEventListener("pointerleave", () => {
+                Graph.#hovered = undefined;
+                Graph.#emphasize();
+            });
+            group.addEventListener("keydown", (event) => event.key === "Enter" && Graph.#select({ node: node.id }));
+
+            Graph.#nodeElements.set(node.id, group);
         }
 
-        group.addEventListener("pointerdown", (event) => startDrag(event, node.id));
-        group.addEventListener("pointerenter", () => {
-            hovered = node.id;
-            emphasize();
-        });
-        group.addEventListener("pointerleave", () => {
-            hovered = undefined;
-            emphasize();
-        });
-        group.addEventListener("keydown", (event) => event.key === "Enter" && select({ node: node.id }));
+        Graph.#place();
+        Graph.#emphasize();
 
-        nodeElements.set(node.id, group);
+        if (arrival) Graph.#arrive(new Set([...Graph.#nodeElements.keys()].filter((id) => arrival === "network" || !before.has(id))));
     }
 
-    place();
-    emphasize();
-
-    if (arrival) arrive(new Set([...nodeElements.keys()].filter((id) => arrival === "network" || !before.has(id))));
-}
-
-/** Light up what the pointer is on, the device lit while presenting, or what is selected, and dim the rest. */
-function emphasize() {
-    const focus = hovered ?? touring ?? (selection && "node" in selection ? selection.node : undefined);
-    const selectedEdge = selection && "edge" in selection ? selection.edge : undefined;
+    /** Light up what the pointer is on, the device lit while presenting, or what is selected, and dim the rest. */
+    static #emphasize() {
+        const focus =
+            Graph.#hovered ?? Graph.#touring ?? (Graph.#selection && "node" in Graph.#selection ? Graph.#selection.node : undefined);
+        const selectedEdge = Graph.#selection && "edge" in Graph.#selection ? Graph.#selection.edge : undefined;
+
+        /** @param {GraphEdge} edge */
+        const touching = (edge) => edge.from === focus || edge.to === focus;
+        /** @param {GraphEdge} edge */
+        const carries = (edge) => edge.vlans?.some((vlan) => vlan.id === Graph.#vlanFocus) ?? false;
+
+        /** @type {Set<GraphEdge> | undefined} */
+        let litEdges;
+        if (focus) litEdges = new Set(Graph.#edgeElements.filter(({ edge }) => touching(edge)).map(({ edge }) => edge));
+        else if (Graph.#pathFocus)
+            litEdges = new Set(
+                Graph.#edgeElements
+                    .filter(({ edge }) => [edge, ...(edge.members ?? [])].some((one) => Graph.#pathFocus?.has(Graph.#edgeKey(one))))
+                    .map(({ edge }) => edge)
+            );
+        else if (Graph.#vlanFocus !== undefined && Graph.#layer === "l2")
+            litEdges = new Set(Graph.#edgeElements.filter(({ edge }) => carries(edge)).map(({ edge }) => edge));
+        else if (selectedEdge) litEdges = new Set([selectedEdge]);
+
+        const litNodes = litEdges ? new Set([...litEdges].flatMap((edge) => [edge.from, edge.to])) : undefined;
+        if (focus) litNodes?.add(focus);
+
+        for (const { edge, group } of Graph.#edgeElements) {
+            group.classList.toggle("lit", Boolean(litEdges?.has(edge)) && !selectedEdge);
+            group.classList.toggle("selected", edge === selectedEdge);
+            group.classList.toggle("dim", litEdges !== undefined && !litEdges.has(edge));
+        }
 
-    /** @param {GraphEdge} edge */
-    const touching = (edge) => edge.from === focus || edge.to === focus;
-    /** @param {GraphEdge} edge */
-    const carries = (edge) => edge.vlans?.some((vlan) => vlan.id === vlanFocus) ?? false;
-
-    /** @type {Set<GraphEdge> | undefined} */
-    let litEdges;
-    if (focus) litEdges = new Set(edgeElements.filter(({ edge }) => touching(edge)).map(({ edge }) => edge));
-    else if (pathFocus)
-        litEdges = new Set(
-            edgeElements
-                .filter(({ edge }) => [edge, ...(edge.members ?? [])].some((one) => pathFocus?.has(edgeKey(one))))
-                .map(({ edge }) => edge)
-        );
-    else if (vlanFocus !== undefined && layer === "l2")
-        litEdges = new Set(edgeElements.filter(({ edge }) => carries(edge)).map(({ edge }) => edge));
-    else if (selectedEdge) litEdges = new Set([selectedEdge]);
+        for (const [id, group] of Graph.#nodeElements) {
+            group.classList.toggle("selected", Boolean(Graph.#selection && "node" in Graph.#selection && Graph.#selection.node === id));
+            group.classList.toggle("touring", Graph.#presenting && id === Graph.#touring && !Graph.#hovered);
+            group.classList.toggle("dim", litNodes !== undefined && !litNodes.has(id));
+        }
+    }
 
-    const litNodes = litEdges ? new Set([...litEdges].flatMap((edge) => [edge.from, edge.to])) : undefined;
-    if (focus) litNodes?.add(focus);
+    // Panning, zooming and dragging.
+    /** @type {{ id?: string, start: Point, origin: Point, moved: boolean } | undefined} */
+    static #drag;
 
-    for (const { edge, group } of edgeElements) {
-        group.classList.toggle("lit", Boolean(litEdges?.has(edge)) && !selectedEdge);
-        group.classList.toggle("selected", edge === selectedEdge);
-        group.classList.toggle("dim", litEdges !== undefined && !litEdges.has(edge));
+    /**
+     * @param {{ clientX: number, clientY: number }} event
+     * @returns {Point}
+     */
+    static #toWorld(event) {
+        const box = Graph.#svg.getBoundingClientRect();
+        return {
+            x: (event.clientX - box.left - Graph.#view.x) / Graph.#view.k,
+            y: (event.clientY - box.top - Graph.#view.y) / Graph.#view.k,
+        };
     }
 
-    for (const [id, group] of nodeElements) {
-        group.classList.toggle("selected", Boolean(selection && "node" in selection && selection.node === id));
-        group.classList.toggle("touring", presenting && id === touring && !hovered);
-        group.classList.toggle("dim", litNodes !== undefined && !litNodes.has(id));
-    }
-}
+    /**
+     * @param {PointerEvent} event
+     * @param {string} [id]
+     */
+    static #startDrag(event, id) {
+        if (event.button !== 0) return;
+        if (Graph.#gliding !== undefined) cancelAnimationFrame(Graph.#gliding);
+        Graph.#gliding = undefined;
+
+        // A press ends a glide between layers, so a device is moved from its own place on this layer.
+        if (Graph.#regrouping !== undefined) {
+            Graph.#settle();
+            Graph.#place();
+        }
+        event.stopPropagation();
 
-// Panning, zooming and dragging.
-/** @type {{ id?: string, start: Point, origin: Point, moved: boolean } | undefined} */
-let drag;
-
-/**
- * @param {{ clientX: number, clientY: number }} event
- * @returns {Point}
- */
-const toWorld = (event) => {
-    const box = svg.getBoundingClientRect();
-    return { x: (event.clientX - box.left - view.x) / view.k, y: (event.clientY - box.top - view.y) / view.k };
-};
-
-/**
- * @param {PointerEvent} event
- * @param {string} [id]
- */
-function startDrag(event, id) {
-    if (event.button !== 0) return;
-    if (gliding !== undefined) cancelAnimationFrame(gliding);
-    gliding = undefined;
-
-    // A press ends a glide between layers, so a device is moved from its own place on this layer.
-    if (regrouping !== undefined) {
-        settle();
-        place();
+        Graph.#svg.setPointerCapture(event.pointerId);
+        const point = id ? Graph.#positions.get(id) : undefined;
+        const origin = point ? { ...point } : { x: Graph.#view.x, y: Graph.#view.y };
+        Graph.#drag = { id, start: { x: event.clientX, y: event.clientY }, origin, moved: false };
+        if (!id) Graph.#svg.classList.add("panning");
     }
-    event.stopPropagation();
 
-    svg.setPointerCapture(event.pointerId);
-    const point = id ? positions.get(id) : undefined;
-    const origin = point ? { ...point } : { x: view.x, y: view.y };
-    drag = { id, start: { x: event.clientX, y: event.clientY }, origin, moved: false };
-    if (!id) svg.classList.add("panning");
-}
+    /** The scale below which a device's name is too small to read: a first view stops there, and the reader pans for the rest. */
+    static #READABLE = 0.6;
 
-svg.addEventListener("pointerdown", (event) => startDrag(event));
+    /** The view moving to a new place, which a press or a scroll stops. @type {number | undefined} */
+    static #gliding;
+
+    /**
+     * Move the view to a new place over a second, zooming evenly and keeping the eye on the point between them. At once when the reader asked for less motion.
+     *
+     * @param {View} target
+     */
+    static #glideTo(target) {
+        if (Graph.#gliding !== undefined) cancelAnimationFrame(Graph.#gliding);
+        Graph.#gliding = undefined;
+
+        if (Dom.still.matches) {
+            Graph.#view = target;
+            Graph.#place();
+            return;
+        }
 
-svg.addEventListener("pointermove", (event) => {
-    if (!drag) return;
+        const box = Graph.#svg.getBoundingClientRect();
+        const from = { ...Graph.#view };
+        /** @param {View} one */
+        const centreOf = (one) => ({ x: (box.width / 2 - one.x) / one.k, y: (box.height / 2 - one.y) / one.k });
+        const start = centreOf(from);
+        const end = centreOf(target);
+        const began = performance.now();
+
+        /** @param {number} now */
+        const step = (now) => {
+            const t = Math.min((now - began) / 1100, 1);
+            const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+            const k = from.k * (target.k / from.k) ** eased;
+            const centre = { x: start.x + (end.x - start.x) * eased, y: start.y + (end.y - start.y) * eased };
+
+            Graph.#view = { k, x: box.width / 2 - centre.x * k, y: box.height / 2 - centre.y * k };
+            Graph.#place();
+            Graph.#gliding = t < 1 ? requestAnimationFrame(step) : undefined;
+        };
+
+        Graph.#gliding = requestAnimationFrame(step);
+    }
 
-    const dx = event.clientX - drag.start.x;
-    const dy = event.clientY - drag.start.y;
-    if (Math.hypot(dx, dy) > 3) drag.moved = true;
-    if (!drag.moved) return;
+    /**
+     * Show the whole drawing, or, when that would make it unreadable and `readable` is asked, as much of it as stays readable. `glide` moves there instead of jumping.
+     *
+     * @param {boolean} [readable]
+     * @param {boolean} [glide]
+     */
+    static #fit(readable = false, glide = false) {
+        const target = Graph.#framing(Graph.#visibleNodes(), readable);
+        if (!target) return;
 
-    if (drag.id) positions.set(drag.id, { x: drag.origin.x + dx / view.k, y: drag.origin.y + dy / view.k });
-    else view = { ...view, x: drag.origin.x + dx, y: drag.origin.y + dy };
+        if (glide) return Graph.#glideTo(target);
+        Graph.#view = target;
+        Graph.#place();
+    }
 
-    place();
-});
+    /**
+     * The view that frames these nodes.
+     *
+     * @param {GraphNode[]} nodes
+     * @param {boolean} readable
+     * @returns {View | undefined}
+     */
+    static #framing(nodes, readable) {
+        // Framed where the nodes are going, not where a glide between layers has them now.
+        const places = Graph.#layoutOf(Graph.#layer);
+        const points = nodes.flatMap((node) => {
+            const point = places.get(node.id);
+            return point ? [point] : [];
+        });
+        if (!points.length) return undefined;
+
+        const box = Graph.#svg.getBoundingClientRect();
+        const xs = points.map((point) => point.x);
+        const ys = points.map((point) => point.y);
+        const width = Math.max(...xs) - Math.min(...xs) + 190;
+        const height = Math.max(...ys) - Math.min(...ys) + 130;
+        const whole = Math.min(Math.max(Math.min(box.width / width, box.height / height), 0.15), 1.8);
+        const k = readable ? Math.max(whole, Graph.#READABLE) : whole;
+
+        // When the whole drawing does not fit readably, the view starts on the device with the most lines, the heart of the network.
+        const edges = Graph.#visibleEdges();
+        const degree = (/** @type {string} */ id) => edges.filter((edge) => edge.from === id || edge.to === id).length;
+        const hub = [...nodes].sort((a, b) => degree(b.id) - degree(a.id))[0];
+        const centre =
+            k > whole && hub && places.has(hub.id)
+                ? /** @type {Point} */ (places.get(hub.id))
+                : { x: (Math.max(...xs) + Math.min(...xs)) / 2, y: (Math.max(...ys) + Math.min(...ys)) / 2 };
+
+        // Presenting leaves room for the slow drift and the caption, so nothing framed is cut at the screen's edge.
+        const shown = Graph.#presenting ? k * 0.86 : k;
+
+        return { k: shown, x: box.width / 2 - centre.x * shown, y: box.height / 2 - centre.y * shown };
+    }
 
-svg.addEventListener("pointerup", () => {
-    if (!drag) return;
+    /** While presenting, frame what is shown: the lit device with everything it has a line to, or the whole layer. */
+    static #frameTour(glide = true) {
+        const lit = Graph.#touring;
+        if (!lit) return Graph.#fit(false, glide);
+
+        const near = new Set([
+            lit,
+            ...Graph.#visibleEdges().flatMap((edge) => (edge.from === lit ? [edge.to] : edge.to === lit ? [edge.from] : [])),
+        ]);
+        const target = Graph.#framing(
+            Graph.#visibleNodes().filter((node) => near.has(node.id)),
+            false
+        );
+        if (!target) return;
 
-    const ended = drag;
-    drag = undefined;
-    svg.classList.remove("panning");
+        if (glide) return Graph.#glideTo(target);
+        Graph.#view = target;
+        Graph.#place();
+    }
 
-    if (ended.moved && ended.id) savePositions();
-    if (ended.moved) return;
+    // Presenting.
+
+    /** Say what is shown while presenting: the device lit, or the whole layer. */
+    static #showCaption() {
+        Graph.#caption.hidden = !Graph.#presenting;
+        if (!Graph.#presenting) return;
+
+        const node = Graph.#touring ? Graph.#nodeById(Graph.#touring) : undefined;
+        const edges = Graph.#visibleEdges().filter((edge) => !node || edge.from === node.id || edge.to === node.id);
+        const count = `${edges.length} ${edges.length === 1 ? Graph.#ONE[Graph.#layer] : Graph.#MANY[Graph.#layer]}`;
+
+        if (node)
+            Graph.#caption.replaceChildren(
+                Dom.h("strong", {}, node.label),
+                Dom.h("span", {}, [node.detail[0], count].filter(Boolean).join(", "))
+            );
+        else
+            Graph.#caption.replaceChildren(
+                Dom.h("strong", {}, Graph.LAYER_NAMES[Graph.#layer]),
+                Dom.h("span", {}, `${Graph.#visibleNodes().filter((one) => one.kind === "device").length} devices, ${count}`)
+            );
+
+        Dom.enter(Graph.#caption);
+    }
 
-    // A press without a move is a click: on a node it selects the node, and on an empty spot it clears the selection.
-    select(ended.id ? { node: ended.id } : undefined);
-});
+    /** How many devices are lit on each layer while presenting, busiest first, before it moves on to the next layer. */
+    static #LIT_PER_LAYER = 4;
 
-svg.addEventListener(
-    "wheel",
-    (event) => {
-        event.preventDefault();
-        if (gliding !== undefined) cancelAnimationFrame(gliding);
-        gliding = undefined;
+    /** How far presenting has gone on this layer: 0 while the whole layer is shown, then each lit device in turn. */
+    static #tourStep = 0;
 
-        const point = toWorld(event);
-        const k = Math.min(Math.max(view.k * Math.exp(-event.deltaY * 0.0015), 0.15), 4);
-        const box = svg.getBoundingClientRect();
+    /** The move to the next layer, waiting while the view zooms out to the whole of this one. @type {ReturnType<typeof setTimeout> | undefined} */
+    static #leaving;
 
-        view = { k, x: event.clientX - box.left - point.x * k, y: event.clientY - box.top - point.y * k };
-        place();
-    },
-    { passive: false }
-);
+    /** The next layer that has lines to show, after this one; this one when no other has any. */
+    static #nextLayer() {
+        const after = [
+            ...Graph.LAYERS.slice(Graph.LAYERS.indexOf(Graph.#layer) + 1),
+            ...Graph.LAYERS.slice(0, Graph.LAYERS.indexOf(Graph.#layer) + 1),
+        ];
+        return after.find((name) => Graph.#data?.edges.some((edge) => edge.layer === name)) ?? Graph.#layer;
+    }
 
-/** The scale below which a device's name is too small to read: a first view stops there, and the reader pans for the rest. */
-const READABLE = 0.6;
+    /** While presenting: show the whole layer, light its busiest devices one at a time, then move on to the next layer. */
+    static #tourNext() {
+        if (Graph.#graphView.hidden || document.hidden || Graph.#hovered || Graph.#drag || Graph.#leaving) return;
+
+        const edges = Graph.#visibleEdges();
+        const degree = (/** @type {string} */ id) => edges.filter((edge) => edge.from === id || edge.to === id).length;
+        const devices = Graph.#visibleNodes()
+            .filter((node) => node.kind === "device" && degree(node.id))
+            .sort((a, b) => degree(b.id) - degree(a.id) || a.label.localeCompare(b.label))
+            .slice(0, Graph.#LIT_PER_LAYER);
+
+        Graph.#tourStep += 1;
+        Graph.#touring = devices[Graph.#tourStep - 1]?.id;
+
+        if (Graph.#touring || Graph.#nextLayer() === Graph.#layer) {
+            if (!Graph.#touring) Graph.#tourStep = 0;
+            Graph.#emphasize();
+            Graph.#showCaption();
+            Graph.#frameTour();
+            return;
+        }
 
-/** The view moving to a new place, which a press or a scroll stops. @type {number | undefined} */
-let gliding;
+        // Every lit device has had its turn: the view zooms out to the whole layer first, so the next layer is reached from the whole drawing.
+        Graph.#tourStep = 0;
+        Graph.#emphasize();
+        Graph.#showCaption();
+        Graph.#frameTour();
 
-/**
- * Move the view to a new place over a second, zooming evenly and keeping the eye on the point between them. At once when the reader asked for less motion.
- *
- * @param {typeof view} target
- */
-function glideTo(target) {
-    if (gliding !== undefined) cancelAnimationFrame(gliding);
-    gliding = undefined;
+        const next = Graph.#nextLayer();
+        Graph.#leaving = setTimeout(() => {
+            Graph.#leaving = undefined;
 
-    if (still.matches) {
-        view = target;
-        place();
-        return;
+            // Moving on replaces the address rather than adding to the history, so Back still leaves Studio's last place.
+            if (Graph.#presenting && !Graph.#graphView.hidden) location.replace(`#graph/${next}`);
+        }, 2600);
     }
 
-    const box = svg.getBoundingClientRect();
-    const from = { ...view };
-    /** @param {typeof view} one */
-    const centreOf = (one) => ({ x: (box.width / 2 - one.x) / one.k, y: (box.height / 2 - one.y) / one.k });
-    const start = centreOf(from);
-    const end = centreOf(target);
-    const began = performance.now();
-
-    /** @param {number} now */
-    const step = (now) => {
-        const t = Math.min((now - began) / 1100, 1);
-        const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
-        const k = from.k * (target.k / from.k) ** eased;
-        const centre = { x: start.x + (end.x - start.x) * eased, y: start.y + (end.y - start.y) * eased };
-
-        view = { k, x: box.width / 2 - centre.x * k, y: box.height / 2 - centre.y * k };
-        place();
-        gliding = t < 1 ? requestAnimationFrame(step) : undefined;
-    };
+    /** Start the turns over, so the layer shown now has its full time. */
+    static #restartTour() {
+        clearInterval(Graph.#tour);
+        clearTimeout(Graph.#leaving);
+        Graph.#leaving = undefined;
+        if (Graph.#presenting) Graph.#tour = setInterval(Graph.#tourNext, 6000);
+    }
 
-    gliding = requestAnimationFrame(step);
-}
+    /** @param {boolean} on */
+    static #setPresenting(on) {
+        Graph.#presenting = on;
+        Dom.store.set("present", on);
 
-/**
- * Show the whole drawing, or, when that would make it unreadable and `readable` is asked, as much of it as stays readable. `glide` moves there instead of jumping.
- *
- * @param {boolean} [readable]
- * @param {boolean} [glide]
- */
-function fit(readable = false, glide = false) {
-    const target = framing(visibleNodes(), readable);
-    if (!target) return;
-
-    if (glide) return glideTo(target);
-    view = target;
-    place();
-}
+        document.body.classList.toggle("presenting", on);
+        Graph.#presentButton.setAttribute("aria-pressed", String(on));
 
-/**
- * The view that frames these nodes.
- *
- * @param {GraphNode[]} nodes
- * @param {boolean} readable
- * @returns {typeof view | undefined}
- */
-function framing(nodes, readable) {
-    // Framed where the nodes are going, not where a glide between layers has them now.
-    const places = layoutOf(layer);
-    const points = nodes.flatMap((node) => {
-        const point = places.get(node.id);
-        return point ? [point] : [];
-    });
-    if (!points.length) return undefined;
-
-    const box = svg.getBoundingClientRect();
-    const xs = points.map((point) => point.x);
-    const ys = points.map((point) => point.y);
-    const width = Math.max(...xs) - Math.min(...xs) + 190;
-    const height = Math.max(...ys) - Math.min(...ys) + 130;
-    const whole = Math.min(Math.max(Math.min(box.width / width, box.height / height), 0.15), 1.8);
-    const k = readable ? Math.max(whole, READABLE) : whole;
-
-    // When the whole drawing does not fit readably, the view starts on the device with the most lines, the heart of the network.
-    const edges = visibleEdges();
-    const degree = (/** @type {string} */ id) => edges.filter((edge) => edge.from === id || edge.to === id).length;
-    const hub = [...nodes].sort((a, b) => degree(b.id) - degree(a.id))[0];
-    const centre =
-        k > whole && hub && places.has(hub.id)
-            ? /** @type {Point} */ (places.get(hub.id))
-            : { x: (Math.max(...xs) + Math.min(...xs)) / 2, y: (Math.max(...ys) + Math.min(...ys)) / 2 };
-
-    // Presenting leaves room for the slow drift and the caption, so nothing framed is cut at the screen's edge.
-    const shown = presenting ? k * 0.86 : k;
-
-    return { k: shown, x: box.width / 2 - centre.x * shown, y: box.height / 2 - centre.y * shown };
-}
+        Graph.#touring = undefined;
+        if (on) Graph.#selection = undefined;
+        Graph.#restartTour();
 
-/** While presenting, frame what is shown: the lit device with everything it has a line to, or the whole layer. */
-function frameTour(glide = true) {
-    const lit = touring;
-    if (!lit) return fit(false, glide);
+        if (Graph.#graphView.hidden || !Graph.#data) return;
 
-    const near = new Set([lit, ...visibleEdges().flatMap((edge) => (edge.from === lit ? [edge.to] : edge.to === lit ? [edge.from] : []))]);
-    const target = framing(
-        visibleNodes().filter((node) => near.has(node.id)),
-        false
-    );
-    if (!target) return;
-
-    if (glide) return glideTo(target);
-    view = target;
-    place();
-}
+        // The panel hides or returns, so the drawing is fitted once the page has its new size.
+        Graph.#draw();
+        Graph.#showPanel();
+        Graph.#showCaption();
+        requestAnimationFrame(() => (Graph.#presenting ? Graph.#frameTour(false) : Graph.#fit()));
+    }
 
-byId("fit").addEventListener("click", () => fit());
+    // The side panel.
+    /** @param {Selection} next */
+    static #select(next) {
+        /** @param {Selection} one */
+        const keyOf = (one) => (one && "node" in one ? one.node : one ? Graph.#edgeKey(one.edge) : "");
+        const changed = keyOf(next) !== keyOf(Graph.#selection);
 
-byId("lay-out").addEventListener("click", () => {
-    if (!data) return;
-    layOut(layer, true);
-    settle();
-    draw();
-    fit();
-});
+        Graph.#selection = next;
+        Graph.#pathFocus = undefined;
+        Graph.#emphasize();
+        Graph.#showPanel();
 
-// Presenting keeps the whole network in view as the screen changes size.
-window.addEventListener("resize", () => (presenting ? frameTour(false) : place()));
+        if (changed) Dom.enter(Graph.#panel);
+    }
 
-// Presenting.
+    /**
+     * @param {Annotated["findings"]} findings
+     * @param {boolean} withDevice
+     */
+    static #findingList(findings, withDevice) {
+        return Dom.h(
+            "ul",
+            {},
+            ...findings.map((finding) =>
+                Dom.h(
+                    "li",
+                    {},
+                    Dom.h("span", { class: `badge ${finding.level}` }, finding.level),
+                    withDevice && finding.device
+                        ? Dom.link(finding.device, () => Graph.#select({ node: `device:${finding.device}` }))
+                        : undefined,
+                    withDevice && finding.device ? ": " : undefined,
+                    finding.message
+                )
+            )
+        );
+    }
 
-/** Say what is shown while presenting: the device lit, or the whole layer. */
-function showCaption() {
-    caption.hidden = !presenting;
-    if (!presenting) return;
+    /** @param {CarriedVlan[]} vlans */
+    static #vlanChips(vlans) {
+        const chips = Dom.h("div", { class: "chips" });
+
+        for (const vlan of vlans) {
+            const button = Dom.h("button", { "aria-pressed": String(vlan.id === Graph.#vlanFocus) }, `${vlan.name} ${vlan.id}`);
+            button.addEventListener("click", () => {
+                Graph.#vlanFocus = Graph.#vlanFocus === vlan.id ? undefined : vlan.id;
+                Graph.#selection = undefined;
+                Graph.#emphasize();
+                Graph.#showPanel();
+            });
+            chips.append(button);
+        }
 
-    const node = touring ? nodeById(touring) : undefined;
-    const edges = visibleEdges().filter((edge) => !node || edge.from === node.id || edge.to === node.id);
-    const count = `${edges.length} ${edges.length === 1 ? ONE[layer] : MANY[layer]}`;
+        return chips;
+    }
 
-    if (node) caption.replaceChildren(h("strong", {}, node.label), h("span", {}, [node.detail[0], count].filter(Boolean).join(", ")));
-    else
-        caption.replaceChildren(
-            h("strong", {}, LAYER_NAMES[layer]),
-            h("span", {}, `${visibleNodes().filter((one) => one.kind === "device").length} devices, ${count}`)
+    static #legend() {
+        /**
+         * @param {boolean} dashed
+         * @param {string} color
+         */
+        const sample = (dashed, color) => {
+            const icon = Dom.s("svg", { width: 34, height: 10 });
+            icon.append(
+                Dom.s("line", { x1: 2, y1: 5, x2: 32, y2: 5, stroke: color, "stroke-width": 2, "stroke-dasharray": dashed ? "6 4" : "" })
+            );
+            return icon;
+        };
+
+        /** @param {string} style */
+        const box = (style) => {
+            const icon = Dom.s("svg", { width: 34, height: 16 });
+            icon.append(Dom.s("rect", { x: 2, y: 2, width: 30, height: 12, rx: 3, fill: "none", "stroke-width": 2, style }));
+            return icon;
+        };
+
+        return Dom.h(
+            "ul",
+            { class: "legend" },
+            Dom.h("li", {}, sample(false, "var(--edge)"), "both ends declare it"),
+            Dom.h("li", {}, sample(true, "var(--warning)"), "only one end declares it"),
+            Dom.h("li", {}, box("stroke: var(--error)"), "a device with an error"),
+            Dom.h("li", {}, box("stroke: var(--warning)"), "a warning, or unlike its snapshot"),
+            Dom.h("li", {}, box("stroke: var(--line); stroke-dasharray: 5 3"), "outside the network")
         );
+    }
 
-    enter(caption);
-}
-
-/** How many devices are lit on each layer while presenting, busiest first, before it moves on to the next layer. */
-const LIT_PER_LAYER = 4;
+    static #showPanel() {
+        Graph.#panel.replaceChildren();
+        if (!Graph.#data) return;
 
-/** How far presenting has gone on this layer: 0 while the whole layer is shown, then each lit device in turn. */
-let tourStep = 0;
+        if (Graph.#selection && "node" in Graph.#selection) {
+            const node = Graph.#nodeById(Graph.#selection.node);
+            if (node) return Graph.#showNode(node);
+        }
 
-/** The move to the next layer, waiting while the view zooms out to the whole of this one. @type {ReturnType<typeof setTimeout> | undefined} */
-let leaving;
+        if (Graph.#selection && "edge" in Graph.#selection) return Graph.#showEdge(Graph.#selection.edge);
 
-/** The next layer that has lines to show, after this one; this one when no other has any. */
-function nextLayer() {
-    const after = [...LAYERS.slice(LAYERS.indexOf(layer) + 1), ...LAYERS.slice(0, LAYERS.indexOf(layer) + 1)];
-    return after.find((name) => data?.edges.some((edge) => edge.layer === name)) ?? layer;
-}
+        const drift = Graph.#data.drift;
+        const devices = Graph.#data.nodes.filter((node) => node.kind === "device");
+        const drifted = devices.filter((node) => drift[node.label]?.status === "differs");
+        const unsnapped = devices.filter((node) => drift[node.label]?.status === "no snapshot");
 
-/** While presenting: show the whole layer, light its busiest devices one at a time, then move on to the next layer. */
-function tourNext() {
-    if (graphView.hidden || document.hidden || hovered || drag || leaving) return;
-
-    const edges = visibleEdges();
-    const degree = (/** @type {string} */ id) => edges.filter((edge) => edge.from === id || edge.to === id).length;
-    const devices = visibleNodes()
-        .filter((node) => node.kind === "device" && degree(node.id))
-        .sort((a, b) => degree(b.id) - degree(a.id) || a.label.localeCompare(b.label))
-        .slice(0, LIT_PER_LAYER);
-
-    tourStep += 1;
-    touring = devices[tourStep - 1]?.id;
-
-    if (touring || nextLayer() === layer) {
-        if (!touring) tourStep = 0;
-        emphasize();
-        showCaption();
-        frameTour();
-        return;
-    }
+        Graph.#panel.append(
+            Dom.h("h2", {}, Graph.LAYER_NAMES[Graph.#layer]),
+            Dom.h("p", { class: "muted" }, Graph.#LAYER_HELP[Graph.#layer])
+        );
 
-    // Every lit device has had its turn: the view zooms out to the whole layer first, so the next layer is reached from the whole drawing.
-    tourStep = 0;
-    emphasize();
-    showCaption();
-    frameTour();
+        if (Graph.#comparison) {
+            Graph.#panel.append(
+                Dom.h("h3", {}, "Compared with ", Graph.#comparison.name),
+                Dom.h(
+                    "p",
+                    {},
+                    Dom.h("span", { class: "added" }, "Green lines"),
+                    " are new, ",
+                    Dom.h("span", { class: "removed" }, "red dashed lines"),
+                    " are gone. ",
+                    Dom.link("Stop comparing", () => {
+                        Graph.#comparison = undefined;
+                        Graph.#draw();
+                        Graph.#showPanel();
+                    })
+                )
+            );
+        }
 
-    const next = nextLayer();
-    leaving = setTimeout(() => {
-        leaving = undefined;
+        if (Graph.#layer === "l2") {
+            /** @type {Map<number, CarriedVlan>} */
+            const vlans = new Map();
+            for (const edge of Graph.#visibleEdges()) for (const vlan of edge.vlans ?? []) vlans.set(vlan.id, vlan);
 
-        // Moving on replaces the address rather than adding to the history, so Back still leaves Studio's last place.
-        if (presenting && !graphView.hidden) location.replace(`#graph/${next}`);
-    }, 2600);
-}
+            const sorted = [...vlans.values()].sort((a, b) => a.id - b.id);
+            if (sorted.length) Graph.#panel.append(Dom.h("h3", {}, "VLANs"), Graph.#vlanChips(sorted));
+        }
 
-/** Start the turns over, so the layer shown now has its full time. */
-function restartTour() {
-    clearInterval(tour);
-    clearTimeout(leaving);
-    leaving = undefined;
-    if (presenting) tour = setInterval(tourNext, 6000);
-}
+        if (Graph.#data.findings.length)
+            Graph.#panel.append(
+                Dom.h("h3", {}, "Found by ", Dom.h("code", {}, "circuit validate")),
+                Graph.#findingList(Graph.#data.findings, true)
+            );
+
+        if (drifted.length) {
+            Graph.#panel.append(
+                Dom.h("h3", {}, "Unlike their last snapshot"),
+                Dom.h(
+                    "ul",
+                    {},
+                    ...drifted.map((node) =>
+                        Dom.h(
+                            "li",
+                            {},
+                            Dom.link(node.label, () => Graph.#select({ node: node.id }))
+                        )
+                    )
+                )
+            );
+        }
 
-/** @param {boolean} on */
-function setPresenting(on) {
-    presenting = on;
-    store.set("present", on);
+        if (unsnapped.length) {
+            Graph.#panel.append(
+                Dom.h("h3", {}, "No snapshot yet"),
+                Dom.h("p", { class: "muted" }, unsnapped.map((node) => node.label).join(", "))
+            );
+        }
 
-    document.body.classList.toggle("presenting", on);
-    presentButton.setAttribute("aria-pressed", String(on));
+        Graph.#panel.append(Dom.h("h3", {}, "Legend"), Graph.#legend());
+    }
 
-    touring = undefined;
-    if (on) selection = undefined;
-    restartTour();
+    /** @param {GraphNode} node */
+    static #showNode(node) {
+        const kinds = { device: "device", segment: "shared segment", outside: "outside the network" };
+        Graph.#panel.append(Dom.h("h2", {}, node.label), Dom.h("div", { class: "kind" }, kinds[node.kind]));
+
+        if (node.kind === "device")
+            Graph.#panel.append(
+                Dom.h(
+                    "p",
+                    {},
+                    Dom.link("Everything it holds", () => Dom.go(`devices/${encodeURIComponent(node.label)}`))
+                )
+            );
+        if (node.detail.length) Graph.#panel.append(Dom.h("h3", {}, "Details"), Dom.h("pre", {}, node.detail.join("\n")));
+
+        if (node.kind === "device" && Graph.#data) {
+            const findings = Graph.#data.findings.filter((finding) => finding.device === node.label);
+            if (findings.length)
+                Graph.#panel.append(
+                    Dom.h("h3", {}, "Found by ", Dom.h("code", {}, "circuit validate")),
+                    Graph.#findingList(findings, false)
+                );
 
-    if (graphView.hidden || !data) return;
+            const drift = Graph.#data.drift[node.label];
+            if (drift) {
+                const notes = {
+                    matches: ["Matches its last snapshot."],
+                    differs: ["Differs from its last snapshot. This is what ", Dom.h("code", {}, "circuit diff"), " would send:"],
+                    "no snapshot": ["No snapshot yet: run ", Dom.h("code", {}, "circuit snapshot"), "."],
+                    "cannot plan": ["Could not be planned against its snapshot:"],
+                };
+
+                Graph.#panel.append(Dom.h("h3", {}, "Against its snapshot"), Dom.h("p", {}, ...notes[drift.status]));
+                if (drift.lines.length) Graph.#panel.append(Dom.h("pre", {}, drift.lines.join("\n")));
+            }
+        }
 
-    // The panel hides or returns, so the drawing is fitted once the page has its new size.
-    draw();
-    showPanel();
-    showCaption();
-    requestAnimationFrame(() => (presenting ? frameTour(false) : fit()));
-}
+        const edges = Graph.#visibleEdges().filter((edge) => edge.from === node.id || edge.to === node.id);
 
-presentButton.addEventListener("click", () => setPresenting(!presenting));
-setPresenting(presenting);
-
-// A hidden page's dots stop moving.
-document.addEventListener("visibilitychange", () => {
-    if (!(svg instanceof SVGSVGElement)) return;
-    if (document.hidden) svg.pauseAnimations();
-    else svg.unpauseAnimations();
-});
-
-// Saving the layer shown, as it looks.
-byId("save-svg").addEventListener("click", () => {
-    if (!(viewport instanceof SVGGraphicsElement)) return;
-    save(`circuit-${layer}.svg`, new Blob([svgOf(svg, viewport).text], { type: "image/svg+xml" }));
-});
-
-byId("save-png").addEventListener("click", async () => {
-    if (!(viewport instanceof SVGGraphicsElement)) return;
-    save(`circuit-${layer}.png`, await pngOf(svgOf(svg, viewport)));
-});
-
-// The side panel.
-/** @param {Selection} next */
-function select(next) {
-    /** @param {Selection} one */
-    const keyOf = (one) => (one && "node" in one ? one.node : one ? edgeKey(one.edge) : "");
-    const changed = keyOf(next) !== keyOf(selection);
-
-    selection = next;
-    pathFocus = undefined;
-    emphasize();
-    showPanel();
-
-    if (changed) enter(panel);
-}
+        Graph.#panel.append(Dom.h("h3", {}, `${Graph.LAYER_NAMES[Graph.#layer]} here`));
+        if (!edges.length) Graph.#panel.append(Dom.h("p", { class: "muted" }, "None on this layer."));
 
-/**
- * @param {Annotated["findings"]} findings
- * @param {boolean} withDevice
- */
-function findingList(findings, withDevice) {
-    return h(
-        "ul",
-        {},
-        ...findings.map((finding) =>
-            h(
-                "li",
+        Graph.#panel.append(
+            Dom.h(
+                "ul",
                 {},
-                h("span", { class: `badge ${finding.level}` }, finding.level),
-                withDevice && finding.device ? link(finding.device, () => select({ node: `device:${finding.device}` })) : undefined,
-                withDevice && finding.device ? ": " : undefined,
-                finding.message
+                ...edges.map((edge) => {
+                    const other = Graph.#nodeById(edge.from === node.id ? edge.to : edge.from);
+                    return Dom.h(
+                        "li",
+                        {},
+                        Dom.link(edge.label, () => Graph.#select({ edge })),
+                        Dom.h("span", { class: "muted" }, ` with ${other?.label ?? "?"}`)
+                    );
+                })
             )
-        )
-    );
-}
-
-/** @param {CarriedVlan[]} vlans */
-function vlanChips(vlans) {
-    const chips = h("div", { class: "chips" });
-
-    for (const vlan of vlans) {
-        const button = h("button", { "aria-pressed": String(vlan.id === vlanFocus) }, `${vlan.name} ${vlan.id}`);
-        button.addEventListener("click", () => {
-            vlanFocus = vlanFocus === vlan.id ? undefined : vlan.id;
-            selection = undefined;
-            emphasize();
-            showPanel();
-        });
-        chips.append(button);
+        );
     }
 
-    return chips;
-}
+    /** @param {GraphEdge} edge */
+    static #showEdge(edge) {
+        const from = Graph.#nodeById(edge.from);
+        const to = Graph.#nodeById(edge.to);
+
+        Graph.#panel.append(
+            Dom.h("h2", {}, edge.label),
+            Dom.h(
+                "div",
+                { class: "kind" },
+                `${Graph.LAYER_NAMES[edge.layer]}, between `,
+                Dom.link(from?.label ?? edge.from, () => Graph.#select({ node: edge.from })),
+                " and ",
+                Dom.link(to?.label ?? edge.to, () => Graph.#select({ node: edge.to }))
+            )
+        );
 
-function legend() {
-    /**
-     * @param {boolean} dashed
-     * @param {string} color
-     */
-    const sample = (dashed, color) => {
-        const icon = s("svg", { width: 34, height: 10 });
-        icon.append(s("line", { x1: 2, y1: 5, x2: 32, y2: 5, stroke: color, "stroke-width": 2, "stroke-dasharray": dashed ? "6 4" : "" }));
-        return icon;
-    };
+        if (edge.oneSided)
+            Graph.#panel.append(Dom.h("p", {}, Dom.h("span", { class: "badge warning" }, "one end"), "Only one end declares it."));
+        if (edge.detail.length) Graph.#panel.append(Dom.h("h3", {}, "Details"), Dom.h("pre", {}, edge.detail.join("\n")));
+        if (edge.vlans?.length) Graph.#panel.append(Dom.h("h3", {}, "VLANs"), Graph.#vlanChips(edge.vlans));
+    }
 
-    /** @param {string} style */
-    const box = (style) => {
-        const icon = s("svg", { width: 34, height: 16 });
-        icon.append(s("rect", { x: 2, y: 2, width: 30, height: 12, rx: 3, fill: "none", "stroke-width": 2, style }));
-        return icon;
-    };
+    static #showLayerButtons() {
+        Graph.#layersNav.replaceChildren();
+
+        for (const [index, name] of Graph.LAYERS.entries()) {
+            const count = Graph.#data?.edges.filter((edge) => edge.layer === name).length ?? 0;
+            const button = Dom.h(
+                "button",
+                { "aria-pressed": String(name === Graph.#layer), title: `${Graph.#LAYER_HELP[name]} Key ${index + 1}.` },
+                Graph.LAYER_NAMES[name],
+                Dom.h("span", { class: "count" }, String(count))
+            );
+            button.addEventListener("click", () => Dom.go(`graph/${name}`));
+            Graph.#layersNav.append(button);
+        }
+    }
 
-    return h(
-        "ul",
-        { class: "legend" },
-        h("li", {}, sample(false, "var(--edge)"), "both ends declare it"),
-        h("li", {}, sample(true, "var(--warning)"), "only one end declares it"),
-        h("li", {}, box("stroke: var(--error)"), "a device with an error"),
-        h("li", {}, box("stroke: var(--warning)"), "a warning, or unlike its snapshot"),
-        h("li", {}, box("stroke: var(--line); stroke-dasharray: 5 3"), "outside the network")
-    );
-}
+    /** The layer shown last, or the first. */
+    static currentLayer() {
+        return Graph.#layer;
+    }
 
-function showPanel() {
-    panel.replaceChildren();
-    if (!data) return;
+    /**
+     * Take a new graph, when the config changed. Nodes keep their places, and a selection whose node or edge is gone is dropped.
+     *
+     * @param {Annotated} next
+     */
+    static set(next) {
+        Graph.#data = next;
+
+        if (Graph.#selection && "node" in Graph.#selection && !Graph.#nodeById(Graph.#selection.node)) Graph.#selection = undefined;
+        if (Graph.#selection && "edge" in Graph.#selection) {
+            const { layer: was, from, to, label } = Graph.#selection.edge;
+            const same = Graph.#data.edges.find(
+                (edge) => edge.layer === was && edge.from === from && edge.to === to && edge.label === label
+            );
+            Graph.#selection = same ? { edge: same } : undefined;
+        }
 
-    if (selection && "node" in selection) {
-        const node = nodeById(selection.node);
-        if (node) return showNode(node);
+        Graph.#layOut(Graph.#layer, false);
     }
 
-    if (selection && "edge" in selection) return showEdge(selection.edge);
+    /**
+     * Draw a layer, now that the graph is visible: its labels are measured as they are drawn.
+     *
+     * @param {Layer} next
+     */
+    static show(next) {
+        if (next !== Graph.#layer) {
+            if (Graph.#selection && "edge" in Graph.#selection) Graph.#selection = undefined;
+            Graph.#vlanFocus = undefined;
+            Graph.#pathFocus = undefined;
+            Graph.#touring = undefined;
+            Graph.#tourStep = 0;
+            Graph.#restartTour();
+        }
 
-    const drift = data.drift;
-    const devices = data.nodes.filter((node) => node.kind === "device");
-    const drifted = devices.filter((node) => drift[node.label]?.status === "differs");
-    const unsnapped = devices.filter((node) => drift[node.label]?.status === "no snapshot");
+        if (Graph.#pendingVlan !== undefined) {
+            Graph.#vlanFocus = Graph.#pendingVlan;
+            Graph.#pendingVlan = undefined;
+        }
 
-    panel.append(h("h2", {}, LAYER_NAMES[layer]), h("p", { class: "muted" }, LAYER_HELP[layer]));
+        if (Graph.#pendingPath) {
+            Graph.#pathFocus = new Set(Graph.#pendingPath.map(Graph.#edgeKey));
+            Graph.#pendingPath = undefined;
+        }
 
-    if (comparison) {
-        panel.append(
-            h("h3", {}, "Compared with ", comparison.name),
-            h(
-                "p",
-                {},
-                h("span", { class: "added" }, "Green lines"),
-                " are new, ",
-                h("span", { class: "removed" }, "red dashed lines"),
-                " are gone. ",
-                link("Stop comparing", () => {
-                    comparison = undefined;
-                    draw();
-                    showPanel();
-                })
-            )
-        );
+        // The first view draws the whole network in; a new layer draws in its own lines while its devices glide to their places on it.
+        const arrival = !Graph.#drawn && Graph.#data ? "network" : next !== Graph.#layer ? "cables" : undefined;
+        const from = Graph.#positions;
+        if (Graph.#drawn) Graph.#views.set(Graph.#layer, { ...Graph.#view });
+
+        Graph.#layer = next;
+        Dom.store.set("layer", Graph.#layer);
+        Graph.#layOut(Graph.#layer, false);
+
+        if (arrival === "cables") Graph.#glideNodes(from);
+        else Graph.#settle();
+
+        Graph.#showLayerButtons();
+        Graph.#draw(arrival);
+        Graph.#showPanel();
+        Graph.#showCaption();
+
+        // Presenting shows the whole layer as it comes in; a first view on a laptop starts where names can be read. A layer shown before
+        // comes back as the reader left it, and one shown for the first time glides into view.
+        if (Graph.#presenting && arrival) Graph.#fit();
+        else if (!Graph.#drawn && Graph.#data) Graph.#fit(true);
+        else if (arrival === "cables") {
+            const left = Graph.#views.get(Graph.#layer);
+            if (left) Graph.#glideTo(left);
+            else Graph.#fit(true, true);
+        }
+        Graph.#drawn = Graph.#data !== undefined;
     }
 
-    if (layer === "l2") {
-        /** @type {Map<number, CarriedVlan>} */
-        const vlans = new Map();
-        for (const edge of visibleEdges()) for (const vlan of edge.vlans ?? []) vlans.set(vlan.id, vlan);
-
-        const sorted = [...vlans.values()].sort((a, b) => a.id - b.id);
-        if (sorted.length) panel.append(h("h3", {}, "VLANs"), vlanChips(sorted));
+    /**
+     * Select a device, for when the graph is shown next.
+     *
+     * @param {string} name
+     */
+    static selectDevice(name) {
+        Graph.#selection = { node: `device:${name}` };
     }
 
-    if (data.findings.length) panel.append(h("h3", {}, "Found by ", h("code", {}, "circuit validate")), findingList(data.findings, true));
+    /**
+     * Show a comparison with another commit on the graph: new edges lit, edges gone drawn dashed.
+     *
+     * @param {{ name: string, added: GraphEdge[], removed: GraphEdge[] }} next
+     */
+    static setComparison(next) {
+        Graph.#comparison = { name: next.name, added: new Set(next.added.map(Evaluate.changeKey)), removed: next.removed };
+        Graph.#selection = undefined;
+    }
 
-    if (drifted.length) {
-        panel.append(
-            h("h3", {}, "Unlike their last snapshot"),
-            h(
-                "ul",
-                {},
-                ...drifted.map((node) =>
-                    h(
-                        "li",
-                        {},
-                        link(node.label, () => select({ node: node.id }))
-                    )
-                )
-            )
-        );
+    /**
+     * Light up these cables as one path, for when their layer is shown next.
+     *
+     * @param {GraphEdge[]} path
+     */
+    static lightPath(path) {
+        Graph.#pendingPath = path;
+        Graph.#selection = undefined;
     }
 
-    if (unsnapped.length) {
-        panel.append(h("h3", {}, "No snapshot yet"), h("p", { class: "muted" }, unsnapped.map((node) => node.label).join(", ")));
+    /**
+     * Light up every cable carrying a VLAN, for when the VLAN layer is shown next.
+     *
+     * @param {number} id
+     */
+    static lightVlan(id) {
+        Graph.#pendingVlan = id;
+        Graph.#selection = undefined;
     }
 
-    panel.append(h("h3", {}, "Legend"), legend());
-}
+    static {
+        Graph.#svg.addEventListener("pointerdown", (event) => Graph.#startDrag(event));
 
-/** @param {GraphNode} node */
-function showNode(node) {
-    const kinds = { device: "device", segment: "shared segment", outside: "outside the network" };
-    panel.append(h("h2", {}, node.label), h("div", { class: "kind" }, kinds[node.kind]));
+        Graph.#svg.addEventListener("pointermove", (event) => {
+            if (!Graph.#drag) return;
 
-    if (node.kind === "device")
-        panel.append(
-            h(
-                "p",
-                {},
-                link("Everything it holds", () => go(`devices/${encodeURIComponent(node.label)}`))
-            )
-        );
-    if (node.detail.length) panel.append(h("h3", {}, "Details"), h("pre", {}, node.detail.join("\n")));
-
-    if (node.kind === "device" && data) {
-        const findings = data.findings.filter((finding) => finding.device === node.label);
-        if (findings.length) panel.append(h("h3", {}, "Found by ", h("code", {}, "circuit validate")), findingList(findings, false));
-
-        const drift = data.drift[node.label];
-        if (drift) {
-            const notes = {
-                matches: ["Matches its last snapshot."],
-                differs: ["Differs from its last snapshot. This is what ", h("code", {}, "circuit diff"), " would send:"],
-                "no snapshot": ["No snapshot yet: run ", h("code", {}, "circuit snapshot"), "."],
-                "cannot plan": ["Could not be planned against its snapshot:"],
-            };
-
-            panel.append(h("h3", {}, "Against its snapshot"), h("p", {}, ...notes[drift.status]));
-            if (drift.lines.length) panel.append(h("pre", {}, drift.lines.join("\n")));
-        }
-    }
+            const dx = event.clientX - Graph.#drag.start.x;
+            const dy = event.clientY - Graph.#drag.start.y;
+            if (Math.hypot(dx, dy) > 3) Graph.#drag.moved = true;
+            if (!Graph.#drag.moved) return;
 
-    const edges = visibleEdges().filter((edge) => edge.from === node.id || edge.to === node.id);
+            if (Graph.#drag.id)
+                Graph.#positions.set(Graph.#drag.id, {
+                    x: Graph.#drag.origin.x + dx / Graph.#view.k,
+                    y: Graph.#drag.origin.y + dy / Graph.#view.k,
+                });
+            else Graph.#view = { ...Graph.#view, x: Graph.#drag.origin.x + dx, y: Graph.#drag.origin.y + dy };
 
-    panel.append(h("h3", {}, `${LAYER_NAMES[layer]} here`));
-    if (!edges.length) panel.append(h("p", { class: "muted" }, "None on this layer."));
+            Graph.#place();
+        });
 
-    panel.append(
-        h(
-            "ul",
-            {},
-            ...edges.map((edge) => {
-                const other = nodeById(edge.from === node.id ? edge.to : edge.from);
-                return h(
-                    "li",
-                    {},
-                    link(edge.label, () => select({ edge })),
-                    h("span", { class: "muted" }, ` with ${other?.label ?? "?"}`)
-                );
-            })
-        )
-    );
-}
+        Graph.#svg.addEventListener("pointerup", () => {
+            if (!Graph.#drag) return;
 
-/** @param {GraphEdge} edge */
-function showEdge(edge) {
-    const from = nodeById(edge.from);
-    const to = nodeById(edge.to);
-
-    panel.append(
-        h("h2", {}, edge.label),
-        h(
-            "div",
-            { class: "kind" },
-            `${LAYER_NAMES[edge.layer]}, between `,
-            link(from?.label ?? edge.from, () => select({ node: edge.from })),
-            " and ",
-            link(to?.label ?? edge.to, () => select({ node: edge.to }))
-        )
-    );
+            const ended = Graph.#drag;
+            Graph.#drag = undefined;
+            Graph.#svg.classList.remove("panning");
 
-    if (edge.oneSided) panel.append(h("p", {}, h("span", { class: "badge warning" }, "one end"), "Only one end declares it."));
-    if (edge.detail.length) panel.append(h("h3", {}, "Details"), h("pre", {}, edge.detail.join("\n")));
-    if (edge.vlans?.length) panel.append(h("h3", {}, "VLANs"), vlanChips(edge.vlans));
-}
+            if (ended.moved && ended.id) Graph.#savePositions();
+            if (ended.moved) return;
 
-function showLayerButtons() {
-    layersNav.replaceChildren();
+            // A press without a move is a click: on a node it selects the node, and on an empty spot it clears the selection.
+            Graph.#select(ended.id ? { node: ended.id } : undefined);
+        });
 
-    for (const [index, name] of LAYERS.entries()) {
-        const count = data?.edges.filter((edge) => edge.layer === name).length ?? 0;
-        const button = h(
-            "button",
-            { "aria-pressed": String(name === layer), title: `${LAYER_HELP[name]} Key ${index + 1}.` },
-            LAYER_NAMES[name],
-            h("span", { class: "count" }, String(count))
-        );
-        button.addEventListener("click", () => go(`graph/${name}`));
-        layersNav.append(button);
-    }
-}
+        Graph.#svg.addEventListener(
+            "wheel",
+            (event) => {
+                event.preventDefault();
+                if (Graph.#gliding !== undefined) cancelAnimationFrame(Graph.#gliding);
+                Graph.#gliding = undefined;
 
-document.addEventListener("keydown", (event) => {
-    if (event.target instanceof HTMLInputElement || graphView.hidden) return;
+                const point = Graph.#toWorld(event);
+                const k = Math.min(Math.max(Graph.#view.k * Math.exp(-event.deltaY * 0.0015), 0.15), 4);
+                const box = Graph.#svg.getBoundingClientRect();
 
-    if (event.key === "Escape") {
-        if (presenting) setPresenting(false);
-        select(undefined);
-    }
+                Graph.#view = { k, x: event.clientX - box.left - point.x * k, y: event.clientY - box.top - point.y * k };
+                Graph.#place();
+            },
+            { passive: false }
+        );
 
-    if (event.key === "p" && !event.ctrlKey && !event.metaKey && !event.altKey) setPresenting(!presenting);
-
-    // Keys 1 to 6 pick a layer.
-    const chosen = LAYERS[Number(event.key) - 1];
-    if (chosen) go(`graph/${chosen}`);
-});
-
-/** The layer shown last, or the first. */
-export const currentLayer = () => layer;
-
-/**
- * Take a new graph, when the config changed. Nodes keep their places, and a selection whose node or edge is gone is dropped.
- *
- * @param {Annotated} next
- */
-export function setGraph(next) {
-    data = next;
-
-    if (selection && "node" in selection && !nodeById(selection.node)) selection = undefined;
-    if (selection && "edge" in selection) {
-        const { layer: was, from, to, label } = selection.edge;
-        const same = data.edges.find((edge) => edge.layer === was && edge.from === from && edge.to === to && edge.label === label);
-        selection = same ? { edge: same } : undefined;
-    }
+        Dom.byId("fit").addEventListener("click", () => Graph.#fit());
 
-    layOut(layer, false);
-}
+        Dom.byId("lay-out").addEventListener("click", () => {
+            if (!Graph.#data) return;
+            Graph.#layOut(Graph.#layer, true);
+            Graph.#settle();
+            Graph.#draw();
+            Graph.#fit();
+        });
 
-/**
- * Draw a layer, now that the graph is visible: its labels are measured as they are drawn.
- *
- * @param {Layer} next
- */
-export function showLayer(next) {
-    if (next !== layer) {
-        if (selection && "edge" in selection) selection = undefined;
-        vlanFocus = undefined;
-        pathFocus = undefined;
-        touring = undefined;
-        tourStep = 0;
-        restartTour();
-    }
+        // Presenting keeps the whole network in view as the screen changes size.
+        window.addEventListener("resize", () => (Graph.#presenting ? Graph.#frameTour(false) : Graph.#place()));
 
-    if (pendingVlan !== undefined) {
-        vlanFocus = pendingVlan;
-        pendingVlan = undefined;
-    }
+        Graph.#presentButton.addEventListener("click", () => Graph.#setPresenting(!Graph.#presenting));
+        Graph.#setPresenting(Graph.#presenting);
 
-    if (pendingPath) {
-        pathFocus = new Set(pendingPath.map(edgeKey));
-        pendingPath = undefined;
-    }
+        // A hidden page's dots stop moving.
+        document.addEventListener("visibilitychange", () => {
+            if (!(Graph.#svg instanceof SVGSVGElement)) return;
+            if (document.hidden) Graph.#svg.pauseAnimations();
+            else Graph.#svg.unpauseAnimations();
+        });
 
-    // The first view draws the whole network in; a new layer draws in its own lines while its devices glide to their places on it.
-    const arrival = !drawn && data ? "network" : next !== layer ? "cables" : undefined;
-    const from = positions;
-    if (drawn) views.set(layer, { ...view });
-
-    layer = next;
-    store.set("layer", layer);
-    layOut(layer, false);
-
-    if (arrival === "cables") glideNodes(from);
-    else settle();
-
-    showLayerButtons();
-    draw(arrival);
-    showPanel();
-    showCaption();
-
-    // Presenting shows the whole layer as it comes in; a first view on a laptop starts where names can be read. A layer shown before
-    // comes back as the reader left it, and one shown for the first time glides into view.
-    if (presenting && arrival) fit();
-    else if (!drawn && data) fit(true);
-    else if (arrival === "cables") {
-        const left = views.get(layer);
-        if (left) glideTo(left);
-        else fit(true, true);
-    }
-    drawn = data !== undefined;
-}
+        // Saving the layer shown, as it looks.
+        Dom.byId("save-svg").addEventListener("click", () => {
+            if (!(Graph.#viewport instanceof SVGGraphicsElement)) return;
+            Export.save(`circuit-${Graph.#layer}.svg`, new Blob([Export.svg(Graph.#svg, Graph.#viewport).text], { type: "image/svg+xml" }));
+        });
 
-/**
- * Select a device, for when the graph is shown next.
- *
- * @param {string} name
- */
-export function selectDevice(name) {
-    selection = { node: `device:${name}` };
-}
+        Dom.byId("save-png").addEventListener("click", async () => {
+            if (!(Graph.#viewport instanceof SVGGraphicsElement)) return;
+            Export.save(`circuit-${Graph.#layer}.png`, await Export.png(Export.svg(Graph.#svg, Graph.#viewport)));
+        });
 
-/**
- * Show a comparison with another commit on the graph: new edges lit, edges gone drawn dashed.
- *
- * @param {{ name: string, added: GraphEdge[], removed: GraphEdge[] }} next
- */
-export function setComparison(next) {
-    comparison = { name: next.name, added: new Set(next.added.map(changeKey)), removed: next.removed };
-    selection = undefined;
-}
+        document.addEventListener("keydown", (event) => {
+            if (event.target instanceof HTMLInputElement || Graph.#graphView.hidden) return;
 
-/**
- * Light up these cables as one path, for when their layer is shown next.
- *
- * @param {GraphEdge[]} path
- */
-export function lightPath(path) {
-    pendingPath = path;
-    selection = undefined;
-}
+            if (event.key === "Escape") {
+                if (Graph.#presenting) Graph.#setPresenting(false);
+                Graph.#select(undefined);
+            }
+
+            if (event.key === "p" && !event.ctrlKey && !event.metaKey && !event.altKey) Graph.#setPresenting(!Graph.#presenting);
 
-/**
- * Light up every cable carrying a VLAN, for when the VLAN layer is shown next.
- *
- * @param {number} id
- */
-export function lightVlan(id) {
-    pendingVlan = id;
-    selection = undefined;
+            // Keys 1 to 6 pick a layer.
+            const chosen = Graph.LAYERS[Number(event.key) - 1];
+            if (chosen) Dom.go(`graph/${chosen}`);
+        });
+    }
 }