| import { useEffect, useMemo, useState } from 'react'; |
| import { api } from '../api'; |
| import { useI18n, type MsgKey } from '../i18n'; |
| import type { Health, TrackDetail, TrackRun, TrackSummary } from '../types'; |
| import { modelName } from './ModelSelect'; |
|
|
| const LANG_NAME: Record<string, string> = { python: 'Python', javascript: 'JavaScript', typescript: 'TypeScript', java: 'Java' }; |
|
|
| |
| function Spark({ data }: { data: (number | null)[] }) { |
| const v = data.filter((x): x is number => x != null); |
| const w = 72, h = 22; |
| if (v.length < 2) return <svg className="trk-spark" width={w} height={h} aria-hidden />; |
| const pts = v.map((y, i) => `${(i * (w - 4)) / (v.length - 1) + 2},${h - 2 - (y / 100) * (h - 4)}`).join(' '); |
| const last = pts.split(' ').pop()!.split(','); |
| return ( |
| <svg className="trk-spark" width={w} height={h} viewBox={`0 0 ${w} ${h}`} aria-hidden> |
| <polyline points={pts} /> |
| <circle cx={last[0]} cy={last[1]} r={2.5} /> |
| </svg> |
| ); |
| } |
|
|
| |
| function TrendChart({ runs, health }: { runs: TrackRun[]; health: Health | null }) { |
| const { t, pct, date } = useI18n(); |
| const [hover, setHover] = useState<number | null>(null); |
| const done = runs.filter((r) => r.status === 'done' && r.total); |
| if (done.length < 2) return <p className="small muted">{t('trk.chart.one')}</p>; |
| const W = 720, H = 240, L = 40, R = 96, T = 14, B = 30; |
| const x = (i: number) => L + (i * (W - L - R)) / (done.length - 1); |
| const y = (v: number) => T + (1 - v / 100) * (H - T - B); |
| const series = [ |
| { key: 'coverage' as const, cls: 's1', label: t('trk.chart.cov') }, |
| { key: 'mutation' as const, cls: 's2', label: t('trk.chart.mut') }, |
| ]; |
| const path = (k: 'coverage' | 'mutation') => { |
| let d = ''; |
| done.forEach((r, i) => { |
| const v = r[k]; |
| if (v == null) return; |
| d += `${d && done[i - 1]?.[k] != null ? 'L' : 'M'}${x(i).toFixed(1)},${y(v).toFixed(1)}`; |
| }); |
| return d; |
| }; |
| const onMove = (e: React.MouseEvent) => { |
| const rect = (e.currentTarget as SVGElement).getBoundingClientRect(); |
| const px = ((e.clientX - rect.left) / rect.width) * W; |
| let best = 0; |
| done.forEach((_, i) => { if (Math.abs(x(i) - px) < Math.abs(x(best) - px)) best = i; }); |
| setHover(best); |
| }; |
| const h = hover != null ? done[hover] : null; |
| const lastIdx = done.length - 1; |
| return ( |
| <div className="trk-chart"> |
| <div className="legend"> |
| {series.map((s) => <span key={s.key}><i className={`sw ${s.cls}`} />{s.label}</span>)} |
| </div> |
| <svg viewBox={`0 0 ${W} ${H}`} width="100%" role="img" aria-label={t('trk.chart')} |
| onMouseMove={onMove} onMouseLeave={() => setHover(null)}> |
| {[0, 25, 50, 75, 100].map((v) => ( |
| <g key={v}> |
| <line x1={L} x2={W - R} y1={y(v)} y2={y(v)} className="grid" /> |
| <text x={L - 6} y={y(v) + 4} className="tick" textAnchor="end">{v}</text> |
| </g> |
| ))} |
| {done.map((r, i) => (i === 0 || i === lastIdx || done.length <= 8 || i % Math.ceil(done.length / 8) === 0) && ( |
| <text key={r.job_id} x={x(i)} y={H - 10} className="tick" textAnchor="middle">{i + 1}</text> |
| ))} |
| {hover != null && <line x1={x(hover)} x2={x(hover)} y1={T} y2={H - B} className="cross" />} |
| {series.map((s) => ( |
| <g key={s.key} className={s.cls}> |
| <path d={path(s.key)} className="line" /> |
| {done.map((r, i) => r[s.key] != null && ( |
| <circle key={r.job_id} cx={x(i)} cy={y(r[s.key] as number)} r={hover === i ? 5 : 4} className="dot" /> |
| ))} |
| {done[lastIdx][s.key] != null && ( |
| <text x={x(lastIdx) + 10} y={y(done[lastIdx][s.key] as number) + 4} className="dlabel"> |
| {pct(done[lastIdx][s.key], 0)}</text> |
| )} |
| </g> |
| ))} |
| </svg> |
| {h && ( |
| <div className="trk-tip" style={{ left: `${Math.min(80, Math.max(20, (x(hover!) / W) * 100))}%` }}> |
| <strong>{t('trk.tip.run', { n: hover! + 1 })}</strong> · {date(h.created_at)}<br /> |
| <code>{h.model ? modelName(h.model, health) : '—'}</code> · {t(`trk.origin.${h.origin}` as MsgKey)}<br /> |
| {t('hist.tests')}: {h.passed}/{h.total} · {t('trk.chart.cov')}: {pct(h.coverage)} · {t('trk.chart.mut')}: {pct(h.mutation)} |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
| export default function TrackingPage({ health, initial }: { health: Health | null; initial?: string }) { |
| const { t, pct, date, lang } = useI18n(); |
| const [list, setList] = useState<TrackSummary[]>([]); |
| const [loaded, setLoaded] = useState(false); |
| const [sel, setSel] = useState<string | null>(initial || null); |
| const [detail, setDetail] = useState<TrackDetail | null>(null); |
| const [q, setQ] = useState(''); |
| const [fLang, setFLang] = useState(''); |
| const [fSrc, setFSrc] = useState(''); |
| const [sort, setSort] = useState<'recent' | 'runs' | 'name' | 'best'>('recent'); |
|
|
| useEffect(() => { |
| api.tracking().then((l) => { setList(l); setLoaded(true); setSel((s) => s || l[0]?.key || null); }).catch(() => setLoaded(true)); |
| }, []); |
| useEffect(() => { |
| if (!sel) return; |
| window.history.replaceState(null, '', `#/tracking/${sel}`); |
| api.trackingDetail(sel).then(setDetail).catch(() => setDetail(null)); |
| }, [sel]); |
|
|
| const title = (g: { title: string; title_en: string }) => (lang === 'en' ? g.title_en || g.title : g.title); |
| const shown = useMemo(() => { |
| const f = list.filter((g) => (!fLang || g.language === fLang) && (!fSrc || g.source === fSrc) |
| && (!q || `${title(g)} ${g.sample_id || ''}`.toLowerCase().includes(q.toLowerCase()))); |
| const by: Record<string, (a: TrackSummary, b: TrackSummary) => number> = { |
| recent: (a, b) => b.last_at - a.last_at, |
| runs: (a, b) => b.runs - a.runs || b.last_at - a.last_at, |
| name: (a, b) => title(a).localeCompare(title(b), lang), |
| best: (a, b) => (b.best?.mutation ?? -1) - (a.best?.mutation ?? -1), |
| }; |
| return [...f].sort(by[sort]); |
| }, [list, q, fLang, fSrc, sort, lang]); |
|
|
| const dur = (s: number | null) => (s == null ? '—' : s < 120 ? `${Math.round(s)} ${lang === 'tr' ? 'sn' : 's'}` : `${(s / 60).toFixed(1)} ${lang === 'tr' ? 'dk' : 'min'}`); |
| const d = detail && detail.key === sel ? detail : null; |
|
|
| return ( |
| <div className="page"> |
| <h1>{t('trk.title')}</h1> |
| <p className="lead">{t('trk.lead')}</p> |
| {loaded && !list.length ? ( |
| <div className="panel"><div className="panel-body"><div className="empty"><div><h3>{t('trk.emptyTitle')}</h3><p>{t('trk.emptyText')}</p></div></div></div></div> |
| ) : ( |
| <div className="grid-2 trk-grid"> |
| <div className="panel"> |
| <div className="panel-head"><h2>{t('trk.codes')}</h2><div className="spacer" /><span className="small muted">{shown.length}</span></div> |
| <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}> |
| <input type="search" placeholder={t('trk.search')} value={q} onChange={(e) => setQ(e.target.value)} /> |
| <div className="row" style={{ gap: 6 }}> |
| <select value={fLang} onChange={(e) => setFLang(e.target.value)} aria-label={t('auto.allLangs')}> |
| <option value="">{t('auto.allLangs')}</option> |
| {Object.entries(LANG_NAME).map(([k, v]) => <option key={k} value={k}>{v}</option>)} |
| </select> |
| <select value={fSrc} onChange={(e) => setFSrc(e.target.value)} aria-label={t('trk.src.all')}> |
| <option value="">{t('trk.src.all')}</option> |
| {(['sample', 'library', 'custom'] as const).map((s) => <option key={s} value={s}>{t(`trk.src.${s}`)}</option>)} |
| </select> |
| <select value={sort} onChange={(e) => setSort(e.target.value as typeof sort)} aria-label="sort"> |
| {(['recent', 'runs', 'best', 'name'] as const).map((s) => <option key={s} value={s}>{t(`trk.sort.${s}`)}</option>)} |
| </select> |
| </div> |
| <div className="trk-list"> |
| {shown.map((g) => ( |
| <button key={g.key} className={`trk-row${g.key === sel ? ' on' : ''}`} onClick={() => setSel(g.key)}> |
| <span className="trk-row-main"> |
| <span className="trk-row-title">{title(g)}</span> |
| <span className="small muted">{LANG_NAME[g.language]} · {t('trk.runs', { n: g.runs })} · {date(g.last_at)}</span> |
| </span> |
| <Spark data={g.trend} /> |
| <span className="trk-row-best small">{g.best?.mutation != null ? pct(g.best.mutation, 0) : g.best?.coverage != null ? pct(g.best.coverage, 0) : '—'} |
| <span className="muted"> {t('trk.best')}</span></span> |
| </button> |
| ))} |
| </div> |
| </div> |
| </div> |
| |
| <div className="panel"> |
| {!d ? ( |
| <div className="panel-body"><div className="empty"><div><p>{t('trk.pick')}</p></div></div></div> |
| ) : (<> |
| <div className="panel-head"> |
| <h2>{title(d)}</h2> |
| <div className="spacer" /> |
| {d.best && <a className="btn" href={`#/job/${d.best.job_id}`}>{t('trk.openBest')}</a>} |
| <a className="btn" href={`#/job/${d.runs[d.runs.length - 1].job_id}`}>{t('trk.openLast')}</a> |
| <a className="btn" href={`/api/tracking/${d.key}/runs.csv`}>{t('trk.csv')}</a> |
| </div> |
| <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}> |
| <div className="small muted"> |
| {LANG_NAME[d.language]} · {t(`kind.${d.kind}` as MsgKey)} · {t('trk.lines', { n: d.lines })} · {t(`trk.src.${d.source}`)} |
| {d.sample_id && <> · <code>{d.sample_id}</code></>} |
| </div> |
| <div className="trk-kpis"> |
| {[ |
| [String(d.stats.runs), t('trk.k.runs')], |
| [`${d.stats.green}/${d.stats.runs}`, t('trk.k.green')], |
| [pct(d.stats.best_coverage), t('trk.k.bestCov')], |
| [pct(d.stats.best_mutation), t('trk.k.bestMut')], |
| [dur(d.stats.avg_duration_s), t('trk.k.avgDur')], |
| ].map(([v, k]) => <div key={k} className="trk-kpi"><b>{v}</b><span>{k}</span></div>)} |
| </div> |
| <div> |
| <h3 className="trk-h">{t('trk.chart')}</h3> |
| <TrendChart runs={d.runs} health={health} /> |
| </div> |
| <div> |
| <h3 className="trk-h">{t('trk.byModel')}</h3> |
| <div style={{ overflowX: 'auto' }}> |
| <table className="data-table"> |
| <thead><tr><th>{t('trk.col.model')}</th><th className="num">{t('trk.col.runs')}</th><th className="num">{t('trk.col.green')}</th> |
| <th className="num">{t('trk.col.avgCov')}</th><th className="num">{t('trk.col.avgMut')}</th><th className="num">{t('trk.col.bestMut')}</th> |
| <th className="num">{t('trk.col.avgDur')}</th></tr></thead> |
| <tbody> |
| {d.models.map((m) => ( |
| <tr key={m.model}><td><code>{m.model === '—' ? '—' : modelName(m.model, health)}</code></td> |
| <td className="num">{m.runs}</td><td className="num">{m.green}</td><td className="num">{pct(m.avg_coverage)}</td> |
| <td className="num">{pct(m.avg_mutation)}</td><td className="num">{pct(m.best_mutation)}</td> |
| <td className="num nowrap">{dur(m.avg_duration_s)}</td></tr> |
| ))} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div> |
| <h3 className="trk-h">{t('trk.allRuns')}</h3> |
| <div style={{ overflowX: 'auto' }}> |
| <table className="data-table"> |
| <thead><tr><th>#</th><th>{t('trk.col.date')}</th><th>{t('trk.col.origin')}</th><th>{t('trk.col.model')}</th> |
| <th>{t('auto.col.status')}</th><th className="num">{t('hist.tests')}</th><th className="num">{t('ev.col.cov')}</th> |
| <th className="num">{t('ev.col.mut')}</th><th className="num">{t('trk.col.rounds')}</th><th className="num">{t('trk.col.time')}</th> |
| <th>{t('auto.col.reports')}</th></tr></thead> |
| <tbody> |
| {[...d.runs].reverse().map((r, i) => { |
| const best = d.best?.job_id === r.job_id; |
| return ( |
| <tr key={r.job_id} className={best ? 'selected' : ''}> |
| <td className="num">{d.runs.length - i}{best && <span title={t('trk.bestRun')}> ★</span>}</td> |
| <td className="nowrap"><a href={`#/job/${r.job_id}`}>{date(r.created_at)}</a></td> |
| <td><span className="tag queued">{t(`trk.origin.${r.origin}` as MsgKey)}</span></td> |
| <td className="nowrap"><code>{r.model ? modelName(r.model, health) : '—'}</code></td> |
| <td><span className={`tag ${r.status === 'done' && (!r.total || r.passed !== r.total) ? 'paused' : r.status}`}> |
| {t(`exp.status.${r.status === 'queued' ? 'pending' : r.status}` as MsgKey)}</span></td> |
| <td className="num">{r.total != null ? `${r.passed}/${r.total}` : '—'}</td> |
| <td className="num">{pct(r.coverage)}</td> |
| <td className="num nowrap">{r.mutation_before != null && r.mutation != null && r.mutation_before !== r.mutation |
| ? `${pct(r.mutation_before, 0)} → ${pct(r.mutation, 0)}` : pct(r.mutation)}</td> |
| <td className="num">{r.iterations}</td> |
| <td className="num nowrap">{dur(r.duration_s)}</td> |
| <td className="nowrap"> |
| <a className="rep-link html" target="_blank" rel="noreferrer" href={`/api/jobs/${r.job_id}/report.html?lang=${lang}`}>HTML</a>{' '} |
| <a className="rep-link pdf" target="_blank" rel="noreferrer" href={`/api/jobs/${r.job_id}/report.html?lang=${lang}&print=1`}>PDF</a> |
| </td> |
| </tr> |
| ); |
| })} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </>)} |
| </div> |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
