Spaces:
Running
Running
File size: 2,180 Bytes
ca345b7 |
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 |
import React from 'react'
interface Row {
metric: string
[key: string]: string | number
}
interface IndependentMetricsTableProps {
independentMetrics: string[]
tableHeader: string[]
selectedModels: Set<string>
tableRows: Row[]
}
const IndependentMetricsTable: React.FC<IndependentMetricsTableProps> = ({
independentMetrics,
tableHeader,
selectedModels,
tableRows,
}) => {
if (independentMetrics.length === 0) return null
return (
<div className="overflow-x-auto max-h-[80vh] overflow-y-auto">
<table className="table w-full min-w-max border-gray-700 border">
<thead>
<tr>
<th className="sticky left-0 top-0 bg-base-100 z-20 border-gray-700 border">Metric</th>
{tableHeader
.filter((model) => selectedModels.has(model))
.map((model) => (
<th
key={`independent-${model}`}
className="sticky top-0 bg-base-100 z-10 text-center text-xs border-gray-700 border"
>
{model}
</th>
))}
</tr>
</thead>
<tbody>
{independentMetrics.sort().map((metric) => {
const row = tableRows.find((r) => r.metric === metric)
if (!row) return null
return (
<tr key={`independent-${metric}`} className="hover:bg-base-100">
<td className="sticky left-0 bg-base-100 z-10 border-gray-700 border">{metric}</td>
{tableHeader
.filter((model) => selectedModels.has(model))
.map((col) => {
const cell = row[col]
return (
<td
key={`independent-${metric}-${col}`}
className="text-center border-gray-700 border"
>
{!isNaN(Number(cell)) ? Number(Number(cell).toFixed(3)) : cell}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
)
}
export default IndependentMetricsTable
|