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] = 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 Integer Compression Benchmark
86 </h1>
87 <p
88 style={{
89 color: "#666",
90 marginTop: "0.5rem",
91 }}
92 >
93 Comparing numeric array compression algorithms
94 </p>
95 </header>
96 <main>
97 <div
98 style={{
99 marginBottom: "2rem",
100 display: "flex",
101 flexDirection: "column",
102 gap: "1rem",
103 }}
104 >
105 {!selectedDataset && (
106 <TagFilter
107 availableTags={availableDatasetTags}
108 selectedTags={selectedDatasetTags}
109 onTagToggle={toggleDatasetTag}
110 label="Filter datasets"
111 />
112 )}
114 {!selectedAlgorithm && (
115 <TagFilter
116 availableTags={availableAlgorithmTags}
117 selectedTags={selectedAlgorithmTags}
118 onTagToggle={toggleAlgorithmTag}
119 label="Filter algorithms"
120 />
121 )}
122 </div>
124 {benchmarkData && (
125 <BenchmarkTable
126 results={filteredResults}
127 availableDatasets={filteredDatasets.map((d) => d.name)}
128 availableAlgorithms={filteredAlgorithms.map((a) => a.name)}
129 />
130 )}
131 </main>
132 </div>
133 );
134}
136export default Home;