File size: 4,056 Bytes
b630916 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | import { useEffect, useState } from "react";
import type { OverviewData, PanelNav } from "../types";
interface OverviewLevelProps {
datasetId: string;
fetchOverview: (dsId: string) => Promise<OverviewData>;
onDrillDown: (nav: PanelNav) => void;
}
export default function OverviewLevel({ datasetId, fetchOverview, onDrillDown }: OverviewLevelProps) {
const [data, setData] = useState<OverviewData | null>(null);
useEffect(() => {
fetchOverview(datasetId).then(setData).catch(() => {});
}, [datasetId, fetchOverview]);
if (!data) return <div className="p-4 text-gray-400">Loading overview...</div>;
const correctCount = data.examples.filter((ex) => ex.eval_correct === true).length;
const incorrectCount = data.examples.filter((ex) => ex.eval_correct === false).length;
const unknownCount = data.examples.filter((ex) => ex.eval_correct === null || ex.eval_correct === undefined).length;
return (
<div className="p-4 space-y-3">
{/* Experiment metadata */}
<div className="flex gap-3 text-xs text-gray-400">
<span>Model: <span className="text-gray-200">{data.metadata.model}</span></span>
<span>Method: <span className="text-gray-200">{data.metadata.method}</span></span>
<span>Run: <span className="text-gray-200">{data.metadata.run_id}</span></span>
</div>
{/* Summary stats */}
<div className="flex gap-3 text-xs text-gray-400">
<span>{data.examples.length} examples</span>
{correctCount > 0 && (
<span className="text-emerald-400">{correctCount} correct</span>
)}
{incorrectCount > 0 && (
<span className="text-red-400">{incorrectCount} incorrect</span>
)}
{unknownCount > 0 && (
<span className="text-gray-500">{unknownCount} unknown</span>
)}
</div>
{/* Example cards */}
<div className="space-y-2">
{data.examples.map((ex) => (
<div
key={ex.example_idx}
className="bg-gray-800 border border-gray-700 rounded-lg p-4 hover:border-emerald-500 cursor-pointer transition-colors"
onClick={() =>
onDrillDown({
datasetId,
level: 2,
exampleIdx: ex.example_idx,
})
}
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-3">
<span className="bg-emerald-600 text-white text-xs font-bold px-2 py-0.5 rounded-full">
Ex {ex.example_idx}
</span>
<span className="bg-gray-700 text-gray-300 text-xs px-2 py-0.5 rounded">
{ex.n_iterations} iter{ex.n_iterations !== 1 ? "s" : ""}
</span>
{ex.eval_correct === true && (
<span className="text-emerald-400 text-sm font-bold" title="Correct">
✓
</span>
)}
{ex.eval_correct === false && (
<span className="text-red-400 text-sm font-bold" title="Incorrect">
✗
</span>
)}
</div>
<span className="text-xs text-gray-400">
{ex.total_execution_time.toFixed(1)}s
</span>
</div>
{/* Question preview */}
<div className="text-sm text-gray-300 line-clamp-2 mb-2 leading-relaxed">
{ex.question_text || "(no question text)"}
</div>
<div className="flex gap-4 text-xs text-gray-400">
<span>
{((ex.total_input_tokens + ex.total_output_tokens) / 1000).toFixed(1)}k tokens
</span>
</div>
{ex.final_answer_preview && (
<div className="mt-2 text-xs text-gray-500 truncate">
Answer: {ex.final_answer_preview}
</div>
)}
</div>
))}
</div>
</div>
);
}
|