Combined leaderboard, simplified filters

backend/app.py

@@ -1,7 +1,7 @@
 from backend.chart import mk_variations
-from backend.config import get_dataset_config
+from backend.config import ABS_DATASET_DOMAIN, ABS_DATASET_PATH, get_dataset_config
 from backend.examples import audio_examples_tab, image_examples_tab, video_examples_tab
-from flask import Flask, Response, send_from_directory
+from flask import Flask, Response, send_from_directory, request
 from flask_cors import CORS
 import os
 import logging
@@ -39,41 +39,47 @@ def index():
 @app.route("/data/<path:dataset_name>")
 def data_files(dataset_name):
     """
-    Serves csv files from the data directory.
+    Serves csv files from S3.
     """
-    data_dir = os.path.join(os.path.dirname(__file__), "data")
-    file_path = os.path.join(data_dir, dataset_name) + ".csv"
+    # Get dataset_type from query params
+    dataset_type = request.args.get("dataset_type")
+    if not dataset_type:
+        logger.error("No dataset_type provided in query parameters.")
+        return "Dataset type not specified", 400
+
+    # data_dir = os.path.join(os.path.dirname(__file__), "data")
+    file_path = os.path.join(ABS_DATASET_PATH, dataset_name) + f"_{dataset_type}.csv"
     logger.info(f"Looking for dataset file: {file_path}")
-    if os.path.isfile(file_path):
+    try:
         df = pd.read_csv(file_path)
         logger.info(f"Processing dataset: {dataset_name}")
-        if dataset_name.endswith("benchmark"):
-            return get_leaderboard(dataset_name, df)
-        elif dataset_name.endswith("attacks_variations"):
-            return get_chart(df)
-
-    return "File not found", 404
+        config = get_dataset_config(dataset_name)
+        if dataset_type == "benchmark":
+            return get_leaderboard(config, df)
+        elif dataset_type == "attacks_variations":
+            return get_chart(config, df)
+    except:
+        logger.error(f"Failed to fetch file: {file_path}")
+        return "File not found", 404
 
 
 @app.route("/examples/<path:type>")
 def example_files(type):
     """
-    Serve example files from the examples directory.
+    Serve example files from S3.
     """
 
-    abs_path = "https://dl.fbaipublicfiles.com/omnisealbench/"
-
     # Switch based on the type parameter to call the appropriate tab function
     if type == "image":
-        result = image_examples_tab(abs_path)
+        result = image_examples_tab(ABS_DATASET_PATH)
         return Response(json.dumps(result), mimetype="application/json")
     elif type == "audio":
         # Assuming you'll create these functions
-        result = audio_examples_tab(abs_path)
+        result = audio_examples_tab(ABS_DATASET_PATH)
         return Response(json.dumps(result), mimetype="application/json")
     elif type == "video":
         # Assuming you'll create these functions
-        result = video_examples_tab(abs_path)
+        result = video_examples_tab(ABS_DATASET_PATH)
         return Response(json.dumps(result), mimetype="application/json")
     else:
         return "Invalid example type", 400
@@ -91,7 +97,7 @@ def proxy(url):
         url = unquote(url)
 
         # Make sure we're only proxying from trusted domains for security
-        if not url.startswith("https://dl.fbaipublicfiles.com/"):
+        if not url.startswith(ABS_DATASET_DOMAIN):
             return {"error": "Only proxying from allowed domains is permitted"}, 403
 
         response = requests.get(url, stream=True)
@@ -120,9 +126,9 @@ def proxy(url):
         return {"error": str(e)}, 500
 
 
-def get_leaderboard(dataset_name, df):
+def get_leaderboard(config, df):
     # Determine file type and handle accordingly
-    config = get_dataset_config(dataset_name)
+    logger.warning(f"Processing dataset with config: {config}")
 
     # This part adds on all the columns
     df = get_old_format_dataframe(df, config["first_cols"], config["attack_scores"])
@@ -146,11 +152,12 @@ def get_leaderboard(dataset_name, df):
     return Response(json.dumps(result), mimetype="application/json")
 
 
-def get_chart(df):
+def get_chart(config, df):
     # This function should return the chart data based on the DataFrame
     # For now, we will just return a placeholder response
     chart_data = mk_variations(
         df,
+        config["attacks_with_variations"],
         # attacks_plot_metrics,
         # audio_attacks_with_variations,
     )

backend/chart.py

@@ -2,44 +2,6 @@ import pandas as pd
 
 from pathlib import Path
 
-audio_attacks_with_variations = [
-    "random_noise",
-    "lowpass_filter",
-    "highpass_filter",
-    "boost_audio",
-    "duck_audio",
-    "shush",
-]
-
-attacks_plot_metrics = ["bit_acc", "log10_p_value", "TPR", "FPR", "watermark_det_score"]
-
-image_attacks_with_variations = [
-    "center_crop",
-    "jpeg",
-    "brightness",
-    "contrast",
-    "saturation",
-    "sharpness",
-    "resize",
-    "perspective",
-    "median_filter",
-    "hue",
-    "gaussian_blur",
-]
-
-
-video_attacks_with_variations = [
-    "Rotate",
-    "Resize",
-    "Crop",
-    "Brightness",
-    "Contrast",
-    "Saturation",
-    "H264",
-    "H264rgb",
-    "H265",
-]
-
 
 def plot_data(metric, selected_attack, all_attacks_df):
     attack_df = all_attacks_df[all_attacks_df.attack == selected_attack]
@@ -57,8 +19,7 @@ def plot_data(metric, selected_attack, all_attacks_df):
 
 def mk_variations(
     all_attacks_df,
-    metrics: list[str] = attacks_plot_metrics,
-    attacks_with_variations: list[str] = audio_attacks_with_variations,
+    attacks_with_variations: list[str],
 ):
     # all_attacks_df = pd.read_csv(csv_file)
     # print(all_attacks_df)
@@ -92,8 +53,17 @@ def mk_variations(
     #     all_graphs,
     # )
 
+    # Replace NaN values with None for JSON serialization
+    all_attacks_df = all_attacks_df.fillna(value="NaN")
+    attacks_plot_metrics = [
+        "bit_acc",
+        "log10_p_value",
+        "TPR",
+        "FPR",
+        "watermark_det_score",
+    ]
     return {
-        "metrics": metrics,
+        "metrics": attacks_plot_metrics,
         "attacks_with_variations": attacks_with_variations,
         "all_attacks_df": all_attacks_df.to_dict(orient="records"),
     }

backend/config.py

@@ -1,5 +1,9 @@
+ABS_DATASET_DOMAIN = "https://dl.fbaipublicfiles.com"
+ABS_DATASET_PATH = f"{ABS_DATASET_DOMAIN}/omnisealbench/"
+
+
 def get_dataset_config(dataset_name):
-    if dataset_name == "voxpopuli_1k_audio_benchmark":
+    if dataset_name == "voxpopuli_1k/audio":
         return {
             "first_cols": [
                 "snr",
@@ -29,8 +33,16 @@ def get_dataset_config(dataset_name):
                 "aac_compression": "Compression",
                 "mp3_compression": "Compression",
             },
+            "attacks_with_variations": [
+                "random_noise",
+                "lowpass_filter",
+                "highpass_filter",
+                "boost_audio",
+                "duck_audio",
+                "shush",
+            ],
         }
-    elif dataset_name == "ravdess_1k_audio_benchmark":
+    elif dataset_name == "ravdess_1k/audio":
         return {
             "first_cols": ["snr", "sisnr", "stoi", "pesq"],
             "attack_scores": ["bit_acc", "log10_p_value", "TPR", "FPR"],
@@ -50,8 +62,16 @@ def get_dataset_config(dataset_name):
                 "aac_compression": "Compression",
                 "mp3_compression": "Compression",
             },
+            "attacks_with_variations": [
+                "random_noise",
+                "lowpass_filter",
+                "highpass_filter",
+                "boost_audio",
+                "duck_audio",
+                "shush",
+            ],
         }
-    elif dataset_name == "val2014_1k_image_benchmark":
+    elif dataset_name == "val2014_1k/image":
         return {
             "first_cols": ["psnr", "ssim", "lpips", "decoder_time"],
             "attack_scores": ["bit_acc", "log10_p_value", "TPR", "FPR"],
@@ -76,8 +96,21 @@ def get_dataset_config(dataset_name):
                 "avg": "Averages",
                 "none": "Baseline",
             },
+            "attacks_with_variations": [
+                "center_crop",
+                "jpeg",
+                "brightness",
+                "contrast",
+                "saturation",
+                "sharpness",
+                "resize",
+                "perspective",
+                "median_filter",
+                "hue",
+                "gaussian_blur",
+            ],
         }
-    elif dataset_name == "sav_val_full_video_benchmark":
+    elif dataset_name == "sav_val_full/video":
         return {
             "first_cols": ["psnr", "ssim", "msssim", "lpips", "vmaf", "decoder_time"],
             "attack_scores": ["bit_acc", "log10_p_value", "TPR", "FPR"],
@@ -104,6 +137,17 @@ def get_dataset_config(dataset_name):
                 "H264_Crop_Brightness2": "Mixed",
                 "H264_Crop_Brightness3": "Mixed",
             },
+            "attacks_with_variations": [
+                "Rotate",
+                "Resize",
+                "Crop",
+                "Brightness",
+                "Contrast",
+                "Saturation",
+                "H264",
+                "H264rgb",
+                "H265",
+            ],
         }
     else:
         raise ValueError(f"Unknown dataset: {dataset_name}")

frontend/src/App.tsx

@@ -1,17 +1,32 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Examples from './components/Examples'
-import LeaderBoardPage from './components/LeaderBoardPage'
+import LeaderboardPage from './components/LeaderboardPage'
 
 function App() {
   const [activeTab, setActiveTab] = useState<
     'leaderboard' | 'imageExamples' | 'audioExamples' | 'videoExamples'
   >('leaderboard')
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark')
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+  }, [theme])
 
   return (
     <div className="min-h-screen w-11/12 mx-auto">
-      <div className="card max-w-4xl bg-base-100">
-        <div className="card-body">
+      <div className="bg-base-100 my-4">
+        <div className="flex flex-row justify-between items-center">
           <h2 className="card-title">🥇 Omni Seal Bench Watermarking Leaderboard</h2>
+          <div className="flex justify-end items-center gap-2">
+            <span className="text-sm">{theme === 'dark' ? '🌙 Dark Mode' : '☀️ Light Mode'}</span>
+            <input
+              type="checkbox"
+              className="toggle"
+              checked={theme === 'dark'}
+              onChange={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+              aria-label="Toggle dark mode"
+            />
+          </div>
         </div>
       </div>
 
@@ -24,8 +39,8 @@ function App() {
           checked={activeTab === 'leaderboard'}
           onChange={() => setActiveTab('leaderboard')}
         />
-        <div className="tab-content bg-base-100 border-base-300 p-6">
-          <LeaderBoardPage />
+        <div className="tab-content bg-base-100  ">
+          <LeaderboardPage />
         </div>
 
         <input
@@ -36,8 +51,8 @@ function App() {
           checked={activeTab === 'imageExamples'}
           onChange={() => setActiveTab('imageExamples')}
         />
-        <div className="tab-content bg-base-100 border-base-300 p-6">
-          <Examples fileType="image" />
+        <div className="tab-content bg-base-100  ">
+          {activeTab === 'imageExamples' ? <Examples fileType="image" /> : null}
         </div>
 
         <input
@@ -48,8 +63,8 @@ function App() {
           checked={activeTab === 'audioExamples'}
           onChange={() => setActiveTab('audioExamples')}
         />
-        <div className="tab-content bg-base-100 border-base-300 p-6">
-          <Examples fileType="audio" />
+        <div className="tab-content bg-base-100  ">
+          {activeTab === 'audioExamples' ? <Examples fileType="audio" /> : null}
         </div>
 
         <input
@@ -60,8 +75,8 @@ function App() {
           checked={activeTab === 'videoExamples'}
           onChange={() => setActiveTab('videoExamples')}
         />
-        <div className="tab-content bg-base-100 border-base-300 p-6">
-          <Examples fileType="video" />
+        <div className="tab-content bg-base-100  ">
+          {activeTab === 'videoExamples' ? <Examples fileType="video" /> : null}
         </div>
       </div>
     </div>

frontend/src/components/DatasetSelector.tsx

@@ -1,31 +1,31 @@
 import React from 'react'
 
 interface DatasetSelectorProps {
-  datasets: string[]
-  selectedDataset: string
-  onDatasetChange: (dataset: string) => void
+  datasetNames: string[]
+  selectedDatasetName: string
+  onDatasetNameChange: (datasetName: string) => void
 }
 
 const DatasetSelector: React.FC<DatasetSelectorProps> = ({
-  datasets,
-  selectedDataset,
-  onDatasetChange,
+  datasetNames,
+  selectedDatasetName,
+  onDatasetNameChange,
 }) => {
   return (
     <div className="mb-4">
-      <fieldset className="fieldset w-full p-4 rounded border">
+      <fieldset className="fieldset w-full p-4 rounded border border-gray-700">
         <legend className="fieldset-legend font-semibold">Dataset</legend>
         <div className="flex flex-wrap gap-2">
-          {datasets.map((dataset) => (
-            <label key={dataset} className="flex items-center gap-2 cursor-pointer">
+          {datasetNames.map((datasetName) => (
+            <label key={datasetName} className="flex items-center gap-2 cursor-pointer">
               <input
                 type="radio"
                 name="dataset"
                 className="radio radio-sm"
-                checked={selectedDataset === dataset}
-                onChange={() => onDatasetChange(dataset)}
+                checked={selectedDatasetName === datasetName}
+                onChange={() => onDatasetNameChange(datasetName)}
               />
-              <span className="text-sm">{dataset}</span>
+              <span className="text-sm">{datasetName}</span>
             </label>
           ))}
         </div>

frontend/src/components/Examples.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import API from '../API'
 import AudioPlayer from './AudioPlayer'
+import LoadingSpinner from './LoadingSpinner'
 
 interface ExamplesProps {
   fileType: 'image' | 'audio' | 'video'
@@ -131,7 +132,7 @@ const Examples = ({ fileType }: ExamplesProps) => {
         )}
       </div>
 
-      {loading && <p>Loading files...</p>}
+      {loading && <LoadingSpinner />}
       {error && <p className="error">Error: {error}</p>}
 
       {selectedModel && selectedAttack && (

frontend/src/components/LeaderBoardPage.tsx

@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import DatasetSelector from './DatasetSelector'
-import LeaderboardTable from './LeaderboardTable'
-import DataChart from './DataChart'
-
-const LeaderBoardPage: React.FC = () => {
-  const datasets = [
-    'voxpopuli_1k_audio',
-    'ravdess_1k_audio',
-    'val2014_1k_image',
-    'sav_val_full_video',
-  ]
-  const [selectedDataset, setSelectedDataset] = useState('voxpopuli_1k_audio')
-
-  return (
-    <div className="space-y-6">
-      <DatasetSelector
-        datasets={datasets}
-        selectedDataset={selectedDataset}
-        onDatasetChange={setSelectedDataset}
-      />
-
-      <div className="space-y-8">
-        <LeaderboardTable dataset={selectedDataset} />
-        <div className="mt-8 pt-4 border-t border-gray-200">
-          <h3 className="text-lg font-semibold mb-4">Performance Chart</h3>
-          <DataChart dataset={selectedDataset} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default LeaderBoardPage

frontend/src/components/LeaderboardChart.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useState } from 'react'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import API from '../API'
+import LoadingSpinner from './LoadingSpinner'
+
+interface LeaderboardChartProps {
+  dataset: string
+  selectedModels: Set<string>
+}
+
+interface Row {
+  metric: string
+  [key: string]: string | number
+}
+
+const MetricSelector = ({
+  metrics,
+  selectedMetric,
+  onMetricChange,
+}: {
+  metrics: Set<string>
+  selectedMetric: string | null
+  onMetricChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
+}) => {
+  return (
+    <fieldset className="fieldset">
+      <legend className="fieldset-legend">Metric</legend>
+      <select
+        id="metric-selector"
+        value={selectedMetric || ''}
+        onChange={onMetricChange}
+        className="select select-bordered w-full"
+      >
+        {[...metrics].map((metric) => (
+          <option key={metric} value={metric}>
+            {metric}
+          </option>
+        ))}
+      </select>
+    </fieldset>
+  )
+}
+
+const AttackSelector = ({
+  attacks,
+  selectedAttack,
+  onAttackChange,
+}: {
+  attacks: Set<string>
+  selectedAttack: string | null
+  onAttackChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
+}) => {
+  return (
+    <fieldset className="fieldset mb-4">
+      <legend className="fieldset-legend">Attack</legend>
+      <select
+        id="attack-selector"
+        value={selectedAttack || ''}
+        onChange={onAttackChange}
+        className="select select-bordered w-full"
+      >
+        {[...attacks].map((attack) => (
+          <option key={attack} value={attack}>
+            {attack}
+          </option>
+        ))}
+      </select>
+    </fieldset>
+  )
+}
+
+const LeaderboardChart = ({ dataset, selectedModels }: LeaderboardChartProps) => {
+  const [chartData, setChartData] = useState<Row[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [metrics, setMetrics] = useState<Set<string>>(new Set())
+  const [attacks, setAttacks] = useState<Set<string>>(new Set())
+  const [selectedMetric, setSelectedMetric] = useState<string | null>(null)
+  const [selectedAttack, setSelectedAttack] = useState<string | null>(null)
+
+  useEffect(() => {
+    setLoading(true)
+    API.fetchStaticFile(`data/${dataset}?dataset_type=attacks_variations`)
+      .then((response) => {
+        const data = JSON.parse(response)
+        const rows: Row[] = data['all_attacks_df'].map((row: any) => {
+          const newRow: Row = { ...row }
+          // Convert strength value to number if it exists and is a string
+          if (typeof newRow.strength === 'string') {
+            newRow.strength = parseFloat(newRow.strength)
+          }
+          return newRow
+        })
+
+        setSelectedMetric(data['metrics'][0])
+        setMetrics(new Set(data['metrics']))
+        setSelectedAttack(data['attacks_with_variations'][0])
+        setAttacks(new Set(data['attacks_with_variations']))
+        setChartData(rows)
+        setLoading(false)
+      })
+      .catch((err) => {
+        setError('Failed to fetch JSON: ' + err.message)
+        setLoading(false)
+      })
+  }, [dataset])
+
+  const handleMetricChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedMetric(event.target.value)
+  }
+
+  const handleAttackChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedAttack(event.target.value)
+  }
+
+  // Sort the chart data by the 'strength' field before rendering
+  const sortedChartData = chartData
+    .filter((row) => !selectedAttack || row.attack === selectedAttack)
+    .sort((a, b) => (a.strength as number) - (b.strength as number))
+
+  return (
+    <div className="rounded shadow p-4 overflow-auto mb-8">
+      {loading && <LoadingSpinner />}
+      {error && <div className="text-red-500">{error}</div>}
+      {!loading && !error && (
+        <>
+          <div className="flex flex-col md:flex-row md:gap-x-4 mb-4">
+            <div className="w-full md:w-1/2">
+              <MetricSelector
+                metrics={metrics}
+                selectedMetric={selectedMetric}
+                onMetricChange={handleMetricChange}
+              />
+            </div>
+            <div className="w-full md:w-1/2">
+              <AttackSelector
+                attacks={attacks}
+                selectedAttack={selectedAttack}
+                onAttackChange={handleAttackChange}
+              />
+            </div>
+          </div>
+
+          {chartData.length > 0 && (
+            <div className="h-64 mb-4">
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart
+                  data={sortedChartData}
+                  margin={{
+                    top: 5,
+                    right: 30,
+                    left: 20,
+                    bottom: 5,
+                  }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis
+                    dataKey="strength"
+                    domain={[
+                      Math.min(...sortedChartData.map((item) => Number(item.strength))),
+                      Math.max(...sortedChartData.map((item) => Number(item.strength))),
+                    ]}
+                    type="number"
+                    tickFormatter={(value) => value.toFixed(3)}
+                    label={{ value: 'Strength', position: 'insideBottomRight', offset: -5 }}
+                  />
+                  <YAxis
+                    label={{
+                      value: selectedMetric || '',
+                      angle: -90,
+                      position: 'insideLeft',
+                      style: { textAnchor: 'middle' },
+                    }}
+                    tickFormatter={(value) => value.toFixed(3)}
+                  />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: '#2a303c',
+                      borderColor: '#374151',
+                      color: 'white',
+                    }}
+                    formatter={(value: number) => value.toFixed(3)}
+                  />
+                  <Legend />
+
+                  {(() => {
+                    // Ensure selectedMetric is not null before rendering the Line components
+                    if (!selectedMetric) return null // Do not render lines if no metric is selected
+
+                    // Get unique models from the filtered and sorted data
+                    const models = new Set(
+                      sortedChartData
+                        .filter((row) => selectedModels.has(row.model as string))
+                        .map((row) => row.model)
+                    )
+
+                    // Generate different colors for each model
+                    const colors = [
+                      '#8884d8',
+                      '#82ca9d',
+                      '#ffc658',
+                      '#ff8042',
+                      '#0088fe',
+                      '#00C49F',
+                    ]
+
+                    // Return a Line component for each model
+                    return [...models].map((model, index) => {
+                      return (
+                        <Line
+                          key={model as string}
+                          type="monotone"
+                          dataKey={selectedMetric as string} // Ensure selectedMetric is a string
+                          data={sortedChartData.filter((row) => row.model === model)}
+                          name={model as string}
+                          stroke={colors[index % colors.length]}
+                          dot={false}
+                        />
+                      )
+                    })
+                  })()}
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default LeaderboardChart

frontend/src/components/LeaderboardFilter.tsx

@@ -173,7 +173,7 @@ const LeaderboardFilter: React.FC<FilterProps> = ({
             <input
               type="text"
               placeholder="Search metrics..."
-              className="input input-bordered border-white input-sm w-48 pr-8"
+              className="input input-bordered border-gray-300 input-sm w-48 pr-8"
               value={searchTerm}
               onChange={(e) => {
                 const value = e.target.value

frontend/src/components/LeaderboardPage.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react'
+import DatasetSelector from './DatasetSelector'
+import LeaderboardTable from './LeaderboardTable'
+import LeaderboardChart from './LeaderboardChart'
+import ModelFilter from './ModelFilter'
+import API from '../API'
+import LoadingSpinner from './LoadingSpinner'
+
+const LeaderboardPage: React.FC = () => {
+  const datasetNames = [
+    'voxpopuli_1k/audio',
+    'ravdess_1k/audio',
+    'val2014_1k/image',
+    'sav_val_full/video',
+  ]
+  const [selectedDatasetName, setSelectedDatasetName] = useState(datasetNames[0])
+  const [models, setModels] = useState<string[]>([])
+  const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set())
+  const [loading, setLoading] = useState(true)
+  const [benchmarkData, setBenchmarkData] = useState<any>(null)
+
+  // Fetch available models when dataset changes
+  useEffect(() => {
+    setLoading(true)
+    API.fetchStaticFile(`data/${selectedDatasetName}?dataset_type=benchmark`)
+      .then((response) => {
+        const data = JSON.parse(response)
+        setBenchmarkData(data)
+        const rows = data['rows']
+        const allKeys: string[] = Array.from(new Set(rows.flatMap((row: any) => Object.keys(row))))
+        // Remove 'metric' from headers if it exists
+        const headers = allKeys.filter((key) => key !== 'metric')
+
+        setModels(headers)
+        // Initialize all models as selected
+        setSelectedModels(new Set(headers))
+        setLoading(false)
+      })
+      .catch((err) => {
+        console.error('Failed to fetch models:', err)
+        setLoading(false)
+      })
+  }, [selectedDatasetName])
+
+  return (
+    <div className="">
+      <div className="flex flex-col gap-4">
+        <DatasetSelector
+          datasetNames={datasetNames}
+          selectedDatasetName={selectedDatasetName}
+          onDatasetNameChange={setSelectedDatasetName}
+        />
+      </div>
+      {loading ? (
+        <LoadingSpinner />
+      ) : (
+        <>
+          {models.length > 0 && (
+            <ModelFilter
+              models={models}
+              selectedModels={selectedModels}
+              setSelectedModels={setSelectedModels}
+            />
+          )}
+          <div className="space-y-8">
+            <LeaderboardTable benchmarkData={benchmarkData} selectedModels={selectedModels} />
+            <div className="mt-8 pt-4 border-t border-gray-200">
+              <LeaderboardChart dataset={selectedDatasetName} selectedModels={selectedModels} />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default LeaderboardPage

frontend/src/components/LeaderboardTable.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import API from '../API'
 import LeaderboardFilter from './LeaderboardFilter'
-import ModelFilter from './ModelFilter'
+import LoadingSpinner from './LoadingSpinner'
 
 interface LeaderboardTableProps {
-  dataset: string
+  benchmarkData: any
+  selectedModels: Set<string>
 }
 
 interface Row {
@@ -16,119 +16,126 @@ interface Groups {
   [group: string]: { [subgroup: string]: string[] }
 }
 
-interface GroupStats {
-  average: { [key: string]: number }
-  stdDev: { [key: string]: number }
+const OverallMetricFilter: React.FC<{
+  overallMetrics: string[]
+  selectedOverallMetrics: Set<string>
+  setSelectedOverallMetrics: (metrics: Set<string>) => void
+}> = ({ overallMetrics, selectedOverallMetrics, setSelectedOverallMetrics }) => {
+  const toggleMetric = (metric: string) => {
+    const newSelected = new Set(selectedOverallMetrics)
+    if (newSelected.has(metric)) {
+      newSelected.delete(metric)
+    } else {
+      newSelected.add(metric)
+    }
+    setSelectedOverallMetrics(newSelected)
+  }
+  return (
+    <div className="w-full mb-4">
+      <fieldset className="fieldset w-full p-4 rounded border border-gray-700">
+        <legend className="fieldset-legend font-semibold">
+          Metrics ({selectedOverallMetrics.size}/{overallMetrics.length})
+        </legend>
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-1 max-h-48 overflow-y-auto pr-2">
+          {overallMetrics.map((metric) => (
+            <label key={metric} className="flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                className="form-checkbox h-4 w-4"
+                checked={selectedOverallMetrics.has(metric)}
+                onChange={() => toggleMetric(metric)}
+              />
+              <span className="truncate" title={metric}>
+                {metric}
+              </span>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  )
 }
 
-const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ dataset }) => {
+const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, selectedModels }) => {
   const [tableRows, setTableRows] = useState<Row[]>([])
   const [tableHeader, setTableHeader] = useState<string[]>([])
-  const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [groups, setGroups] = useState<Groups>({})
   const [openGroups, setOpenGroups] = useState<{ [key: string]: boolean }>({})
   const [openSubGroups, setOpenSubGroups] = useState<{ [key: string]: { [key: string]: boolean } }>(
     {}
   )
-
   const [selectedMetrics, setSelectedMetrics] = useState<Set<string>>(new Set())
-  const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set())
-
-  // To store the unique metrics from the Overall group
   const [overallMetrics, setOverallMetrics] = useState<string[]>([])
+  const [selectedOverallMetrics, setSelectedOverallMetrics] = useState<Set<string>>(new Set())
 
   useEffect(() => {
-    API.fetchStaticFile(`data/${dataset}_benchmark`)
-      .then((response) => {
-        const data = JSON.parse(response)
-        const rows: Row[] = data['rows']
-        // Split out the Overall group from groups
-        const allGroups = data['groups'] as { [key: string]: string[] }
-        // const overallGroup = allGroups['Overall'] || []
-        // Remove 'Overall' from groups
-        const { Overall: overallGroup, ...groups } = allGroups
-        const uniqueMetrics = new Set<string>()
-
-        overallGroup.forEach((metric) => {
-          if (metric.includes('_')) {
-            // Extract the part after the first underscore
-            const metricName = metric.split('_').slice(1).join('_')
-            uniqueMetrics.add(metricName)
-          }
+    if (!benchmarkData) {
+      return
+    }
+    try {
+      const data = benchmarkData
+      const rows: Row[] = data['rows']
+      const allGroups = data['groups'] as { [key: string]: string[] }
+      const { Overall: overallGroup, ...groups } = allGroups
+      const uniqueMetrics = new Set<string>()
+      overallGroup?.forEach((metric) => {
+        if (metric.includes('_')) {
+          const metricName = metric.split('_').slice(1).join('_')
+          uniqueMetrics.add(metricName)
+        }
+      })
+      setOverallMetrics(Array.from(uniqueMetrics).sort())
+      setSelectedOverallMetrics(new Set(Array.from(uniqueMetrics)))
+      const groupsData = Object.entries(groups)
+        .sort(([groupA], [groupB]) => {
+          if (groupA === 'Overall') return -1
+          if (groupB === 'Overall') return 1
+          return groupA.localeCompare(groupB)
         })
-
-        setOverallMetrics(Array.from(uniqueMetrics).sort())
-
-        // Each value of groups is a list of metrics, group them by the first part of the metric before the first _
-        const groupsData = Object.entries(groups)
-          .sort(([groupA], [groupB]) => {
-            // Make sure "overall" comes first
-            if (groupA === 'Overall') return -1
-            if (groupB === 'Overall') return 1
-            // Otherwise sort alphabetically
-            return groupA.localeCompare(groupB)
-          })
-          .reduce(
-            (acc, [group, metrics]) => {
-              // Sort metrics to ensure consistent subgroup order
-              const sortedMetrics = [...metrics].sort()
-
-              // Create and sort subgroups
-              acc[group] = sortedMetrics.reduce<{ [key: string]: string[] }>((subAcc, metric) => {
-                const [mainGroup, subGroup] = metric.split('_')
-                if (!subAcc[mainGroup]) {
-                  subAcc[mainGroup] = []
-                }
-                subAcc[mainGroup].push(metric)
-                return subAcc
-              }, {})
-
-              // Convert to sorted entries and back to object
-              acc[group] = Object.fromEntries(
-                Object.entries(acc[group]).sort(([subGroupA], [subGroupB]) =>
-                  subGroupA.localeCompare(subGroupB)
-                )
+        .reduce(
+          (acc, [group, metrics]) => {
+            const sortedMetrics = [...metrics].sort()
+            acc[group] = sortedMetrics.reduce<{ [key: string]: string[] }>((subAcc, metric) => {
+              const [mainGroup, subGroup] = metric.split('_')
+              if (!subAcc[mainGroup]) {
+                subAcc[mainGroup] = []
+              }
+              subAcc[mainGroup].push(metric)
+              return subAcc
+            }, {})
+            acc[group] = Object.fromEntries(
+              Object.entries(acc[group]).sort(([subGroupA], [subGroupB]) =>
+                subGroupA.localeCompare(subGroupB)
               )
-
-              return acc
-            },
-            {} as { [key: string]: { [key: string]: string[] } }
-          )
-
-        const allKeys: string[] = Array.from(new Set(rows.flatMap((row) => Object.keys(row))))
-        // Remove 'metric' from headers if it exists
-        const headers = allKeys.filter((key) => key !== 'metric')
-
-        // Initialize open states for groups and subgroups
-        const initialOpenGroups: { [key: string]: boolean } = {}
-        const initialOpenSubGroups: { [key: string]: { [key: string]: boolean } } = {}
-
-        Object.keys(groupsData).forEach((group) => {
-          initialOpenGroups[group] = false
-          initialOpenSubGroups[group] = {}
-          Object.keys(groupsData[group]).forEach((subGroup) => {
-            initialOpenSubGroups[group][subGroup] = false
-          })
+            )
+            return acc
+          },
+          {} as { [key: string]: { [key: string]: string[] } }
+        )
+      const allKeys: string[] = Array.from(new Set(rows.flatMap((row) => Object.keys(row))))
+      const headers = allKeys.filter((key) => key !== 'metric')
+      const initialOpenGroups: { [key: string]: boolean } = {}
+      const initialOpenSubGroups: { [key: string]: { [key: string]: boolean } } = {}
+      Object.keys(groupsData).forEach((group) => {
+        initialOpenGroups[group] = false
+        initialOpenSubGroups[group] = {}
+        Object.keys(groupsData[group]).forEach((subGroup) => {
+          initialOpenSubGroups[group][subGroup] = false
         })
-
-        // Get all metrics from all groups
-        const allMetrics = Object.values(groups).flat()
-        setSelectedMetrics(new Set(allMetrics))
-        // Initialize all models as selected
-        setSelectedModels(new Set(headers))
-        setTableHeader(headers)
-        setTableRows(rows)
-        setGroups(groupsData)
-        setOpenGroups(initialOpenGroups)
-        setOpenSubGroups(initialOpenSubGroups)
-        setLoading(false)
-      })
-      .catch((err) => {
-        setError('Failed to fetch JSON: ' + err.message)
-        setLoading(false)
       })
-  }, [dataset])
+      const allMetrics = Object.values(groups).flat()
+      setSelectedMetrics(new Set(allMetrics))
+      setTableHeader(headers)
+      setTableRows(rows)
+      setGroups(groupsData)
+      setOpenGroups(initialOpenGroups)
+      setOpenSubGroups(initialOpenSubGroups)
+      setError(null)
+    } catch (err: any) {
+      setError('Failed to parse benchmark data, please try again: ' + err.message)
+    }
+  }, [benchmarkData])
 
   const toggleGroup = (group: string) => {
     setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
@@ -227,23 +234,21 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ dataset }) => {
   }
 
   return (
-    <div className="rounded shadow overflow-auto">
-      {loading && <div>Loading...</div>}
+    <div className="rounded shadow">
       {error && <div className="text-red-500">{error}</div>}
-
-      {!loading && !error && (
-        <div className="overflow-x-auto">
+      {!error && (
+        <div className="flex flex-col gap-8">
           <div className="flex flex-col gap-4">
-            <ModelFilter
-              models={tableHeader}
-              selectedModels={selectedModels}
-              setSelectedModels={setSelectedModels}
+            <OverallMetricFilter
+              overallMetrics={overallMetrics}
+              selectedOverallMetrics={selectedOverallMetrics}
+              setSelectedOverallMetrics={setSelectedOverallMetrics}
             />
-            <LeaderboardFilter
+            {/* <LeaderboardFilter
               groups={groups}
               selectedMetrics={selectedMetrics}
               setSelectedMetrics={setSelectedMetrics}
-            />
+            /> */}
           </div>
 
           {selectedModels.size === 0 || selectedMetrics.size === 0 ? (
@@ -252,332 +257,25 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ dataset }) => {
             </div>
           ) : (
             <>
-              <table className="table w-full">
-                <thead>
-                  <tr>
-                    <th>Group / Subgroup</th>
-                    {overallMetrics.map((metric) => (
-                      <th
-                        key={metric}
-                        colSpan={tableHeader.filter((model) => selectedModels.has(model)).length}
-                        className="text-center border-x"
-                      >
-                        {metric}
-                      </th>
-                    ))}
-                  </tr>
-                  <tr>
-                    <th></th>
-                    {overallMetrics.map((metric) => (
-                      <React.Fragment key={`header-models-${metric}`}>
-                        {tableHeader
-                          .filter((model) => selectedModels.has(model))
-                          .map((model) => (
-                            <th key={`${metric}-${model}`} className="text-center text-xs">
-                              {model}
-                            </th>
-                          ))}
-                      </React.Fragment>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {/* First render each group */}
-                  {Object.entries(groups).map(([group, subGroups]) => {
-                    // Skip the "Overall" group completely
-                    if (group === 'Overall') return null
-
-                    // Get all metrics for this group
-                    const allGroupMetrics = Object.values(subGroups).flat()
-                    // Filter to only include selected metrics
-                    const visibleGroupMetrics = filterMetricsByGroupAndSubgroup(
-                      allGroupMetrics,
-                      group
-                    )
-
-                    // Skip this group if no metrics are selected
-                    if (visibleGroupMetrics.length === 0) return null
-
-                    return (
-                      <React.Fragment key={group}>
-                        {/* Group row with average stats for the entire group */}
-                        <tr
-                          className="bg-base-200 cursor-pointer hover:bg-base-300"
-                          onClick={() => toggleGroup(group)}
-                        >
-                          <td className="font-medium">
-                            {openGroups[group] ? '▼ ' : '▶ '}
-                            {group}
-                          </td>
-                          {/* For each metric column */}
-                          {overallMetrics.map((metric) => (
-                            // Render sub-columns for each model
-                            <React.Fragment key={`${group}-${metric}`}>
-                              {tableHeader
-                                .filter((model) => selectedModels.has(model))
-                                .map((col) => {
-                                  // Find all metrics in this group that match the current metric name
-                                  const allMetricsWithName = findAllMetricsForName(metric)
-                                  const metricsInGroupForThisMetric = visibleGroupMetrics.filter(
-                                    (m) => allMetricsWithName.includes(m)
-                                  )
-                                  const stats = calculateStats(metricsInGroupForThisMetric, col)
-
-                                  return (
-                                    <td
-                                      key={`${group}-${metric}-${col}`}
-                                      className="font-medium text-center"
-                                    >
-                                      {!isNaN(stats.avg)
-                                        ? `${stats.avg.toFixed(3)} ± ${stats.stdDev.toFixed(3)}`
-                                        : 'N/A'}
-                                    </td>
-                                  )
-                                })}
-                            </React.Fragment>
-                          ))}
-                        </tr>
-
-                        {/* Only render subgroups if group is open */}
-                        {openGroups[group] &&
-                          Object.entries(subGroups).map(([subGroup, metrics]) => {
-                            // Filter to only include selected metrics in this subgroup
-                            const visibleSubgroupMetrics = filterMetricsByGroupAndSubgroup(
-                              metrics,
-                              group,
-                              subGroup
-                            )
-
-                            // Skip this subgroup if no metrics are selected
-                            if (visibleSubgroupMetrics.length === 0) return null
-
-                            return (
-                              <React.Fragment key={`${group}-${subGroup}`}>
-                                {/* Subgroup row with average stats for the subgroup */}
-                                <tr
-                                  className="bg-base-100 cursor-pointer hover:bg-base-200"
-                                  onClick={() => toggleSubGroup(group, subGroup)}
-                                >
-                                  <td className="pl-6 font-medium">
-                                    {openSubGroups[group]?.[subGroup] ? '▼ ' : '▶ '}
-                                    {subGroup}
-                                  </td>
-                                  {/* For each metric column */}
-                                  {overallMetrics.map((metric) => (
-                                    // Render sub-columns for each model
-                                    <React.Fragment key={`${group}-${subGroup}-${metric}`}>
-                                      {tableHeader
-                                        .filter((model) => selectedModels.has(model))
-                                        .map((col) => {
-                                          // Find all metrics in this subgroup that match the current metric name
-                                          const allMetricsWithName = findAllMetricsForName(metric)
-                                          const metricsInSubgroupForThisMetric =
-                                            visibleSubgroupMetrics.filter((m) =>
-                                              allMetricsWithName.includes(m)
-                                            )
-                                          const stats = calculateStats(
-                                            metricsInSubgroupForThisMetric,
-                                            col
-                                          )
-
-                                          return (
-                                            <td
-                                              key={`${group}-${subGroup}-${metric}-${col}`}
-                                              className="font-medium text-center"
-                                            >
-                                              {!isNaN(stats.avg)
-                                                ? `${stats.avg.toFixed(3)} ± ${stats.stdDev.toFixed(3)}`
-                                                : 'N/A'}
-                                            </td>
-                                          )
-                                        })}
-                                    </React.Fragment>
-                                  ))}
-                                </tr>
-
-                                {/* Individual metric rows */}
-                                {openSubGroups[group]?.[subGroup] &&
-                                  // Sort visibleSubgroupMetrics alphabetically by the clean metric name
-                                  [...visibleSubgroupMetrics]
-                                    .sort((a, b) => {
-                                      // For metrics with format {category}_{strength}_{overall_metric_name},
-                                      // First sort by category, then by overall_metric_name, then by strength
-
-                                      // First extract the overall metric group
-                                      const getOverallMetricGroup = (metric: string) => {
-                                        for (const overall of overallMetrics) {
-                                          if (
-                                            metric.endsWith(`_${overall}`) ||
-                                            metric === overall
-                                          ) {
-                                            return overall
-                                          }
-                                        }
-                                        return ''
-                                      }
-
-                                      const overallA = getOverallMetricGroup(a)
-                                      const overallB = getOverallMetricGroup(b)
-
-                                      // Extract the strength (last part before the overall metric)
-                                      const stripOverall = (metric: string, overall: string) => {
-                                        if (metric.endsWith(`_${overall}`)) {
-                                          // Remove the overall metric group and any preceding underscore
-                                          const stripped = metric.slice(
-                                            0,
-                                            metric.length - overall.length - 1
-                                          )
-                                          const parts = stripped.split('_')
-                                          return parts.length > 0 ? parts[parts.length - 1] : ''
-                                        }
-                                        return metric
-                                      }
-
-                                      // Extract the category (what remains after removing strength and overall_metric_name)
-                                      const getCategory = (metric: string, overall: string) => {
-                                        if (metric.endsWith(`_${overall}`)) {
-                                          const stripped = metric.slice(
-                                            0,
-                                            metric.length - overall.length - 1
-                                          )
-                                          const parts = stripped.split('_')
-                                          // Remove the last part (strength) and join the rest (category)
-                                          return parts.length > 1
-                                            ? parts.slice(0, parts.length - 1).join('_')
-                                            : ''
-                                        }
-                                        return metric
-                                      }
-
-                                      const categoryA = getCategory(a, overallA)
-                                      const categoryB = getCategory(b, overallB)
-
-                                      // First sort by category
-                                      if (categoryA !== categoryB) {
-                                        return categoryA.localeCompare(categoryB)
-                                      }
-
-                                      // Then sort by overall metric name
-                                      if (overallA !== overallB) {
-                                        return overallA.localeCompare(overallB)
-                                      }
-
-                                      // Finally sort by strength
-                                      const subA = stripOverall(a, overallA)
-                                      const subB = stripOverall(b, overallB)
-
-                                      // Try to parse subA and subB as numbers, handling k/m/b suffixes
-                                      const parseNumber = (str: string) => {
-                                        const match = str.match(/^(\d+(?:\.\d+)?)([kKmMbB]?)$/)
-                                        if (!match) return NaN
-                                        let [_, num, suffix] = match
-                                        let value = parseFloat(num)
-                                        switch (suffix.toLowerCase()) {
-                                          case 'k':
-                                            value *= 1e3
-                                            break
-                                          case 'm':
-                                            value *= 1e6
-                                            break
-                                          case 'b':
-                                            value *= 1e9
-                                            break
-                                        }
-                                        return value
-                                      }
-
-                                      const numA = parseNumber(subA)
-                                      const numB = parseNumber(subB)
-
-                                      if (!isNaN(numA) && !isNaN(numB)) {
-                                        return numA - numB
-                                      }
-                                      // Fallback to string comparison if not both numbers
-                                      return subA.localeCompare(subB)
-                                    })
-                                    .map((metric) => {
-                                      const row = tableRows.find((r) => r.metric === metric)
-                                      if (!row) return null
-
-                                      // Extract the metric name (after the underscore)
-                                      const metricName = metric.includes('_')
-                                        ? metric.split('_').slice(1).join('_')
-                                        : metric
-
-                                      return (
-                                        <tr key={metric} className="hover:bg-base-100">
-                                          <td className="pl-10">{metric}</td>
-                                          {/* For each metric column */}
-                                          {overallMetrics.map((oMetric) => {
-                                            // Only show values for the matching metric
-                                            const isMatchingMetric =
-                                              findAllMetricsForName(oMetric).includes(metric)
-
-                                            if (!isMatchingMetric) {
-                                              // Fill empty cells for non-matching metrics
-                                              return (
-                                                <React.Fragment key={`${metric}-${oMetric}`}>
-                                                  {tableHeader
-                                                    .filter((model) => selectedModels.has(model))
-                                                    .map((col) => (
-                                                      <td
-                                                        key={`${metric}-${oMetric}-${col}`}
-                                                        className="text-center"
-                                                      ></td>
-                                                    ))}
-                                                </React.Fragment>
-                                              )
-                                            }
-
-                                            // Show values for the matching metric
-                                            return (
-                                              <React.Fragment key={`${metric}-${oMetric}`}>
-                                                {tableHeader
-                                                  .filter((model) => selectedModels.has(model))
-                                                  .map((col) => {
-                                                    const cell = row[col]
-                                                    return (
-                                                      <td
-                                                        key={`${metric}-${oMetric}-${col}`}
-                                                        className="text-center"
-                                                      >
-                                                        {!isNaN(Number(cell))
-                                                          ? Number(Number(cell).toFixed(3))
-                                                          : cell}
-                                                      </td>
-                                                    )
-                                                  })}
-                                              </React.Fragment>
-                                            )
-                                          })}
-                                        </tr>
-                                      )
-                                    })}
-                              </React.Fragment>
-                            )
-                          })}
-                      </React.Fragment>
-                    )
-                  })}
-                </tbody>
-              </table>
-
-              {/* Separate table for metrics that don't belong to any overall group */}
+              {/* Standalone metrics table */}
               {(() => {
                 const standaloneMetrics = findStandaloneMetrics()
                 if (standaloneMetrics.length === 0) return null
-
                 return (
-                  <div className="mt-8">
-                    <h4 className="font-bold mb-2">Other Metrics</h4>
-                    <table className="table w-full">
+                  <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>Metric</th>
+                          <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={`standalone-${model}`} className="text-center text-xs">
+                              <th
+                                key={`standalone-${model}`}
+                                className="sticky top-0 bg-base-100 z-10 text-center text-xs border-gray-700 border"
+                              >
                                 {model}
                               </th>
                             ))}
@@ -587,16 +285,20 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ dataset }) => {
                         {standaloneMetrics.sort().map((metric) => {
                           const row = tableRows.find((r) => r.metric === metric)
                           if (!row) return null
-
                           return (
                             <tr key={`standalone-${metric}`} className="hover:bg-base-100">
-                              <td>{metric}</td>
+                              <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={`standalone-${metric}-${col}`} className="text-center">
+                                    <td
+                                      key={`standalone-${metric}-${col}`}
+                                      className="text-center border-gray-700 border"
+                                    >
                                       {!isNaN(Number(cell))
                                         ? Number(Number(cell).toFixed(3))
                                         : cell}
@@ -611,6 +313,342 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ dataset }) => {
                   </div>
                 )
               })()}
+
+              {/* Main metrics table */}
+              <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">
+                        Attack Category Metrics
+                      </th>
+                      {overallMetrics
+                        .filter((metric) => selectedOverallMetrics.has(metric))
+                        .map((metric) => (
+                          <th
+                            key={metric}
+                            colSpan={
+                              tableHeader.filter((model) => selectedModels.has(model)).length
+                            }
+                            className="sticky top-0 bg-base-100 z-10 text-center border-x border-gray-300 border border-gray-700 border"
+                          >
+                            {metric}
+                          </th>
+                        ))}
+                    </tr>
+                    <tr>
+                      <th className="sticky left-0 bg-base-100 z-10 border-gray-700 border"></th>
+                      {overallMetrics
+                        .filter((metric) => selectedOverallMetrics.has(metric))
+                        .map((metric) => (
+                          <React.Fragment key={`header-models-${metric}`}>
+                            {tableHeader
+                              .filter((model) => selectedModels.has(model))
+                              .map((model) => (
+                                <th
+                                  key={`${metric}-${model}`}
+                                  className="sticky top-12 bg-base-100 z-10 text-center text-xs border-gray-700 border border-bottom-solid border-b-gray-700 border-b-2"
+                                >
+                                  {model}
+                                </th>
+                              ))}
+                          </React.Fragment>
+                        ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {/* First render each group */}
+                    {Object.entries(groups).map(([group, subGroups]) => {
+                      // Skip the "Overall" group completely
+                      if (group === 'Overall') return null
+
+                      // Get all metrics for this group
+                      const allGroupMetrics = Object.values(subGroups).flat()
+                      // Filter to only include selected metrics
+                      const visibleGroupMetrics = filterMetricsByGroupAndSubgroup(
+                        allGroupMetrics,
+                        group
+                      )
+
+                      // Skip this group if no metrics are selected
+                      if (visibleGroupMetrics.length === 0) return null
+
+                      return (
+                        <React.Fragment key={group}>
+                          {/* Group row with average stats for the entire group */}
+                          <tr
+                            className="bg-base-200 cursor-pointer hover:bg-base-300"
+                            onClick={() => toggleGroup(group)}
+                          >
+                            <td className="sticky left-0 bg-base-200 z-10 font-medium border-gray-700 border">
+                              {openGroups[group] ? '▼ ' : '▶ '}
+                              {group}
+                            </td>
+                            {/* For each metric column */}
+                            {overallMetrics
+                              .filter((metric) => selectedOverallMetrics.has(metric))
+                              .map((metric) => (
+                                // Render sub-columns for each model
+                                <React.Fragment key={`${group}-${metric}`}>
+                                  {tableHeader
+                                    .filter((model) => selectedModels.has(model))
+                                    .map((col) => {
+                                      // Find all metrics in this group that match the current metric name
+                                      const allMetricsWithName = findAllMetricsForName(metric)
+                                      const metricsInGroupForThisMetric =
+                                        visibleGroupMetrics.filter((m) =>
+                                          allMetricsWithName.includes(m)
+                                        )
+                                      const stats = calculateStats(metricsInGroupForThisMetric, col)
+
+                                      return (
+                                        <td
+                                          key={`${group}-${metric}-${col}`}
+                                          className="font-medium text-center border-gray-700 border"
+                                        >
+                                          {!isNaN(stats.avg)
+                                            ? `${stats.avg.toFixed(3)} ± ${stats.stdDev.toFixed(3)}`
+                                            : 'N/A'}
+                                        </td>
+                                      )
+                                    })}
+                                </React.Fragment>
+                              ))}
+                          </tr>
+
+                          {/* Only render subgroups if group is open */}
+                          {openGroups[group] &&
+                            Object.entries(subGroups).map(([subGroup, metrics]) => {
+                              // Filter to only include selected metrics in this subgroup
+                              const visibleSubgroupMetrics = filterMetricsByGroupAndSubgroup(
+                                metrics,
+                                group,
+                                subGroup
+                              )
+
+                              // Skip this subgroup if no metrics are selected
+                              if (visibleSubgroupMetrics.length === 0) return null
+
+                              return (
+                                <React.Fragment key={`${group}-${subGroup}`}>
+                                  {/* Subgroup row with average stats for the subgroup */}
+                                  <tr
+                                    className="bg-base-100 cursor-pointer hover:bg-base-200"
+                                    onClick={() => toggleSubGroup(group, subGroup)}
+                                  >
+                                    <td className="sticky left-0 bg-base-100 z-10 pl-6 font-medium border-gray-700 border">
+                                      {openSubGroups[group]?.[subGroup] ? '▼ ' : '▶ '}
+                                      {subGroup}
+                                    </td>
+                                    {/* For each metric column */}
+                                    {overallMetrics
+                                      .filter((metric) => selectedOverallMetrics.has(metric))
+                                      .map((metric) => (
+                                        // Render sub-columns for each model
+                                        <React.Fragment key={`${group}-${subGroup}-${metric}`}>
+                                          {tableHeader
+                                            .filter((model) => selectedModels.has(model))
+                                            .map((col) => {
+                                              // Find all metrics in this subgroup that match the current metric name
+                                              const allMetricsWithName =
+                                                findAllMetricsForName(metric)
+                                              const metricsInSubgroupForThisMetric =
+                                                visibleSubgroupMetrics.filter((m) =>
+                                                  allMetricsWithName.includes(m)
+                                                )
+                                              const stats = calculateStats(
+                                                metricsInSubgroupForThisMetric,
+                                                col
+                                              )
+
+                                              return (
+                                                <td
+                                                  key={`${group}-${subGroup}-${metric}-${col}`}
+                                                  className="font-medium text-center border-gray-700 border"
+                                                >
+                                                  {!isNaN(stats.avg)
+                                                    ? `${stats.avg.toFixed(3)} ± ${stats.stdDev.toFixed(3)}`
+                                                    : 'N/A'}
+                                                </td>
+                                              )
+                                            })}
+                                        </React.Fragment>
+                                      ))}
+                                  </tr>
+
+                                  {/* Individual metric rows */}
+                                  {openSubGroups[group]?.[subGroup] &&
+                                    // Sort visibleSubgroupMetrics alphabetically by the clean metric name
+                                    [...visibleSubgroupMetrics]
+                                      .sort((a, b) => {
+                                        // For metrics with format {category}_{strength}_{overall_metric_name},
+                                        // First sort by category, then by overall_metric_name, then by strength
+
+                                        // First extract the overall metric group
+                                        const getOverallMetricGroup = (metric: string) => {
+                                          for (const overall of overallMetrics) {
+                                            if (
+                                              metric.endsWith(`_${overall}`) ||
+                                              metric === overall
+                                            ) {
+                                              return overall
+                                            }
+                                          }
+                                          return ''
+                                        }
+
+                                        const overallA = getOverallMetricGroup(a)
+                                        const overallB = getOverallMetricGroup(b)
+
+                                        // Extract the strength (last part before the overall metric)
+                                        const stripOverall = (metric: string, overall: string) => {
+                                          if (metric.endsWith(`_${overall}`)) {
+                                            // Remove the overall metric group and any preceding underscore
+                                            const stripped = metric.slice(
+                                              0,
+                                              metric.length - overall.length - 1
+                                            )
+                                            const parts = stripped.split('_')
+                                            return parts.length > 0 ? parts[parts.length - 1] : ''
+                                          }
+                                          return metric
+                                        }
+
+                                        // Extract the category (what remains after removing strength and overall_metric_name)
+                                        const getCategory = (metric: string, overall: string) => {
+                                          if (metric.endsWith(`_${overall}`)) {
+                                            const stripped = metric.slice(
+                                              0,
+                                              metric.length - overall.length - 1
+                                            )
+                                            const parts = stripped.split('_')
+                                            // Remove the last part (strength) and join the rest (category)
+                                            return parts.length > 1
+                                              ? parts.slice(0, parts.length - 1).join('_')
+                                              : ''
+                                          }
+                                          return metric
+                                        }
+
+                                        const categoryA = getCategory(a, overallA)
+                                        const categoryB = getCategory(b, overallB)
+
+                                        // First sort by category
+                                        if (categoryA !== categoryB) {
+                                          return categoryA.localeCompare(categoryB)
+                                        }
+
+                                        // Then sort by overall metric name
+                                        if (overallA !== overallB) {
+                                          return overallA.localeCompare(overallB)
+                                        }
+
+                                        // Finally sort by strength
+                                        const subA = stripOverall(a, overallA)
+                                        const subB = stripOverall(b, overallB)
+
+                                        // Try to parse subA and subB as numbers, handling k/m/b suffixes
+                                        const parseNumber = (str: string) => {
+                                          const match = str.match(/^(\d+(?:\.\d+)?)([kKmMbB]?)$/)
+                                          if (!match) return NaN
+                                          let [_, num, suffix] = match
+                                          let value = parseFloat(num)
+                                          switch (suffix.toLowerCase()) {
+                                            case 'k':
+                                              value *= 1e3
+                                              break
+                                            case 'm':
+                                              value *= 1e6
+                                              break
+                                            case 'b':
+                                              value *= 1e9
+                                              break
+                                          }
+                                          return value
+                                        }
+
+                                        const numA = parseNumber(subA)
+                                        const numB = parseNumber(subB)
+
+                                        if (!isNaN(numA) && !isNaN(numB)) {
+                                          return numA - numB
+                                        }
+                                        // Fallback to string comparison if not both numbers
+                                        return subA.localeCompare(subB)
+                                      })
+                                      .map((metric) => {
+                                        const row = tableRows.find((r) => r.metric === metric)
+                                        if (!row) return null
+
+                                        // Extract the metric name (after the underscore)
+                                        const metricName = metric.includes('_')
+                                          ? metric.split('_').slice(1).join('_')
+                                          : metric
+
+                                        return (
+                                          <tr key={metric} className="hover:bg-base-100">
+                                            <td className="sticky left-0 bg-base-100 z-10 pl-10 border-gray-700 border">
+                                              {metric}
+                                            </td>
+                                            {/* For each metric column */}
+                                            {overallMetrics
+                                              .filter((oMetric) =>
+                                                selectedOverallMetrics.has(oMetric)
+                                              )
+                                              .map((oMetric) => {
+                                                // Only show values for the matching metric
+                                                const isMatchingMetric =
+                                                  findAllMetricsForName(oMetric).includes(metric)
+
+                                                if (!isMatchingMetric) {
+                                                  // Fill empty cells for non-matching metrics
+                                                  return (
+                                                    <React.Fragment key={`${metric}-${oMetric}`}>
+                                                      {tableHeader
+                                                        .filter((model) =>
+                                                          selectedModels.has(model)
+                                                        )
+                                                        .map((col) => (
+                                                          <td
+                                                            key={`${metric}-${oMetric}-${col}`}
+                                                            className="text-center border-gray-700 border"
+                                                          ></td>
+                                                        ))}
+                                                    </React.Fragment>
+                                                  )
+                                                }
+                                                return (
+                                                  <React.Fragment key={`${metric}-${oMetric}`}>
+                                                    {tableHeader
+                                                      .filter((model) => selectedModels.has(model))
+                                                      .map((col) => {
+                                                        const cell = row[col]
+                                                        return (
+                                                          <td
+                                                            key={`${metric}-${oMetric}-${col}`}
+                                                            className="text-center border-gray-700 border"
+                                                          >
+                                                            {!isNaN(Number(cell))
+                                                              ? Number(Number(cell).toFixed(3))
+                                                              : cell}
+                                                          </td>
+                                                        )
+                                                      })}
+                                                  </React.Fragment>
+                                                )
+                                              })}
+                                          </tr>
+                                        )
+                                      })}
+                                </React.Fragment>
+                              )
+                            })}
+                        </React.Fragment>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
             </>
           )}
         </div>

frontend/src/components/LoadingSpinner.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface LoadingSpinnerProps {
+  minHeight?: string
+}
+
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ minHeight = '300px' }) => {
+  return (
+    <div className={`flex items-center justify-center min-h-[${minHeight}]`}>
+      <span className="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+  )
+}
+
+export default LoadingSpinner

frontend/src/components/ModelFilter.tsx

@@ -19,7 +19,7 @@ const ModelFilter: React.FC<ModelFilterProps> = ({ models, selectedModels, setSe
 
   return (
     <div className="w-full mb-4">
-      <fieldset className="fieldset w-full p-4 rounded border">
+      <fieldset className="fieldset w-full p-4 rounded border border-gray-700">
         <legend className="fieldset-legend font-semibold">
           Models ({selectedModels.size}/{models.length})
         </legend>