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