Spaces:
Running
Running
File size: 2,872 Bytes
08dfd47 9bf569f 44072a9 08dfd47 9eea4a2 08dfd47 44072a9 9eea4a2 08dfd47 9eea4a2 08dfd47 9eea4a2 9bf569f 9eea4a2 44072a9 9eea4a2 08dfd47 9eea4a2 9bf569f 9eea4a2 44072a9 9eea4a2 08dfd47 9eea4a2 |
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 |
import React from 'react'
import { VARIANT_NAME_MAP } from './galleryUtils'
import MetricInfoIcon from './MetricInfoIcon'
interface ExampleVariantMetricsTablesProps {
variantMetadatas: Record<string, Record<string, string | number | boolean>>
}
const ACCURACY_METRICS = ['bit_acc', 'word_acc', 'log10_p_value']
const ExampleVariantMetricsTables: React.FC<ExampleVariantMetricsTablesProps> = ({
variantMetadatas,
}) => {
const variantKeys = Object.keys(variantMetadatas)
if (variantKeys.length === 0) return null
// Collect all unique metadata keys across all variants
let allKeys = Array.from(
new Set(variantKeys.flatMap((variant) => Object.keys(variantMetadatas[variant] || {})))
)
// Split keys into accuracy and quality metrics
const accuracyKeys = [...ACCURACY_METRICS.filter((k) => allKeys.includes(k))]
if (allKeys.includes('detected')) {
accuracyKeys.unshift('detected')
}
const qualityKeys = allKeys.filter((k) => !accuracyKeys.includes(k) && k !== 'detected')
// Helper to render a table for a set of keys and a set of variants
const renderTable = (keys: string[], title: string, rowVariants: string[]) =>
keys.length === 0 ? null : (
<div className="overflow-x-auto mb-4">
<div className="mb-1 text-sm">{title}</div>
<table className="table w-full min-w-max border-gray-700 border text-xs">
<thead>
<tr>
<th className="bg-base-100 border-gray-700 border">Variant</th>
{keys.map((k) => (
<th key={k} className="bg-base-100 border-gray-700 border text-center">
<span className="inline-flex items-center gap-1">
{k}
{k !== 'detected' && <MetricInfoIcon metricName={k} />}
</span>
</th>
))}
</tr>
</thead>
<tbody>
{rowVariants.map((variant) =>
variantKeys.includes(variant) ? (
<tr key={variant} className="hover:bg-base-100">
<td className="font-mono border-gray-700 border">
{VARIANT_NAME_MAP[variant] || variant}
</td>
{keys.map((k) => (
<td key={k} className="border-gray-700 border text-center">
{variantMetadatas[variant] && k in variantMetadatas[variant]
? String(variantMetadatas[variant][k])
: ''}
</td>
))}
</tr>
) : null
)}
</tbody>
</table>
</div>
)
return (
<>
{renderTable(accuracyKeys, 'Accuracy Metrics', ['wmd', 'attacked_wmd'])}
{renderTable(qualityKeys, 'Quality Metrics', ['wmd'])}
</>
)
}
export default ExampleVariantMetricsTables
|