1import { useMemo } from "react";
2import { useSearchParams } from "react-router-dom";
3import {
4 flexRender,
5 getCoreRowModel,
6 useReactTable,
7 getSortedRowModel,
8} from "@tanstack/react-table";
9import { BenchmarkResult } from "../../../types";
10import { columns } from "./columns";
11import { BenchmarkCharts } from "../charts/BenchmarkCharts";
12import { exportToCsv } from "../export/csvExport";
14interface BenchmarkTableProps {
15 results: BenchmarkResult[];
16 availableDatasets: string[];
17 availableAlgorithms: string[];
18}
20export function BenchmarkTable({
21 results,
22 availableDatasets,
23 availableAlgorithms,
24}: BenchmarkTableProps) {
25 const [searchParams, setSearchParams] = useSearchParams();
26 const selectedDataset = searchParams.get("dataset") || "";
27 const selectedAlgorithm = searchParams.get("algorithm") || "";
29 const filteredData = results;
31 const table = useReactTable({
32 data: filteredData || [],
33 columns,
34 getCoreRowModel: getCoreRowModel(),
35 getSortedRowModel: getSortedRowModel(),
36 });
38 const chartData = useMemo(() => {
39 if (selectedDataset) {
40 return filteredData
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) {
49 return filteredData
50 .filter((row: BenchmarkResult) => row.algorithm === selectedAlgorithm)
51 .map((row: BenchmarkResult) => ({
52 algorithm: row.dataset,
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 [];
59 }, [filteredData, selectedDataset, selectedAlgorithm]);
61 return (
62 <div className="table-container">
63 <div
64 style={{
65 marginBottom: "12px",
66 display: "flex",
67 alignItems: "center",
68 gap: "8px",
69 justifyContent: "space-between",
70 }}
71 >
72 <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
73 <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
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={{
88 padding: "4px 8px",
89 borderRadius: "4px",
90 border: "1px solid #ccc",
91 minWidth: "150px",
92 backgroundColor: "#fff",
93 fontSize: "0.9rem",
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={{
119 padding: "4px 8px",
120 borderRadius: "4px",
121 border: "1px solid #ccc",
122 minWidth: "150px",
123 backgroundColor: "#fff",
124 fontSize: "0.9rem",
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>
135 </div>
136 </div>
138 {(selectedDataset || selectedAlgorithm) && chartData.length > 0 && (
139 <BenchmarkCharts chartData={chartData} />
140 )}
142 <table>
143 <thead>
144 {table.getHeaderGroups().map((headerGroup) => (
145 <tr key={headerGroup.id}>
146 {headerGroup.headers.map((header) => (
147 <th
148 key={header.id}
149 onClick={header.column.getToggleSortingHandler()}
150 style={{ cursor: "pointer" }}
151 >
152 {flexRender(
153 header.column.columnDef.header,
154 header.getContext(),
155 )}
156 {header.column.getIsSorted() && (
157 <span style={{ marginLeft: "4px" }}>
158 {header.column.getIsSorted() === "asc" ? "↑" : "↓"}
159 </span>
160 )}
161 </th>
162 ))}
163 </tr>
164 ))}
165 </thead>
166 <tbody>
167 {table.getRowModel().rows.map((row) => (
168 <tr key={row.id}>
169 {row.getVisibleCells().map((cell) => (
170 <td key={cell.id}>
171 {flexRender(cell.column.columnDef.cell, cell.getContext())}
172 </td>
173 ))}
174 </tr>
175 ))}
176 </tbody>
177 </table>
179 <div
180 style={{
181 marginTop: "12px",
182 display: "flex",
183 justifyContent: "flex-end",
184 }}
185 >
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>
215 </div>
216 );
217}