Spaces:
Sleeping
Sleeping
File size: 3,092 Bytes
627ee08 |
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 |
import React, { FC, useState } from 'react';
import { AllModelsData, ModelMetrics } from '../types';
interface Props {
data: AllModelsData;
selectedModels: string[];
metrics: string[];
colors: string[];
}
const LanguageLevelTable: FC<Props> = ({ data, selectedModels, metrics, colors }) => {
const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
const [selectedMetric, setSelectedMetric] = useState<string>(metrics[0]);
const languagePairs = selectedModels.length
? Object.keys(data[selectedModels[0]] || {}).filter(k => k !== 'averages')
: [];
const filteredData = selectedLanguage
? languagePairs.filter(pair => pair === selectedLanguage)
: languagePairs;
return (
<div className="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 className="text-2xl font-bold text-gray-800 mb-6">Language-Level Table</h2>
{/* Filters */}
<div className="flex space-x-4 mb-4">
<select
value={selectedLanguage || ''}
onChange={e => setSelectedLanguage(e.target.value || null)}
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
<option value="">All Languages</option>
{languagePairs.map(pair => (
<option key={pair} value={pair}>
{pair.toUpperCase()}
</option>
))}
</select>
<select
value={selectedMetric}
onChange={e => setSelectedMetric(e.target.value)}
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
{metrics.map(metric => (
<option key={metric} value={metric}>
{metric.toUpperCase()}
</option>
))}
</select>
</div>
{/* Table */}
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-gray-200">
<th className="text-left py-3 px-4 font-semibold">Language Pair</th>
{selectedModels.map((model, index) => (
<th
key={model}
className="text-center py-3 px-4 font-semibold"
style={{ color: colors[index % colors.length] }}
>
{model}
</th>
))}
</tr>
</thead>
<tbody>
{filteredData.map(pair => (
<tr key={pair} className="border-b border-gray-100 hover:bg-gray-50">
<td className="py-3 px-4 font-medium">{pair.toUpperCase()}</td>
{selectedModels.map(model => (
<td key={model} className="text-center py-3 px-4">
{data[model]?.[pair]?.[selectedMetric as keyof ModelMetrics]?.toFixed(3) || '-'}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default LanguageLevelTable; |