Model Filters

frontend/src/components/LeaderboardFilter.tsx

@@ -8,14 +8,12 @@ interface FilterProps {
   groups: Groups
   selectedMetrics: Set<string>
   setSelectedMetrics: (metrics: Set<string>) => void
-  defaultSelectedMetrics?: string[]
 }
 
 const LeaderboardFilter: React.FC<FilterProps> = ({
   groups,
   selectedMetrics,
   setSelectedMetrics,
-  defaultSelectedMetrics,
 }) => {
   const [openGroups, setOpenGroups] = useState<{ [key: string]: boolean }>({})
   const [openSubGroups, setOpenSubGroups] = useState<{ [key: string]: { [key: string]: boolean } }>(
@@ -23,30 +21,6 @@ const LeaderboardFilter: React.FC<FilterProps> = ({
   )
   const [searchTerm, setSearchTerm] = useState('')
 
-  // Initialize openGroups and openSubGroups based on defaultSelectedMetrics on page load
-  useEffect(() => {
-    if (!defaultSelectedMetrics) return
-
-    const initialOpenGroups: { [key: string]: boolean } = {}
-    const initialOpenSubGroups: { [key: string]: { [key: string]: boolean } } = {}
-
-    Object.entries(groups).forEach(([group, subGroups]) => {
-      let groupHasDefault = false
-      initialOpenSubGroups[group] = {}
-
-      Object.entries(subGroups).forEach(([subGroup, metrics]) => {
-        const hasDefault = metrics.some((metric) => defaultSelectedMetrics.includes(metric))
-        initialOpenSubGroups[group][subGroup] = hasDefault
-        if (hasDefault) groupHasDefault = true
-      })
-
-      initialOpenGroups[group] = groupHasDefault
-    })
-
-    setOpenGroups(initialOpenGroups)
-    setOpenSubGroups(initialOpenSubGroups)
-  }, [groups, defaultSelectedMetrics])
-
   const toggleGroup = (group: string) => {
     setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
   }
@@ -141,25 +115,6 @@ const LeaderboardFilter: React.FC<FilterProps> = ({
     }))
   }
 
-  const selectDefaultsInFilter = () => {
-    if (!defaultSelectedMetrics) return
-    setSelectedMetrics(new Set(defaultSelectedMetrics))
-    const openGroups: { [key: string]: boolean } = {}
-    const openSubGroups: { [key: string]: { [key: string]: boolean } } = {}
-    Object.entries(groups).forEach(([group, subGroups]) => {
-      let groupHasDefault = false
-      openSubGroups[group] = {}
-      Object.entries(subGroups).forEach(([subGroup, metrics]) => {
-        const hasDefault = metrics.some((metric) => defaultSelectedMetrics.includes(metric))
-        openSubGroups[group][subGroup] = hasDefault
-        if (hasDefault) groupHasDefault = true
-      })
-      openGroups[group] = groupHasDefault
-    })
-    setOpenGroups(openGroups)
-    setOpenSubGroups(openSubGroups)
-  }
-
   const selectAllGlobal = () => {
     const allMetrics = Object.values(groups)
       .flatMap((subGroups) => Object.values(subGroups).flat())
@@ -272,15 +227,6 @@ const LeaderboardFilter: React.FC<FilterProps> = ({
           >
             None
           </button>
-          {defaultSelectedMetrics && (
-            <button
-              type="button"
-              className="text-xs px-3 py-1 border rounded font-semibold bg-base-200 cursor-pointer"
-              onClick={selectDefaultsInFilter}
-            >
-              Defaults
-            </button>
-          )}
         </div>
         <div className="flex flex-row flex-wrap gap-4 w-full items-start">
           {Object.entries(groups).map(([group, subGroups]) => (

frontend/src/components/LeaderboardTable.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import API from '../API'
 import LeaderboardFilter from './LeaderboardFilter'
+import ModelFilter from './ModelFilter'
 
 interface LeaderboardTableProps {
   file: string
@@ -32,7 +33,7 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
   )
 
   const [selectedMetrics, setSelectedMetrics] = useState<Set<string>>(new Set())
-  const [defaultSelectedMetrics, setDefaultSelectedMetrics] = useState<string[]>([])
+  const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set())
 
   // To store the unique metrics from the Overall group
   const [overallMetrics, setOverallMetrics] = useState<string[]>([])
@@ -42,10 +43,11 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
       .then((response) => {
         const data = JSON.parse(response)
         const rows: Row[] = data['rows']
-        const groups = data['groups'] as { [key: string]: string[] }
-
-        // Extract unique metrics from the Overall group (after the underscore)
-        const overallGroup = groups['Overall'] || []
+        // 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) => {
@@ -110,8 +112,11 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
           })
         })
 
-        setSelectedMetrics(new Set(data['default_selected_metrics']))
-        setDefaultSelectedMetrics(data['default_selected_metrics'])
+        // 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)
@@ -125,10 +130,6 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
       })
   }, [file])
 
-  const handleSelectDefaults = () => {
-    setSelectedMetrics(new Set(defaultSelectedMetrics))
-  }
-
   const toggleGroup = (group: string) => {
     setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
   }
@@ -157,6 +158,23 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
       .map((row) => row.metric as string)
   }
 
+  // Identify metrics that don't belong to any overall metric group
+  const findStandaloneMetrics = (): string[] => {
+    // Get all metrics from the table rows
+    const allMetrics = tableRows.map((row) => row.metric as string)
+
+    // Filter to only include metrics that aren't part of any of the overall metrics
+    return allMetrics.filter((metric) => {
+      // Check if this metric is part of any of the overall metrics
+      for (const overall of overallMetrics) {
+        if (metric.endsWith(`_${overall}`) || metric === overall) {
+          return false // This metric belongs to an overall group
+        }
+      }
+      return true
+    })
+  }
+
   // Calculate average and standard deviation for a set of metrics for a specific column
   const calculateStats = (
     metricNames: string[],
@@ -216,301 +234,386 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
 
       {!loading && !error && (
         <div className="overflow-x-auto">
-          <LeaderboardFilter
-            groups={groups}
-            selectedMetrics={selectedMetrics}
-            setSelectedMetrics={setSelectedMetrics}
-            defaultSelectedMetrics={defaultSelectedMetrics}
-          />
-          <table className="table w-full">
-            <thead>
-              <tr>
-                <th>Group / Subgroup</th>
-                {overallMetrics.map((metric) => (
-                  <th key={metric} colSpan={tableHeader.length} className="text-center border-x">
-                    {metric}
-                  </th>
-                ))}
-              </tr>
-              <tr>
-                <th></th>
-                {overallMetrics.map((metric) => (
-                  <React.Fragment key={`header-models-${metric}`}>
-                    {tableHeader.map((model) => (
-                      <th key={`${metric}-${model}`} className="text-center text-xs">
-                        {model}
+          <div className="flex flex-col gap-4">
+            <ModelFilter
+              models={tableHeader}
+              selectedModels={selectedModels}
+              setSelectedModels={setSelectedModels}
+            />
+            <LeaderboardFilter
+              groups={groups}
+              selectedMetrics={selectedMetrics}
+              setSelectedMetrics={setSelectedMetrics}
+            />
+          </div>
+
+          {selectedModels.size === 0 || selectedMetrics.size === 0 ? (
+            <div className="text-center p-4 text-lg">
+              Please select at least one model and one metric to display the data
+            </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>
                     ))}
-                  </React.Fragment>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {/* First render each group */}
-              {Object.entries(groups).map(([group, subGroups]) => {
-                // 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
+                  </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 (
-                  <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.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)
+                                  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
                             )
-                            const stats = calculateStats(metricsInGroupForThisMetric, col)
+
+                            // Skip this subgroup if no metrics are selected
+                            if (visibleSubgroupMetrics.length === 0) return null
 
                             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.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>
+                              <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
+                                          )
 
-                            {/* Individual metric rows */}
-                            {openSubGroups[group]?.[subGroup] &&
-                              // Sort visibleSubgroupMetrics alphabetically by the clean metric name
-                              [...visibleSubgroupMetrics]
-                                .sort((a, b) => {
-                                  // Extract clean metric names (after the underscore)
-                                  console.log({ a })
-
-                                  // 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 (
+                                            <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 ''
                                       }
-                                    }
-                                    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.map((col) => (
-                                                <td
-                                                  key={`${metric}-${oMetric}-${col}`}
-                                                  className="text-center"
-                                                ></td>
-                                              ))}
-                                            </React.Fragment>
+                                      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
+                                      }
 
-                                        // Show values for the matching metric
-                                        return (
-                                          <React.Fragment key={`${metric}-${oMetric}`}>
-                                            {tableHeader.map((col) => {
-                                              const cell = row[col]
+                                      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 (
-                                                <td
-                                                  key={`${metric}-${oMetric}-${col}`}
-                                                  className="text-center"
-                                                >
-                                                  {!isNaN(Number(cell))
-                                                    ? Number(Number(cell).toFixed(3))
-                                                    : cell}
-                                                </td>
+                                                <React.Fragment key={`${metric}-${oMetric}`}>
+                                                  {tableHeader
+                                                    .filter((model) => selectedModels.has(model))
+                                                    .map((col) => (
+                                                      <td
+                                                        key={`${metric}-${oMetric}-${col}`}
+                                                        className="text-center"
+                                                      ></td>
+                                                    ))}
+                                                </React.Fragment>
                                               )
-                                            })}
-                                          </React.Fragment>
-                                        )
-                                      })}
-                                    </tr>
+                                            }
+
+                                            // 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 */}
+              {(() => {
+                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">
+                      <thead>
+                        <tr>
+                          <th>Metric</th>
+                          {tableHeader
+                            .filter((model) => selectedModels.has(model))
+                            .map((model) => (
+                              <th key={`standalone-${model}`} className="text-center text-xs">
+                                {model}
+                              </th>
+                            ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {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>
+                              {tableHeader
+                                .filter((model) => selectedModels.has(model))
+                                .map((col) => {
+                                  const cell = row[col]
+                                  return (
+                                    <td key={`standalone-${metric}-${col}`} className="text-center">
+                                      {!isNaN(Number(cell))
+                                        ? Number(Number(cell).toFixed(3))
+                                        : cell}
+                                    </td>
                                   )
                                 })}
-                          </React.Fragment>
-                        )
-                      })}
-                  </React.Fragment>
+                            </tr>
+                          )
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
                 )
-              })}
-            </tbody>
-          </table>
+              })()}
+            </>
+          )}
         </div>
       )}
     </div>

frontend/src/components/ModelFilter.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+interface ModelFilterProps {
+  models: string[]
+  selectedModels: Set<string>
+  setSelectedModels: (models: Set<string>) => void
+}
+
+const ModelFilter: React.FC<ModelFilterProps> = ({ models, selectedModels, setSelectedModels }) => {
+  const toggleModel = (model: string) => {
+    const newSelected = new Set(selectedModels)
+    if (newSelected.has(model)) {
+      newSelected.delete(model)
+    } else {
+      newSelected.add(model)
+    }
+    setSelectedModels(newSelected)
+  }
+
+  return (
+    <div className="w-full mb-4">
+      <fieldset className="fieldset w-full p-4 rounded border">
+        <legend className="fieldset-legend font-semibold">
+          Models ({selectedModels.size}/{models.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">
+          {models.map((model) => (
+            <label key={model} className="flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                className="form-checkbox h-4 w-4"
+                checked={selectedModels.has(model)}
+                onChange={() => toggleModel(model)}
+              />
+              <span className="truncate" title={model}>
+                {model}
+              </span>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  )
+}
+
+export default ModelFilter