2import axios from "axios";
3import { Link } from "react-router-dom";
4import yaml from "yaml";
5import contentYaml from "../content/home-content.yml?raw";
6import { HomeContent, HomeSection } from "../types/home-content";
7import "../components/Button.css";
9const content = yaml.parse(contentYaml) as HomeContent;
11const SectionCard: React.FC<{ section: HomeSection }> = ({ section }) => {
12 if (section.external) {
13 return (
14 <div
15 style={{
16 padding: "0.75rem",
17 border: "1px solid #eaeaea",
18 borderRadius: "8px",
19 backgroundColor: "#f9f9f9",
20 display: "flex",
21 flexDirection: "column",
22 height: "100%",
23 }}
24 >
25 <h2 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>
26 {section.title}
27 </h2>
28 <p style={{ marginBottom: "0.5rem" }}>{section.description}</p>
29 <a
30 href={section.link}
31 target="_blank"
32 rel="noopener noreferrer"
33 className="soft-button"
34 style={{ marginTop: "auto", alignSelf: "flex-start" }}
35 >
36 {section.linkText}
37 </a>
38 </div>
39 );
40 }
42 return (
43 <div
44 style={{
45 padding: "0.75rem",
46 border: "1px solid #eaeaea",
47 borderRadius: "8px",
48 backgroundColor: "#f9f9f9",
49 display: "flex",
50 flexDirection: "column",
51 height: "100%",
52 }}
53 >
54 <h2 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>
55 {section.title}
56 </h2>
57 <p style={{ marginBottom: "0.5rem" }}>{section.description}</p>
58 <Link
59 to={section.link}
60 className="soft-button"
61 style={{ marginTop: "auto", alignSelf: "flex-start" }}
62 >
63 {section.linkText}
64 </Link>
65 </div>
66 );
67};
69interface BenchmarkStatus {
70 current_dataset: string;
71 current_algorithm: string;
72 completed_count: number;
73 total_count: number;
74 progress_percentage: number;
75 elapsed_time: number;
76 last_update: string;
77 completed_benchmarks: Array<{
78 dataset: string;
79 algorithm: string;
80 compression_ratio: number;
81 encode_time: number;
82 decode_time: number;
83 cache_status: string;
84 }>;
85}
87export default function Home() {
88 const [status, setStatus] = useState<BenchmarkStatus | null>(null);
90 useEffect(() => {
91 const fetchStatus = async () => {
92 try {
93 const cacheBust = Math.random().toString(36).substring(2, 15);
94 const response = await axios.get(
76c0fcfmemobin fixJeremy Magland 95 `https://tempory.net/f/memobin/ephys_compression_tests/benchmark_status/current.json?cachebust=${cacheBust}`,
97 setStatus(response.data);
98 } catch (error) {
99 console.error("Error fetching benchmark status:", error);
100 }
101 };
103 fetchStatus();
104 }, []);
106 return (
107 <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "2rem" }}>
108 <h1
109 style={{
110 marginBottom: "2rem",
111 display: "flex",
112 alignItems: "center",
113 gap: "1rem",
114 }}
115 >
116 <img
117 src={`${import.meta.env.BASE_URL}logo.svg`}
118 alt="Ephys Compression Tests Logo"
119 style={{ width: "40px", height: "auto" }}
120 />
121 {content.title}
122 </h1>
124 <p
125 style={{ fontSize: "1.1rem", lineHeight: "1.6", marginBottom: "2rem" }}
126 >
127 {content.description}
128 </p>
130 <div
131 style={{
132 display: "grid",
133 gap: "2rem",
134 gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
135 }}
136 >
137 {Object.entries(content.sections).map(([key, section]) => (
138 <SectionCard key={key} section={section} />
139 ))}
140 </div>
142 <hr
143 style={{
144 margin: "3rem 0",
145 border: "none",
146 borderTop: "1px solid #eaeaea",
147 }}
148 />
150 <footer
151 style={{ textAlign: "center", color: "#666", fontSize: "0.9rem" }}
152 >
153 <p>
154 Last UI update: {__BUILD_DATE__}
155 <br />
156 {status && (
157 <>
158 <div
159 style={{
160 margin: "1rem 0",
161 padding: "0.5rem",
162 border: "1px solid #eaeaea",
163 borderRadius: "4px",
164 display: "inline-block",
165 }}
166 >
167 Last benchmark run:{" "}
168 {new Date(status.last_update).toLocaleString()}
169 <br />
170 Status:{" "}
171 {status.progress_percentage === 100
172 ? "Completed"
173 : "In Progress"}{" "}
174 ({status.completed_count}/{status.total_count} benchmarks)
175 </div>
176 <br />
177 </>
178 )}
179 Released under{" "}
180 <a
321b66aUpdate links to concept-collection locationmagland 181 href="https://github.com/concept-collection/ephys_compression_tests/blob/main/LICENSE"
183 rel="noopener noreferrer"
184 style={{ color: "#666", textDecoration: "underline" }}
185 >
186 Apache License 2.0
187 </a>
188 </p>
189 </footer>
190 </div>
191 );
192}