1import { Dataset } from "../types";
2import { Link } from "react-router-dom";
3import { TagFilter } from "../components/TagFilter";
4import { useTagFilter } from "../hooks/useTagFilter";
6interface DatasetsProps {
7 datasets: Dataset[];
8}
10function Datasets({ datasets }: DatasetsProps) {
11 const {
12 selectedTags,
13 availableTags,
14 filteredItems: filteredDatasets,
15 toggleTag,
16 } = useTagFilter(datasets);
18 return (
19 <div>
20 <div style={{ marginBottom: "2rem" }}>
21 <h1
22 style={{
23 fontSize: "2rem",
24 fontWeight: "bold",
25 color: "#333",
26 marginBottom: "1rem",
27 }}
28 >
29 Benchmark Datasets
30 </h1>
31 <TagFilter
32 availableTags={availableTags}
33 selectedTags={selectedTags}
34 onTagToggle={toggleTag}
35 label="Filter datasets"
36 />
37 </div>
38 <div style={{ overflowX: "auto" }}>
39 <table style={{ width: "100%", borderCollapse: "collapse" }}>
40 <thead>
41 <tr style={{ backgroundColor: "#f5f5f5" }}>
42 <th
43 style={{
44 padding: "8px 12px",
45 textAlign: "left",
46 borderBottom: "1px solid #ddd",
47 fontSize: "0.9rem",
48 whiteSpace: "nowrap",
49 }}
50 >
51 Name
52 </th>
53 <th
54 style={{
55 padding: "8px 12px",
56 textAlign: "left",
57 borderBottom: "1px solid #ddd",
58 fontSize: "0.9rem",
59 whiteSpace: "nowrap",
60 }}
61 >
62 Version
63 </th>
64 <th
65 style={{
66 padding: "8px 12px",
67 textAlign: "left",
68 borderBottom: "1px solid #ddd",
69 fontSize: "0.9rem",
70 whiteSpace: "nowrap",
71 }}
72 >
73 Description
74 </th>
75 <th
76 style={{
77 padding: "8px 12px",
78 textAlign: "left",
79 borderBottom: "1px solid #ddd",
80 fontSize: "0.9rem",
81 whiteSpace: "nowrap",
82 }}
83 >
84 Tags
85 </th>
86 <th
87 style={{
88 padding: "8px 12px",
89 textAlign: "left",
90 borderBottom: "1px solid #ddd",
91 fontSize: "0.9rem",
92 whiteSpace: "nowrap",
93 }}
94 >
95 Source
96 </th>
97 <th
98 style={{
99 padding: "8px 12px",
100 textAlign: "left",
101 borderBottom: "1px solid #ddd",
102 fontSize: "0.9rem",
103 whiteSpace: "nowrap",
104 }}
105 >
106 Data
107 </th>
108 </tr>
109 </thead>
110 <tbody>
111 {filteredDatasets.map((dataset, index) => (
112 <tr
113 key={`${dataset.name}-${dataset.version}`}
114 style={{
115 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
116 }}
117 >
118 <td
119 style={{
120 padding: "6px 12px",
121 borderBottom: "1px solid #ddd",
122 fontSize: "0.9rem",
123 }}
124 >
125 <Link
126 to={`/dataset/${encodeURIComponent(dataset.name)}`}
127 style={{
128 color: "#0066cc",
129 textDecoration: "none",
130 fontWeight: "500",
131 }}
132 >
133 {dataset.name}
134 </Link>
135 </td>
136 <td
137 style={{
138 padding: "6px 12px",
139 borderBottom: "1px solid #ddd",
140 fontSize: "0.9rem",
141 }}
142 >
143 {dataset.version}
144 </td>
145 <td
146 style={{
147 padding: "6px 12px",
148 borderBottom: "1px solid #ddd",
149 fontSize: "0.9rem",
150 }}
151 >
152 {dataset.description}
153 </td>
154 <td
155 style={{
156 padding: "6px 12px",
157 borderBottom: "1px solid #ddd",
158 fontSize: "0.9rem",
159 }}
160 >
161 {dataset.tags.map((tag) => (
162 <span
163 key={tag}
164 style={{
165 display: "inline-block",
166 backgroundColor: "#e1e1e1",
167 padding: "2px 6px",
168 borderRadius: "3px",
169 margin: "1px",
170 fontSize: "0.8rem",
171 }}
172 >
173 {tag}
174 </span>
175 ))}
176 </td>
177 <td
178 style={{
179 padding: "6px 12px",
180 borderBottom: "1px solid #ddd",
181 fontSize: "0.9rem",
182 }}
183 >
184 {dataset.source_file && (
185 <a
186 href={dataset.source_file}
187 target="_blank"
188 rel="noopener noreferrer"
189 style={{
190 color: "#0066cc",
191 textDecoration: "none",
192 }}
193 >
194 View Source
195 </a>
196 )}
197 </td>
198 <td
199 style={{
200 padding: "6px 12px",
201 borderBottom: "1px solid #ddd",
202 fontSize: "0.9rem",
203 }}
204 >
205 {dataset.data_url_npy && (
206 <a
207 href={dataset.data_url_npy}
208 download={`${dataset.name}-${dataset.version}.npy`}
209 style={{
210 color: "#0066cc",
211 textDecoration: "none",
212 }}
213 >
214 Download
215 </a>
216 )}
217 </td>
218 </tr>
219 ))}
220 </tbody>
221 </table>
222 </div>
223 </div>
224 );
225}
227export default Datasets;