From 92ef4ffa19f56caf0c8efba1027a1942dbb2dcdb Mon Sep 17 00:00:00 2001
From: Dunedan <dunedan@phoenitydawn.de>
Date: Sat, 14 Jun 2025 15:02:18 +0200
Subject: [PATCH] Improve profiler2 analysis graphs

This removes the padding from the start and the end of the frequency
graphs, to remove the inaccurate steps it caused.

It also improves the smoothness of the frequency and frame-to-frame
graphs by painting each graph as a single line, instead of one line per
data point.
---
 source/tools/profiler2/profiler2.js | 73 +++++++++++------------------
 1 file changed, 27 insertions(+), 46 deletions(-)

diff --git a/source/tools/profiler2/profiler2.js b/source/tools/profiler2/profiler2.js
index 133d2eab03..fe74f6f7e9 100644
--- a/source/tools/profiler2/profiler2.js
+++ b/source/tools/profiler2/profiler2.js
@@ -30,6 +30,9 @@ var g_current_report = 0;
 var g_profile_path = null;
 var g_active_elements = [];
 
+// percentage of the y-axis to keep as empty space above the largest value
+const y_padding = 5;
+
 function save_as_file()
 {
 	$.ajax({
@@ -84,9 +87,6 @@ function draw_frequency_graph()
 
 	var x_scale = 0;
 	var y_scale = 0;
-	var padding = 10;
-
-	var item_nb = 0;
 
 	var tooltip_helper = {};
 
@@ -94,7 +94,6 @@ function draw_frequency_graph()
 	{
 		for (const rep in g_reports)
 		{
-			item_nb++;
 			const data = get_history_data(rep, g_main_thread, g_active_elements[typeI]);
 			const name = rep + "/" + g_active_elements[typeI];
 			if (document.getElementById('fulln').checked)
@@ -107,43 +106,38 @@ function draw_frequency_graph()
 				y_scale = data.max;
 		}
 	}
+
+	y_scale *= 1 + y_padding / 100;
+
 	let id = 0;
 	for (const type in series_data)
 	{
 		const colour = graph_colour(id);
 		const time_by_frame = series_data[type];
 		const p = 0;
-		let last_val = 0;
 
 		const nb = document.createElement("p");
 		nb.style.borderColor = colour;
 		nb.textContent = type + " - n=" + time_by_frame.length;
 		legend.appendChild(nb);
 
+		context.globalCompositeOperation = "lighter";
+		context.beginPath();
+		context.strokeStyle = colour;
+		context.lineWidth = 1;
+
 		for (let i = 0; i < time_by_frame.length; i++)
 		{
-			let x0 = i/time_by_frame.length*(canvas.width-padding*2) + padding;
-			if (i == 0)
-				x0 = 0;
-			let x1 = (i+1)/time_by_frame.length*(canvas.width-padding*2) + padding;
-			if (i == time_by_frame.length-1)
-				x1 = (time_by_frame.length-1)*canvas.width;
-
+			const x = i/time_by_frame.length*canvas.width;
 			const y = time_by_frame[i]/y_scale;
-			context.globalCompositeOperation = "lighter";
 
-			context.beginPath();
-			context.strokeStyle = colour;
-			context.lineWidth = 0.5;
-			context.moveTo(x0, canvas.height * (1 - last_val));
-			context.lineTo(x1, canvas.height * (1 - y));
-			context.stroke();
+			context.lineTo(x, canvas.height * (1 - y));
 
-			last_val = y;
-			if (!tooltip_helper[Math.floor(x0)])
-				tooltip_helper[Math.floor(x0)] = [];
-			tooltip_helper[Math.floor(x0)].push([y, type]);
+			if (!tooltip_helper[Math.floor(x)])
+				tooltip_helper[Math.floor(x)] = [];
+			tooltip_helper[Math.floor(x)].push([y, type]);
 		}
+		context.stroke();
 		id++;
 	}
 
@@ -199,8 +193,6 @@ function draw_history_graph()
 	var x_scale = 0;
 	var y_scale = 0;
 
-	var item_nb = 0;
-
 	var tooltip_helper = {};
 
 	for (const typeI in g_active_elements)
@@ -209,7 +201,6 @@ function draw_history_graph()
 		{
 			if (g_reports[rep].data().threads[g_main_thread].frames.length < frames_nb)
 				frames_nb = g_reports[rep].data().threads[g_main_thread].frames.length;
-			item_nb++;
 			const data = get_history_data(rep, g_main_thread, g_active_elements[typeI]);
 			if (!document.getElementById('smooth').value)
 				series_data[rep + "/" + g_active_elements[typeI]] = data.time_by_frame;
@@ -221,6 +212,7 @@ function draw_history_graph()
 	}
 	canvas.width = Math.max(frames_nb, 600);
 	x_scale = frames_nb / canvas.width;
+	y_scale *= 1 + y_padding / 100;
 	let id = 0;
 	for (const type in series_data)
 	{
@@ -232,36 +224,25 @@ function draw_history_graph()
 		legend.appendChild(legend_item);
 
 		const time_by_frame = series_data[type];
-		let last_val = 0;
+
+		context.beginPath();
+		context.globalCompositeOperation = "lighten";
+		context.strokeStyle = colour;
+		context.lineWidth = 0.75;
+
 		for (let i = 0; i < frames_nb; i++)
 		{
 			const smoothed_time = time_by_frame[i];// smooth_1D(time_by_frame.slice(0), i, 3);
 
 			const y = smoothed_time/y_scale;
 
-			if (item_nb === 1)
-			{
-				context.beginPath();
-				context.fillStyle = colour;
-				context.fillRect(i/x_scale, canvas.height, 1/x_scale, -y*canvas.height);
-			}
-			else
-			{
-				if (i == frames_nb-1)
-					continue;
-				context.globalCompositeOperation = "lighten";
-				context.beginPath();
-				context.strokeStyle = colour;
-				context.lineWidth = 0.5;
-				context.moveTo(i/x_scale, canvas.height * (1 - last_val));
-				context.lineTo((i+1)/x_scale, canvas.height * (1 - y));
-				context.stroke();
-			}
-			last_val = y;
+			context.lineTo(i/x_scale, canvas.height * (1 - y));
+
 			if (!tooltip_helper[Math.floor(i/x_scale)])
 				tooltip_helper[Math.floor(i/x_scale)] = [];
 			tooltip_helper[Math.floor(i/x_scale)].push([y, type]);
 		}
+		context.stroke();
 		id++;
 	}