point labels
1 changed file+17−2
web-ui/src/components/benchmark/charts/BenchmarkScatterPlots.tsxmodified+17−2View file
@@ -1,4 +1,5 @@
11 import Plot from "react-plotly.js";
2+import { useState } from "react";
23
34 interface ChartData {
45 algorithmOrDataset: string;
@@ -14,6 +15,8 @@ interface BenchmarkScatterPlotsProps {
1415 export function BenchmarkScatterPlots({
1516 chartData,
1617 }: BenchmarkScatterPlotsProps) {
18+ const [showLabels, setShowLabels] = useState(false);
19+
1720 if (!chartData.length) return null;
1821
1922 const uniqueAlgorithms = Array.from(
@@ -38,12 +41,14 @@ export function BenchmarkScatterPlots({
3841 const algoData = chartData.filter((d) => d.algorithmOrDataset === algo);
3942 const baseTrace = {
4043 name: algo,
41- mode: "markers" as const,
44+ mode: showLabels ? ("markers+text" as const) : ("markers" as const),
4245 marker: {
4346 color: colors[i % colors.length],
4447 symbol: markers[Math.floor(i / colors.length) % markers.length],
4548 size: 10,
4649 },
50+ text: showLabels ? algoData.map(() => algo) : [],
51+ textposition: "top center" as const,
4752 showlegend: true,
4853 legendgroup: algo,
4954 };
@@ -81,7 +86,17 @@ export function BenchmarkScatterPlots({
8186
8287 return (
8388 <div style={{ margin: "20px 0" }}>
84- <h2 style={{ marginBottom: "10px" }}>Performance Relationships</h2>
89+ <div style={{ marginBottom: "10px" }}>
90+ <h2 style={{ marginBottom: "10px" }}>Performance Relationships</h2>
91+ <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
92+ <input
93+ type="checkbox"
94+ checked={showLabels}
95+ onChange={(e) => setShowLabels(e.target.checked)}
96+ />
97+ Show point labels
98+ </label>
99+ </div>
85100 <Plot
86101 data={traces}
87102 layout={{