2import axios from "axios";
4 flexRender,
5 getCoreRowModel,
6 useReactTable,
7 getSortedRowModel,
9import { BenchmarkResult } from "../../../types";
10import { columns } from "./columns";
11import { BenchmarkCharts } from "../charts/BenchmarkCharts";
12import { exportToCsv } from "../export/csvExport";
eacabc8test real dataJeremy Magland 13
14export function BenchmarkTable() {
15 const [data, setData] = useState<BenchmarkResult[]>([]);
70a7a71code formattingJeremy Magland 16 const [selectedDataset, setSelectedDataset] = useState<string>("");
eacabc8test real dataJeremy Magland 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(
70a7a71code formattingJeremy Magland 27 "https://raw.githubusercontent.com/magland/zia/benchmark-results/benchmark_results/results.json",
29 const results = response.data.results;
30 setData(results);
31 // Extract unique dataset names with proper typing
33 new Set(results.map((result: BenchmarkResult) => result.dataset)),
34 ).sort() as string[];
36 } catch (error) {
38 error instanceof Error ? error.message : "Failed to fetch data";
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;
70a7a71code formattingJeremy Magland 52 return data.filter((row) => row.dataset === 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
67 .map((row) => ({
69 compression_ratio: row.compression_ratio,
70 encode_speed: row.encode_mb_per_sec,
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">
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" }}>
8a6e869delta encoding for other algsJeremy Magland 95 <label htmlFor="dataset-select">Dataset:</label>
97 id="dataset-select"
98 value={selectedDataset}
99 onChange={(e) => setSelectedDataset(e.target.value)}
100 style={{
102 borderRadius: "4px",
103 border: "1px solid #ccc",
104 minWidth: "200px",
105 backgroundColor: "#fff",
107 >
108 <option value="">All Datasets</option>
111 {dataset}
112 </option>
113 ))}
114 </select>
115 </div>
116 <button
117 onClick={() => exportToCsv(filteredData, selectedDataset)}
118 style={{
120 backgroundColor: "#4CAF50",
121 color: "white",
122 border: "none",
123 borderRadius: "4px",
124 cursor: "pointer",
125 display: "flex",
126 alignItems: "center",
127 gap: "8px",
129 >
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" />
140 Download CSV
141 </button>
142 </div>
144 {selectedDataset && chartData.length > 0 && (
145 <BenchmarkCharts chartData={chartData} />
146 )}
148 <table>
149 <thead>
154 key={header.id}
155 onClick={header.column.getToggleSortingHandler()}
158 {flexRender(
159 header.column.columnDef.header,
162 {header.column.getIsSorted() && (
164 {header.column.getIsSorted() === "asc" ? "↑" : "↓"}
166 )}
167 </th>
168 ))}
169 </tr>
170 ))}
171 </thead>
172 <tbody>
177 {flexRender(cell.column.columnDef.cell, cell.getContext())}
178 </td>
179 ))}
180 </tr>
181 ))}
182 </tbody>
183 </table>
184 </div>
185 );
186}