Refactor EvaluationRow and EvaluationTable components for improved layout and data display

- Moved Model and Score columns in EvaluationRow for better visibility of evaluation metrics.
- Sticky table headers

Author: Dylan Huang

vite-app/src/components/EvaluationRow.tsx

@@ -432,6 +432,16 @@ export const EvaluationRow = observer(
             />
           </TableCell>
 
+          {/* Model */}
+          <TableCell className="py-3 text-xs">
+            <RowModel model={row.input_metadata.completion_params.model} />
+          </TableCell>
+
+          {/* Score */}
+          <TableCell className="py-3 text-xs">
+            <RowScore score={row.evaluation_result?.score} />
+          </TableCell>
+
           {/* Invocation ID */}
           <TableCell className="py-3 text-xs">
             <InvocationId
@@ -460,16 +470,6 @@ export const EvaluationRow = observer(
           <TableCell className="py-3 text-xs">
             <RolloutId rolloutId={row.execution_metadata?.rollout_id} />
           </TableCell>
-
-          {/* Model */}
-          <TableCell className="py-3 text-xs">
-            <RowModel model={row.input_metadata.completion_params.model} />
-          </TableCell>
-
-          {/* Score */}
-          <TableCell className="py-3 text-xs">
-            <RowScore score={row.evaluation_result?.score} />
-          </TableCell>
         </TableRowInteractive>
 
         {/* Expanded Content Row */}

vite-app/src/components/EvaluationTable.tsx

@@ -6,7 +6,6 @@ import Select from "./Select";
 import FilterSelector from "./FilterSelector";
 import {
   TableHeader,
-  TableHead,
   TableBody as TableBodyBase,
   SortableTableHeader,
 } from "./TableContainer";
@@ -159,11 +158,11 @@ export const EvaluationTable = observer(() => {
           </Button>
         </div>
       ) : (
-        <div className="overflow-x-auto">
-          <table className="w-full min-w-max">
+        <div className="max-h-[calc(100vh-80px)] overflow-auto">
+          <table className="text-nowrap">
             {/* Table Header */}
-            <TableHead>
-              <tr>
+            <thead>
+              <tr className="bg-gray-50 sticky top-0 z-10">
                 <TableHeader className="w-8">&nbsp;</TableHeader>
                 <SortableTableHeader
                   sortField="created_at"
@@ -198,63 +197,63 @@ export const EvaluationTable = observer(() => {
                   Rollout Status
                 </SortableTableHeader>
                 <SortableTableHeader
-                  sortField="$.execution_metadata.invocation_id"
+                  sortField="$.input_metadata.completion_params.model"
                   currentSortField={state.sortField}
                   currentSortDirection={state.sortDirection}
                   onSort={handleSort}
                 >
-                  Invocation ID
+                  Model
                 </SortableTableHeader>
                 <SortableTableHeader
-                  sortField="$.execution_metadata.experiment_id"
+                  sortField="$.evaluation_result.score"
                   currentSortField={state.sortField}
                   currentSortDirection={state.sortDirection}
                   onSort={handleSort}
                 >
-                  Experiment ID
+                  Score
                 </SortableTableHeader>
                 <SortableTableHeader
-                  sortField="$.execution_metadata.run_id"
+                  sortField="$.execution_metadata.invocation_id"
                   currentSortField={state.sortField}
                   currentSortDirection={state.sortDirection}
                   onSort={handleSort}
                 >
-                  Run ID
+                  Invocation ID
                 </SortableTableHeader>
                 <SortableTableHeader
-                  sortField="$.input_metadata.row_id"
+                  sortField="$.execution_metadata.experiment_id"
                   currentSortField={state.sortField}
                   currentSortDirection={state.sortDirection}
                   onSort={handleSort}
                 >
-                  Row ID
+                  Experiment ID
                 </SortableTableHeader>
                 <SortableTableHeader
-                  sortField="$.execution_metadata.rollout_id"
+                  sortField="$.execution_metadata.run_id"
                   currentSortField={state.sortField}
                   currentSortDirection={state.sortDirection}
                   onSort={handleSort}
                 >
-                  Rollout ID
+                  Run ID
                 </SortableTableHeader>
                 <SortableTableHeader
-                  sortField="$.input_metadata.completion_params.model"
+                  sortField="$.input_metadata.row_id"
                   currentSortField={state.sortField}
                   currentSortDirection={state.sortDirection}
                   onSort={handleSort}
                 >
-                  Model
+                  Row ID
                 </SortableTableHeader>
                 <SortableTableHeader
-                  sortField="$.evaluation_result.score"
+                  sortField="$.execution_metadata.rollout_id"
                   currentSortField={state.sortField}
                   currentSortDirection={state.sortDirection}
                   onSort={handleSort}
                 >
-                  Score
+                  Rollout ID
                 </SortableTableHeader>
               </tr>
-            </TableHead>
+            </thead>
 
             {/* Table Body */}
             <TableBody

vite-app/src/components/TableContainer.tsx

@@ -197,11 +197,13 @@ export function TableHeader({
 
   return (
     <th
-      className={`px-3 py-2 text-xs font-semibold text-gray-700 ${
-        alignClasses[align]
-      } ${nowrap ? "whitespace-nowrap" : ""} ${className}`}
+      className={`text-xs font-semibold text-gray-700 ${alignClasses[align]} ${
+        nowrap ? "whitespace-nowrap" : ""
+      } ${className}`}
     >
-      {children}
+      <div className="bg-gray-50 px-3 py-2 border-b border-gray-200">
+        {children}
+      </div>
     </th>
   );
 }
@@ -274,13 +276,13 @@ export function SortableTableHeader({
 
   return (
     <th
-      className={`px-3 py-2 text-xs font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors ${
+      className={`text-xs font-semibold text-gray-700 cursor-pointer transition-colors ${
         alignClasses[align]
       } ${nowrap ? "whitespace-nowrap" : ""} ${className}`}
       onClick={() => onSort(sortField)}
       style={{ cursor: "pointer" }}
     >
-      <div className="flex items-center">
+      <div className="flex items-center px-3 py-2 bg-gray-50 border-b border-gray-200 hover:bg-gray-100 transition-colors">
         {children}
         {sortIcon}
       </div>