/ concept-collection / benchcompress
Sign in
concept-collection / benchcompress
ea7f46e
Branches
mainbenchmark-results
benchcompress / web-ui / src / App.tsx
185 lines · 5.3 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";
3a8e918monitorJeremy Magland 9import Monitor from "./pages/Monitor";
0968553routingJeremy Magland 10import { BenchmarkData } from "./types";
a4762faweb-uiJeremy Magland 11
12function App() {
0968553routingJeremy Magland 13 const [benchmarkData, setBenchmarkData] = useState<BenchmarkData | null>(
14 null,
15 );
16 const [isLoading, setIsLoading] = useState(true);
17 const [error, setError] = useState<string | null>(null);
19 useEffect(() => {
20 const fetchData = async () => {
21 try {
22 setIsLoading(true);
23 setError(null);
24 const response = await axios.get(
17f0f3aget results from memobinJeremy Magland 25 "https://tempory.net/f/memobin/benchcompress/global/results.json",
0968553routingJeremy Magland 26 );
27 setBenchmarkData(response.data);
28 } catch (error) {
29 const message =
30 error instanceof Error ? error.message : "Failed to fetch data";
31 setError(message);
32 console.error("Error fetching benchmark data:", error);
33 } finally {
34 setIsLoading(false);
35 }
36 };
38 fetchData();
39 }, []);
a4762faweb-uiJeremy Magland 41 return (
7884e06rename to benchcompressJeremy Magland 42 <BrowserRouter basename="/benchcompress">
4cc92d1incr version of algJeremy Magland 43 <ScrollToTop />
a3cad9bformat codeJeremy Magland 44 <div
45 style={{
104f442improve layoutJeremy Magland 46 paddingTop: "3rem",
47 padding: "3rem 2rem 2rem 2rem",
a3cad9bformat codeJeremy Magland 48 }}
49 >
50 <nav
51 style={{
52 position: "fixed",
53 top: 0,
54 left: 0,
55 right: 0,
104f442improve layoutJeremy Magland 56 padding: "0.35rem min(2rem, 4%)",
a3cad9bformat codeJeremy Magland 57 backgroundColor: "white",
104f442improve layoutJeremy Magland 58 // borderBottom: "1px solid #eaeaea",
a3cad9bformat codeJeremy Magland 59 zIndex: 1000,
104f442improve layoutJeremy Magland 60 // boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
a3cad9bformat codeJeremy Magland 61 }}
62 >
104f442improve layoutJeremy Magland 63 <div
64 style={{
65 display: "flex",
66 justifyContent: "space-between",
67 alignItems: "center",
68 minHeight: "32px",
69 }}
70 >
71 <Link
72 to="/datasets"
73 style={{
74 display: "flex",
75 alignItems: "center",
76 textDecoration: "none",
77 minWidth: 0,
78 maxWidth: "calc(100% - 80px)",
79 }}
80 >
81 <img
82 src="/benchcompress/logo.svg"
83 alt="Benchcompress Logo"
84 style={{
85 width: "28px",
86 height: "28px",
87 marginRight: "10px",
88 flexShrink: 0,
89 }}
90 />
91 <span
92 style={{
93 minWidth: 0,
94 whiteSpace: "nowrap",
95 overflow: "hidden",
96 textOverflow: "ellipsis",
97 }}
98 >
99 <span
100 style={{
101 fontSize: "1rem",
102 fontWeight: "500",
103 color: "#2c2c2c",
104 }}
105 >
106 Benchcompress
107 </span>
108 <span className="app-header-subtitle">
109 {" · "}
110 <span style={{ fontSize: "1rem", color: "#777" }}>
93dd44areorganize datasets and algs, add seismicJeremy Magland 111 Comparing compression algorithms for scientific data arrays
104f442improve layoutJeremy Magland 112 </span>
113 </span>
114 </span>
115 </Link>
0092283paper pageJeremy Magland 116 <div style={{ display: "flex", gap: "1.5rem" }}>
117 <Link
118 to="/paper"
119 style={{
120 color: "#0066cc",
121 textDecoration: "none",
122 fontWeight: "500",
123 }}
124 >
125 Paper
126 </Link>
3a8e918monitorJeremy Magland 127 <Link
128 to="/monitor"
129 style={{
130 color: "#0066cc",
131 textDecoration: "none",
132 fontWeight: "500",
133 }}
134 >
135 Monitor
136 </Link>
0092283paper pageJeremy Magland 137 <Link
138 to="/about"
139 style={{
140 color: "#0066cc",
141 textDecoration: "none",
142 fontWeight: "500",
143 }}
144 >
145 About
146 </Link>
147 </div>
bde0876rearrange tabsJeremy Magland 148 </div>
85d3449pagesJeremy Magland 149 </nav>
150 <main>
0968553routingJeremy Magland 151 {isLoading ? (
152 <div>Loading benchmark data...</div>
153 ) : error ? (
154 <div>Error: {error}</div>
155 ) : (
156 <Routes>
bde0876rearrange tabsJeremy Magland 157 <Route path="/" element={<Navigate to="/datasets" replace />} />
0968553routingJeremy Magland 158 <Route
159 path="/datasets"
bde0876rearrange tabsJeremy Magland 160 element={<Home benchmarkData={benchmarkData} />}
0968553routingJeremy Magland 161 />
162 <Route
163 path="/algorithms"
bde0876rearrange tabsJeremy Magland 164 element={<Home benchmarkData={benchmarkData} />}
0968553routingJeremy Magland 165 />
a09013dupload dataset .jsonJeremy Magland 166 <Route
167 path="/dataset/:datasetName"
bde0876rearrange tabsJeremy Magland 168 element={<Home benchmarkData={benchmarkData} />}
a09013dupload dataset .jsonJeremy Magland 169 />
0602a7eui improvementsJeremy Magland 170 <Route
171 path="/algorithm/:algorithmName"
bde0876rearrange tabsJeremy Magland 172 element={<Home benchmarkData={benchmarkData} />}
0602a7eui improvementsJeremy Magland 173 />
6c17da5about pageJeremy Magland 174 <Route path="/about" element={<About />} />
0092283paper pageJeremy Magland 175 <Route path="/paper" element={<Paper />} />
3a8e918monitorJeremy Magland 176 <Route path="/monitor" element={<Monitor />} />
0968553routingJeremy Magland 177 </Routes>
178 )}
85d3449pagesJeremy Magland 179 </main>
180 </div>
181 </BrowserRouter>
a4762faweb-uiJeremy Magland 182 );
185export default App;
↑↓ move↵openescclose