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

@@ -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!
@@ -67,6 +68,9 @@ function resolveStringIndices(node, table) {
   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;
+}
+
 function selectFlamegraphData() {
   const baseData = isShowingElided ? elidedFlamegraphData : normalData;
 
@@ -258,7 +270,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');
@@ -309,7 +322,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
@@ -378,7 +392,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>`;
 
     // Differential stats section
     let diffSection = "";
@@ -595,6 +609,7 @@ function createFlamegraph(tooltip, rootValue, data) {
     .minFrameSize(1)
     .tooltip(tooltip)
     .inverted(true)
+    .getName(d => resolveString(useModuleNames ? d.data.name_module : d.data.name) || resolveString(d.data.name) || '')
     .setColorMapper(function (d) {
       if (d.depth === 0) return 'transparent';
 
@@ -638,24 +653,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) {
@@ -1141,7 +1156,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)}%`;
@@ -1158,8 +1174,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';
@@ -1291,6 +1309,7 @@ function accumulateInvertedNode(parent, stackFrame, leaf, isDifferential) {
   if (!parent.children[key]) {
     const newNode = {
       name: stackFrame.name,
+      name_module: stackFrame.name_module,
       value: 0,
       self: 0,
       children: {},
@@ -1390,6 +1409,7 @@ function generateInvertedFlamegraph(data) {
 
   const invertedRoot = {
     name: data.name,
+    name_module: data.name_module,
     value: data.value,
     children: {},
     stats: data.stats,
@@ -1414,6 +1434,19 @@ function toggleInvert() {
   updateFlamegraphView();
 }
 
+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
 // ============================================================================
@@ -1461,6 +1494,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="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 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>

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,
                     "self": node.get("self", 0),
                     "children": [],