forked from python/cpython
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathflamegraph_template.html
More file actions
153 lines (146 loc) · 5.74 KB
/
flamegraph_template.html
File metadata and controls
153 lines (146 loc) · 5.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!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>
<div class="stats-section">
<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">ℹ</button>
<div class="info-panel" id="info-panel">
<button id="close-info-btn" title="Close">×</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>