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 { BenchmarkData } from "./types";
10function App() {
11 const [benchmarkData, setBenchmarkData] = useState<BenchmarkData | null>(
12 null,
13 );
14 const [isLoading, setIsLoading] = useState(true);
15 const [error, setError] = useState<string | null>(null);
17 useEffect(() => {
18 const fetchData = async () => {
19 try {
20 setIsLoading(true);
21 setError(null);
22 const response = await axios.get(
23 "https://raw.githubusercontent.com/magland/benchcompress/benchmark-results/benchmark_results/results.json",
24 );
25 setBenchmarkData(response.data);
26 } catch (error) {
27 const message =
28 error instanceof Error ? error.message : "Failed to fetch data";
29 setError(message);
30 console.error("Error fetching benchmark data:", error);
31 } finally {
32 setIsLoading(false);
33 }
34 };
36 fetchData();
37 }, []);
39 return (
40 <BrowserRouter basename="/benchcompress">
41 <ScrollToTop />
42 <div
43 style={{
44 paddingTop: "3rem",
45 padding: "3rem 2rem 2rem 2rem",
46 }}
47 >
48 <nav
49 style={{
50 position: "fixed",
51 top: 0,
52 left: 0,
53 right: 0,
54 padding: "0.35rem min(2rem, 4%)",
55 backgroundColor: "white",
56 // borderBottom: "1px solid #eaeaea",
57 zIndex: 1000,
58 // boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
59 }}
60 >
61 <div
62 style={{
63 display: "flex",
64 justifyContent: "space-between",
65 alignItems: "center",
66 minHeight: "32px",
67 }}
68 >
69 <Link
70 to="/datasets"
71 style={{
72 display: "flex",
73 alignItems: "center",
74 textDecoration: "none",
75 minWidth: 0,
76 maxWidth: "calc(100% - 80px)",
77 }}
78 >
79 <img
80 src="/benchcompress/logo.svg"
81 alt="Benchcompress Logo"
82 style={{
83 width: "28px",
84 height: "28px",
85 marginRight: "10px",
86 flexShrink: 0,
87 }}
88 />
89 <span
90 style={{
91 minWidth: 0,
92 whiteSpace: "nowrap",
93 overflow: "hidden",
94 textOverflow: "ellipsis",
95 }}
96 >
97 <span
98 style={{
99 fontSize: "1rem",
100 fontWeight: "500",
101 color: "#2c2c2c",
102 }}
103 >
104 Benchcompress
105 </span>
106 <span className="app-header-subtitle">
107 {" · "}
108 <span style={{ fontSize: "1rem", color: "#777" }}>
109 Comparing compression algorithms for numeric arrays
110 </span>
111 </span>
112 </span>
113 </Link>
114 <Link
115 to="/about"
116 style={{
117 color: "#0066cc",
118 textDecoration: "none",
119 fontWeight: "500",
120 }}
121 >
122 About
123 </Link>
124 </div>
125 </nav>
126 <main>
127 {isLoading ? (
128 <div>Loading benchmark data...</div>
129 ) : error ? (
130 <div>Error: {error}</div>
131 ) : (
132 <Routes>
133 <Route path="/" element={<Navigate to="/datasets" replace />} />
134 <Route
135 path="/datasets"
136 element={<Home benchmarkData={benchmarkData} />}
137 />
138 <Route
139 path="/algorithms"
140 element={<Home benchmarkData={benchmarkData} />}
141 />
142 <Route
143 path="/dataset/:datasetName"
144 element={<Home benchmarkData={benchmarkData} />}
145 />
146 <Route
147 path="/algorithm/:algorithmName"
148 element={<Home benchmarkData={benchmarkData} />}
149 />
150 <Route path="/about" element={<About />} />
151 </Routes>
152 )}
153 </main>
154 </div>
155 </BrowserRouter>
156 );
157}
159export default App;