[Benchmarks] Add chart annotations

devops/scripts/benchmarks/html/chart-annotations.js

@@ -0,0 +1,187 @@
+// Copyright (C) 2025 Intel Corporation
+// Part of the Unified-Runtime Project, under the Apache License v2.0 with LLVM Exceptions.
+// See LICENSE.TXT
+// SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+/**
+ * Find version changes in data points to create annotations
+ * @param {Array} points - Data points to analyze
+ * @param {string} versionKey - Key to track version changes
+ * @returns {Array} - List of change points
+ */
+function findVersionChanges(points, versionKey) {
+    if (!points || points.length < 2) return [];
+
+    const changes = [];
+    // Sort points by date
+    const sortedPoints = [...points].sort((a, b) => a.x - b.x);
+    let lastVersion = sortedPoints[0][versionKey];
+
+    for (let i = 1; i < sortedPoints.length; i++) {
+        const currentPoint = sortedPoints[i];
+
+        const currentVersion = currentPoint[versionKey];
+        if (currentVersion && currentVersion !== lastVersion) {
+            changes.push({
+                date: currentPoint.x,
+                newVersion: currentVersion,
+            });
+            lastVersion = currentVersion;
+        }
+    }
+
+    return changes;
+}
+
+/**
+ * Add version change annotations to chart options
+ * @param {Object} data - Chart data
+ * @param {Object} options - Chart.js options object
+ */
+function addVersionChangeAnnotations(data, options) {
+    const benchmarkSources = Array.from(window.annotationsOptions.values());
+    const changeTrackers = [
+        {
+            // Benchmark repos updates
+            versionKey: 'gitBenchHash',
+            sources: benchmarkSources,
+            pointsFilter: (points, url) => points.filter(p => p.gitBenchUrl === url),
+            formatLabel: (sourceName, version) => `${sourceName}: ${version.substring(0, 7)}`
+        },
+        {
+            // Compute Runtime updates
+            versionKey: 'compute_runtime',
+            sources: [
+                {
+                    name: "Compute Runtime",
+                    url: "https://github.com/intel/compute-runtime.git",
+                    color: {
+                        border: 'rgba(70, 105, 150, 0.8)',
+                        background: 'rgba(70, 105, 150, 0.9)',
+                    },
+                }
+            ],
+        }
+    ];
+
+    changeTrackers.forEach(tracker => {
+        tracker.sources.forEach((source) => {
+            const changes = {};
+
+            // Find changes across all runs
+            Object.values(data.runs).flatMap(runData => 
+                findVersionChanges(
+                    tracker.pointsFilter ? tracker.pointsFilter(runData.data, source.url) : runData.data,
+                    tracker.versionKey
+                )
+            ).forEach(change => {
+                const changeKey = `${source.name}-${change.newVersion}`;
+                if (!changes[changeKey] || change.date < changes[changeKey].date) {
+                    changes[changeKey] = change;
+                }
+            });
+
+            // Create annotation for each unique change
+            Object.values(changes).forEach(change => {
+                const annotationId = `${change.date}`;
+                // If annotation at a given date already exists, update it
+                if (options.plugins.annotation.annotations[annotationId]) {
+                    options.plugins.annotation.annotations[annotationId].label.content.push(
+                        tracker.formatLabel ?
+                            tracker.formatLabel(source.name, change.newVersion) :
+                            `${source.name}: ${change.newVersion}`
+                    );
+                    options.plugins.annotation.annotations[annotationId].borderColor = 'rgba(128, 128, 128, 0.8)';
+                    options.plugins.annotation.annotations[annotationId].borderWidth += 1;
+                    options.plugins.annotation.annotations[annotationId].label.backgroundColor = 'rgba(128, 128, 128, 0.9)';
+                } else {
+                    options.plugins.annotation.annotations[annotationId] = {
+                        type: 'line',
+                        xMin: change.date,
+                        xMax: change.date,
+                        borderColor: source.color.border,
+                        borderWidth: 2,
+                        borderDash: [5, 5],
+                        label: {
+                            content: [
+                                tracker.formatLabel ? 
+                                tracker.formatLabel(source.name, change.newVersion) : 
+                                    `${source.name}: ${change.newVersion}`
+                            ],
+                            display: false,
+                            position: 'start',
+                            backgroundColor: source.color.background,
+                            z: 1,
+                        }
+                    }
+                };
+            });
+        });
+    });
+}
+
+/**
+ * Set up event listeners for annotation interactions
+ * @param {Chart} chart - Chart.js instance
+ * @param {CanvasRenderingContext2D} ctx - Canvas context
+ * @param {Object} options - Chart.js options object
+ */
+function setupAnnotationListeners(chart, ctx, options) {
+    // Add event listener for annotation clicks - display/hide label
+    ctx.canvas.addEventListener('click', function(e) {
+        const activeElements = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false);
+
+        // If no data point is clicked, check if an annotation was clicked
+        if (activeElements.length === 0) {
+            const rect = chart.canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+
+            // Check if click is near any annotation line
+            const annotations = options.plugins.annotation.annotations;
+            Object.values(annotations).some(annotation => {
+                // Get the position of the annotation line
+                const xPos = chart.scales.x.getPixelForValue(annotation.xMin);
+
+                // Display label if click is near the annotation line (within 5 pixels)
+                if (Math.abs(x - xPos) < 5) {
+                    annotation.label.display = !annotation.label.display;
+                    chart.update();
+                    return true; // equivalent to break in a for loop
+                }
+                return false;
+            });
+        }
+    });
+
+    // Add mouse move handler to change cursor when hovering over annotations
+    ctx.canvas.addEventListener('mousemove', function(e) {
+        const rect = chart.canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+
+        // Check if mouse is near any annotation line
+        const annotations = options.plugins.annotation.annotations;
+        const isNearAnnotation = Object.values(annotations).some(annotation => {
+            const xPos = chart.scales.x.getPixelForValue(annotation.xMin);
+
+            if (Math.abs(x - xPos) < 5) {
+                return true;
+            }
+            return false;
+        });
+
+        // Change cursor style based on proximity to annotation
+        ctx.canvas.style.cursor = isNearAnnotation ? 'pointer' : '';
+    });
+
+    // Reset cursor when mouse leaves the chart area
+    ctx.canvas.addEventListener('mouseleave', function() {
+        ctx.canvas.style.cursor = '';
+    });
+}
+
+// Export functions to make them available to other modules
+window.ChartAnnotations = {
+    findVersionChanges,
+    addVersionChangeAnnotations,
+    setupAnnotationListeners
+};

devops/scripts/benchmarks/html/index.html

@@ -12,8 +12,10 @@
     <title>Benchmark Results</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
     <script src="data.js"></script>
     <script src="config.js"></script>
+    <script src="chart-annotations.js"></script>
     <script src="scripts.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>

devops/scripts/benchmarks/html/scripts.js

@@ -13,6 +13,7 @@ let layerComparisonsData;
 let latestRunsLookup = new Map();
 let pendingCharts = new Map(); // Store chart data for lazy loading
 let chartObserver; // Intersection observer for lazy loading charts
+let annotationsOptions = new Map(); // Global options map for annotations
 
 // DOM Elements
 let runSelect, selectedRunsDiv, suiteFiltersContainer, tagFiltersContainer;
@@ -62,6 +63,16 @@ const colorPalette = [
     'rgb(210, 190, 0)',
 ];
 
+const annotationPalette = [
+    'rgba(167, 109, 59, 0.8)',
+    'rgba(185, 185, 60, 0.8)',
+    'rgba(58, 172, 58, 0.8)',
+    'rgba(158, 59, 158, 0.8)',
+    'rgba(167, 93, 63, 0.8)',
+    'rgba(163, 60, 81, 0.8)',
+    'rgba(51, 148, 155, 0.8)',
+]
+
 const nameColorMap = {};
 let colorIndex = 0;
 
@@ -132,6 +143,8 @@ function createChart(data, containerId, type) {
                                 `Stddev: ${point.stddev.toFixed(2)} ${data.unit}`,
                                 `Git Hash: ${point.gitHash}`,
                                 `Compute Runtime: ${point.compute_runtime}`,
+                                `Bench hash: ${point.gitBenchHash?.substring(0, 7)}`,
+                                `Bench URL: ${point.gitBenchUrl}`,
                             ];
                         } else {
                             return [`${context.dataset.label}:`,
@@ -140,7 +153,10 @@ function createChart(data, containerId, type) {
                         }
                     }
                 }
-            }
+            },
+            annotation: type === 'time' ? {
+                annotations: {}
+            } : undefined
         },
         scales: {
             y: {
@@ -158,7 +174,7 @@ function createChart(data, containerId, type) {
     if (type === 'time') {
         options.interaction = {
             mode: 'nearest',
-            intersect: false
+            intersect: true // Require to hover directly over a point
         };
         options.onClick = (event, elements) => {
             if (elements.length > 0) {
@@ -180,6 +196,11 @@ function createChart(data, containerId, type) {
                 maxTicksLimit: 10
             }
         };
+
+        // Add dependencies version change annotations
+        if (Object.keys(data.runs).length > 0) {
+            ChartAnnotations.addVersionChangeAnnotations(data, options);
+        }
     }
 
     const chartConfig = {
@@ -202,29 +223,15 @@ function createChart(data, containerId, type) {
 
     const chart = new Chart(ctx, chartConfig);
     chartInstances.set(containerId, chart);
+
+    // Add annotation interaction handlers for time-series charts
+    if (type === 'time') {
+        ChartAnnotations.setupAnnotationListeners(chart, ctx, options);
+    }
+
     return chart;
 }
 
-function createTimeseriesDatasets(data) {
-    return Object.entries(data.runs).map(([name, runData], index) => ({
-        label: runData.runName, // Use run name for legend
-        data: runData.points.map(p => ({
-            seriesName: runData.runName, // Use run name for tooltips
-            x: p.date,
-            y: p.value,
-            gitHash: p.git_hash,
-            gitRepo: p.github_repo,
-            stddev: p.stddev
-        })),
-        borderColor: colorPalette[index % colorPalette.length],
-        backgroundColor: colorPalette[index % colorPalette.length],
-        borderWidth: 1,
-        pointRadius: 3,
-        pointStyle: 'circle',
-        pointHoverRadius: 5
-    }));
-}
-
 function updateCharts() {
     const filterRunData = (chart) => ({
         ...chart,
@@ -815,7 +822,9 @@ function addRunDataPoint(group, run, result, comparison, name = null) {
         stddev: result.stddev,
         gitHash: run.git_hash,
         gitRepo: run.github_repo,
-        compute_runtime: run.compute_runtime
+        compute_runtime: run.compute_runtime,
+        gitBenchUrl: result.git_url,
+        gitBenchHash: result.git_hash,
     });
 
     return group;
@@ -997,6 +1006,11 @@ function initializeCharts() {
     allRunNames = [...new Set(benchmarkRuns.map(run => run.name))];
     latestRunsLookup = createLatestRunsLookup(benchmarkRuns);
 
+    // Create global options map for annotations
+    annotationsOptions = createAnnotationsOptions(benchmarkRuns);
+    // Make it available to the ChartAnnotations module
+    window.annotationsOptions = annotationsOptions;
+
     // Set up active runs
     const runsParam = getQueryParam('runs');
     if (runsParam) {
@@ -1109,3 +1123,30 @@ function loadData() {
 document.addEventListener('DOMContentLoaded', () => {
     loadData();
 });
+
+// Process all benchmark runs to create a global options map for annotations
+function createAnnotationsOptions(benchmarkRuns) {
+    const repoMap = new Map();
+
+    benchmarkRuns.forEach(run => {
+        run.results.forEach(result => {
+            if (result.git_url && !repoMap.has(result.git_url)) {
+                const suiteName = result.suite;
+                const colorIndex = repoMap.size % annotationPalette.length;
+                const backgroundColor = annotationPalette[colorIndex].replace('0.8', '0.9');
+                const color = {
+                    border: annotationPalette[colorIndex],
+                    background: backgroundColor
+                };
+
+                repoMap.set(result.git_url, {
+                    name: suiteName,
+                    url: result.git_url,
+                    color: color,
+                });
+            }
+        });
+    });
+
+    return repoMap;
+}