querysub 0.519.0 → 0.521.0

package/src/library-components/LatencyGraph.tsx

@@ -14,31 +14,25 @@ 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;
+    // 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_CONNECTIONS = 3;
-const DEFAULT_MIN_CLUSTER_SIZE = 2;
-const DEFAULT_CLUSTER_FACTOR = 2;
-const DEFAULT_INTER_EXPONENT = 1.5;
+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 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_LATENCY_EXPONENT = 1;
+// 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", true);
+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);
 // Pixels per degree of latitude/longitude in geographic mode (equirectangular projection).
 const GEO_SCALE = 6;
 
-// One continuous distance mapping for everything (intra and inter): px = MIN + SCALE * (latency / REF) ^ exponent.
-// A single scale is what makes the exponent behave intuitively — the ratio between two distances is just the ratio of
-// their latencies raised to the exponent (so exponent 0.5 turns a 10x latency gap into a ~3x distance gap).
-const LAYOUT_MIN_PX = 45;
-const LAYOUT_SCALE_PX = 320;
-const LAYOUT_REF_MS = 50;
-
 // Stress majorization (SMACOF): each iteration is a Guttman transform that never increases stress.
 const COOLING = 0.996;
 const CONVERGENCE_EPS = 0.02;
@@ -47,16 +41,21 @@ 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;
+
 const MIN_OPACITY = 0.05;
-const HOVER_EXTRA_OPACITY = 0.4;
 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 HOVER_PAD = 6;
-const HULL_PADDING = 26;
+const LABEL_LINE_HEIGHT = 13;
 const ZOOM_STEP = 1.1;
 const MIN_SCALE = 0.05;
 const MAX_SCALE = 12;
@@ -64,11 +63,14 @@ const MAX_SCALE = 12;
 // 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;
+// Cursor must be within this many screen pixels of a node to hover/click it.
+const HOVER_HIT_PX = 60;
+const CLICK_HIT_PX = 40;
 
 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[] = [];
@@ -76,45 +78,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;
     // Cached from props in render() so draw() (a rAF callback, not synced) never reads this.props.
     formatWeight: ((weight: number) => string) | undefined = undefined;
+    selectedId: string | undefined = undefined;
+    onSelectNode: ((id: string) => void) | undefined = undefined;
     builtSig = "";
     builtWeightSig = 0;
     builtGeo = false;
     builtConnections = 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[] = [];
+    builtLatencyExponent = 0;
+
+    solveEdges: SolveEdge[] = [];
     renderEdges: Edge[] = [];
-    renderEdgeSet = new Set<Edge>();
     neighbors: { other: number; edge: Edge; }[][] = [];
-    hoverExtras: Edge[] = [];
-    interPairMap = new Map<number, ClusterPair>();
-    renderInterPairs: ClusterPair[] = [];
-    interMin = 0;
-    interMax = 1;
     renderMin = 0;
     renderMax = 1;
 
-    // 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);
 
@@ -148,21 +132,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) {
@@ -185,13 +165,18 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    // Combine both directions of each pair into a single undirected edge (mean latency), and build the full matrix.
-    ingestLinks() {
-        let n = this.nodes.length;
+    nodeIndex() {
         let index = new Map<string, number>();
         for (let [i, node] of this.nodes.entries()) {
             index.set(node.id, i);
         }
+        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 = 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);
@@ -214,8 +199,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;
@@ -226,161 +214,21 @@ 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();
-    }
-
-    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);
+    // 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;
     }
 
-    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;
-        this.interPairs = stats.map(s => {
-            let target = this.restPx(s.median);
-            return { p: s.p, q: s.q, min: s.min, median: s.median, max: s.max, 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) };
         });
-        this.interPairMap = new Map();
-        for (let pair of this.interPairs) {
-            this.interPairMap.set(pair.p * k + pair.q, pair);
-        }
-
-        this.intraSolveEdges = [];
-        for (let e of this.edges) {
-            if (this.clusterOf[e.a] !== this.clusterOf[e.b]) continue;
-            let target = this.restPx(e.latency);
-            this.intraSolveEdges.push({ a: e.a, b: e.b, target, weight: 1 / (target * target) });
-        }
     }
 
     computeRenderEdges() {
@@ -395,85 +243,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;
-    }
-
-    // While hovering, the node reveals up to 2x its connections; the extra tier (ranks N..2N) is drawn faintly.
-    computeHoverExtras() {
-        if (this.hoverNode === undefined) return [];
-        let candidates = this.nodeCandidates(this.hoverNode);
-        let extras: Edge[] = [];
-        for (let j = this.builtConnections; j < Math.min(this.builtConnections * 2, candidates.length); j++) {
-            if (!this.renderEdgeSet.has(candidates[j].edge)) extras.push(candidates[j].edge);
-        }
-        return extras;
-    }
-
-    // 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);
-            for (let j = 0; j < Math.min(this.builtConnections, 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;
-    }
-
-    restPx(latency: number) {
-        let l = Number.isFinite(latency) ? Math.max(0, latency) : 0;
-        let px = LAYOUT_MIN_PX + LAYOUT_SCALE_PX * Math.pow(l / LAYOUT_REF_MS, interExponentParam.value);
-        return Number.isFinite(px) ? px : LAYOUT_MIN_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) {
@@ -488,7 +267,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             this.scheduleFrame();
             return;
         }
-        this.hierarchicalInit();
+        this.mdsInit();
         this.temperature = 1;
         this.iteration = 0;
         this.settled = false;
@@ -505,40 +284,15 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         this.settled = true;
     }
 
-    // Cluster centers placed by inter-cluster MDS; each cluster's members placed by their own local MDS.
-    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;
-        let centers = this.mds(k, (p, q) => {
-            let d = this.restPx(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;
-
-        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 local = this.mds(members.length, (a, b) => {
-                let d = this.restPx(this.latencyMatrix[members[a] * n + members[b]]);
-                return d * d;
-            });
-            for (let [mi, node] of members.entries()) {
-                this.localX[node] = local.x[mi];
-                this.localY[node] = local.y[mi];
-            }
-        }
-        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;
     }
 
     // Classical MDS on an m-point set given a squared-target-distance function; top-2 eigenvectors.
@@ -646,10 +400,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) {
@@ -657,52 +408,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;
@@ -717,40 +433,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;
@@ -767,36 +458,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() {
@@ -847,7 +510,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             }
             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);
+            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));
@@ -862,100 +525,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.computeRenderInterPairs(centroids);
-        this.hoverExtras = this.computeHoverExtras();
-
-        // 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);
-        this.drawInterLabels(ctx, toScreenX, toScreenY, centroids);
-        this.drawClusterLabels(ctx, toScreenX, toScreenY, centroids);
-        this.drawHover(ctx, toScreenX, toScreenY, centroids);
+        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) {
-        ctx.lineWidth = 2;
-        for (let pair of this.renderInterPairs) {
-            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 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, midY - 8, textWidth + 6, 16);
-            ctx.fillStyle = "hsl(0, 0%, 82%)";
-            ctx.fillText(label, midX, midY);
-        }
-    }
-
-    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);
-        }
-        for (let edge of this.hoverExtras) {
-            this.strokeNodeConnection(ctx, toScreenX, toScreenY, centroids, edge, HOVER_EXTRA_OPACITY);
-        }
-    }
-
-    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;
 
@@ -989,24 +582,15 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             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();
 
             let lines = this.nodes[i].labelLines;
             if (lines && lines.length) {
-                // Stack the lines above the node: the first line highest, the last just above the dot.
-                let baseY = y - radius - 8;
-                for (let [li, line] of lines.entries()) {
-                    let ly = baseY - (lines.length - 1 - 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);
-                }
+                this.drawStackedLabel(ctx, lines, x, y - radius - 8);
                 continue;
             }
             let short = this.nodeShort(this.nodes[i]);
@@ -1019,59 +603,37 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    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);
-        for (let i = 0; i < this.nodes.length; i++) {
-            let c = this.clusterOf[i];
-            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 node = this.nodes[rep[c]];
-            let name = node.label || node.id;
-            let label = `${name} (${centroids.count[c]})`;
-            let x = toScreenX(centroids.cx[c]);
-            let hullTop = toScreenY(centroids.cy[c]) - centroids.radius[c] * this.viewScale;
-            let hasStats = centroids.count[c] >= 2;
-            let nameY = hullTop - (hasStats ? 20 : 5);
-            ctx.font = "bold 12px sans-serif";
+    // 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 = 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%)";
-            ctx.strokeText(label, x, nameY);
-            ctx.fillStyle = `hsl(${this.clusterHue(c)}, 70%, 70%)`;
-            ctx.fillText(label, x, nameY);
-
-            if (!hasStats) continue;
-            let stats = `${formatTime(this.clusterIntraMin[c])} · ${formatTime(this.clusterIntraMedian[c])} · ${formatTime(this.clusterIntraMax[c])}`;
-            ctx.font = "11px sans-serif";
-            let statsWidth = ctx.measureText(stats).width;
-            let statsY = hullTop - 5;
-            ctx.fillStyle = "hsla(0, 0%, 0%, 0.6)";
-            ctx.fillRect(x - statsWidth / 2 - 3, statsY - 8, statsWidth + 6, 16);
-            ctx.fillStyle = `hsl(${this.clusterHue(c)}, 40%, 78%)`;
-            ctx.fillText(stats, x, statsY);
+            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);
         }
     }
 
-    // Hovering only labels the node's already-drawn connections (its base tier plus the faint extra tier).
-    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 connections = (this.neighbors[hover] || []).map(nb => nb.edge);
+
+        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";
-        let incident = this.renderEdges.filter(edge => edge.a === this.hoverNode || edge.b === this.hoverNode);
-        for (let edge of [...incident, ...this.hoverExtras]) {
-            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;
+        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);
@@ -1081,6 +643,13 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             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";
+            ctx.textBaseline = "middle";
+            this.drawStackedLabel(ctx, hoverLines, toScreenX(this.positionsX[hover]), toScreenY(this.positionsY[hover]) - this.nodeRadius(hover) - 8);
+        }
         this.drawHoverCard(ctx);
     }
 
@@ -1151,6 +720,23 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         this.lastPointerY = e.clientY;
     };
 
+    // Nearest node to a screen point, with its distance in pixels.
+    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 = Math.sqrt((sx - mx) ** 2 + (sy - my) ** 2);
+            if (dist < bestDist) {
+                bestDist = dist;
+                best = i;
+            }
+        }
+        return { node: best, dist: bestDist };
+    }
+
     onMouseMove = (e: MouseEvent) => {
         if (this.isPanning) {
             this.panX += e.clientX - this.lastPointerX;
@@ -1168,23 +754,18 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         let my = e.clientY - rect.top;
         this.mouseX = mx;
         this.mouseY = my;
-        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;
-            let hitDist = (this.nodeRadius(i) + HOVER_PAD) ** 2;
-            if (dist <= hitDist && dist < bestDist) {
-                bestDist = dist;
-                best = i;
-            }
-        }
-        let prev = this.hoverNode;
-        this.hoverNode = best;
-        // Redraw while a node is hovered (the info card tracks the cursor) or when the hovered node changes.
-        if (best !== undefined || prev !== undefined) this.scheduleFrame();
+        let nearest = this.nearestNodeTo(mx, my);
+        this.hoverNode = nearest.dist <= HOVER_HIT_PX ? nearest.node : undefined;
+        this.scheduleFrame();
+    };
+
+    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.node === undefined || nearest.dist > CLICK_HIT_PX) return;
+        this.onSelectNode(this.nodes[nearest.node].id);
     };
 
     onMouseLeave = () => {
@@ -1211,6 +792,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);
         }
@@ -1219,6 +801,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();
@@ -1227,6 +810,8 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
 
     render() {
         this.formatWeight = this.props.formatWeight;
+        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;
@@ -1246,8 +831,8 @@ 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();
+        } else if (latencyExponentParam.value !== this.builtLatencyExponent) {
+            this.computeSolveEdges();
             this.applyLayout();
         } else if (Math.max(1, Math.floor(connectionsParam.value)) !== this.builtConnections) {
             this.computeRenderEdges();
@@ -1260,21 +845,31 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
                 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)}>
-                <InputLabelURL label="Connections" url={connectionsParam} integer />
-                <InputLabelURL label="Cluster factor" url={clusterFactorParam} number />
-                <InputLabelURL label="Cluster distance exponent" url={interExponentParam} number />
-                <InputLabelURL label="Min cluster size" url={minClusterSizeParam} integer />
-                <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
+                    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
+                    </span>
                 </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>
+                {configOpenParam.value && <>
+                    <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.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>;
     }