2import { useState } from "react";
4interface ChartData {
5 algorithmOrDataset: string;
6 compression_ratio: number;
7 encode_speed: number;
8 decode_speed: number;
12interface BenchmarkScatterPlotsProps {
13 chartData: ChartData[];
14}
16export function BenchmarkScatterPlots({
17 chartData,
18}: BenchmarkScatterPlotsProps) {
19 const [showLabels, setShowLabels] = useState(false);
552a4baadd web-uiJeremy Magland 21
22 if (!chartData.length) return null;
25 const filteredData = showLossyAlgs
26 ? chartData
27 : chartData.filter((d) => !d.tags.includes("lossy"));
33 const colors = [
34 "#1f77b4", // blue
35 "#ff7f0e", // orange
36 "#2ca02c", // green
37 "#d62728", // red
38 "#9467bd", // purple
39 "#8c564b", // brown
40 "#e377c2", // pink
41 "#7f7f7f", // gray
42 ];
44 const markers = ["circle", "square", "diamond", "triangle-up", "star"];
46 // Create traces for each algorithm
47 const traces = uniqueAlgorithms.flatMap((algo, i) => {
5be77d1dev lossyJeremy Magland 48 const algoData = filteredData.filter((d) => d.algorithmOrDataset === algo);
49 const isLossy = algoData.length > 0 && algoData[0].tags.includes("lossy");
50 const displayName = isLossy ? `${algo}*` : algo;
552a4baadd web-uiJeremy Magland 53 mode: showLabels ? ("markers+text" as const) : ("markers" as const),
54 marker: {
57 size: 10,
58 },
63 legendgroup: algo,
64 };
66 return [
67 // Compression Ratio vs Decode Speed (upper left)
68 {
69 ...baseTrace,
70 x: algoData.map((d) => d.compression_ratio),
71 y: algoData.map((d) => d.decode_speed),
72 xaxis: "x" as const,
73 yaxis: "y" as const,
74 showlegend: true,
75 },
76 // Compression Ratio vs Encode Speed (lower left)
77 {
78 ...baseTrace,
79 x: algoData.map((d) => d.compression_ratio),
80 y: algoData.map((d) => d.encode_speed),
81 xaxis: "x2" as const,
82 yaxis: "y2" as const,
83 showlegend: false,
84 },
85 // Decode Speed vs Encode Speed (lower right)
86 {
87 ...baseTrace,
88 x: algoData.map((d) => d.decode_speed),
89 y: algoData.map((d) => d.encode_speed),
90 xaxis: "x3" as const,
91 yaxis: "y3" as const,
92 showlegend: false,
93 },
94 ];
95 });
97 return (
98 <div style={{ margin: "20px 0" }}>
99 <div style={{ marginBottom: "10px" }}>
100 <h2 style={{ marginBottom: "10px" }}>Performance Relationships</h2>
102 <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
103 <input
104 type="checkbox"
105 checked={showLabels}
106 onChange={(e) => setShowLabels(e.target.checked)}
107 />
108 Show point labels
109 </label>
110 <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
111 <input
112 type="checkbox"
113 checked={showLossyAlgs}
114 onChange={(e) => setShowLossyAlgs(e.target.checked)}
115 />
116 Show lossy algs
117 </label>
118 </div>
120 <Plot
121 data={traces}
122 layout={{
123 width: 1000,
124 height: 670,
125 grid: {
126 rows: 2,
127 columns: 2,
128 pattern: "independent",
129 },
130 xaxis: {
131 title: "Compression Ratio",
132 domain: [0, 0.45],
133 },
134 yaxis: {
135 title: "Decode Speed (MB/s)",
136 domain: [0.55, 1],
137 },
138 xaxis2: {
139 title: "Compression Ratio",
140 domain: [0, 0.45],
141 },
142 yaxis2: {
143 title: "Encode Speed (MB/s)",
144 domain: [0, 0.45],
145 },
146 xaxis3: {
147 title: "Decode Speed (MB/s)",
148 domain: [0.55, 1],
149 },
150 yaxis3: {
151 title: "Encode Speed (MB/s)",
152 domain: [0, 0.45],
153 },
154 showlegend: true,
155 legend: {
156 x: 1.08,
157 y: 1,
158 xanchor: "left" as const,
159 yanchor: "top" as const,
160 },
161 margin: {
162 l: 60,
163 r: 40,
164 t: 20,
165 b: 60,
166 },
167 }}
168 config={{
169 displayModeBar: true,
170 displaylogo: false,
171 modeBarButtonsToRemove: [
172 "lasso2d",
173 "select2d",
174 "hoverClosestCartesian",
175 "hoverCompareCartesian",
176 ],
177 }}
178 />
179 </div>
180 );
181}