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 // Set up tag filtering for datasets
83 const {
84 selectedTags: datasetTags,
85 availableTags: availableDatasetTags,
86 filteredItems: filteredDatasets,
87 toggleTag: toggleDatasetTag,
88 } = useTagFilter(benchmarkData?.datasets || []);
90 // Set up tag filtering for algorithms
91 const {
92 selectedTags: algorithmTags,
93 availableTags: availableAlgorithmTags,
94 filteredItems: filteredAlgorithms,
95 toggleTag: toggleAlgorithmTag,
96 } = useTagFilter(benchmarkData?.algorithms || []);
98 return (
99 <div>
100 <main>
101 <div
102 style={{
103 position: "fixed",
104 top: "3rem",
105 left: 0,
106 right: 0,
107 backgroundColor: "white",
108 zIndex: 999,
109 padding: "0 2rem 0 2rem",
110 marginTop: "-4px",
111 boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
112 borderBottom: "1px solid #eaeaea",
113 }}
114 >
115 <div
116 style={{
117 paddingBottom: "2px",
118 display: "flex",
119 gap: "4px",
120 overflowX: "auto",
121 width: "100%",
122 backgroundColor: "white",
123 }}
124 >
125 {tabsState.tabs.map((tab) => (
126 <div
127 key={tab.id}
128 style={{
129 display: "flex",
130 alignItems: "center",
131 gap: "4px",
132 }}
133 >
134 <button
135 onClick={() => handleTabClick(tab.id, tab.route)}
136 style={{
137 padding: "8px 16px",
138 border: "none",
139 background: "none",
140 borderBottom:
141 tabsState.activeTabId === tab.id
142 ? "2px solid #0066cc"
143 : "none",
144 color:
145 tabsState.activeTabId === tab.id ? "#0066cc" : "#666",
146 fontWeight:
147 tabsState.activeTabId === tab.id ? "600" : "normal",
148 cursor: "pointer",
149 textDecoration: "none",
150 whiteSpace: "nowrap",
151 }}
152 >
153 {tab.label}
154 </button>
155 {tab.id !== "datasets" && tab.id !== "algorithms" && (
156 <button
157 onClick={(e) => {
158 e.stopPropagation();
159 const newActiveTab =
160 tab.id === tabsState.activeTabId
161 ? tabsState.tabs[0].id // Default to first tab if closing active
162 : tabsState.activeTabId;
163 dispatch({ type: "CLOSE_TAB", payload: tab.id });
164 // Navigate if closing active tab
165 if (tab.id === tabsState.activeTabId) {
166 const defaultTab = tabsState.tabs.find(
167 (t) => t.id === newActiveTab,
168 );
169 if (defaultTab) {
170 navigate(defaultTab.route);
171 }
172 }
173 }}
174 style={{
175 padding: "4px",
176 border: "none",
177 background: "none",
178 color: "#666",
179 cursor: "pointer",
180 fontSize: "12px",
181 display: "flex",
182 alignItems: "center",
183 justifyContent: "center",
184 width: "20px",
185 height: "20px",
186 borderRadius: "50%",
187 marginRight: "4px",
188 marginLeft: "-4px",
189 }}
190 aria-label="Close tab"
191 >
192 ×
193 </button>
194 )}
195 </div>
196 ))}
197 </div>
198 </div>
200 <div style={{ padding: "3rem 0 1rem 0" }}>
201 {dataset ? (
202 <DatasetContent
203 dataset={dataset}
204 benchmarkData={benchmarkData}
205 chartData={chartData}
206 />
207 ) : algorithm ? (
208 <AlgorithmContent
209 algorithm={algorithm}
210 benchmarkData={benchmarkData}
211 chartData={chartData}
212 />
213 ) : tabsState.activeTabId === "datasets" ? (
214 <DatasetTable
215 filteredDatasets={filteredDatasets}
216 availableDatasetTags={availableDatasetTags}
217 datasetTags={datasetTags}
218 toggleDatasetTag={toggleDatasetTag}
219 />
220 ) : (
221 <AlgorithmTable
222 filteredAlgorithms={filteredAlgorithms}
223 availableAlgorithmTags={availableAlgorithmTags}
224 algorithmTags={algorithmTags}
225 toggleAlgorithmTag={toggleAlgorithmTag}
226 />
227 )}
228 </div>
229 </main>
230 </div>
231 );
232}