Upload LanguageLevelTable.tsx

frontend/src/components/LanguageLevelTable.tsx

@@ -0,0 +1,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;