import { useState } from 'react'
function score(v) {
if (v == null) return '—'
return `${(v * 100).toFixed(0)}%`
}
function scoreColor(v) {
if (v == null) return 'text-gray-300'
if (v >= 0.8) return 'text-emerald-600'
if (v >= 0.6) return 'text-yellow-600'
return 'text-red-500'
}
function Row({ item, idx }) {
const [open, setOpen] = useState(false)
return (
<>
setOpen(v => !v)}
>
| {idx + 1} |
{item.query}
|
{score(item.answer_correctness)}
|
{score(item.answer_relevancy)}
|
{score(item.context_recall)}
|
{score(item.precision_at_5)}
|
{item.latency_ms ? `${item.latency_ms}ms` : '—'}
|
{open ? '▲' : '▼'}
|
{open && (
Generated answer
{item.answer}
Ground truth
{item.ground_truth}
{item.correctness_reason && (
Correctness judge note
{item.correctness_reason}
)}
|
)}
)
}
export default function RunTable({ perQuery }) {
if (!perQuery?.length) return null
return (
Per-Query Breakdown
Click any row to see generated answer vs ground truth
| # |
Query |
Correctness |
Relevancy |
Recall |
P@5 |
Latency |
|
{perQuery.map((item, i) => |
)}
)
}