improvements

src/components/runs-list.tsx

@@ -2,6 +2,9 @@
 
 import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
+import { useState, useEffect, useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 interface Run {
   start_article: string;
@@ -20,57 +23,142 @@ export default function RunsList({
   onSelectRun,
   selectedRunId,
 }: RunsListProps) {
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [startFilter, setStartFilter] = useState("");
+  const [endFilter, setEndFilter] = useState("");
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Filter runs based on start and end filters
+  const filteredRuns = runs.filter((run) => {
+    const matchesStart = startFilter === "" || 
+      run.start_article.toLowerCase().includes(startFilter.toLowerCase());
+    const matchesEnd = endFilter === "" || 
+      run.destination_article.toLowerCase().includes(endFilter.toLowerCase());
+    return matchesStart && matchesEnd;
+  });
+
+  // Auto-play functionality
+  useEffect(() => {
+    if (isPlaying) {
+      timerRef.current = setInterval(() => {
+        if (filteredRuns.length === 0) return;
+        
+        const nextIndex = selectedRunId === null 
+          ? 0 
+          : (selectedRunId + 1) % filteredRuns.length;
+        
+        const originalIndex = runs.findIndex(
+          run => run === filteredRuns[nextIndex]
+        );
+        
+        onSelectRun(originalIndex);
+      }, 1000);
+    } else if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [isPlaying, selectedRunId, filteredRuns, runs, onSelectRun]);
+
+  const togglePlayPause = () => {
+    setIsPlaying(prev => !prev);
+  };
+
   return (
-    <div className="h-full w-full overflow-y-auto overflow-x-hidden space-y-2 pr-1">
-      {runs.map((run, index) => (
-        <Card
-          key={index}
-          className={cn(
-            "p-3 cursor-pointer transition-all border",
-            selectedRunId === index
-              ? "bg-primary/10 border-primary/50 shadow-sm"
-              : "hover:bg-muted/80 border-transparent"
-          )}
-          onClick={() => onSelectRun(index)}
-        >
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="font-medium flex items-center">
-                <span>{run.start_article}</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="mx-1"
-                >
-                  <path d="M5 12h14" />
-                  <path d="m12 5 7 7-7 7" />
-                </svg>
-                <span>{run.destination_article}</span>
-              </p>
-              <p className="text-sm text-muted-foreground">{run.steps.length} hops</p>
-            </div>
-            {selectedRunId === index && (
-              <div
-                className="h-2 w-2 rounded-full bg-primary"
-                aria-hidden="true"
-              />
+    <div className="h-full w-full flex flex-col">
+      <div className="space-y-2 mb-3">
+        <div className="flex gap-2 items-center">
+          <Input
+            placeholder="Filter by start"
+            value={startFilter}
+            onChange={(e) => setStartFilter(e.target.value)}
+            className="h-8"
+          />
+          <Input
+            placeholder="Filter by end"
+            value={endFilter}
+            onChange={(e) => setEndFilter(e.target.value)}
+            className="h-8"
+          />
+          <Button 
+            size="sm" 
+            variant="outline" 
+            onClick={togglePlayPause}
+            className="flex-shrink-0 h-8 w-8 p-0"
+          >
+            {isPlaying ? (
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="6" y="4" width="4" height="16" />
+                <rect x="14" y="4" width="4" height="16" />
+              </svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polygon points="5 3 19 12 5 21 5 3" />
+              </svg>
             )}
-          </div>
-        </Card>
-      ))}
-
-      {runs.length === 0 && (
-        <div className="flex items-center justify-center h-full text-muted-foreground">
-          No runs available
+          </Button>
         </div>
-      )}
+      </div>
+
+      <div className="flex-1 overflow-y-auto overflow-x-hidden space-y-2 pr-1">
+        {filteredRuns.map((run) => {
+          const originalIndex = runs.indexOf(run);
+          return (
+            <Card
+              key={originalIndex}
+              className={cn(
+                "p-3 cursor-pointer transition-all border",
+                selectedRunId === originalIndex
+                  ? "bg-primary/10 border-primary/50 shadow-sm"
+                  : "hover:bg-muted/80 border-transparent"
+              )}
+              onClick={() => onSelectRun(originalIndex)}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium flex items-center">
+                    <span>{run.start_article}</span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="mx-1"
+                    >
+                      <path d="M5 12h14" />
+                      <path d="m12 5 7 7-7 7" />
+                    </svg>
+                    <span>{run.destination_article}</span>
+                  </p>
+                  <p className="text-sm text-muted-foreground">{run.steps.length} hops</p>
+                </div>
+                {selectedRunId === originalIndex && (
+                  <div
+                    className="h-2 w-2 rounded-full bg-primary"
+                    aria-hidden="true"
+                  />
+                )}
+              </div>
+            </Card>
+          );
+        })}
+
+        {filteredRuns.length === 0 && (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            No runs available
+          </div>
+        )}
+      </div>
     </div>
   );
 }

src/components/viewer-tab.tsx

@@ -6,14 +6,6 @@ import type { RepoDesignation } from "@huggingface/hub";
 import mockResults from "../../results/qwen3.json"
 // import mockResults from "../../qwen3-final-results.json"
 import { useMemo, useState, useEffect } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import ForceDirectedGraph from "@/components/force-directed-graph";
 import RunsList from "@/components/runs-list";
@@ -26,10 +18,8 @@ type Run = {
 };
 
 export default function ViewerTab() {
-  const [selectedDataset, setSelectedDataset] = useState<string>("");
   const [selectedRun, setSelectedRun] = useState<number | null>(null);
   const [runs, setRuns] = useState<Run[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
 
   const fetchDataset = async () => {
     console.log("Fetching dataset...");
@@ -37,38 +27,12 @@ export default function ViewerTab() {
     setRuns(mockResults.runs);
 
     return;
-    setLoading(true);
-
-    // https://huggingface.co/datasets/HuggingFaceTB/wikispeedia-traces/resolve/main/qwen3-final-results.json
-    // const response = await fetch("https://huggingface.co/datasets/HuggingFaceTB/wikispeedia-traces/resolve/main/qwen3-final-results.json");
-    // const json = await response.json();
-    // setRuns(json.runs);
-    // setLoading(false);
-
-    // const repo: RepoDesignation = {
-    //   type: "dataset",
-    //   name: "HuggingFaceTB/wikispeedia-traces",
-    // };
-    // const file = await hub.downloadFile({ repo, path: "qwen3-final-results.json" });
-    // if (!file) {
-    //   console.error("Failed to download file");
-    //   return;
-    // }
-    // const text = await file.text();
-    // console.log("GOT FILE!", text);
-    // const json = JSON.parse(text);
-    // setRuns(json.runs);
-    // setLoading(false);
   };
 
   useEffect(() => {
     fetchDataset();
   }, []);
 
-  const handleDatasetChange = (value: string) => {
-    setSelectedDataset(value);
-    setSelectedRun(null);
-  };
 
   const handleRunSelect = (runId: number) => {
     setSelectedRun(runId);
@@ -79,7 +43,7 @@ export default function ViewerTab() {
   }, [runs]);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-12 gap-4 h-[calc(100vh-80px)] max-h-[calc(100vh-80px)] overflow-hidden p-2">
+    <div className="grid grid-cols-1 md:grid-cols-12 gap-4 h-[calc(100vh-200px)] max-h-[calc(100vh-200px)] overflow-hidden p-2">
       <div className="md:col-span-3 flex flex-col max-h-full overflow-hidden">
         <div className="bg-card rounded-lg p-3 border flex-grow overflow-hidden flex flex-col">
           <h3 className="text-sm font-medium mb-2 text-muted-foreground flex-shrink-0">