about page
5 changed files+163−47
web-ui/src/App.tsxmodified+14−0View file
@@ -4,6 +4,7 @@ import axios from "axios";
44 import Home from "./pages/Home";
55 import Datasets from "./pages/Datasets";
66 import Algorithms from "./pages/Algorithms";
7+import About from "./pages/About";
78 import { BenchmarkData } from "./types";
89
910 function App() {
@@ -84,6 +85,18 @@ function App() {
8485 Algorithms
8586 </Link>
8687 </li>
88+ <li>
89+ <Link
90+ to="/about"
91+ style={{
92+ color: "#0066cc",
93+ textDecoration: "none",
94+ fontWeight: "500",
95+ }}
96+ >
97+ About
98+ </Link>
99+ </li>
87100 </ul>
88101 </nav>
89102 <main>
@@ -111,6 +124,7 @@ function App() {
111124 <Algorithms algorithms={benchmarkData?.algorithms || []} />
112125 }
113126 />
127+ <Route path="/about" element={<About />} />
114128 </Routes>
115129 )}
116130 </main>
web-ui/src/components/benchmark/charts/BenchmarkCharts.tsxmodified+3−3View file
@@ -49,7 +49,7 @@ export function BenchmarkCharts({ chartData }: BenchmarkChartsProps) {
4949 layout={{
5050 width: 800,
5151 height: 400,
52- margin: { t: 5, r: 30, l: 120, b: 30 },
52+ margin: { t: 5, r: 30, l: 250, b: 30 },
5353 xaxis: { title: "Ratio" },
5454 }}
5555 config={{ displayModeBar: false }}
@@ -71,7 +71,7 @@ export function BenchmarkCharts({ chartData }: BenchmarkChartsProps) {
7171 layout={{
7272 width: 800,
7373 height: 400,
74- margin: { t: 5, r: 30, l: 120, b: 30 },
74+ margin: { t: 5, r: 30, l: 250, b: 30 },
7575 xaxis: { title: "MB/s" },
7676 }}
7777 config={{ displayModeBar: false }}
@@ -93,7 +93,7 @@ export function BenchmarkCharts({ chartData }: BenchmarkChartsProps) {
9393 layout={{
9494 width: 800,
9595 height: 400,
96- margin: { t: 5, r: 30, l: 120, b: 30 },
96+ margin: { t: 5, r: 30, l: 250, b: 30 },
9797 xaxis: { title: "MB/s" },
9898 }}
9999 config={{ displayModeBar: false }}
web-ui/src/components/benchmark/table/BenchmarkTable.tsxmodified+104−43View file
@@ -18,15 +18,29 @@ interface BenchmarkTableProps {
1818 export function BenchmarkTable({ results }: BenchmarkTableProps) {
1919 const [searchParams, setSearchParams] = useSearchParams();
2020 const selectedDataset = searchParams.get("dataset") || "";
21+ const selectedAlgorithm = searchParams.get("algorithm") || "";
22+
2123 const availableDatasets = useMemo(() => {
2224 return Array.from(new Set(results.map((result) => result.dataset))).sort();
2325 }, [results]);
2426
27+ const availableAlgorithms = useMemo(() => {
28+ return Array.from(
29+ new Set(results.map((result) => result.algorithm)),
30+ ).sort();
31+ }, [results]);
32+
2533 // Memoize filtered data to prevent unnecessary recalculations
2634 const filteredData = useMemo(() => {
27- if (!selectedDataset) return results;
28- return results.filter((row) => row.dataset === selectedDataset);
29- }, [results, selectedDataset]);
35+ let filtered = results;
36+ if (selectedDataset) {
37+ filtered = filtered.filter((row) => row.dataset === selectedDataset);
38+ }
39+ if (selectedAlgorithm) {
40+ filtered = filtered.filter((row) => row.algorithm === selectedAlgorithm);
41+ }
42+ return filtered;
43+ }, [results, selectedDataset, selectedAlgorithm]);
3044
3145 const table = useReactTable({
3246 data: filteredData || [],
@@ -35,18 +49,29 @@ export function BenchmarkTable({ results }: BenchmarkTableProps) {
3549 getSortedRowModel: getSortedRowModel(),
3650 });
3751
38- // Prepare data for bar charts when a dataset is selected
52+ // Prepare data for bar charts when either dataset or algorithm is selected
3953 const chartData = useMemo(() => {
40- if (!selectedDataset) return [];
41- return results
42- .filter((row: BenchmarkResult) => row.dataset === selectedDataset)
43- .map((row: BenchmarkResult) => ({
44- algorithm: row.algorithm,
45- compression_ratio: row.compression_ratio,
46- encode_speed: row.encode_mb_per_sec,
47- decode_speed: row.decode_mb_per_sec,
48- }));
49- }, [results, selectedDataset]);
54+ if (selectedDataset) {
55+ return results
56+ .filter((row: BenchmarkResult) => row.dataset === selectedDataset)
57+ .map((row: BenchmarkResult) => ({
58+ algorithm: row.algorithm,
59+ compression_ratio: row.compression_ratio,
60+ encode_speed: row.encode_mb_per_sec,
61+ decode_speed: row.decode_mb_per_sec,
62+ }));
63+ } else if (selectedAlgorithm) {
64+ return results
65+ .filter((row: BenchmarkResult) => row.algorithm === selectedAlgorithm)
66+ .map((row: BenchmarkResult) => ({
67+ algorithm: row.dataset, // Use dataset as the x-axis label when algorithm is selected
68+ compression_ratio: row.compression_ratio,
69+ encode_speed: row.encode_mb_per_sec,
70+ decode_speed: row.decode_mb_per_sec,
71+ }));
72+ }
73+ return [];
74+ }, [results, selectedDataset, selectedAlgorithm]);
5075
5176 return (
5277 <div className="table-container">
@@ -59,36 +84,72 @@ export function BenchmarkTable({ results }: BenchmarkTableProps) {
5984 justifyContent: "space-between",
6085 }}
6186 >
62- <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
63- <label htmlFor="dataset-select">Dataset:</label>
64- <select
65- id="dataset-select"
66- value={selectedDataset}
67- onChange={(e) => {
68- if (e.target.value) {
69- setSearchParams({ dataset: e.target.value });
70- } else {
71- setSearchParams({});
72- }
73- }}
74- style={{
75- padding: "8px",
76- borderRadius: "4px",
77- border: "1px solid #ccc",
78- minWidth: "200px",
79- backgroundColor: "#fff",
80- }}
81- >
82- <option value="">All Datasets</option>
83- {availableDatasets.map((dataset) => (
84- <option key={dataset} value={dataset}>
85- {dataset}
86- </option>
87- ))}
88- </select>
87+ <div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
88+ <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
89+ <label htmlFor="dataset-select">Dataset:</label>
90+ <select
91+ id="dataset-select"
92+ value={selectedDataset}
93+ onChange={(e) => {
94+ if (e.target.value) {
95+ setSearchParams({ dataset: e.target.value });
96+ } else {
97+ setSearchParams(
98+ selectedAlgorithm ? { algorithm: selectedAlgorithm } : {},
99+ );
100+ }
101+ }}
102+ style={{
103+ padding: "8px",
104+ borderRadius: "4px",
105+ border: "1px solid #ccc",
106+ minWidth: "200px",
107+ backgroundColor: "#fff",
108+ }}
109+ >
110+ <option value="">All Datasets</option>
111+ {availableDatasets.map((dataset) => (
112+ <option key={dataset} value={dataset}>
113+ {dataset}
114+ </option>
115+ ))}
116+ </select>
117+ </div>
118+ <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
119+ <label htmlFor="algorithm-select">Algorithm:</label>
120+ <select
121+ id="algorithm-select"
122+ value={selectedAlgorithm}
123+ onChange={(e) => {
124+ if (e.target.value) {
125+ setSearchParams({ algorithm: e.target.value });
126+ } else {
127+ setSearchParams(
128+ selectedDataset ? { dataset: selectedDataset } : {},
129+ );
130+ }
131+ }}
132+ style={{
133+ padding: "8px",
134+ borderRadius: "4px",
135+ border: "1px solid #ccc",
136+ minWidth: "200px",
137+ backgroundColor: "#fff",
138+ }}
139+ >
140+ <option value="">All Algorithms</option>
141+ {availableAlgorithms.map((algorithm) => (
142+ <option key={algorithm} value={algorithm}>
143+ {algorithm}
144+ </option>
145+ ))}
146+ </select>
147+ </div>
89148 </div>
90149 <button
91- onClick={() => exportToCsv(filteredData, selectedDataset)}
150+ onClick={() =>
151+ exportToCsv(filteredData, selectedDataset || selectedAlgorithm)
152+ }
92153 style={{
93154 padding: "8px 16px",
94155 backgroundColor: "#4CAF50",
@@ -115,7 +176,7 @@ export function BenchmarkTable({ results }: BenchmarkTableProps) {
115176 </button>
116177 </div>
117178
118- {selectedDataset && chartData.length > 0 && (
179+ {(selectedDataset || selectedAlgorithm) && chartData.length > 0 && (
119180 <BenchmarkCharts chartData={chartData} />
120181 )}
121182
web-ui/src/pages/About.tsxadded+31−0View file
@@ -0,0 +1,31 @@
1+import React from "react";
2+
3+const About: React.FC = () => {
4+ return (
5+ <div style={{ maxWidth: "800px", margin: "0 auto" }}>
6+ <h1>About Zia</h1>
7+
8+ <p
9+ style={{ fontSize: "1.1rem", lineHeight: "1.6", marginBottom: "2rem" }}
10+ >
11+ Zia is a benchmarking framework for evaluating compression algorithms on
12+ integer array datasets, with a focus on scientific data. It measures
13+ compression ratios and performance metrics across various algorithms and
14+ datasets.
15+ </p>
16+
17+ <p>
18+ <a
19+ href="https://github.com/magland/zia"
20+ target="_blank"
21+ rel="noopener noreferrer"
22+ style={{ color: "#0066cc" }}
23+ >
24+ View on GitHub
25+ </a>
26+ </p>
27+ </div>
28+ );
29+};
30+
31+export default About;
web-ui/src/pages/Datasets.tsxmodified+11−1View file
@@ -1,4 +1,5 @@
11 import { Dataset } from "../types";
2+import { Link } from "react-router-dom";
23
34 interface DatasetsProps {
45 datasets: Dataset[];
@@ -68,7 +69,16 @@ function Datasets({ datasets }: DatasetsProps) {
6869 }}
6970 >
7071 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
71- {dataset.name}
72+ <Link
73+ to={`/home?dataset=${encodeURIComponent(dataset.name)}`}
74+ style={{
75+ color: "#0066cc",
76+ textDecoration: "none",
77+ fontWeight: "500",
78+ }}
79+ >
80+ {dataset.name}
81+ </Link>
7282 </td>
7383 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
7484 {dataset.version}