1import { BrowserRouter, Routes, Route, Link, Navigate } 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 About from "./pages/About";
8import Paper from "./pages/Paper";
9import Monitor from "./pages/Monitor";
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 response = await axios.get(
25 "https://raw.githubusercontent.com/magland/benchcompress/benchmark-results/benchmark_results/results.json",
26 );
27 setBenchmarkData(response.data);
28 } catch (error) {
29 const message =
30 error instanceof Error ? error.message : "Failed to fetch data";
31 setError(message);
32 console.error("Error fetching benchmark data:", error);
33 } finally {
34 setIsLoading(false);
35 }
36 };
38 fetchData();
39 }, []);
41 return (
42 <BrowserRouter basename="/benchcompress">
43 <ScrollToTop />
44 <div
45 style={{
46 paddingTop: "3rem",
47 padding: "3rem 2rem 2rem 2rem",
48 }}
49 >
50 <nav
51 style={{
52 position: "fixed",
53 top: 0,
54 left: 0,
55 right: 0,
56 padding: "0.35rem min(2rem, 4%)",
57 backgroundColor: "white",
58 // borderBottom: "1px solid #eaeaea",
59 zIndex: 1000,
60 // boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
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="/datasets"
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="/paper"
119 style={{
120 color: "#0066cc",
121 textDecoration: "none",
122 fontWeight: "500",
123 }}
124 >
125 Paper
126 </Link>
127 <Link
128 to="/monitor"
129 style={{
130 color: "#0066cc",
131 textDecoration: "none",
132 fontWeight: "500",
133 }}
134 >
135 Monitor
136 </Link>
137 <Link
138 to="/about"
139 style={{
140 color: "#0066cc",
141 textDecoration: "none",
142 fontWeight: "500",
143 }}
144 >
145 About
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={<Navigate to="/datasets" replace />} />
158 <Route
159 path="/datasets"
160 element={<Home benchmarkData={benchmarkData} />}
161 />
162 <Route
163 path="/algorithms"
164 element={<Home benchmarkData={benchmarkData} />}
165 />
166 <Route
167 path="/dataset/:datasetName"
168 element={<Home benchmarkData={benchmarkData} />}
169 />
170 <Route
171 path="/algorithm/:algorithmName"
172 element={<Home benchmarkData={benchmarkData} />}
173 />
174 <Route path="/about" element={<About />} />
175 <Route path="/paper" element={<Paper />} />
176 <Route path="/monitor" element={<Monitor />} />
177 </Routes>
178 )}
179 </main>
180 </div>
181 </BrowserRouter>
182 );
183}
185export default App;