/ concept-collection / benchcompress
Sign in
concept-collection / benchcompress
04ad0dc
Branches
mainbenchmark-results
benchcompress / web-ui / src / App.tsx
173 lines · 5.0 KBCodeBlameHistory
bde0876rearrange tabsJeremy Magland 1import { BrowserRouter, Routes, Route, Link, Navigate } from "react-router-dom";
0968553routingJeremy Magland 2import { useEffect, useState } from "react";
3import axios from "axios";
4cc92d1incr version of algJeremy Magland 4import { ScrollToTop } from "./components/ScrollToTop";
104f442improve layoutJeremy Magland 5import "./components/AppHeader.css";
85d3449pagesJeremy Magland 6import Home from "./pages/Home";
6c17da5about pageJeremy Magland 7import About from "./pages/About";
0092283paper pageJeremy Magland 8import Paper from "./pages/Paper";
0968553routingJeremy Magland 9import { BenchmarkData } from "./types";
a4762faweb-uiJeremy Magland 10
11function App() {
0968553routingJeremy Magland 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(
7884e06rename to benchcompressJeremy Magland 24 "https://raw.githubusercontent.com/magland/benchcompress/benchmark-results/benchmark_results/results.json",
0968553routingJeremy Magland 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 }, []);
a4762faweb-uiJeremy Magland 40 return (
7884e06rename to benchcompressJeremy Magland 41 <BrowserRouter basename="/benchcompress">
4cc92d1incr version of algJeremy Magland 42 <ScrollToTop />
a3cad9bformat codeJeremy Magland 43 <div
44 style={{
104f442improve layoutJeremy Magland 45 paddingTop: "3rem",
46 padding: "3rem 2rem 2rem 2rem",
a3cad9bformat codeJeremy Magland 47 }}
48 >
49 <nav
50 style={{
51 position: "fixed",
52 top: 0,
53 left: 0,
54 right: 0,
104f442improve layoutJeremy Magland 55 padding: "0.35rem min(2rem, 4%)",
a3cad9bformat codeJeremy Magland 56 backgroundColor: "white",
104f442improve layoutJeremy Magland 57 // borderBottom: "1px solid #eaeaea",
a3cad9bformat codeJeremy Magland 58 zIndex: 1000,
104f442improve layoutJeremy Magland 59 // boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
a3cad9bformat codeJeremy Magland 60 }}
61 >
104f442improve layoutJeremy Magland 62 <div
63 style={{
64 display: "flex",
65 justifyContent: "space-between",
66 alignItems: "center",
67 minHeight: "32px",
68 }}
69 >
70 <Link
71 to="/datasets"
72 style={{
73 display: "flex",
74 alignItems: "center",
75 textDecoration: "none",
76 minWidth: 0,
77 maxWidth: "calc(100% - 80px)",
78 }}
79 >
80 <img
81 src="/benchcompress/logo.svg"
82 alt="Benchcompress Logo"
83 style={{
84 width: "28px",
85 height: "28px",
86 marginRight: "10px",
87 flexShrink: 0,
88 }}
89 />
90 <span
91 style={{
92 minWidth: 0,
93 whiteSpace: "nowrap",
94 overflow: "hidden",
95 textOverflow: "ellipsis",
96 }}
97 >
98 <span
99 style={{
100 fontSize: "1rem",
101 fontWeight: "500",
102 color: "#2c2c2c",
103 }}
104 >
105 Benchcompress
106 </span>
107 <span className="app-header-subtitle">
108 {" · "}
109 <span style={{ fontSize: "1rem", color: "#777" }}>
93dd44areorganize datasets and algs, add seismicJeremy Magland 110 Comparing compression algorithms for scientific data arrays
104f442improve layoutJeremy Magland 111 </span>
112 </span>
113 </span>
114 </Link>
0092283paper pageJeremy Magland 115 <div style={{ display: "flex", gap: "1.5rem" }}>
116 <Link
117 to="/paper"
118 style={{
119 color: "#0066cc",
120 textDecoration: "none",
121 fontWeight: "500",
122 }}
123 >
124 Paper
125 </Link>
126 <Link
127 to="/about"
128 style={{
129 color: "#0066cc",
130 textDecoration: "none",
131 fontWeight: "500",
132 }}
133 >
134 About
135 </Link>
136 </div>
bde0876rearrange tabsJeremy Magland 137 </div>
85d3449pagesJeremy Magland 138 </nav>
139 <main>
0968553routingJeremy Magland 140 {isLoading ? (
141 <div>Loading benchmark data...</div>
142 ) : error ? (
143 <div>Error: {error}</div>
144 ) : (
145 <Routes>
bde0876rearrange tabsJeremy Magland 146 <Route path="/" element={<Navigate to="/datasets" replace />} />
0968553routingJeremy Magland 147 <Route
148 path="/datasets"
bde0876rearrange tabsJeremy Magland 149 element={<Home benchmarkData={benchmarkData} />}
0968553routingJeremy Magland 150 />
151 <Route
152 path="/algorithms"
bde0876rearrange tabsJeremy Magland 153 element={<Home benchmarkData={benchmarkData} />}
0968553routingJeremy Magland 154 />
a09013dupload dataset .jsonJeremy Magland 155 <Route
156 path="/dataset/:datasetName"
bde0876rearrange tabsJeremy Magland 157 element={<Home benchmarkData={benchmarkData} />}
a09013dupload dataset .jsonJeremy Magland 158 />
0602a7eui improvementsJeremy Magland 159 <Route
160 path="/algorithm/:algorithmName"
bde0876rearrange tabsJeremy Magland 161 element={<Home benchmarkData={benchmarkData} />}
0602a7eui improvementsJeremy Magland 162 />
6c17da5about pageJeremy Magland 163 <Route path="/about" element={<About />} />
0092283paper pageJeremy Magland 164 <Route path="/paper" element={<Paper />} />
0968553routingJeremy Magland 165 </Routes>
166 )}
85d3449pagesJeremy Magland 167 </main>
168 </div>
169 </BrowserRouter>
a4762faweb-uiJeremy Magland 170 );
173export default App;
↑↓ move↵openescclose