gh-150258: Show relative percentage on Tachyon flamegraph (#150266)

When running profiling, users rarely care about the global percentage of
the runtime. Often, they want to select a function and measure child
percentages relative to that.

This PR updates the flamegraph tooltips to show both "Percentage" and
"Relative Percentage" when the user clicks a specific function.

diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
index 1611bf754424c1361c40ef61a041c4bd8ecdf06c..840acf2c27d1201f9deb3d05b76f787489c8323c 100644 (file)
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
@@ -7,6 +7,7 @@ let invertedData = null;
 let currentThreadFilter = 'all';
 let isInverted = false;
 let useModuleNames = true;
+let zoomedNodeValue = null;
 
 // Heat colors are now defined in CSS variables (--heat-1 through --heat-8)
 // and automatically switch with theme changes - no JS color arrays needed!
@@ -316,6 +317,7 @@ function createPythonTooltip(data) {
     const selfSamples = d.data.self || 0;
     const selfMs = (selfSamples / 1000).toFixed(2);
     const percentage = ((d.data.value / data.value) * 100).toFixed(2);
+    const relativePercentage = Math.min(100, ((d.data.value / (zoomedNodeValue ?? data.value)) * 100)).toFixed(2);
     const calls = d.data.calls || 0;
     const childCount = d.children ? d.children.length : 0;
     const source = d.data.source;
@@ -439,6 +441,11 @@ function createPythonTooltip(data) {
         <span class="tooltip-stat-label">Percentage:</span>
         <span class="tooltip-stat-value accent">${percentage}%</span>
 
+        ${relativePercentage != percentage && relativePercentage != "100.00" ? `
+          <span class="tooltip-stat-label">Relative Percentage:</span>
+          <span class="tooltip-stat-value accent">${relativePercentage}%</span>
+        ` : ''}
+
         ${calls > 0 ? `
           <span class="tooltip-stat-label">Function Calls:</span>
           <span class="tooltip-stat-value">${calls.toLocaleString()}</span>
@@ -620,6 +627,9 @@ function createFlamegraph(tooltip, rootValue, data) {
       const percentage = d.data.value / rootValue;
       const level = getHeatLevel(percentage);
       return heatColors[level];
+    })
+    .onClick(function (d) {
+      zoomedNodeValue = d.data.value;
     });
 
   return chart;
@@ -629,6 +639,7 @@ function renderFlamegraph(chart, data) {
   d3.select("#chart").datum(data).call(chart);
   window.flamegraphChart = chart;
   window.flamegraphData = data;
+  zoomedNodeValue = null;
   populateStats(data);
 }
 
@@ -1269,6 +1280,7 @@ function filterDataByThread(data, threadId) {
 
 function resetZoom() {
   if (window.flamegraphChart) {
+    zoomedNodeValue = null;
     window.flamegraphChart.resetZoom();
   }
 }

diff --git a/Misc/NEWS.d/next/Tools-Demos/2026-05-22-18-51-09.gh-issue-150258.dh8GVK.rst b/Misc/NEWS.d/next/Tools-Demos/2026-05-22-18-51-09.gh-issue-150258.dh8GVK.rst
new file mode 100644 (file)
index 0000000..02cad6c
--- /dev/null
+++ b/Misc/NEWS.d/next/Tools-Demos/2026-05-22-18-51-09.gh-issue-150258.dh8GVK.rst
@@ -0,0 +1 @@
+Update the tooltip on the Tachyon flame graph to show both absolute and relative percentages.