querysub 0.616.0 → 0.619.0

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

@@ -14,54 +14,24 @@ import { getSyncedController } from "../../library-components/SyncedController";
 import { assertIsManagementUser } from "../managementPages";
 import { NodeCapabilitiesController } from "../../-g-core-values/NodeCapabilities";
 import { timeoutToUndefinedSilent } from "../../errors";
-import { sort, timeInMinute } from "socket-function/src/misc";
 import type { AuthoritySpec } from "../../0-path-value-core/PathRouter";
-import { getFunctionRunnerIndex, FunctionRunnerNodeInfo } from "../../4-querysub/FunctionRunnerTracking";
-import { formatTime, formatNumber } from "socket-function/src/formatting/format";
-import { LatencyGraph, LatencyGraphNode, LatencyGraphLink, LatencyGraphLabelLine } from "../../library-components/LatencyGraph";
-import { URLParam } from "../../library-components/URLParam";
-import { mainResets } from "../../library-components/urlResetGroups";
-import { FUNCTION_RUNNER_COLOR, PATHVALUE_COLOR } from "../../misc/nodeCategoryColors";
+import { PathValueStatsController, PathValueTotals, PathValueDirection, PathValueSummaryState } from "../../0-path-value-core/PathValueStats";
+import type { SummaryEntry } from "sliftutils/treeSummary";
+import { LatencyGraphSection } from "./LatencyGraphSection";
+import { PathValueServersSection } from "./PathValueServersSection";
+import { FunctionRunnersSection } from "./FunctionRunnersSection";
 
-const ID_CHARS = 8;
+// The page is split into independent section components (latency graph, path-value servers, function runners), each in
+// its own file. This module keeps only what those sections share: the proxy controller (+ its synced wrapper), the
+// node-id helpers, and the small AuthorityRangeBar. The sections import those back from here.
+
+export const ID_CHARS = 8;
 
 const PROBE_TIMEOUT_MS = 5000;
 const RANGE_BAR_WIDTH_PX = 360;
 const RANGE_BAR_HEIGHT_PX = 14;
-const LATENCY_GRAPH_HEIGHT_PX = 720;
-const MACHINE_LATENCY_WIDTH_PX = 235;
-
-// Clicking a machine node in the graph (or a row) sorts that machine's nodes to the top of the table.
-const selectedMachineParam = new URLParam("rtSelectedMachine", "", { reset: [mainResets] });
-const trafficWindowParam = new URLParam<number>("rtTrafficWindow", timeInMinute * 5, { reset: [mainResets] });
 
-// The per-node table columns, in order. `color` tints the function/path-value/querysub columns to match the graph;
-// `perMachine` columns (the IP and machine id) only print on the first row of each machine group.
-const NODE_TABLE_COLUMNS: { key: keyof NodeRow; label: string; width: number; color?: string; perMachine?: boolean; }[] = [
-    { key: "ip", label: "IP", width: 130, perMachine: true },
-    { key: "networks", label: "Networks", width: 180, color: FUNCTION_RUNNER_COLOR, perMachine: true },
-    { key: "machineShort", label: "Machine", width: 96, perMachine: true },
-    { key: "threadPort", label: "Thread:Port", width: 130 },
-    { key: "name", label: "Name", width: 160 },
-    { key: "data", label: "Data", width: 210 },
-    { key: "fn", label: "Function", width: 380, color: FUNCTION_RUNNER_COLOR },
-    { key: "pv", label: "Path Values", width: 250, color: PATHVALUE_COLOR },
-];
-
-type NodeRow = {
-    nodeId: string;
-    machineId: string;
-    ip: string;
-    networks: string;
-    machineShort: string;
-    threadPort: string;
-    name: string;
-    data: string;
-    fn: string;
-    pv: string;
-};
-
-type NodeAuthorityInfo = {
+export type NodeAuthorityInfo = {
     nodeId: string;
     entryPoint?: string;
     spec?: AuthoritySpec;
@@ -109,6 +79,17 @@ class RoutingTablePageControllerBase {
     public async getNodeTrafficRates(nodeId: string, windowSize: number): Promise<TrafficStats | undefined> {
         return timeoutToUndefinedSilent(PROBE_TIMEOUT_MS, TrafficController.nodes[nodeId].getTrafficStats(windowSize));
     }
+    // Cheap per-node call: just the running sent/received path-value totals, so every server row can render without
+    // pulling any path breakdown. The heavy per-path tree only loads when a row is expanded (getNodePathSummary).
+    public async getNodePathTotals(nodeId: string): Promise<PathValueTotals | undefined> {
+        return timeoutToUndefinedSilent(PROBE_TIMEOUT_MS, PathValueStatsController.nodes[nodeId].getTotals());
+    }
+    public async getNodePathSummary(nodeId: string, direction: PathValueDirection, maxCount: number): Promise<SummaryEntry<PathValueSummaryState>[] | undefined> {
+        return timeoutToUndefinedSilent(PROBE_TIMEOUT_MS, PathValueStatsController.nodes[nodeId].getSummary(direction, maxCount));
+    }
+    public async clearNodePathStats(nodeId: string): Promise<void> {
+        await timeoutToUndefinedSilent(PROBE_TIMEOUT_MS, PathValueStatsController.nodes[nodeId].clear());
+    }
 }
 
 export const RoutingTablePageController = SocketFunction.register(
@@ -119,575 +100,36 @@ export const RoutingTablePageController = SocketFunction.register(
         getNodeLatencies: {},
         getNodeTrafficRates: {},
         getNodeIps: {},
+        getNodePathTotals: {},
+        getNodePathSummary: {},
+        clearNodePathStats: {},
     }),
     () => ({
         hooks: [assertIsManagementUser],
     }),
-    {
-        noAutoExpose: true,
-    }
 );
 
-const RoutingTableSynced = getSyncedController(RoutingTablePageController, {
+export const RoutingTableSynced = getSyncedController(RoutingTablePageController, {
     reads: { getAllNodeAuthoritySpecs: ["nodeAuthoritySpecs"] },
     writes: {},
 });
 
-class AuthorityRangeBar extends qreact.Component<{ start: number; end: number }> {
-    render() {
-        let startPct = this.props.start * 100;
-        let widthPct = (this.props.end - this.props.start) * 100;
-        return <div className={css.relative.size(RANGE_BAR_WIDTH_PX, RANGE_BAR_HEIGHT_PX).flexShrink0.hsl(0, 0, 92).bord2(0, 0, 75)}>
-            <div className={css.absolute.top(0).left(`${startPct}%`).size(`${widthPct}%`, "100%").hsl(210, 65, 50)} />
-        </div>;
-    }
-}
-
-class AuthorityNodeRow extends qreact.Component<{ info: NodeAuthorityInfo }> {
-    state = {
-        expanded: false,
-    };
-    render() {
-        let info = this.props.info;
-        let spec = info.spec!;
-        let expanded = this.state.expanded;
-        return <div
-            className={css.button.vbox(6).pad2(10).fillWidth.bord2(0, 0, 85).hsl(0, 0, 99)}
-            onClick={() => this.state.expanded = !expanded}
-        >
-            <div className={css.hbox(10).fillWidth}>
-                <span>{expanded ? "▼" : "▶"}</span>
-                <span className={css.boldStyle}>{info.nodeId}</span>
-                <span>{spec.routeStart.toFixed(4)} - {spec.routeEnd.toFixed(4)}</span>
-                <AuthorityRangeBar start={spec.routeStart} end={spec.routeEnd} />
-                <span className={css.colorhsl(0, 0, 50)}>width {(spec.routeEnd - spec.routeStart).toFixed(4)}</span>
-                {spec.excludeDefault && <span className={css.colorhsl(0, 70, 35)}>(excludes default)</span>}
-                <span className={css.colorhsl(0, 0, 40).ellipsis.flexFillWidth}>{info.entryPoint || "(no entry point)"}</span>
-            </div>
-            {expanded &&
-                <div className={css.vbox(2)}>
-                    <div className={css.boldStyle}>Prefixes ({spec.prefixes.length}):</div>
-                    {spec.prefixes.length === 0 && <div className={css.colorhsl(0, 0, 50)}>(none)</div>}
-                    {spec.prefixes.map(p =>
-                        <div key={p.originalPrefix} className={css.colorhsl(0, 0, 25)}>{p.originalPrefix}</div>
-                    )}
-                </div>
-            }
-        </div>;
-    }
-}
-
-class FunctionRunnersSection extends qreact.Component {
-    render() {
-        let index = getFunctionRunnerIndex();
-        let nodes = index?.nodes || [];
-        return <div className={css.vbox(8).fillWidth}>
-            <h2>Function Runners ({nodes.length})</h2>
-            {nodes.length === 0 && <div className={css.colorhsl(0, 0, 50)}>(no function runners found yet)</div>}
-            {nodes.map(node =>
-                <div className={css.vbox(4).pad2(10).fillWidth.bord2(0, 0, 85).hsl(0, 0, 99)}>
-                    <div className={css.hbox(10).fillWidth}>
-                        <span className={css.boldStyle}>{node.nodeId}</span>
-                        <span className={css.color(FUNCTION_RUNNER_COLOR)}>networks: {node.networks.join(", ")}</span>
-                        {!node.isPublic && <span className={css.colorhsl(0, 70, 35)}>(non-public)</span>}
-                        <span>latency {formatTime(node.averageLatency)}</span>
-                        <span>up for {formatTime(Date.now() - node.startupTime)}</span>
-                        <span className={css.colorhsl(0, 0, 40).ellipsis}>{node.entryPoint}</span>
-                    </div>
-                    {node.shards.map(shard =>
-                        <div className={css.hbox(10).fillWidth}>
-                            <span>{shard.shardRange.startFraction.toFixed(4)} - {shard.shardRange.endFraction.toFixed(4)}</span>
-                            <AuthorityRangeBar start={shard.shardRange.startFraction} end={shard.shardRange.endFraction} />
-                            {shard.secondaryShardRange && <span className={css.colorhsl(0, 0, 50)}>secondary {shard.secondaryShardRange.startFraction.toFixed(4)} - {shard.secondaryShardRange.endFraction.toFixed(4)}</span>}
-                        </div>
-                    )}
-                </div>
-            )}
-        </div>;
-    }
-}
-
-function nodeTotalTraffic(traffic: TrafficStats): { sent: number; received: number; outside: number; } {
-    let outsideSent = traffic.outside?.sent || 0;
-    let outsideReceived = traffic.outside?.received || 0;
-    let sent = outsideSent;
-    let received = outsideReceived;
-    for (let d of Object.values(traffic.perNode || {})) {
-        sent += d?.sent || 0;
-        received += d?.received || 0;
-    }
-    return { sent, received, outside: outsideSent + outsideReceived };
-}
-
-function machineIdOf(nodeId: string): string {
+export function machineIdOf(nodeId: string): string {
     let parts = decodeNodeId(nodeId, getDomain(), "allowMissingThreadId");
     return parts?.machineId || nodeId;
 }
 
-function threadLabel(nodeId: string): string {
+export function threadLabel(nodeId: string): string {
     let parts = decodeNodeId(nodeId, getDomain(), "allowMissingThreadId");
     return `${(parts?.threadId || "?").slice(0, ID_CHARS)}:${parts?.port ?? "?"}`;
 }
 
-// min · median · max of one source node's latencies to a machine's threads (plus a tooltip naming the farthest
-// thread), and the node's total path values sent/received to that machine (summed — the per-thread split isn't interesting).
-function machineLatencyCell(config: {
-    sourceLatencies: { [nodeId: string]: number } | undefined;
-    threads: string[];
-    traffic: TrafficStats | undefined;
-}): { text: string; tooltip: string } {
-    let { sourceLatencies, threads, traffic } = config;
-    if (!sourceLatencies) return { text: "", tooltip: "" };
-    let entries: { thread: string; ms: number }[] = [];
-    for (let thread of threads) {
-        let ms = sourceLatencies[thread];
-        if (Number.isFinite(ms)) entries.push({ thread, ms });
-    }
-    if (!entries.length) return { text: "", tooltip: "" };
-    sort(entries, entry => entry.ms);
-    let farthest = entries[entries.length - 1];
-    let text = `${formatTime(entries[0].ms)} · ${formatTime(entries[Math.floor(entries.length / 2)].ms)} · ${formatTime(farthest.ms)}`;
-    let pvSent = 0;
-    let pvReceived = 0;
-    for (let thread of threads) {
-        let data = traffic?.perNode?.[thread];
-        if (!data) continue;
-        pvSent += data.pathValuesSent || 0;
-        pvReceived += data.pathValuesReceived || 0;
-    }
-    if (pvSent || pvReceived) {
-        text += `  ↑${formatNumber(pvSent)}/s ↓${formatNumber(pvReceived)}/s values`;
-    }
-    return { text, tooltip: `${text}\nfarthest: ${threadLabel(farthest.thread)} (${formatTime(farthest.ms)})` };
-}
-
-// Summed traffic metrics across a set of nodes (a machine's threads).
-function sumTraffic(threads: string[], trafficMaps: Map<string, TrafficStats>) {
-    let dataSent = 0;
-    let dataReceived = 0;
-    let valuesSent = 0;
-    let valuesReceived = 0;
-    let calls = 0;
-    let addCalls = 0;
-    for (let id of threads) {
-        let traffic = trafficMaps.get(id);
-        if (!traffic) continue;
-        let totals = nodeTotalTraffic(traffic);
-        dataSent += totals.sent;
-        dataReceived += totals.received;
-        valuesSent += traffic.pathValuesSent || 0;
-        valuesReceived += traffic.pathValuesReceived || 0;
-        calls += traffic.functionsExecuted || 0;
-        addCalls += traffic.querysubCalls || 0;
-    }
-    return { dataSent, dataReceived, valuesSent, valuesReceived, calls, addCalls };
-}
-
-// A machine's graph label: the IP first (most important), then its function-runner networks, then the same per-piece
-// info as the table, summed across all its threads and colored the same.
-function machineLabelLines(config: {
-    machineId: string;
-    threads: string[];
-    trafficMaps: Map<string, TrafficStats>;
-    ip: string | undefined;
-    networks: string[];
-}): LatencyGraphLabelLine[] {
-    let { machineId, threads, ip, networks } = config;
-    let totals = sumTraffic(threads, config.trafficMaps);
-    let lines: LatencyGraphLabelLine[] = [];
-    if (ip) {
-        lines.push({ text: ip });
-    }
-    if (networks.length) {
-        lines.push({ text: networks.join(" | "), color: FUNCTION_RUNNER_COLOR });
-    }
-    lines.push({ text: `${machineId.slice(0, ID_CHARS)}  ${threads.length} threads` });
-    if (totals.dataSent + totals.dataReceived > 0) {
-        lines.push({ text: `↑${formatNumber(totals.dataSent)}B/s ↓${formatNumber(totals.dataReceived)}B/s` });
-    }
-    if (totals.valuesSent || totals.valuesReceived) {
-        lines.push({ text: `↑${formatNumber(totals.valuesSent)}/s ↓${formatNumber(totals.valuesReceived)}/s values`, color: PATHVALUE_COLOR });
-    }
-    if (totals.calls) {
-        lines.push({ text: `${formatNumber(totals.calls)}/s calls`, color: FUNCTION_RUNNER_COLOR });
-    }
-    if (totals.addCalls) {
-        lines.push({ text: `${formatNumber(totals.addCalls)}/s querysub addCalls`, color: FUNCTION_RUNNER_COLOR });
-    }
-    return lines;
-}
-
-// One table row per thread node: each piece of info that used to live on the graph label becomes its own column.
-function buildNodeRow(config: {
-    nodeId: string;
-    runner: FunctionRunnerNodeInfo | undefined;
-    info: NodeAuthorityInfo | undefined;
-    traffic: TrafficStats | undefined;
-    machineIp: Map<string, string>;
-    machineNetworks: Map<string, string[]>;
-}): NodeRow {
-    let { nodeId, runner, info, traffic, machineIp, machineNetworks } = config;
-    let parts = decodeNodeId(nodeId, getDomain(), "allowMissingThreadId");
-    let thread = (parts?.threadId || "?").slice(0, ID_CHARS);
-    let machineId = parts?.machineId || nodeId;
-    let entryPoint = info?.entryPoint || runner?.entryPoint;
-    let name = entryPoint && entryPoint.split(/[\\/]/).filter(Boolean).at(-1) || "";
-
-    let data = "";
-    if (traffic) {
-        let totals = nodeTotalTraffic(traffic);
-        let sum = totals.sent + totals.received;
-        if (sum > 0) {
-            let outsidePct = Math.round((totals.outside / sum) * 100);
-            data = `↑${formatNumber(totals.sent)}B/s ↓${formatNumber(totals.received)}B/s  ${outsidePct}%⊘`;
-        }
-    }
-
-    let fnParts: string[] = [];
-    if (runner) {
-        if (runner.networks.length) fnParts.push(runner.networks.join(" "));
-        for (let shard of runner.shards) {
-            fnParts.push(`${shard.shardRange.startFraction.toFixed(3)}-${shard.shardRange.endFraction.toFixed(3)}`);
-        }
-        fnParts.push(`${formatNumber(traffic?.functionsExecuted ?? 0)}/s calls`);
-        if (!runner.isPublic) fnParts.push("PRIVATE");
-    }
-    // A slightly different source than function calls, but still function calls, so it lives in the function column
-    if (traffic?.querysubCalls) {
-        fnParts.push(`${formatNumber(traffic.querysubCalls)}/s querysub addCalls`);
-    }
-
-    let pvParts: string[] = [];
-    let spec = info?.spec;
-    if (spec && spec.routeStart >= 0 && spec.routeEnd >= 0) {
-        pvParts.push(`${spec.routeStart.toFixed(3)}-${spec.routeEnd.toFixed(3)}`);
-    }
-    if (traffic && (traffic.pathValuesSent || traffic.pathValuesReceived)) {
-        pvParts.push(`↑${formatNumber(traffic.pathValuesSent)}/s ↓${formatNumber(traffic.pathValuesReceived)}/s values`);
-    }
-
-    return {
-        nodeId,
-        machineId,
-        ip: machineIp.get(machineId) || "",
-        networks: (machineNetworks.get(machineId) || []).join(" | "),
-        machineShort: machineId.slice(0, ID_CHARS),
-        threadPort: `${thread}:${parts?.port ?? "?"}`,
-        name,
-        data,
-        fn: fnParts.join("  "),
-        pv: pvParts.join("  "),
-    };
-}
-
-class NodeInfoTable extends qreact.Component<{
-    rows: NodeRow[];
-    selectedMachine: string;
-    machineColumns: { id: string; label: string }[];
-    nodeMachineLatency: Map<string, { [machineId: string]: { text: string; tooltip: string } }>;
-}> {
+export class AuthorityRangeBar extends qreact.Component<{ start: number; end: number }> {
     render() {
-        let rows = this.props.rows;
-        let selected = this.props.selectedMachine;
-        let machineColumns = this.props.machineColumns;
-        let nodeMachineLatency = this.props.nodeMachineLatency;
-        return <div className={css.vbox(0).fillWidth.overflowAuto.bord2(0, 0, 85)}>
-            <div className={css.hbox(0).hsl(0, 0, 96).colorhsl(0, 0, 20).boldStyle}>
-                {NODE_TABLE_COLUMNS.map(col =>
-                    <div className={css.width(col.width).flexShrink0.pad2(6).ellipsis}>{col.label}</div>
-                )}
-                {machineColumns.map(col =>
-                    <div className={css.width(MACHINE_LATENCY_WIDTH_PX).flexShrink0.pad2(6).ellipsis} title={`latency and path values to ${col.label}`}>→ {col.label}</div>
-                )}
-            </div>
-            {rows.map((row, i) => {
-                let firstOfMachine = i === 0 || rows[i - 1].machineId !== row.machineId;
-                let isSelected = row.machineId === selected;
-                let latencies = nodeMachineLatency.get(row.nodeId) || {};
-                return <div
-                    className={css.hbox(0).button.fillWidth.hsl(0, 0, isSelected ? 92 : 99)
-                        .borderTop(firstOfMachine ? "1px solid hsl(0, 0%, 80%)" : "1px solid hsl(0, 0%, 93%)")}
-                    onClick={() => selectedMachineParam.value = selected === row.machineId ? "" : row.machineId}
-                >
-                    {NODE_TABLE_COLUMNS.map(col => {
-                        // Per-machine columns (IP, machine id) only print on the first row of each group, so it reads clearly.
-                        let text = col.perMachine && !firstOfMachine ? "" : row[col.key];
-                        return <div
-                            className={css.width(col.width).flexShrink0.pad2(6).ellipsis.color(col.color || "hsl(0, 0%, 25%)")}
-                            title={text}
-                        >{text}</div>;
-                    })}
-                    {machineColumns.map(col => {
-                        let cell = latencies[col.id];
-                        return <div
-                            className={css.width(MACHINE_LATENCY_WIDTH_PX).flexShrink0.pad2(6).ellipsis.colorhsl(0, 0, 25)}
-                            title={cell?.tooltip || ""}
-                        >{cell?.text || ""}</div>;
-                    })}
-                </div>;
-            })}
-        </div>;
-    }
-}
-
-// Nodes that never reported their latencies — all we have is their nodeId (and possibly a DNS-resolved machine IP), so this is a much narrower table than NodeInfoTable, still grouped by machine.
-class UnresponsiveNodesTable extends qreact.Component<{ nodeIds: string[]; machineIp: Map<string, string> }> {
-    render() {
-        let rows = this.props.nodeIds.map(nodeId => ({ nodeId, machineId: machineIdOf(nodeId) }));
-        let sep = String.fromCharCode(1);
-        sort(rows, row => `${row.machineId}${sep}${threadLabel(row.nodeId)}`);
-        return <div className={css.vbox(0).fillWidth.overflowAuto.bord2(0, 0, 85)}>
-            <div className={css.hbox(0).hsl(0, 0, 96).colorhsl(0, 0, 20).boldStyle}>
-                <div className={css.width(130).flexShrink0.pad2(6).ellipsis}>IP</div>
-                <div className={css.width(96).flexShrink0.pad2(6).ellipsis}>Machine</div>
-                <div className={css.width(130).flexShrink0.pad2(6).ellipsis}>Thread:Port</div>
-                <div className={css.width(520).flexShrink0.pad2(6).ellipsis}>Node Id</div>
-            </div>
-            {rows.map((row, i) => {
-                let firstOfMachine = i === 0 || rows[i - 1].machineId !== row.machineId;
-                return <div
-                    className={css.hbox(0).fillWidth.hsl(0, 0, 99)
-                        .borderTop(firstOfMachine ? "1px solid hsl(0, 0%, 80%)" : "1px solid hsl(0, 0%, 93%)")}
-                >
-                    <div className={css.width(130).flexShrink0.pad2(6).ellipsis}>{firstOfMachine && this.props.machineIp.get(row.machineId) || ""}</div>
-                    <div className={css.width(96).flexShrink0.pad2(6).ellipsis}>{firstOfMachine && row.machineId.slice(0, ID_CHARS) || ""}</div>
-                    <div className={css.width(130).flexShrink0.pad2(6).ellipsis}>{threadLabel(row.nodeId)}</div>
-                    <div className={css.width(520).flexShrink0.pad2(6).ellipsis.colorhsl(0, 0, 45)} title={row.nodeId}>{row.nodeId}</div>
-                </div>;
-            })}
-        </div>;
-    }
-}
-
-class LatencyGraphSection extends qreact.Component<{ nodeIds: string[]; infos: NodeAuthorityInfo[] }> {
-    render() {
-        let nodeIds = this.props.nodeIds;
-        let synced = RoutingTableSynced(getBrowserUrlNode());
-
-        let index = getFunctionRunnerIndex();
-        let runnerByNode = new Map<string, FunctionRunnerNodeInfo>();
-        for (let node of index?.nodes ?? []) {
-            runnerByNode.set(node.nodeId, node);
-        }
-        let infoByNode = new Map(this.props.infos.map(info => [info.nodeId, info]));
-
-        // One synced call per node for each data source; each resolves independently so the graph fills in progressively.
-        let trafficWindow = trafficWindowParam.value;
-        let latencyMaps = new Map<string, { [nodeId: string]: number }>();
-        let trafficMaps = new Map<string, TrafficStats>();
-        for (let nodeId of nodeIds) {
-            let latencies = synced.getNodeLatencies(nodeId);
-            if (latencies) latencyMaps.set(nodeId, latencies);
-            let traffic = synced.getNodeTrafficRates(nodeId, trafficWindow);
-            if (traffic) trafficMaps.set(nodeId, traffic);
-        }
-        // Only graph nodes that reported their latencies — ones that never respond probably don't exist.
-        let respondedSet = new Set(latencyMaps.keys());
-
-        // Group every thread by its machine; the graph shows one node per machine that has a responding thread.
-        let machineAllThreads = new Map<string, string[]>();
-        let machineRespondedThreads = new Map<string, string[]>();
-        let pushInto = (map: Map<string, string[]>, key: string, value: string) => {
-            let list = map.get(key);
-            if (!list) {
-                list = [];
-                map.set(key, list);
-            }
-            list.push(value);
-        };
-        for (let nodeId of nodeIds) {
-            let machineId = machineIdOf(nodeId);
-            pushInto(machineAllThreads, machineId, nodeId);
-            if (respondedSet.has(nodeId)) {
-                pushInto(machineRespondedThreads, machineId, nodeId);
-            }
-        }
-
-        // A machine's IP is the most common IP across its threads (they should all match, but resolve robustly).
-        let nodeIps = synced.getNodeIps(nodeIds);
-        let machineIp = new Map<string, string>();
-        for (let [machineId, threads] of machineAllThreads) {
-            let counts = new Map<string, number>();
-            for (let thread of threads) {
-                let ip = nodeIps?.[thread];
-                if (!ip) continue;
-                counts.set(ip, (counts.get(ip) || 0) + 1);
-            }
-            let bestIp = "";
-            let bestCount = 0;
-            for (let [ip, count] of counts) {
-                if (count > bestCount) {
-                    bestCount = count;
-                    bestIp = ip;
-                }
-            }
-            if (bestIp) machineIp.set(machineId, bestIp);
-        }
-
-        // The unique set of function-runner networks running on each machine (usually one, human-readable).
-        let machineNetworks = new Map<string, string[]>();
-        for (let [machineId, threads] of machineAllThreads) {
-            let unique = new Set<string>();
-            for (let thread of threads) {
-                for (let network of runnerByNode.get(thread)?.networks || []) {
-                    unique.add(network);
-                }
-            }
-            if (unique.size) machineNetworks.set(machineId, [...unique]);
-        }
-
-        // One latency column per machine: each row (node) gets its own min · median · max latency to that machine's
-        // threads (a machine has several threads, so a cell is a range, not one number).
-        let machineColumns = [...machineAllThreads.keys()].map(id => {
-            let networks = machineNetworks.get(id) || [];
-            let label = networks.length ? `${id.slice(0, ID_CHARS)} (${networks.join(" | ")})` : id.slice(0, ID_CHARS);
-            return { id, label, threads: machineAllThreads.get(id) || [] };
-        });
-        sort(machineColumns, column => column.id);
-        let nodeMachineLatency = new Map<string, { [machineId: string]: { text: string; tooltip: string } }>();
-        for (let nodeId of nodeIds) {
-            let sourceLatencies = latencyMaps.get(nodeId);
-            let traffic = trafficMaps.get(nodeId);
-            let byMachine: { [machineId: string]: { text: string; tooltip: string } } = {};
-            for (let column of machineColumns) {
-                let cell = machineLatencyCell({ sourceLatencies, threads: column.threads, traffic });
-                if (cell.text) byMachine[column.id] = cell;
-            }
-            nodeMachineLatency.set(nodeId, byMachine);
-        }
-
-        // Total bytes on each thread-pair link (both directions). Both endpoints report the same total, so take the max.
-        let pairKey = (a: string, b: string) => a < b ? `${a}|${b}` : `${b}|${a}`;
-        let pairTraffic = new Map<string, number>();
-        // Path values per thread pair, split by direction (fwd = lower id → higher id). Both endpoints report each
-        // direction (one as sent, one as received), so take the max of the two estimates.
-        let pairPv = new Map<string, { fwd: number; back: number }>();
-        for (let [reporter, traffic] of trafficMaps) {
-            for (let [peer, data] of Object.entries(traffic.perNode || {})) {
-                if (reporter === peer || !respondedSet.has(peer)) continue;
-                let key = pairKey(reporter, peer);
-                pairTraffic.set(key, Math.max(pairTraffic.get(key) || 0, (data?.sent || 0) + (data?.received || 0)));
-                let pv = pairPv.get(key);
-                if (!pv) {
-                    pv = { fwd: 0, back: 0 };
-                    pairPv.set(key, pv);
-                }
-                let sentRate = data?.pathValuesSent || 0;
-                let receivedRate = data?.pathValuesReceived || 0;
-                if (reporter < peer) {
-                    pv.fwd = Math.max(pv.fwd, sentRate);
-                    pv.back = Math.max(pv.back, receivedRate);
-                } else {
-                    pv.fwd = Math.max(pv.fwd, receivedRate);
-                    pv.back = Math.max(pv.back, sentRate);
-                }
-            }
-        }
-
-        // Machine-to-machine latency = minimum over all cross-machine thread-pair latencies; traffic = summed pair traffic.
-        let machinePairLatency = new Map<string, number>();
-        for (let [sourceId, latencies] of latencyMaps) {
-            let sourceMachine = machineIdOf(sourceId);
-            for (let [destId, latencyMs] of Object.entries(latencies)) {
-                if (!respondedSet.has(destId) || !Number.isFinite(latencyMs)) continue;
-                let destMachine = machineIdOf(destId);
-                if (sourceMachine === destMachine) continue;
-                let key = pairKey(sourceMachine, destMachine);
-                let existing = machinePairLatency.get(key);
-                machinePairLatency.set(key, existing === undefined ? latencyMs : Math.min(existing, latencyMs));
-            }
-        }
-        let machinePairTraffic = new Map<string, number>();
-        for (let [key, weight] of pairTraffic) {
-            let [a, b] = key.split("|");
-            let ma = machineIdOf(a);
-            let mb = machineIdOf(b);
-            if (ma === mb) continue;
-            let mk = pairKey(ma, mb);
-            machinePairTraffic.set(mk, (machinePairTraffic.get(mk) || 0) + weight);
-        }
-        // Sum thread-pair path value flows up to machine pairs, keeping direction (fwd = lower machine id → higher).
-        let machinePairPv = new Map<string, { fwd: number; back: number }>();
-        for (let [key, pv] of pairPv) {
-            let [a, b] = key.split("|");
-            let ma = machineIdOf(a);
-            let mb = machineIdOf(b);
-            if (ma === mb) continue;
-            let mk = pairKey(ma, mb);
-            let entry = machinePairPv.get(mk);
-            if (!entry) {
-                entry = { fwd: 0, back: 0 };
-                machinePairPv.set(mk, entry);
-            }
-            // The thread pair's fwd direction may be flipped relative to the machine pair's ordering.
-            if (ma < mb) {
-                entry.fwd += pv.fwd;
-                entry.back += pv.back;
-            } else {
-                entry.fwd += pv.back;
-                entry.back += pv.fwd;
-            }
-        }
-
-        let nodes: LatencyGraphNode[] = [...machineRespondedThreads.keys()].map(machineId => {
-            let allThreads = machineAllThreads.get(machineId) || [];
-            let totals = sumTraffic(allThreads, trafficMaps);
-            return {
-                id: machineId,
-                labelLines: machineLabelLines({ machineId, threads: allThreads, trafficMaps, ip: machineIp.get(machineId), networks: machineNetworks.get(machineId) || [] }),
-                weight: totals.valuesSent + totals.valuesReceived,
-            };
-        });
-        let links: LatencyGraphLink[] = [];
-        for (let [key, latencyMs] of machinePairLatency) {
-            let [source, destination] = key.split("|");
-            let pv = machinePairPv.get(key);
-            let extraLabel: LatencyGraphLabelLine | undefined;
-            if (pv && (pv.fwd || pv.back)) {
-                extraLabel = { text: `↑${formatNumber(pv.fwd)}/s ↓${formatNumber(pv.back)}/s values`, color: PATHVALUE_COLOR };
-            }
-            links.push({ source, destination, latencyMs, weight: machinePairTraffic.get(key) || 0, valueWeight: pv && pv.fwd + pv.back || 0, extraLabel });
-        }
-
-        // One row per thread node, grouped so a machine's threads sit together; the selected machine sorts to the top.
-        // Single composite key: selected-first, then machine, then thread — the low separator keeps segments ordered.
-        let rows = nodeIds.filter(nodeId => respondedSet.has(nodeId)).map(nodeId => buildNodeRow({ nodeId, runner: runnerByNode.get(nodeId), info: infoByNode.get(nodeId), traffic: trafficMaps.get(nodeId), machineIp, machineNetworks }));
-        let selected = selectedMachineParam.value;
-        let sep = String.fromCharCode(1);
-        sort(rows, row => `${row.machineId === selected ? 0 : 1}${sep}${row.machineId}${sep}${row.threadPort}`);
-
-        let unresponsiveNodeIds = nodeIds.filter(nodeId => !respondedSet.has(nodeId));
-
-        return <div className={css.vbox(8).fillWidth}>
-            <div className={css.hbox(14)}>
-                <h2 className={css.margin(0)}>Latency Graph ({machineRespondedThreads.size} machines · {respondedSet.size}/{nodeIds.length} nodes reported)</h2>
-                <div className={css.hbox(0).bord2(0, 0, 70)}>
-                    {([timeInMinute * 5, timeInMinute * 60]).map(windowSize => {
-                        let selected = trafficWindow === windowSize;
-                        return <div
-                            className={css.pad2(12, 6).cursor("pointer")
-                                .hsl(210, selected ? 70 : 0, selected ? 45 : 96).colorhsl(0, 0, selected ? 100 : 30)}
-                            onMouseDown={() => trafficWindowParam.value = windowSize}
-                        >{formatTime(windowSize)}</div>;
-                    })}
-                </div>
-            </div>
-            <div className={css.relative.fillWidth.height(LATENCY_GRAPH_HEIGHT_PX).bord2(0, 0, 85)}>
-                <LatencyGraph
-                    nodes={nodes}
-                    links={links}
-                    formatWeight={weight => formatNumber(weight) + "B/s"}
-                    selectedId={selected || undefined}
-                    onSelectNode={id => selectedMachineParam.value = selectedMachineParam.value === id ? "" : id}
-                />
-            </div>
-            <div className={css.colorhsl(0, 0, 50)}>Click a node to sort its information to the top of the table below.</div>
-            <h2 className={css.margin(0)}>Nodes ({rows.length})</h2>
-            <NodeInfoTable rows={rows} selectedMachine={selected} machineColumns={machineColumns} nodeMachineLatency={nodeMachineLatency} />
-            {unresponsiveNodeIds.length > 0 && <>
-                <h2 className={css.margin(0)}>Unresponsive Nodes ({unresponsiveNodeIds.length})</h2>
-                <UnresponsiveNodesTable nodeIds={unresponsiveNodeIds} machineIp={machineIp} />
-            </>}
+        let startPct = this.props.start * 100;
+        let widthPct = (this.props.end - this.props.start) * 100;
+        return <div className={css.relative.size(RANGE_BAR_WIDTH_PX, RANGE_BAR_HEIGHT_PX).flexShrink0.hsl(0, 0, 92).bord2(0, 0, 75)}>
+            <div className={css.absolute.top(0).left(`${startPct}%`).size(`${widthPct}%`, "100%").hsl(210, 65, 50)} />
         </div>;
     }
 }
@@ -699,15 +141,10 @@ export class RoutingTablePage extends qreact.Component {
             return <div className={css.pad2(16)}>Loading routing table...</div>;
         }
         let allNodeIds = infos.map(x => x.nodeId);
-        let routableInfos = infos.filter(x => x.spec && x.spec.routeStart >= 0 && x.spec.routeEnd >= 0);
-        sort(routableInfos, x => x.spec!.routeStart);
 
         return <div className={css.vbox(12).pad2(16).fillWidth}>
             <LatencyGraphSection nodeIds={allNodeIds} infos={infos} />
-            <h2>Routing Table ({routableInfos.length})</h2>
-            <div className={css.vbox(8).fillWidth}>
-                {routableInfos.map(info => <AuthorityNodeRow key={info.nodeId} info={info} />)}
-            </div>
+            <PathValueServersSection infos={infos} />
             <FunctionRunnersSection />
         </div>;
     }