/* Analysis page — live data version.
*
* Renders strictly from the adapted scenario object (which mirrors the v1
* lineage payload + manifest distributions). Take-aways are derived from
* the data itself instead of being scenario-specific hardcoded copy.
*/
const { useState: useStateA, useMemo: useMemoA } = React;
function AnalysisPage({ scenario, loading, err, onBack, onSim }) {
const [sortBy, setSortBy] = useStateA("primary");
const [sortDir, setSortDir] = useStateA("desc");
React.useEffect(() => { setSortBy("primary"); setSortDir("desc"); }, [scenario?.id]);
// Derive everything used by the useMemos with null-safe defaults *before*
// any early return. Hooks must run in the same order on every render.
const SCENARIO = scenario;
const BRANCHES = scenario?.branches || [];
const NESTED = scenario?.nested || [];
const OUTCOME_SCHEMA = scenario?.outcome_schema || [];
const allBranches = [...BRANCHES, ...NESTED.map(n => ({ ...n, nested: true }))];
if (scenario?.rootBranch) allBranches.push({ ...scenario.rootBranch, isRootContinuation: true });
const validBranches = allBranches.filter(b => b.valid);
const primary = scenario?.primary;
const primarySchema = OUTCOME_SCHEMA.find(o => o.name === primary);
const primaryRange = primarySchema?.range || [0, 1];
const isPctOutcome = primaryRange[1] === 1 && primaryRange[0] === 0;
// Headline aggregate from server-provided distribution if available;
// otherwise compute on the fly from valid branches.
const headline = useMemoA(() => {
const serverDist = primary && SCENARIO ? (SCENARIO.distributions || {})[primary] : null;
if (serverDist) {
const vals = serverDist.values || [];
const variance = vals.length > 1
? vals.reduce((a, b) => a + (b - serverDist.mean) ** 2, 0) / (vals.length - 1)
: 0;
const se = Math.sqrt(variance / Math.max(1, vals.length));
return {
mean: serverDist.mean,
median: serverDist.median,
p10: vals[Math.floor(0.1 * (vals.length - 1))] ?? serverDist.min,
p90: vals[Math.floor(0.9 * (vals.length - 1))] ?? serverDist.max,
min: serverDist.min,
max: serverDist.max,
n: serverDist.n,
vals,
ciLow: Math.max(primaryRange[0], serverDist.mean - 1.96 * se),
ciHigh: Math.min(primaryRange[1], serverDist.mean + 1.96 * se),
};
}
const vals = validBranches
.map(b => b.outcomes?.[primary])
.filter(v => typeof v === "number");
const n = vals.length;
if (!n) return { mean: 0, median: 0, p10: 0, p90: 0, min: 0, max: 0, n: 0, vals: [], ciLow: 0, ciHigh: 0 };
const sorted = [...vals].sort((a,b) => a-b);
const mean = vals.reduce((a,b) => a+b, 0) / n;
const median = n % 2 ? sorted[(n-1)/2] : (sorted[n/2 - 1] + sorted[n/2]) / 2;
const pct = p => sorted[Math.max(0, Math.min(n-1, Math.round(p*(n-1))))];
const variance = vals.reduce((a,b) => a + (b-mean)**2, 0) / Math.max(1, n-1);
const se = Math.sqrt(variance / n);
return {
mean, median, p10: pct(0.1), p90: pct(0.9), min: sorted[0], max: sorted[n-1], n,
vals: sorted,
ciLow: Math.max(primaryRange[0], mean - 1.96 * se),
ciHigh: Math.min(primaryRange[1], mean + 1.96 * se),
};
}, [scenario]);
// Derive take-aways from the data itself instead of hardcoded per-scenario copy.
const takeaways = useMemoA(() => {
const out = [];
// 1. spread / uncertainty
const spread = headline.max - headline.min;
if (headline.n >= 3) {
const consensus = spread < 0.25 ? "tight" : spread < 0.5 ? "moderate" : "wide";
out.push({
num: headline.n + " branches",
title: `${consensus[0].toUpperCase() + consensus.slice(1)} consensus`,
body: `${(headline.min*100).toFixed(0)}–${(headline.max*100).toFixed(0)}% range across the ensemble. Median ${isPctOutcome ? (headline.median*100).toFixed(0)+'%' : headline.median.toFixed(1)}, mean ${isPctOutcome ? (headline.mean*100).toFixed(0)+'%' : headline.mean.toFixed(1)}.`,
});
}
// 2. dominant categorical
const boolStats = OUTCOME_SCHEMA.filter(o => (o.type||"").toLowerCase() === "bool").map(s => {
const vals = validBranches.map(b => b.outcomes?.[s.name]).filter(v => typeof v === "boolean");
const n = vals.length;
const trueN = vals.filter(v => v).length;
return { name: s.name, n, trueN, p: n ? trueN / n : 0 };
});
const topBool = boolStats.filter(b => b.n >= 2).sort((a,b) => Math.abs(b.p - 0.5) - Math.abs(a.p - 0.5))[0];
if (topBool) {
out.push({
num: `${topBool.trueN}/${topBool.n}`,
title: topBool.p >= 0.5 ? `${topBool.name.replace(/_/g, " ")} fires` : `${topBool.name.replace(/_/g, " ")} rare`,
body: `${(topBool.p*100).toFixed(0)}% of valid branches showed this signal — ${topBool.p >= 0.5 ? "robust feature, not a swing variable" : "an outlier signal worth flagging"}.`,
});
}
// 3. validity
const invalidN = allBranches.length - validBranches.length;
if (invalidN > 0) {
out.push({
num: `${invalidN}/${allBranches.length}`,
title: "Invalidated runs",
body: `${invalidN} branch${invalidN === 1 ? "" : "es"} dropped by validity checks. Without them, the ensemble would be artificially noisy.`,
});
} else if (allBranches.length > 0) {
out.push({
num: `${allBranches.length}/${allBranches.length}`,
title: "All branches valid",
body: "No branches dropped by post-hoc validity checks — the cohort is clean.",
});
}
return out;
}, [scenario]);
// Dynamic table columns from schema
const tableCols = OUTCOME_SCHEMA
.filter(o => o.name !== primary && ["float","int","number"].includes((o.type||"").toLowerCase()))
.map(o => ({ key: o.name, label: o.name.replace(/_/g, " "),
fmt: (o.range && o.range[1] === 1 && o.range[0] === 0) ? "pct" : "f1" }))
.slice(0, 4);
const tagCols = OUTCOME_SCHEMA
.filter(o => (o.type||"").toLowerCase() === "bool")
.map(o => ({ key: o.name, label: o.name.split("_")[0] }));
const sortedBranches = useMemoA(() => {
const arr = [...allBranches];
arr.sort((a, b) => {
let av, bv;
if (sortBy === "primary") { av = a.outcomes?.[primary]; bv = b.outcomes?.[primary]; }
else if (sortBy === "label") { av = a.label; bv = b.label; }
else { av = a.outcomes?.[sortBy]; bv = b.outcomes?.[sortBy]; }
if (av == null) return 1;
if (bv == null) return -1;
const cmp = av < bv ? -1 : av > bv ? 1 : 0;
return sortDir === "asc" ? cmp : -cmp;
});
return arr;
}, [sortBy, sortDir, scenario]);
const setSort = (col) => {
if (sortBy === col) setSortDir(sortDir === "asc" ? "desc" : "asc");
else { setSortBy(col); setSortDir("desc"); }
};
const fmt = (v, f) => v == null ? "—" : f === "pct" ? (v*100).toFixed(0)+"%" : v.toFixed(1);
// Auto-derived "Read" line from data shape
const readShort = useMemoA(() => {
if (headline.n === 0) return "No numeric outcomes yet — waiting on classifier.";
const polarity = headline.median > 0.66 ? "high" : headline.median > 0.33 ? "moderate" : "low";
const widthDesc = (headline.max - headline.min) > 0.5 ? "with sharp disagreement" : "with broad agreement";
if (!SCENARIO) return "";
return `Across ${headline.n} valid branch${headline.n === 1 ? "" : "es"}, the ensemble assigns a ${polarity} ${SCENARIO.primary_label} ${widthDesc} (${(headline.min*100).toFixed(0)}–${(headline.max*100).toFixed(0)}%).`;
}, [scenario]);
// Early returns must come AFTER all hooks so render-to-render hook count
// stays constant. Otherwise React unmounts the tree → white screen.
if (err) {
return (
!
Failed to load: {err}
);
}
if (loading || !scenario) {
return (
…
Loading run…
);
}
if (!scenario.manifest_present) {
return (
Run analysis · {scenario.name}
Awaiting classifier
The ensemble is still running ({scenario.phase}). Outcomes are
computed once the classifier sweeps each branch — this page
auto-fills the moment that happens.