/* Workspace panels — study overview, sample map, files, readiness, joined table, methods, report */ const { useState, useMemo, useEffect, useRef } = React; /* ========== sidebar + frame ========== */ const PANELS = [ { key: "overview", label: "Study overview", icon: "study" }, { key: "subjects", label: "Subject / sample map", icon: "subjects"}, { key: "files", label: "Assay files", icon: "files" }, { key: "readiness", label: "Metadata readiness", icon: "ready" }, { key: "endpoints", label: "Joined endpoint table", icon: "table" }, { key: "methods", label: "Methods + provenance", icon: "doc" }, { key: "report", label: "Report preview", icon: "report" }, ]; function Sidebar({ active, setActive, scores }) { return ( ); } function SidebarIcon({ kind, active }) { const c = active ? "var(--brand-700)" : "var(--ink-500)"; const props = { width: 15, height: 15, fill: "none", stroke: c, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" }; switch (kind) { case "study": return ; case "subjects": return ; case "files": return ; case "ready": return ; case "table": return ; case "doc": return ; case "report": return ; } return null; } function PanelHeader({ title, subtitle, eyebrow, actions }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{subtitle &&

{subtitle}

}
{actions &&
{actions}
}
); } /* ========== STUDY OVERVIEW ========== */ function StudyOverviewPanel() { const counts = useMemo(() => { const c = {}; DEMO_STUDY.groups.forEach(g => c[g] = DEMO_SUBJECTS.filter(s => s.group === g).length); return c; }, []); const assayCounts = { qPCR: DEMO_SAMPLES.filter(s => s.assayType === "qPCR").length, ELISA: DEMO_SAMPLES.filter(s => s.assayType === "ELISA").length, behavior: DEMO_SAMPLES.filter(s => s.assayType === "behavior").length, }; return (
} />

Cohort

{DEMO_STUDY.cohortSize} subjects
{DEMO_STUDY.groups.map((g, i) => { const variant = g === "Sham" ? "ink" : g === "TBI" ? "block" : "bench"; const styles = { ink: { bg: "var(--ink-100)", color: "var(--ink-700)", bar: "var(--ink-400)" }, block: { bg: "var(--block-bg)", color: "var(--block)", bar: "var(--block)" }, bench: { bg: "var(--brand-50)", color: "var(--brand-700)", bar: "var(--brand-500)" }, }[variant]; return (
{g}
{counts[g]}
mice
{DEMO_SUBJECTS.filter(s => s.group === g && s.sex === "F").length}F · {DEMO_SUBJECTS.filter(s => s.group === g && s.sex === "M").length}M {DEMO_SUBJECTS.filter(s => s.group === g && !s.sex).length > 0 && ( · {DEMO_SUBJECTS.filter(s => s.group === g && !s.sex).length} missing )}
); })}
Timepoints
{TIMEPOINTS.map(tp => (
{tp}
{DEMO_SAMPLES.filter(s => s.timepoint === tp).length} samples
))}

Assays

{DEMO_SAMPLES.length} samples
{[ { name: "qPCR", count: assayCounts.qPCR, src: "bench", file: "qpcr_run_0524.rdml", desc: "IL6, TNFα · GAPDH ref · 4 plates" }, { name: "ELISA", count: assayCounts.ELISA, src: "bench", file: "il6_tnfa_elisa_plate.csv", desc: "IL-6 + TNFα · pg/mL" }, { name: "Behavior", count: assayCounts.behavior, src: "vision", file: "open_field_summary.csv", desc: "Open field · distance, freezing · native attach" }, ].map((a, i) => (
{a.src}
{a.name}
{a.file} · {a.desc}
{a.count}
))}
); } function ReadinessGauge() { const checks = DEMO_READINESS; const total = checks.length - 1; // exclude '0 blocking issues' meta-check const complete = checks.filter(c => c.severity === "complete").length; return (
Metadata readiness
{DEMO_STUDY.readinessScore}
/ 100
{complete}
complete
{checks.filter(c => c.severity === "warning").length}
warnings
0
blocking
); } function RecentActivity() { const items = [ ["09:42", "Joined endpoint table refreshed", "system"], ["09:40", "open_field_summary.csv attached", "vision"], ["09:38", "il6_tnfa_elisa_plate.csv parsed (192 rows)", "bench"], ["09:36", "qpcr_run_0524.rdml parsed (384 wells)","bench"], ["09:30", "Study created from sample_map.csv", "bench"], ]; return (
Activity
    {items.map(([t, msg, src], i) => (
  1. {t} {msg}
    2. ))}
); } function NextSteps() { const steps = [ { sev: "warning", text: "Add timepoint to 2 qPCR samples", target: "subjects" }, { sev: "warning", text: "Record sex for subject M19", target: "subjects" }, { sev: "complete", text: "ConductVision behavior attached on subject ID", target: "files" }, { sev: "complete", text: "Joined endpoint table ready to export", target: "endpoints" }, ]; return (
Next steps
); } function SeverityDot({ sev }) { const c = sev === "complete" ? "var(--ok)" : sev === "warning" ? "var(--warn)" : "var(--block)"; return ; } /* ========== SUBJECTS / SAMPLE MAP ========== */ function SubjectsPanel() { const [groupFilter, setGroupFilter] = useState("All"); const [showMissingOnly, setShowMissingOnly] = useState(false); const [openId, setOpenId] = useState(null); const samplesBySubject = useMemo(() => { const m = {}; DEMO_SAMPLES.forEach(s => { (m[s.subjectId] ||= []).push(s); }); return m; }, []); const rows = useMemo(() => { let r = DEMO_SUBJECTS; if (groupFilter !== "All") r = r.filter(s => s.group === groupFilter); if (showMissingOnly) { r = r.filter(s => { if (!s.sex) return true; const samples = samplesBySubject[s.subjectId] || []; return samples.some(x => !x.timepoint); }); } return r; }, [groupFilter, showMissingOnly, samplesBySubject]); return (
} />
{rows.map(s => { const samples = samplesBySubject[s.subjectId] || []; const missingTp = samples.filter(x => !x.timepoint).length; const status = !s.sex || missingTp > 0 ? "warning" : "ok"; const files = [...new Set(samples.map(x => x.sourceFile))]; const open = openId === s.subjectId; return ( setOpenId(open ? null : s.subjectId)} style={{ cursor: "pointer", background: open ? "var(--ink-50)" : undefined }}> {open && ( )} ); })}
Subject ID Group Sex Genotype Samples Timepoints Source files Status
{s.subjectId} {s.sex ? s.sex : missing} {s.genotype} {samples.length} {TIMEPOINTS.map(tp => { const present = samples.some(x => x.timepoint === tp); return {tp}; })}
{files.slice(0, 2).map(f => ( {f} ))} {files.length > 2 && +{files.length - 2}}
{status === "warning" ? warn : ok}
{rows.length} subjects · {rows.reduce((acc, s) => acc + (samplesBySubject[s.subjectId]?.length || 0), 0)} samples source · sample_map.csv (252 rows)
); } function SubjectDetail({ subject, samples }) { return (
Linked samples · {subject.subjectId}
{samples.map(s => (
{s.sampleId} {s.assayType}
{s.timepoint || missing tp} · {s.sourceFile}
))}
); } /* ========== FILES ========== */ function FilesPanel() { const [openFile, setOpenFile] = useState(DEMO_FILES[0].name); const file = DEMO_FILES.find(f => f.name === openFile); return (
+ Attach file } />
{DEMO_FILES.map(f => { const sel = openFile === f.name; return ( ); })}

{file.name}

{file.source} {file.kind}

{file.detail}

Uploaded
{file.uploaded}
Rows parsed
{file.rowsParsed}
Mapped samples
{file.mappedSamples}
Linked subjects
{file.linkedSubjects}
Warnings
{file.warnings}
SHA-256
7a2c…3e91
Preview (first 6 rows)
); } function FilePreview({ file }) { let rows = [], cols = []; if (file.name.startsWith("qpcr")) { cols = ["well", "sample_id", "target", "Ct", "Ct_mean", "qcFlag"]; rows = [ ["A1", "S-M01-BASELINE", "Il6", "23.42", "23.39", "ok"], ["A2", "S-M01-BASELINE", "Il6", "23.36", "23.39", "ok"], ["A3", "S-M01-BASELINE", "Tnf", "24.18", "24.20", "ok"], ["A4", "S-M01-BASELINE", "Gapdh", "18.92", "18.94", "ref"], ["A5", "S-M02-BASELINE", "Il6", "22.81", "22.79", "warn"], ["A6", "S-M02-BASELINE", "Gapdh", "18.81", "18.83", "ref"], ]; } else if (file.name.startsWith("il6_tnfa")) { cols = ["sample_id", "IL-6 (pg/mL)", "TNFα (pg/mL)", "OD450", "stdcurve"]; rows = [ ["S-M01-BASELINE", "12.4", "8.1", "0.182", "y=2.43x+0.06"], ["S-M01-24H", "11.8", "9.4", "0.176", "y=2.43x+0.06"], ["S-M13-24H", "189.2", "63.1", "0.892", "y=2.43x+0.06"], ["S-M14-24H", "203.7", "71.8", "0.971", "y=2.43x+0.06"], ["S-M25-24H", "67.4", "32.2", "0.398", "y=2.43x+0.06"], ["S-M25-7D", "41.1", "21.0", "0.249", "y=2.43x+0.06"], ]; } else if (file.name === "sample_map.csv") { cols = ["sample_id", "subject_id", "assay", "timepoint", "source_file"]; rows = [ ["S-M01-BASELINE", "M01", "qPCR", "baseline", "qpcr_run_0524.rdml"], ["S-M02-BASELINE", "M02", "qPCR", "—", "qpcr_run_0524.rdml"], ["E-M01-BASELINE", "M01", "ELISA", "baseline", "il6_tnfa_elisa_plate.csv"], ["B-M13", "M13", "behavior", "24h", "open_field_summary.csv"], ["B-M14", "M14", "behavior", "24h", "open_field_summary.csv"], ["B-M19", "M19", "behavior", "24h", "open_field_summary.csv"], ]; } else { cols = ["subject_id", "session", "distance_cm", "center_s", "freeze_n"]; rows = [ ["M01", "open-field-24h", "3142", "84.2", "3"], ["M02", "open-field-24h", "3287", "92.1", "2"], ["M13", "open-field-24h", "1842", "31.4", "11"], ["M14", "open-field-24h", "1671", "28.8", "14"], ["M25", "open-field-24h", "2491", "58.3", "7"], ["M19", "open-field-24h", "1798", "33.1", "10"], ]; } return (
{cols.map(c => )} {rows.map((r, i) => ( {r.map((v, j) => ( ))} ))}
{c}
{v}
); } /* ========== READINESS ========== */ function ReadinessPanel() { const [filter, setFilter] = useState("all"); const filtered = DEMO_READINESS.filter(c => filter === "all" || c.severity === filter); return (
{[["all","All"],["blocking","Blocking"],["warning","Warnings"],["complete","Complete"]].map(([k, l]) => ( ))}
} />
{filtered.map((c, i) => (
{c.label}
{c.file && {c.file}}

{c.detail}

{c.severity === "warning" && ( )}
))}
Overall
Analysis-ready.
Resolve 2 warnings to lift the score above 90.
Why this matters

In real labs, the analyst learns about missing timepoints from a Slack message six weeks before the grant deadline. ConductBench surfaces them at parse time.

A readiness score is not statistical confidence — it's a checklist of joinability, completeness, and provenance.

); } function ScoreRing({ value }) { const r = 52, c = 2 * Math.PI * r, off = c - (value / 100) * c; return ( {value} / 100 ); } function BigSevIcon({ severity }) { const cfg = severity === "complete" ? { bg: "var(--ok-bg)", color: "var(--ok)", glyph: "✓" } : severity === "warning" ? { bg: "var(--warn-bg)", color: "var(--warn)", glyph: "!" } : { bg: "var(--block-bg)", color: "var(--block)", glyph: "×" }; return ( {cfg.glyph} ); } /* ========== JOINED ENDPOINT TABLE ========== */ function EndpointsPanel() { const [view, setView] = useState("compact"); // compact | full const [highlight, setHighlight] = useState(true); const [groupBy, setGroupBy] = useState(null); return (
{[["compact", "Compact"], ["full", "Full"]].map(([k, l]) => ( ))}
} />
Color key: bench (qPCR · ELISA) vision (behavior) {DEMO_ENDPOINTS.length} rows
); } function EndpointTable({ view, highlight }) { const rows = DEMO_ENDPOINTS; const benchBg = highlight ? "var(--brand-50)" : "transparent"; const visionBg = highlight ? "var(--src-vision-bg)" : "transparent"; return ( {view === "full" && } {view === "full" && } {rows.map((r, i) => ( {view === "full" && } {view === "full" && } ))}
subject group timepoint distance_cm vision qpcr_fc bench elisa_pg_ml benchsample_idsmethodsqc
{r.subjectId} {r.timepoint} {r.behaviorDistanceCm ?? "—"} {r.qpcrFoldChange.toFixed(2)}× {r.elisaConcentrationPgMl}S-{r.subjectId}-{r.timepoint.toUpperCase()} · E-{r.subjectId}-{r.timepoint.toUpperCase()}2^−ΔΔCt vs sham · std curve {r.qcFlag === "ok" ? ok : {r.qcFlag}}
); } function GroupSummary() { const groups = DEMO_STUDY.groups; const tp = "24h"; const rows = groups.map(g => { const r = DEMO_ENDPOINTS.filter(x => x.group === g && x.timepoint === tp); const mean = (arr, key) => +(arr.reduce((s, x) => s + (x[key] || 0), 0) / arr.length).toFixed(2); const std = (arr, key) => { const m = mean(arr, key); return +Math.sqrt(arr.reduce((s, x) => s + Math.pow((x[key] || 0) - m, 2), 0) / arr.length).toFixed(2); }; return { group: g, n: r.length, distance: { mean: mean(r, "behaviorDistanceCm"), sem: +(std(r, "behaviorDistanceCm") / Math.sqrt(r.length)).toFixed(0) }, fc: { mean: mean(r, "qpcrFoldChange"), sem: +(std(r, "qpcrFoldChange") / Math.sqrt(r.length)).toFixed(2) }, elisa: { mean: mean(r, "elisaConcentrationPgMl"), sem: +(std(r, "elisaConcentrationPgMl") / Math.sqrt(r.length)).toFixed(1) }, }; }); return (
Group summary · 24h timepoint · mean ± SEM
{rows.map(r => (
n = {r.n}
))}
); } function SummaryRow({ label, mean, sem, color, suffix = "" }) { return (
{label} {mean}{suffix} ± {sem}
); } /* ========== METHODS / PROVENANCE ========== */ function MethodsPanel() { const [mode, setMode] = useState("short"); const [copied, setCopied] = useState(false); const text = mode === "short" ? DEMO_METHODS_SHORT : DEMO_METHODS_LONG; const copy = () => { navigator.clipboard?.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return (
{[["short","Short"],["long","Detailed"]].map(([k, l]) => ( ))}
} />
{text.split("\n\n").map((p, i) =>

{p}

)}

Provenance

4 artifacts
{DEMO_FILES.map((f, i) => (
{f.name} {f.source}
sha256 · {["7a2c…3e91", "0bb4…91ad", "1cc5…2f10", "2dd8…7bcb"][i]}
))}
Software
ConductBench v3.2
parser-qpcr v0.4.2
parser-elisa v0.3.1
join-engine v0.2.0
exported 2026-05-24T09:42:18Z
); } /* ========== REPORT PREVIEW ========== */ function ReportPanel() { return (
} />
CONDUCTBENCH · STUDY REPORT · {DEMO_STUDY.id}

{DEMO_STUDY.title}

{DEMO_STUDY.pi} · exported 2026-05-24

n = {DEMO_STUDY.cohortSize} {DEMO_STUDY.species}. Groups: {DEMO_STUDY.groups.join(", ")}. Assays: {DEMO_STUDY.assayTypes.join(", ")}. Metadata readiness 83 / 100 — analysis-ready, 2 warnings flagged in the joined record.
    {DEMO_READINESS.slice(0, 6).map((c, i) => (
  • {c.severity === "complete" ? "✓" : c.severity === "warning" ? "!" : "×"} {c.label}
    • ))}
{DEMO_ENDPOINTS.slice(0, 6).map((r, i) => ( ))}
subjectgrouptpdistanceqpcr_fcelisa
{r.subjectId} {r.group} {r.timepoint} {r.behaviorDistanceCm ?? "—"} {r.qpcrFoldChange.toFixed(2)}× {r.elisaConcentrationPgMl}
… 102 more rows in the full export.

At 24h, TBI animals showed reduced locomotion (mean 1,820 cm vs. 3,070 cm sham) and elevated IL-6 (mean 187 pg/mL vs. 12 pg/mL). The TBI + treatment group showed partial rescue across both modalities (2,510 cm; 64 pg/mL). qPCR fold change vs. sham baseline mirrored the ELISA pattern. Group differences will be tested by two-way ANOVA in the analysis phase.

{DEMO_METHODS_SHORT}
Reproducible. Every report is signed with the SHA-256 of every input file and the parser version that produced it.
); } function ReportSection({ title, children }) { return (

{title}

{children}
); } /* ========== misc ========== */ function ArrowR() { return ; } Object.assign(window, { Sidebar, PANELS, StudyOverviewPanel, SubjectsPanel, FilesPanel, ReadinessPanel, EndpointsPanel, MethodsPanel, ReportPanel, });