Merge branch 'main' into main

Author: Morteza-24

Lib/profiling/sampling/__init__.py

@@ -7,5 +7,6 @@
 from .collector import Collector
 from .pstats_collector import PstatsCollector
 from .stack_collector import CollapsedStackCollector
+from .string_table import StringTable
 
-__all__ = ("Collector", "PstatsCollector", "CollapsedStackCollector")
+__all__ = ("Collector", "PstatsCollector", "CollapsedStackCollector", "StringTable")

Lib/profiling/sampling/flamegraph.css

@@ -403,3 +403,27 @@ body {
   margin: 0;
   padding: 12px 0;
 }
+
+/* Tooltip overflow fixes */
+.python-tooltip {
+  max-width: 500px !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+  box-sizing: border-box !important;
+}
+
+/* Responsive tooltip adjustments */
+@media (max-width: 768px) {
+  .python-tooltip {
+    max-width: calc(100vw - 40px) !important;
+    max-height: calc(100vh - 80px) !important;
+    overflow-y: auto !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .python-tooltip {
+    max-width: calc(100vw - 20px) !important;
+    font-size: 12px !important;
+  }
+}

Lib/profiling/sampling/flamegraph.js

@@ -1,5 +1,50 @@
 const EMBEDDED_DATA = {{FLAMEGRAPH_DATA}};
 
+// Global string table for resolving string indices
+let stringTable = [];
+
+// Function to resolve string indices to actual strings
+function resolveString(index) {
+    if (typeof index === 'number' && index >= 0 && index < stringTable.length) {
+        return stringTable[index];
+    }
+    // Fallback for non-indexed strings or invalid indices
+    return String(index);
+}
+
+// Function to recursively resolve all string indices in flamegraph data
+function resolveStringIndices(node) {
+    if (!node) return node;
+
+    // Create a copy to avoid mutating the original
+    const resolved = { ...node };
+
+    // Resolve string fields
+    if (typeof resolved.name === 'number') {
+        resolved.name = resolveString(resolved.name);
+    }
+    if (typeof resolved.filename === 'number') {
+        resolved.filename = resolveString(resolved.filename);
+    }
+    if (typeof resolved.funcname === 'number') {
+        resolved.funcname = resolveString(resolved.funcname);
+    }
+
+    // Resolve source lines if present
+    if (Array.isArray(resolved.source)) {
+        resolved.source = resolved.source.map(index =>
+            typeof index === 'number' ? resolveString(index) : index
+        );
+    }
+
+    // Recursively resolve children
+    if (Array.isArray(resolved.children)) {
+        resolved.children = resolved.children.map(child => resolveStringIndices(child));
+    }
+
+    return resolved;
+}
+
 // Python color palette - cold to hot
 const pythonColors = [
   "#fff4bf", // Coldest - light yellow (<1%)
@@ -42,6 +87,8 @@ function createPythonTooltip(data) {
         .style("font-weight", "400")
         .style("line-height", "1.5")
         .style("max-width", "500px")
+        .style("word-wrap", "break-word")
+        .style("overflow-wrap", "break-word")
         .style("font-family", "'Source Sans Pro', sans-serif")
         .style("opacity", 0);
     }
@@ -61,7 +108,7 @@ function createPythonTooltip(data) {
             `<div style="font-family: 'SF Mono', 'Monaco', 'Consolas', ` +
             `monospace; font-size: 12px; color: ${
               line.startsWith("→") ? "#3776ab" : "#5a6c7d"
-            }; white-space: pre; line-height: 1.4; padding: 2px 0;">${line
+            }; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; line-height: 1.4; padding: 2px 0;">${line
               .replace(/&/g, "&amp;")
               .replace(/</g, "&lt;")
               .replace(/>/g, "&gt;")}</div>`,
@@ -77,7 +124,7 @@ function createPythonTooltip(data) {
           </div>
           <div style="background: #f8f9fa; border: 1px solid #e9ecef;
                       border-radius: 6px; padding: 12px; max-height: 150px;
-                      overflow-y: auto;">
+                      overflow-y: auto; overflow-x: hidden;">
             ${sourceLines}
           </div>
         </div>`;
@@ -92,22 +139,26 @@ function createPythonTooltip(data) {
           </div>
           <div style="background: #f8f9fa; border: 1px solid #e9ecef;
                       border-radius: 6px; padding: 12px; max-height: 150px;
-                      overflow-y: auto; font-family: monospace; font-size: 11px;">
+                      overflow-y: auto; overflow-x: hidden; font-family: monospace; font-size: 11px; word-break: break-all; overflow-wrap: break-word;">
             ${JSON.stringify(source, null, 2)}
           </div>
         </div>`;
     }
 
+    // Resolve strings for display
+    const funcname = resolveString(d.data.funcname) || resolveString(d.data.name);
+    const filename = resolveString(d.data.filename) || "";
+
     const tooltipHTML = `
       <div>
         <div style="color: #3776ab; font-weight: 600; font-size: 16px;
-                    margin-bottom: 8px; line-height: 1.3;">
-          ${d.data.funcname || d.data.name}
+                    margin-bottom: 8px; line-height: 1.3; word-break: break-word; overflow-wrap: break-word;">
+          ${funcname}
         </div>
         <div style="color: #5a6c7d; font-size: 13px; margin-bottom: 12px;
                     font-family: monospace; background: #f8f9fa;
-                    padding: 4px 8px; border-radius: 4px;">
-          ${d.data.filename || ""}${d.data.lineno ? ":" + d.data.lineno : ""}
+                    padding: 4px 8px; border-radius: 4px; word-break: break-all; overflow-wrap: break-word;">
+          ${filename}${d.data.lineno ? ":" + d.data.lineno : ""}
         </div>
         <div style="display: grid; grid-template-columns: auto 1fr;
                     gap: 8px 16px; font-size: 14px;">
@@ -255,9 +306,9 @@ function updateSearchHighlight(searchTerm, searchInput) {
     let matchCount = 0;
     d3.selectAll("#chart rect").each(function (d) {
       if (d && d.data) {
-        const name = d.data.name || "";
-        const funcname = d.data.funcname || "";
-        const filename = d.data.filename || "";
+        const name = resolveString(d.data.name) || "";
+        const funcname = resolveString(d.data.funcname) || "";
+        const filename = resolveString(d.data.filename) || "";
         const term = searchTerm.toLowerCase();
         const matches =
           name.toLowerCase().includes(term) ||
@@ -315,12 +366,20 @@ function handleResize(chart, data) {
 
 function initFlamegraph() {
   ensureLibraryLoaded();
-  const tooltip = createPythonTooltip(EMBEDDED_DATA);
-  const chart = createFlamegraph(tooltip, EMBEDDED_DATA.value);
-  renderFlamegraph(chart, EMBEDDED_DATA);
+
+  // Extract string table if present and resolve string indices
+  let processedData = EMBEDDED_DATA;
+  if (EMBEDDED_DATA.strings) {
+    stringTable = EMBEDDED_DATA.strings;
+    processedData = resolveStringIndices(EMBEDDED_DATA);
+  }
+
+  const tooltip = createPythonTooltip(processedData);
+  const chart = createFlamegraph(tooltip, processedData.value);
+  renderFlamegraph(chart, processedData);
   attachPanelControls();
   initSearchHandlers();
-  handleResize(chart, EMBEDDED_DATA);
+  handleResize(chart, processedData);
 }
 
 if (document.readyState === "loading") {
@@ -336,7 +395,10 @@ function populateStats(data) {
   const functionMap = new Map();
 
   function collectFunctions(node) {
-    if (node.filename && node.funcname) {
+    const filename = resolveString(node.filename);
+    const funcname = resolveString(node.funcname);
+
+    if (filename && funcname) {
       // Calculate direct samples (this node's value minus children's values)
       let childrenValue = 0;
       if (node.children) {
@@ -345,23 +407,23 @@ function populateStats(data) {
       const directSamples = Math.max(0, node.value - childrenValue);
 
       // Use file:line:funcname as key to ensure uniqueness
-      const funcKey = `${node.filename}:${node.lineno || '?'}:${node.funcname}`;
+      const funcKey = `${filename}:${node.lineno || '?'}:${funcname}`;
 
       if (functionMap.has(funcKey)) {
         const existing = functionMap.get(funcKey);
         existing.directSamples += directSamples;
         existing.directPercent = (existing.directSamples / totalSamples) * 100;
         // Keep the most representative file/line (the one with more samples)
         if (directSamples > existing.maxSingleSamples) {
-          existing.filename = node.filename;
+          existing.filename = filename;
           existing.lineno = node.lineno || '?';
           existing.maxSingleSamples = directSamples;
         }
       } else {
         functionMap.set(funcKey, {
-          filename: node.filename,
+          filename: filename,
           lineno: node.lineno || '?',
-          funcname: node.funcname,
+          funcname: funcname,
           directSamples,
           directPercent: (directSamples / totalSamples) * 100,
           maxSingleSamples: directSamples