1import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
2import { useEffect, useState } from "react";
3import axios from "axios";
4import { ScrollToTop } from "./components/ScrollToTop";
5import "./components/AppHeader.css";
6import Home from "./pages/Home";
7import BenchmarkView from "./pages/BenchmarkView";
8import Monitor from "./pages/Monitor";
9import Submit from "./pages/Submit";
10import { BenchmarkData } from "./types";
12function App() {
13 const [benchmarkData, setBenchmarkData] = useState<BenchmarkData | null>(
14 null,
15 );
16 const [isLoading, setIsLoading] = useState(true);
17 const [error, setError] = useState<string | null>(null);
19 useEffect(() => {
20 const fetchData = async () => {
21 try {
22 setIsLoading(true);
23 setError(null);
24 const cacheBust = Math.random().toString(36).substring(2, 15);
25 const response = await axios.get(
26 `https://tempory.net/f/memobin/ephys_compression_tests/global/results.json?cachebust=${cacheBust}`,
27 );
28 setBenchmarkData(response.data);
29 } catch (error) {
30 const message =
31 error instanceof Error ? error.message : "Failed to fetch data";
32 setError(message);
33 console.error("Error fetching benchmark data:", error);
34 } finally {
35 setIsLoading(false);
36 }
37 };
39 fetchData();
40 }, []);
42 return (
43 <BrowserRouter basename="/ephys_compression_tests/">
44 <ScrollToTop />
45 <div
46 style={{
47 paddingTop: "3rem",
48 padding: "3rem 2rem 2rem 2rem",
49 }}
50 >
51 <nav
52 style={{
53 position: "fixed",
54 top: 0,
55 left: 0,
56 right: 0,
57 padding: "0.35rem min(2rem, 4%)",
58 backgroundColor: "white",
59 zIndex: 1000,
60 }}
61 >
62 <div
63 style={{
64 display: "flex",
65 justifyContent: "space-between",
66 alignItems: "center",
67 minHeight: "32px",
68 }}
69 >
70 <Link
71 to="/"
72 style={{
73 display: "flex",
74 alignItems: "center",
75 textDecoration: "none",
76 minWidth: 0,
77 maxWidth: "calc(100% - 80px)",
78 }}
79 >
80 <img
81 src="/ephys_compression_tests/logo.svg"
82 alt="Ephys Compression Tests Logo"
83 style={{
84 width: "28px",
85 height: "28px",
86 marginRight: "10px",
87 flexShrink: 0,
88 }}
89 />
90 <span
91 style={{
92 minWidth: 0,
93 whiteSpace: "nowrap",
94 overflow: "hidden",
95 textOverflow: "ellipsis",
96 }}
97 >
98 <span
99 style={{
100 fontSize: "1rem",
101 fontWeight: "500",
102 color: "#2c2c2c",
103 }}
104 >
105 Ephys Compression Tests
106 </span>
107 <span className="app-header-subtitle">
108 {" ยท "}
109 <span style={{ fontSize: "1rem", color: "#777" }}>
110 Comparing compression algorithms for ephys data
111 </span>
112 </span>
113 </span>
114 </Link>
115 <div style={{ display: "flex", gap: "1.5rem" }}>
116 <Link
117 to="/datasets"
118 style={{
119 color: "#0066cc",
120 textDecoration: "none",
121 fontWeight: "500",
122 }}
123 >
124 Datasets
125 </Link>
126 <Link
127 to="/algorithms"
128 style={{
129 color: "#0066cc",
130 textDecoration: "none",
131 fontWeight: "500",
132 }}
133 >
134 Algorithms
135 </Link>
136 </div>
137 </div>
138 </nav>
139 <main>
140 {isLoading ? (
141 <div>Loading benchmark data...</div>
142 ) : error ? (
143 <div>Error: {error}</div>
144 ) : (
145 <Routes>
146 <Route path="/" element={<Home />} />
147 <Route
148 path="/datasets"
149 element={<BenchmarkView benchmarkData={benchmarkData} />}
150 />
151 <Route
152 path="/algorithms"
153 element={<BenchmarkView benchmarkData={benchmarkData} />}
154 />
155 <Route
156 path="/dataset/:datasetName"
157 element={<BenchmarkView benchmarkData={benchmarkData} />}
158 />
159 <Route
160 path="/algorithm/:algorithmName"
161 element={<BenchmarkView benchmarkData={benchmarkData} />}
162 />
163 <Route path="/monitor" element={<Monitor />} />
164 <Route path="/submit" element={<Submit />} />
165 </Routes>
166 )}
167 </main>
168 </div>
169 </BrowserRouter>
170 );
171}
173export default App;