gh-142927: Show module names instead of file paths in flamegraph (#146040)

Author: ivonastojanovic

Lib/profiling/sampling/_flamegraph_assets/flamegraph.css

@@ -315,6 +315,12 @@ body.resizing-sidebar {
 }
 
 /* View Mode Section */
+.view-mode-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .view-mode-section .section-content {
   display: flex;
   flex-direction: column;
@@ -1067,7 +1073,8 @@ body.resizing-sidebar {
    -------------------------------------------------------------------------- */
 
 #toggle-invert .toggle-track.on,
-#toggle-elided .toggle-track.on {
+#toggle-elided .toggle-track.on,
+#toggle-path-display .toggle-track.on {
   background: #8e44ad;
   border-color: #8e44ad;
   box-shadow: 0 0 8px rgba(142, 68, 173, 0.3);

Lib/profiling/sampling/_flamegraph_assets/flamegraph.js

@@ -6,6 +6,7 @@ let normalData = null;
 let invertedData = null;
 let currentThreadFilter = 'all';
 let isInverted = false;
+let useModuleNames = true;
 
 // Heat colors are now defined in CSS variables (--heat-1 through --heat-8)
 // and automatically switch with theme changes - no JS color arrays needed!
@@ -64,6 +65,12 @@ function resolveStringIndices(node, table) {
   if (typeof resolved.funcname === 'number') {
     resolved.funcname = resolveString(resolved.funcname, table);
   }
+  if (typeof resolved.module === 'number') {
+    resolved.module = resolveString(resolved.module, table);
+  }
+  if (typeof resolved.label === 'number') {
+    resolved.label = resolveString(resolved.label, table);
+  }
 
   if (Array.isArray(resolved.source)) {
     resolved.source = resolved.source.map(index =>
@@ -78,6 +85,19 @@ function resolveStringIndices(node, table) {
   return resolved;
 }
 
+// Escape HTML special characters
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// Get display path based on user preference (module or full path)
+function getDisplayName(moduleName, filename) {
+  if (useModuleNames) {
+    return moduleName || filename;
+  }
+  return filename;
+}
+
 function selectFlamegraphData() {
   const baseData = isShowingElided ? elidedFlamegraphData : normalData;
 
@@ -228,6 +248,7 @@ function setupLogos() {
 function updateStatusBar(nodeData, rootValue) {
   const funcname = resolveString(nodeData.funcname) || resolveString(nodeData.name) || "--";
   const filename = resolveString(nodeData.filename) || "";
+  const moduleName = resolveString(nodeData.module) || "";
   const lineno = nodeData.lineno;
   const timeMs = (nodeData.value / 1000).toFixed(2);
   const percent = rootValue > 0 ? ((nodeData.value / rootValue) * 100).toFixed(1) : "0.0";
@@ -249,8 +270,8 @@ function updateStatusBar(nodeData, rootValue) {
 
   const fileEl = document.getElementById('status-file');
   if (fileEl && filename && filename !== "~") {
-    const basename = filename.split('/').pop();
-    fileEl.textContent = lineno ? `${basename}:${lineno}` : basename;
+    const displayName = getDisplayName(moduleName, filename);
+    fileEl.textContent = lineno ? `${displayName}:${lineno}` : displayName;
   }
 
   const funcEl = document.getElementById('status-func');
@@ -301,6 +322,8 @@ function createPythonTooltip(data) {
 
     const funcname = resolveString(d.data.funcname) || resolveString(d.data.name);
     const filename = resolveString(d.data.filename) || "";
+    const moduleName = resolveString(d.data.module) || "";
+    const displayName = escapeHtml(useModuleNames ? (moduleName || filename) : filename);
     const isSpecialFrame = filename === "~";
 
     // Build source section
@@ -309,7 +332,7 @@ function createPythonTooltip(data) {
       const sourceLines = source
         .map((line) => {
           const isCurrent = line.startsWith("→");
-          const escaped = line.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+          const escaped = escapeHtml(line);
           return `<div class="tooltip-source-line${isCurrent ? ' current' : ''}">${escaped}</div>`;
         })
         .join("");
@@ -369,7 +392,7 @@ function createPythonTooltip(data) {
     }
 
     const fileLocationHTML = isSpecialFrame ? "" : `
-      <div class="tooltip-location">${filename}${d.data.lineno ? ":" + d.data.lineno : ""}</div>`;
+      <div class="tooltip-location">${displayName}${d.data.lineno ? ":" + d.data.lineno : ""}</div>`;
 
     // Differential stats section
     let diffSection = "";
@@ -586,6 +609,7 @@ function createFlamegraph(tooltip, rootValue, data) {
     .minFrameSize(1)
     .tooltip(tooltip)
     .inverted(true)
+    .getName(d => resolveString(useModuleNames ? d.data.label : d.data.name) || resolveString(d.data.name) || '')
     .setColorMapper(function (d) {
       if (d.depth === 0) return 'transparent';
 
@@ -628,25 +652,25 @@ function updateSearchHighlight(searchTerm, searchInput) {
         const name = resolveString(d.data.name) || "";
         const funcname = resolveString(d.data.funcname) || "";
         const filename = resolveString(d.data.filename) || "";
+        const moduleName = resolveString(d.data.module) || "";
+        const displayName = getDisplayName(moduleName, filename);
         const lineno = d.data.lineno;
         const term = searchTerm.toLowerCase();
 
-        // Check if search term looks like file:line pattern
+        // Check if search term looks like path:line pattern
         const fileLineMatch = term.match(/^(.+):(\d+)$/);
         let matches = false;
 
         if (fileLineMatch) {
-          // Exact file:line matching
           const searchFile = fileLineMatch[1];
           const searchLine = parseInt(fileLineMatch[2], 10);
-          const basename = filename.split('/').pop().toLowerCase();
-          matches = basename.includes(searchFile) && lineno === searchLine;
+          matches = displayName.toLowerCase().includes(searchFile) && lineno === searchLine;
         } else {
           // Regular substring search
           matches =
             name.toLowerCase().includes(term) ||
             funcname.toLowerCase().includes(term) ||
-            filename.toLowerCase().includes(term);
+            displayName.toLowerCase().includes(term);
         }
 
         if (matches) {
@@ -1047,6 +1071,7 @@ function populateStats(data) {
 
     let filename = resolveString(node.filename);
     let funcname = resolveString(node.funcname);
+    let moduleName = resolveString(node.module);
 
     if (!filename || !funcname) {
       const nameStr = resolveString(node.name);
@@ -1061,6 +1086,7 @@ function populateStats(data) {
 
     filename = filename || 'unknown';
     funcname = funcname || 'unknown';
+    moduleName = moduleName || 'unknown';
 
     if (filename !== 'unknown' && funcname !== 'unknown' && node.value > 0) {
       const directSamples = node.self || 0;
@@ -1073,12 +1099,14 @@ function populateStats(data) {
         existing.directPercent = (existing.directSamples / totalSamples) * 100;
         if (directSamples > existing.maxSingleSamples) {
           existing.filename = filename;
+          existing.module = moduleName;
           existing.lineno = node.lineno || '?';
           existing.maxSingleSamples = directSamples;
         }
       } else {
         functionMap.set(funcKey, {
           filename: filename,
+          module: moduleName,
           lineno: node.lineno || '?',
           funcname: funcname,
           directSamples,
@@ -1113,6 +1141,7 @@ function populateStats(data) {
       const h = hotSpots[i];
       const filename = h.filename || 'unknown';
       const lineno = h.lineno ?? '?';
+      const moduleName = h.module || 'unknown';
       const isSpecialFrame = filename === '~' && (lineno === 0 || lineno === '?');
 
       let funcDisplay = h.funcname || 'unknown';
@@ -1123,8 +1152,8 @@ function populateStats(data) {
         if (isSpecialFrame) {
           fileEl.textContent = '--';
         } else {
-          const basename = filename !== 'unknown' ? filename.split('/').pop() : 'unknown';
-          fileEl.textContent = `${basename}:${lineno}`;
+          const displayName = getDisplayName(moduleName, filename);
+          fileEl.textContent = `${displayName}:${lineno}`;
         }
       }
       if (percentEl) percentEl.textContent = `${h.directPercent.toFixed(1)}%`;
@@ -1140,8 +1169,11 @@ function populateStats(data) {
     if (card) {
       if (i < hotSpots.length && hotSpots[i]) {
         const h = hotSpots[i];
-        const basename = h.filename !== 'unknown' ? h.filename.split('/').pop() : '';
-        const searchTerm = basename && h.lineno !== '?' ? `${basename}:${h.lineno}` : h.funcname;
+        const moduleName = h.module || 'unknown';
+        const filename = h.filename || 'unknown';
+        const displayName = getDisplayName(moduleName, filename);
+        const hasValidLocation = displayName !== 'unknown' && h.lineno !== '?';
+        const searchTerm = hasValidLocation ? `${displayName}:${h.lineno}` : h.funcname;
         card.dataset.searchterm = searchTerm;
         card.onclick = () => searchForHotspot(searchTerm);
         card.style.cursor = 'pointer';
@@ -1273,10 +1305,12 @@ function accumulateInvertedNode(parent, stackFrame, leaf, isDifferential) {
   if (!parent.children[key]) {
     const newNode = {
       name: stackFrame.name,
+      label: stackFrame.label,
       value: 0,
       self: 0,
       children: {},
       filename: stackFrame.filename,
+      module: stackFrame.module,
       lineno: stackFrame.lineno,
       funcname: stackFrame.funcname,
       source: stackFrame.source,
@@ -1370,6 +1404,7 @@ function generateInvertedFlamegraph(data) {
 
   const invertedRoot = {
     name: data.name,
+    label: data.label,
     value: data.value,
     children: {},
     stats: data.stats,
@@ -1394,6 +1429,12 @@ function toggleInvert() {
   updateFlamegraphView();
 }
 
+function togglePathDisplay() {
+  useModuleNames = !useModuleNames;
+  updateToggleUI('toggle-path-display', useModuleNames);
+  updateFlamegraphView();
+}
+
 // ============================================================================
 // Initialization
 // ============================================================================
@@ -1441,6 +1482,11 @@ function initFlamegraph() {
   if (toggleInvertBtn) {
     toggleInvertBtn.addEventListener('click', toggleInvert);
   }
+
+  const togglePathDisplayBtn = document.getElementById('toggle-path-display');
+  if (togglePathDisplayBtn) {
+    togglePathDisplayBtn.addEventListener('click', togglePathDisplay);
+  }
 }
 
 // Keyboard shortcut: Enter/Space activates toggle switches

Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html

@@ -117,6 +117,12 @@ <h3 class="section-title">View Mode</h3>
                   <span class="toggle-label" data-text="Elided" title="Code paths that existed in baseline but are missing from current profile">Elided</span>
                 </div>
 
+                <div class="toggle-switch" id="toggle-path-display" title="Toggle between module names and full file paths" tabindex="0">
+                  <span class="toggle-label" data-text="File Paths">File Paths</span>
+                  <div class="toggle-track on"></div>
+                  <span class="toggle-label active" data-text="Module Names">Module Names</span>
+                </div>
+
                 <div class="toggle-switch" id="toggle-invert" title="Toggle between standard and inverted flamegraph view" tabindex="0">
                   <span class="toggle-label active" data-text="Flamegraph">Flamegraph</span>
                   <div class="toggle-track"></div>