From 4966c7486f8466ad50c47d37681b3fe69f702252 Mon Sep 17 00:00:00 2001
From: "Wensi (Vince) Ai" <vinceai@outlook.com>
Date: Wed, 21 Feb 2024 21:32:31 -0800
Subject: [PATCH] Fix profiling webpage display bugs

---
 scripts/profiling.js | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/scripts/profiling.js b/scripts/profiling.js
index 905c493f4..8bacee54d 100644
--- a/scripts/profiling.js
+++ b/scripts/profiling.js
@@ -91,20 +91,26 @@ function renderGraph(canvasName, fieldName, runNames) {
 	const canvas = document.getElementById(canvasName);
 	const color = ['#178600', '#00add8', '#ffa500', '#ff3838'];
 	const data = {
-		labels: Array.from(filteredData).map(([_name, value]) => (value[0].commit.id.slice(0, 7))),
-		datasets: Array.from(filteredData).map(([name, value], index) => ({
-			label: name,
-			data: value.map(d => d.bench.value),
-			borderColor: color[index],
-			backgroundColor: 'rgba(0, 0, 0, 0.01)'
-		}))
+		labels: Array.from(filteredData.values())[0].map(value => value.commit.id.slice(0, 7)),
+		datasets: Array.from(filteredData).map(([name, value], index) => {
+			return {
+				label: name,
+				data: value.map(d => ({
+					'x': d.commit.id.slice(0, 7),
+					'y': d.bench.value
+				}
+				)),
+				borderColor: color[index],
+				backgroundColor: 'rgba(0, 0, 0, 0.01)'
+			};
+	})
 	};
 	const options = {
 		tooltips: {
 			callbacks: {
 				afterTitle: items => {
-					const {index} = items[0];
-					const data = filteredData.values().next().value[index];
+					const {datasetIndex, index} = items[0];
+					const data = Array.from(filteredData.values())[datasetIndex][index];
 					return '\n' + data.commit.message + '\n\n' + data.commit.timestamp + ' committed by @' + data.commit.committer.username + '\n';
 				},
 				label: item => {
@@ -122,13 +128,12 @@ function renderGraph(canvasName, fieldName, runNames) {
 				}
 			}
 		},
-		onClick: (_mouseEvent, activeElems) => {
-			if (activeElems.length === 0) {
+		onClick: (_mouseEvent) => {
+			const points = myChart.getElementsAtEventForMode(_mouseEvent, 'nearest', { intersect: true }, true);
+			if (points.length === 0) {
 				return;
 			}
-			// XXX: Undocumented. How can we know the index?
-			const index = activeElems[0]._index;
-			const url = filteredData.values().next().value[index].commit.url;
+			const url = Array.from(filteredData.values())[points[0]._datasetIndex][points[0]._index].commit.url;
 			window.open(url, '_blank');
 		},
 		title: {
@@ -142,11 +147,12 @@ function renderGraph(canvasName, fieldName, runNames) {
 		maintainAspectRatio: true
 	};
 
-	new Chart(canvas, {
+	const myChart = new Chart(canvas, {
 		type: 'line',
 		data,
 		options,
 	});
+	return myChart;
 }