Add 'Full Paths/Module Names' toggle for flamegraph display

Users can now switch between module names and file paths using the
toggle in the View Mode sidebar. Module names are concise, while
file paths help locate the exact source file, both are useful
depending on the debugging context.

Author: ivonastojanovic

Lib/profiling/sampling/_flamegraph_assets/flamegraph.css

@@ -275,6 +275,12 @@ body.resizing-sidebar {
 }
 
 /* View Mode Section */
+.view-mode-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .view-mode-section .section-content {
   display: flex;
   justify-content: center;
@@ -989,7 +995,8 @@ body.resizing-sidebar {
    Flamegraph-Specific Toggle Override
    -------------------------------------------------------------------------- */
 
-#toggle-invert .toggle-track.on {
+#toggle-invert .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!
@@ -67,6 +68,9 @@ function resolveStringIndices(node) {
   if (typeof resolved.module_name === 'number') {
     resolved.module_name = resolveString(resolved.module_name);
   }
+  if (typeof resolved.name_module === 'number') {
+    resolved.name_module = resolveString(resolved.name_module);
+  }
 
   if (Array.isArray(resolved.source)) {
     resolved.source = resolved.source.map(index =>
@@ -86,6 +90,14 @@ function escapeHtml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
+// Get display path based on user preference (module name or basename)
+function getDisplayName(moduleName, filename) {
+  if (useModuleNames) {
+    return moduleName || filename;
+  }
+  return filename ? filename.split('/').pop() : filename;
+}
+
 // ============================================================================
 // Theme & UI Controls
 // ============================================================================
@@ -231,7 +243,8 @@ function updateStatusBar(nodeData, rootValue) {
 
   const fileEl = document.getElementById('status-file');
   if (fileEl && filename && filename !== "~") {
-    fileEl.textContent = lineno ? `${moduleName}:${lineno}` : moduleName;
+    const displayName = getDisplayName(moduleName, filename);
+    fileEl.textContent = lineno ? `${displayName}:${lineno}` : displayName;
   }
 
   const funcEl = document.getElementById('status-func');
@@ -280,7 +293,8 @@ function createPythonTooltip(data) {
 
     const funcname = resolveString(d.data.funcname) || resolveString(d.data.name);
     const filename = resolveString(d.data.filename) || "";
-    const moduleName = escapeHtml(resolveString(d.data.module_name) || "");
+    const moduleName = resolveString(d.data.module_name) || "";
+    const displayName = escapeHtml(useModuleNames ? (moduleName || filename) : filename);
     const isSpecialFrame = filename === "~";
 
     // Build source section
@@ -349,7 +363,7 @@ function createPythonTooltip(data) {
     }
 
     const fileLocationHTML = isSpecialFrame ? "" : `
-      <div class="tooltip-location">${moduleName}${d.data.lineno ? ":" + d.data.lineno : ""}</div>`;
+      <div class="tooltip-location">${displayName}${d.data.lineno ? ":" + d.data.lineno : ""}</div>`;
 
     const tooltipHTML = `
       <div class="tooltip-header">
@@ -479,6 +493,7 @@ function createFlamegraph(tooltip, rootValue) {
     .minFrameSize(1)
     .tooltip(tooltip)
     .inverted(true)
+    .getName(d => resolveString(useModuleNames ? d.data.name_module : d.data.name) || resolveString(d.data.name) || '')
     .setColorMapper(function (d) {
       // Root node should be transparent
       if (d.depth === 0) return 'transparent';
@@ -519,24 +534,24 @@ function updateSearchHighlight(searchTerm, searchInput) {
         const funcname = resolveString(d.data.funcname) || "";
         const filename = resolveString(d.data.filename) || "";
         const moduleName = resolveString(d.data.module_name) || "";
+        const displayName = getDisplayName(moduleName, filename);
         const lineno = d.data.lineno;
         const term = searchTerm.toLowerCase();
 
-        // Check if search term looks like module:line pattern
+        // Check if search term looks like path:line pattern
         const fileLineMatch = term.match(/^(.+):(\d+)$/);
         let matches = false;
 
         if (fileLineMatch) {
           const searchFile = fileLineMatch[1];
           const searchLine = parseInt(fileLineMatch[2], 10);
-          matches = moduleName.toLowerCase().includes(searchFile) && lineno === searchLine;
+          matches = displayName.toLowerCase().includes(searchFile) && lineno === searchLine;
         } else {
           // Regular substring search
           matches =
             name.toLowerCase().includes(term) ||
             funcname.toLowerCase().includes(term) ||
-            moduleName.toLowerCase().includes(term) ||
-            filename.toLowerCase().includes(term);
+            displayName.toLowerCase().includes(term);
         }
 
         if (matches) {
@@ -988,7 +1003,8 @@ function populateStats(data) {
         if (isSpecialFrame) {
           fileEl.textContent = '--';
         } else {
-          fileEl.textContent = `${moduleName}:${lineno}`;
+          const displayName = getDisplayName(moduleName, filename);
+          fileEl.textContent = `${displayName}:${lineno}`;
         }
       }
       if (percentEl) percentEl.textContent = `${h.directPercent.toFixed(1)}%`;
@@ -1005,8 +1021,10 @@ function populateStats(data) {
       if (i < hotSpots.length && hotSpots[i]) {
         const h = hotSpots[i];
         const moduleName = h.module_name || 'unknown';
-        const hasValidLocation = moduleName !== 'unknown' && h.lineno !== '?';
-        const searchTerm = hasValidLocation ? `${moduleName}:${h.lineno}` : h.funcname;
+        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';
@@ -1158,6 +1176,7 @@ function accumulateInvertedNode(parent, stackFrame, leaf) {
   if (!parent.children[key]) {
     parent.children[key] = {
       name: stackFrame.name,
+      name_module: stackFrame.name_module,
       value: 0,
       children: {},
       filename: stackFrame.filename,
@@ -1220,6 +1239,7 @@ function convertInvertDictToArray(node) {
 function generateInvertedFlamegraph(data) {
   const invertedRoot = {
     name: data.name,
+    name_module: data.name_module,
     value: data.value,
     children: {},
     stats: data.stats,
@@ -1258,6 +1278,19 @@ function toggleInvert() {
   renderFlamegraph(chart, dataToRender);
 }
 
+function togglePathDisplay() {
+  useModuleNames = !useModuleNames;
+  updateToggleUI('toggle-path-display', useModuleNames);
+  const dataToRender = isInverted ? invertedData : normalData;
+  const filteredData = currentThreadFilter !== 'all'
+    ? filterDataByThread(dataToRender, parseInt(currentThreadFilter))
+    : dataToRender;
+
+  const tooltip = createPythonTooltip(filteredData);
+  const chart = createFlamegraph(tooltip, filteredData.value);
+  renderFlamegraph(chart, filteredData);
+}
+
 // ============================================================================
 // Initialization
 // ============================================================================
@@ -1293,6 +1326,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

@@ -109,6 +109,13 @@ <h3 class="section-title">View Mode</h3>
                   <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </button>
+              <div class="section-content">
+                <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="Full Paths">Full Paths</span>
+                  <div class="toggle-track on"></div>
+                  <span class="toggle-label active" data-text="Module Names">Module Names</span>
+                </div>
+              </div>
               <div class="section-content">
                 <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>

Lib/profiling/sampling/stack_collector.py

@@ -170,7 +170,23 @@ def export(self, filename):
 
     @staticmethod
     @functools.lru_cache(maxsize=None)
-    def _format_function_name(func, module_name):
+    def _format_function_name(func):
+        filename, lineno, funcname = func
+
+        # Special frames like <GC> and <native> should not show file:line
+        if filename == "~" and lineno == 0:
+            return funcname
+
+        if len(filename) > 50:
+            parts = filename.split("/")
+            if len(parts) > 2:
+                filename = f".../{'/'.join(parts[-2:])}"
+
+        return f"{funcname} ({filename}:{lineno})"
+
+    @staticmethod
+    @functools.lru_cache(maxsize=None)
+    def _format_module_name(func, module_name):
         filename, lineno, funcname = func
 
         # Special frames like <GC> and <native> should not show file:line
@@ -209,10 +225,12 @@ def convert_children(children, min_samples, path_info):
                 module_name = self._get_module_name(func[0], path_info)
 
                 module_name_idx = self._string_table.intern(module_name)
-                name_idx = self._string_table.intern(self._format_function_name(func, module_name))
+                name_idx = self._string_table.intern(self._format_function_name(func))
+                name_module_idx = self._string_table.intern(self._format_module_name(func, module_name))
 
                 child_entry = {
                     "name": name_idx,
+                    "name_module": name_module_idx,
                     "value": samples,
                     "children": [],
                     "filename": filename_idx,

Lib/test/test_profiling/test_sampling_profiler/test_collectors.py

@@ -430,7 +430,7 @@ def test_flamegraph_collector_basic(self):
         )
         self.assertIsInstance(name, str)
         self.assertTrue(name.startswith("Program Root: "))
-        self.assertIn("func2 (file:20)", name)
+        self.assertIn("func2 (file.py:20)", name)
         children = data.get("children", [])
         self.assertEqual(len(children), 1)
         child = children[0]
@@ -441,7 +441,7 @@ def test_flamegraph_collector_basic(self):
             and 0 <= child_name_index < len(strings)
             else str(child_name_index)
         )
-        self.assertIn("func1 (file:10)", child_name)
+        self.assertIn("func1 (file.py:10)", child_name)
         self.assertEqual(child["value"], 1)
 
     def test_flamegraph_collector_export(self):