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 { BenchmarkData } from "./types";
11function App() {
12 const [benchmarkData, setBenchmarkData] = useState<BenchmarkData | null>(
13 null,
14 );
15 const [isLoading, setIsLoading] = useState(true);
16 const [error, setError] = useState<string | null>(null);
18 useEffect(() => {
19 const fetchData = async () => {
20 try {
21 setIsLoading(true);
22 setError(null);
23 const response = await axios.get(
24 "https://raw.githubusercontent.com/magland/benchcompress/benchmark-results/benchmark_results/results.json",
25 );
26 setBenchmarkData(response.data);
27 } catch (error) {
28 const message =
29 error instanceof Error ? error.message : "Failed to fetch data";
30 setError(message);
31 console.error("Error fetching benchmark data:", error);
32 } finally {
33 setIsLoading(false);
34 }
35 };
37 fetchData();
38 }, []);
40 return (
41 <BrowserRouter basename="/benchcompress">
42 <ScrollToTop />
43 <div
44 style={{
45 paddingTop: "3rem",
46 padding: "3rem 2rem 2rem 2rem",
47 }}
48 >
49 <nav
50 style={{
51 position: "fixed",
52 top: 0,
53 left: 0,
54 right: 0,
55 padding: "0.35rem min(2rem, 4%)",
56 backgroundColor: "white",
57 // borderBottom: "1px solid #eaeaea",
58 zIndex: 1000,
59 // boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
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="/datasets"
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 numeric time series
111 data
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="/about"
129 style={{
130 color: "#0066cc",
131 textDecoration: "none",
132 fontWeight: "500",
133 }}
134 >
135 About
136 </Link>
137 </div>
138 </div>
139 </nav>
140 <main>
141 {isLoading ? (
142 <div>Loading benchmark data...</div>
143 ) : error ? (
144 <div>Error: {error}</div>
145 ) : (
146 <Routes>
147 <Route path="/" element={<Navigate to="/datasets" replace />} />
148 <Route
149 path="/datasets"
150 element={<Home benchmarkData={benchmarkData} />}
151 />
152 <Route
153 path="/algorithms"
154 element={<Home benchmarkData={benchmarkData} />}
155 />
156 <Route
157 path="/dataset/:datasetName"
158 element={<Home benchmarkData={benchmarkData} />}
159 />
160 <Route
161 path="/algorithm/:algorithmName"
162 element={<Home benchmarkData={benchmarkData} />}
163 />
164 <Route path="/about" element={<About />} />
165 <Route path="/paper" element={<Paper />} />
166 </Routes>
167 )}
168 </main>
169 </div>
170 </BrowserRouter>
171 );
172}
174export default App;