/ concept-collection / benchcompress
Sign in
concept-collection / benchcompress
a10d266
Branches
mainbenchmark-results
benchcompress / web-ui / src / App.tsx
146 lines · 4.0 KBCodeBlameHistory
85d3449pagesJeremy Magland 1import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
0968553routingJeremy Magland 2import { useEffect, useState } from "react";
3import axios from "axios";
85d3449pagesJeremy Magland 4import Home from "./pages/Home";
5import Datasets from "./pages/Datasets";
6import Algorithms from "./pages/Algorithms";
6c17da5about pageJeremy Magland 7import About from "./pages/About";
0968553routingJeremy Magland 8import { BenchmarkData } from "./types";
a4762faweb-uiJeremy Magland 9
10function App() {
0968553routingJeremy Magland 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/zia/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 }, []);
a4762faweb-uiJeremy Magland 39 return (
0968553routingJeremy Magland 40 <BrowserRouter basename="/zia">
a10d266update UIJeremy Magland 41 <div style={{ paddingTop: "5rem", paddingLeft: "2rem", paddingRight: "2rem", paddingBottom: "2rem" }}>
42 <nav style={{
43 position: "fixed",
44 top: 0,
45 left: 0,
46 right: 0,
47 padding: "1rem 2rem",
48 backgroundColor: "white",
49 borderBottom: "1px solid #eaeaea",
50 zIndex: 1000,
51 boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
52 }}>
0968553routingJeremy Magland 53 <ul
54 style={{
55 listStyle: "none",
56 padding: 0,
57 margin: 0,
58 display: "flex",
59 gap: "1.5rem",
60 }}
61 >
85d3449pagesJeremy Magland 62 <li>
63 <Link
0968553routingJeremy Magland 64 to="/home"
85d3449pagesJeremy Magland 65 style={{
66 color: "#0066cc",
67 textDecoration: "none",
0968553routingJeremy Magland 68 fontWeight: "500",
85d3449pagesJeremy Magland 69 }}
70 >
71 Home
72 </Link>
73 </li>
74 <li>
75 <Link
76 to="/datasets"
77 style={{
78 color: "#0066cc",
79 textDecoration: "none",
0968553routingJeremy Magland 80 fontWeight: "500",
85d3449pagesJeremy Magland 81 }}
82 >
83 Datasets
84 </Link>
85 </li>
86 <li>
87 <Link
88 to="/algorithms"
89 style={{
90 color: "#0066cc",
91 textDecoration: "none",
0968553routingJeremy Magland 92 fontWeight: "500",
85d3449pagesJeremy Magland 93 }}
94 >
95 Algorithms
96 </Link>
97 </li>
6c17da5about pageJeremy Magland 98 <li>
99 <Link
100 to="/about"
101 style={{
102 color: "#0066cc",
103 textDecoration: "none",
104 fontWeight: "500",
105 }}
106 >
107 About
108 </Link>
109 </li>
85d3449pagesJeremy Magland 110 </ul>
111 </nav>
112 <main>
0968553routingJeremy Magland 113 {isLoading ? (
114 <div>Loading benchmark data...</div>
115 ) : error ? (
116 <div>Error: {error}</div>
117 ) : (
118 <Routes>
119 <Route
120 path="/home"
121 element={<Home benchmarkData={benchmarkData} />}
122 />
123 <Route
124 path="/"
125 element={<Home benchmarkData={benchmarkData} />}
126 />
127 <Route
128 path="/datasets"
129 element={<Datasets datasets={benchmarkData?.datasets || []} />}
130 />
131 <Route
132 path="/algorithms"
133 element={
134 <Algorithms algorithms={benchmarkData?.algorithms || []} />
135 }
136 />
6c17da5about pageJeremy Magland 137 <Route path="/about" element={<About />} />
0968553routingJeremy Magland 138 </Routes>
139 )}
85d3449pagesJeremy Magland 140 </main>
141 </div>
142 </BrowserRouter>
a4762faweb-uiJeremy Magland 143 );
146export default App;
↑↓ move↵openescclose