frontend/src/components/IndependentMetricsTable.tsx

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