normalize to best compression
3 changed files+48−10
web-ui/src/components/algorithm/AlgorithmContent.tsxmodified+1−0View file
@@ -27,6 +27,7 @@ export const AlgorithmContent = ({
2727 tagNavigationPrefix="/algorithms"
2828 filterKey="algorithm"
2929 showSortByCompressionRatio={false}
30+ showNormalizeByReference={true}
3031 />
3132 );
3233 };
web-ui/src/components/benchmark/charts/BenchmarkCharts.tsxmodified+44−10View file
@@ -10,6 +10,7 @@ interface BenchmarkBarChartProps {
1010 >;
1111 color: string;
1212 xAxisTitle: string;
13+ normalize?: boolean;
1314 }
1415
1516 function BenchmarkBarChart({
@@ -18,7 +19,19 @@ function BenchmarkBarChart({
1819 dataKey,
1920 color,
2021 xAxisTitle,
22+ normalize,
2123 }: BenchmarkBarChartProps) {
24+ const normalizedData =
25+ normalize && dataKey === "compression_ratio"
26+ ? data.map((d) => ({
27+ ...d,
28+ compression_ratio: d.reference_compression_ratio
29+ ? d.compression_ratio / d.reference_compression_ratio
30+ : d.compression_ratio,
31+ reference_compression_ratio: d.reference_compression_ratio ? 1 : null,
32+ }))
33+ : data;
34+
2235 return (
2336 <div style={{ margin: "0 20px 20px 0" }}>
2437 <h3 style={{ marginBottom: "10px" }}>{title}</h3>
@@ -27,15 +40,19 @@ function BenchmarkBarChart({
2740 {
2841 type: "bar",
2942 orientation: "h",
30- y: data.map((d) => d.algorithmOrDataset),
31- x: data.map((d) => d[dataKey]),
43+ y: normalizedData.map((d) => d.algorithmOrDataset),
44+ x: normalizedData.map((d) => d[dataKey]),
3245 marker: { color },
3346 name: title,
47+ hovertemplate:
48+ normalize && dataKey === "compression_ratio"
49+ ? "%{x:.3f}×<extra></extra>"
50+ : "%{x:.2f}<extra></extra>",
3451 },
3552 ...(dataKey === "compression_ratio" &&
36- data.some((d) => d.reference_compression_ratio !== null)
53+ normalizedData.some((d) => d.reference_compression_ratio !== null)
3754 ? [
38- ...data
55+ ...normalizedData
3956 .filter((d) => d.reference_compression_ratio !== null)
4057 .flatMap((d) => [
4158 {
@@ -43,7 +60,7 @@ function BenchmarkBarChart({
4360 mode: "lines" as const,
4461 y: [d.algorithmOrDataset, d.algorithmOrDataset],
4562 x: [0, d.reference_compression_ratio],
46- line: { color: "#aaaaaa", width: 1 },
63+ line: { color, width: 1 },
4764 showlegend: false,
4865 hoverinfo: "skip" as const,
4966 },
@@ -54,9 +71,12 @@ function BenchmarkBarChart({
5471 x: [d.reference_compression_ratio],
5572 marker: { color: "#aaaaaa", size: 8 },
5673 name: "Best Compression",
57- hovertemplate: "Best: %{x:.2f}<extra></extra>",
74+ hovertemplate: normalize
75+ ? "Best: 1.000×<extra></extra>"
76+ : "Best: %{x:.2f}<extra></extra>",
5877 showlegend:
59- d.algorithmOrDataset === data[0].algorithmOrDataset, // Only show legend for first point
78+ d.algorithmOrDataset ===
79+ normalizedData[0].algorithmOrDataset,
6080 },
6181 ]),
6282 ]
@@ -87,17 +107,18 @@ interface ChartData {
87107 interface BenchmarkChartsProps {
88108 chartData: ChartData[];
89109 showSortByCompressionRatio?: boolean;
110+ showNormalizeByReference?: boolean;
90111 }
91112
92113 export function BenchmarkCharts({
93114 chartData,
94115 showSortByCompressionRatio,
116+ showNormalizeByReference,
95117 }: BenchmarkChartsProps) {
96118 const [sortByRatio, setSortByRatio] = useState(
97119 showSortByCompressionRatio ? true : false,
98120 );
99-
100- console.log("--- showSortByCompressionRatio", showSortByCompressionRatio);
121+ const [normalize, setNormalize] = useState(false);
101122
102123 if (!chartData.length) return null;
103124
@@ -119,6 +140,18 @@ export function BenchmarkCharts({
119140 </label>
120141 </div>
121142 )}
143+ {showNormalizeByReference && (
144+ <div style={{ marginBottom: "10px" }}>
145+ <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
146+ <input
147+ type="checkbox"
148+ checked={normalize}
149+ onChange={(e) => setNormalize(e.target.checked)}
150+ />
151+ Normalize to best compression
152+ </label>
153+ </div>
154+ )}
122155 <div
123156 style={{
124157 display: "flex",
@@ -131,7 +164,8 @@ export function BenchmarkCharts({
131164 data={sortedData}
132165 dataKey="compression_ratio"
133166 color="#8884d8"
134- xAxisTitle="Ratio"
167+ xAxisTitle={normalize ? "Fraction of Best Compression" : "Ratio"}
168+ normalize={normalize}
135169 />
136170 <BenchmarkBarChart
137171 title="Encode Speed (MB/s)"
web-ui/src/components/shared/BaseContent.tsxmodified+3−0View file
@@ -32,6 +32,7 @@ interface BaseContentProps {
3232 downloadSection?: React.ReactNode;
3333 additionalContent?: React.ReactNode;
3434 showSortByCompressionRatio?: boolean;
35+ showNormalizeByReference?: boolean;
3536 }
3637
3738 export const BaseContent = ({
@@ -43,6 +44,7 @@ export const BaseContent = ({
4344 downloadSection,
4445 additionalContent,
4546 showSortByCompressionRatio,
47+ showNormalizeByReference,
4648 }: BaseContentProps) => {
4749 const navigate = useNavigate();
4850 const [isExpanded, setIsExpanded] = useState(false);
@@ -114,6 +116,7 @@ export const BaseContent = ({
114116 <BenchmarkCharts
115117 chartData={chartData}
116118 showSortByCompressionRatio={showSortByCompressionRatio}
119+ showNormalizeByReference={showNormalizeByReference}
117120 />
118121 </div>
119122 <div className="benchmark-section">