/* global React */
// Small primitives: icons, Chip, ConsensioMark, CopyButton, Skeleton helpers
const { useState, useEffect, useRef, useCallback, useMemo } = React;
// ── Icons (16px stroke, hairline) ─────────────────────────────────────────────
const Icon = ({ d, size = 16, stroke = 1.5, fill = 'none' }) => (
);
const I = {
home: ,
folder: ,
bell: ,
bolt: ,
search: ,
chevronR: ,
chevronD: ,
chevronL: ,
copy: ,
external: ,
user: ,
plus: ,
filter: ,
star: ,
flask: ,
paper: ,
check: ,
alert: ,
clock: ,
x: ,
cog: ,
helix: null, // drawn manually below
};
// Consensio brand mark — abstract DNA double helix in brand gradient
const ConsensioMark = ({ size = 24 }) => (
);
const ConsensioWordmark = ({ size = 18 }) => (
);
// ── Chip with semantic color ─────────────────────────────────────────────────
const ACCENT = {
info: 'var(--accent-info)',
success: 'var(--accent-success)',
warning: 'var(--accent-warning)',
danger: 'var(--accent-danger)',
paper: 'var(--accent-paper)',
request: 'var(--accent-request)',
neutral: 'var(--text-secondary)',
};
const Chip = ({ tone = 'neutral', children, dot = true, style = {} }) => {
const c = ACCENT[tone] || ACCENT.neutral;
return (
{dot && }
{children}
);
};
// ── CopyButton ───────────────────────────────────────────────────────────────
const CopyButton = ({ value, label = 'Copy' }) => {
const [copied, setCopied] = useState(false);
const onClick = (e) => {
e.stopPropagation();
try { navigator.clipboard?.writeText(value); } catch (_) {}
setCopied(true);
setTimeout(() => setCopied(false), 1400);
};
return (
);
};
// ── Variant string renderer — monospace, never truncated, copy affordance ────
const Variant = ({ gene, hgvs, protein }) => (
{gene}
{hgvs}
{protein && {protein}}
);
// ── Skeleton row factory for the AI evidence table ───────────────────────────
const SkeletonRow = ({ cols }) => (
{cols.map((w, i) => (
|
|
))}
);
// ── FlagPill — dual encoding (icon + color + text), per flag taxonomy ────────
// PAPER (indigo, paper icon) | TIME (amber, clock) | REQUEST (teal, user)
const FLAG_META = {
PAPER: { tone: 'paper', icon: 'paper', label: 'PAPER' },
TIME: { tone: 'warning', icon: 'clock', label: 'TIME' },
REQUEST: { tone: 'request', icon: 'user', label: 'REQUEST' },
};
const MATCH_TONE = { High: 'success', Med: 'warning', Low: 'neutral' };
const FlagPill = ({ flag, expanded, onClick }) => {
const meta = FLAG_META[flag.type] || FLAG_META.PAPER;
const c = ACCENT[meta.tone];
const expandable = flag.type === 'PAPER' || flag.type === 'REQUEST' || flag.type === 'TIME';
return (
);
};
// Sort flags within a case row according to taxonomy:
// PAPER (High > Med > Low) > REQUEST > TIME
const sortFlags = (flags = []) => {
const order = (f) => {
if (f.type === 'PAPER') {
return 0 + ({ High: 0, Med: 1, Low: 2 }[f.match] ?? 3);
}
if (f.type === 'REQUEST') return 10;
if (f.type === 'TIME') return 20;
return 99;
};
return [...flags].sort((a, b) => order(a) - order(b));
};
// Sort cases for default load order
const sortCasesByFlags = (cases) => {
const score = (c) => {
if (!c.flags || !c.flags.length) return 1000;
const sorted = sortFlags(c.flags);
const top = sorted[0];
if (top.type === 'PAPER') return ({ High: 1, Med: 2, Low: 3 }[top.match] ?? 4);
if (top.type === 'REQUEST') return 100;
if (top.type === 'TIME') return 200;
return 500;
};
return [...cases].sort((a, b) => score(a) - score(b));
};
// ── AI badge — persistent, indigo, can't be dismissed (regulatory requirement) ─
const AiBadge = ({ size = 'sm', label = 'AI' }) => (
{label}
);
// ── ACMG criterion chip + popover (3-state per criterion) ───────────────────
const ACMG_STATE = {
met: { tone: 'danger', label: 'Met' }, // pathogenic side default
not_evaluated: { tone: 'neutral', label: 'Not evaluated' },
not_met: { tone: 'success', label: 'Not met' },
};
const isPathogenicCriterion = (code) => /^P/.test(code);
const AcmgChip = ({ code, state = 'met', onClick }) => {
// Pathogenic criteria → red-orange tones; benign → green
const isP = isPathogenicCriterion(code);
const isMet = state === 'met';
const tone = isMet ? (isP ? 'danger' : 'success') : 'neutral';
const c = ACCENT[tone];
return (
);
};
// Tier ordering for the popover
const ACMG_TIERS = [
{ key: 'PVS', label: 'Pathogenic (Very Strong)' },
{ key: 'PS', label: 'Pathogenic (Strong)' },
{ key: 'PM', label: 'Pathogenic (Moderate)' },
{ key: 'PP', label: 'Pathogenic (Supporting)' },
{ key: 'BA', label: 'Benign (Standalone)' },
{ key: 'BS', label: 'Benign (Strong)' },
{ key: 'BP', label: 'Benign (Supporting)' },
];
const AcmgCriteriaPopover = ({ anchor, criteriaState, dict, onChange, onClose }) => {
// anchor: { left, top, width } DOMRect-like
const ref = useRef(null);
// Close on outside click
useEffect(() => {
const onDown = (e) => {
if (ref.current && !ref.current.contains(e.target)) onClose && onClose();
};
setTimeout(() => document.addEventListener('mousedown', onDown), 0);
return () => document.removeEventListener('mousedown', onDown);
}, [onClose]);
// Group criteria by tier
const byTier = useMemo(() => {
const m = {};
Object.entries(dict).forEach(([code, meta]) => {
(m[meta.tier] = m[meta.tier] || []).push({ code, ...meta });
});
return m;
}, [dict]);
const setState = (code, next) => {
onChange && onChange({ ...criteriaState, [code]: next });
};
return (
e.stopPropagation()}>
{ACMG_TIERS.map(tier => {
const list = byTier[tier.key];
if (!list) return null;
return (
{tier.label}
{list.map(item => {
const cur = criteriaState[item.code] || 'not_evaluated';
return (
-
{item.code}
{item.label}.{' '}
{item.desc}
setState(item.code, v)}
/>
);
})}
);
})}
{options.map(o => {
const active = value === o.value;
const tone = o.value === 'met' ? 'danger' : o.value === 'not_met' ? 'success' : 'neutral';
const c = ACCENT[tone];
return (
);
})}
);
// ── Tag badges + popover ────────────────────────────────────────────────────
const TagBadge = ({ tag }) => {
const meta = window.CONSENSIO_DATA.evidenceTags[tag];
if (!meta) return null;
const c = ACCENT[meta.tone];
return (
{meta.dot && }
{meta.icon && }
{meta.label}
);
};
const TagPopover = ({ anchor, tags = [], onChange, onClose }) => {
const ref = useRef(null);
useEffect(() => {
const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose && onClose(); };
setTimeout(() => document.addEventListener('mousedown', onDown), 0);
return () => document.removeEventListener('mousedown', onDown);
}, [onClose]);
const toggle = (key) => {
const next = tags.includes(key) ? tags.filter(t => t !== key) : [...tags, key];
onChange && onChange(next);
};
const allTags = window.CONSENSIO_DATA.evidenceTags;
return (
e.stopPropagation()}>
Toggle tags
{Object.entries(allTags).map(([key, meta]) => {
const active = tags.includes(key);
const c = ACCENT[meta.tone];
return (
);
})}
