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 Paper from "./pages/Paper";
9import Monitor from "./pages/Monitor";
10import Submit from "./pages/Submit";
11import { BenchmarkData } from "./types";
13function App() {
14 const [benchmarkData, setBenchmarkData] = useState<BenchmarkData | null>(
15 null,
16 );
17 const [isLoading, setIsLoading] = useState(true);
18 const [error, setError] = useState<string | null>(null);
20 useEffect(() => {
21 const fetchData = async () => {
22 try {
23 setIsLoading(true);
24 setError(null);
25 const response = await axios.get(
26 "https://tempory.net/f/memobin/benchcompress/global/results.json",
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="/benchcompress/">
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="/benchcompress/logo.svg"
82 alt="Benchcompress 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 Benchcompress
106 </span>
107 <span className="app-header-subtitle">
108 {" · "}
109 <span style={{ fontSize: "1rem", color: "#777" }}>
110 Comparing compression algorithms for scientific data arrays
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 <Link
137 to="/paper"
138 style={{
139 color: "#0066cc",
140 textDecoration: "none",
141 fontWeight: "500",
142 }}
143 >
144 Paper
145 </Link>
146 <Link
147 to="/monitor"
148 style={{
149 color: "#0066cc",
150 textDecoration: "none",
151 fontWeight: "500",
152 }}
153 >
154 Monitor
155 </Link>
156 <Link
157 to="/submit"
158 style={{
159 color: "#0066cc",
160 textDecoration: "none",
161 fontWeight: "500",
162 }}
163 >
164 Submit
165 </Link>
166 </div>
167 </div>
168 </nav>
169 <main>
170 {isLoading ? (
171 <div>Loading benchmark data...</div>
172 ) : error ? (
173 <div>Error: {error}</div>
174 ) : (
175 <Routes>
176 <Route path="/" element={<Home />} />
177 <Route
178 path="/datasets"
179 element={<BenchmarkView benchmarkData={benchmarkData} />}
180 />
181 <Route
182 path="/algorithms"
183 element={<BenchmarkView benchmarkData={benchmarkData} />}
184 />
185 <Route
186 path="/dataset/:datasetName"
187 element={<BenchmarkView benchmarkData={benchmarkData} />}
188 />
189 <Route
190 path="/algorithm/:algorithmName"
191 element={<BenchmarkView benchmarkData={benchmarkData} />}
192 />
193 <Route path="/paper" element={<Paper />} />
194 <Route path="/monitor" element={<Monitor />} />
195 <Route path="/submit" element={<Submit />} />
196 </Routes>
197 )}
198 </main>
199 </div>
200 </BrowserRouter>
201 );
202}
204export default App;