// hifi/center.jsx — center column composition const { useMemo: useM, useState: useSt } = React; // ── Icon primitives (inline SVG — no library needed) ───────────────── function IconSun({ size = 15, strokeWidth = 1.8 }) { return ( ); } function IconMoon({ size = 15, strokeWidth = 1.8 }) { return ( ); } // ── Top breadcrumb / actions bar ───────────────────────────────────── function TopBar({ run, ckpt, pinnedCount, diffBaselineName, onChangeBaseline, allRuns, pinnedRuns, darkMode, onToggleDark, mode, onOpenLeft, rightDocked, onOpenRight, }) { const isPhone = mode === "phone"; return (
{mode === "phone" && ( )}
{/* On phones the prefix segments are dropped to leave room for the run name — the essential identifier. */} {!isPhone && ( tracker / {run.env.split("-")[0]} / )} {run.name} @ {D.fmtStep(ckpt.step)}
{!rightDocked && ( )}
); } // ── Checkpoint navigator row (sparkbar + arrows + stats) ───────────── function CkptNav({ run, ckpt, onSelectCkpt, mode }) { const idx = run.checkpoints.findIndex((c) => c.step === ckpt.step); const total = run.checkpoints.length; const prev = () => idx > 0 && onSelectCkpt(run.checkpoints[idx - 1].step); const next = () => idx < total - 1 && onSelectCkpt(run.checkpoints[idx + 1].step); const f2 = (v) => (v == null || isNaN(v) ? "–" : Number(v).toFixed(2)); const isPhone = mode === "phone"; return (
Checkpoint {D.fmtStep(ckpt.step)} {!isPhone && ( step {idx + 1} of {total} )}
{!isPhone && }
μ ± σ {f2(ckpt.mean)}{" "} ± {f2(ckpt.std)} best {f2(ckpt.best)} worst {f2(ckpt.worst)}
); } // ── Episode picker buttons (no thumbnails) ────────────────────────── function EpisodePicker({ ckpt, selected, onSelect, mode }) { const rollouts = ckpt.rollouts; // Buttons: best, median, worst (the 3 the user explicitly asked for) const visible = ["best", "median", "worst"] .map((k) => rollouts.find((r) => r.kind === k)) .filter(Boolean); const iconMap = { best: "★", median: "◇", worst: "✕" }; const labelMap = { best: "best episode", median: "median", worst: "worst" }; const isPhone = mode === "phone"; return (
{visible.map((r) => ( ))}
); } // ── Frame-level chart pair (cumulative + metric) ───────────────────── // Pretty labels for known signal keys. Any signal present in a run's // signals.npz but not listed here falls back to its raw name. const SIGNAL_LABELS = { value: "V(s_t)", value_estimate: "V(s_t)", step_reward: "step_reward", action_logp: "action_logp", advantage: "advantage", td_error: "TD-error", entropy: "entropy", }; const signalLabel = (key) => SIGNAL_LABELS[key] || key; // Responsive height shared by the frame charts and their empty states. const CHART_FILL = "clamp(160px, calc(13vw + 55px), 320px)"; const fmtCursor = (v) => (Math.abs(v) >= 10 ? v.toFixed(0) : v.toFixed(2)); function FrameChartPair({ focalRun, focalCkpt, focalRollout, frame, setFrame, pinnedRuns, metric, setMetric, signalVersion, mode, }) { // ── Line builder — one focal line + a ghost per pinned run. Lines whose real // signal is missing are omitted (we never fabricate); the ghost slot/color // still advances per pinned run so colors stay aligned with the left rail. ── const buildLines = (sig) => { const out = []; const focalVals = D.frameSignal(focalRun, focalCkpt, focalRollout, sig); if (focalVals && focalVals.length) { out.push({ runId: focalRun.id, name: focalRun.name, values: focalVals, isFocal: true, strokeColor: RUN_LINE_STYLES[0].color, dash: null, color: "var(--ink)", }); } let gi = 0; for (const pr of pinnedRuns) { if (pr.id === focalRun.id) continue; const ls = RUN_LINE_STYLES[gi + 1] || RUN_LINE_STYLES[RUN_LINE_STYLES.length - 1]; gi++; const c = pr.checkpoints[pr.checkpoints.length - 1]; const ro = c && (c.rollouts.find((r) => r.kind === "best") || c.rollouts[0]); const vals = ro ? D.frameSignal(pr, c, ro, sig) : null; if (!vals || !vals.length) continue; out.push({ runId: pr.id, name: pr.name, values: vals, isFocal: false, strokeColor: ls.color, dash: ls.dash, color: "", }); } return out; }; // Dropdown reflects what's actually in this run's signals.npz (capabilities.signals), // minus cumulative_return which has its own dedicated chart on the left. const metricOptions = useM( () => (focalRun.capabilities?.signals || []).filter( (k) => k !== "cumulative_return", ), [focalRun], ); // The globally-selected metric may not exist for this run — fall back to the first. const activeMetric = metricOptions.includes(metric) ? metric : metricOptions[0]; const cumLines = useM( () => buildLines("cumulative_return"), [focalRun, focalCkpt, focalRollout, pinnedRuns, signalVersion], ); const metricLines = useM( () => buildLines(activeMetric), [ focalRun, focalCkpt, focalRollout, pinnedRuns, activeMetric, signalVersion, ], ); const cumFocal = cumLines.find((l) => l.isFocal); const metricFocal = metricLines.find((l) => l.isFocal); const cumAtCursor = cumFocal && cumFocal.values[Math.min(frame, cumFocal.values.length - 1)]; const metricAtCursor = metricFocal && metricFocal.values[Math.min(frame, metricFocal.values.length - 1)]; const metricLabel = activeMetric ? signalLabel(activeMetric) : "per-frame signal"; const isPhone = mode === "phone"; return (
{/* cumulative_return (left) — its own dedicated chart */}
cumulative_return {cumLines.length} run{cumLines.length === 1 ? "" : "s"} {cumAtCursor != null && ( @{frame}: {fmtCursor(cumAtCursor)} )}
{/* selectable per-frame metric (right) */}
{metricLabel} per-frame {metricAtCursor != null && ( @{frame}: {fmtCursor(metricAtCursor)} )} {metricOptions.length > 0 && ( )}
); } // Bare version (no header) — used when the parent renders its own title row. // Renders a missing-data placeholder when there's no focal signal to draw, // rather than fabricating a curve. function FrameLevelChartBare({ lines, frame, focalLength, setFrame, height = 160, emptyTitle = "no signal data", emptyDetail, }) { const svgRef = React.useRef(null); const [hover, setHover] = useSt(null); // { frame: int, pct: float 0-1 } // Measure the real rendered size so the SVG draws at 1:1 (1 unit = 1px), // avoiding the preserveAspectRatio="none" stretch that distorted text/strokes. const [boxRef, size] = useMeasuredSize({ width: 480, height }); const clipId = useM(() => nextClipId(), []); const hasFocal = lines.some( (l) => l.isFocal && l.values && l.values.length, ); const w = size.width; const h = size.height; const padL = 32, padR = 8, padT = 8, padB = 18; const innerW = w - padL - padR; const innerH = h - padT - padB; const xMax = useM( () => Math.max(...lines.map((l) => l.values.length), focalLength || 0), [lines, focalLength], ); // Full scan — sampling missed extrema that the drawn path still rendered, // spilling the line out of the plot box. const [yLo, yHi] = useM(() => { let lo = Infinity, hi = -Infinity; for (const ln of lines) for (let i = 0; i < ln.values.length; i++) { if (ln.values[i] < lo) lo = ln.values[i]; if (ln.values[i] > hi) hi = ln.values[i]; } if (lo === Infinity) { lo = 0; hi = 1; } const pad = (hi - lo) * 0.08; return [lo - pad, hi + pad]; }, [lines]); // No focal signal for this rollout/metric — show a missing-data placeholder // (after all hooks, to satisfy the Rules of Hooks). if (!hasFocal) { return ( ); } const xScale = (f) => padL + (f / xMax) * innerW; const yScale = (v) => padT + (1 - (v - yLo) / (yHi - yLo)) * innerH; const yTicks = [yHi, (yLo + yHi) / 2, yLo]; const step = xMax > 1500 ? 400 : xMax > 500 ? 200 : 100; const xTicks = [0]; for (let i = step; i < xMax; i += step) xTicks.push(i); xTicks.push(xMax); const onPointer = (e) => { if (!svgRef.current || !setFrame) return; const rect = svgRef.current.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * w; const f = Math.max( 0, Math.min(focalLength - 1, Math.round(((x - padL) / innerW) * xMax)), ); setFrame(f); }; const onHover = (e) => { if (!svgRef.current) return; const rect = svgRef.current.getBoundingClientRect(); const pct = (e.clientX - rect.left) / rect.width; const xVB = pct * w; const f = Math.max( 0, Math.min(xMax - 1, Math.round(((xVB - padL) / innerW) * xMax)), ); setHover({ frame: f, pct }); }; const fmt = (v) => Math.abs(v) >= 100 ? v.toFixed(0) : Math.abs(v) >= 10 ? v.toFixed(1) : v.toFixed(2); return (
startDrag(e, onPointer, "col-resize")} onMouseMove={onHover} onMouseLeave={() => setHover(null)} > {yTicks.map((v, i) => ( {fmt(v)} ))} {yLo < 0 && yHi > 0 && ( )} {xTicks.map((f, i) => ( {f >= 1000 ? `${(f / 1000).toFixed(f % 1000 === 0 ? 0 : 1)}k` : f} ))} {/* Ghost lines */} {lines .filter((l) => !l.isFocal) .map((ln, i) => { const cls = ["ghost-1", "ghost-2", "ghost-3"][ i % 3 ]; return ( ); })} {lines .filter((l) => l.isFocal) .map((ln) => ( ))} {/* Hover crosshair */} {hover != null && ( )} {focalLength > 0 && ( )}
{hover != null && ( )}
); } // ── Loss strip (3 small charts) ───────────────────────────────────── function LossStrip({ run, ckpt }) { const totalSteps = run.steps; const ckptStepFrac = totalSteps > 0 ? ckpt.step / totalSteps : 1; const losses = useM(() => { const tm = run.trainMetrics; if (!tm || Object.keys(tm).length === 0) return {}; // Skip non-loss metrics; prefer the most informative ones const skip = new Set(["sps", "epoch", "wall_time_s"]); const preferred = [ "policy_loss", "value_loss", "entropy", "q1_loss", "q2_loss", ]; const available = Object.keys(tm).filter((k) => !skip.has(k)); const ordered = [ ...preferred.filter((k) => available.includes(k)), ...available.filter((k) => !preferred.includes(k)), ].slice(0, 3); const result = {}; for (const key of ordered) { const entries = tm[key]; const arr = new Float32Array(entries.length); entries.forEach((e, i) => { arr[i] = e.value; }); result[key] = arr; } return result; }, [run]); const metricKeys = Object.keys(losses); const valAt = (arr) => arr[ Math.min( Math.floor(ckptStepFrac * (arr.length - 1)), arr.length - 1, ) ]; return (
{metricKeys.length === 0 ? ( ) : (
{metricKeys.map((key, i) => ( {i > 0 &&
} ))}
)}
); } window.TopBar = TopBar; window.CkptNav = CkptNav; window.EpisodePicker = EpisodePicker; window.FrameChartPair = FrameChartPair; window.LossStrip = LossStrip;