querysub 0.520.0 → 0.522.0

package/src/library-components/LatencyGraph.tsx

@@ -14,46 +14,26 @@ export type LatencyGraphProps = {
     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[];
+    // Id of the currently selected node (highlighted + always full-labelled).
+    selectedId?: string;
+    // Fired when a node is clicked (e.g. to sort a table by that node).
+    onSelectNode?: (id: string) => void;
 };
 
-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 DEFAULT_CONNECTIONS = 4;
+// Nearest neighbors drawn per node (the layout still uses every measured latency; this only thins the drawn lines).
+const connectionsParam = new URLParam("lgConnections", DEFAULT_CONNECTIONS);
+const DEFAULT_LATENCY_EXPONENT = 0.5;
+// Exponent on (latency / reference) when mapping to layout distance, so far nodes push apart harder as it grows.
+const latencyExponentParam = new URLParam("lgLatencyExponent", DEFAULT_LATENCY_EXPONENT);
 const geoParam = new URLParam("lgGeo", false);
-const showLatenciesParam = new URLParam("lgShowLatencies", false);
+// On by default: each drawn connection shows its latency and (when a weight formatter is given) its traffic.
+const showLatenciesParam = new URLParam("lgShowLatencies", true);
 // 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;
@@ -62,14 +42,24 @@ const MAX_ITERATIONS = 3000;
 const MAX_POWER_ITERS = 200;
 const POWER_EPS = 1e-9;
 
+// Layout distance for a pair: a pair at the reference (median) latency sits DIST_UNIT_PX apart, scaled by the exponent,
+// with a floor. Normalized to the median so the overall scale is latency-magnitude independent.
+const DIST_MIN_PX = 8;
+const DIST_UNIT_PX = 90;
+// A touch of deterministic jitter on the MDS init breaks symmetry, so a handful of nodes settle into a spread (a
+// triangle for three) instead of collapsing onto a single line.
+const INIT_JITTER_PX = 15;
+
 const MIN_OPACITY = 0.05;
 const NODE_RADIUS = 6;
+const NODE_HUE = 210;
+const HIGHLIGHT_COLOR = "hsl(40, 90%, 60%)";
 // 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 LABEL_LINE_HEIGHT = 13;
 const ZOOM_STEP = 1.1;
 const MIN_SCALE = 0.05;
 const MAX_SCALE = 12;
@@ -82,8 +72,6 @@ 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[] = [];
@@ -91,54 +79,27 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
     latencyMatrix = new Float64Array(0);
     minLatency = 0;
     maxLatency = 1;
+    latencyRef = 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;
+    selectedId: string | undefined = undefined;
+    onSelectNode: ((id: string) => void) | 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[] = [];
+    builtConnections = 0;
+    builtLatencyExponent = 0;
+
+    solveEdges: 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);
 
@@ -172,21 +133,17 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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.computeSolveEdges();
+        this.computeRenderEdges();
         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);
-        }
+        let index = this.nodeIndex();
         this.nodeWeight = new Float64Array(n);
         this.maxNodeWeight = 0;
         for (let node of this.props.nodes) {
@@ -209,37 +166,18 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    // 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);
+    nodeIndex() {
+        let index = new Map<string, number>();
+        for (let [i, node] of this.nodes.entries()) {
+            index.set(node.id, i);
         }
-    }
-
-    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);
+        return index;
     }
 
     // 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 index = this.nodeIndex();
         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);
@@ -262,8 +200,11 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         let latencies = this.edges.map(e => e.latency);
         this.minLatency = latencies.length ? Math.min(...latencies) : 0;
         this.maxLatency = latencies.length ? Math.max(...latencies) : 1;
+        let sorted = latencies.slice();
+        sort(sorted, x => x);
+        this.latencyRef = sorted.length ? sorted[Math.floor(sorted.length / 2)] : 1;
 
-        // Unknown pairs treated as maximally distant, so they never falsely cluster.
+        // Unknown pairs treated as maximally distant, so they never falsely collapse together.
         this.latencyMatrix = new Float64Array(n * n).fill(this.maxLatency);
         for (let i = 0; i < n; i++) {
             this.latencyMatrix[i * n + i] = 0;
@@ -274,166 +215,26 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    // 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();
+    // Normalized to the median latency so absolute latency magnitude doesn't change the overall scale; the exponent
+    // shapes how sharply higher-latency pairs are pushed apart.
+    targetDist(latency: number) {
+        let ref = this.latencyRef > 0 ? this.latencyRef : 1;
+        let l = Number.isFinite(latency) ? Math.max(0, latency) : ref;
+        let px = DIST_MIN_PX + DIST_UNIT_PX * Math.pow(l / ref, Math.max(0.01, latencyExponentParam.value));
+        return Number.isFinite(px) && px > 0 ? px : DIST_UNIT_PX;
     }
 
-    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) });
-        }
+    computeSolveEdges() {
+        this.builtLatencyExponent = latencyExponentParam.value;
+        this.solveEdges = this.edges.map(e => {
+            let target = this.targetDist(e.latency);
+            return { 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 count = Math.max(1, Math.floor(connectionsParam.value));
+        this.builtConnections = count;
         let n = this.nodes.length;
         let neighbors: { other: number; edge: Edge; }[][] = Array.from({ length: n }, () => []);
         for (let edge of this.edges) {
@@ -443,93 +244,16 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         this.neighbors = neighbors;
         let selected = new Set<Edge>();
         for (let i = 0; i < n; i++) {
-            let candidates = this.nodeCandidates(i);
+            let candidates = neighbors[i].slice();
+            sort(candidates, nb => nb.edge.latency);
             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;
+        let latencies = this.renderEdges.map(e => e.latency);
+        this.renderMin = latencies.length ? Math.min(...latencies) : 0;
+        this.renderMax = latencies.length ? Math.max(...latencies) : 1;
     }
 
     opacityFor(latency: number, min: number, max: number) {
@@ -544,7 +268,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             this.scheduleFrame();
             return;
         }
-        this.hierarchicalInit();
+        this.mdsInit();
         this.temperature = 1;
         this.iteration = 0;
         this.settled = false;
@@ -561,53 +285,19 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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() {
+    // Classical MDS on the full latency matrix for a good starting layout; SMACOF then refines using the real edges.
+    mdsInit() {
         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]);
+        let pos = this.mds(n, (a, b) => {
+            let d = this.targetDist(this.latencyMatrix[a * n + b]);
             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];
+        this.positionsX = pos.x;
+        this.positionsY = pos.y;
+        // Deterministic per-node jitter (different frequencies for x/y so it isn't itself collinear) to break symmetry.
+        for (let i = 0; i < n; i++) {
+            this.positionsX[i] += Math.sin(i * 12.9898 + 1) * INIT_JITTER_PX;
+            this.positionsY[i] += Math.cos(i * 78.233 + 1) * INIT_JITTER_PX;
         }
     }
 
@@ -716,10 +406,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
 
     step() {
         if (this.settled) return;
-        let maxMove = 0;
-        maxMove = Math.max(maxMove, this.majorizeCenters());
-        maxMove = Math.max(maxMove, this.majorizeLocals());
-        this.composePositions();
+        let maxMove = this.majorize();
         this.temperature *= COOLING;
         this.iteration++;
         if (maxMove < CONVERGENCE_EPS || this.iteration >= MAX_ITERATIONS) {
@@ -727,52 +414,17 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    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() {
+    // One SMACOF (Guttman transform) iteration over the real edges, moving every node toward its target distances.
+    majorize() {
         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];
+        for (let e of this.solveEdges) {
+            let ax = this.positionsX[e.a];
+            let ay = this.positionsY[e.a];
+            let bx = this.positionsX[e.b];
+            let by = this.positionsY[e.b];
             let dx = bx - ax;
             let dy = by - ay;
             let d = Math.sqrt(dx * dx + dy * dy) || 0.0001;
@@ -787,40 +439,15 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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;
+            let moveX = (numX[i] / denom[i] - this.positionsX[i]) * this.temperature;
+            let moveY = (numY[i] / denom[i] - this.positionsY[i]) * this.temperature;
+            this.positionsX[i] += moveX;
+            this.positionsY[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;
@@ -837,36 +464,8 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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 };
+    isSelected(i: number) {
+        return this.selectedId !== undefined && this.nodes[i].id === this.selectedId;
     }
 
     draw() {
@@ -932,113 +531,30 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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.
+        this.drawEdges(ctx, toScreenX, toScreenY);
         if (showLatenciesParam.value) {
-            this.drawLineLatencies(ctx, toScreenX, toScreenY, centroids);
+            this.drawLineLatencies(ctx, toScreenX, toScreenY);
         }
-        this.drawNodes(ctx, toScreenX, toScreenY, centroids);
-        this.drawInterLabels(ctx, toScreenX, toScreenY, centroids);
-        this.drawClusterLabels(ctx, toScreenX, toScreenY, centroids);
-        this.drawHover(ctx, toScreenX, toScreenY, centroids);
+        this.drawNodes(ctx, toScreenX, toScreenY);
+        this.drawHover(ctx, toScreenX, toScreenY);
     }
 
-    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)})`;
+    drawEdges(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number) {
+        for (let edge of this.renderEdges) {
+            ctx.lineWidth = this.lineWidthFor(edge.a, edge.b);
+            ctx.strokeStyle = `hsla(${NODE_HUE}, 70%, 62%, ${this.opacityFor(edge.latency, this.renderMin, this.renderMax)})`;
             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.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();
         }
     }
 
-    drawInterLabels(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
-        ctx.font = "11px sans-serif";
+    // Always-on latency labels on the drawn connections (toggleable), with the connection's traffic below.
+    drawLineLatencies(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number) {
         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;
 
@@ -1065,31 +581,25 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    drawNodes(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
+    drawNodes(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number) {
         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 x = toScreenX(this.positionsX[i]);
+            let y = toScreenY(this.positionsY[i]);
             let radius = this.nodeRadius(i);
-            ctx.fillStyle = i === this.hoverNode ? "hsl(40, 90%, 60%)" : `hsl(${this.clusterHue(this.clusterOf[i])}, 65%, 55%)`;
+            let highlighted = i === this.hoverNode || this.isSelected(i);
+            ctx.fillStyle = highlighted ? HIGHLIGHT_COLOR : `hsl(${NODE_HUE}, 60%, 52%)`;
             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);
+            if (lines && lines.length) {
+                this.drawStackedLabel(ctx, lines, x, y - radius - 8);
                 continue;
             }
-            // Crowded (or unlabeled): just the short title, above the dot.
-            let short = lines && lines.length ? lines[0].text : this.nodeShort(this.nodes[i]);
+            let short = this.nodeShort(this.nodes[i]);
             ctx.font = "bold 11px sans-serif";
             ctx.lineWidth = 3;
             ctx.strokeStyle = "hsl(0, 0%, 6%)";
@@ -1099,11 +609,10 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    // 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;
+    // Stack the label ABOVE the node: the block's bottom line sits at bottomY, the rest rising above it.
+    drawStackedLabel(ctx: CanvasRenderingContext2D, lines: LatencyGraphLabelLine[], x: number, bottomY: number) {
         for (let [li, line] of lines.entries()) {
-            let ly = baseY + li * 13;
+            let ly = bottomY - (lines.length - 1 - li) * LABEL_LINE_HEIGHT;
             ctx.font = li === 0 ? "bold 11px sans-serif" : "10px sans-serif";
             ctx.lineWidth = 3;
             ctx.strokeStyle = "hsl(0, 0%, 6%)";
@@ -1113,77 +622,13 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    // 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) {
+    // Hovering a node reveals ALL of its measured connections — drawn as highlighted lines with latency labels.
+    drawHover(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number) {
         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);
+        let connections = (this.neighbors[hover] || []).map(nb => nb.edge);
 
+        // Just highlight the hovered node's connections — their latency/traffic labels are already drawn all the time.
         ctx.lineWidth = 1.5;
         for (let edge of connections) {
             ctx.strokeStyle = "hsla(40, 90%, 60%, 0.6)";
@@ -1192,24 +637,12 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             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]));
+            ctx.textBaseline = "middle";
+            this.drawStackedLabel(ctx, hoverLines, toScreenX(this.positionsX[hover]), toScreenY(this.positionsY[hover]) - this.nodeRadius(hover) - 8);
         }
         this.drawHoverCard(ctx);
     }
@@ -1281,6 +714,23 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         this.lastPointerY = e.clientY;
     };
 
+    // Index of the node closest to a screen point (undefined only when there are no nodes).
+    nearestNodeTo(mx: number, my: number) {
+        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;
+            }
+        }
+        return best;
+    }
+
     onMouseMove = (e: MouseEvent) => {
         if (this.isPanning) {
             this.panX += e.clientX - this.lastPointerX;
@@ -1298,44 +748,19 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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;
+        // Always hover whichever node the cursor is closest to, so moving anywhere explores the graph.
+        this.hoverNode = this.nearestNodeTo(mx, my);
         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;
-    }
+    onClick = (e: MouseEvent) => {
+        let canvas = this.canvas;
+        if (!canvas || !this.onSelectNode) return;
+        let rect = canvas.getBoundingClientRect();
+        let nearest = this.nearestNodeTo(e.clientX - rect.left, e.clientY - rect.top);
+        if (nearest === undefined) return;
+        this.onSelectNode(this.nodes[nearest].id);
+    };
 
     onMouseLeave = () => {
         this.hoverNode = undefined;
@@ -1361,6 +786,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             this.canvas.removeEventListener("wheel", this.onWheel);
             this.canvas.removeEventListener("mousedown", this.onMouseDown);
             this.canvas.removeEventListener("mouseleave", this.onMouseLeave);
+            this.canvas.removeEventListener("click", this.onClick);
             window.removeEventListener("mousemove", this.onMouseMove);
             window.removeEventListener("mouseup", this.onMouseUp);
         }
@@ -1369,6 +795,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             elem.addEventListener("wheel", this.onWheel, { passive: false });
             elem.addEventListener("mousedown", this.onMouseDown);
             elem.addEventListener("mouseleave", this.onMouseLeave);
+            elem.addEventListener("click", this.onClick);
             window.addEventListener("mousemove", this.onMouseMove);
             window.addEventListener("mouseup", this.onMouseUp);
             this.scheduleFrame();
@@ -1377,7 +804,8 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
 
     render() {
         this.formatWeight = this.props.formatWeight;
-        this.clusterSummary = this.props.clusterSummary;
+        this.selectedId = this.props.selectedId;
+        this.onSelectNode = this.props.onSelectNode;
         // 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;
@@ -1397,13 +825,10 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             // 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).
+        } else if (latencyExponentParam.value !== this.builtLatencyExponent) {
+            this.computeSolveEdges();
             this.applyLayout();
-        } else if (Math.max(1, Math.floor(intraConnectionsParam.value)) !== this.builtIntraConnections) {
+        } else if (Math.max(1, Math.floor(connectionsParam.value)) !== this.builtConnections) {
             this.computeRenderEdges();
         }
         this.scheduleFrame();
@@ -1411,7 +836,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         return <div className={css.relative.fillBoth.overflowHidden}>
             <canvas
                 ref={elem => this.mountCanvas(elem ?? undefined)}
-                className={css.absolute.pos(0, 0).fillBoth}
+                className={css.absolute.pos(0, 0).fillBoth.cursor("pointer")}
             />
             <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
@@ -1421,21 +846,16 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
                     <span>{configOpenParam.value ? "▾" : "▸"}</span>
                     <span>Configuration</span>
                     <span className={css.marginAuto.colorhsl(0, 0, 60).fontWeight("normal")}>
-                        {this.nodes.length} nodes · {this.clusterCount} clusters
+                        {this.nodes.length} nodes
                     </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="Connections per node" url={connectionsParam} integer />
+                    <InputLabelURL label="Latency exponent" url={latencyExponentParam} 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
+                        {this.nodes.length} nodes · {this.renderEdges.length} lines
                     </div>
                     <Button onClick={() => { this.userAdjustedView = false; this.applyLayout(); }}>
                         Reheat Layout