(otava-playground) 01/01: Draw change-point lines for each algorithm at the same index

[as...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

Gerrrr pushed a commit to branch draw-line-per-algorithm
in repository https://gitbox.apache.org/repos/asf/otava-playground.git

commit f5fb8d419d53e0c5cc4e3529dcdb0b3d79af2d5c
Author: Alex Sorokoumov <al...@gmail.com>
AuthorDate: Tue Jun 2 09:33:40 2026 -0700

    Draw change-point lines for each algorithm at the same index
    
    When multiple algorithms detect a change point at the same index, draw
    each algorithm's line slightly offset from the index so all are visible
    instead of stacking on top of one another.
---
 src/otava_test_data/web/static/js/app.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/otava_test_data/web/static/js/app.js b/src/otava_test_data/web/static/js/app.js
index 134b241..f11b691 100644
--- a/src/otava_test_data/web/static/js/app.js
+++ b/src/otava_test_data/web/static/js/app.js
@@ -2561,17 +2561,27 @@ function renderDatasetChart(series, resultsByAlgo) {
 
     const labels = series.map((_, i) => i);
     const annotations = {};
+    // Group detections by index so overlapping algos fan out instead of stacking.
+    const byIndex = new Map();
     for (const [algo, info] of Object.entries(resultsByAlgo || {})) {
-        const color = ALGO_COLORS[algo] || '#888';
         for (const idx of (info.indices || [])) {
+            if (!byIndex.has(idx)) byIndex.set(idx, []);
+            byIndex.get(idx).push(algo);
+        }
+    }
+    const fanStep = 0.4;
+    for (const [idx, algos] of byIndex) {
+        const n = algos.length;
+        algos.forEach((algo, i) => {
+            const x = n === 1 ? idx : idx + (i - (n - 1) / 2) * fanStep;
             annotations[`${algo}-${idx}`] = {
                 type: 'line',
-                xMin: idx, xMax: idx,
-                borderColor: color,
+                xMin: x, xMax: x,
+                borderColor: ALGO_COLORS[algo] || '#888',
                 borderWidth: 2,
                 borderDash: [4, 4],
             };
-        }
+        });
     }
 
     const chart = new Chart(canvas.getContext('2d'), {