Implement row expansion management in GlobalState and Dashboard

- Added functionality to manage expanded rows in GlobalState, including methods to toggle individual row expansion and set all rows expanded or collapsed.
- Updated Dashboard component to include buttons for expanding and collapsing all rows, and display the count of currently expanded rows.
- Refactored Row component to utilize GlobalState for determining and toggling row expansion state.

Author: Dylan Huang

vite-app/src/GlobalState.tsx

@@ -4,11 +4,44 @@ import type { EvaluationRow } from "./types/eval-protocol";
 export class GlobalState {
   isConnected: boolean = false;
   dataset: EvaluationRow[] = [];
+  expandedRows: Set<string> = new Set();
+
   constructor() {
     makeAutoObservable(this);
   }
 
   setDataset(dataset: EvaluationRow[]) {
+    // Preserve expansion state for existing rows
+    const newExpandedRows = new Set<string>();
+    dataset.forEach((row) => {
+      if (this.expandedRows.has(row.input_metadata.row_id)) {
+        newExpandedRows.add(row.input_metadata.row_id);
+      }
+    });
+    this.expandedRows = newExpandedRows;
     this.dataset = dataset;
   }
+
+  toggleRowExpansion(rowId: string) {
+    if (this.expandedRows.has(rowId)) {
+      this.expandedRows.delete(rowId);
+    } else {
+      this.expandedRows.add(rowId);
+    }
+  }
+
+  isRowExpanded(rowId: string): boolean {
+    return this.expandedRows.has(rowId);
+  }
+
+  // Method to expand/collapse all rows
+  setAllRowsExpanded(expanded: boolean) {
+    if (expanded) {
+      this.dataset.forEach((row) => {
+        this.expandedRows.add(row.input_metadata.row_id);
+      });
+    } else {
+      this.expandedRows.clear();
+    }
+  }
 }

vite-app/src/components/Dashboard.tsx

@@ -46,16 +46,41 @@ const EmptyState = ({ onRefresh }: { onRefresh: () => void }) => {
 };
 
 const Dashboard = observer(({ onRefresh }: DashboardProps) => {
+  const expandAll = () => state.setAllRowsExpanded(true);
+  const collapseAll = () => state.setAllRowsExpanded(false);
+
+  const expandedCount = state.expandedRows.size;
+
   return (
     <div className="text-sm">
       {/* Summary Stats */}
       <div className="mb-4 bg-white border border-gray-200 p-3">
-        <h2 className="text-sm font-semibold text-gray-900 mb-2">
-          Dataset Summary
-        </h2>
-        <div className="text-xs">
-          <span className="font-semibold text-gray-700">Total Rows:</span>{" "}
-          {state.dataset.length}
+        <div className="flex justify-between items-center mb-2">
+          <h2 className="text-sm font-semibold text-gray-900">
+            Dataset Summary
+          </h2>
+          {state.dataset.length > 0 && (
+            <div className="flex gap-2">
+              <Button onClick={expandAll} size="sm" variant="secondary">
+                Expand All
+              </Button>
+              <Button onClick={collapseAll} size="sm" variant="secondary">
+                Collapse All
+              </Button>
+            </div>
+          )}
+        </div>
+        <div className="text-xs space-y-1">
+          <div>
+            <span className="font-semibold text-gray-700">Total Rows:</span>{" "}
+            {state.dataset.length}
+          </div>
+          {state.dataset.length > 0 && (
+            <div>
+              <span className="font-semibold text-gray-700">Expanded:</span>{" "}
+              {expandedCount} of {state.dataset.length}
+            </div>
+          )}
         </div>
       </div>
 
@@ -102,7 +127,11 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
                     new Date(a.created_at).getTime()
                 )
                 .map((row, index) => (
-                  <Row key={index} row={row} index={index} />
+                  <Row
+                    key={row.input_metadata.row_id}
+                    row={row}
+                    index={index}
+                  />
                 ))}
             </tbody>
           </table>

vite-app/src/components/Row.tsx

@@ -1,15 +1,16 @@
 import { observer } from "mobx-react";
-import { useState } from "react";
 import type { EvaluationRow } from "../types/eval-protocol";
 import { ChatInterface } from "./ChatInterface";
 import { MetadataSection } from "./MetadataSection";
 import StatusIndicator from "./StatusIndicator";
+import { state } from "../App";
 
 export const Row = observer(
   ({ row }: { row: EvaluationRow; index: number }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
+    const rowId = row.input_metadata.row_id;
+    const isExpanded = state.isRowExpanded(rowId);
 
-    const toggleExpanded = () => setIsExpanded(!isExpanded);
+    const toggleExpanded = () => state.toggleRowExpansion(rowId);
 
     return (
       <>