Stowage/cpython
2
0
Fork 0
mirror of https://github.com/python/cpython.git synced 2025-12-08 06:10:17 +00:00
Code Issues Projects Releases Packages Wiki Activity
cpython/Lib/profiling/sampling/flamegraph_template.html
Pablo Galindo Salgado ea51e745c7
gh-138122: Add thread status statistics to flamegraph profiler (#141900) 
Co-authored-by: ivonastojanovic <80911834+ivonastojanovic@users.noreply.github.com>
2025-11-30 01:42:39 +00:00

177 lines
6.8 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Python Performance Flamegraph</title>
<!-- INLINE_VENDOR_D3_JS -->
<!-- INLINE_VENDOR_FLAMEGRAPH_CSS -->
<!-- INLINE_VENDOR_FLAMEGRAPH_JS -->
<!-- INLINE_VENDOR_FLAMEGRAPH_TOOLTIP_JS -->
<!-- INLINE_CSS -->
</head>
<body>
<div class="header">
<div class="header-content">
<div class="python-logo"><!-- INLINE_LOGO --></div>
<div class="header-text">
<h1>Tachyon Profiler Performance Flamegraph</h1>
<div class="subtitle">
Interactive visualization of function call performance
</div>
</div>
<div class="header-search">
<input type="text" id="search-input" placeholder="๐Ÿ” Search functions..." />
</div>
</div>
</div>
<!-- Compact Thread Stats Bar -->
<div class="thread-stats-bar" id="thread-stats-bar" style="display: none;">
<span class="thread-stat-item" id="gil-held-stat">
<span class="stat-label">๐ŸŸข GIL Held:</span>
<span class="stat-value" id="gil-held-pct">--</span>
</span>
<span class="thread-stat-separator">โ”‚</span>
<span class="thread-stat-item" id="gil-released-stat">
<span class="stat-label">๐Ÿ”ด GIL Released:</span>
<span class="stat-value" id="gil-released-pct">--</span>
</span>
<span class="thread-stat-separator">โ”‚</span>
<span class="thread-stat-item" id="gil-waiting-stat">
<span class="stat-label">๐ŸŸก Waiting:</span>
<span class="stat-value" id="gil-waiting-pct">--</span>
</span>
<span class="thread-stat-separator">โ”‚</span>
<span class="thread-stat-item" id="gc-stat">
<span class="stat-label">๐Ÿ—‘๏ธ GC:</span>
<span class="stat-value" id="gc-pct">--</span>
</span>
</div>
<div class="stats-section">
<!-- Hot Spots -->
<div class="stats-container">
<div class="stat-card hotspot-card">
<div class="stat-icon">๐Ÿฅ‡</div>
<div class="stat-content">
<div class="stat-label">#1 Hot Spot</div>
<div class="stat-file" id="hotspot-file-1">--</div>
<div class="stat-value" id="hotspot-func-1">--</div>
<div class="stat-detail" id="hotspot-detail-1">--</div>
</div>
</div>
<div class="stat-card hotspot-card">
<div class="stat-icon">๐Ÿฅˆ</div>
<div class="stat-content">
<div class="stat-label">#2 Hot Spot</div>
<div class="stat-file" id="hotspot-file-2">--</div>
<div class="stat-value" id="hotspot-func-2">--</div>
<div class="stat-detail" id="hotspot-detail-2">--</div>
</div>
</div>
<div class="stat-card hotspot-card">
<div class="stat-icon">๐Ÿฅ‰</div>
<div class="stat-content">
<div class="stat-label">#3 Hot Spot</div>
<div class="stat-file" id="hotspot-file-3">--</div>
<div class="stat-value" id="hotspot-func-3">--</div>
<div class="stat-detail" id="hotspot-detail-3">--</div>
</div>
</div>
</div>
</div>
<div class="controls">
<div class="controls-content">
<button onclick="resetZoom()">๐Ÿ  Reset Zoom</button>
<button onclick="exportSVG()" class="secondary">๐Ÿ“ Export SVG</button>
<button onclick="toggleLegend()">๐Ÿ”ฅ Heat Map Legend</button>
<div class="thread-filter-wrapper">
<label class="thread-filter-label">๐Ÿงต Thread:</label>
<select id="thread-filter" class="thread-filter-select" onchange="filterByThread()">
<option value="all">All Threads</option>
</select>
</div>
</div>
</div>
<button id="show-info-btn" title="Show navigation guide">&#8505;</button>
<div class="info-panel" id="info-panel">
<button id="close-info-btn" title="Close">&times;</button>
<h3>Navigation Guide</h3>
<p><strong>Click:</strong> Zoom into function</p>
<p><strong>Hover:</strong> Show detailed information</p>
<p><strong>Width:</strong> Time spent in function</p>
<p><strong>Height:</strong> Call stack depth</p>
<p><strong>Color:</strong> Performance intensity</p>
</div>
<div class="legend-panel" id="legend-panel">
<h3>๐Ÿ”ฅ Performance Heat Map</h3>
<div class="legend-item">
<div class="legend-color" style="background-color: #3776ab"></div>
<div>
<div class="legend-label">Hottest Functions (โ‰ฅ60%)</div>
<div class="legend-description">Highest performance impact</div>
</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #4584bb"></div>
<div>
<div class="legend-label">Very Hot Functions (35-60%)</div>
<div class="legend-description">High performance impact</div>
</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #5592cc"></div>
<div>
<div class="legend-label">Hot Functions (18-35%)</div>
<div class="legend-description">Notable performance cost</div>
</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffd43b"></div>
<div>
<div class="legend-label">Warm Functions (12-18%)</div>
<div class="legend-description">Moderate impact</div>
</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffdc5c"></div>
<div>
<div class="legend-label">Medium Functions (6-12%)</div>
<div class="legend-description">Some performance impact</div>
</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffe47d"></div>
<div>
<div class="legend-label">Cool Functions (3-6%)</div>
<div class="legend-description">Low performance impact</div>
</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffec9e"></div>
<div>
<div class="legend-label">Cold Functions (1-3%)</div>
<div class="legend-description">Minimal performance impact</div>
</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #fff4bf"></div>
<div>
<div class="legend-label">Coldest Functions (<1%)</div>
<div class="legend-description">Very low performance impact</div>
</div>
</div>
</div>
<div class="chart-container">
<div id="chart"></div>
</div>
<!-- INLINE_JS -->
</body>
</html>
Reference in a new issue View git blame Copy permalink