error metric
2 changed files+32−10
web-ui/src/components/benchmark/charts/BenchmarkCharts.tsxmodified+30−10View file
@@ -6,7 +6,7 @@ interface BenchmarkBarChartProps {
66 data: ChartData[];
77 dataKey: keyof Pick<
88 ChartData,
9- "compression_ratio" | "encode_speed" | "decode_speed" | "rmse"
9+ "compression_ratio" | "encode_speed" | "decode_speed" | "rmse" | "max_error"
1010 >;
1111 color: string;
1212 xAxisTitle: string;
@@ -116,6 +116,7 @@ interface ChartData {
116116 encode_speed: number;
117117 decode_speed: number;
118118 rmse?: number;
119+ max_error?: number;
119120 tags: string[];
120121 }
121122
@@ -135,6 +136,7 @@ export function BenchmarkCharts({
135136 );
136137 const [normalize, setNormalize] = useState(false);
137138 const [showLossyAlgs, setShowLossyAlgs] = useState(true);
139+ const [errorMetric, setErrorMetric] = useState<"rmse" | "max_error">("rmse");
138140
139141 if (!chartData.length) return null;
140142
@@ -149,8 +151,11 @@ export function BenchmarkCharts({
149151 ? [...filteredData].sort((a, b) => a.compression_ratio - b.compression_ratio)
150152 : filteredData;
151153
152- // For RMSE chart, only show lossy algorithms with rmse values
153- const lossyData = chartData.filter((d) => d.tags.includes("lossy") && d.rmse !== undefined);
154+ // For Error chart, only show lossy algorithms with error values
155+ const lossyData = chartData.filter(
156+ (d) => d.tags.includes("lossy") &&
157+ (errorMetric === "rmse" ? d.rmse !== undefined : d.max_error !== undefined)
158+ );
154159 const sortedLossyData = sortByRatio
155160 ? [...lossyData].sort((a, b) => a.compression_ratio - b.compression_ratio)
156161 : lossyData;
@@ -219,13 +224,28 @@ export function BenchmarkCharts({
219224 xAxisTitle="MB/s"
220225 />
221226 {sortedLossyData.length > 0 && (
222- <BenchmarkBarChart
223- title="RMSE (Lossy Algs)"
224- data={sortedLossyData}
225- dataKey="rmse"
226- color="#d62728"
227- xAxisTitle="RMSE"
228- />
227+ <div>
228+ <div style={{ marginBottom: "10px" }}>
229+ <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
230+ Error Metric:
231+ <select
232+ value={errorMetric}
233+ onChange={(e) => setErrorMetric(e.target.value as "rmse" | "max_error")}
234+ style={{ marginLeft: "8px", padding: "4px 8px" }}
235+ >
236+ <option value="rmse">RMSE</option>
237+ <option value="max_error">Maximum</option>
238+ </select>
239+ </label>
240+ </div>
241+ <BenchmarkBarChart
242+ title="Error (Lossy Algs)"
243+ data={sortedLossyData}
244+ dataKey={errorMetric}
245+ color="#d62728"
246+ xAxisTitle={errorMetric === "rmse" ? "RMSE" : "Maximum Error"}
247+ />
248+ </div>
229249 )}
230250 </div>
231251 </div>
web-ui/src/hooks/useBenchmarkChartData.tsmodified+2−0View file
@@ -20,6 +20,7 @@ export function useBenchmarkChartData(
2020 encode_speed: row.encode_mb_per_sec,
2121 decode_speed: row.decode_mb_per_sec,
2222 rmse: row.rmse,
23+ max_error: row.max_error,
2324 tags: algorithm?.tags || [],
2425 };
2526 });
@@ -37,6 +38,7 @@ export function useBenchmarkChartData(
3738 encode_speed: row.encode_mb_per_sec,
3839 decode_speed: row.decode_mb_per_sec,
3940 rmse: row.rmse,
41+ max_error: row.max_error,
4042 tags: [],
4143 }));
4244 }