1import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
2import { useEffect, useState } from "react";
3import axios from "axios";
4import { ScrollToTop } from "./components/ScrollToTop";
5import Home from "./pages/Home";
6import Datasets from "./pages/Datasets";
7import Dataset from "./pages/Dataset";
8import Algorithms from "./pages/Algorithms";
9import Algorithm from "./pages/Algorithm";
10import About from "./pages/About";
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 response = await axios.get(
26 "https://raw.githubusercontent.com/magland/zia/benchmark-results/benchmark_results/results.json",
27 );
28 setBenchmarkData(response.data);
29 } catch (error) {
30 const message =
31 error instanceof Error ? error.message : "Failed to fetch data";
32 setError(message);
33 console.error("Error fetching benchmark data:", error);
34 } finally {
35 setIsLoading(false);
36 }
37 };
39 fetchData();
40 }, []);
42 return (
43 <BrowserRouter basename="/zia">
44 <ScrollToTop />
45 <div
46 style={{
47 paddingTop: "5rem",
48 paddingLeft: "2rem",
49 paddingRight: "2rem",
50 paddingBottom: "2rem",
51 }}
52 >
53 <nav
54 style={{
55 position: "fixed",
56 top: 0,
57 left: 0,
58 right: 0,
59 padding: "1rem 2rem",
60 backgroundColor: "white",
61 borderBottom: "1px solid #eaeaea",
62 zIndex: 1000,
63 boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
64 }}
65 >
66 <ul
67 style={{
68 listStyle: "none",
69 padding: 0,
70 margin: 0,
71 display: "flex",
72 gap: "1.5rem",
73 }}
74 >
75 <li>
76 <Link
77 to="/home"
78 style={{
79 color: "#0066cc",
80 textDecoration: "none",
81 fontWeight: "500",
82 }}
83 >
84 Home
85 </Link>
86 </li>
87 <li>
88 <Link
89 to="/datasets"
90 style={{
91 color: "#0066cc",
92 textDecoration: "none",
93 fontWeight: "500",
94 }}
95 >
96 Datasets
97 </Link>
98 </li>
99 <li>
100 <Link
101 to="/algorithms"
102 style={{
103 color: "#0066cc",
104 textDecoration: "none",
105 fontWeight: "500",
106 }}
107 >
108 Algorithms
109 </Link>
110 </li>
111 <li>
112 <Link
113 to="/about"
114 style={{
115 color: "#0066cc",
116 textDecoration: "none",
117 fontWeight: "500",
118 }}
119 >
120 About
121 </Link>
122 </li>
123 </ul>
124 </nav>
125 <main>
126 {isLoading ? (
127 <div>Loading benchmark data...</div>
128 ) : error ? (
129 <div>Error: {error}</div>
130 ) : (
131 <Routes>
132 <Route
133 path="/home"
134 element={<Home benchmarkData={benchmarkData} />}
135 />
136 <Route
137 path="/"
138 element={<Home benchmarkData={benchmarkData} />}
139 />
140 <Route
141 path="/datasets"
142 element={<Datasets datasets={benchmarkData?.datasets || []} />}
143 />
144 <Route
145 path="/algorithms"
146 element={
147 <Algorithms algorithms={benchmarkData?.algorithms || []} />
148 }
149 />
150 <Route
151 path="/dataset/:datasetName"
152 element={
153 <Dataset
154 datasets={benchmarkData?.datasets || []}
155 benchmarkData={benchmarkData}
156 />
157 }
158 />
159 <Route
160 path="/algorithm/:algorithmName"
161 element={
162 <Algorithm
163 algorithms={benchmarkData?.algorithms || []}
164 benchmarkData={benchmarkData}
165 />
166 }
167 />
168 <Route path="/about" element={<About />} />
169 </Routes>
170 )}
171 </main>
172 </div>
173 </BrowserRouter>
174 );
175}
177export default App;