1import { useLocation, useNavigate, useParams } from "react-router-dom";
2import { useReducer, useEffect } from "react";
3import { tabsReducer } from "../reducers/tabsReducer";
4import { AlgorithmContent } from "../components/algorithm/AlgorithmContent";
5import { DatasetContent } from "../components/dataset/DatasetContent";
6import {
7 AlgorithmTable,
8 DatasetTable,
9} from "../components/tables/DatasetAlgorithmTables";
10import { useBenchmarkChartData } from "../hooks/useBenchmarkChartData";
11import { useTagFilter } from "../hooks/useTagFilter";
12import { BenchmarkData } from "../types";
14interface HomeProps {
15 benchmarkData: BenchmarkData | null;
16}
18export default function Home({ benchmarkData }: HomeProps) {
19 const location = useLocation();
20 const navigate = useNavigate();
21 const { datasetName, algorithmName } = useParams<{
22 datasetName?: string;
23 algorithmName?: string;
24 }>();
26 const [tabsState, dispatch] = useReducer(tabsReducer, {
27 tabs: [
28 { id: "datasets", label: "Datasets", route: "/datasets" },
29 { id: "algorithms", label: "Algorithms", route: "/algorithms" },
30 ],
31 activeTabId: "datasets",
32 });
34 // Effect to handle URL changes and update tabs
35 useEffect(() => {
36 if (datasetName) {
37 dispatch({
38 type: "ADD_TAB",
39 payload: {
40 id: `dataset-${datasetName}`,
41 label: datasetName,
42 route: `/dataset/${datasetName}`,
43 },
44 });
45 } else if (algorithmName) {
46 dispatch({
47 type: "ADD_TAB",
48 payload: {
49 id: `algorithm-${algorithmName}`,
50 label: algorithmName,
51 route: `/algorithm/${algorithmName}`,
52 },
53 });
54 } else if (location.pathname.includes("/algorithms")) {
55 dispatch({ type: "SET_ACTIVE_TAB", payload: "algorithms" });
56 } else if (location.pathname.includes("/datasets")) {
57 dispatch({ type: "SET_ACTIVE_TAB", payload: "datasets" });
58 }
59 }, [datasetName, algorithmName, location.pathname]);
61 // Handle tab click
62 const handleTabClick = (tabId: string, route: string) => {
63 dispatch({ type: "SET_ACTIVE_TAB", payload: tabId });
64 navigate(route);
65 };
67 // Get specific dataset or algorithm if viewing one
68 const dataset = datasetName
69 ? benchmarkData?.datasets.find((d) => d.name === datasetName)
70 : undefined;
71 const algorithm = algorithmName
72 ? benchmarkData?.algorithms.find((a) => a.name === algorithmName)
73 : undefined;
75 // Get chart data for specific dataset or algorithm view
76 const chartData = useBenchmarkChartData(
77 benchmarkData?.results || [],
78 dataset?.name || null,
79 algorithm?.name || null,
80 );
82 console.log("chartData", chartData);
84 // Set up tag filtering for datasets
85 const {
86 selectedTags: datasetTags,
87 availableTags: availableDatasetTags,
88 filteredItems: filteredDatasets,
89 toggleTag: toggleDatasetTag,
90 } = useTagFilter(benchmarkData?.datasets || []);
92 // Set up tag filtering for algorithms
93 const {
94 selectedTags: algorithmTags,
95 availableTags: availableAlgorithmTags,
96 filteredItems: filteredAlgorithms,
97 toggleTag: toggleAlgorithmTag,
98 } = useTagFilter(benchmarkData?.algorithms || []);
100 return (
101 <div>
102 <main>
103 <div
104 style={{
105 position: "fixed",
106 top: "3rem",
107 left: 0,
108 right: 0,
109 backgroundColor: "white",
110 zIndex: 999,
111 padding: "0 2rem 0 2rem",
112 marginTop: "-4px",
113 boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
114 borderBottom: "1px solid #eaeaea",
115 }}
116 >
117 <div
118 style={{
119 paddingBottom: "2px",
120 display: "flex",
121 gap: "4px",
122 overflowX: "auto",
123 width: "100%",
124 backgroundColor: "white",
125 }}
126 >
127 {tabsState.tabs.map((tab) => (
128 <div
129 key={tab.id}
130 style={{
131 display: "flex",
132 alignItems: "center",
133 gap: "4px",
134 }}
135 >
136 <button
137 onClick={() => handleTabClick(tab.id, tab.route)}
138 style={{
139 padding: "8px 16px",
140 border: "none",
141 background: "none",
142 borderBottom:
143 tabsState.activeTabId === tab.id
144 ? "2px solid #0066cc"
145 : "none",
146 color:
147 tabsState.activeTabId === tab.id ? "#0066cc" : "#666",
148 fontWeight:
149 tabsState.activeTabId === tab.id ? "600" : "normal",
150 cursor: "pointer",
151 textDecoration: "none",
152 whiteSpace: "nowrap",
153 }}
154 >
155 {tab.label}
156 </button>
157 {tab.id !== "datasets" && tab.id !== "algorithms" && (
158 <button
159 onClick={(e) => {
160 e.stopPropagation();
161 const newActiveTab =
162 tab.id === tabsState.activeTabId
163 ? tabsState.tabs[0].id // Default to first tab if closing active
164 : tabsState.activeTabId;
165 dispatch({ type: "CLOSE_TAB", payload: tab.id });
166 // Navigate if closing active tab
167 if (tab.id === tabsState.activeTabId) {
168 const defaultTab = tabsState.tabs.find(
169 (t) => t.id === newActiveTab,
170 );
171 if (defaultTab) {
172 navigate(defaultTab.route);
173 }
174 }
175 }}
176 style={{
177 padding: "4px",
178 border: "none",
179 background: "none",
180 color: "#666",
181 cursor: "pointer",
182 fontSize: "12px",
183 display: "flex",
184 alignItems: "center",
185 justifyContent: "center",
186 width: "20px",
187 height: "20px",
188 borderRadius: "50%",
189 marginRight: "4px",
190 marginLeft: "-4px",
191 }}
192 aria-label="Close tab"
193 >
194 ×
195 </button>
196 )}
197 </div>
198 ))}
199 </div>
200 </div>
202 <div style={{ padding: "3rem 0 1rem 0" }}>
203 {dataset ? (
204 <DatasetContent
205 dataset={dataset}
206 benchmarkData={benchmarkData}
207 chartData={chartData}
208 />
209 ) : algorithm ? (
210 <AlgorithmContent
211 algorithm={algorithm}
212 benchmarkData={benchmarkData}
213 chartData={chartData}
214 />
215 ) : tabsState.activeTabId === "datasets" ? (
216 <DatasetTable
217 filteredDatasets={filteredDatasets}
218 availableDatasetTags={availableDatasetTags}
219 datasetTags={datasetTags}
220 toggleDatasetTag={toggleDatasetTag}
221 />
222 ) : (
223 <AlgorithmTable
224 filteredAlgorithms={filteredAlgorithms}
225 availableAlgorithmTags={availableAlgorithmTags}
226 algorithmTags={algorithmTags}
227 toggleAlgorithmTag={toggleAlgorithmTag}
228 />
229 )}
230 </div>
231 </main>
232 </div>
233 );
234}