Hugging Face's logo

Spaces:
reasoning-degeneration-dev
/
agg-trace-visualizer
Running

App Files Community
agg-trace-visualizer
File size: 3,007 Bytes
8b41737
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
import type { PanelNav, DatasetInfo, OverviewData, GepaIterData, RlmIterDetail } from "../types";
import Breadcrumb from "./Breadcrumb";
import OverviewLevel from "./OverviewLevel";
import GepaIterLevel from "./GepaIterLevel";
import RlmDetailLevel from "./RlmDetailLevel";
import DatasetSelector from "./DatasetSelector";

interface PanelProps {
  nav: PanelNav;
  dataset: DatasetInfo | undefined;
  panelLabel?: string;
  datasets?: DatasetInfo[];
  onNavigate: (nav: PanelNav) => void;
  onGoUp: () => void;
  onSwitchDataset?: (id: string) => void;
  fetchOverview: (dsId: string) => Promise<OverviewData>;
  fetchGepaIter: (dsId: string, gepaIter: number) => Promise<GepaIterData>;
  fetchRlmDetail: (
    dsId: string,
    gepaIter: number,
    rlmCallIdx: number,
    rlmIter: number
  ) => Promise<RlmIterDetail>;
}

export default function Panel({
  nav,
  dataset,
  panelLabel,
  datasets,
  onNavigate,
  onGoUp,
  onSwitchDataset,
  fetchOverview,
  fetchGepaIter,
  fetchRlmDetail,
}: PanelProps) {
  return (
    <div className="flex flex-col h-full border border-gray-700 rounded-lg bg-gray-900 overflow-hidden">
      {/* Panel header */}
      <div className="flex items-center gap-2 px-3 py-2 border-b border-gray-700 bg-gray-800">
        {nav.level > 1 && (
          <button
            className="text-gray-400 hover:text-gray-200 text-sm"
            onClick={onGoUp}
            title="Go up"
          >
            &#8592;
          </button>
        )}
        {panelLabel && (
          <span className="text-xs bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded">
            {panelLabel}
          </span>
        )}
        <Breadcrumb nav={nav} dataset={dataset} onNavigate={onNavigate} />
        {panelLabel === "B" && datasets && onSwitchDataset && (
          <div className="ml-auto">
            <DatasetSelector
              datasets={datasets}
              currentId={nav.datasetId}
              onSelect={(id) => onSwitchDataset(id)}
            />
          </div>
        )}
      </div>

      {/* Panel content */}
      <div className="flex-1 overflow-y-auto">
        {nav.level === 1 && (
          <OverviewLevel
            datasetId={nav.datasetId}
            fetchOverview={fetchOverview}
            onDrillDown={onNavigate}
          />
        )}
        {nav.level === 2 && nav.gepaIter !== undefined && (
          <GepaIterLevel
            datasetId={nav.datasetId}
            gepaIter={nav.gepaIter}
            fetchGepaIter={fetchGepaIter}
            onDrillDown={onNavigate}
          />
        )}
        {nav.level === 3 &&
          nav.gepaIter !== undefined &&
          nav.rlmCallIdx !== undefined &&
          nav.rlmIter !== undefined && (
            <RlmDetailLevel
              datasetId={nav.datasetId}
              gepaIter={nav.gepaIter}
              rlmCallIdx={nav.rlmCallIdx}
              rlmIter={nav.rlmIter}
              fetchRlmDetail={fetchRlmDetail}
            />
          )}
      </div>
    </div>
  );
}