104f442improve layoutJeremy Magland 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";
bde0876rearrange tabsJeremy Magland 10import { useBenchmarkChartData } from "../hooks/useBenchmarkChartData";
15 benchmarkData: BenchmarkData | null;
16}
19 const location = useLocation();
22 datasetName?: string;
23 algorithmName?: string;
24 }>();
27 tabs: [
28 { id: "datasets", label: "Datasets", route: "/datasets" },
29 { id: "algorithms", label: "Algorithms", route: "/algorithms" },
30 ],
31 activeTabId: "datasets",
32 });
bde0876rearrange tabsJeremy Magland 33
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);
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 );
85 const {
88 filteredItems: filteredDatasets,
89 toggleTag: toggleDatasetTag,
90 } = useTagFilter(benchmarkData?.datasets || []);
92 // Set up tag filtering for algorithms
93 const {
96 filteredItems: filteredAlgorithms,
97 toggleTag: toggleAlgorithmTag,
98 } = useTagFilter(benchmarkData?.algorithms || []);
101 <div>
102 <main>
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 >
118 style={{
122 overflowX: "auto",
124 backgroundColor: "white",
126 >
131 display: "flex",
133 gap: "4px",
137 onClick={() => handleTabClick(tab.id, tab.route)}
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",
154 >
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>
197 </div>
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 />
224 filteredAlgorithms={filteredAlgorithms}
225 availableAlgorithmTags={availableAlgorithmTags}
226 algorithmTags={algorithmTags}
227 toggleAlgorithmTag={toggleAlgorithmTag}
228 />
232 </div>
233 );
234}