querysub 0.518.0 → 0.520.0

package/src/library-components/LatencyGraph.tsx

@@ -0,0 +1,1450 @@
+import { qreact } from "../4-dom/qreact";
+import { Button } from "./Button";
+import { URLParam } from "./URLParam";
+import { InputLabelURL } from "./InputLabel";
+import { css } from "typesafecss";
+import { sort } from "socket-function/src/misc";
+import { formatTime } from "socket-function/src/formatting/format";
+
+export type LatencyGraphLabelLine = { text: string; color?: string; };
+export type LatencyGraphNode = { id: string; label?: string; latitude?: number; longitude?: number; labelLines?: LatencyGraphLabelLine[]; weight?: number; };
+export type LatencyGraphLink = { source: string; destination: string; latencyMs: number; weight?: number; };
+export type LatencyGraphProps = {
+    nodes: LatencyGraphNode[];
+    links: LatencyGraphLink[];
+    // Formats a link's traffic weight for the label under the latency (e.g. bytes). No label if omitted.
+    formatWeight?: (weight: number) => string;
+    // Extra lines shown under a cluster's latency stats (e.g. summed traffic), given the cluster's member node ids.
+    clusterSummary?: (memberIds: string[]) => LatencyGraphLabelLine[];
+};
+
+const DEFAULT_INTRA_CONNECTIONS = 3;
+const DEFAULT_INTER_CONNECTIONS = 5;
+const DEFAULT_MIN_CLUSTER_SIZE = 2;
+const DEFAULT_CLUSTER_FACTOR = 2;
+const DEFAULT_INTER_EXPONENT = 1.5;
+const intraConnectionsParam = new URLParam("lgIntraConnections", DEFAULT_INTRA_CONNECTIONS);
+const interConnectionsParam = new URLParam("lgInterConnections", DEFAULT_INTER_CONNECTIONS);
+const minClusterSizeParam = new URLParam("lgMinClusterSize", DEFAULT_MIN_CLUSTER_SIZE);
+// Exponent on the (normalized) inter-cluster latency when mapping to layout distance, so far clusters push apart harder.
+const interExponentParam = new URLParam("lgInterExponent", DEFAULT_INTER_EXPONENT);
+// Two nodes cluster when their latency is within this factor of the tighter node's own nearest-neighbor latency.
+// Relative (per-node) so a mutually-isolated close pair clusters even if it's far from everything else.
+const clusterFactorParam = new URLParam("lgClusterFactor", DEFAULT_CLUSTER_FACTOR);
+const geoParam = new URLParam("lgGeo", false);
+const showLatenciesParam = new URLParam("lgShowLatencies", false);
+// The config panel is collapsed by default so it doesn't eat the canvas; clicking the header expands it.
+const configOpenParam = new URLParam("lgConfigOpen", false);
+// A node shows its full label only when its nearest neighbor is at least this many SCREEN pixels away (or it's hovered);
+// crowded nodes fall back to a single title line so the view doesn't turn into a jumble. Zooming in spreads nodes past
+// the threshold, revealing their full labels.
+const labelProximityParam = new URLParam("lgLabelProximityPx", 100);
+// Pixels per degree of latitude/longitude in geographic mode (equirectangular projection).
+const GEO_SCALE = 6;
+
+// Inter-cluster gap is measured in units of CLUSTER RADIUS (not absolute px), so it survives auto-fit: `spacing` is
+// literally "edge gap = this many cluster radii" for the closest pair, up to `spacing * INTER_SPREAD` for the farthest.
+// The exponent shapes the in-between. Range is normalized to [closest, farthest] latency so it can't blow up.
+const INTER_SPREAD = 2.5;
+const DEFAULT_INTER_SPACING = -1.5;
+const interSpacingParam = new URLParam("lgInterSpacing", DEFAULT_INTER_SPACING);
+// Intra-cluster layout is solved SEPARATELY and normalized per cluster, so a cluster's on-screen size doesn't depend
+// on its absolute latency (a 3ms-tight cluster and a 30ms one render at similar sizes). A pair at the cluster's median
+// intra-latency sits INTRA_UNIT_PX apart; relative distances within the cluster stay proportional to latency.
+const INTRA_UNIT_PX = 60;
+const INTRA_MIN_PX = 8;
+
+// Stress majorization (SMACOF): each iteration is a Guttman transform that never increases stress.
+const COOLING = 0.996;
+const CONVERGENCE_EPS = 0.02;
+const MAX_ITERATIONS = 3000;
+// Classical MDS init: top-2 eigenvectors of the double-centered distance matrix via power iteration.
+const MAX_POWER_ITERS = 200;
+const POWER_EPS = 1e-9;
+
+const MIN_OPACITY = 0.05;
+const NODE_RADIUS = 6;
+// Traffic-driven sizing (normalized to the busiest node/pair). Circles grow with node weight; lines with pair weight.
+const NODE_WEIGHT_MULT = 2.5;
+const LINE_BASE_WIDTH = 1.5;
+const LINE_MIN_WIDTH = 1;
+const LINE_MAX_WIDTH = 7;
+const HULL_PADDING = 26;
+const ZOOM_STEP = 1.1;
+const MIN_SCALE = 0.05;
+const MAX_SCALE = 12;
+// Screen-space margins left around the content when auto-fitting. The top gets much more room because node labels
+// stack upward above the nodes (and are drawn at a fixed screen size regardless of zoom).
+const FIT_PAD = 60;
+const FIT_PAD_TOP = 160;
+// Auto-fit leaves a bit of extra breathing room by not zooming all the way in to fill the padded box.
+const FIT_ZOOM = 0.7;
+
+type Edge = { a: number; b: number; latency: number; };
+type SolveEdge = { a: number; b: number; target: number; weight: number; };
+type ClusterPair = { p: number; q: number; min: number; median: number; max: number; target: number; weight: number; };
+type Centroids = { cx: Float64Array; cy: Float64Array; count: Int32Array; radius: Float64Array; };
+
+export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
+    nodes: LatencyGraphNode[] = [];
+    edges: Edge[] = [];
+    latencyMatrix = new Float64Array(0);
+    minLatency = 0;
+    maxLatency = 1;
+    nodeWeight = new Float64Array(0);
+    maxNodeWeight = 0;
+    pairWeight = new Map<number, number>();
+    maxPairWeight = 0;
+    // Summed node-pair traffic between each cluster pair, for the inter-cluster line widths and labels.
+    clusterPairWeight = new Map<number, number>();
+    maxClusterPairWeight = 0;
+    // Cached from props in render() so draw() (a rAF callback, not synced) never reads this.props.
+    formatWeight: ((weight: number) => string) | undefined = undefined;
+    clusterSummary: ((memberIds: string[]) => LatencyGraphLabelLine[]) | undefined = undefined;
+    // Latest cluster centroids/radii from draw(), for the pointer-handler hull test.
+    hoverCentroids: Centroids | undefined = undefined;
+    builtSig = "";
+    builtWeightSig = 0;
+    builtGeo = false;
+    builtIntraConnections = 0;
+    builtMinClusterSize = 0;
+    builtClusterFactor = 0;
+    builtInterExponent = 0;
+
+    clusterOf = new Int32Array(0);
+    clusterCount = 1;
+    clusterSize = new Int32Array(0);
+    clusterDist = new Float64Array(0);
+    clusterIntraMin = new Float64Array(0);
+    clusterIntraMedian = new Float64Array(0);
+    clusterIntraMax = new Float64Array(0);
+    interPairs: ClusterPair[] = [];
+    intraSolveEdges: SolveEdge[] = [];
+    renderEdges: Edge[] = [];
+    renderEdgeSet = new Set<Edge>();
+    neighbors: { other: number; edge: Edge; }[][] = [];
+    interPairMap = new Map<number, ClusterPair>();
+    renderInterPairs: ClusterPair[] = [];
+    interMin = 0;
+    interMax = 1;
+    renderMin = 0;
+    renderMax = 1;
+
+    // Per-cluster radius (from the settled intra layout), so inter targets can be edge-to-edge.
+    clusterRadius = new Float64Array(0);
+    builtInterSpacing = 0;
+
+    // position = clusterCenter[cluster] + local[node]; the two levels are solved independently.
+    clusterCenterX = new Float64Array(0);
+    clusterCenterY = new Float64Array(0);
+    localX = new Float64Array(0);
+    localY = new Float64Array(0);
+    positionsX = new Float64Array(0);
+    positionsY = new Float64Array(0);
+
+    temperature = 1;
+    iteration = 0;
+    settled = false;
+
+    rafId = 0;
+    frameScheduled = false;
+    canvas: HTMLCanvasElement | undefined;
+
+    viewScale = 1;
+    panX = 0;
+    panY = 0;
+    // While false, the view auto-fits the content each frame; the first manual zoom/pan turns it on and we leave it alone.
+    userAdjustedView = false;
+    isPanning = false;
+    lastPointerX = 0;
+    lastPointerY = 0;
+    hoverNode: number | undefined = undefined;
+    mouseX = 0;
+    mouseY = 0;
+    // Latest values from draw(), needed by pointer handlers to convert screen<->world.
+    centroidX = 0;
+    centroidY = 0;
+    viewWidth = 0;
+    viewHeight = 0;
+
+    build() {
+        this.nodes = this.props.nodes.slice();
+        let n = this.nodes.length;
+        this.positionsX = new Float64Array(n);
+        this.positionsY = new Float64Array(n);
+        this.localX = new Float64Array(n);
+        this.localY = new Float64Array(n);
+        this.ingestLinks();
+        this.computeWeights();
+        this.clusterNodes();
+        this.applyLayout();
+    }
+
+    // Traffic weights only affect rendering (circle size, line width), so they can refresh without re-laying-out.
+    computeWeights() {
+        let n = this.nodes.length;
+        let index = new Map<string, number>();
+        for (let [i, node] of this.nodes.entries()) {
+            index.set(node.id, i);
+        }
+        this.nodeWeight = new Float64Array(n);
+        this.maxNodeWeight = 0;
+        for (let node of this.props.nodes) {
+            let i = index.get(node.id);
+            if (i === undefined) continue;
+            this.nodeWeight[i] = node.weight || 0;
+            this.maxNodeWeight = Math.max(this.maxNodeWeight, node.weight || 0);
+        }
+        this.pairWeight = new Map();
+        this.maxPairWeight = 0;
+        for (let link of this.props.links) {
+            if (!link.weight) continue;
+            let a = index.get(link.source);
+            let b = index.get(link.destination);
+            if (a === undefined || b === undefined || a === b) continue;
+            let pk = Math.min(a, b) * n + Math.max(a, b);
+            let combined = (this.pairWeight.get(pk) || 0) + link.weight;
+            this.pairWeight.set(pk, combined);
+            this.maxPairWeight = Math.max(this.maxPairWeight, combined);
+        }
+    }
+
+    // Roll node-pair traffic up into cluster-pair totals (cross-cluster only). Recomputed each frame so it always
+    // matches the current clustering; cheap since it iterates the (already small) weighted-pair map.
+    computeClusterPairWeights() {
+        let n = this.nodes.length;
+        let k = this.clusterCount;
+        this.clusterPairWeight = new Map();
+        this.maxClusterPairWeight = 0;
+        for (let [pk, weight] of this.pairWeight) {
+            let ca = this.clusterOf[Math.floor(pk / n)];
+            let cb = this.clusterOf[pk % n];
+            if (ca === cb) continue;
+            let ck = Math.min(ca, cb) * k + Math.max(ca, cb);
+            let combined = (this.clusterPairWeight.get(ck) || 0) + weight;
+            this.clusterPairWeight.set(ck, combined);
+            this.maxClusterPairWeight = Math.max(this.maxClusterPairWeight, combined);
+        }
+    }
+
+    interLineWidth(p: number, q: number) {
+        if (this.maxClusterPairWeight <= 0) return 2;
+        let w = this.clusterPairWeight.get(Math.min(p, q) * this.clusterCount + Math.max(p, q)) || 0;
+        return LINE_MIN_WIDTH + (w / this.maxClusterPairWeight) * (LINE_MAX_WIDTH - LINE_MIN_WIDTH);
+    }
+
+    // Combine both directions of each pair into a single undirected edge (mean latency), and build the full matrix.
+    ingestLinks() {
+        let n = this.nodes.length;
+        let index = new Map<string, number>();
+        for (let [i, node] of this.nodes.entries()) {
+            index.set(node.id, i);
+        }
+        let paired = new Map<string, { sum: number; count: number; a: number; b: number; }>();
+        for (let link of this.props.links) {
+            let a = index.get(link.source);
+            let b = index.get(link.destination);
+            if (a === undefined || b === undefined || a === b) continue;
+            // Skip junk latencies (undefined / NaN / infinite) so they can't poison the distance matrix -> NaN positions.
+            if (!Number.isFinite(link.latencyMs)) continue;
+            let lo = Math.min(a, b);
+            let hi = Math.max(a, b);
+            let key = `${lo}-${hi}`;
+            let entry = paired.get(key);
+            if (!entry) {
+                entry = { sum: 0, count: 0, a: lo, b: hi };
+                paired.set(key, entry);
+            }
+            entry.sum += link.latencyMs;
+            entry.count++;
+        }
+        this.edges = [...paired.values()].map(e => ({ a: e.a, b: e.b, latency: e.sum / e.count }));
+        let latencies = this.edges.map(e => e.latency);
+        this.minLatency = latencies.length ? Math.min(...latencies) : 0;
+        this.maxLatency = latencies.length ? Math.max(...latencies) : 1;
+
+        // Unknown pairs treated as maximally distant, so they never falsely cluster.
+        this.latencyMatrix = new Float64Array(n * n).fill(this.maxLatency);
+        for (let i = 0; i < n; i++) {
+            this.latencyMatrix[i * n + i] = 0;
+        }
+        for (let e of this.edges) {
+            this.latencyMatrix[e.a * n + e.b] = e.latency;
+            this.latencyMatrix[e.b * n + e.a] = e.latency;
+        }
+    }
+
+    // Relative clustering: link two nodes when their latency is within clusterFactor of the tighter node's own
+    // nearest-neighbor latency, then take connected components. Adapts to local density, so a mutually-isolated
+    // close pair (e.g. Brisbane/Auckland) clusters even though it's far from every other node.
+    clusterNodes() {
+        let n = this.nodes.length;
+        let factor = Math.max(1, clusterFactorParam.value);
+        this.builtClusterFactor = factor;
+        this.builtInterExponent = interExponentParam.value;
+        let nn = this.nearestNeighborLatencies();
+
+        let parent = new Int32Array(n);
+        for (let i = 0; i < n; i++) {
+            parent[i] = i;
+        }
+        let find = (x: number): number => {
+            while (parent[x] !== x) {
+                parent[x] = parent[parent[x]];
+                x = parent[x];
+            }
+            return x;
+        };
+        for (let e of this.edges) {
+            if (e.latency <= factor * Math.min(nn[e.a], nn[e.b])) {
+                parent[find(e.a)] = find(e.b);
+            }
+        }
+        let clusterId = new Map<number, number>();
+        this.clusterOf = new Int32Array(n);
+        for (let i = 0; i < n; i++) {
+            let root = find(i);
+            let id = clusterId.get(root);
+            if (id === undefined) {
+                id = clusterId.size;
+                clusterId.set(root, id);
+            }
+            this.clusterOf[i] = id;
+        }
+        this.clusterCount = Math.max(1, clusterId.size);
+
+        this.enforceMinClusterSize();
+        this.buildClusterDerived();
+        this.computeRenderEdges();
+    }
+
+    nearestNeighborLatencies() {
+        let nn = new Float64Array(this.nodes.length).fill(this.maxLatency);
+        for (let e of this.edges) {
+            if (e.latency < nn[e.a]) nn[e.a] = e.latency;
+            if (e.latency < nn[e.b]) nn[e.b] = e.latency;
+        }
+        return nn;
+    }
+
+    // Clusters smaller than the configured minimum are dissolved into singletons (a node distant from everything).
+    enforceMinClusterSize() {
+        let n = this.nodes.length;
+        let min = Math.max(1, Math.floor(minClusterSizeParam.value));
+        this.builtMinClusterSize = min;
+        let size = new Int32Array(this.clusterCount);
+        for (let i = 0; i < n; i++) {
+            size[this.clusterOf[i]]++;
+        }
+        let remap = new Map<number, number>();
+        let next = 0;
+        let newOf = new Int32Array(n);
+        for (let i = 0; i < n; i++) {
+            let old = this.clusterOf[i];
+            if (size[old] >= min) {
+                let id = remap.get(old);
+                if (id === undefined) {
+                    id = next++;
+                    remap.set(old, id);
+                }
+                newOf[i] = id;
+            } else {
+                newOf[i] = next++;
+            }
+        }
+        this.clusterOf = newOf;
+        this.clusterCount = Math.max(1, next);
+    }
+
+    buildClusterDerived() {
+        let n = this.nodes.length;
+        let k = this.clusterCount;
+        this.clusterSize = new Int32Array(k);
+        for (let i = 0; i < n; i++) {
+            this.clusterSize[this.clusterOf[i]]++;
+        }
+
+        // Node-pair latencies bucketed per cluster pair (cross) and per cluster (within), for min/median/max ranges.
+        let lists = new Map<number, number[]>();
+        let intraLists: number[][] = Array.from({ length: k }, () => []);
+        for (let i = 0; i < n; i++) {
+            for (let j = i + 1; j < n; j++) {
+                let p = this.clusterOf[i];
+                let q = this.clusterOf[j];
+                if (p === q) {
+                    intraLists[p].push(this.latencyMatrix[i * n + j]);
+                    continue;
+                }
+                let key = Math.min(p, q) * k + Math.max(p, q);
+                let list = lists.get(key);
+                if (!list) {
+                    list = [];
+                    lists.set(key, list);
+                }
+                list.push(this.latencyMatrix[i * n + j]);
+            }
+        }
+        this.clusterIntraMin = new Float64Array(k);
+        this.clusterIntraMedian = new Float64Array(k);
+        this.clusterIntraMax = new Float64Array(k);
+        for (let c = 0; c < k; c++) {
+            let list = intraLists[c];
+            if (!list.length) continue;
+            sort(list, x => x);
+            this.clusterIntraMin[c] = list[0];
+            this.clusterIntraMedian[c] = list[Math.floor(list.length / 2)];
+            this.clusterIntraMax[c] = list[list.length - 1];
+        }
+        this.clusterDist = new Float64Array(k * k).fill(this.maxLatency);
+        for (let c = 0; c < k; c++) {
+            this.clusterDist[c * k + c] = 0;
+        }
+        let stats: { p: number; q: number; min: number; median: number; max: number; }[] = [];
+        for (let [key, list] of lists) {
+            let p = Math.floor(key / k);
+            let q = key % k;
+            sort(list, x => x);
+            let min = list[0];
+            let max = list[list.length - 1];
+            let median = list[Math.floor(list.length / 2)];
+            this.clusterDist[p * k + q] = median;
+            this.clusterDist[q * k + p] = median;
+            stats.push({ p, q, min, median, max });
+        }
+        let medians = stats.map(s => s.median);
+        this.interMin = medians.length ? Math.min(...medians) : 0;
+        this.interMax = medians.length ? Math.max(...medians) : 1;
+        // Targets depend on cluster radii, which aren't known until the intra layout is solved, so they're filled in by
+        // hierarchicalInit; here we just record the latency stats.
+        this.interPairs = stats.map(s => ({ p: s.p, q: s.q, min: s.min, median: s.median, max: s.max, target: 1, weight: 1 }));
+        this.interPairMap = new Map();
+        for (let pair of this.interPairs) {
+            this.interPairMap.set(pair.p * k + pair.q, pair);
+        }
+
+        // Intra edges use the per-cluster normalized scale, so cluster size is decoupled from absolute latency.
+        this.intraSolveEdges = [];
+        for (let e of this.edges) {
+            if (this.clusterOf[e.a] !== this.clusterOf[e.b]) continue;
+            let target = this.intraTarget(e.latency, this.clusterIntraMedian[this.clusterOf[e.a]]);
+            this.intraSolveEdges.push({ a: e.a, b: e.b, target, weight: 1 / (target * target) });
+        }
+    }
+
+    computeRenderEdges() {
+        let count = Math.max(1, Math.floor(intraConnectionsParam.value));
+        this.builtIntraConnections = count;
+        let n = this.nodes.length;
+        let neighbors: { other: number; edge: Edge; }[][] = Array.from({ length: n }, () => []);
+        for (let edge of this.edges) {
+            neighbors[edge.a].push({ other: edge.b, edge });
+            neighbors[edge.b].push({ other: edge.a, edge });
+        }
+        this.neighbors = neighbors;
+        let selected = new Set<Edge>();
+        for (let i = 0; i < n; i++) {
+            let candidates = this.nodeCandidates(i);
+            for (let j = 0; j < Math.min(count, candidates.length); j++) {
+                selected.add(candidates[j].edge);
+            }
+        }
+        this.renderEdgeSet = selected;
+        this.renderEdges = [...selected];
+        let nodeLatencies = this.renderEdges.map(e => e.latency);
+        this.renderMin = nodeLatencies.length ? Math.min(...nodeLatencies) : 0;
+        this.renderMax = nodeLatencies.length ? Math.max(...nodeLatencies) : 1;
+    }
+
+    // A node's connection candidates in nearest-first order: clustered nodes stay in-cluster, singletons reach anywhere.
+    nodeCandidates(i: number) {
+        let clustered = this.clusterSize[this.clusterOf[i]] >= 2;
+        let candidates = clustered ? this.neighbors[i].filter(nb => this.clusterOf[nb.other] === this.clusterOf[i]) : this.neighbors[i].slice();
+        sort(candidates, nb => nb.edge.latency);
+        return candidates;
+    }
+
+    // Each real cluster links to its N nearest clusters by on-screen distance — but only ones it has clear line of
+    // sight to: if the segment would pass through another cluster's hull, the link is hidden to keep the chart clean.
+    computeRenderInterPairs(centroids: Centroids) {
+        let k = this.clusterCount;
+        let real: number[] = [];
+        for (let c = 0; c < k; c++) {
+            if (this.clusterSize[c] >= 2) real.push(c);
+        }
+        let selected = new Set<ClusterPair>();
+        for (let c of real) {
+            let others = real.filter(o => o !== c && this.hasLineOfSight(centroids, c, o)).map(o => {
+                let dx = centroids.cx[c] - centroids.cx[o];
+                let dy = centroids.cy[c] - centroids.cy[o];
+                return { o, d: dx * dx + dy * dy };
+            });
+            sort(others, entry => entry.d);
+            let interCount = Math.max(1, Math.floor(interConnectionsParam.value));
+            for (let j = 0; j < Math.min(interCount, others.length); j++) {
+                let pair = this.interPairMap.get(Math.min(c, others[j].o) * k + Math.max(c, others[j].o));
+                if (pair) selected.add(pair);
+            }
+        }
+        this.renderInterPairs = [...selected];
+    }
+
+    hasLineOfSight(centroids: Centroids, from: number, to: number) {
+        return this.segmentClearOfClusters(centroids.cx[from], centroids.cy[from], centroids.cx[to], centroids.cy[to], centroids, from, to);
+    }
+
+    // True if the segment doesn't pass through any real cluster's hull (except the two clusters it belongs to).
+    segmentClearOfClusters(ax: number, ay: number, bx: number, by: number, centroids: Centroids, exclude0: number, exclude1: number) {
+        let dx = bx - ax;
+        let dy = by - ay;
+        let lengthSq = dx * dx + dy * dy || 1;
+        for (let m = 0; m < this.clusterCount; m++) {
+            if (centroids.count[m] < 2 || m === exclude0 || m === exclude1) continue;
+            // Closest point on segment [a,b] to cluster m's center, then distance to it.
+            let t = Math.max(0, Math.min(1, ((centroids.cx[m] - ax) * dx + (centroids.cy[m] - ay) * dy) / lengthSq));
+            let px = ax + t * dx - centroids.cx[m];
+            let py = ay + t * dy - centroids.cy[m];
+            if (px * px + py * py < centroids.radius[m] * centroids.radius[m]) return false;
+        }
+        return true;
+    }
+
+    // Target centroid distance = both radii + an edge gap measured in cluster-radius units (so the gap:size ratio, and
+    // therefore the visible spacing, is what `spacing` controls — auto-fit can't cancel it). The gap grows from
+    // `spacing` radii (closest pair) to `spacing * INTER_SPREAD` radii (farthest), shaped by the exponent.
+    interCentroidTarget(p: number, q: number, latency: number) {
+        let rp = this.clusterRadius[p] || 0;
+        let rq = this.clusterRadius[q] || 0;
+        let span = this.interMax - this.interMin;
+        let norm = span > 0 && Number.isFinite(latency) ? (latency - this.interMin) / span : 0;
+        norm = Math.max(0, Math.min(1, Number.isFinite(norm) ? norm : 0));
+        let shaped = 1 + Math.pow(norm, interExponentParam.value) * (INTER_SPREAD - 1);
+        let gap = (rp + rq) / 2 * interSpacingParam.value * shaped;
+        let target = rp + rq + gap;
+        return Number.isFinite(target) && target > 0 ? target : rp + rq + 1;
+    }
+
+    // Per-cluster normalized intra distance: a pair at the cluster's median latency sits ~INTRA_UNIT_PX apart,
+    // regardless of how tight or loose the cluster's absolute latencies are. Relative distances stay proportional.
+    intraTarget(latency: number, clusterMedian: number) {
+        let ref = clusterMedian > 0 ? clusterMedian : 1;
+        let l = Number.isFinite(latency) ? Math.max(0, latency) : 0;
+        let px = INTRA_MIN_PX + INTRA_UNIT_PX * (l / ref);
+        return Number.isFinite(px) ? px : INTRA_UNIT_PX;
+    }
+
+    opacityFor(latency: number, min: number, max: number) {
+        let norm = (latency - min) / (max - min || 1);
+        return Math.max(MIN_OPACITY, 1 - norm);
+    }
+
+    applyLayout() {
+        this.builtGeo = geoParam.value;
+        if (geoParam.value) {
+            this.geoLayout();
+            this.scheduleFrame();
+            return;
+        }
+        this.hierarchicalInit();
+        this.temperature = 1;
+        this.iteration = 0;
+        this.settled = false;
+        this.scheduleFrame();
+    }
+
+    geoLayout() {
+        for (let [i, node] of this.nodes.entries()) {
+            this.positionsX[i] = node.longitude !== undefined ? node.longitude * GEO_SCALE : 0;
+            this.positionsY[i] = node.latitude !== undefined ? -node.latitude * GEO_SCALE : 0;
+        }
+        this.temperature = 0;
+        this.iteration = 0;
+        this.settled = true;
+    }
+
+    // Members placed by each cluster's own local MDS first (so we know cluster radii), then cluster centers by
+    // inter-cluster MDS using edge-to-edge (radius-inclusive) targets.
+    hierarchicalInit() {
+        let n = this.nodes.length;
+        let k = this.clusterCount;
+        this.builtInterSpacing = interSpacingParam.value;
+        this.clusterRadius = new Float64Array(k);
+
+        for (let c = 0; c < k; c++) {
+            let members: number[] = [];
+            for (let i = 0; i < n; i++) {
+                if (this.clusterOf[i] === c) members.push(i);
+            }
+            let median = this.clusterIntraMedian[c];
+            let local = this.mds(members.length, (a, b) => {
+                let d = this.intraTarget(this.latencyMatrix[members[a] * n + members[b]], median);
+                return d * d;
+            });
+            let radius = 0;
+            for (let [mi, node] of members.entries()) {
+                this.localX[node] = local.x[mi];
+                this.localY[node] = local.y[mi];
+                radius = Math.max(radius, Math.sqrt(local.x[mi] * local.x[mi] + local.y[mi] * local.y[mi]));
+            }
+            this.clusterRadius[c] = radius + HULL_PADDING;
+        }
+
+        // Now that radii are known, fill in the inter-cluster targets (edge-to-edge).
+        for (let pair of this.interPairs) {
+            pair.target = this.interCentroidTarget(pair.p, pair.q, pair.median);
+            pair.weight = 1 / (pair.target * pair.target);
+        }
+        let centers = this.mds(k, (p, q) => {
+            let d = this.interCentroidTarget(p, q, this.clusterDist[p * k + q]);
+            return d * d;
+        });
+        this.clusterCenterX = centers.x;
+        this.clusterCenterY = centers.y;
+
+        this.composePositions();
+    }
+
+    composePositions() {
+        for (let i = 0; i < this.nodes.length; i++) {
+            let c = this.clusterOf[i];
+            this.positionsX[i] = this.clusterCenterX[c] + this.localX[i];
+            this.positionsY[i] = this.clusterCenterY[c] + this.localY[i];
+        }
+    }
+
+    // Classical MDS on an m-point set given a squared-target-distance function; top-2 eigenvectors.
+    mds(m: number, getSqDist: (a: number, b: number) => number) {
+        let x = new Float64Array(m);
+        let y = new Float64Array(m);
+        if (m < 2) return { x, y };
+        let sq = new Float64Array(m * m);
+        for (let i = 0; i < m; i++) {
+            for (let j = i + 1; j < m; j++) {
+                let v = getSqDist(i, j);
+                sq[i * m + j] = v;
+                sq[j * m + i] = v;
+            }
+        }
+        let rowMean = new Float64Array(m);
+        let grand = 0;
+        for (let i = 0; i < m; i++) {
+            let s = 0;
+            for (let j = 0; j < m; j++) {
+                s += sq[i * m + j];
+            }
+            rowMean[i] = s / m;
+            grand += s;
+        }
+        grand /= m * m;
+        let b = new Float64Array(m * m);
+        for (let i = 0; i < m; i++) {
+            for (let j = 0; j < m; j++) {
+                b[i * m + j] = -0.5 * (sq[i * m + j] - rowMean[i] - rowMean[j] + grand);
+            }
+        }
+        let shift = 0;
+        for (let i = 0; i < m; i++) {
+            let s = 0;
+            for (let j = 0; j < m; j++) {
+                s += Math.abs(b[i * m + j]);
+            }
+            shift = Math.max(shift, s);
+        }
+        let matBase = (v: Float64Array, out: Float64Array) => {
+            for (let i = 0; i < m; i++) {
+                let s = 0;
+                for (let j = 0; j < m; j++) {
+                    s += b[i * m + j] * v[j];
+                }
+                out[i] = s + shift * v[i];
+            }
+        };
+        let e1 = this.powerIteration(matBase, m);
+        let matDeflate = (v: Float64Array, out: Float64Array) => {
+            matBase(v, out);
+            let d = 0;
+            for (let i = 0; i < m; i++) {
+                d += e1.vec[i] * v[i];
+            }
+            for (let i = 0; i < m; i++) {
+                out[i] -= e1.val * d * e1.vec[i];
+            }
+        };
+        let e2 = this.powerIteration(matDeflate, m);
+        let s1 = Math.sqrt(Math.max(e1.val - shift, 0));
+        let s2 = Math.sqrt(Math.max(e2.val - shift, 0));
+        for (let i = 0; i < m; i++) {
+            x[i] = e1.vec[i] * s1;
+            y[i] = e2.vec[i] * s2;
+        }
+        return { x, y };
+    }
+
+    powerIteration(matvec: (v: Float64Array, out: Float64Array) => void, n: number) {
+        let v = new Float64Array(n);
+        let mag = 0;
+        for (let i = 0; i < n; i++) {
+            v[i] = Math.sin(i * 0.1 + 1);
+            mag += v[i] * v[i];
+        }
+        mag = Math.sqrt(mag);
+        for (let i = 0; i < n; i++) {
+            v[i] /= mag;
+        }
+        let out = new Float64Array(n);
+        let val = 0;
+        for (let iter = 0; iter < MAX_POWER_ITERS; iter++) {
+            matvec(v, out);
+            let norm = 0;
+            for (let i = 0; i < n; i++) {
+                norm += out[i] * out[i];
+            }
+            norm = Math.sqrt(norm);
+            if (norm < 1e-12) break;
+            let dot = 0;
+            for (let i = 0; i < n; i++) {
+                out[i] /= norm;
+                dot += out[i] * v[i];
+            }
+            for (let i = 0; i < n; i++) {
+                v[i] = out[i];
+            }
+            val = norm;
+            if (Math.abs(dot) > 1 - POWER_EPS) break;
+        }
+        return { vec: v, val };
+    }
+
+    step() {
+        if (this.settled) return;
+        let maxMove = 0;
+        maxMove = Math.max(maxMove, this.majorizeCenters());
+        maxMove = Math.max(maxMove, this.majorizeLocals());
+        this.composePositions();
+        this.temperature *= COOLING;
+        this.iteration++;
+        if (maxMove < CONVERGENCE_EPS || this.iteration >= MAX_ITERATIONS) {
+            this.settled = true;
+        }
+    }
+
+    majorizeCenters() {
+        let k = this.clusterCount;
+        if (k < 2) return 0;
+        let numX = new Float64Array(k);
+        let numY = new Float64Array(k);
+        let denom = new Float64Array(k);
+        for (let pair of this.interPairs) {
+            let ax = this.clusterCenterX[pair.p];
+            let ay = this.clusterCenterY[pair.p];
+            let bx = this.clusterCenterX[pair.q];
+            let by = this.clusterCenterY[pair.q];
+            let dx = bx - ax;
+            let dy = by - ay;
+            let d = Math.sqrt(dx * dx + dy * dy) || 0.0001;
+            let scaled = pair.target / d;
+            let w = pair.weight;
+            numX[pair.p] += w * (bx + scaled * (ax - bx));
+            numY[pair.p] += w * (by + scaled * (ay - by));
+            numX[pair.q] += w * (ax + scaled * (bx - ax));
+            numY[pair.q] += w * (ay + scaled * (by - ay));
+            denom[pair.p] += w;
+            denom[pair.q] += w;
+        }
+        let maxMove = 0;
+        for (let c = 0; c < k; c++) {
+            if (!denom[c]) continue;
+            let moveX = (numX[c] / denom[c] - this.clusterCenterX[c]) * this.temperature;
+            let moveY = (numY[c] / denom[c] - this.clusterCenterY[c]) * this.temperature;
+            this.clusterCenterX[c] += moveX;
+            this.clusterCenterY[c] += moveY;
+            maxMove = Math.max(maxMove, Math.abs(moveX), Math.abs(moveY));
+        }
+        return maxMove;
+    }
+
+    majorizeLocals() {
+        let n = this.nodes.length;
+        let k = this.clusterCount;
+        let numX = new Float64Array(n);
+        let numY = new Float64Array(n);
+        let denom = new Float64Array(n);
+        for (let e of this.intraSolveEdges) {
+            let ax = this.localX[e.a];
+            let ay = this.localY[e.a];
+            let bx = this.localX[e.b];
+            let by = this.localY[e.b];
+            let dx = bx - ax;
+            let dy = by - ay;
+            let d = Math.sqrt(dx * dx + dy * dy) || 0.0001;
+            let scaled = e.target / d;
+            numX[e.a] += e.weight * (bx + scaled * (ax - bx));
+            numY[e.a] += e.weight * (by + scaled * (ay - by));
+            numX[e.b] += e.weight * (ax + scaled * (bx - ax));
+            numY[e.b] += e.weight * (ay + scaled * (by - ay));
+            denom[e.a] += e.weight;
+            denom[e.b] += e.weight;
+        }
+        let maxMove = 0;
+        for (let i = 0; i < n; i++) {
+            if (!denom[i]) continue;
+            let moveX = (numX[i] / denom[i] - this.localX[i]) * this.temperature;
+            let moveY = (numY[i] / denom[i] - this.localY[i]) * this.temperature;
+            this.localX[i] += moveX;
+            this.localY[i] += moveY;
+            maxMove = Math.max(maxMove, Math.abs(moveX), Math.abs(moveY));
+        }
+        // Keep each cluster centered on its own center, so global placement stays the centers' job.
+        let meanX = new Float64Array(k);
+        let meanY = new Float64Array(k);
+        let count = new Int32Array(k);
+        for (let i = 0; i < n; i++) {
+            let c = this.clusterOf[i];
+            meanX[c] += this.localX[i];
+            meanY[c] += this.localY[i];
+            count[c]++;
+        }
+        for (let c = 0; c < k; c++) {
+            if (count[c]) {
+                meanX[c] /= count[c];
+                meanY[c] /= count[c];
+            }
+        }
+        for (let i = 0; i < n; i++) {
+            let c = this.clusterOf[i];
+            this.localX[i] -= meanX[c];
+            this.localY[i] -= meanY[c];
+        }
+        return maxMove;
+    }
+
+    clusterHue(c: number) {
+        return Math.round(c / Math.max(1, this.clusterCount) * 360);
+    }
+
+    // Screen-space radius; grows with the node's traffic weight, normalized to the busiest node.
+    nodeRadius(i: number) {
+        if (this.maxNodeWeight <= 0) return NODE_RADIUS;
+        return NODE_RADIUS * (1 + NODE_WEIGHT_MULT * (this.nodeWeight[i] / this.maxNodeWeight));
+    }
+
+    lineWidthFor(a: number, b: number) {
+        if (this.maxPairWeight <= 0) return LINE_BASE_WIDTH;
+        let w = this.pairWeight.get(Math.min(a, b) * this.nodes.length + Math.max(a, b)) || 0;
+        return LINE_MIN_WIDTH + (w / this.maxPairWeight) * (LINE_MAX_WIDTH - LINE_MIN_WIDTH);
+    }
+
+    nodeShort(node: LatencyGraphNode) {
+        return (node.label || node.id).slice(0, 2);
+    }
+
+    clusterCentroids() {
+        let k = this.clusterCount;
+        let n = this.nodes.length;
+        let cx = new Float64Array(k);
+        let cy = new Float64Array(k);
+        let count = new Int32Array(k);
+        for (let i = 0; i < n; i++) {
+            let c = this.clusterOf[i];
+            cx[c] += this.positionsX[i];
+            cy[c] += this.positionsY[i];
+            count[c]++;
+        }
+        for (let c = 0; c < k; c++) {
+            if (count[c]) {
+                cx[c] /= count[c];
+                cy[c] /= count[c];
+            }
+        }
+        // Hull radius (world units) = farthest member from the centroid, plus padding.
+        let radius = new Float64Array(k);
+        for (let i = 0; i < n; i++) {
+            let c = this.clusterOf[i];
+            let dx = this.positionsX[i] - cx[c];
+            let dy = this.positionsY[i] - cy[c];
+            radius[c] = Math.max(radius[c], Math.sqrt(dx * dx + dy * dy));
+        }
+        for (let c = 0; c < k; c++) {
+            radius[c] += HULL_PADDING;
+        }
+        return { cx, cy, count, radius };
+    }
+
+    draw() {
+        let canvas = this.canvas;
+        if (!canvas) return;
+        let ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        let dpr = window.devicePixelRatio || 1;
+        let width = canvas.clientWidth;
+        let height = canvas.clientHeight;
+        if (canvas.width !== width * dpr || canvas.height !== height * dpr) {
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+        }
+
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.fillStyle = "hsl(0, 0%, 6%)";
+        ctx.fillRect(0, 0, width, height);
+
+        let n = this.nodes.length;
+        this.viewWidth = width;
+        this.viewHeight = height;
+        if (n === 0) return;
+
+        let centroidX = 0;
+        let centroidY = 0;
+        for (let i = 0; i < n; i++) {
+            centroidX += this.positionsX[i];
+            centroidY += this.positionsY[i];
+        }
+        centroidX /= n;
+        centroidY /= n;
+        this.centroidX = centroidX;
+        this.centroidY = centroidY;
+
+        // Auto-fit: scale/center the content's bounding box into the viewport, until the user manually zooms/pans.
+        if (!this.userAdjustedView) {
+            let minX = Infinity;
+            let maxX = -Infinity;
+            let minY = Infinity;
+            let maxY = -Infinity;
+            for (let i = 0; i < n; i++) {
+                minX = Math.min(minX, this.positionsX[i]);
+                maxX = Math.max(maxX, this.positionsX[i]);
+                minY = Math.min(minY, this.positionsY[i]);
+                maxY = Math.max(maxY, this.positionsY[i]);
+            }
+            let worldW = maxX - minX || 1;
+            let worldH = maxY - minY || 1;
+            let fit = Math.min((width - 2 * FIT_PAD) / worldW, (height - FIT_PAD_TOP - FIT_PAD) / worldH) * FIT_ZOOM;
+            // Only apply the fit if it's sane — never let a NaN/degenerate value nuke the whole view.
+            if (Number.isFinite(fit) && fit > 0 && Number.isFinite(minX) && Number.isFinite(minY)) {
+                this.viewScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, fit));
+                this.panX = -((minX + maxX) / 2 - centroidX) * this.viewScale;
+                // Center within the padded band, which sits lower than the middle because of the reserved top margin.
+                let targetCenterY = (FIT_PAD_TOP + (height - FIT_PAD)) / 2;
+                this.panY = targetCenterY - height / 2 - ((minY + maxY) / 2 - centroidY) * this.viewScale;
+            }
+        }
+
+        let scale = this.viewScale;
+        let toScreenX = (wx: number) => width / 2 + (wx - centroidX) * scale + this.panX;
+        let toScreenY = (wy: number) => height / 2 + (wy - centroidY) * scale + this.panY;
+
+        let centroids = this.clusterCentroids();
+        this.hoverCentroids = centroids;
+        this.computeRenderInterPairs(centroids);
+        this.computeClusterPairWeights();
+
+        // Inter-cluster lines run centroid-to-centroid, then the opaque hulls paint over the parts inside any
+        // cluster — so a line only shows in the gaps and reads as entering one cluster edge and exiting another.
+        this.drawInterLines(ctx, toScreenX, toScreenY, centroids);
+        this.drawClusterHulls(ctx, toScreenX, toScreenY, centroids);
+        this.drawNodeConnections(ctx, toScreenX, toScreenY, centroids);
+        // Line labels go under the nodes (they're less important); hover labels are drawn last so they still win.
+        if (showLatenciesParam.value) {
+            this.drawLineLatencies(ctx, toScreenX, toScreenY, centroids);
+        }
+        this.drawNodes(ctx, toScreenX, toScreenY, centroids);
+        this.drawInterLabels(ctx, toScreenX, toScreenY, centroids);
+        this.drawClusterLabels(ctx, toScreenX, toScreenY, centroids);
+        this.drawHover(ctx, toScreenX, toScreenY, centroids);
+    }
+
+    drawClusterHulls(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+        let k = this.clusterCount;
+        for (let c = 0; c < k; c++) {
+            if (centroids.count[c] < 2) continue;
+            let hue = this.clusterHue(c);
+            let x = toScreenX(centroids.cx[c]);
+            let y = toScreenY(centroids.cy[c]);
+            let r = centroids.radius[c] * this.viewScale;
+            // Opaque fill so any inter-cluster line underneath is hidden inside the cluster.
+            ctx.fillStyle = `hsl(${hue}, 35%, 9%)`;
+            ctx.beginPath();
+            ctx.arc(x, y, r, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = `hsla(${hue}, 60%, 55%, 0.35)`;
+            ctx.stroke();
+        }
+    }
+
+    drawInterLines(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+        for (let pair of this.renderInterPairs) {
+            ctx.lineWidth = this.interLineWidth(pair.p, pair.q);
+            ctx.strokeStyle = `hsla(0, 0%, 100%, ${this.opacityFor(pair.median, this.interMin, this.interMax)})`;
+            ctx.beginPath();
+            ctx.moveTo(toScreenX(centroids.cx[pair.p]), toScreenY(centroids.cy[pair.p]));
+            ctx.lineTo(toScreenX(centroids.cx[pair.q]), toScreenY(centroids.cy[pair.q]));
+            ctx.stroke();
+        }
+    }
+
+    drawInterLabels(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+        ctx.font = "11px sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        for (let pair of this.renderInterPairs) {
+            let midX = (toScreenX(centroids.cx[pair.p]) + toScreenX(centroids.cx[pair.q])) / 2;
+            let midY = (toScreenY(centroids.cy[pair.p]) + toScreenY(centroids.cy[pair.q])) / 2;
+
+            let traffic = this.clusterPairWeight.get(Math.min(pair.p, pair.q) * this.clusterCount + Math.max(pair.p, pair.q)) || 0;
+            let trafficLabel = this.formatWeight && traffic > 0 ? this.formatWeight(traffic) : undefined;
+            let latencyY = trafficLabel ? midY - 8 : midY;
+
+            ctx.font = "11px sans-serif";
+            let label = `${formatTime(pair.min)} · ${formatTime(pair.median)} · ${formatTime(pair.max)}`;
+            let textWidth = ctx.measureText(label).width;
+            ctx.fillStyle = "hsla(0, 0%, 0%, 0.6)";
+            ctx.fillRect(midX - textWidth / 2 - 3, latencyY - 8, textWidth + 6, 16);
+            ctx.fillStyle = "hsl(0, 0%, 82%)";
+            ctx.fillText(label, midX, latencyY);
+
+            if (trafficLabel) {
+                ctx.font = "10px sans-serif";
+                let trafficWidth = ctx.measureText(trafficLabel).width;
+                ctx.fillStyle = "hsla(0, 0%, 0%, 0.6)";
+                ctx.fillRect(midX - trafficWidth / 2 - 3, midY + 8 - 7, trafficWidth + 6, 14);
+                ctx.fillStyle = "hsl(0, 0%, 70%)";
+                ctx.fillText(trafficLabel, midX, midY + 8);
+            }
+        }
+    }
+
+    drawNodeConnections(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+        ctx.lineWidth = 1.5;
+        for (let edge of this.renderEdges) {
+            this.strokeNodeConnection(ctx, toScreenX, toScreenY, centroids, edge, 1);
+        }
+    }
+
+    strokeNodeConnection(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids, edge: Edge, opacityScale: number) {
+        // Hide links that tunnel through an unrelated cluster (mainly singleton connections crossing hulls).
+        if (!this.segmentClearOfClusters(this.positionsX[edge.a], this.positionsY[edge.a], this.positionsX[edge.b], this.positionsY[edge.b], centroids, this.clusterOf[edge.a], this.clusterOf[edge.b])) return;
+        ctx.lineWidth = this.lineWidthFor(edge.a, edge.b);
+        let hue = this.clusterHue(this.clusterOf[edge.a]);
+        ctx.strokeStyle = `hsla(${hue}, 70%, 62%, ${this.opacityFor(edge.latency, this.renderMin, this.renderMax) * opacityScale})`;
+        ctx.beginPath();
+        ctx.moveTo(toScreenX(this.positionsX[edge.a]), toScreenY(this.positionsY[edge.a]));
+        ctx.lineTo(toScreenX(this.positionsX[edge.b]), toScreenY(this.positionsY[edge.b]));
+        ctx.stroke();
+    }
+
+    // Always-on latency labels on the drawn node connections (toggleable), with the connection's traffic below.
+    // Skipped for lines masked by a cluster hull.
+    drawLineLatencies(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        for (let edge of this.renderEdges) {
+            if (!this.segmentClearOfClusters(this.positionsX[edge.a], this.positionsY[edge.a], this.positionsX[edge.b], this.positionsY[edge.b], centroids, this.clusterOf[edge.a], this.clusterOf[edge.b])) continue;
+            let midX = (toScreenX(this.positionsX[edge.a]) + toScreenX(this.positionsX[edge.b])) / 2;
+            let midY = (toScreenY(this.positionsY[edge.a]) + toScreenY(this.positionsY[edge.b])) / 2;
+
+            let traffic = this.pairWeight.get(Math.min(edge.a, edge.b) * this.nodes.length + Math.max(edge.a, edge.b)) || 0;
+            let trafficLabel = this.formatWeight && traffic > 0 ? this.formatWeight(traffic) : undefined;
+            let latencyY = trafficLabel ? midY - 7 : midY;
+
+            ctx.font = "10px sans-serif";
+            let latencyLabel = formatTime(edge.latency);
+            let latencyWidth = ctx.measureText(latencyLabel).width;
+            ctx.fillStyle = "hsla(0, 0%, 0%, 0.5)";
+            ctx.fillRect(midX - latencyWidth / 2 - 2, latencyY - 7, latencyWidth + 4, 14);
+            ctx.fillStyle = "hsl(0, 0%, 72%)";
+            ctx.fillText(latencyLabel, midX, latencyY);
+
+            if (trafficLabel) {
+                ctx.font = "9px sans-serif";
+                let trafficWidth = ctx.measureText(trafficLabel).width;
+                ctx.fillStyle = "hsla(0, 0%, 0%, 0.5)";
+                ctx.fillRect(midX - trafficWidth / 2 - 2, midY + 7 - 6, trafficWidth + 4, 12);
+                ctx.fillStyle = "hsl(0, 0%, 58%)";
+                ctx.fillText(trafficLabel, midX, midY + 7);
+            }
+        }
+    }
+
+    drawNodes(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+        ctx.textBaseline = "middle";
+        ctx.textAlign = "center";
+        let proximityPx = labelProximityParam.value;
+        let screenX = this.nodes.map((_, i) => toScreenX(this.positionsX[i]));
+        let screenY = this.nodes.map((_, i) => toScreenY(this.positionsY[i]));
+        for (let i = 0; i < this.nodes.length; i++) {
+            let x = screenX[i];
+            let y = screenY[i];
+            let radius = this.nodeRadius(i);
+            ctx.fillStyle = i === this.hoverNode ? "hsl(40, 90%, 60%)" : `hsl(${this.clusterHue(this.clusterOf[i])}, 65%, 55%)`;
+            ctx.beginPath();
+            ctx.arc(x, y, radius, 0, Math.PI * 2);
+            ctx.fill();
+
+            // The full label only shows when this node is visually isolated (nearest neighbor on screen is far enough
+            // away), or it's hovered; otherwise it collapses to a single title line above the dot to avoid a jumble.
+            let full = i === this.hoverNode || this.nearestScreenDist(i, screenX, screenY) >= proximityPx;
+            let lines = this.nodes[i].labelLines;
+            if (full && lines && lines.length) {
+                this.drawFullNodeLabel(ctx, lines, x, y);
+                continue;
+            }
+            // Crowded (or unlabeled): just the short title, above the dot.
+            let short = lines && lines.length ? lines[0].text : this.nodeShort(this.nodes[i]);
+            ctx.font = "bold 11px sans-serif";
+            ctx.lineWidth = 3;
+            ctx.strokeStyle = "hsl(0, 0%, 6%)";
+            ctx.strokeText(short, x, y - radius - 8);
+            ctx.fillStyle = "hsl(0, 0%, 92%)";
+            ctx.fillText(short, x, y - radius - 8);
+        }
+    }
+
+    // Stack the full label centered ON the node so a spread-out node reads its details in place.
+    drawFullNodeLabel(ctx: CanvasRenderingContext2D, lines: LatencyGraphLabelLine[], x: number, y: number) {
+        let baseY = y - (lines.length - 1) / 2 * 13;
+        for (let [li, line] of lines.entries()) {
+            let ly = baseY + li * 13;
+            ctx.font = li === 0 ? "bold 11px sans-serif" : "10px sans-serif";
+            ctx.lineWidth = 3;
+            ctx.strokeStyle = "hsl(0, 0%, 6%)";
+            ctx.strokeText(line.text, x, ly);
+            ctx.fillStyle = line.color || (li === 0 ? "hsl(0, 0%, 92%)" : "hsl(0, 0%, 62%)");
+            ctx.fillText(line.text, x, ly);
+        }
+    }
+
+    // Screen-pixel distance from node i to its closest other node (used to decide whether there's room for a full label).
+    nearestScreenDist(i: number, screenX: number[], screenY: number[]) {
+        let best = Infinity;
+        for (let j = 0; j < screenX.length; j++) {
+            if (j === i) continue;
+            let dx = screenX[j] - screenX[i];
+            let dy = screenY[j] - screenY[i];
+            let d = Math.sqrt(dx * dx + dy * dy);
+            if (d < best) best = d;
+        }
+        return best;
+    }
+
+    drawClusterLabels(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+        let k = this.clusterCount;
+        let rep = new Int32Array(k).fill(-1);
+        let repDist = new Float64Array(k).fill(Infinity);
+        let members: string[][] = Array.from({ length: k }, () => []);
+        for (let i = 0; i < this.nodes.length; i++) {
+            let c = this.clusterOf[i];
+            members[c].push(this.nodes[i].id);
+            let dx = this.positionsX[i] - centroids.cx[c];
+            let dy = this.positionsY[i] - centroids.cy[c];
+            let d = dx * dx + dy * dy;
+            if (d < repDist[c]) {
+                repDist[c] = d;
+                rep[c] = i;
+            }
+        }
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        for (let c = 0; c < k; c++) {
+            if (rep[c] < 0) continue;
+            let hue = this.clusterHue(c);
+
+            // Build the whole label block, then stack it above the hull (count at top, last summary line just above it).
+            let lines: { text: string; color: string; font: string; }[] = [];
+            lines.push({ text: `${centroids.count[c]} nodes`, color: `hsl(${hue}, 70%, 70%)`, font: "bold 12px sans-serif" });
+            if (centroids.count[c] >= 2) {
+                lines.push({ text: `${formatTime(this.clusterIntraMin[c])} · ${formatTime(this.clusterIntraMedian[c])} · ${formatTime(this.clusterIntraMax[c])}`, color: `hsl(${hue}, 40%, 78%)`, font: "11px sans-serif" });
+                for (let summary of this.clusterSummary?.(members[c]) ?? []) {
+                    lines.push({ text: summary.text, color: summary.color || "hsl(0, 0%, 78%)", font: "10px sans-serif" });
+                }
+            }
+
+            let x = toScreenX(centroids.cx[c]);
+            let hullTop = toScreenY(centroids.cy[c]) - centroids.radius[c] * this.viewScale;
+            let lineHeight = 14;
+            let bottomY = hullTop - 6;
+            for (let [i, line] of lines.entries()) {
+                let ly = bottomY - (lines.length - 1 - i) * lineHeight;
+                ctx.font = line.font;
+                let textWidth = ctx.measureText(line.text).width;
+                ctx.fillStyle = "hsla(0, 0%, 0%, 0.6)";
+                ctx.fillRect(x - textWidth / 2 - 3, ly - 8, textWidth + 6, 15);
+                ctx.fillStyle = line.color;
+                ctx.fillText(line.text, x, ly);
+            }
+        }
+    }
+
+    // Hovering (the nearest node to the cursor) reveals ALL of that node's connections to other nodes in its cluster
+    // — drawn as highlighted lines with latency labels, even the ones not shown by default.
+    drawHover(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+        if (this.hoverNode === undefined) return;
+        let hover = this.hoverNode;
+        let cluster = this.clusterOf[hover];
+        let connections = this.clusterSize[cluster] >= 2
+            ? this.neighbors[hover].filter(nb => this.clusterOf[nb.other] === cluster).map(nb => nb.edge)
+            : this.renderEdges.filter(edge => edge.a === hover || edge.b === hover);
+
+        ctx.lineWidth = 1.5;
+        for (let edge of connections) {
+            ctx.strokeStyle = "hsla(40, 90%, 60%, 0.6)";
+            ctx.beginPath();
+            ctx.moveTo(toScreenX(this.positionsX[edge.a]), toScreenY(this.positionsY[edge.a]));
+            ctx.lineTo(toScreenX(this.positionsX[edge.b]), toScreenY(this.positionsY[edge.b]));
+            ctx.stroke();
+        }
+        ctx.font = "12px sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        for (let edge of connections) {
+            let midX = (toScreenX(this.positionsX[edge.a]) + toScreenX(this.positionsX[edge.b])) / 2;
+            let midY = (toScreenY(this.positionsY[edge.a]) + toScreenY(this.positionsY[edge.b])) / 2;
+            let label = formatTime(edge.latency);
+            let textWidth = ctx.measureText(label).width;
+            ctx.fillStyle = "hsla(0, 0%, 0%, 0.75)";
+            ctx.fillRect(midX - textWidth / 2 - 3, midY - 8, textWidth + 6, 16);
+            ctx.fillStyle = "hsl(40, 90%, 75%)";
+            ctx.fillText(label, midX, midY);
+        }
+        // Redraw the hovered node's own label last so it always sits above the connection labels.
+        let hoverLines = this.nodes[hover].labelLines;
+        if (hoverLines && hoverLines.length) {
+            ctx.textAlign = "center";
+            this.drawFullNodeLabel(ctx, hoverLines, toScreenX(this.positionsX[hover]), toScreenY(this.positionsY[hover]));
+        }
+        this.drawHoverCard(ctx);
+    }
+
+    drawHoverCard(ctx: CanvasRenderingContext2D) {
+        if (this.hoverNode === undefined) return;
+        let node = this.nodes[this.hoverNode];
+        let lines = [node.label || node.id];
+        if (node.label) lines.push(node.id);
+        if (node.latitude !== undefined && node.longitude !== undefined) {
+            lines.push(`${node.latitude.toFixed(3)}, ${node.longitude.toFixed(3)}`);
+        }
+        lines = lines.filter(Boolean);
+        ctx.font = "12px sans-serif";
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        let width = Math.max(...lines.map(l => ctx.measureText(l).width)) + 16;
+        let lineHeight = 16;
+        let height = lines.length * lineHeight + 8;
+        let x = this.mouseX + 14;
+        let y = this.mouseY + 14;
+        if (x + width > this.viewWidth) x = this.mouseX - 14 - width;
+        if (y + height > this.viewHeight) y = this.mouseY - 14 - height;
+        ctx.fillStyle = "hsla(0, 0%, 4%, 0.92)";
+        ctx.fillRect(x, y, width, height);
+        ctx.strokeStyle = "hsl(200, 60%, 45%)";
+        ctx.lineWidth = 1;
+        ctx.strokeRect(x, y, width, height);
+        for (let [i, line] of lines.entries()) {
+            ctx.fillStyle = i === 0 ? "hsl(40, 90%, 75%)" : "hsl(0, 0%, 82%)";
+            ctx.fillText(line, x + 8, y + 8 + i * lineHeight + lineHeight / 2);
+        }
+    }
+
+    // Draw only when something can change: while the layout is still settling, or after an interaction. Once
+    // settled and idle, no frames are scheduled at all, so the tab uses no CPU.
+    scheduleFrame() {
+        if (this.frameScheduled || !this.canvas) return;
+        this.frameScheduled = true;
+        this.rafId = requestAnimationFrame(this.frame);
+    }
+
+    frame = () => {
+        this.frameScheduled = false;
+        this.rafId = 0;
+        this.step();
+        this.draw();
+        if (!this.settled) this.scheduleFrame();
+    };
+
+    onWheel = (e: WheelEvent) => {
+        e.preventDefault();
+        let worldX = this.centroidX + (e.offsetX - this.viewWidth / 2 - this.panX) / this.viewScale;
+        let worldY = this.centroidY + (e.offsetY - this.viewHeight / 2 - this.panY) / this.viewScale;
+        let factor = e.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
+        let newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, this.viewScale * factor));
+        this.viewScale = newScale;
+        this.panX = e.offsetX - this.viewWidth / 2 - (worldX - this.centroidX) * newScale;
+        this.panY = e.offsetY - this.viewHeight / 2 - (worldY - this.centroidY) * newScale;
+        this.userAdjustedView = true;
+        this.scheduleFrame();
+    };
+
+    onMouseDown = (e: MouseEvent) => {
+        if (e.button !== 1) return;
+        e.preventDefault();
+        this.isPanning = true;
+        this.lastPointerX = e.clientX;
+        this.lastPointerY = e.clientY;
+    };
+
+    onMouseMove = (e: MouseEvent) => {
+        if (this.isPanning) {
+            this.panX += e.clientX - this.lastPointerX;
+            this.panY += e.clientY - this.lastPointerY;
+            this.lastPointerX = e.clientX;
+            this.lastPointerY = e.clientY;
+            this.userAdjustedView = true;
+            this.scheduleFrame();
+            return;
+        }
+        let canvas = this.canvas;
+        if (!canvas) return;
+        let rect = canvas.getBoundingClientRect();
+        let mx = e.clientX - rect.left;
+        let my = e.clientY - rect.top;
+        this.mouseX = mx;
+        this.mouseY = my;
+        // No hit radius: the hovered node is just whichever node is closest to the cursor, so you can explore by
+        // moving the mouse around without having to land exactly on a node.
+        let scale = this.viewScale;
+        let bestDist = Infinity;
+        let best: number | undefined = undefined;
+        for (let i = 0; i < this.nodes.length; i++) {
+            let sx = this.viewWidth / 2 + (this.positionsX[i] - this.centroidX) * scale + this.panX;
+            let sy = this.viewHeight / 2 + (this.positionsY[i] - this.centroidY) * scale + this.panY;
+            let dist = (sx - mx) ** 2 + (sy - my) ** 2;
+            if (dist < bestDist) {
+                bestDist = dist;
+                best = i;
+            }
+        }
+        // Only highlight if the cursor is actually inside that node's cluster circle (or on a lone node).
+        if (best !== undefined && !this.cursorInCluster(best, mx, my)) {
+            best = undefined;
+        }
+        this.hoverNode = best;
+        this.scheduleFrame();
+    };
+
+    // Is the cursor inside node i's cluster hull (or, for a lone node, close to the node itself)?
+    cursorInCluster(i: number, mx: number, my: number) {
+        let scale = this.viewScale;
+        let c = this.clusterOf[i];
+        let centroids = this.hoverCentroids;
+        if (this.clusterSize[c] >= 2 && centroids) {
+            let scx = this.viewWidth / 2 + (centroids.cx[c] - this.centroidX) * scale + this.panX;
+            let scy = this.viewHeight / 2 + (centroids.cy[c] - this.centroidY) * scale + this.panY;
+            let r = centroids.radius[c] * scale;
+            return (mx - scx) ** 2 + (my - scy) ** 2 <= r * r;
+        }
+        let sx = this.viewWidth / 2 + (this.positionsX[i] - this.centroidX) * scale + this.panX;
+        let sy = this.viewHeight / 2 + (this.positionsY[i] - this.centroidY) * scale + this.panY;
+        let r = this.nodeRadius(i) + 8;
+        return (mx - sx) ** 2 + (my - sy) ** 2 <= r * r;
+    }
+
+    onMouseLeave = () => {
+        this.hoverNode = undefined;
+        this.scheduleFrame();
+    };
+
+    onMouseUp = (e: MouseEvent) => {
+        if (e.button !== 1) return;
+        this.isPanning = false;
+    };
+
+    componentWillUnmount() {
+        this.mountCanvas(undefined);
+    }
+
+    mountCanvas(elem: HTMLCanvasElement | undefined) {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+        this.frameScheduled = false;
+        if (this.canvas) {
+            this.canvas.removeEventListener("wheel", this.onWheel);
+            this.canvas.removeEventListener("mousedown", this.onMouseDown);
+            this.canvas.removeEventListener("mouseleave", this.onMouseLeave);
+            window.removeEventListener("mousemove", this.onMouseMove);
+            window.removeEventListener("mouseup", this.onMouseUp);
+        }
+        this.canvas = elem;
+        if (elem) {
+            elem.addEventListener("wheel", this.onWheel, { passive: false });
+            elem.addEventListener("mousedown", this.onMouseDown);
+            elem.addEventListener("mouseleave", this.onMouseLeave);
+            window.addEventListener("mousemove", this.onMouseMove);
+            window.addEventListener("mouseup", this.onMouseUp);
+            this.scheduleFrame();
+        }
+    }
+
+    render() {
+        this.formatWeight = this.props.formatWeight;
+        this.clusterSummary = this.props.clusterSummary;
+        // Rebuild from scratch whenever the data set changes (e.g. a new node's latencies arrive progressively).
+        let sig = `${this.props.nodes.length}:${this.props.links.length}`;
+        let weightSig = 0;
+        for (let node of this.props.nodes) {
+            weightSig += node.weight || 0;
+        }
+        for (let link of this.props.links) {
+            weightSig += link.weight || 0;
+        }
+        if (sig !== this.builtSig || geoParam.value !== this.builtGeo) {
+            // Switching layout mode (geographic vs solved) changes the whole coordinate space, so re-fit the view.
+            if (geoParam.value !== this.builtGeo) this.userAdjustedView = false;
+            this.builtSig = sig;
+            this.builtWeightSig = weightSig;
+            this.build();
+        } else if (weightSig !== this.builtWeightSig) {
+            // Traffic weights changed but the node/link set didn't — just refresh sizing, no re-layout.
+            this.builtWeightSig = weightSig;
+            this.computeWeights();
+        } else if (Math.max(1, Math.floor(minClusterSizeParam.value)) !== this.builtMinClusterSize || Math.max(1, clusterFactorParam.value) !== this.builtClusterFactor || interExponentParam.value !== this.builtInterExponent) {
+            this.clusterNodes();
+            this.applyLayout();
+        } else if (interSpacingParam.value !== this.builtInterSpacing) {
+            // Only the inter-cluster spacing changed — re-solve the layout (no re-clustering needed).
+            this.applyLayout();
+        } else if (Math.max(1, Math.floor(intraConnectionsParam.value)) !== this.builtIntraConnections) {
+            this.computeRenderEdges();
+        }
+        this.scheduleFrame();
+
+        return <div className={css.relative.fillBoth.overflowHidden}>
+            <canvas
+                ref={elem => this.mountCanvas(elem ?? undefined)}
+                className={css.absolute.pos(0, 0).fillBoth}
+            />
+            <div className={css.vbox(10).pad2(12).absolute.pos(0, 0).width(260).zIndex(2).hsla(0, 0, 8, 0.9).colorhsl(0, 0, 85)}>
+                <div
+                    className={css.hbox(6).fillWidth.button.colorhsl(0, 0, 85).fontWeight("bold")}
+                    onMouseDown={() => configOpenParam.value = !configOpenParam.value}
+                >
+                    <span>{configOpenParam.value ? "▾" : "▸"}</span>
+                    <span>Configuration</span>
+                    <span className={css.marginAuto.colorhsl(0, 0, 60).fontWeight("normal")}>
+                        {this.nodes.length} nodes · {this.clusterCount} clusters
+                    </span>
+                </div>
+                {configOpenParam.value && <>
+                    <InputLabelURL label="Connections in cluster" url={intraConnectionsParam} integer />
+                    <InputLabelURL label="Connections between clusters" url={interConnectionsParam} integer />
+                    <InputLabelURL label="Cluster factor" url={clusterFactorParam} number />
+                    <InputLabelURL label="Cluster distance exponent" url={interExponentParam} number />
+                    <InputLabelURL label="Cluster spacing" url={interSpacingParam} number />
+                    <InputLabelURL label="Min cluster size" url={minClusterSizeParam} integer />
+                    <InputLabelURL label="Label proximity px" url={labelProximityParam} number />
+                    <InputLabelURL label="Show line latencies" url={showLatenciesParam} checkbox />
+                    <InputLabelURL label="Geographic (lat/lon)" url={geoParam} checkbox />
+                    <div className={css.colorhsl(0, 0, 60)}>
+                        {this.nodes.length} nodes · {this.clusterCount} clusters · {this.renderEdges.length} lines
+                    </div>
+                    <Button onClick={() => { this.userAdjustedView = false; this.applyLayout(); }}>
+                        Reheat Layout
+                    </Button>
+                    <Button onClick={() => console.log("LatencyGraph data:\n" + JSON.stringify({ nodes: this.props.nodes, links: this.props.links }, undefined, 2))}>
+                        Log graph data
+                    </Button>
+                </>}
+            </div>
+        </div>;
+    }
+}