2import { TagFilter } from "../TagFilter";
3import { Dataset, Algorithm, BenchmarkResult } from "../../types";
5interface DatasetTableProps {
6 filteredDatasets: Dataset[];
7 availableDatasetTags: string[];
8 selectedTags: string[];
9 toggleTag: (tag: string) => void;
10 benchmarkResults: BenchmarkResult[];
11}
13interface AlgorithmTableProps {
14 filteredAlgorithms: Algorithm[];
15 availableAlgorithmTags: string[];
16 selectedTags: string[];
17 toggleTag: (tag: string) => void;
18}
20export const DatasetTable = ({
21 filteredDatasets,
22 availableDatasetTags,
23 selectedTags,
24 toggleTag,
25 benchmarkResults,
26}: DatasetTableProps) => {
27 const getBestCompressionResult = (datasetName: string) => {
28 const datasetResults = benchmarkResults.filter(
29 (result) => result.dataset === datasetName,
30 );
31 if (datasetResults.length === 0) return { algorithm: "N/A", ratio: 0 };
33 const bestResult = datasetResults.reduce((best, current) =>
34 current.compression_ratio > best.compression_ratio ? current : best,
35 );
36 return {
37 algorithm: bestResult.algorithm,
38 ratio: bestResult.compression_ratio,
39 };
40 };
42 return (
43 <div style={{ overflowX: "auto" }}>
44 <div style={{ marginBottom: "1rem" }}>
45 <TagFilter
46 availableTags={availableDatasetTags}
47 selectedTags={selectedTags}
48 onTagToggle={toggleTag}
49 label="Filter datasets"
50 />
51 </div>
52 <table style={{ width: "100%", borderCollapse: "collapse" }}>
53 <thead>
54 <tr style={{ backgroundColor: "#f5f5f5" }}>
55 <th
56 style={{
57 padding: "8px 12px",
58 textAlign: "left",
59 borderBottom: "1px solid #ddd",
60 fontSize: "0.9rem",
61 whiteSpace: "nowrap",
62 }}
63 >
64 Name
65 </th>
66 <th
67 style={{
68 padding: "8px 12px",
69 textAlign: "left",
70 borderBottom: "1px solid #ddd",
71 fontSize: "0.9rem",
72 whiteSpace: "nowrap",
73 }}
74 >
75 Version
76 </th>
77 <th
78 style={{
79 padding: "8px 12px",
80 textAlign: "left",
81 borderBottom: "1px solid #ddd",
82 fontSize: "0.9rem",
83 whiteSpace: "nowrap",
84 }}
85 >
86 Description
87 </th>
88 <th
89 style={{
90 padding: "8px 12px",
91 textAlign: "left",
92 borderBottom: "1px solid #ddd",
93 fontSize: "0.9rem",
94 whiteSpace: "nowrap",
95 }}
96 >
97 Tags
98 </th>
99 <th
100 style={{
101 padding: "8px 12px",
102 textAlign: "left",
103 borderBottom: "1px solid #ddd",
104 fontSize: "0.9rem",
105 whiteSpace: "nowrap",
106 }}
107 >
108 Source
109 </th>
110 <th
111 style={{
112 padding: "8px 12px",
113 textAlign: "left",
114 borderBottom: "1px solid #ddd",
115 fontSize: "0.9rem",
116 whiteSpace: "nowrap",
117 }}
118 >
119 Data
120 </th>
121 <th
122 style={{
123 padding: "8px 12px",
124 textAlign: "left",
125 borderBottom: "1px solid #ddd",
126 fontSize: "0.9rem",
127 whiteSpace: "nowrap",
128 }}
129 >
130 Best Compression
131 </th>
132 </tr>
133 </thead>
134 <tbody>
135 {filteredDatasets.map((dataset, index) => (
136 <tr
137 key={`${dataset.name}-${dataset.version}`}
138 style={{ backgroundColor: index % 2 === 0 ? "white" : "#fafafa" }}
139 >
140 <td
141 style={{
142 padding: "6px 12px",
143 borderBottom: "1px solid #ddd",
144 fontSize: "0.9rem",
145 }}
146 >
147 <Link
148 to={`/dataset/${encodeURIComponent(dataset.name)}`}
149 style={{
150 color: "#0066cc",
151 textDecoration: "none",
152 fontWeight: "500",
153 }}
154 >
155 {dataset.name}
156 </Link>
157 </td>
158 <td
159 style={{
160 padding: "6px 12px",
161 borderBottom: "1px solid #ddd",
162 fontSize: "0.9rem",
163 }}
164 >
165 {dataset.version}
166 </td>
167 <td
168 style={{
169 padding: "6px 12px",
170 borderBottom: "1px solid #ddd",
171 fontSize: "0.9rem",
172 }}
173 >
174 {dataset.description}
175 </td>
176 <td
177 style={{
178 padding: "6px 12px",
179 borderBottom: "1px solid #ddd",
180 fontSize: "0.9rem",
181 }}
182 >
183 {dataset.tags.map((tag) => (
184 <span
185 key={tag}
186 style={{
187 display: "inline-block",
188 backgroundColor: "#e1e1e1",
189 padding: "2px 6px",
190 borderRadius: "3px",
191 margin: "1px",
192 fontSize: "0.8rem",
193 }}
194 >
195 {tag}
196 </span>
197 ))}
198 </td>
199 <td
200 style={{
201 padding: "6px 12px",
202 borderBottom: "1px solid #ddd",
203 fontSize: "0.9rem",
204 }}
205 >
206 {dataset.source_file && (
207 <a
208 href={dataset.source_file}
209 target="_blank"
210 rel="noopener noreferrer"
211 style={{ color: "#0066cc", textDecoration: "none" }}
212 >
213 View Source
214 </a>
215 )}
216 </td>
217 <td
218 style={{
219 padding: "6px 12px",
220 borderBottom: "1px solid #ddd",
221 fontSize: "0.9rem",
222 }}
223 >
224 {dataset.data_url_npy && (
225 <a
226 href={dataset.data_url_npy}
227 download={`${dataset.name}-${dataset.version}.npy`}
228 style={{ color: "#0066cc", textDecoration: "none" }}
229 >
230 Download
231 </a>
232 )}
233 </td>
234 <td
235 style={{
236 padding: "6px 12px",
237 borderBottom: "1px solid #ddd",
238 fontSize: "0.9rem",
239 }}
240 >
241 {(() => {
242 const result = getBestCompressionResult(dataset.name);
243 return (
244 <>
245 <Link
246 to={`/algorithm/${encodeURIComponent(result.algorithm)}`}
247 style={{
248 color: "#0066cc",
249 textDecoration: "none",
250 fontWeight: "500",
251 }}
252 >
253 {result.algorithm}
254 </Link>
255 {result.algorithm !== "N/A" &&
256 ` (${result.ratio.toFixed(1)})`}
257 </>
258 );
259 })()}
260 </td>
261 </tr>
262 ))}
263 </tbody>
264 </table>
265 </div>
266 );
267};
269export const AlgorithmTable = ({
270 filteredAlgorithms,
271 availableAlgorithmTags,
272 selectedTags,
273 toggleTag,
274}: AlgorithmTableProps) => (
275 <div style={{ overflowX: "auto" }}>
276 <div style={{ marginBottom: "1rem" }}>
277 <TagFilter
278 availableTags={availableAlgorithmTags}
279 selectedTags={selectedTags}
280 onTagToggle={toggleTag}
281 label="Filter algorithms"
282 />
283 </div>
284 <table style={{ width: "100%", borderCollapse: "collapse" }}>
285 <thead>
286 <tr style={{ backgroundColor: "#f5f5f5" }}>
287 <th
288 style={{
289 padding: "8px 12px",
290 textAlign: "left",
291 borderBottom: "1px solid #ddd",
292 fontSize: "0.9rem",
293 whiteSpace: "nowrap",
294 }}
295 >
296 Name
297 </th>
298 <th
299 style={{
300 padding: "8px 12px",
301 textAlign: "left",
302 borderBottom: "1px solid #ddd",
303 fontSize: "0.9rem",
304 whiteSpace: "nowrap",
305 }}
306 >
307 Version
308 </th>
309 <th
310 style={{
311 padding: "8px 12px",
312 textAlign: "left",
313 borderBottom: "1px solid #ddd",
314 fontSize: "0.9rem",
315 whiteSpace: "nowrap",
316 }}
317 >
318 Description
319 </th>
320 <th
321 style={{
322 padding: "8px 12px",
323 textAlign: "left",
324 borderBottom: "1px solid #ddd",
325 fontSize: "0.9rem",
326 whiteSpace: "nowrap",
327 }}
328 >
329 Tags
330 </th>
331 <th
332 style={{
333 padding: "8px 12px",
334 textAlign: "left",
335 borderBottom: "1px solid #ddd",
336 fontSize: "0.9rem",
337 whiteSpace: "nowrap",
338 }}
339 >
340 Source
341 </th>
342 </tr>
343 </thead>
344 <tbody>
345 {filteredAlgorithms.map((algorithm, index) => (
346 <tr
347 key={`${algorithm.name}-${algorithm.version}`}
348 style={{ backgroundColor: index % 2 === 0 ? "white" : "#fafafa" }}
349 >
350 <td
351 style={{
352 padding: "6px 12px",
353 borderBottom: "1px solid #ddd",
354 fontSize: "0.9rem",
355 }}
356 >
357 <Link
358 to={`/algorithm/${encodeURIComponent(algorithm.name)}`}
359 style={{
360 color: "#0066cc",
361 textDecoration: "none",
362 fontWeight: "500",
363 }}
364 >
365 {algorithm.name}
366 </Link>
367 </td>
368 <td
369 style={{
370 padding: "6px 12px",
371 borderBottom: "1px solid #ddd",
372 fontSize: "0.9rem",
373 }}
374 >
375 {algorithm.version}
376 </td>
377 <td
378 style={{
379 padding: "6px 12px",
380 borderBottom: "1px solid #ddd",
381 fontSize: "0.9rem",
382 }}
383 >
384 {algorithm.description}
385 </td>
386 <td
387 style={{
388 padding: "6px 12px",
389 borderBottom: "1px solid #ddd",
390 fontSize: "0.9rem",
391 }}
392 >
393 {algorithm.tags.map((tag) => (
394 <span
395 key={tag}
396 style={{
397 display: "inline-block",
398 backgroundColor: "#e1e1e1",
399 padding: "2px 6px",
400 borderRadius: "3px",
401 margin: "1px",
402 fontSize: "0.8rem",
403 }}
404 >
405 {tag}
406 </span>
407 ))}
408 </td>
409 <td
410 style={{
411 padding: "6px 12px",
412 borderBottom: "1px solid #ddd",
413 fontSize: "0.9rem",
414 }}
415 >
416 {algorithm.source_file && (
417 <a
418 href={algorithm.source_file}
419 target="_blank"
420 rel="noopener noreferrer"
421 style={{ color: "#0066cc", textDecoration: "none" }}
422 >
423 View Source
424 </a>
425 )}
426 </td>
427 </tr>
428 ))}
429 </tbody>
430 </table>
431 </div>
432);