1import { useEffect, useState, useMemo } from "react";
2import axios from "axios";
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";
14export function BenchmarkTable() {
15 const [data, setData] = useState<BenchmarkResult[]>([]);
16 const [selectedDataset, setSelectedDataset] = useState<string>("");
17 const [availableDatasets, setAvailableDatasets] = useState<string[]>([]);
18 const [isLoading, setIsLoading] = useState(true);
19 const [error, setError] = useState<string | null>(null);
21 useEffect(() => {
22 const fetchData = async () => {
23 try {
24 setIsLoading(true);
25 setError(null);
26 const response = await axios.get(
27 "https://raw.githubusercontent.com/magland/zia/benchmark-results/benchmark_results/results.json",
28 );
29 const results = response.data.results;
30 setData(results);
31 // Extract unique dataset names with proper typing
32 const datasets = Array.from(
33 new Set(results.map((result: BenchmarkResult) => result.dataset)),
34 ).sort() as string[];
35 setAvailableDatasets(datasets);
36 } catch (error) {
37 const message =
38 error instanceof Error ? error.message : "Failed to fetch data";
39 setError(message);
40 console.error("Error fetching benchmark data:", error);
41 } finally {
42 setIsLoading(false);
43 }
44 };
46 fetchData();
47 }, []);
49 // Memoize filtered data to prevent unnecessary recalculations
50 const filteredData = useMemo(() => {
51 if (!selectedDataset) return data;
52 return data.filter((row) => row.dataset === selectedDataset);
53 }, [data, selectedDataset]);
55 const table = useReactTable({
56 data: filteredData || [],
57 columns,
58 getCoreRowModel: getCoreRowModel(),
59 getSortedRowModel: getSortedRowModel(),
60 });
62 // Prepare data for bar charts when a dataset is selected
63 const chartData = useMemo(() => {
64 if (!selectedDataset) return [];
65 return data
66 .filter((row) => row.dataset === selectedDataset)
67 .map((row) => ({
68 algorithm: row.algorithm,
69 compression_ratio: row.compression_ratio,
70 encode_speed: row.encode_mb_per_sec,
71 decode_speed: row.decode_mb_per_sec,
72 }));
73 }, [data, selectedDataset]);
75 if (isLoading) {
76 return <div>Loading benchmark data...</div>;
77 }
79 if (error) {
80 return <div>Error: {error}</div>;
81 }
83 return (
84 <div className="table-container">
85 <div
86 style={{
87 marginBottom: "20px",
88 display: "flex",
89 alignItems: "center",
90 gap: "10px",
91 justifyContent: "space-between",
92 }}
93 >
94 <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
95 <label htmlFor="dataset-select">Dataset:</label>
96 <select
97 id="dataset-select"
98 value={selectedDataset}
99 onChange={(e) => setSelectedDataset(e.target.value)}
100 style={{
101 padding: "8px",
102 borderRadius: "4px",
103 border: "1px solid #ccc",
104 minWidth: "200px",
105 backgroundColor: "#fff",
106 }}
107 >
108 <option value="">All Datasets</option>
109 {availableDatasets.map((dataset) => (
110 <option key={dataset} value={dataset}>
111 {dataset}
112 </option>
113 ))}
114 </select>
115 </div>
116 <button
117 onClick={() => exportToCsv(filteredData, selectedDataset)}
118 style={{
119 padding: "8px 16px",
120 backgroundColor: "#4CAF50",
121 color: "white",
122 border: "none",
123 borderRadius: "4px",
124 cursor: "pointer",
125 display: "flex",
126 alignItems: "center",
127 gap: "8px",
128 }}
129 >
130 <svg
131 width="16"
132 height="16"
133 viewBox="0 0 16 16"
134 fill="none"
135 xmlns="http://www.w3.org/2000/svg"
136 >
137 <path d="M8 12L3 7H6V1H10V7H13L8 12Z" fill="currentColor" />
138 <path d="M2 14V15H14V14H2Z" fill="currentColor" />
139 </svg>
140 Download CSV
141 </button>
142 </div>
144 {selectedDataset && chartData.length > 0 && (
145 <BenchmarkCharts chartData={chartData} />
146 )}
148 <table>
149 <thead>
150 {table.getHeaderGroups().map((headerGroup) => (
151 <tr key={headerGroup.id}>
152 {headerGroup.headers.map((header) => (
153 <th
154 key={header.id}
155 onClick={header.column.getToggleSortingHandler()}
156 style={{ cursor: "pointer" }}
157 >
158 {flexRender(
159 header.column.columnDef.header,
160 header.getContext(),
161 )}
162 {header.column.getIsSorted() && (
163 <span style={{ marginLeft: "4px" }}>
164 {header.column.getIsSorted() === "asc" ? "↑" : "↓"}
165 </span>
166 )}
167 </th>
168 ))}
169 </tr>
170 ))}
171 </thead>
172 <tbody>
173 {table.getRowModel().rows.map((row) => (
174 <tr key={row.id}>
175 {row.getVisibleCells().map((cell) => (
176 <td key={cell.id}>
177 {flexRender(cell.column.columnDef.cell, cell.getContext())}
178 </td>
179 ))}
180 </tr>
181 ))}
182 </tbody>
183 </table>
184 </div>
185 );
186}