benchmark scatter plots
2 changed files+150−0
web-ui/src/components/benchmark/charts/BenchmarkScatterPlots.tsxadded+146−0View file
@@ -0,0 +1,146 @@
1+import Plot from "react-plotly.js";
2+
3+interface ChartData {
4+ algorithmOrDataset: string;
5+ compression_ratio: number;
6+ encode_speed: number;
7+ decode_speed: number;
8+}
9+
10+interface BenchmarkScatterPlotsProps {
11+ chartData: ChartData[];
12+}
13+
14+export function BenchmarkScatterPlots({
15+ chartData,
16+}: BenchmarkScatterPlotsProps) {
17+ if (!chartData.length) return null;
18+
19+ const uniqueAlgorithms = Array.from(
20+ new Set(chartData.map((d) => d.algorithmOrDataset)),
21+ );
22+
23+ const colors = [
24+ "#1f77b4", // blue
25+ "#ff7f0e", // orange
26+ "#2ca02c", // green
27+ "#d62728", // red
28+ "#9467bd", // purple
29+ "#8c564b", // brown
30+ "#e377c2", // pink
31+ "#7f7f7f", // gray
32+ ];
33+
34+ const markers = ["circle", "square", "diamond", "triangle-up", "star"];
35+
36+ // Create traces for each algorithm
37+ const traces = uniqueAlgorithms.flatMap((algo, i) => {
38+ const algoData = chartData.filter((d) => d.algorithmOrDataset === algo);
39+ const baseTrace = {
40+ name: algo,
41+ mode: "markers" as const,
42+ marker: {
43+ color: colors[i % colors.length],
44+ symbol: markers[Math.floor(i / colors.length) % markers.length],
45+ size: 10,
46+ },
47+ showlegend: true,
48+ legendgroup: algo,
49+ };
50+
51+ return [
52+ // Compression Ratio vs Decode Speed (upper left)
53+ {
54+ ...baseTrace,
55+ x: algoData.map((d) => d.compression_ratio),
56+ y: algoData.map((d) => d.decode_speed),
57+ xaxis: "x" as const,
58+ yaxis: "y" as const,
59+ showlegend: true,
60+ },
61+ // Compression Ratio vs Encode Speed (lower left)
62+ {
63+ ...baseTrace,
64+ x: algoData.map((d) => d.compression_ratio),
65+ y: algoData.map((d) => d.encode_speed),
66+ xaxis: "x2" as const,
67+ yaxis: "y2" as const,
68+ showlegend: false,
69+ },
70+ // Decode Speed vs Encode Speed (lower right)
71+ {
72+ ...baseTrace,
73+ x: algoData.map((d) => d.decode_speed),
74+ y: algoData.map((d) => d.encode_speed),
75+ xaxis: "x3" as const,
76+ yaxis: "y3" as const,
77+ showlegend: false,
78+ },
79+ ];
80+ });
81+
82+ return (
83+ <div style={{ margin: "20px 0" }}>
84+ <h2 style={{ marginBottom: "10px" }}>Performance Relationships</h2>
85+ <Plot
86+ data={traces}
87+ layout={{
88+ width: 900,
89+ height: 600,
90+ grid: {
91+ rows: 2,
92+ columns: 2,
93+ pattern: "independent",
94+ },
95+ xaxis: {
96+ title: "Compression Ratio",
97+ domain: [0, 0.45],
98+ },
99+ yaxis: {
100+ title: "Decode Speed (MB/s)",
101+ domain: [0.55, 1],
102+ },
103+ xaxis2: {
104+ title: "Compression Ratio",
105+ domain: [0, 0.45],
106+ },
107+ yaxis2: {
108+ title: "Encode Speed (MB/s)",
109+ domain: [0, 0.45],
110+ },
111+ xaxis3: {
112+ title: "Decode Speed (MB/s)",
113+ domain: [0.55, 1],
114+ },
115+ yaxis3: {
116+ title: "Encode Speed (MB/s)",
117+ domain: [0, 0.45],
118+ },
119+ showlegend: true,
120+ legend: {
121+ x: 1,
122+ y: 1,
123+ xanchor: "right" as const,
124+ yanchor: "top" as const,
125+ },
126+ margin: {
127+ l: 60,
128+ r: 20,
129+ t: 20,
130+ b: 60,
131+ },
132+ }}
133+ config={{
134+ displayModeBar: true,
135+ displaylogo: false,
136+ modeBarButtonsToRemove: [
137+ "lasso2d",
138+ "select2d",
139+ "hoverClosestCartesian",
140+ "hoverCompareCartesian",
141+ ],
142+ }}
143+ />
144+ </div>
145+ );
146+}
web-ui/src/components/shared/BaseContent.tsxmodified+4−0View file
@@ -5,6 +5,7 @@ import remarkMath from "remark-math";
55 import rehypeKatex from "rehype-katex";
66 import { BenchmarkData } from "../../types";
77 import { BenchmarkCharts } from "../benchmark/charts/BenchmarkCharts";
8+import { BenchmarkScatterPlots } from "../benchmark/charts/BenchmarkScatterPlots";
89 import { BenchmarkTable } from "../benchmark/table/BenchmarkTable";
910 import "./ContentStyles.css";
1011
@@ -118,6 +119,9 @@ export const BaseContent = ({
118119 showSortByCompressionRatio={showSortByCompressionRatio}
119120 showNormalizeByReference={showNormalizeByReference}
120121 />
122+ {filterKey === "dataset" && (
123+ <BenchmarkScatterPlots chartData={chartData} />
124+ )}
121125 </div>
122126 <div className="benchmark-section">
123127 <BenchmarkTable