querysub 0.519.0 → 0.520.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.519.0",
+  "version": "0.520.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",

package/src/-f-node-discovery/TrafficTracking.ts

@@ -25,6 +25,7 @@ export type NodeDataTraffic = { sent: number; received: number; };
 export type TrafficStats = {
     functionsExecuted: number;
     pathValuesSent: number;
+    pathValuesReceived: number;
     querysubCalls: number;
     // Bytes to/from each known network node, plus one aggregate for everything outside the node list.
     perNode: { [nodeId: string]: NodeDataTraffic };
@@ -41,6 +42,7 @@ function oldestBucket() {
 // bucket => count
 let functionsExecuted = new Map<number, number>();
 let pathValuesSent = new Map<number, number>();
+let pathValuesReceived = new Map<number, number>();
 let querysubCalls = new Map<number, number>();
 // raw connection nodeId => (bucket => bytes)
 let bytesSent = new Map<string, Map<number, number>>();
@@ -66,6 +68,10 @@ export function recordPathValuesSent(count: number) {
     if (count <= 0) return;
     addSimple(pathValuesSent, count);
 }
+export function recordPathValuesReceived(count: number) {
+    if (count <= 0) return;
+    addSimple(pathValuesReceived, count);
+}
 export function recordQuerysubCall() {
     addSimple(querysubCalls, 1);
 }
@@ -131,6 +137,7 @@ export function getTrafficStats(): TrafficStats {
     return {
         functionsExecuted: sumRecent(functionsExecuted),
         pathValuesSent: sumRecent(pathValuesSent),
+        pathValuesReceived: sumRecent(pathValuesReceived),
         querysubCalls: sumRecent(querysubCalls),
         perNode: data.perNode,
         outside: data.outside,

package/src/0-path-value-core/PathValueController.ts

@@ -12,7 +12,7 @@ import { debugNodeId, debugNodeThread } from "../-c-identity/IdentityController"
 import { getSlowdown, isDiskAudit, getDomain } from "../config";
 import { decodeNodeId } from "sliftutils/misc/https/certs";
 import { areNodeIdsEqual, isOwnNodeId } from "../-f-node-discovery/NodeDiscovery";
-import { recordPathValuesSent } from "../-f-node-discovery/TrafficTracking";
+import { recordPathValuesSent, recordPathValuesReceived } from "../-f-node-discovery/TrafficTracking";
 import { getNodeIdIP } from "socket-function/src/nodeCache";
 import { authorityLookup } from "./AuthorityLookup";
 import { timeoutToError } from "../errors";
@@ -148,6 +148,7 @@ export class PathValueControllerBase {
         if (valueBuffers) {
             values = await pathValueSerializer.deserialize(valueBuffers);
             ActionsHistory.OnRead(values);
+            recordPathValuesReceived(values.length);
         }
 
         if (initialCreation) {

package/src/diagnostics/misc-pages/RoutingTablePage.tsx

@@ -160,13 +160,10 @@ function nodeLabelLines(config: {
     let thread = (parts?.threadId || "?").slice(0, ID_CHARS);
     let machine = (parts?.machineId || nodeId).slice(0, ID_CHARS);
     let lines: LatencyGraphLabelLine[] = [{ text: `${thread}:${parts?.port ?? "?"}` }];
-    // The last segment of the entry-point path is a good human name, and more useful than the machine id.
+    // The last segment of the entry-point path is a good human name; shown on one line with the server (machine) id.
     let entryPoint = info?.entryPoint || runner?.entryPoint;
     let name = entryPoint ? entryPoint.split(/[\\/]/).filter(Boolean).at(-1) : undefined;
-    if (name) {
-        lines.push({ text: name });
-    }
-    lines.push({ text: machine });
+    lines.push({ text: name ? `${name}  ${machine}` : machine });
     // Total data this node sent / received, and the percent of it that went outside our known node list.
     if (traffic) {
         let totals = nodeTotalTraffic(traffic);
@@ -176,26 +173,28 @@ function nodeLabelLines(config: {
             lines.push({ text: `↑${formatNumber(totals.sent)}B ↓${formatNumber(totals.received)}B ${outsidePct}%⊘` });
         }
     }
+    // All function-runner info on one purple line: networks, shard ranges, calls, private.
     if (runner) {
-        // Network names are human-readable, so we show them in full.
-        for (let network of runner.networks) {
-            lines.push({ text: network, color: FUNCTION_COLOR });
-        }
+        let fnParts: string[] = [];
+        if (runner.networks.length) fnParts.push(runner.networks.join(" "));
         for (let shard of runner.shards) {
-            lines.push({ text: `fn ${shard.shardRange.startFraction.toFixed(3)}-${shard.shardRange.endFraction.toFixed(3)}`, color: FUNCTION_COLOR });
-        }
-        lines.push({ text: `${formatNumber(traffic?.functionsExecuted ?? 0)} calls`, color: FUNCTION_COLOR });
-        if (!runner.isPublic) {
-            lines.push({ text: "PRIVATE" });
+            fnParts.push(`fn ${shard.shardRange.startFraction.toFixed(3)}-${shard.shardRange.endFraction.toFixed(3)}`);
         }
+        fnParts.push(`${formatNumber(traffic?.functionsExecuted ?? 0)} calls`);
+        if (!runner.isPublic) fnParts.push("PRIVATE");
+        lines.push({ text: fnParts.join("  "), color: FUNCTION_COLOR });
     }
-    // routeStart/routeEnd of -1 means "no path-value sharding", so only show the range when it's real.
+    // All path-value info on one blue line: shard range (only if real) and values sent.
     let spec = info?.spec;
+    let pvParts: string[] = [];
     if (spec && spec.routeStart >= 0 && spec.routeEnd >= 0) {
-        lines.push({ text: `pv ${spec.routeStart.toFixed(3)}-${spec.routeEnd.toFixed(3)}`, color: PATHVALUE_COLOR });
+        pvParts.push(`pv ${spec.routeStart.toFixed(3)}-${spec.routeEnd.toFixed(3)}`);
     }
-    if (traffic?.pathValuesSent) {
-        lines.push({ text: `${formatNumber(traffic.pathValuesSent)} sent`, color: PATHVALUE_COLOR });
+    if (traffic && (traffic.pathValuesSent || traffic.pathValuesReceived)) {
+        pvParts.push(`↑${formatNumber(traffic.pathValuesSent)} ↓${formatNumber(traffic.pathValuesReceived)} values`);
+    }
+    if (pvParts.length) {
+        lines.push({ text: pvParts.join("  "), color: PATHVALUE_COLOR });
     }
     // Querysub activity: how many function calls were submitted to this node's QuerysubController.
     if (traffic?.querysubCalls) {
@@ -267,10 +266,37 @@ class LatencyGraphSection extends qreact.Component<{ nodeIds: string[]; infos: N
             }
         }
 
+        // Per-cluster summary: sum the same per-node metrics across the cluster's members.
+        let clusterSummary = (memberIds: string[]): LatencyGraphLabelLine[] => {
+            let sent = 0;
+            let received = 0;
+            let calls = 0;
+            let addCalls = 0;
+            let dataSent = 0;
+            let dataReceived = 0;
+            for (let id of memberIds) {
+                let traffic = trafficMaps.get(id);
+                if (!traffic) continue;
+                sent += traffic.pathValuesSent;
+                received += traffic.pathValuesReceived;
+                calls += traffic.functionsExecuted;
+                addCalls += traffic.querysubCalls;
+                let totals = nodeTotalTraffic(traffic);
+                dataSent += totals.sent;
+                dataReceived += totals.received;
+            }
+            let summary: LatencyGraphLabelLine[] = [];
+            summary.push({ text: `↑${formatNumber(dataSent)}B ↓${formatNumber(dataReceived)}B` });
+            summary.push({ text: `↑${formatNumber(sent)} ↓${formatNumber(received)} values`, color: PATHVALUE_COLOR });
+            summary.push({ text: `${formatNumber(calls)} calls`, color: FUNCTION_COLOR });
+            summary.push({ text: `${formatNumber(addCalls)} addCalls`, color: QUERYSUB_COLOR });
+            return summary;
+        };
+
         return <div className={css.vbox(8).fillWidth}>
             <h2 className={css.margin(0)}>Latency Graph ({respondedSet.size}/{nodeIds.length} nodes reported)</h2>
             <div className={css.relative.fillWidth.height(LATENCY_GRAPH_HEIGHT_PX).bord2(0, 0, 85)}>
-                <LatencyGraph nodes={nodes} links={links} formatWeight={weight => formatNumber(weight) + "B"} />
+                <LatencyGraph nodes={nodes} links={links} formatWeight={weight => formatNumber(weight) + "B"} clusterSummary={clusterSummary} />
             </div>
         </div>;
     }

package/src/library-components/LatencyGraph.tsx

@@ -14,13 +14,17 @@ 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[];
 };
 
-const DEFAULT_CONNECTIONS = 3;
+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 connectionsParam = new URLParam("lgConnections", DEFAULT_CONNECTIONS);
+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);
@@ -28,16 +32,27 @@ const interExponentParam = new URLParam("lgInterExponent", DEFAULT_INTER_EXPONEN
 // Relative (per-node) so a mutually-isolated close pair clusters even if it's far from everything else.
 const clusterFactorParam = new URLParam("lgClusterFactor", DEFAULT_CLUSTER_FACTOR);
 const geoParam = new URLParam("lgGeo", false);
-const showLatenciesParam = new URLParam("lgShowLatencies", 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);
+// 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;
 
-// 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;
+// 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;
@@ -48,14 +63,12 @@ const MAX_POWER_ITERS = 200;
 const POWER_EPS = 1e-9;
 
 const MIN_OPACITY = 0.05;
-const HOVER_EXTRA_OPACITY = 0.4;
 const NODE_RADIUS = 6;
 // Traffic-driven sizing (normalized to the busiest node/pair). Circles grow with node weight; lines with pair weight.
 const NODE_WEIGHT_MULT = 2.5;
 const LINE_BASE_WIDTH = 1.5;
 const LINE_MIN_WIDTH = 1;
 const LINE_MAX_WIDTH = 7;
-const HOVER_PAD = 6;
 const HULL_PADDING = 26;
 const ZOOM_STEP = 1.1;
 const MIN_SCALE = 0.05;
@@ -64,6 +77,8 @@ 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;
 
 type Edge = { a: number; b: number; latency: number; };
 type SolveEdge = { a: number; b: number; target: number; weight: number; };
@@ -80,12 +95,18 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
     maxNodeWeight = 0;
     pairWeight = new Map<number, number>();
     maxPairWeight = 0;
+    // Summed node-pair traffic between each cluster pair, for the inter-cluster line widths and labels.
+    clusterPairWeight = new Map<number, number>();
+    maxClusterPairWeight = 0;
     // Cached from props in render() so draw() (a rAF callback, not synced) never reads this.props.
     formatWeight: ((weight: number) => string) | undefined = undefined;
+    clusterSummary: ((memberIds: string[]) => LatencyGraphLabelLine[]) | undefined = undefined;
+    // Latest cluster centroids/radii from draw(), for the pointer-handler hull test.
+    hoverCentroids: Centroids | undefined = undefined;
     builtSig = "";
     builtWeightSig = 0;
     builtGeo = false;
-    builtConnections = 0;
+    builtIntraConnections = 0;
     builtMinClusterSize = 0;
     builtClusterFactor = 0;
     builtInterExponent = 0;
@@ -102,7 +123,6 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
     renderEdges: Edge[] = [];
     renderEdgeSet = new Set<Edge>();
     neighbors: { other: number; edge: Edge; }[][] = [];
-    hoverExtras: Edge[] = [];
     interPairMap = new Map<number, ClusterPair>();
     renderInterPairs: ClusterPair[] = [];
     interMin = 0;
@@ -110,6 +130,10 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
     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);
@@ -185,6 +209,30 @@ 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);
+        }
+    }
+
+    interLineWidth(p: number, q: number) {
+        if (this.maxClusterPairWeight <= 0) return 2;
+        let w = this.clusterPairWeight.get(Math.min(p, q) * this.clusterCount + Math.max(p, q)) || 0;
+        return LINE_MIN_WIDTH + (w / this.maxClusterPairWeight) * (LINE_MAX_WIDTH - LINE_MIN_WIDTH);
+    }
+
     // Combine both directions of each pair into a single undirected edge (mean latency), and build the full matrix.
     ingestLinks() {
         let n = this.nodes.length;
@@ -366,26 +414,26 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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) };
-        });
+        // 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.restPx(e.latency);
+            let target = this.intraTarget(e.latency, this.clusterIntraMedian[this.clusterOf[e.a]]);
             this.intraSolveEdges.push({ a: e.a, b: e.b, target, weight: 1 / (target * target) });
         }
     }
 
     computeRenderEdges() {
-        let count = Math.max(1, Math.floor(connectionsParam.value));
-        this.builtConnections = count;
+        let count = Math.max(1, Math.floor(intraConnectionsParam.value));
+        this.builtIntraConnections = count;
         let n = this.nodes.length;
         let neighbors: { other: number; edge: Edge; }[][] = Array.from({ length: n }, () => []);
         for (let edge of this.edges) {
@@ -415,17 +463,6 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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) {
@@ -442,7 +479,8 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
                 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 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);
             }
@@ -470,10 +508,28 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         return true;
     }
 
-    restPx(latency: number) {
+    // 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 = LAYOUT_MIN_PX + LAYOUT_SCALE_PX * Math.pow(l / LAYOUT_REF_MS, interExponentParam.value);
-        return Number.isFinite(px) ? px : LAYOUT_MIN_PX;
+        let px = INTRA_MIN_PX + INTRA_UNIT_PX * (l / ref);
+        return Number.isFinite(px) ? px : INTRA_UNIT_PX;
     }
 
     opacityFor(latency: number, min: number, max: number) {
@@ -505,31 +561,45 @@ 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.
+    // Members placed by each cluster's own local MDS first (so we know cluster radii), then cluster centers by
+    // inter-cluster MDS using edge-to-edge (radius-inclusive) targets.
     hierarchicalInit() {
         let n = this.nodes.length;
         let k = this.clusterCount;
-        let centers = this.mds(k, (p, q) => {
-            let d = this.restPx(this.clusterDist[p * k + q]);
-            return d * d;
-        });
-        this.clusterCenterX = centers.x;
-        this.clusterCenterY = centers.y;
+        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.restPx(this.latencyMatrix[members[a] * n + members[b]]);
+                let d = this.intraTarget(this.latencyMatrix[members[a] * n + members[b]], median);
                 return d * d;
             });
+            let radius = 0;
             for (let [mi, node] of members.entries()) {
                 this.localX[node] = local.x[mi];
                 this.localY[node] = local.y[mi];
+                radius = Math.max(radius, Math.sqrt(local.x[mi] * local.x[mi] + local.y[mi] * local.y[mi]));
             }
+            this.clusterRadius[c] = radius + HULL_PADDING;
         }
+
+        // Now that radii are known, fill in the inter-cluster targets (edge-to-edge).
+        for (let pair of this.interPairs) {
+            pair.target = this.interCentroidTarget(pair.p, pair.q, pair.median);
+            pair.weight = 1 / (pair.target * pair.target);
+        }
+        let centers = this.mds(k, (p, q) => {
+            let d = this.interCentroidTarget(p, q, this.clusterDist[p * k + q]);
+            return d * d;
+        });
+        this.clusterCenterX = centers.x;
+        this.clusterCenterY = centers.y;
+
         this.composePositions();
     }
 
@@ -847,7 +917,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));
@@ -863,8 +933,9 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         let toScreenY = (wy: number) => height / 2 + (wy - centroidY) * scale + this.panY;
 
         let centroids = this.clusterCentroids();
+        this.hoverCentroids = centroids;
         this.computeRenderInterPairs(centroids);
-        this.hoverExtras = this.computeHoverExtras();
+        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.
@@ -875,7 +946,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         if (showLatenciesParam.value) {
             this.drawLineLatencies(ctx, toScreenX, toScreenY, centroids);
         }
-        this.drawNodes(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);
@@ -901,8 +972,8 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
     }
 
     drawInterLines(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
-        ctx.lineWidth = 2;
         for (let pair of this.renderInterPairs) {
+            ctx.lineWidth = this.interLineWidth(pair.p, pair.q);
             ctx.strokeStyle = `hsla(0, 0%, 100%, ${this.opacityFor(pair.median, this.interMin, this.interMax)})`;
             ctx.beginPath();
             ctx.moveTo(toScreenX(centroids.cx[pair.p]), toScreenY(centroids.cy[pair.p]));
@@ -918,12 +989,27 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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, midY - 8, textWidth + 6, 16);
+            ctx.fillRect(midX - textWidth / 2 - 3, latencyY - 8, textWidth + 6, 16);
             ctx.fillStyle = "hsl(0, 0%, 82%)";
-            ctx.fillText(label, midX, midY);
+            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);
+            }
         }
     }
 
@@ -932,9 +1018,6 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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) {
@@ -982,34 +1065,31 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         }
     }
 
-    drawNodes(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number) {
+    drawNodes(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
         ctx.textBaseline = "middle";
         ctx.textAlign = "center";
+        let proximityPx = labelProximityParam.value;
+        let screenX = this.nodes.map((_, i) => toScreenX(this.positionsX[i]));
+        let screenY = this.nodes.map((_, i) => toScreenY(this.positionsY[i]));
         for (let i = 0; i < this.nodes.length; i++) {
-            let x = toScreenX(this.positionsX[i]);
-            let y = toScreenY(this.positionsY[i]);
+            let x = screenX[i];
+            let y = screenY[i];
             let radius = this.nodeRadius(i);
             ctx.fillStyle = i === this.hoverNode ? "hsl(40, 90%, 60%)" : `hsl(${this.clusterHue(this.clusterOf[i])}, 65%, 55%)`;
             ctx.beginPath();
             ctx.arc(x, y, radius, 0, Math.PI * 2);
             ctx.fill();
 
+            // The full label only shows when this node is visually isolated (nearest neighbor on screen is far enough
+            // away), or it's hovered; otherwise it collapses to a single title line above the dot to avoid a jumble.
+            let full = i === this.hoverNode || this.nearestScreenDist(i, screenX, screenY) >= proximityPx;
             let lines = this.nodes[i].labelLines;
-            if (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);
-                }
+            if (full && lines && lines.length) {
+                this.drawFullNodeLabel(ctx, lines, x, y);
                 continue;
             }
-            let short = this.nodeShort(this.nodes[i]);
+            // Crowded (or unlabeled): just the short title, above the dot.
+            let short = lines && lines.length ? lines[0].text : this.nodeShort(this.nodes[i]);
             ctx.font = "bold 11px sans-serif";
             ctx.lineWidth = 3;
             ctx.strokeStyle = "hsl(0, 0%, 6%)";
@@ -1019,12 +1099,41 @@ 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;
+        for (let [li, line] of lines.entries()) {
+            let ly = baseY + li * 13;
+            ctx.font = li === 0 ? "bold 11px sans-serif" : "10px sans-serif";
+            ctx.lineWidth = 3;
+            ctx.strokeStyle = "hsl(0, 0%, 6%)";
+            ctx.strokeText(line.text, x, ly);
+            ctx.fillStyle = line.color || (li === 0 ? "hsl(0, 0%, 92%)" : "hsl(0, 0%, 62%)");
+            ctx.fillText(line.text, x, ly);
+        }
+    }
+
+    // Screen-pixel distance from node i to its closest other node (used to decide whether there's room for a full label).
+    nearestScreenDist(i: number, screenX: number[], screenY: number[]) {
+        let best = Infinity;
+        for (let j = 0; j < screenX.length; j++) {
+            if (j === i) continue;
+            let dx = screenX[j] - screenX[i];
+            let dy = screenY[j] - screenY[i];
+            let d = Math.sqrt(dx * dx + dy * dy);
+            if (d < best) best = d;
+        }
+        return best;
+    }
+
     drawClusterLabels(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
         let k = this.clusterCount;
         let rep = new Int32Array(k).fill(-1);
         let repDist = new Float64Array(k).fill(Infinity);
+        let members: string[][] = Array.from({ length: k }, () => []);
         for (let i = 0; i < this.nodes.length; i++) {
             let c = this.clusterOf[i];
+            members[c].push(this.nodes[i].id);
             let dx = this.positionsX[i] - centroids.cx[c];
             let dy = this.positionsY[i] - centroids.cy[c];
             let d = dx * dx + dy * dy;
@@ -1037,41 +1146,56 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         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 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 hasStats = centroids.count[c] >= 2;
-            let nameY = hullTop - (hasStats ? 20 : 5);
-            ctx.font = "bold 12px 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);
+            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 only labels the node's already-drawn connections (its base tier plus the faint extra tier).
+    // Hovering (the nearest node to the cursor) reveals ALL of that node's connections to other nodes in its cluster
+    // — drawn as highlighted lines with latency labels, even the ones not shown by default.
     drawHover(ctx: CanvasRenderingContext2D, toScreenX: (wx: number) => number, toScreenY: (wy: number) => number, centroids: Centroids) {
         if (this.hoverNode === undefined) return;
+        let hover = this.hoverNode;
+        let cluster = this.clusterOf[hover];
+        let connections = this.clusterSize[cluster] >= 2
+            ? this.neighbors[hover].filter(nb => this.clusterOf[nb.other] === cluster).map(nb => nb.edge)
+            : this.renderEdges.filter(edge => edge.a === hover || edge.b === hover);
+
+        ctx.lineWidth = 1.5;
+        for (let edge of connections) {
+            ctx.strokeStyle = "hsla(40, 90%, 60%, 0.6)";
+            ctx.beginPath();
+            ctx.moveTo(toScreenX(this.positionsX[edge.a]), toScreenY(this.positionsY[edge.a]));
+            ctx.lineTo(toScreenX(this.positionsX[edge.b]), toScreenY(this.positionsY[edge.b]));
+            ctx.stroke();
+        }
         ctx.font = "12px sans-serif";
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
-        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 +1205,12 @@ 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";
+            this.drawFullNodeLabel(ctx, hoverLines, toScreenX(this.positionsX[hover]), toScreenY(this.positionsY[hover]));
+        }
         this.drawHoverCard(ctx);
     }
 
@@ -1168,6 +1298,8 @@ 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;
@@ -1175,18 +1307,36 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
             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) {
+            if (dist < bestDist) {
                 bestDist = dist;
                 best = i;
             }
         }
-        let prev = this.hoverNode;
+        // 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;
-        // 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();
+        this.scheduleFrame();
     };
 
+    // Is the cursor inside node i's cluster hull (or, for a lone node, close to the node itself)?
+    cursorInCluster(i: number, mx: number, my: number) {
+        let scale = this.viewScale;
+        let c = this.clusterOf[i];
+        let centroids = this.hoverCentroids;
+        if (this.clusterSize[c] >= 2 && centroids) {
+            let scx = this.viewWidth / 2 + (centroids.cx[c] - this.centroidX) * scale + this.panX;
+            let scy = this.viewHeight / 2 + (centroids.cy[c] - this.centroidY) * scale + this.panY;
+            let r = centroids.radius[c] * scale;
+            return (mx - scx) ** 2 + (my - scy) ** 2 <= r * r;
+        }
+        let sx = this.viewWidth / 2 + (this.positionsX[i] - this.centroidX) * scale + this.panX;
+        let sy = this.viewHeight / 2 + (this.positionsY[i] - this.centroidY) * scale + this.panY;
+        let r = this.nodeRadius(i) + 8;
+        return (mx - sx) ** 2 + (my - sy) ** 2 <= r * r;
+    }
+
     onMouseLeave = () => {
         this.hoverNode = undefined;
         this.scheduleFrame();
@@ -1227,6 +1377,7 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
 
     render() {
         this.formatWeight = this.props.formatWeight;
+        this.clusterSummary = this.props.clusterSummary;
         // Rebuild from scratch whenever the data set changes (e.g. a new node's latencies arrive progressively).
         let sig = `${this.props.nodes.length}:${this.props.links.length}`;
         let weightSig = 0;
@@ -1249,7 +1400,10 @@ export class LatencyGraph extends qreact.Component<LatencyGraphProps> {
         } 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 (Math.max(1, Math.floor(connectionsParam.value)) !== this.builtConnections) {
+        } else if (interSpacingParam.value !== this.builtInterSpacing) {
+            // Only the inter-cluster spacing changed — re-solve the layout (no re-clustering needed).
+            this.applyLayout();
+        } else if (Math.max(1, Math.floor(intraConnectionsParam.value)) !== this.builtIntraConnections) {
             this.computeRenderEdges();
         }
         this.scheduleFrame();
@@ -1260,21 +1414,36 @@ 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 · {this.clusterCount} clusters
+                    </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 in cluster" url={intraConnectionsParam} integer />
+                    <InputLabelURL label="Connections between clusters" url={interConnectionsParam} integer />
+                    <InputLabelURL label="Cluster factor" url={clusterFactorParam} number />
+                    <InputLabelURL label="Cluster distance exponent" url={interExponentParam} number />
+                    <InputLabelURL label="Cluster spacing" url={interSpacingParam} number />
+                    <InputLabelURL label="Min cluster size" url={minClusterSizeParam} integer />
+                    <InputLabelURL label="Label proximity px" url={labelProximityParam} number />
+                    <InputLabelURL label="Show line latencies" url={showLatenciesParam} checkbox />
+                    <InputLabelURL label="Geographic (lat/lon)" url={geoParam} checkbox />
+                    <div className={css.colorhsl(0, 0, 60)}>
+                        {this.nodes.length} nodes · {this.clusterCount} clusters · {this.renderEdges.length} lines
+                    </div>
+                    <Button onClick={() => { this.userAdjustedView = false; this.applyLayout(); }}>
+                        Reheat Layout
+                    </Button>
+                    <Button onClick={() => console.log("LatencyGraph data:\n" + JSON.stringify({ nodes: this.props.nodes, links: this.props.links }, undefined, 2))}>
+                        Log graph data
+                    </Button>
+                </>}
             </div>
         </div>;
     }