routing
6 changed files+296−166
web-ui/src/App.tsxmodified+71−17View file
@@ -1,27 +1,60 @@
11 import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
2+import { useEffect, useState } from "react";
3+import axios from "axios";
24 import Home from "./pages/Home";
35 import Datasets from "./pages/Datasets";
46 import Algorithms from "./pages/Algorithms";
7+import { BenchmarkData } from "./types";
58
69 function App() {
10+ const [benchmarkData, setBenchmarkData] = useState<BenchmarkData | null>(
11+ null,
12+ );
13+ const [isLoading, setIsLoading] = useState(true);
14+ const [error, setError] = useState<string | null>(null);
15+
16+ useEffect(() => {
17+ const fetchData = async () => {
18+ try {
19+ setIsLoading(true);
20+ setError(null);
21+ const response = await axios.get(
22+ "https://raw.githubusercontent.com/magland/zia/benchmark-results/benchmark_results/results.json",
23+ );
24+ setBenchmarkData(response.data);
25+ } catch (error) {
26+ const message =
27+ error instanceof Error ? error.message : "Failed to fetch data";
28+ setError(message);
29+ console.error("Error fetching benchmark data:", error);
30+ } finally {
31+ setIsLoading(false);
32+ }
33+ };
34+
35+ fetchData();
36+ }, []);
37+
738 return (
8- <BrowserRouter>
39+ <BrowserRouter basename="/zia">
940 <div style={{ padding: "2rem" }}>
1041 <nav style={{ marginBottom: "2rem" }}>
11- <ul style={{
12- listStyle: "none",
13- padding: 0,
14- margin: 0,
15- display: "flex",
16- gap: "1.5rem"
17- }}>
42+ <ul
43+ style={{
44+ listStyle: "none",
45+ padding: 0,
46+ margin: 0,
47+ display: "flex",
48+ gap: "1.5rem",
49+ }}
50+ >
1851 <li>
1952 <Link
20- to="/"
53+ to="/home"
2154 style={{
2255 color: "#0066cc",
2356 textDecoration: "none",
24- fontWeight: "500"
57+ fontWeight: "500",
2558 }}
2659 >
2760 Home
@@ -33,7 +66,7 @@ function App() {
3366 style={{
3467 color: "#0066cc",
3568 textDecoration: "none",
36- fontWeight: "500"
69+ fontWeight: "500",
3770 }}
3871 >
3972 Datasets
@@ -45,7 +78,7 @@ function App() {
4578 style={{
4679 color: "#0066cc",
4780 textDecoration: "none",
48- fontWeight: "500"
81+ fontWeight: "500",
4982 }}
5083 >
5184 Algorithms
@@ -54,11 +87,32 @@ function App() {
5487 </ul>
5588 </nav>
5689 <main>
57- <Routes>
58- <Route path="/" element={<Home />} />
59- <Route path="/datasets" element={<Datasets />} />
60- <Route path="/algorithms" element={<Algorithms />} />
61- </Routes>
90+ {isLoading ? (
91+ <div>Loading benchmark data...</div>
92+ ) : error ? (
93+ <div>Error: {error}</div>
94+ ) : (
95+ <Routes>
96+ <Route
97+ path="/home"
98+ element={<Home benchmarkData={benchmarkData} />}
99+ />
100+ <Route
101+ path="/"
102+ element={<Home benchmarkData={benchmarkData} />}
103+ />
104+ <Route
105+ path="/datasets"
106+ element={<Datasets datasets={benchmarkData?.datasets || []} />}
107+ />
108+ <Route
109+ path="/algorithms"
110+ element={
111+ <Algorithms algorithms={benchmarkData?.algorithms || []} />
112+ }
113+ />
114+ </Routes>
115+ )}
62116 </main>
63117 </div>
64118 </BrowserRouter>
web-ui/src/components/benchmark/table/BenchmarkTable.tsxmodified+25−51View file
@@ -1,5 +1,5 @@
1-import { useEffect, useState, useMemo } from "react";
2-import axios from "axios";
1+import { useMemo } from "react";
2+import { useSearchParams } from "react-router-dom";
33 import {
44 flexRender,
55 getCoreRowModel,
@@ -11,46 +11,22 @@ import { columns } from "./columns";
1111 import { BenchmarkCharts } from "../charts/BenchmarkCharts";
1212 import { exportToCsv } from "../export/csvExport";
1313
14-export 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);
20-
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(
33- new Set(results.map((result: BenchmarkResult) => result.dataset)),
34- ).sort() as string[];
35- setAvailableDatasets(datasets);
36- } catch (error) {
37- const message =
38- error instanceof Error ? error.message : "Failed to fetch data";
39- setError(message);
40- console.error("Error fetching benchmark data:", error);
41- } finally {
42- setIsLoading(false);
43- }
44- };
14+interface BenchmarkTableProps {
15+ results: BenchmarkResult[];
16+}
4517
46- fetchData();
47- }, []);
18+export function BenchmarkTable({ results }: BenchmarkTableProps) {
19+ const [searchParams, setSearchParams] = useSearchParams();
20+ const selectedDataset = searchParams.get("dataset") || "";
21+ const availableDatasets = useMemo(() => {
22+ return Array.from(new Set(results.map((result) => result.dataset))).sort();
23+ }, [results]);
4824
4925 // Memoize filtered data to prevent unnecessary recalculations
5026 const filteredData = useMemo(() => {
51- if (!selectedDataset) return data;
52- return data.filter((row) => row.dataset === selectedDataset);
53- }, [data, selectedDataset]);
27+ if (!selectedDataset) return results;
28+ return results.filter((row) => row.dataset === selectedDataset);
29+ }, [results, selectedDataset]);
5430
5531 const table = useReactTable({
5632 data: filteredData || [],
@@ -62,23 +38,15 @@ export function BenchmarkTable() {
6238 // Prepare data for bar charts when a dataset is selected
6339 const chartData = useMemo(() => {
6440 if (!selectedDataset) return [];
65- return data
66- .filter((row) => row.dataset === selectedDataset)
67- .map((row) => ({
41+ return results
42+ .filter((row: BenchmarkResult) => row.dataset === selectedDataset)
43+ .map((row: BenchmarkResult) => ({
6844 algorithm: row.algorithm,
6945 compression_ratio: row.compression_ratio,
7046 encode_speed: row.encode_mb_per_sec,
7147 decode_speed: row.decode_mb_per_sec,
7248 }));
73- }, [data, selectedDataset]);
74-
75- if (isLoading) {
76- return <div>Loading benchmark data...</div>;
77- }
78-
79- if (error) {
80- return <div>Error: {error}</div>;
81- }
49+ }, [results, selectedDataset]);
8250
8351 return (
8452 <div className="table-container">
@@ -96,7 +64,13 @@ export function BenchmarkTable() {
9664 <select
9765 id="dataset-select"
9866 value={selectedDataset}
99- onChange={(e) => setSelectedDataset(e.target.value)}
67+ onChange={(e) => {
68+ if (e.target.value) {
69+ setSearchParams({ dataset: e.target.value });
70+ } else {
71+ setSearchParams({});
72+ }
73+ }}
10074 style={{
10175 padding: "8px",
10276 borderRadius: "4px",
web-ui/src/pages/Algorithms.tsxmodified+87−44View file
@@ -1,4 +1,10 @@
1-function Algorithms() {
1+import { Algorithm } from "../types";
2+
3+interface AlgorithmsProps {
4+ algorithms: Algorithm[];
5+}
6+
7+function Algorithms({ algorithms }: AlgorithmsProps) {
28 return (
39 <div>
410 <h1
@@ -11,49 +17,86 @@ function Algorithms() {
1117 >
1218 Compression Algorithms
1319 </h1>
14- <div className="algorithms">
15- <section style={{ marginBottom: "2rem" }}>
16- <h2 style={{ fontSize: "1.5rem", color: "#444", marginBottom: "1rem" }}>
17- Zlib
18- </h2>
19- <p style={{ color: "#666", marginBottom: "1rem" }}>
20- [Algorithm description will be loaded from results.json]
21- </p>
22- <div style={{ color: "#666", marginLeft: "1rem" }}>
23- <div>• zlib-1 (fastest)</div>
24- <div>• zlib-3</div>
25- <div>• zlib-5</div>
26- <div>• zlib-7</div>
27- <div>• zlib-9 (best compression)</div>
28- </div>
29- </section>
30-
31- <section style={{ marginBottom: "2rem" }}>
32- <h2 style={{ fontSize: "1.5rem", color: "#444", marginBottom: "1rem" }}>
33- Zstandard (zstd)
34- </h2>
35- <p style={{ color: "#666", marginBottom: "1rem" }}>
36- [Algorithm description will be loaded from results.json]
37- </p>
38- <div style={{ color: "#666", marginLeft: "1rem" }}>
39- <div>• zstd-4 (faster)</div>
40- <div>• zstd-7</div>
41- <div>• zstd-10</div>
42- <div>• zstd-13</div>
43- <div>• zstd-16</div>
44- <div>• zstd-19</div>
45- <div>• zstd-22 (better compression)</div>
46- </div>
47- </section>
48-
49- <section style={{ marginBottom: "2rem" }}>
50- <h2 style={{ fontSize: "1.5rem", color: "#444", marginBottom: "1rem" }}>
51- Simple ANS
52- </h2>
53- <p style={{ color: "#666", marginBottom: "1rem" }}>
54- [Algorithm description will be loaded from results.json]
55- </p>
56- </section>
20+ <div style={{ overflowX: "auto" }}>
21+ <table style={{ width: "100%", borderCollapse: "collapse" }}>
22+ <thead>
23+ <tr style={{ backgroundColor: "#f5f5f5" }}>
24+ <th
25+ style={{
26+ padding: "12px",
27+ textAlign: "left",
28+ borderBottom: "2px solid #ddd",
29+ }}
30+ >
31+ Name
32+ </th>
33+ <th
34+ style={{
35+ padding: "12px",
36+ textAlign: "left",
37+ borderBottom: "2px solid #ddd",
38+ }}
39+ >
40+ Version
41+ </th>
42+ <th
43+ style={{
44+ padding: "12px",
45+ textAlign: "left",
46+ borderBottom: "2px solid #ddd",
47+ }}
48+ >
49+ Description
50+ </th>
51+ <th
52+ style={{
53+ padding: "12px",
54+ textAlign: "left",
55+ borderBottom: "2px solid #ddd",
56+ }}
57+ >
58+ Tags
59+ </th>
60+ </tr>
61+ </thead>
62+ <tbody>
63+ {algorithms.map((algorithm, index) => (
64+ <tr
65+ key={`${algorithm.name}-${algorithm.version}`}
66+ style={{
67+ backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
68+ }}
69+ >
70+ <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
71+ {algorithm.name}
72+ </td>
73+ <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
74+ {algorithm.version}
75+ </td>
76+ <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
77+ {algorithm.description}
78+ </td>
79+ <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
80+ {algorithm.tags.map((tag) => (
81+ <span
82+ key={tag}
83+ style={{
84+ display: "inline-block",
85+ backgroundColor: "#e1e1e1",
86+ padding: "4px 8px",
87+ borderRadius: "4px",
88+ margin: "2px",
89+ fontSize: "0.9em",
90+ }}
91+ >
92+ {tag}
93+ </span>
94+ ))}
95+ </td>
96+ </tr>
97+ ))}
98+ </tbody>
99+ </table>
57100 </div>
58101 </div>
59102 );
web-ui/src/pages/Datasets.tsxmodified+87−33View file
@@ -1,4 +1,10 @@
1-function Datasets() {
1+import { Dataset } from "../types";
2+
3+interface DatasetsProps {
4+ datasets: Dataset[];
5+}
6+
7+function Datasets({ datasets }: DatasetsProps) {
28 return (
39 <div>
410 <h1
@@ -11,38 +17,86 @@ function Datasets() {
1117 >
1218 Benchmark Datasets
1319 </h1>
14- <div className="dataset-types">
15- <section style={{ marginBottom: "2rem" }}>
16- <h2 style={{ fontSize: "1.5rem", color: "#444", marginBottom: "1rem" }}>
17- Bernoulli Datasets
18- </h2>
19- <p style={{ color: "#666", marginBottom: "1rem" }}>
20- [Dataset description will be loaded from results.json]
21- </p>
22- <div style={{ color: "#666", marginLeft: "1rem" }}>
23- <div>• bernoulli-0.1</div>
24- <div>• bernoulli-0.2</div>
25- <div>• bernoulli-0.3</div>
26- <div>• bernoulli-0.4</div>
27- <div>• bernoulli-0.5</div>
28- </div>
29- </section>
30-
31- <section style={{ marginBottom: "2rem" }}>
32- <h2 style={{ fontSize: "1.5rem", color: "#444", marginBottom: "1rem" }}>
33- Gaussian Datasets
34- </h2>
35- <p style={{ color: "#666", marginBottom: "1rem" }}>
36- [Dataset description will be loaded from results.json]
37- </p>
38- <div style={{ color: "#666", marginLeft: "1rem" }}>
39- <div>• gaussian-1</div>
40- <div>• gaussian-2</div>
41- <div>• gaussian-3</div>
42- <div>• gaussian-5</div>
43- <div>• gaussian-8</div>
44- </div>
45- </section>
20+ <div style={{ overflowX: "auto" }}>
21+ <table style={{ width: "100%", borderCollapse: "collapse" }}>
22+ <thead>
23+ <tr style={{ backgroundColor: "#f5f5f5" }}>
24+ <th
25+ style={{
26+ padding: "12px",
27+ textAlign: "left",
28+ borderBottom: "2px solid #ddd",
29+ }}
30+ >
31+ Name
32+ </th>
33+ <th
34+ style={{
35+ padding: "12px",
36+ textAlign: "left",
37+ borderBottom: "2px solid #ddd",
38+ }}
39+ >
40+ Version
41+ </th>
42+ <th
43+ style={{
44+ padding: "12px",
45+ textAlign: "left",
46+ borderBottom: "2px solid #ddd",
47+ }}
48+ >
49+ Description
50+ </th>
51+ <th
52+ style={{
53+ padding: "12px",
54+ textAlign: "left",
55+ borderBottom: "2px solid #ddd",
56+ }}
57+ >
58+ Tags
59+ </th>
60+ </tr>
61+ </thead>
62+ <tbody>
63+ {datasets.map((dataset, index) => (
64+ <tr
65+ key={`${dataset.name}-${dataset.version}`}
66+ style={{
67+ backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
68+ }}
69+ >
70+ <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
71+ {dataset.name}
72+ </td>
73+ <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
74+ {dataset.version}
75+ </td>
76+ <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
77+ {dataset.description}
78+ </td>
79+ <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
80+ {dataset.tags.map((tag) => (
81+ <span
82+ key={tag}
83+ style={{
84+ display: "inline-block",
85+ backgroundColor: "#e1e1e1",
86+ padding: "4px 8px",
87+ borderRadius: "4px",
88+ margin: "2px",
89+ fontSize: "0.9em",
90+ }}
91+ >
92+ {tag}
93+ </span>
94+ ))}
95+ </td>
96+ </tr>
97+ ))}
98+ </tbody>
99+ </table>
46100 </div>
47101 </div>
48102 );
web-ui/src/pages/Home.tsxmodified+8−3View file
@@ -1,6 +1,11 @@
1-import { BenchmarkTable } from "../components/BenchmarkTable";
1+import { BenchmarkTable } from "../components/benchmark/table/BenchmarkTable";
2+import { BenchmarkData } from "../types";
23
3-function Home() {
4+interface HomeProps {
5+ benchmarkData: BenchmarkData | null;
6+}
7+
8+function Home({ benchmarkData }: HomeProps) {
49 return (
510 <div>
611 <header style={{ marginBottom: "2rem" }}>
@@ -37,7 +42,7 @@ function Home() {
3742 </a>
3843 </header>
3944 <main>
40- <BenchmarkTable />
45+ {benchmarkData && <BenchmarkTable results={benchmarkData.results} />}
4146 </main>
4247 </div>
4348 );
zia_benchmark/src/zia_benchmark/run_benchmarks.pymodified+18−18View file
@@ -247,24 +247,24 @@ def run_benchmarks(
247247 # Collect algorithm and dataset information as lists
248248 algorithm_info = []
249249 for algorithm in algorithms:
250- algorithm_info.append({
251- "name": algorithm["name"],
252- "description": algorithm.get("description", ""),
253- "version": algorithm["version"],
254- "tags": algorithm.get("tags", [])
255- })
250+ algorithm_info.append(
251+ {
252+ "name": algorithm["name"],
253+ "description": algorithm.get("description", ""),
254+ "version": algorithm["version"],
255+ "tags": algorithm.get("tags", []),
256+ }
257+ )
256258
257259 dataset_info = []
258260 for dataset in datasets:
259- dataset_info.append({
260- "name": dataset["name"],
261- "description": dataset.get("description", ""),
262- "version": dataset["version"],
263- "tags": dataset.get("tags", [])
264- })
265-
266- return {
267- "results": results,
268- "algorithms": algorithm_info,
269- "datasets": dataset_info
270- }
261+ dataset_info.append(
262+ {
263+ "name": dataset["name"],
264+ "description": dataset.get("description", ""),
265+ "version": dataset["version"],
266+ "tags": dataset.get("tags", []),
267+ }
268+ )
269+
270+ return {"results": results, "algorithms": algorithm_info, "datasets": dataset_info}