File size: 2,202 Bytes
1c04688
 
8de92d1
 
 
6f36760
 
 
1c04688
 
 
 
8de92d1
 
 
 
 
 
 
8def8f4
 
 
 
 
1c04688
8de92d1
 
 
 
cb1d20a
6f36760
8de92d1
 
 
1c04688
6f36760
 
 
 
1c04688
 
 
 
cb1d20a
 
 
 
1c04688
2f4e514
fc5fea2
 
 
1c04688
 
fc5fea2
 
 
 
 
8def8f4
fc5fea2
 
1c04688
 
 
fc5fea2
 
cb1d20a
1c04688
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
"use client";

import * as hub from "@huggingface/hub";
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 { Card } from "@/components/ui/card";
import ForceDirectedGraph from "@/components/force-directed-graph";
import RunsList from "@/components/runs-list";

type Run = {
  id: number;
  start: string;
  end: string;
  hops: number;
};

export default function ViewerTab({
  handleTryRun,
}: {
  handleTryRun: (startArticle: string, destinationArticle: string) => void;
}) {
  const [selectedRun, setSelectedRun] = useState<number | null>(null);
  const [runs, setRuns] = useState<Run[]>([]);

  const fetchDataset = async () => {
    console.log("Fetching dataset...");
    console.log(Object.keys(mockResults));
    setRuns(mockResults.runs);

    return;
  };

  useEffect(() => {
    fetchDataset();
  }, []);

  const handleRunSelect = (runId: number) => {
    setSelectedRun(runId);
  };

  const filterRuns = useMemo(() => {
    return runs.filter(run => run.result === "win");
  }, [runs]);

  return (
    <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">
            Available Runs
          </h3>
          <div className="flex-grow overflow-hidden">
            <RunsList
              runs={filterRuns}
              onSelectRun={handleRunSelect}
              selectedRunId={selectedRun}
              onTryRun={handleTryRun}
            />
          </div>
        </div>
      </div>

      <div className="md:col-span-9 max-h-full overflow-hidden">
        <Card className="w-full h-full flex items-center justify-center p-0 m-0 overflow-hidden">
          <ForceDirectedGraph runs={filterRuns} runId={selectedRun} />
        </Card>
      </div>
    </div>
  );
}