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