Draw version boundary lines on timeline when suite_version changes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: mattip

codespeed/static/js/timeline.js

@@ -84,13 +84,14 @@ function buildGraphData(branches, median, equidistant) {
                 var mid = pt[1];
                 var low, high, commit, tag;
 
+                var suite_version;
                 if (median) {
-                    // pt: [date, median, max, q3, q1, min, commit, tag, branch]
+                    // pt: [date, median, max, q3, q1, min, commit, tag, branch, suite_version]
                     var q1  = (pt[4] !== "") ? pt[4] : mid;
                     var q3  = (pt[3] !== "") ? pt[3] : mid;
                     var min = (pt[5] !== "") ? pt[5] : mid;
                     var max = (pt[2] !== "") ? pt[2] : mid;
-                    commit = pt[6]; tag = pt[7];
+                    commit = pt[6]; tag = pt[7]; suite_version = pt[9] || '';
                     if (shouldPlotExtrema()) {
                         low = min; high = max;
                     } else if (shouldPlotQuartiles()) {
@@ -99,16 +100,17 @@ function buildGraphData(branches, median, equidistant) {
                         low = mid; high = mid;
                     }
                 } else {
-                    // pt: [date, value, std_dev, commit, tag, branch]
+                    // pt: [date, value, std_dev, commit, tag, branch, suite_version]
                     var std = (pt[2] !== "" && pt[2] !== null) ? pt[2] : 0;
                     low = Math.max(0, mid - std);
                     high = mid + std;
-                    commit = pt[3]; tag = pt[4];
+                    commit = pt[3]; tag = pt[4]; suite_version = pt[6] || '';
                 }
 
                 dateIndex[dateKey] = new Date(dateKey.trim());
                 seriesRaw[exe_id][dateKey] = {low: low, mid: mid, high: high,
                                               commit: commit, tag: tag,
+                                              suite_version: suite_version,
                                               dateKey: dateKey};
             }
         }
@@ -136,7 +138,8 @@ function buildGraphData(branches, median, equidistant) {
             if (seriesRaw[id][dk]) {
                 var pt = seriesRaw[id][dk];
                 commitMap[dk][id] = {commit: pt.commit, tag: pt.tag,
-                                     low: pt.low, high: pt.high};
+                                     low: pt.low, high: pt.high,
+                                     suite_version: pt.suite_version};
             }
         });
     });
@@ -153,7 +156,7 @@ function buildGraphData(branches, median, equidistant) {
 
     return {labels: labels, colors: colors, data: graphData,
             commitMap: commitMap, sortedDateKeys: sortedDateKeys,
-            seriesIds: seriesIds, tsMap: tsMap};
+            seriesIds: seriesIds, tsMap: tsMap, dateIndex: dateIndex};
 }
 
 function renderPlot(data) {
@@ -192,8 +195,26 @@ function renderPlot(data) {
     var sortedDateKeys = built.sortedDateKeys;
     var seriesIds = built.seriesIds;
     var tsMap = built.tsMap;
+    var dateIndex = built.dateIndex;
     var env = $("input[name='environments']:checked").val();
 
+    // Find x-positions where suite_version changes between adjacent points
+    var seen = {};
+    var versionBoundaries = [];
+    sortedDateKeys.forEach(function(dk, idx) {
+        if (idx === 0) { return; }
+        var prevDk = sortedDateKeys[idx - 1];
+        seriesIds.forEach(function(id) {
+            var curr = commitMap[dk] && commitMap[dk][id];
+            var prev = commitMap[prevDk] && commitMap[prevDk][id];
+            if (curr && prev && curr.suite_version && prev.suite_version &&
+                    curr.suite_version !== prev.suite_version && !seen[dk]) {
+                seen[dk] = true;
+                versionBoundaries.push({dk: dk, idx: idx, label: curr.suite_version});
+            }
+        });
+    });
+
     // Map label -> color and label -> exeId for tooltip
     var colorMap = {};
     var labelToExeId = {};
@@ -236,6 +257,7 @@ function renderPlot(data) {
                 html += '<br><span style="font-size:0.85em;font-weight:normal;color:#666">' +
                         'commit: ' + info.commit;
                 if (info.tag) { html += '&nbsp;&nbsp;tag: ' + info.tag; }
+                if (versionBoundaries.length > 0 && info.suite_version) { html += '&nbsp;&nbsp;suite: ' + info.suite_version; }
                 html += '</span>';
             }
             html += '</div>';
@@ -285,6 +307,25 @@ function renderPlot(data) {
                 y: { valueRange: [0, null] }
             },
             connectSeparatedPoints: true,
+            underlayCallback: function(canvas, area, g) {
+                versionBoundaries.forEach(function(b) {
+                    var xval = equidistant ? b.idx : dateIndex[b.dk];
+                    var cx = g.toDomXCoord(xval);
+                    canvas.save();
+                    canvas.beginPath();
+                    canvas.moveTo(cx, area.y);
+                    canvas.lineTo(cx, area.y + area.h);
+                    canvas.strokeStyle = 'rgba(120, 120, 120, 0.6)';
+                    canvas.lineWidth = 1.5;
+                    canvas.setLineDash([4, 3]);
+                    canvas.stroke();
+                    canvas.setLineDash([]);
+                    canvas.fillStyle = 'rgba(80, 80, 80, 0.75)';
+                    canvas.font = '10px sans-serif';
+                    canvas.fillText(b.label, cx + 3, area.y + 12);
+                    canvas.restore();
+                });
+            },
             highlightSeriesOpts: { strokeWidth: 3 },
             highlightCircleSize: 5,
             highlightCallback: function(e, x, points) {