1import { BenchmarkTable } from "../components/benchmark/table/BenchmarkTable";
2import { BenchmarkData } from "../types";
3import { useSearchParams } from "react-router-dom";
4import { useMemo } from "react";
5import { TagFilter } from "../components/TagFilter";
6import { useTagFilter } from "../hooks/useTagFilter";
8interface HomeProps {
9 benchmarkData: BenchmarkData | null;
10}
12function Home({ benchmarkData }: HomeProps) {
13 const [searchParams, setSearchParams] = useSearchParams();
14 const selectedDataset = searchParams.get("dataset") || "";
15 const selectedAlgorithm = searchParams.get("algorithm") || "";
17 // Set up tag filtering for datasets
18 const {
19 selectedTags: selectedDatasetTags,
20 availableTags: availableDatasetTags,
21 filteredItems: filteredDatasets,
22 toggleTag: toggleDatasetTag,
23 } = useTagFilter(benchmarkData?.datasets || []);
25 // Set up tag filtering for algorithms
26 const {
27 selectedTags: selectedAlgorithmTags,
28 availableTags: availableAlgorithmTags,
29 filteredItems: filteredAlgorithms,
30 toggleTag: toggleAlgorithmTag,
31 } = useTagFilter(benchmarkData?.algorithms || []);
33 // Filter benchmark results based on selected dataset/algorithm and tags
34 const filteredResults = useMemo(() => {
35 if (!benchmarkData) return [];
37 let filtered = benchmarkData.results;
39 // Filter by selected dataset/algorithm
40 if (selectedDataset) {
41 filtered = filtered.filter(
42 (result) => result.dataset === selectedDataset,
43 );
44 } else if (selectedDatasetTags.length > 0) {
45 // Only apply dataset tag filtering if no specific dataset is selected
46 const datasetNames = filteredDatasets.map((d) => d.name);
47 filtered = filtered.filter((result) =>
48 datasetNames.includes(result.dataset),
49 );
50 }
52 if (selectedAlgorithm) {
53 filtered = filtered.filter(
54 (result) => result.algorithm === selectedAlgorithm,
55 );
56 } else if (selectedAlgorithmTags.length > 0) {
57 // Only apply algorithm tag filtering if no specific algorithm is selected
58 const algorithmNames = filteredAlgorithms.map((a) => a.name);
59 filtered = filtered.filter((result) =>
60 algorithmNames.includes(result.algorithm),
61 );
62 }
64 return filtered;
65 }, [
66 benchmarkData,
67 selectedDataset,
68 selectedAlgorithm,
69 selectedDatasetTags,
70 selectedAlgorithmTags,
71 filteredDatasets,
72 filteredAlgorithms,
73 ]);
75 return (
76 <div>
77 <header style={{ marginBottom: "2rem" }}>
78 <h1
79 style={{
80 fontSize: "2rem",
81 fontWeight: "bold",
82 color: "#333",
83 }}
84 >
85 Benchmark Results
86 </h1>
87 <p
88 style={{
89 color: "#666",
90 marginTop: "0.5rem",
91 }}
92 >
93 Comparing compression algorithms for numeric arrays
94 </p>
95 </header>
96 <main>
97 <div style={{ marginBottom: "2rem" }}>
98 <div
99 style={{
100 display: "flex",
101 alignItems: "center",
102 gap: "12px",
103 marginBottom: "1rem",
104 }}
105 >
106 <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
107 <label htmlFor="dataset-select">Dataset:</label>
108 <select
109 id="dataset-select"
110 value={selectedDataset}
111 onChange={(e) => {
112 if (e.target.value) {
113 setSearchParams({ dataset: e.target.value });
114 } else {
115 setSearchParams(
116 selectedAlgorithm ? { algorithm: selectedAlgorithm } : {},
117 );
118 }
119 }}
120 style={{
121 padding: "4px 8px",
122 borderRadius: "4px",
123 border: "1px solid #ccc",
124 minWidth: "150px",
125 backgroundColor: "#fff",
126 fontSize: "0.9rem",
127 }}
128 >
129 <option value="">All Datasets</option>
130 {filteredDatasets.map((dataset) => (
131 <option key={dataset.name} value={dataset.name}>
132 {dataset.name}
133 </option>
134 ))}
135 </select>
136 </div>
137 <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
138 <label htmlFor="algorithm-select">Algorithm:</label>
139 <select
140 id="algorithm-select"
141 value={selectedAlgorithm}
142 onChange={(e) => {
143 if (e.target.value) {
144 setSearchParams({ algorithm: e.target.value });
145 } else {
146 setSearchParams(
147 selectedDataset ? { dataset: selectedDataset } : {},
148 );
149 }
150 }}
151 style={{
152 padding: "4px 8px",
153 borderRadius: "4px",
154 border: "1px solid #ccc",
155 minWidth: "150px",
156 backgroundColor: "#fff",
157 fontSize: "0.9rem",
158 }}
159 >
160 <option value="">All Algorithms</option>
161 {filteredAlgorithms.map((algorithm) => (
162 <option key={algorithm.name} value={algorithm.name}>
163 {algorithm.name}
164 </option>
165 ))}
166 </select>
167 </div>
168 </div>
170 <div
171 style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
172 >
173 {!selectedDataset && (
174 <TagFilter
175 availableTags={availableDatasetTags}
176 selectedTags={selectedDatasetTags}
177 onTagToggle={toggleDatasetTag}
178 label="Filter datasets"
179 />
180 )}
182 {!selectedAlgorithm && (
183 <TagFilter
184 availableTags={availableAlgorithmTags}
185 selectedTags={selectedAlgorithmTags}
186 onTagToggle={toggleAlgorithmTag}
187 label="Filter algorithms"
188 />
189 )}
190 </div>
191 </div>
193 {benchmarkData && <BenchmarkTable results={filteredResults} />}
194 </main>
195 </div>
196 );
197}
199export default Home;