);
}
// The lede's second line cycles through why mumP2P is faster. Phrases are
// mechanism, not figures — the stats bar below already carries the numbers, and
// a rotating claim that restated them would just contradict itself on pause.
// setInterval rather than rAF: rAF is throttled to a stop in background tabs,
// which would strand whichever phrase happened to be showing.
const MUMP2P_REASONS = [
{ full: 'sends coded packets, not duplicate data.', mobile: 'codes packets, not copies.' },
{ full: 'rebuilds blocks from whatever arrives.', mobile: 'rebuilds from any packet.' },
{ full: 'recovers without waiting for missing packets.', mobile: 'recovers without waiting.' },
{ full: 'makes redundancy useful, not wasteful.', mobile: 'turns redundancy into speed.' },
];
function RotatingReason({ phrases, intervalMs = 3400 }) {
const [i, setI] = React.useState(0);
const reduced = React.useMemo(() => (
typeof window !== 'undefined' && window.matchMedia
? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false
), []);
// Runs for the life of the card. There is deliberately no hover pause: if the
// pointer left the window while over the line, onMouseLeave could fail to fire
// and strand one phrase on screen. With constant deps the interval is created
// once and never torn down by a re-render either.
React.useEffect(() => {
if (reduced || phrases.length < 2) return undefined;
const id = setInterval(() => setI(n => (n + 1) % phrases.length), intervalMs);
return () => clearInterval(id);
}, [reduced, phrases.length, intervalMs]);
return (
{phrases.map((p, n) => (
mump2p{' '}
{p.full}{p.mobile}
))}
{/* The name never changes, so it is painted once and never fades. The
ghost above reserves its space inside each phrase so the sentence
still wraps as a single sentence. */}
mump2p
);
}
// Network-status card beside the globe — "3A anchored card": a live-status
// header (Optimum branding), two headline stats with sub-captions, and a
// footer marquee of trusted validator partners. The stats are the mumP2P-
// connected stake and the headline propagation-speed advantage (the selling
// point); the per-slot propagation breakdown lives in FleetAveragesPanel below.
function FleetStatsCard({ totalStakeEth, validators, snapshotMs, dark = false, validator = null }) {
// mumP2P-connected stake comes from the single source of truth, which fetches
// the console's published daily series and falls back to a static snapshot.
const VALSVC = (typeof window !== 'undefined' && window.OptimumValidators) || null;
const mumFleetEth = VALSVC && VALSVC.getMumP2PFleetEth ? VALSVC.getMumP2PFleetEth() : 1316423;
// Block-propagation advantage, from the measured Xatu-referenced report in the
// SSOT: mean per-slot spread (p95 arrival − first arrival) for mumP2P vs the
// libP2P gossipsub baseline. Percentile breakdowns live on the Stats page.
const perf = (typeof window !== 'undefined' && window.OptimumValidators && window.OptimumValidators.getPropagation)
? window.OptimumValidators.getPropagation() : null;
const spread = perf && perf.spread;
const speedMult = spread ? spread.speedFactor : 3.0;
// libP2P sets the scale; mumP2P's mark sits at its share of it.
const spreadBarPct = spread ? Math.max(4, +(spread.mumP2PMs / spread.libP2PMs * 100).toFixed(1)) : 4;
// The help tip carries the measurement basis — what the figure means and how
// many slots / observers it was aggregated over — so the headline multiple is
// never a bare number. Built from `perf` so the prose can't drift from it.
const propHelp = perf
? 'How long a block takes to reach nearly every node once it first appears. '
+ 'Per slot: the time from the first node seeing the block to the 95th-percentile node seeing it, averaged over '
+ spread.slotsCompared.toLocaleString('en-US') + ' ' + perf.network.toLowerCase() + ' slots. '
+ 'mump2p ' + perfFixed(spread.mumP2PMs, 1) + ' ms vs libp2p gossipsub ' + perfFixed(spread.libP2PMs, 1) + ' ms.'
: 'How long a block takes to reach nearly every node, mump2p vs the libp2p gossipsub baseline.';
// Per-operator figures when a specific validator is focused (from the globe search).
const opStake = validator && Number.isFinite(validator.liveStakeEth) ? validator.liveStakeEth : null;
const opMump2p = (opStake !== null && totalStakeEth) ? (opStake / totalStakeEth) * mumFleetEth : null;
// ── Design import: "7C — dashboard density" (Network Status Card · 4 dirs).
// A lede, then two figures (Total Value Boosted · Propagation spread) are
// inlined in the render below. We keep the real Optimum logo + trusted-by
// marquee, and drop 7C's "recent slots" strip per the brief.
// Daily connected-stake series, oldest first, straight from the console. One
// point per UTC day: the step-ups are real partner onboardings, so the line is
// deliberately not smoothed.
const spkPoints = (VALSVC && VALSVC.getMumP2PStakeSeries ? VALSVC.getMumP2PStakeSeries() : [])
.filter(p => p && Number.isFinite(p.eth));
const _spkRaw = spkPoints.length ? spkPoints.map(p => p.eth) : [mumFleetEth];
// The polyline divides by (n - 1), so a single point renders NaN -- and a single
// point is the static-fallback path, i.e. exactly when the endpoint is down.
// Duplicate it into a flat two-point line.
const spkVals = _spkRaw.length > 1 ? _spkRaw : [_spkRaw[0], _spkRaw[0]];
// First / middle / last, deduped: 83 ticks would be unreadable in a 320px box,
// and at two points the midpoint IS the first.
const spkAxis = spkPoints.length > 1
? [...new Set([0, Math.floor((spkPoints.length - 1) / 2), spkPoints.length - 1])]
.map(i => fmtSpkDay(spkPoints[i].day))
: [];
// Below two points there is nothing to compare, and index 0 is the only position
// any index-derived cursor could take, so hover is disabled rather than pinned.
// Declared above spkTipText, which reads it eagerly.
const spkHoverable = spkPoints.length > 1;
// Matches formatNum's thresholds, so the headline and the hover tooltip never
// report the same figure in different units.
const spkUnit = mumFleetEth >= 1e6
? { div: 1e6, dp: 2, suffix: 'M' }
: mumFleetEth >= 1e3
? { div: 1e3, dp: 1, suffix: 'K' }
: { div: 1, dp: 0, suffix: '' };
const spkLast = spkPoints.length ? spkPoints[spkPoints.length - 1] : null;
// Says "measured" only when the last point actually was: dating a carried-forward
// figure as that day's measurement is what `carried` exists to prevent.
const spkTipText = 'Effective stake run by operators connected to mump2p on Ethereum mainnet'
+ (spkLast ? (spkLast.carried ? ', carried forward to ' : ', measured ') + fmtSpkDay(spkLast.day) : '')
+ (spkHoverable ? '. A day marked · on hover was carried forward rather than measured.' : '.');
const _spkMin = Math.min(...spkVals), _spkMax = Math.max(...spkVals);
const _spkRange = (_spkMax - _spkMin) || 1;
const _spkPts = spkVals.map(v => 20 + ((v - _spkMin) / _spkRange) * 80);
const _spkN = _spkPts.length, _spkW = 320, _spkH = 52;
const spkLine = _spkPts.map((v, i) => (i / (_spkN - 1) * _spkW).toFixed(1) + ',' + (_spkH - (v / 100) * (_spkH - 8) - 4).toFixed(1)).join(' ');
const spkArea = 'M0,' + _spkH + ' L' + spkLine.split(' ').join(' L') + ' L' + _spkW + ',' + _spkH + ' Z';
const [spkHover, setSpkHover] = React.useState(null);
const onSpkMove = (e) => {
if (!spkHoverable) return;
const r = e.currentTarget.getBoundingClientRect();
if (!r.width) return;
const x = (e.clientX - r.left) / r.width;
setSpkHover(Math.min(spkPoints.length - 1, Math.max(0, Math.round(x * (spkPoints.length - 1)))));
};
// Re-clamped at render, not just in the handler: a revalidation can shrink the
// series with no mouse move, leaving the stored index past the end.
const spkIdx = spkHoverable && spkHover != null ? Math.min(spkHover, spkPoints.length - 1) : null;
// Dropped when hover turns off, so a shrink to one point cannot leave an index
// that reappears on regrow. A shrink to 2+ keeps it, masked by the clamp above.
React.useEffect(() => { if (!spkHoverable && spkHover != null) setSpkHover(null); }, [spkHoverable, spkHover]);
const spkHoverPct = spkIdx != null ? (spkIdx / (spkPoints.length - 1)) * 100 : 0;
const spkTipTx = spkHoverPct < 22 ? 'translateX(0)' : spkHoverPct > 78 ? 'translateX(-100%)' : 'translateX(-50%)';
return (
{validator ? (
{validator.name}
ETH validator · operator
) : null}
{/* The claim the rest of the page then evidences. The reason rotates; the
stem does not, so only the second line ever changes. */}
{/* Total Value Boosted — live daily series from the console. */}
Total Value Boosted (TVB)
{spkUnit.suffix}
ETH
{/* The cursor spans this box only, so it stops at the plot and does
not rule through the date labels below. */}
{/* The label names the metric, not the outcome, so "faster" cannot be
read as "blocks arrive sooner" — that is slot arrival, a much
smaller multiple. */}
Propagation spread
≈ × faster
{spread ? (
{perfFixed(spread.mumP2PMs, 1)} ms
{/* Not "arrived later": that is slot arrival, measured from slot
start, and a different number (436 ms). */}
{perfFixed(spread.libP2PMs - spread.mumP2PMs, 1)} mslonger to spread
mump2plibp2p gossipsub
) : null}
Trusted by leading validators and staking protocols
);
}
// ── Overview rail: P80 lead · propagation spread · propagation latency ──
// Reusable graph cards — rendered on both the Overview rail and the Stats page.
// Small "View details ↗" link (Overview cards → Stats page); renders only when onClick is given.
function ViewDetailsLink({ onClick }) {
if (!onClick) return null;
return (
);
}
// (A) Average arrival — mumP2P vs libP2P average arrival, with the gap called out.
function ArrivalCompareCard({ mumMs, libMs, subtitle, title, onViewDetails, wrapClass, wrapStyle }) {
const has = Number.isFinite(mumMs) && Number.isFinite(libMs);
return (
{title || 'Average arrival at gateway'}{subtitle || 'mump2p vs libp2p · lower is faster'}
mump2p arrival
{has ? : 'N/A'}{has ? 'ms' : ''}
libp2p arrival
{has ? : 'N/A'}{has ? 'ms' : ''}
{!has &&
No paired samples for this window
}
);
}
// mumP2P vs libP2P — the headline result: how often mumP2P delivered first and by
// how much (P80). Reused on the Stats page and the Overview (where it replaces the
// raw "Average arrival" card as the clearer showcase of mumP2P's advantage).
function MumVsLibCard({ winPct, leadMs, windowLabel, pctlLabel = 'P80', title = 'mump2p vs libp2p', wrapClass, wrapStyle }) {
const hasWin = Number.isFinite(winPct);
const hasLead = Number.isFinite(leadMs);
const box = { borderRadius: 12, border: '1px solid rgba(100,226,127,0.28)', background: 'linear-gradient(180deg,rgba(100,226,127,0.10),transparent)', padding: '15px 16px', display: 'flex', flexDirection: 'column', justifyContent: 'center' };
const label = windowLabel || 'last 25 slots';
return (
);
}
// Mini paired bars for the per-slot hover tooltip — mumP2P vs libP2P arrival,
// scaled to the slower of the two so the gap (mumP2P's lead) reads at a glance.
function TipArrivalBars({ mum, lib }) {
if (!Number.isFinite(mum) || !Number.isFinite(lib)) return null;
const max = Math.max(mum, lib, 1);
const w = (v) => Math.max(3, (v / max) * 100).toFixed(1) + '%';
// Summary reads as a comparison ("≈ N× faster"), matching the headline
// "average latency" card — no "+" (which reads as "extra"), and an approx sign.
let sum = null;
if (mum > 0 && lib > 0 && Math.abs(lib - mum) >= 1) {
sum = lib > mum
? { who: 'mump2p', mult: lib / mum, green: true }
: { who: 'libp2p', mult: mum / lib, green: false };
}
return (
mump2p{Math.round(mum).toLocaleString('en-US')}ms
libp2p{Math.round(lib).toLocaleString('en-US')}ms
{sum
?
{sum.who} ≈ {sum.mult.toFixed(1)}× faster
:
even
}
Sample data
);
}
// Slot counts for one bucket. Not TipArrivalBars, which labels its values "ms"
// and summarises them as a speed multiple.
function DistBucketBars({ mum, lib, peak }) {
const w = (v) => Math.max(3, (v / Math.max(1, peak)) * 100).toFixed(1) + '%';
const row = (k, v, cls) => (
);
}
// (B) Fleet arrival distribution: the real replacement for the per-slot fixture.
//
// Two paired 10ms histograms over the same ~50k slots: how often the block had
// reached the fleet by a given point in the slot, mumP2P against the libP2P
// baseline. It carries the same claim the per-slot bars were making (mumP2P
// arrives earlier and in a tighter band) with measured data instead of a fixture.
//
// Not a timeline: there is no first-party source pairing mumP2P and libP2P per
// slot, so a per-slot comparison cannot be drawn honestly at all. This is the
// distribution of the same measurements the hero figures come from.
function ArrivalDistributionCard({ dist, windowLabel, onViewDetails, wrapClass, wrapStyle }) {
const [hoverI, setHoverI] = React.useState(null);
const W = 320, H = 96;
// Memoised on the series identity: hover sets state on every pointer move, and
// without this each move rebuilt two arrays and two path strings of up to ~2400
// segments apiece.
const { lo, span, mum, lib, peak, mumPath, libPath } = React.useMemo(() => {
// Both arms on one axis so the shift between them is the visual, which means
// one shared bucket range rather than each series scaled to its own.
const lo = Math.min(dist.mumP2P[0].bucket, dist.libP2P[0].bucket);
const hi = Math.max(
dist.mumP2P[dist.mumP2P.length - 1].bucket,
dist.libP2P[dist.libP2P.length - 1].bucket
);
const span = Math.max(1, hi - lo + 1);
const series = (pts) => {
const row = new Array(span).fill(0);
pts.forEach(pt => { row[pt.bucket - lo] = pt.count; });
return row;
};
const mum = series(dist.mumP2P), lib = series(dist.libP2P);
// A loop, not Math.max(...mum, ...lib): the span is endpoint-derived, and a
// spread throws RangeError once it is large.
let peak = 1;
for (let i = 0; i < span; i++) { if (mum[i] > peak) peak = mum[i]; if (lib[i] > peak) peak = lib[i]; }
// Step path: a bucket is a bucket, and smoothing it would draw arrivals
// between two buckets that nothing measured.
const path = (row) => {
let d = 'M0,' + H;
for (let i = 0; i < row.length; i++) {
const x = (i / row.length) * W, x2 = ((i + 1) / row.length) * W;
const y = H - (row[i] / peak) * (H - 4);
d += ' L' + x.toFixed(1) + ',' + y.toFixed(1) + ' L' + x2.toFixed(1) + ',' + y.toFixed(1);
}
return d + ' L' + W + ',' + H + ' Z';
};
return { lo, span, mum, lib, peak, mumPath: path(mum), libPath: path(lib) };
}, [dist]);
// A revalidation can land with a shorter span while the pointer is parked past
// its end. `at` is clamped below, and this clears the stored index after.
React.useEffect(() => { setHoverI(null); }, [span, dist.bucketMs]);
const msAt = (i) => Math.round((lo + i) * dist.bucketMs);
const onMove = (e) => {
const r = e.currentTarget.getBoundingClientRect();
if (!r.width) return;
setHoverI(Math.min(span - 1, Math.max(0, Math.floor(((e.clientX - r.left) / r.width) * span))));
};
const at = hoverI != null ? Math.min(hoverI, span - 1) : null;
const tipPct = at != null ? ((at + 0.5) / span) * 100 : 0;
const tipTx = tipPct < 22 ? 'translateX(0)' : tipPct > 78 ? 'translateX(-100%)' : 'translateX(-50%)';
return (
{msAt(at).toLocaleString('en-US')}–{msAt(at + 1).toLocaleString('en-US')} ms
)}
{msAt(0).toLocaleString('en-US')} msarrival within slot{msAt(span).toLocaleString('en-US')} ms
);
}
// (B) Per-slot P80 advantage — one bar per slot over the window, with the average line.
// CAUTION: its bars stack a mumP2P base inside the libP2P total, so the green
// fraction IS the claim, and on the fixture that fraction is ~13% where the
// measured report puts it at ~78%. Only rendered when the live distribution is
// unavailable, and it says "sample data" on the card face, not just in the tip.
// TODO(live-data): bars derived from TELEMETRY, not measured. Needs a per-slot
// arrival series pairing both transports; no first-party source has one.
function P80BarsCard({ bars, avgP80, windowLabel, onViewDetails, wrapClass, wrapStyle }) {
const list = bars || [];
const vals = list.map(b => b.p80).filter(Number.isFinite);
const has = vals.length > 0;
// Bars are stacked to the slot's libP2P arrival (the full baseline time): a green
// mumP2P base + a peach remainder, both scaled to the window's slowest libP2P so
// the mumP2P-vs-libP2P proportion reads directly. The peach remainder = the lead.
const maxLib = Math.max(1, ...list.map(b => (Number.isFinite(b.libP80) ? b.libP80 : 0)));
const avg = Number.isFinite(avgP80) ? Math.round(avgP80) : (has ? Math.round(vals.reduce((a, b) => a + b, 0) / vals.length) : null);
// Hover previews a slot; click pins it (click again / the pinned bar to clear).
const [hoverI, setHoverI] = React.useState(null);
const [pinI, setPinI] = React.useState(null);
// The window can change under us (25/50/100) — indices shift, so drop any selection.
React.useEffect(() => { setHoverI(null); setPinI(null); }, [list.length, windowLabel]);
const activeI = hoverI != null ? hoverI : pinI;
const active = (activeI != null && activeI >= 0 && activeI < list.length) ? list[activeI] : null;
// Anchor the tip to the bar centre, but flip it near the edges (left-anchor on the
// first bars, right-anchor on the last) so a wide tip never overflows the card.
const tipCenter = active ? (activeI + 0.5) / Math.max(1, list.length) * 100 : 50;
const tipLeft = Math.min(98, Math.max(2, tipCenter)).toFixed(2) + '%';
const tipTx = tipCenter < 22 ? 'translateX(0)' : tipCenter > 78 ? 'translateX(-100%)' : 'translateX(-50%)';
const hasArr = active && Number.isFinite(active.mumP80) && Number.isFinite(active.libP80);
// While a bar is pinned (mouse may leave the card) keep the card lifted so the
// popover isn't painted under a later sibling card.
const lifted = (pinI != null || hoverI != null);
return (
oldest{active ? 'click to pin · move away to clear' : 'per-slot arrival · mump2p vs libp2p'}newest
);
}
function FleetAveragesPanel({ validatorRows }) {
const CARD = { background: 'var(--op-card)', border: '1px solid var(--op-border)', borderRadius: 18, boxShadow: 'var(--op-shadow)', padding: 24 };
const perf = usePropagation();
// Null on every fallback path, since the static report carries no histograms.
const dist = (typeof window !== 'undefined' && window.OptimumValidators && window.OptimumValidators.getNetworkDistribution)
? window.OptimumValidators.getNetworkDistribution() : null;
// Per-slot P80 advantage across validators, last 25 slots (chronological).
// Demo telemetry, not the report. Only reached when the live arrival
// distribution is unavailable; see ArrivalDistributionCard.
const p80Bars = React.useMemo(() => {
const rows = validatorRows || [];
const n = (rows[0] && rows[0].slots && rows[0].slots.length) || 0;
const out = [];
for (let i = Math.max(0, n - 25); i < n; i++) {
const p = perSlotP80(rows, i);
out.push({ slot: rows[0] && rows[0].slots[i] && rows[0].slots[i].slot, p80: p.netAdvP80, mumP80: p.mumP80, libP80: p.libP80, publishers: p.publishers });
}
return out;
}, [validatorRows]);
const p80WindowAvg = React.useMemo(() => { const vals = p80Bars.map(b => b.p80).filter(Number.isFinite); return vals.length ? Math.round(vals.reduce((a, b) => a + b, 0) / vals.length) : null; }, [p80Bars]);
return (
{/* The four headline results, ahead of the methodology strip and the cards
that expand on them. */}
{/* Measurement basis — the facts every figure below shares: the metric, the
sample it was measured over, the window, and the last day that window
carries data for. The full explanation lives in the "?" so the banner
stays terse.
It used to end with SnapshotCadence, which reads the Hub's TELEMETRY
clock: "last snapshot" was the page-load time and the countdown ran 24h
from it. Nothing about that describes this report, which refetches on its
own 30-minute TTL and changes daily (hourly in the console's live window). A
countdown promising fresh numbers at an arbitrary moment was worse than no
countdown.
SnapshotCadence itself is left alone. Its other call site is StatsView,
which nothing currently reaches (no setView('stats') anywhere), so it is
dormant rather than wrong: the clock it reads is the telemetry one, which
is the clock that view runs on. */}
{/* The two measured report metrics replace the old demo gateway cards
("Average arrival at gateway" / "Arrived first at gateway"): spread is
the window RLNC compresses, arrival is the same advantage end to end. */}
{perf && (
)}
{perf && (
)}
{/* Measured arrival distribution when the endpoint served one, and the
per-slot fixture only as the fallback. */}
{dist
?
: }
{/* Where the lead actually lands. It closes the section: the ladder is the
conclusion the cards above have been building toward. */}
{perf && }
);
}
// ────────────────────────────────────────────────────────────────
// Per-validator live activity — each row's "Latest activity" cell
// rotates through slot outcomes (mumP2P vs libP2P) every few seconds,
// with a slide-in animation so the table feels alive.
// ────────────────────────────────────────────────────────────────
// ────────────────────────────────────────────────────────────────
// Fleet observability — new sections
// ────────────────────────────────────────────────────────────────
const STATUS_LABELS = {
healthy: { label: 'Active', tone: 'good', help: 'Recent comparable mump2p and libp2p samples are available.' },
offline: { label: 'Offline', tone: 'bad', help: 'More than half of this window is missing comparable telemetry.' },
onboarding: { label: 'Onboarding', tone: 'info', help: 'Validator is new or still building enough comparable telemetry.' },
na: { label: 'No data', tone: 'muted', help: 'No comparable mump2p/libp2p samples are available for this window.' },
};
function StatusPill({ status }) {
const s = STATUS_LABELS[status] || STATUS_LABELS.na;
return {s.label};
}
// Hero / command center — fleet-wide stats
// Epoch progress — 32 ticks; lights up the slots within the current epoch
// Split-flap metric strip — flip-only-on-change
// Last 32 slots rail — fleet-wide per-slot summary
// Validator x slot heat strip
// Leaderboard cards — top-N by metric (no fake movement; only show rank-change if prevRank supplied)
// Fleet comparison cards
// Validator ranking table. It shows the top `limit` by the current sort (search
// still queries the whole fleet) and expands in place to the full fleet — the
// dedicated Validators page it used to link out to is no longer routed.
// Connected-operators directory — logo + name cards (V1: names only, no stake
// or per-operator performance). Shared by the Overview and the full page.
function OperatorDirectory({ rows, minColW, variant, valueOf, unit }) {
// List variant (Overview): one row per operator with its connected mumP2P
// stake on the right. `valueOf(r)` returns the ETH number; `unit` its label.
if (variant === 'list') {
return (
Operatormump2p connected{unit ? ' · ' + unit : ''}
{/* Overview shows the top `limit` (10) so this column stays close in height
to the fleet-averages column beside it; the full set is one click away
via "View all … operators". Search still matches the whole fleet. */}
{sorted.length === 0 && (
{sorted.length.toLocaleString('en-US')} of {rows.length.toLocaleString('en-US')} operators
{sorted.length === 0 &&
No operators match “{query}”.
}
);
}
// ────────────────────────────────────────────────────────────────
// Hub layout
// ────────────────────────────────────────────────────────────────
// ── Stats view (new) — per-slot tables + averages, chain-selectable, P80-only ──
function opSlotTime(slot, latestSlot, snapMs) {
const ms = snapMs - (latestSlot - slot) * 12000;
const d = new Date(ms);
const p = (n) => String(n).padStart(2, '0');
return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
}
// P80 across the fleet's validators for one slot index.
// Per-slot arrival percentile across the fleet for one slot index. `p` selects
// the percentile (0.5 / 0.8 / 0.95); defaults to P80 so existing callers (the
// Overview) are unchanged. The Stats page passes the user-selected percentile.
function perSlotP80(perValidator, i, p = 0.8) {
const mum = [], lib = [], adv = [];
(perValidator || []).forEach(pv => {
const s = pv.slots && pv.slots[i];
if (s && Number.isFinite(s.advantage)) { mum.push(s.mumP2PArrival); lib.push(s.libP2PArrival); adv.push(s.advantage); }
});
const pos = adv.filter(v => v > 0);
const mumP80 = percentile(mum, p);
const libP80 = percentile(lib, p);
return {
publishers: adv.length,
mumP80,
libP80,
// Percentile of the per-publisher deltas (distribution of individual advantages)
deltaAllP80: percentile(adv, p),
deltaPosP80: pos.length ? percentile(pos, p) : null,
// Network-level advantage: the gap between the aggregate percentile arrivals
netAdvP80: (Number.isFinite(libP80) && Number.isFinite(mumP80)) ? (libP80 - mumP80) : percentile(adv, p),
accelPct: adv.length ? Math.round((pos.length / adv.length) * 100) : 0,
};
}
// Hoverable "?" — explains what a metric means. Keyboard-accessible (focus
// shows the tip too). Theme-aware; inherits nothing from uppercase contexts.
function OpHelpTip({ text, placement }) {
return (
{text}
);
}
// Chain glyph for the nav selector. Ethereum → the OFFICIAL Ethereum diamond
// (canonical Ethereum_logo, viewBox 0 0 256 417) with its real brand colors —
// never a custom recolor. Per Ethereum's brand kit we use the colored periwinkle
// facets on light backgrounds and the white mono glyph on dark backgrounds
// (the dark facets of the color version lose contrast on a dark UI). Other
// chains fall back to the coloured status dot until a mark is added.
// Registry-driven (keyed by id).
function ChainLogo({ id, size = 15, dark = false }) {
if (id === 'ethereum') {
// Official Ethereum "ETH diamond (colored)" facets (ethereum.org brand assets),
// in path order: upper-R, upper-L, lower-R, lower-L, inner-R, inner-L. We use the
// real periwinkle facets in BOTH themes — the diamond reads on dark via its lighter
// facets, and this avoids the flat-white recolor that lost the logo's faceting.
const f = ['#62688F', '#8A92B2', '#62688F', '#8A92B2', '#454A75', '#62688F'];
return (
);
}
return ;
}
// Snapshot cadence readout — "last snapshot HH:MM:SS · next in M:SS". Purely
// presentational: the Hub owns the clock (chain-configurable interval from the
// validator service) and auto-pulls the next snapshot when it lapses, so there
// is no manual refresh anywhere. Ticks locally so only this small component
// re-renders every second.
function SnapshotCadence({ snapshotMs, nextAt, refreshing }) {
const [now, setNow] = React.useState(() => Date.now());
React.useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
const remaining = Math.max(0, (nextAt || 0) - now);
const hh = Math.floor(remaining / 3600000);
const mm = Math.floor((remaining % 3600000) / 60000), ss = Math.floor((remaining % 60000) / 1000);
const pad = (n) => String(n).padStart(2, '0');
const countdown = hh > 0 ? `${hh}h ${pad(mm)}m` : `${mm}:${pad(ss)}`;
const updated = new Date(snapshotMs).toLocaleTimeString('en-US', { hour12: false });
return (
Last snapshot·{refreshing ? 'updating now…' : `next in ${countdown}`}
);
}
function StatsView({ fleetSnapshot, latestSlot, snapshotMs, nextSnapAt, refreshing, validatorCount = 0 }) {
const WINDOWS = [25, 50];
// 'avg' = the plain average (no percentile); the rest are arrival percentiles.
const PCTLS = [{ k: 'Avg', v: 'avg' }, { k: 'P50', v: 0.5 }, { k: 'P80', v: 0.8 }, { k: 'P95', v: 0.95 }];
const [win, setWin] = React.useState(25); // slots across the per-slot view + averages (default 25)
const [pctl, setPctl] = React.useState('avg'); // metric: Avg (default) / P50 / P80 / P95
const pctlLabel = (PCTLS.find(p => p.v === pctl) || {}).k || 'Avg';
const [hoverBar, setHoverBar] = React.useState(null);
const [pinnedBar, setPinnedBar] = React.useState(null);
// Window switch shows a brief loader ONLY the first time a window is opened
// (its data isn't "warm" yet). Once loaded it's cached, so re-selecting is
// instant. This mirrors how a real backend would stream a wider window on
// demand rather than shipping every window up front. The default window is
// already warm. `winLoading` reuses the same pulse overlay as the cadence.
const [warmed, setWarmed] = React.useState(() => new Set([25]));
const [winLoading, setWinLoading] = React.useState(false);
const [previewLoading, setPreviewLoading] = React.useState(false); // manual demo of the loading overlay (the "Loading" test button); closable via its ✕
const winTimer = React.useRef(null);
const selectWindow = React.useCallback((w) => {
if (w === win) return;
setWin(w);
if (!warmed.has(w)) {
setWinLoading(true);
if (winTimer.current) clearTimeout(winTimer.current);
winTimer.current = setTimeout(() => {
setWarmed(prev => { const n = new Set(prev); n.add(w); return n; });
setWinLoading(false);
}, 480);
}
}, [win, warmed]);
React.useEffect(() => () => { if (winTimer.current) clearTimeout(winTimer.current); }, []);
// `refreshing` comes from the Hub's snapshot cadence: while a snapshot is
// being pulled the pulse loader overlays the content, then the data lands.
const fleetSlots = (fleetSnapshot && fleetSnapshot.matrix && fleetSnapshot.matrix.fleetSlots) || [];
const perValidator = (fleetSnapshot && fleetSnapshot.matrix && fleetSnapshot.matrix.perValidator) || [];
// Per-slot P80 advantage across validators, last `win` slots (chronological).
const p80Bars = React.useMemo(() => {
const n = fleetSlots.length;
const out = [];
for (let i = Math.max(0, n - win); i < n; i++) {
const p = perSlotP80(perValidator, i, typeof pctl === 'number' ? pctl : 0.8);
out.push({ slot: fleetSlots[i].slot, p80: p.netAdvP80, mumP80: p.mumP80, libP80: p.libP80, publishers: p.publishers });
}
return out;
}, [fleetSlots, perValidator, win, pctl]);
const p80WindowAvg = React.useMemo(() => { const vals = p80Bars.map(b => b.p80).filter(Number.isFinite); return vals.length ? Math.round(vals.reduce((a, b) => a + b, 0) / vals.length) : null; }, [p80Bars]);
// Per-slot timeline: how many ms earlier mumP2P arrived each slot (the raw
// per-slot advantage). The percentile selector summarises this into a single
// headline figure below; the timeline itself shows every slot in the window.
const strip = React.useMemo(() => fleetSlots.slice(-win).map(s => ({
slot: s.slot, adv: Number.isFinite(s.advantage) ? s.advantage : 0, mum: s.mumP2PArrival, lib: s.libP2PArrival,
ts: opSlotTime(s.slot, latestSlot, snapshotMs),
})), [fleetSlots, latestSlot, snapshotMs, win]);
// Bars stack to each slot's libP2P arrival (peach) with a green mumP2P base, so
// scale to the window's slowest libP2P — the same encoding as the Overview card.
const stripMax = Math.max(1, ...strip.map(b => (Number.isFinite(b.lib) ? b.lib : 0)));
const tableA = React.useMemo(() => [...fleetSlots].slice(-win).reverse().map(s => ({
slot: s.slot, mum: s.mumP2PArrival, lib: s.libP2PArrival, adv: s.advantage,
})), [fleetSlots, win]);
// Both arrival mini-bars share ONE scale so a tiny green bar against a long peach
// one shows how much faster mumP2P is at a glance. Scale to the 90th-percentile
// libP2P (not the raw max) so a single slow-tail slot doesn't shrink every other
// bar to a dot — the rare outlier just clips at 100%. Advantage bar scaled to the
// window's best multiple separately.
const raceScales = React.useMemo(() => {
const libs = tableA.map(r => (Number.isFinite(r.lib) ? r.lib : 0)).filter(x => x > 0);
return {
arrival: libs.length ? Math.max(1, percentile(libs, 0.9)) : 1,
mult: Math.max(1, ...tableA.map(r => (Number.isFinite(r.mum) && Number.isFinite(r.lib) && r.mum > 0 ? r.lib / r.mum : 0))),
};
}, [tableA]);
// Averages over the same fleet slots the tables use, so every number agrees.
const avg = React.useMemo(() => {
const w = fleetSlots.slice(-win);
const mum = w.map(s => s.mumP2PArrival).filter(Number.isFinite);
const lib = w.map(s => s.libP2PArrival).filter(Number.isFinite);
const mean = a => a.length ? Math.round(a.reduce((x, y) => x + y, 0) / a.length) : null;
return { mum: mean(mum), lib: mean(lib) };
}, [fleetSlots, win]);
// Metric-driven mumP2P & libP2P arrival: the plain average (Avg mode) or the
// P50/P80/P95 percentile across ALL (operator × slot) samples in the window —
// this is what the metric selector drives. P50 = typical slot, P95 = slow-tail.
// Both cards read from this so they reflect whatever metric is selected.
const pctlArr = React.useMemo(() => {
if (pctl === 'avg') return { mum: avg.mum, lib: avg.lib };
const mumVals = [], libVals = [];
const n = fleetSlots.length;
for (let i = Math.max(0, n - win); i < n; i++) {
perValidator.forEach(pv => { const s = pv.slots && pv.slots[i]; if (s) { if (Number.isFinite(s.mumP2PArrival)) mumVals.push(s.mumP2PArrival); if (Number.isFinite(s.libP2PArrival)) libVals.push(s.libP2PArrival); } });
}
return { mum: mumVals.length ? percentile(mumVals, pctl) : null, lib: libVals.length ? percentile(libVals, pctl) : null };
}, [fleetSlots, perValidator, win, pctl, avg]);
// Advantage = the gap between the two shown arrivals, so the cards stay consistent.
const pctlAdv = (Number.isFinite(pctlArr.mum) && Number.isFinite(pctlArr.lib)) ? pctlArr.lib - pctlArr.mum : null;
// Window-reactive headline stats for the fleet-snapshot card (animate on change).
const winPct = strip.length ? Math.round(strip.filter(b => b.adv >= 0).length / strip.length * 100) : 0;
const leadMs = (avg.mum != null && avg.lib != null) ? Math.round(avg.lib - avg.mum) : 0;
const activeBar = hoverBar || pinnedBar;
// Anchor to the bar centre, flipping near the edges so a wide tip never overflows
// (first bars left-anchor, last bars right-anchor) — clamps within the strip.
const tipCenter = activeBar ? (activeBar.i + 0.5) / Math.max(1, strip.length) * 100 : 50;
const tipLeft = Math.min(98, Math.max(2, tipCenter)).toFixed(2) + '%';
const tipTx = tipCenter < 22 ? 'translateX(0)' : tipCenter > 78 ? 'translateX(-100%)' : 'translateX(-50%)';
const sign = (v) => v == null ? 'N/A' : (v > 0 ? '+' : v < 0 ? '−' : '') + Math.abs(Math.round(v)) + ' ms';
const msv = (v) => v == null ? 'N/A' : Math.round(v).toLocaleString('en-US') + ' ms';
// Clear any hovered/pinned bar when the window changes (indices shift).
React.useEffect(() => { setHoverBar(null); setPinnedBar(null); }, [win]);
return (
{/* Chain selection lives ONLY in the nav (single source of truth) — the
old in-page duplicate toggle was removed per the project audit. */}
{/* Every figure on this page derives from the TELEMETRY fixture, and until a
paired per-slot source exists that is a fact a reader needs on the page
itself rather than buried in a tooltip. The measured numbers are on the
Overview. */}
sample dataPer-slot figures on this page run on a demonstration series, not the measured performance report. The measured results are on the Overview.
{/* Single page-level filter/measurement-basis toolbar. Left = the one
contextual fact (connected operators, count-up preserved); right = the
real Percentile + Window segmented controls (formerly duplicated in the
card header AND restated read-only in the left rail). One control
surface now governs the whole page. */}
Measurement basis
Connected operators
Metric
{PCTLS.map(pp => )}
Window
{WINDOWS.map(w => )}
{/* While a strip bar is active, lift the whole body above the filter bar
(z-index 25) so the hover tooltip escapes it — the panel's own z-index is
otherwise trapped inside this body's stacking context. Reverts when idle so
the filter bar's own "?" tooltips still overlay the content below it. */}
{/* Preview mode is user-triggered and would otherwise trap the view
(the overlay covers the toggle) — give it a ✕ to dismiss. */}
{previewLoading && (
)}
)}
{(
{/* per-slot bar strip — hover or click a bar for detail */}
{/* Both cards read the same TELEMETRY fixture as the strip above, not
the measured report. The second is the aggregate result: how often
mumP2P won and by how much (moved off the Fleet snapshot). */}
{/* Table A — arrival vs arrival at gateway */}
mump2p arrival vs libp2p arrival
mump2plibp2p
Slot
mump2p arrival
libp2p arrival
mump2p advantage
{tableA.map(r => {
// One column per metric — each a coloured value + a mini-bar on a
// grey track, scaled to that column's window max. mumP2P (green)
// and libP2P (peach) sit in their own columns, so every ms value
// is paired with its own bar. The advantage column states the
// exact multiple with a green bar scaled to the window's best.
const mult = (Number.isFinite(r.mum) && Number.isFinite(r.lib) && r.mum > 0) ? r.lib / r.mum : null;
const mumW = Number.isFinite(r.mum) ? Math.min(100, Math.max(2, r.mum / raceScales.arrival * 100)) : 0;
const libW = Number.isFinite(r.lib) ? Math.min(100, Math.max(2, r.lib / raceScales.arrival * 100)) : 0;
const advW = mult == null ? 0 : Math.min(100, Math.max(3, mult / raceScales.mult * 100));
return (
{(() => {
const s = VAL.getPropagationStatus ? VAL.getPropagationStatus() : null;
if (s === 'off') return
Paused
;
if (s === 'on') return
Live
;
// Unknown: never a guess either way.
return
—
;
})()}
{/* Network status: the map + live-status card. The old "Network status"
heading was removed — the card's own "NETWORK STATUS · LIVE" header
already labels this region, so the map sits directly under the header. */}
{/* ─── Performance ─── */}
Performance
{(() => {
const { validatorRows } = fleetSnapshot;
return (
{/* The Overview carries no snapshot cadence: the measured report is not on
that clock. */}
{/* Left: top validators by stake · Right: fleet-wide averages */}
{/* The operator list is temporarily hidden: its per-operator
"mumP2P connected ETH" is derived from mock stake, so the table
claims a per-validator figure nothing measures. ValidatorRankingTable
and OperatorDirectory are left intact — restoring the list is a
revert, not a re-implementation. The report now has the full
content width to itself. */}
);
})()}
{/* Announced-partner directory — the full roster, searchable. */}
Validators and staking protocols using mump2p to propagate faster
{directoryShown.length ? (
{directoryShown.map((v, i) => {
const delay = dirDelays[i] || '0s';
const site = partnerSite(v);
// Plain tile when an operator has no site on record.
const Tag = site ? 'a' : 'div';
return (
{v.name}
{site ? : null}
);
})}
