best compression column
2 changed files+215−157
web-ui/src/components/tables/DatasetAlgorithmTables.tsxmodified+214−157View file
@@ -1,12 +1,13 @@
11 import { Link } from "react-router-dom";
22 import { TagFilter } from "../TagFilter";
3-import { Dataset, Algorithm } from "../../types";
3+import { Dataset, Algorithm, BenchmarkResult } from "../../types";
44
55 interface DatasetTableProps {
66 filteredDatasets: Dataset[];
77 availableDatasetTags: string[];
88 selectedTags: string[];
99 toggleTag: (tag: string) => void;
10+ benchmarkResults: BenchmarkResult[];
1011 }
1112
1213 interface AlgorithmTableProps {
@@ -21,193 +22,249 @@ export const DatasetTable = ({
2122 availableDatasetTags,
2223 selectedTags,
2324 toggleTag,
24-}: DatasetTableProps) => (
25- <div style={{ overflowX: "auto" }}>
26- <div style={{ marginBottom: "1rem" }}>
27- <TagFilter
28- availableTags={availableDatasetTags}
29- selectedTags={selectedTags}
30- onTagToggle={toggleTag}
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
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 };
32+
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+ };
41+
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
11256 style={{
113- padding: "6px 12px",
57+ padding: "8px 12px",
58+ textAlign: "left",
11459 borderBottom: "1px solid #ddd",
11560 fontSize: "0.9rem",
61+ whiteSpace: "nowrap",
11662 }}
11763 >
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
64+ Name
65+ </th>
66+ <th
13067 style={{
131- padding: "6px 12px",
68+ padding: "8px 12px",
69+ textAlign: "left",
13270 borderBottom: "1px solid #ddd",
13371 fontSize: "0.9rem",
72+ whiteSpace: "nowrap",
13473 }}
13574 >
136- {dataset.version}
137- </td>
138- <td
75+ Version
76+ </th>
77+ <th
13978 style={{
140- padding: "6px 12px",
79+ padding: "8px 12px",
80+ textAlign: "left",
14181 borderBottom: "1px solid #ddd",
14282 fontSize: "0.9rem",
83+ whiteSpace: "nowrap",
14384 }}
14485 >
145- {dataset.description}
146- </td>
147- <td
86+ Description
87+ </th>
88+ <th
14889 style={{
149- padding: "6px 12px",
90+ padding: "8px 12px",
91+ textAlign: "left",
15092 borderBottom: "1px solid #ddd",
15193 fontSize: "0.9rem",
94+ whiteSpace: "nowrap",
15295 }}
15396 >
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
97+ Tags
98+ </th>
99+ <th
171100 style={{
172- padding: "6px 12px",
101+ padding: "8px 12px",
102+ textAlign: "left",
173103 borderBottom: "1px solid #ddd",
174104 fontSize: "0.9rem",
105+ whiteSpace: "nowrap",
175106 }}
176107 >
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
108+ Source
109+ </th>
110+ <th
189111 style={{
190- padding: "6px 12px",
112+ padding: "8px 12px",
113+ textAlign: "left",
191114 borderBottom: "1px solid #ddd",
192115 fontSize: "0.9rem",
116+ whiteSpace: "nowrap",
193117 }}
194118 >
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>
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>
205132 </tr>
206- ))}
207- </tbody>
208- </table>
209- </div>
210-);
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+};
211268
212269 export const AlgorithmTable = ({
213270 filteredAlgorithms,
web-ui/src/pages/Home.tsxmodified+1−0View file
@@ -236,6 +236,7 @@ export default function Home({ benchmarkData }: HomeProps) {
236236 availableDatasetTags={availableDatasetTags}
237237 selectedTags={selectedTags}
238238 toggleTag={handleTagToggle}
239+ benchmarkResults={benchmarkData?.results || []}
239240 />
240241 ) : (
241242 <AlgorithmTable