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 Home from "./pages/Home";
6import About from "./pages/About";
7import { BenchmarkData } from "./types";
9function App() {
10 const [benchmarkData, setBenchmarkData] = useState<BenchmarkData | null>(
11 null,
12 );
13 const [isLoading, setIsLoading] = useState(true);
14 const [error, setError] = useState<string | null>(null);
16 useEffect(() => {
17 const fetchData = async () => {
18 try {
19 setIsLoading(true);
20 setError(null);
21 const response = await axios.get(
22 "https://raw.githubusercontent.com/magland/benchcompress/benchmark-results/benchmark_results/results.json",
23 );
24 setBenchmarkData(response.data);
25 } catch (error) {
26 const message =
27 error instanceof Error ? error.message : "Failed to fetch data";
28 setError(message);
29 console.error("Error fetching benchmark data:", error);
30 } finally {
31 setIsLoading(false);
32 }
33 };
35 fetchData();
36 }, []);
38 return (
39 <BrowserRouter basename="/benchcompress">
40 <ScrollToTop />
41 <div
42 style={{
43 paddingTop: "5rem",
44 paddingLeft: "2rem",
45 paddingRight: "2rem",
46 paddingBottom: "2rem",
47 }}
48 >
49 <nav
50 style={{
51 position: "fixed",
52 top: 0,
53 left: 0,
54 right: 0,
55 padding: "1rem 2rem",
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 style={{ display: "flex", justifyContent: "flex-end" }}>
63 <Link
64 to="/about"
65 style={{
66 color: "#0066cc",
67 textDecoration: "none",
68 fontWeight: "500",
69 }}
70 >
71 About
72 </Link>
73 </div>
74 </nav>
75 <main>
76 {isLoading ? (
77 <div>Loading benchmark data...</div>
78 ) : error ? (
79 <div>Error: {error}</div>
80 ) : (
81 <Routes>
82 <Route path="/" element={<Navigate to="/datasets" replace />} />
83 <Route
84 path="/datasets"
85 element={<Home benchmarkData={benchmarkData} />}
86 />
87 <Route
88 path="/algorithms"
89 element={<Home benchmarkData={benchmarkData} />}
90 />
91 <Route
92 path="/dataset/:datasetName"
93 element={<Home benchmarkData={benchmarkData} />}
94 />
95 <Route
96 path="/algorithm/:algorithmName"
97 element={<Home benchmarkData={benchmarkData} />}
98 />
99 <Route path="/about" element={<About />} />
100 </Routes>
101 )}
102 </main>
103 </div>
104 </BrowserRouter>
105 );
106}
108export default App;