/ concept-collection / benchcompress
Sign in
concept-collection / benchcompress
03f201a
Branches
mainbenchmark-results
benchcompress / web-ui / src / components / benchmark / table / BenchmarkTable.tsx
217 lines · 6.7 KBCodeBlameHistory
0968553routingJeremy Magland 1import { useMemo } from "react";
2import { useSearchParams } from "react-router-dom";
eacabc8test real dataJeremy Magland 3import {
4 flexRender,
5 getCoreRowModel,
6 useReactTable,
7 getSortedRowModel,
70a7a71code formattingJeremy Magland 8} from "@tanstack/react-table";
9import { BenchmarkResult } from "../../../types";
10import { columns } from "./columns";
11import { BenchmarkCharts } from "../charts/BenchmarkCharts";
12import { exportToCsv } from "../export/csvExport";
eacabc8test real dataJeremy Magland 13
0968553routingJeremy Magland 14interface BenchmarkTableProps {
15 results: BenchmarkResult[];
0602a7eui improvementsJeremy Magland 16 availableDatasets: string[];
17 availableAlgorithms: string[];
0968553routingJeremy Magland 18}
eacabc8test real dataJeremy Magland 19
0602a7eui improvementsJeremy Magland 20export function BenchmarkTable({
21 results,
22 availableDatasets,
23 availableAlgorithms,
24}: BenchmarkTableProps) {
0968553routingJeremy Magland 25 const [searchParams, setSearchParams] = useSearchParams();
26 const selectedDataset = searchParams.get("dataset") || "";
6c17da5about pageJeremy Magland 27 const selectedAlgorithm = searchParams.get("algorithm") || "";
0602a7eui improvementsJeremy Magland 29 const filteredData = results;
eacabc8test real dataJeremy Magland 30
31 const table = useReactTable({
32 data: filteredData || [],
33 columns,
34 getCoreRowModel: getCoreRowModel(),
35 getSortedRowModel: getSortedRowModel(),
36 });
38 const chartData = useMemo(() => {
6c17da5about pageJeremy Magland 39 if (selectedDataset) {
0602a7eui improvementsJeremy Magland 40 return filteredData
6c17da5about pageJeremy Magland 41 .filter((row: BenchmarkResult) => row.dataset === selectedDataset)
42 .map((row: BenchmarkResult) => ({
43 algorithm: row.algorithm,
44 compression_ratio: row.compression_ratio,
45 encode_speed: row.encode_mb_per_sec,
46 decode_speed: row.decode_mb_per_sec,
47 }));
48 } else if (selectedAlgorithm) {
0602a7eui improvementsJeremy Magland 49 return filteredData
6c17da5about pageJeremy Magland 50 .filter((row: BenchmarkResult) => row.algorithm === selectedAlgorithm)
51 .map((row: BenchmarkResult) => ({
0602a7eui improvementsJeremy Magland 52 algorithm: row.dataset,
6c17da5about pageJeremy Magland 53 compression_ratio: row.compression_ratio,
54 encode_speed: row.encode_mb_per_sec,
55 decode_speed: row.decode_mb_per_sec,
56 }));
57 }
58 return [];
0602a7eui improvementsJeremy Magland 59 }, [filteredData, selectedDataset, selectedAlgorithm]);
eacabc8test real dataJeremy Magland 60
61 return (
62 <div className="table-container">
70a7a71code formattingJeremy Magland 63 <div
64 style={{
a3cad9bformat codeJeremy Magland 65 marginBottom: "12px",
70a7a71code formattingJeremy Magland 66 display: "flex",
67 alignItems: "center",
a3cad9bformat codeJeremy Magland 68 gap: "8px",
70a7a71code formattingJeremy Magland 69 justifyContent: "space-between",
70 }}
71 >
a3cad9bformat codeJeremy Magland 72 <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
73 <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
6c17da5about pageJeremy Magland 74 <label htmlFor="dataset-select">Dataset:</label>
75 <select
76 id="dataset-select"
77 value={selectedDataset}
78 onChange={(e) => {
79 if (e.target.value) {
80 setSearchParams({ dataset: e.target.value });
81 } else {
82 setSearchParams(
83 selectedAlgorithm ? { algorithm: selectedAlgorithm } : {},
84 );
85 }
86 }}
87 style={{
a3cad9bformat codeJeremy Magland 88 padding: "4px 8px",
6c17da5about pageJeremy Magland 89 borderRadius: "4px",
90 border: "1px solid #ccc",
a3cad9bformat codeJeremy Magland 91 minWidth: "150px",
6c17da5about pageJeremy Magland 92 backgroundColor: "#fff",
a3cad9bformat codeJeremy Magland 93 fontSize: "0.9rem",
6c17da5about pageJeremy Magland 94 }}
95 >
96 <option value="">All Datasets</option>
97 {availableDatasets.map((dataset) => (
98 <option key={dataset} value={dataset}>
99 {dataset}
100 </option>
101 ))}
102 </select>
103 </div>
104 <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
105 <label htmlFor="algorithm-select">Algorithm:</label>
106 <select
107 id="algorithm-select"
108 value={selectedAlgorithm}
109 onChange={(e) => {
110 if (e.target.value) {
111 setSearchParams({ algorithm: e.target.value });
112 } else {
113 setSearchParams(
114 selectedDataset ? { dataset: selectedDataset } : {},
115 );
116 }
117 }}
118 style={{
a3cad9bformat codeJeremy Magland 119 padding: "4px 8px",
6c17da5about pageJeremy Magland 120 borderRadius: "4px",
121 border: "1px solid #ccc",
a3cad9bformat codeJeremy Magland 122 minWidth: "150px",
6c17da5about pageJeremy Magland 123 backgroundColor: "#fff",
a3cad9bformat codeJeremy Magland 124 fontSize: "0.9rem",
6c17da5about pageJeremy Magland 125 }}
126 >
127 <option value="">All Algorithms</option>
128 {availableAlgorithms.map((algorithm) => (
129 <option key={algorithm} value={algorithm}>
130 {algorithm}
131 </option>
132 ))}
133 </select>
134 </div>
eacabc8test real dataJeremy Magland 135 </div>
136 </div>
6c17da5about pageJeremy Magland 138 {(selectedDataset || selectedAlgorithm) && chartData.length > 0 && (
eacabc8test real dataJeremy Magland 139 <BenchmarkCharts chartData={chartData} />
140 )}
142 <table>
143 <thead>
70a7a71code formattingJeremy Magland 144 {table.getHeaderGroups().map((headerGroup) => (
eacabc8test real dataJeremy Magland 145 <tr key={headerGroup.id}>
70a7a71code formattingJeremy Magland 146 {headerGroup.headers.map((header) => (
eacabc8test real dataJeremy Magland 147 <th
148 key={header.id}
149 onClick={header.column.getToggleSortingHandler()}
70a7a71code formattingJeremy Magland 150 style={{ cursor: "pointer" }}
eacabc8test real dataJeremy Magland 151 >
152 {flexRender(
153 header.column.columnDef.header,
70a7a71code formattingJeremy Magland 154 header.getContext(),
eacabc8test real dataJeremy Magland 155 )}
156 {header.column.getIsSorted() && (
70a7a71code formattingJeremy Magland 157 <span style={{ marginLeft: "4px" }}>
158 {header.column.getIsSorted() === "asc" ? "↑" : "↓"}
eacabc8test real dataJeremy Magland 159 </span>
160 )}
161 </th>
162 ))}
163 </tr>
164 ))}
165 </thead>
166 <tbody>
70a7a71code formattingJeremy Magland 167 {table.getRowModel().rows.map((row) => (
eacabc8test real dataJeremy Magland 168 <tr key={row.id}>
70a7a71code formattingJeremy Magland 169 {row.getVisibleCells().map((cell) => (
eacabc8test real dataJeremy Magland 170 <td key={cell.id}>
171 {flexRender(cell.column.columnDef.cell, cell.getContext())}
172 </td>
173 ))}
174 </tr>
175 ))}
176 </tbody>
177 </table>
a10d266update UIJeremy Magland 178
a3cad9bformat codeJeremy Magland 179 <div
180 style={{
181 marginTop: "12px",
182 display: "flex",
183 justifyContent: "flex-end",
184 }}
185 >
a10d266update UIJeremy Magland 186 <button
187 onClick={() =>
188 exportToCsv(filteredData, selectedDataset || selectedAlgorithm)
189 }
190 style={{
191 padding: "8px 16px",
192 backgroundColor: "#4CAF50",
193 color: "white",
194 border: "none",
195 borderRadius: "4px",
196 cursor: "pointer",
197 display: "flex",
198 alignItems: "center",
199 gap: "8px",
200 }}
201 >
202 <svg
203 width="16"
204 height="16"
205 viewBox="0 0 16 16"
206 fill="none"
207 xmlns="http://www.w3.org/2000/svg"
208 >
209 <path d="M8 12L3 7H6V1H10V7H13L8 12Z" fill="currentColor" />
210 <path d="M2 14V15H14V14H2Z" fill="currentColor" />
211 </svg>
212 Download CSV
213 </button>
214 </div>
eacabc8test real dataJeremy Magland 215 </div>
216 );
↑↓ move↵openescclose