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