|
| 1 | +import { useEffect, useMemo, useState } from 'react'; |
| 2 | +import { Link, useSearchParams } from 'react-router-dom'; |
| 3 | +import type { CandidateAttempt, ProjectCandidateData, ValidationKind } from '../../lib/projectCandidateOverview'; |
| 4 | +export { useProjectCandidateData } from '../../lib/projectCandidateOverview'; |
| 5 | + |
| 6 | +const stageLabels: Record<ValidationKind, string> = { monomer: 'Monomer', trimer1: 'Trimer · 1 binder', trimer3: 'Trimer · 3 binders', other: 'Other validation' }; |
| 7 | +const failed = (a: CandidateAttempt) => a.status === 'failed' || a.status === 'cancelled'; |
| 8 | +function AttemptLinks({ attempts }: { attempts: CandidateAttempt[] }) { |
| 9 | + if (!attempts.length) return <span className="text-content-muted" title="No linked result in this inventory; this does not establish that it was not run.">—</span>; |
| 10 | + return <ul className="space-y-2">{attempts.map((a, index) => <li key={a.id}> |
| 11 | + <Link className="text-accent hover:underline" to={a.href} title={`Job ${a.id}${a.parentId ? `; recorded parent ${a.parentId}` : ''}${a.retryOf ? `; retry of ${a.retryOf}` : ''}`}> |
| 12 | + {a.status === 'completed' ? 'View result' : a.status} {attempts.length > 1 ? index + 1 : ''} |
| 13 | + </Link><div className="text-xs text-content-secondary">{a.model}{a.retryOf ? ' · retry' : ''}</div> |
| 14 | + </li>)}</ul>; |
| 15 | +} |
| 16 | +export function ProjectCandidateOverview({ data, onOpenRecords }: { data: ProjectCandidateData; onOpenRecords: () => void }) { |
| 17 | + const [params, setParams] = useSearchParams(); |
| 18 | + const [query, setQuery] = useState(() => params.get('candidate_search') ?? ''); |
| 19 | + const [source, setSource] = useState(() => params.get('candidate_source') ?? ''); |
| 20 | + const [family, setFamily] = useState(() => params.get('candidate_family') ?? ''); |
| 21 | + // Keep typing synchronous; router navigation may be scheduled as a transition. |
| 22 | + // Persist the committed filters for result -> Back and cold reopening. |
| 23 | + useEffect(() => { |
| 24 | + const next = new URLSearchParams(params); |
| 25 | + for (const [key, value] of Object.entries({ candidate_search: query, candidate_source: source, candidate_family: family })) { |
| 26 | + if (value) next.set(key, value); else next.delete(key); |
| 27 | + } |
| 28 | + if (next.toString() !== params.toString()) setParams(next, { replace: true }); |
| 29 | + }, [query, source, family, params, setParams]); |
| 30 | + const families = useMemo(() => [...new Map(data.candidates.filter(c => !source || c.sourceId === source).map(c => [c.family, c.familyLabel])).entries()], [data.candidates, source]); |
| 31 | + const candidates = data.candidates.filter(c => (!source || c.sourceId === source) && (!family || c.family === family) |
| 32 | + && `${c.sourceLabel} ${c.familyLabel} ${c.variant} ${c.nativeId} ${c.length ?? ''}`.toLowerCase().includes(query.toLowerCase().trim())); |
| 33 | + return <section className="w-full min-w-0 space-y-5 p-4 md:p-6" aria-label="Candidate overview"> |
| 34 | + <header className="flex flex-wrap items-start justify-between gap-4"> |
| 35 | + <div><h2 className="text-xl font-semibold">Candidates with validation work</h2> |
| 36 | + <p className="mt-1 text-sm text-content-secondary">Compare the same candidate across target states. These are related validations, not a causal parent chain.</p></div> |
| 37 | + <button type="button" onClick={onOpenRecords} className="rounded border border-border-primary px-3 py-2 text-sm">All project records</button> |
| 38 | + </header> |
| 39 | + <div className="flex flex-wrap gap-3">{data.sources.map((s, index) => <Link key={s.id} to={`/designs/${encodeURIComponent(s.id)}`} title={s.label} |
| 40 | + className="rounded-lg border border-border-primary bg-surface-secondary px-4 py-3 text-sm hover:border-accent"> |
| 41 | + <span className="block font-medium">{s.label.length <= 60 ? s.label : `BC2 source ${index + 1}`}</span><span className="text-accent">Open all original BC2 outputs →</span> |
| 42 | + </Link>)}</div> |
| 43 | + {data.errors.length > 0 && <div role="alert" className="rounded border border-amber-700 p-3 text-sm">Some native reads are unavailable. This is a partial overview; use Records or refresh to retry.<ul>{data.errors.map(e => <li key={e}>{e}</li>)}</ul></div>} |
| 44 | + <div className="flex flex-wrap items-end gap-3"> |
| 45 | + <label className="min-w-48 flex-1 text-sm">Search candidates<input aria-label="Search candidates" value={query} onChange={e => setQuery(e.target.value)} placeholder="Family, variant, length or native ID" className="mt-1 block w-full rounded border border-border-primary bg-surface p-2" /></label> |
| 46 | + <label className="text-sm">Source / site<select aria-label="Source / site" value={source} onChange={e => { setSource(e.target.value); setFamily(''); }} className="mt-1 block rounded border border-border-primary bg-surface p-2"><option value="">All sources</option>{data.sources.map((s, i) => <option key={s.id} value={s.id}>{s.label.length <= 60 ? s.label : `BC2 source ${i + 1}`}</option>)}</select></label> |
| 47 | + <label className="text-sm">Family<select aria-label="Family" value={family} onChange={e => setFamily(e.target.value)} className="mt-1 block rounded border border-border-primary bg-surface p-2"><option value="">All families</option>{families.map(([id, label]) => <option key={id} value={id}>{label}</option>)}</select></label> |
| 48 | + </div> |
| 49 | + <p className="text-sm text-content-secondary">Showing {candidates.length} of {data.candidates.length} candidates with linked validation work. Original output links include candidates outside this table. Completed means execution completed, not scientific acceptance.</p> |
| 50 | + <div className="w-full overflow-x-auto rounded-lg border border-border-primary"> |
| 51 | + <table className="w-full min-w-[980px] text-left text-sm"> |
| 52 | + <caption className="sr-only">Original BC2 candidates and their independently linked validation results</caption> |
| 53 | + <thead className="bg-surface-secondary"><tr>{['Source / site', 'Candidate', 'Original BC2 candidate', 'Monomer result', 'Trimer · 1 binder', 'Trimer · 3 binders', 'Other / history'].map(h => <th key={h} scope="col" className="px-4 py-3 font-medium">{h}</th>)}</tr></thead> |
| 54 | + <tbody>{candidates.map(c => <tr key={c.key} className="border-t border-border-primary align-top"> |
| 55 | + <td className="max-w-48 px-4 py-4"><span title={c.sourceLabel}>{c.sourceLabel.length <= 60 ? c.sourceLabel : `BC2 source ${data.sources.findIndex(s => s.id === c.sourceId) + 1}`}</span></td> |
| 56 | + <th scope="row" className="px-4 py-4 font-normal"><div className="font-semibold">{c.familyLabel}</div><div>{c.variant}{c.length !== null ? ` · ${c.length} aa` : ''}</div></th> |
| 57 | + <td className="max-w-56 px-4 py-4"><Link to={c.href} className="text-accent hover:underline">Open exact candidate</Link><details className="mt-2 text-xs text-content-secondary"><summary className="cursor-pointer">Native identity</summary><code className="break-all">{c.nativeId}</code></details></td> |
| 58 | + {(['monomer', 'trimer1', 'trimer3'] as const).map(kind => <td key={kind} className="px-4 py-4"><AttemptLinks attempts={c.attempts.filter(a => a.kind === kind && !failed(a))} /></td>)} |
| 59 | + <td className="px-4 py-4">{c.attempts.some(a => a.kind === 'other' && !failed(a)) && <details><summary className="cursor-pointer">Other validation</summary><AttemptLinks attempts={c.attempts.filter(a => a.kind === 'other' && !failed(a))} /></details>} |
| 60 | + {c.attempts.some(failed) ? <details className="mt-1"><summary className="cursor-pointer text-content-secondary">Failed / cancelled ({c.attempts.filter(failed).length})</summary>{c.attempts.filter(failed).map(a => <div key={a.id} className="mt-2"><span className="text-xs text-content-secondary">{stageLabels[a.kind]}</span><AttemptLinks attempts={[a]} /></div>)}</details> : '—'}</td> |
| 61 | + </tr>)}</tbody> |
| 62 | + </table> |
| 63 | + {!candidates.length && <p className="p-6 text-content-secondary">No candidates match this view. Other work and unresolved candidate links remain in Records.</p>} |
| 64 | + </div> |
| 65 | + <p className="text-xs text-content-secondary">“—” means no linked result shown, not “not run”. {data.unlinkedJobCount > 0 ? `${data.unlinkedJobCount} related jobs could not be assigned to an exact candidate here. ` : ''}Other sources, target references and full provenance remain in <button type="button" onClick={onOpenRecords} className="text-accent underline">Records</button>.</p> |
| 66 | + </section>; |
| 67 | +} |
0 commit comments