Spaces:
Running
Running
| 'use client' | |
| import { useState } from 'react' | |
| import type { ModelData } from '@/lib/types' | |
| import ScoreDistribution from '@/components/ScoreDistribution' | |
| import MetricBarAccordion from '@/components/MetricBarAccordion' | |
| type View = 'dots' | 'bars' | |
| const VIEWS: { key: View; label: string }[] = [ | |
| { key: 'dots', label: 'Dots' }, | |
| { key: 'bars', label: 'Bars' }, | |
| ] | |
| export default function ClusterView({ | |
| models, | |
| maxFairness, | |
| }: { | |
| models: ModelData[] | |
| maxFairness: number | |
| }) { | |
| const [view, setView] = useState<View>('dots') | |
| return ( | |
| <div> | |
| {/* Dots ⇄ Bars toggle */} | |
| <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}> | |
| <div style={{ display: 'inline-flex', border: '1.5px solid var(--border-1)', borderRadius: 7, overflow: 'hidden' }}> | |
| {VIEWS.map((v, i) => ( | |
| <button key={v.key} onClick={() => setView(v.key)} style={{ | |
| height: 28, padding: '0 16px', | |
| border: 'none', borderLeft: i > 0 ? '1px solid var(--border-1)' : 'none', | |
| outline: 'none', | |
| fontSize: 10, fontFamily: 'inherit', fontWeight: 700, | |
| letterSpacing: '0.05em', textTransform: 'uppercase', | |
| color: view === v.key ? 'white' : 'var(--text-2)', | |
| background: view === v.key ? 'var(--accent)' : 'transparent', | |
| cursor: 'pointer', transition: 'background 0.12s, color 0.12s', | |
| }}> | |
| {v.label} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| {view === 'dots' | |
| ? <ScoreDistribution models={models} maxFairness={maxFairness} /> | |
| : <MetricBarAccordion models={models} maxFairness={maxFairness} /> | |
| } | |
| </div> | |
| ) | |
| } | |