/ proof-of-concept / benchcompress
Sign in
proof-of-concept / benchcompress
0968553
Branches
mainbenchmark-results
benchcompress / web-ui / src / components / benchmark / table / BenchmarkTable.tsx
160 lines · 4.9 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[];
eacabc8test real dataJeremy Magland 17
0968553routingJeremy Magland 18export function BenchmarkTable({ results }: BenchmarkTableProps) {
19 const [searchParams, setSearchParams] = useSearchParams();
20 const selectedDataset = searchParams.get("dataset") || "";
21 const availableDatasets = useMemo(() => {
22 return Array.from(new Set(results.map((result) => result.dataset))).sort();
23 }, [results]);
eacabc8test real dataJeremy Magland 24
25 // Memoize filtered data to prevent unnecessary recalculations
26 const filteredData = useMemo(() => {
0968553routingJeremy Magland 27 if (!selectedDataset) return results;
28 return results.filter((row) => row.dataset === selectedDataset);
29 }, [results, selectedDataset]);
eacabc8test real dataJeremy Magland 30
31 const table = useReactTable({
32 data: filteredData || [],
33 columns,
34 getCoreRowModel: getCoreRowModel(),
35 getSortedRowModel: getSortedRowModel(),
36 });
38 // Prepare data for bar charts when a dataset is selected
39 const chartData = useMemo(() => {
40 if (!selectedDataset) return [];
0968553routingJeremy Magland 41 return results
42 .filter((row: BenchmarkResult) => row.dataset === selectedDataset)
43 .map((row: BenchmarkResult) => ({
eacabc8test real dataJeremy Magland 44 algorithm: row.algorithm,
45 compression_ratio: row.compression_ratio,
46 encode_speed: row.encode_mb_per_sec,
70a7a71code formattingJeremy Magland 47 decode_speed: row.decode_mb_per_sec,
eacabc8test real dataJeremy Magland 48 }));
0968553routingJeremy Magland 49 }, [results, selectedDataset]);
eacabc8test real dataJeremy Magland 50
51 return (
52 <div className="table-container">
70a7a71code formattingJeremy Magland 53 <div
54 style={{
55 marginBottom: "20px",
56 display: "flex",
57 alignItems: "center",
58 gap: "10px",
59 justifyContent: "space-between",
60 }}
61 >
62 <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
8a6e869delta encoding for other algsJeremy Magland 63 <label htmlFor="dataset-select">Dataset:</label>
eacabc8test real dataJeremy Magland 64 <select
65 id="dataset-select"
66 value={selectedDataset}
0968553routingJeremy Magland 67 onChange={(e) => {
68 if (e.target.value) {
69 setSearchParams({ dataset: e.target.value });
70 } else {
71 setSearchParams({});
72 }
73 }}
eacabc8test real dataJeremy Magland 74 style={{
70a7a71code formattingJeremy Magland 75 padding: "8px",
76 borderRadius: "4px",
77 border: "1px solid #ccc",
78 minWidth: "200px",
79 backgroundColor: "#fff",
eacabc8test real dataJeremy Magland 80 }}
81 >
82 <option value="">All Datasets</option>
70a7a71code formattingJeremy Magland 83 {availableDatasets.map((dataset) => (
eacabc8test real dataJeremy Magland 84 <option key={dataset} value={dataset}>
85 {dataset}
86 </option>
87 ))}
88 </select>
89 </div>
90 <button
91 onClick={() => exportToCsv(filteredData, selectedDataset)}
92 style={{
70a7a71code formattingJeremy Magland 93 padding: "8px 16px",
94 backgroundColor: "#4CAF50",
95 color: "white",
96 border: "none",
97 borderRadius: "4px",
98 cursor: "pointer",
99 display: "flex",
100 alignItems: "center",
101 gap: "8px",
eacabc8test real dataJeremy Magland 102 }}
103 >
70a7a71code formattingJeremy Magland 104 <svg
105 width="16"
106 height="16"
107 viewBox="0 0 16 16"
108 fill="none"
109 xmlns="http://www.w3.org/2000/svg"
110 >
111 <path d="M8 12L3 7H6V1H10V7H13L8 12Z" fill="currentColor" />
112 <path d="M2 14V15H14V14H2Z" fill="currentColor" />
eacabc8test real dataJeremy Magland 113 </svg>
114 Download CSV
115 </button>
116 </div>
118 {selectedDataset && chartData.length > 0 && (
119 <BenchmarkCharts chartData={chartData} />
120 )}
122 <table>
123 <thead>
70a7a71code formattingJeremy Magland 124 {table.getHeaderGroups().map((headerGroup) => (
eacabc8test real dataJeremy Magland 125 <tr key={headerGroup.id}>
70a7a71code formattingJeremy Magland 126 {headerGroup.headers.map((header) => (
eacabc8test real dataJeremy Magland 127 <th
128 key={header.id}
129 onClick={header.column.getToggleSortingHandler()}
70a7a71code formattingJeremy Magland 130 style={{ cursor: "pointer" }}
eacabc8test real dataJeremy Magland 131 >
132 {flexRender(
133 header.column.columnDef.header,
70a7a71code formattingJeremy Magland 134 header.getContext(),
eacabc8test real dataJeremy Magland 135 )}
136 {header.column.getIsSorted() && (
70a7a71code formattingJeremy Magland 137 <span style={{ marginLeft: "4px" }}>
138 {header.column.getIsSorted() === "asc" ? "↑" : "↓"}
eacabc8test real dataJeremy Magland 139 </span>
140 )}
141 </th>
142 ))}
143 </tr>
144 ))}
145 </thead>
146 <tbody>
70a7a71code formattingJeremy Magland 147 {table.getRowModel().rows.map((row) => (
eacabc8test real dataJeremy Magland 148 <tr key={row.id}>
70a7a71code formattingJeremy Magland 149 {row.getVisibleCells().map((cell) => (
eacabc8test real dataJeremy Magland 150 <td key={cell.id}>
151 {flexRender(cell.column.columnDef.cell, cell.getContext())}
152 </td>
153 ))}
154 </tr>
155 ))}
156 </tbody>
157 </table>
158 </div>
159 );
↑↓ move↵openescclose