Add Dots/Bars toggle to 'Where models cluster' card

src/components/BarChartSection.tsx

@@ -1,252 +0,0 @@
-'use client'
-
-import { useState, useMemo } from 'react'
-import type { ModelData } from '@/lib/types'
-import { fmtPct, fmtNum, creatorColor } from '@/lib/utils'
-import { LabLogo } from '@/components/LabLogo'
-
-type Metric = 'luc' | 'rag' | 'fairness'
-
-const TABS: { key: Metric; label: string; yLabel: string }[] = [
-  { key: 'luc',      label: 'Refusal Rate', yLabel: 'Score (Higher is Better)' },
-  { key: 'rag',      label: 'RAG Score',    yLabel: 'Score (Higher is Better)' },
-  { key: 'fairness', label: 'Fairness',     yLabel: 'Wasserstein Distance (Lower is Better)' },
-]
-
-function getValue(m: ModelData, metric: Metric): number | null {
-  if (metric === 'luc') return m.luc.avg
-  if (metric === 'rag') return m.rag.avg
-  return m.fairness.avg
-}
-
-// SVG layout (coordinate units)
-const ML      = 80   // left margin
-const MR      = 80   // right margin
-const MT      = 14   // top margin
-const BAR_H   = 300  // bar area height
-const LBL_H   = 150  // rotated label area
-const VW      = 1100
-const VH      = MT + BAR_H + LBL_H
-const CHART_W = VW - ML - MR
-const GAP     = 4
-
-const GRID = [0, 0.25, 0.5, 0.75, 1.0]
-
-export default function BarChartSection({
-  models,
-  maxFairness,
-}: {
-  models: ModelData[]
-  maxFairness: number
-}) {
-  const [metric, setMetric]           = useState<Metric>('luc')
-  const [activeCreators, setCreators] = useState<Set<string>>(new Set())
-
-  const allCreators = useMemo(
-    () => [...new Set(models.filter(m => !m.archived).map(m => m.creator))].sort(),
-    [models],
-  )
-
-  const toggleCreator = (c: string) =>
-    setCreators(prev => { const s = new Set(prev); s.has(c) ? s.delete(c) : s.add(c); return s })
-
-  const sorted = useMemo(() => {
-    let list = models.filter(m => !m.archived)
-    if (activeCreators.size) list = list.filter(m => activeCreators.has(m.creator))
-    list = list.filter(m => getValue(m, metric) !== null)
-    return [...list].sort((a, b) => {
-      const va = getValue(a, metric)!
-      const vb = getValue(b, metric)!
-      return metric === 'fairness' ? va - vb : vb - va
-    })
-  }, [models, metric, activeCreators])
-
-  const maxVal  = metric === 'fairness' ? maxFairness : 1
-  const n       = sorted.length
-  const bw      = (CHART_W - (n - 1) * GAP) / n
-
-  const legendCreators = useMemo(
-    () => [...new Set(sorted.map(m => m.creator))].sort(),
-    [sorted],
-  )
-
-  const tab = TABS.find(t => t.key === metric)!
-
-  return (
-    <div>
-        {/* Filters row */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
-          {/* Creator chips */}
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
-            {allCreators.map(c => {
-              const cc = creatorColor(c)
-              const on = activeCreators.has(c)
-              return (
-                <button key={c} onClick={() => toggleCreator(c)} style={{
-                  height: 26, padding: '0 10px',
-                  border: `1.5px solid ${on ? cc : 'var(--border-1)'}`,
-                  borderRadius: 5, fontSize: 10, fontFamily: 'inherit', fontWeight: 700,
-                  color: on ? cc : 'var(--text-2)',
-                  background: on ? `${cc}18` : 'var(--bg-0)',
-                  cursor: 'pointer',
-                  transition: 'all 0.15s',
-                  display: 'inline-flex', alignItems: 'center', gap: 5,
-                }}>
-                  <span style={{ display: 'inline-flex', alignItems: 'center', lineHeight: 0 }}>
-                    <LabLogo creator={c} size={14} />
-                  </span>
-                  {c}
-                </button>
-              )
-            })}
-          </div>
-
-          {/* Metric tabs */}
-          <div style={{ display: 'inline-flex', border: '1.5px solid var(--border-1)', borderRadius: 7, overflow: 'hidden', flexShrink: 0 }}>
-            {TABS.map((t, i) => (
-              <button key={t.key} onClick={() => setMetric(t.key)} style={{
-                height: 28, padding: '0 13px',
-                borderLeft: i > 0 ? '1px solid var(--border-1)' : 'none',
-                outline: 'none', border: i > 0 ? '1px solid var(--border-1)' : 'none',
-                borderTop: 'none', borderRight: 'none', borderBottom: 'none',
-                fontSize: 10, fontFamily: 'inherit', fontWeight: 700,
-                letterSpacing: '0.05em', textTransform: 'uppercase' as const,
-                color: metric === t.key ? 'white' : 'var(--text-2)',
-                background: metric === t.key ? 'var(--accent)' : 'transparent',
-                cursor: 'pointer', whiteSpace: 'nowrap' as const,
-                transition: 'background 0.12s, color 0.12s',
-              }}>
-                {t.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Chart container */}
-        <div style={{
-          background: 'var(--bg-1)',
-          border: '1.5px solid var(--border-1)',
-          borderRadius: 10,
-          padding: '1rem 1rem 0',
-          boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
-        }}>
-          <svg
-            viewBox={`0 0 ${VW} ${VH}`}
-            style={{ width: '100%', height: 'auto', display: 'block' }}
-            aria-label={`Bar chart: ${tab.label}`}
-          >
-            {/* Grid lines + y-axis labels */}
-            {GRID.map(lvl => {
-              const y       = MT + BAR_H - lvl * BAR_H
-              const display = metric === 'fairness'
-                ? (lvl * maxVal).toFixed(2)
-                : `${Math.round(lvl * 100)}`
-              return (
-                <g key={lvl}>
-                  <line
-                    x1={ML} y1={y} x2={VW - MR} y2={y}
-                    stroke={lvl === 0 ? 'var(--border-2)' : 'var(--border-0)'}
-                    strokeWidth={lvl === 0 ? 1 : 0.8}
-                    strokeDasharray={lvl === 0 || lvl === 1 ? undefined : '4 4'}
-                  />
-                  <text
-                    x={ML - 5} y={y + 3.5}
-                    textAnchor="end"
-                    fontSize={9}
-                    fill="var(--text-3)"
-                    fontFamily="inherit"
-                  >
-                    {display}
-                  </text>
-                </g>
-              )
-            })}
-
-            {/* Y-axis title */}
-            <text
-              x={11}
-              y={MT + BAR_H / 2}
-              textAnchor="middle"
-              fontSize={8.5}
-              fill="var(--text-3)"
-              fontFamily="inherit"
-              transform={`rotate(-90, 11, ${MT + BAR_H / 2})`}
-            >
-              {tab.yLabel}
-            </text>
-
-            {/* Bars + labels */}
-            {sorted.map((m, i) => {
-              const val       = getValue(m, metric)!
-              const pct       = Math.min(1, val / maxVal)
-              const barHeight = pct * BAR_H
-              const x         = ML + i * (bw + GAP)
-              const y         = MT + BAR_H - barHeight
-              const cc        = creatorColor(m.creator)
-              const valLabel  = metric === 'fairness'
-                ? val.toFixed(3)
-                : `${(val * 100).toFixed(0)}%`
-
-              return (
-                <g key={`${m.rank}-${metric}`}>
-                  {/* Bar */}
-                  <rect
-                    x={x} y={y}
-                    width={bw} height={barHeight}
-                    fill={cc} fillOpacity={0.88}
-                    rx={2}
-                  />
-
-                  {/* Value above bar */}
-                  {barHeight > 18 && (
-                    <text
-                      x={x + bw / 2} y={y - 4}
-                      textAnchor="middle"
-                      fontSize={8}
-                      fill={cc}
-                      fontFamily="inherit"
-                      fontWeight="bold"
-                    >
-                      {valLabel}
-                    </text>
-                  )}
-
-                  {/* Model name */}
-                  <text
-                    x={x + bw / 2}
-                    y={MT + BAR_H + 5}
-                    transform={`rotate(-45, ${x + bw / 2}, ${MT + BAR_H + 5})`}
-                    textAnchor="end"
-                    fontSize={10}
-                    fill="var(--text-1)"
-                    fontFamily="inherit"
-                    fontWeight="600"
-                  >
-                    {m.model}
-                  </text>
-                </g>
-              )
-            })}
-          </svg>
-
-          {/* Creator legend */}
-          <div style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '8px 20px',
-            justifyContent: 'center',
-            padding: '12px 8px',
-            borderTop: '1px solid var(--border-0)',
-            marginTop: 4,
-          }}>
-            {legendCreators.map(c => (
-              <div key={c} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-2)', fontWeight: 600 }}>
-                <div style={{ width: 11, height: 11, borderRadius: 2, background: creatorColor(c), flexShrink: 0 }} />
-                {c}
-              </div>
-            ))}
-          </div>
-        </div>
-    </div>
-  )
-}

src/components/ClusterView.tsx

@@ -0,0 +1,52 @@
+'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>
+  )
+}

src/components/EvaluationShell.tsx

@@ -6,7 +6,7 @@ import LeaderboardTable from '@/components/LeaderboardTable'
 import GuardrailsTable from '@/components/GuardrailsTable'
 import GuardrailDistribution from '@/components/GuardrailDistribution'
 import AboutSection from '@/components/AboutSection'
-import ScoreDistribution from '@/components/ScoreDistribution'
+import ClusterView from '@/components/ClusterView'
 import InsightsSection from '@/components/InsightsSection'
 import ScrollReveal from '@/components/ScrollReveal'
 import type { ModelData, GuardrailData, MetricThresholds, GuardrailThresholds } from '@/lib/types'
@@ -63,7 +63,7 @@ export default function EvaluationShell({ models, guardrails, maxFairness, thres
                   Each dot is one active model, coloured by lab. The dashed line marks the field average.
                   Fairness is inverted: dots further right are more equitable.
                 </p>
-                <ScoreDistribution models={models} maxFairness={maxFairness} />
+                <ClusterView models={models} maxFairness={maxFairness} />
               </div>
             </ScrollReveal>
           </div>

src/components/MetricBarAccordion.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useState } from 'react'
+import type { ModelData } from '@/lib/types'
+import MetricBars from '@/components/MetricBars'
+
+type Metric = 'luc' | 'rag' | 'fairness'
+
+const ROWS: { key: Metric; label: string }[] = [
+  { key: 'luc',      label: 'Refusal Rate' },
+  { key: 'rag',      label: 'RAG Score' },
+  { key: 'fairness', label: 'Fairness' },
+]
+
+export default function MetricBarAccordion({
+  models,
+  maxFairness,
+}: {
+  models: ModelData[]
+  maxFairness: number
+}) {
+  const [open, setOpen] = useState<Metric>('luc')
+
+  return (
+    <div style={{ borderTop: '1px solid var(--border-0)' }}>
+      {ROWS.map(row => {
+        const isOpen = open === row.key
+        return (
+          <div key={row.key} style={{ borderBottom: '1px solid var(--border-0)' }}>
+            <button
+              onClick={() => setOpen(row.key)}
+              aria-expanded={isOpen}
+              style={{
+                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '14px 4px', background: 'transparent',
+                border: 'none',
+                cursor: 'pointer', fontFamily: 'inherit',
+                fontSize: 13, fontWeight: 700, color: 'var(--text-1)',
+                letterSpacing: '0.03em', textTransform: 'uppercase',
+              }}
+            >
+              {row.label}
+              <span style={{
+                display: 'inline-block', fontSize: 11, color: 'var(--text-3)',
+                transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)',
+                transition: 'transform 0.15s',
+              }}>
+                ▸
+              </span>
+            </button>
+            {isOpen && (
+              <div style={{ padding: '4px 0 20px' }}>
+                <MetricBars models={models} maxFairness={maxFairness} metric={row.key} />
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

src/components/MetricBars.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import type { ModelData } from '@/lib/types'
+import { creatorColor } from '@/lib/utils'
+import { LabLogo } from '@/components/LabLogo'
+
+type Metric = 'luc' | 'rag' | 'fairness'
+
+const Y_LABEL: Record<Metric, string> = {
+  luc:      'Score (Higher is Better)',
+  rag:      'Score (Higher is Better)',
+  fairness: 'Wasserstein Distance (Lower is Better)',
+}
+
+function getValue(m: ModelData, metric: Metric): number | null {
+  if (metric === 'luc') return m.luc.avg
+  if (metric === 'rag') return m.rag.avg
+  return m.fairness.avg
+}
+
+// SVG layout (coordinate units)
+const ML = 80, MR = 80, MT = 14, BAR_H = 300, LBL_H = 150
+const VW = 1100
+const VH = MT + BAR_H + LBL_H
+const CHART_W = VW - ML - MR
+const GAP = 4
+const GRID = [0, 0.25, 0.5, 0.75, 1.0]
+
+export default function MetricBars({
+  models,
+  maxFairness,
+  metric,
+}: {
+  models: ModelData[]
+  maxFairness: number
+  metric: Metric
+}) {
+  const [activeCreators, setCreators] = useState<Set<string>>(new Set())
+
+  const allCreators = useMemo(
+    () => [...new Set(models.filter(m => !m.archived).map(m => m.creator))].sort(),
+    [models],
+  )
+
+  const toggleCreator = (c: string) =>
+    setCreators(prev => { const s = new Set(prev); s.has(c) ? s.delete(c) : s.add(c); return s })
+
+  const sorted = useMemo(() => {
+    let list = models.filter(m => !m.archived)
+    if (activeCreators.size) list = list.filter(m => activeCreators.has(m.creator))
+    list = list.filter(m => getValue(m, metric) !== null)
+    return [...list].sort((a, b) => {
+      const va = getValue(a, metric)!
+      const vb = getValue(b, metric)!
+      return metric === 'fairness' ? va - vb : vb - va
+    })
+  }, [models, metric, activeCreators])
+
+  const maxVal = metric === 'fairness' ? maxFairness : 1
+  const n      = sorted.length
+  const bw     = n > 0 ? (CHART_W - (n - 1) * GAP) / n : CHART_W
+
+  const legendCreators = useMemo(
+    () => [...new Set(sorted.map(m => m.creator))].sort(),
+    [sorted],
+  )
+
+  return (
+    <div>
+      {/* Lab filter chips */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: '1rem' }}>
+        {allCreators.map(c => {
+          const cc = creatorColor(c)
+          const on = activeCreators.has(c)
+          return (
+            <button key={c} onClick={() => toggleCreator(c)} style={{
+              height: 26, padding: '0 10px',
+              border: `1.5px solid ${on ? cc : 'var(--border-1)'}`,
+              borderRadius: 5, fontSize: 10, fontFamily: 'inherit', fontWeight: 700,
+              color: on ? cc : 'var(--text-2)',
+              background: on ? `${cc}18` : 'var(--bg-0)',
+              cursor: 'pointer', transition: 'all 0.15s',
+              display: 'inline-flex', alignItems: 'center', gap: 5,
+            }}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', lineHeight: 0 }}>
+                <LabLogo creator={c} size={14} />
+              </span>
+              {c}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Chart container */}
+      <div style={{
+        background: 'var(--bg-1)',
+        border: '1.5px solid var(--border-1)',
+        borderRadius: 10,
+        padding: '1rem 1rem 0',
+        boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
+      }}>
+        <svg
+          viewBox={`0 0 ${VW} ${VH}`}
+          style={{ width: '100%', height: 'auto', display: 'block' }}
+          aria-label={`Bar chart: ${metric}`}
+        >
+          {/* Grid lines + y-axis labels */}
+          {GRID.map(lvl => {
+            const y       = MT + BAR_H - lvl * BAR_H
+            const display = metric === 'fairness'
+              ? (lvl * maxVal).toFixed(2)
+              : `${Math.round(lvl * 100)}`
+            return (
+              <g key={lvl}>
+                <line
+                  x1={ML} y1={y} x2={VW - MR} y2={y}
+                  stroke={lvl === 0 ? 'var(--border-2)' : 'var(--border-0)'}
+                  strokeWidth={lvl === 0 ? 1 : 0.8}
+                  strokeDasharray={lvl === 0 || lvl === 1 ? undefined : '4 4'}
+                />
+                <text x={ML - 5} y={y + 3.5} textAnchor="end" fontSize={9}
+                  fill="var(--text-3)" fontFamily="inherit">
+                  {display}
+                </text>
+              </g>
+            )
+          })}
+
+          {/* Y-axis title */}
+          <text
+            x={11} y={MT + BAR_H / 2} textAnchor="middle"
+            fontSize={8.5} fill="var(--text-3)" fontFamily="inherit"
+            transform={`rotate(-90, 11, ${MT + BAR_H / 2})`}
+          >
+            {Y_LABEL[metric]}
+          </text>
+
+          {/* Bars + labels */}
+          {sorted.map((m, i) => {
+            const val       = getValue(m, metric)!
+            const pct       = Math.min(1, val / maxVal)
+            const barHeight = pct * BAR_H
+            const x         = ML + i * (bw + GAP)
+            const y         = MT + BAR_H - barHeight
+            const cc        = creatorColor(m.creator)
+            const valLabel  = metric === 'fairness' ? val.toFixed(3) : `${(val * 100).toFixed(0)}%`
+            return (
+              <g key={`${m.rank}-${metric}`}>
+                <rect x={x} y={y} width={bw} height={barHeight} fill={cc} fillOpacity={0.88} rx={2} />
+                {barHeight > 18 && (
+                  <text x={x + bw / 2} y={y - 4} textAnchor="middle" fontSize={8}
+                    fill={cc} fontFamily="inherit" fontWeight="bold">
+                    {valLabel}
+                  </text>
+                )}
+                <text
+                  x={x + bw / 2} y={MT + BAR_H + 5}
+                  transform={`rotate(-45, ${x + bw / 2}, ${MT + BAR_H + 5})`}
+                  textAnchor="end" fontSize={10} fill="var(--text-1)"
+                  fontFamily="inherit" fontWeight="600"
+                >
+                  {m.model}
+                </text>
+              </g>
+            )
+          })}
+        </svg>
+
+        {/* Creator legend */}
+        <div style={{
+          display: 'flex', flexWrap: 'wrap', gap: '8px 20px', justifyContent: 'center',
+          padding: '12px 8px', borderTop: '1px solid var(--border-0)', marginTop: 4,
+        }}>
+          {legendCreators.map(c => (
+            <div key={c} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-2)', fontWeight: 600 }}>
+              <div style={{ width: 11, height: 11, borderRadius: 2, background: creatorColor(c), flexShrink: 0 }} />
+              {c}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}