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(new Set(results.map((result: BenchmarkResult) => result.dataset))).sort() as string[];
33 setAvailableDatasets(datasets);
34 } catch (error) {
35 const message = error instanceof Error ? error.message : 'Failed to fetch data';
36 setError(message);
37 console.error('Error fetching benchmark data:', error);
38 } finally {
39 setIsLoading(false);
40 }
41 };
43 fetchData();
44 }, []);
46 // Memoize filtered data to prevent unnecessary recalculations
47 const filteredData = useMemo(() => {
48 if (!selectedDataset) return data;
49 return data.filter(row => row.dataset === selectedDataset);
50 }, [data, selectedDataset]);
52 const table = useReactTable({
53 data: filteredData || [],
54 columns,
55 getCoreRowModel: getCoreRowModel(),
56 getSortedRowModel: getSortedRowModel(),
57 });
59 // Prepare data for bar charts when a dataset is selected
60 const chartData = useMemo(() => {
61 if (!selectedDataset) return [];
62 return data
63 .filter(row => row.dataset === selectedDataset)
64 .map(row => ({
65 algorithm: row.algorithm,
66 compression_ratio: row.compression_ratio,
67 encode_speed: row.encode_mb_per_sec,
68 decode_speed: row.decode_mb_per_sec
69 }));
70 }, [data, selectedDataset]);
72 if (isLoading) {
73 return <div>Loading benchmark data...</div>;
74 }
76 if (error) {
77 return <div>Error: {error}</div>;
78 }
80 return (
81 <div className="table-container">
82 <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '10px', justifyContent: 'space-between' }}>
83 <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
84 <label htmlFor="dataset-select">Dataset:</label>
85 <select
86 id="dataset-select"
87 value={selectedDataset}
88 onChange={(e) => setSelectedDataset(e.target.value)}
89 style={{
90 padding: '8px',
91 borderRadius: '4px',
92 border: '1px solid #ccc',
93 minWidth: '200px',
94 backgroundColor: '#fff'
95 }}
96 >
97 <option value="">All Datasets</option>
98 {availableDatasets.map(dataset => (
99 <option key={dataset} value={dataset}>
100 {dataset}
101 </option>
102 ))}
103 </select>
104 </div>
105 <button
106 onClick={() => exportToCsv(filteredData, selectedDataset)}
107 style={{
108 padding: '8px 16px',
109 backgroundColor: '#4CAF50',
110 color: 'white',
111 border: 'none',
112 borderRadius: '4px',
113 cursor: 'pointer',
114 display: 'flex',
115 alignItems: 'center',
116 gap: '8px'
117 }}
118 >
119 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
120 <path d="M8 12L3 7H6V1H10V7H13L8 12Z" fill="currentColor"/>
121 <path d="M2 14V15H14V14H2Z" fill="currentColor"/>
122 </svg>
123 Download CSV
124 </button>
125 </div>
127 {selectedDataset && chartData.length > 0 && (
128 <BenchmarkCharts chartData={chartData} />
129 )}
131 <table>
132 <thead>
133 {table.getHeaderGroups().map(headerGroup => (
134 <tr key={headerGroup.id}>
135 {headerGroup.headers.map(header => (
136 <th
137 key={header.id}
138 onClick={header.column.getToggleSortingHandler()}
139 style={{ cursor: 'pointer' }}
140 >
141 {flexRender(
142 header.column.columnDef.header,
143 header.getContext()
144 )}
145 {header.column.getIsSorted() && (
146 <span style={{ marginLeft: '4px' }}>
147 {header.column.getIsSorted() === 'asc' ? '↑' : '↓'}
148 </span>
149 )}
150 </th>
151 ))}
152 </tr>
153 ))}
154 </thead>
155 <tbody>
156 {table.getRowModel().rows.map(row => (
157 <tr key={row.id}>
158 {row.getVisibleCells().map(cell => (
159 <td key={cell.id}>
160 {flexRender(cell.column.columnDef.cell, cell.getContext())}
161 </td>
162 ))}
163 </tr>
164 ))}
165 </tbody>
166 </table>
167 </div>
168 );
169}