fix(evals): default leaderboard to measured task families

Author: ericjuta

apps/evals/src/components/eval-ui.tsx

@@ -1,6 +1,6 @@
 import { useState, type CSSProperties, type ReactNode } from "react";
 import { ArrowUpRight, FlaskConical, X } from "lucide-react";
-import { dataset, families, type EvalModel, type FamilyFilter, type PageId } from "../data";
+import { dataset, type EvalModel, type FamilyFilter, type PageId } from "../data";
 import { Button } from "./ui/button";
 import { DialogRoot, DialogContent, DialogTitle, DialogDescription } from "./ui/dialog";
 
@@ -154,16 +154,15 @@ export function Panel({
   );
 }
 
-export function FamilyTabs({
+export function FamilyTabs<T extends FamilyFilter>({
   value,
   onChange,
-  includeAll = true,
+  options,
 }: {
-  value: FamilyFilter;
-  onChange: (value: FamilyFilter) => void;
-  includeAll?: boolean;
+  value: T;
+  onChange: (value: T) => void;
+  options: readonly T[];
 }) {
-  const options: readonly FamilyFilter[] = includeAll ? ["All tasks", ...families] : families;
   return (
     <div className="eval-family-tabs" role="group" aria-label="Task family">
       {options.map((family) => (

apps/evals/src/pages/leaderboard.stories.tsx

@@ -19,9 +19,15 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const Portfolio: Story = {
+export const Perps: Story = {
   args: {
-    initialFamily: "Portfolio",
+    initialFamily: "Perps",
+  },
+};
+
+export const Predictions: Story = {
+  args: {
+    initialFamily: "Predictions",
   },
 };
 

apps/evals/src/pages/leaderboard.tsx

@@ -12,6 +12,9 @@ import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import "./leaderboard.css";
 
+const leaderboardFamilies = ["Spot", "Perps", "Predictions"] as const;
+type LeaderboardFamily = (typeof leaderboardFamilies)[number];
+
 type SortMetric = "passRate" | "accuracy" | "latency" | "cost";
 type SortDirection = "asc" | "desc";
 type ScatterMetric = "latency" | "cost";
@@ -257,13 +260,13 @@ function SortButton({
 }
 
 export function LeaderboardPage({
-  initialFamily = "All tasks",
+  initialFamily = "Spot",
   initialSearch = "",
 }: {
-  initialFamily?: FamilyFilter;
+  initialFamily?: LeaderboardFamily;
   initialSearch?: string;
 }) {
-  const [family, setFamily] = useState<FamilyFilter>(initialFamily);
+  const [family, setFamily] = useState<LeaderboardFamily>(initialFamily);
   const [search, setSearch] = useState(initialSearch);
   const [sortMetric, setSortMetric] = useState<SortMetric>("passRate");
   const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
@@ -285,21 +288,18 @@ export function LeaderboardPage({
           accuracy: metrics.accuracy,
         };
       });
-    const measuredRows: LeaderboardRow[] =
-      family === "All tasks"
-        ? []
-        : measuredModels
-            .filter(
-              (model) =>
-                model.families[family] !== undefined &&
-                (query.length === 0 ||
-                  `${model.name} ${model.provider}`.toLocaleLowerCase().includes(query)),
-            )
-            .map((model) => ({
-              kind: "measured",
-              model,
-              result: model.families[family]!,
-            }));
+    const measuredRows: LeaderboardRow[] = measuredModels
+      .filter(
+        (model) =>
+          model.families[family] !== undefined &&
+          (query.length === 0 ||
+            `${model.name} ${model.provider}`.toLocaleLowerCase().includes(query)),
+      )
+      .map((model) => ({
+        kind: "measured",
+        model,
+        result: model.families[family]!,
+      }));
     const visible = [...illustrativeRows, ...measuredRows];
 
     return visible.sort((left, right) => {
@@ -345,19 +345,13 @@ export function LeaderboardPage({
   };
 
   const resetFilters = () => {
-    setFamily("All tasks");
+    setFamily("Spot");
     setSearch("");
   };
 
-  const tableCaption =
-    family === "All tasks"
-      ? `Model results across all ${numberFormatter.format(dataset.tasks)} illustrative tasks.`
-      : `Model results for the ${family} family, one of four ${numberFormatter.format(dataset.tasksPerFamily)}-task families.`;
+  const tableCaption = `Model results for the ${family} family, one of four ${numberFormatter.format(dataset.tasksPerFamily)}-task families.`;
   const displayedUniverse =
-    models.length +
-    (family === "All tasks"
-      ? 0
-      : measuredModels.filter((model) => model.families[family] !== undefined).length);
+    models.length + measuredModels.filter((model) => model.families[family] !== undefined).length;
 
   return (
     <PageShell active="leaderboard">
@@ -422,7 +416,7 @@ export function LeaderboardPage({
           </div>
 
           <div className="lb-toolbar">
-            <FamilyTabs value={family} onChange={setFamily} />
+            <FamilyTabs value={family} onChange={setFamily} options={leaderboardFamilies} />
             <label className="lb-search-field">
               <span className="lb-visually-hidden">Search models</span>
               <Search size={15} aria-hidden="true" />
@@ -614,11 +608,7 @@ export function LeaderboardPage({
                           </td>
                           <td>
                             {numberFormatter.format(
-                              row.kind === "measured"
-                                ? row.result.total
-                                : family === "All tasks"
-                                  ? dataset.tasks
-                                  : dataset.tasksPerFamily,
+                              row.kind === "measured" ? row.result.total : dataset.tasksPerFamily,
                             )}
                           </td>
                         </tr>

apps/evals/src/pages/task-explorer.tsx

@@ -1,6 +1,6 @@
 import { useId, useState } from "react";
 import { BookOpen, Clock, ListTree, Search, Shield } from "lucide-react";
-import { getModel, type FamilyFilter, type TaskFamily } from "../data";
+import { families, getModel, type TaskFamily } from "../data";
 import { measuredModels, type MeasuredCase } from "../measured";
 import { FamilyTabs, Modal, ModelAvatar, PageShell } from "../components/eval-ui";
 import { Badge } from "../components/ui/badge";
@@ -171,8 +171,7 @@ export function TaskExplorerPage({
   const task = samples[sampleIndex] ?? sampleAt(family, 1);
   const trace = openTrace ? task.traces[openTrace] : null;
 
-  function changeFamily(next: FamilyFilter) {
-    if (next === "All tasks") return;
+  function changeFamily(next: TaskFamily) {
     setFamily(next);
     setSampleIndex(0);
   }
@@ -188,7 +187,7 @@ export function TaskExplorerPage({
         <EditorialColumn />
         <section className="task-main" aria-labelledby="task-main-heading">
           <div className="task-toolbar">
-            <FamilyTabs value={family} onChange={changeFamily} includeAll={false} />
+            <FamilyTabs value={family} onChange={changeFamily} options={families} />
             <div className="task-sample">
               <Label id={sampleLabelId} htmlFor="task-sample-trigger">
                 Sample