{/* Categories View */}
c.category)}>
{stats.categories.map((stat) => {
const evals = summary.evaluations_by_category[stat.category] || []
// Collect all results for this category across all evaluations
const categoryResults: { evaluation: BenchmarkEvaluation, result: EvaluationResult }[] = []
evals.forEach(eval_ => {
eval_.evaluation_results.forEach(result => {
let resultCategory: CategoryType | undefined;
// Try to get category from factsheet first
if (result.factsheet?.functional_props) {
const props = result.factsheet.functional_props.split(';').map(p => p.trim());
// Check if the current category we are rendering is in the props
if (props.includes(stat.category)) {
resultCategory = stat.category;
}
}
// If not found in factsheet, try to infer
if (!resultCategory) {
const inferred = inferCategoryFromBenchmark(result.evaluation_name);
if (inferred === stat.category) {
resultCategory = inferred;
}
}
if (resultCategory === stat.category) {
categoryResults.push({ evaluation: eval_, result })
}
})
})
if (categoryResults.length === 0) return null
return (
{stat.category.replace(/-/g, ' ')}
{categoryResults.length} Benchmarks
Avg: {(stat.avg_score * 100).toFixed(1)}%
{categoryResults.map((item, idx) => (
))}
)
})}
)
}
function SampleDataDialog({
samples,
evaluationName
}: {
samples: any[],
evaluationName: string
}) {
const [open, setOpen] = useState(false)
const [searchTerm, setSearchTerm] = useState("")
const [currentPage, setCurrentPage] = useState(1)
const itemsPerPage = 10
const filteredSamples = samples.filter(sample =>
sample.input.toLowerCase().includes(searchTerm.toLowerCase()) ||
sample.response.toLowerCase().includes(searchTerm.toLowerCase()) ||
sample.ground_truth.toLowerCase().includes(searchTerm.toLowerCase())
)
const totalPages = Math.ceil(filteredSamples.length / itemsPerPage)
const startIndex = (currentPage - 1) * itemsPerPage
const currentSamples = filteredSamples.slice(startIndex, startIndex + itemsPerPage)
// Reset page when search changes
useEffect(() => {
setCurrentPage(1)
}, [searchTerm])
return (
)
}
function BenchmarkResultCard({
evaluation,
result
}: {
evaluation: BenchmarkEvaluation,
result: EvaluationResult
}) {
const [isOpen, setIsOpen] = useState(false)
const randomSample = useMemo(() => {
const samples = evaluation.detailed_evaluation_results_per_samples;
if (!samples || samples.length === 0) return null;
// Use a simple hash of the evaluation ID to pick a consistent "random" sample for this session
// or just Math.random() if we don't mind it changing on refresh
const randomIndex = Math.floor(Math.random() * samples.length);
return samples[randomIndex];
}, [evaluation.detailed_evaluation_results_per_samples]);
const formatDate = (timestamp: string) => {
try {
// Handle unix timestamp (seconds or milliseconds)
const ts = parseFloat(timestamp)
const date = new Date(ts > 10000000000 ? ts : ts * 1000)
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
})
} catch {
return timestamp
}
}
const { score } = result.score_details
const { min_score = 0, max_score = 1, unit, lower_is_better } = result.metric_config
// Normalize to 0-1 for color coding
let normalized = (score - min_score) / (max_score - min_score)
if (lower_is_better) normalized = 1 - normalized
const isHigh = normalized >= 0.8
const isMedium = normalized >= 0.6
let displayScore = score.toFixed(2)
let displayUnit = unit || "Accuracy"
if (unit === 'accuracy' || !unit) {
displayScore = (score * 100).toFixed(1) + "%"
displayUnit = "Accuracy"
} else if (unit === 'points') {
displayScore = score.toFixed(1)
displayUnit = "/ 10"
} else if (unit === 'pass@1') {
displayScore = (score * 100).toFixed(1) + "%"
displayUnit = "Pass@1"
} else {
displayUnit = unit.charAt(0).toUpperCase() + unit.slice(1)
}
return (