1import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
2import { useEffect, useState } from "react";
3import axios from "axios";
4import Home from "./pages/Home";
5import Datasets from "./pages/Datasets";
6import Dataset from "./pages/Dataset";
7import Algorithms from "./pages/Algorithms";
8import About from "./pages/About";
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/zia/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="/zia">
42 <div
43 style={{
44 paddingTop: "5rem",
45 paddingLeft: "2rem",
46 paddingRight: "2rem",
47 paddingBottom: "2rem",
48 }}
49 >
50 <nav
51 style={{
52 position: "fixed",
53 top: 0,
54 left: 0,
55 right: 0,
56 padding: "1rem 2rem",
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 <ul
64 style={{
65 listStyle: "none",
66 padding: 0,
67 margin: 0,
68 display: "flex",
69 gap: "1.5rem",
70 }}
71 >
72 <li>
73 <Link
74 to="/home"
75 style={{
76 color: "#0066cc",
77 textDecoration: "none",
78 fontWeight: "500",
79 }}
80 >
81 Home
82 </Link>
83 </li>
84 <li>
85 <Link
86 to="/datasets"
87 style={{
88 color: "#0066cc",
89 textDecoration: "none",
90 fontWeight: "500",
91 }}
92 >
93 Datasets
94 </Link>
95 </li>
96 <li>
97 <Link
98 to="/algorithms"
99 style={{
100 color: "#0066cc",
101 textDecoration: "none",
102 fontWeight: "500",
103 }}
104 >
105 Algorithms
106 </Link>
107 </li>
108 <li>
109 <Link
110 to="/about"
111 style={{
112 color: "#0066cc",
113 textDecoration: "none",
114 fontWeight: "500",
115 }}
116 >
117 About
118 </Link>
119 </li>
120 </ul>
121 </nav>
122 <main>
123 {isLoading ? (
124 <div>Loading benchmark data...</div>
125 ) : error ? (
126 <div>Error: {error}</div>
127 ) : (
128 <Routes>
129 <Route
130 path="/home"
131 element={<Home benchmarkData={benchmarkData} />}
132 />
133 <Route
134 path="/"
135 element={<Home benchmarkData={benchmarkData} />}
136 />
137 <Route
138 path="/datasets"
139 element={<Datasets datasets={benchmarkData?.datasets || []} />}
140 />
141 <Route
142 path="/algorithms"
143 element={
144 <Algorithms algorithms={benchmarkData?.algorithms || []} />
145 }
146 />
147 <Route
148 path="/dataset/:datasetName"
149 element={<Dataset datasets={benchmarkData?.datasets || []} />}
150 />
151 <Route path="/about" element={<About />} />
152 </Routes>
153 )}
154 </main>
155 </div>
156 </BrowserRouter>
157 );
158}
160export default App;