Skip to content

Commit 340a684

Browse files
gh-138122: Add docs button to Tachyon heatmap and flamegraph (#142614)
1 parent f564654 commit 340a684

File tree

8 files changed

+87
-12
lines changed

8 files changed

+87
-12
lines changed

Lib/profiling/sampling/_flamegraph_assets/flamegraph.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,8 @@ function toggleTheme() {
9292
// Update theme button icon
9393
const btn = document.getElementById('theme-btn');
9494
if (btn) {
95-
btn.innerHTML = next === 'dark' ? '☼' : '☾'; // sun or moon
95+
btn.querySelector('.icon-moon').style.display = next === 'dark' ? 'none' : '';
96+
btn.querySelector('.icon-sun').style.display = next === 'dark' ? '' : 'none';
9697
}
9798

9899
// Re-render flamegraph with new theme colors
@@ -160,7 +161,8 @@ function restoreUIState() {
160161
document.documentElement.setAttribute('data-theme', savedTheme);
161162
const btn = document.getElementById('theme-btn');
162163
if (btn) {
163-
btn.innerHTML = savedTheme === 'dark' ? '☼' : '☾';
164+
btn.querySelector('.icon-moon').style.display = savedTheme === 'dark' ? 'none' : '';
165+
btn.querySelector('.icon-sun').style.display = savedTheme === 'dark' ? '' : 'none';
164166
}
165167
}
166168

Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,43 @@
3939
class="toolbar-btn"
4040
onclick="resetZoom()"
4141
title="Reset zoom"
42-
>&#8962;</button>
42+
>
43+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
44+
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
45+
</svg>
46+
</button>
4347
<button
4448
class="toolbar-btn"
4549
onclick="exportSVG()"
4650
title="Export SVG"
47-
>&#8595;</button>
51+
>
52+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
53+
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
54+
</svg>
55+
</button>
56+
<a
57+
class="toolbar-btn"
58+
href="https://docs.python.org/<!-- PYTHON_VERSION -->/library/profiling.sampling.html"
59+
target="_blank"
60+
title="Documentation"
61+
>
62+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
63+
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/>
64+
</svg>
65+
</a>
4866
<button
4967
class="toolbar-btn theme-toggle"
5068
onclick="toggleTheme()"
5169
title="Toggle theme"
5270
id="theme-btn"
53-
>&#9790;</button>
71+
>
72+
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
73+
<path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286"/>
74+
</svg>
75+
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="display:none">
76+
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
77+
</svg>
78+
</button>
5479
</div>
5580
</header>
5681

Lib/profiling/sampling/_heatmap_assets/heatmap.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ function toggleTheme() {
2424
// Update theme button icon
2525
const btn = document.getElementById('theme-btn');
2626
if (btn) {
27-
btn.innerHTML = next === 'dark' ? '&#9788;' : '&#9790;'; // sun or moon
27+
btn.querySelector('.icon-moon').style.display = next === 'dark' ? 'none' : '';
28+
btn.querySelector('.icon-sun').style.display = next === 'dark' ? '' : 'none';
2829
}
2930
applyLineColors();
3031

@@ -39,7 +40,8 @@ function restoreUIState() {
3940
document.documentElement.setAttribute('data-theme', savedTheme);
4041
const btn = document.getElementById('theme-btn');
4142
if (btn) {
42-
btn.innerHTML = savedTheme === 'dark' ? '&#9788;' : '&#9790;';
43+
btn.querySelector('.icon-moon').style.display = savedTheme === 'dark' ? 'none' : '';
44+
btn.querySelector('.icon-sun').style.display = savedTheme === 'dark' ? '' : 'none';
4345
}
4446
}
4547
}

Lib/profiling/sampling/_heatmap_assets/heatmap_index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ function toggleTheme() {
2828
// Update theme button icon
2929
const btn = document.getElementById('theme-btn');
3030
if (btn) {
31-
btn.innerHTML = next === 'dark' ? '&#9788;' : '&#9790;'; // sun or moon
31+
btn.querySelector('.icon-moon').style.display = next === 'dark' ? 'none' : '';
32+
btn.querySelector('.icon-sun').style.display = next === 'dark' ? '' : 'none';
3233
}
3334

3435
applyHeatmapBarColors();
@@ -41,7 +42,8 @@ function restoreUIState() {
4142
document.documentElement.setAttribute('data-theme', savedTheme);
4243
const btn = document.getElementById('theme-btn');
4344
if (btn) {
44-
btn.innerHTML = savedTheme === 'dark' ? '&#9788;' : '&#9790;';
45+
btn.querySelector('.icon-moon').style.display = savedTheme === 'dark' ? 'none' : '';
46+
btn.querySelector('.icon-sun').style.display = savedTheme === 'dark' ? '' : 'none';
4547
}
4648
}
4749
}

Lib/profiling/sampling/_heatmap_assets/heatmap_index_template.html

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,29 @@
1717
<span class="brand-subtitle">Heatmap Report</span>
1818
</div>
1919
<div class="toolbar">
20+
<a
21+
class="toolbar-btn"
22+
href="https://docs.python.org/<!-- PYTHON_VERSION -->/library/profiling.sampling.html"
23+
target="_blank"
24+
title="Documentation"
25+
>
26+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27+
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/>
28+
</svg>
29+
</a>
2030
<button
2131
class="toolbar-btn theme-toggle"
2232
onclick="toggleTheme()"
2333
title="Toggle theme"
2434
id="theme-btn"
25-
>&#9790;</button>
35+
>
36+
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
37+
<path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286"/>
38+
</svg>
39+
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="display:none">
40+
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
41+
</svg>
42+
</button>
2643
</div>
2744
</header>
2845

Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,35 @@
1717
<span class="brand-subtitle" style="font-family: var(--font-mono); font-size: 13px;"><!-- FILENAME --></span>
1818
</div>
1919
<div class="toolbar">
20-
<a href="index.html" class="toolbar-btn" title="Back to Index" aria-label="Back to Index">&#8962;</a>
20+
<a href="index.html" class="toolbar-btn" title="Back to Index" aria-label="Back to Index">
21+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
22+
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
23+
</svg>
24+
</a>
25+
<a
26+
class="toolbar-btn"
27+
href="https://docs.python.org/<!-- PYTHON_VERSION -->/library/profiling.sampling.html"
28+
target="_blank"
29+
title="Documentation"
30+
>
31+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
32+
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/>
33+
</svg>
34+
</a>
2135
<button
2236
class="toolbar-btn theme-toggle"
2337
onclick="toggleTheme()"
2438
title="Toggle theme"
2539
aria-label="Toggle theme"
2640
id="theme-btn"
27-
>&#9790;</button>
41+
>
42+
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
43+
<path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286"/>
44+
</svg>
45+
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="display:none">
46+
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
47+
</svg>
48+
</button>
2849
</div>
2950
</header>
3051

Lib/profiling/sampling/heatmap_collector.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -858,6 +858,7 @@ def _generate_index_html(self, index_path: Path, file_stats: List[FileStats]):
858858
"<!-- INLINE_CSS -->": f"<style>\n{self._template_loader.index_css}\n</style>",
859859
"<!-- INLINE_JS -->": f"<script>\n{self._template_loader.index_js}\n</script>",
860860
"<!-- PYTHON_LOGO -->": self._template_loader.logo_html,
861+
"<!-- PYTHON_VERSION -->": f"{sys.version_info.major}.{sys.version_info.minor}",
861862
"<!-- NUM_FILES -->": str(len(file_stats)),
862863
"<!-- TOTAL_SAMPLES -->": f"{self._total_samples:,}",
863864
"<!-- DURATION -->": f"{self.stats.get('duration_sec', 0):.1f}s",
@@ -915,6 +916,7 @@ def _generate_file_html(self, output_path: Path, filename: str,
915916
"<!-- INLINE_CSS -->": f"<style>\n{self._template_loader.file_css}\n</style>",
916917
"<!-- INLINE_JS -->": f"<script>\n{self._template_loader.file_js}\n</script>",
917918
"<!-- PYTHON_LOGO -->": self._template_loader.logo_html,
919+
"<!-- PYTHON_VERSION -->": f"{sys.version_info.major}.{sys.version_info.minor}",
918920
}
919921

920922
html_content = self._template_loader.file_template

Lib/profiling/sampling/stack_collector.py

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import json
66
import linecache
77
import os
8+
import sys
89

910
from ._css_utils import get_combined_css
1011
from .collector import Collector, extract_lineno
@@ -393,6 +394,9 @@ def _create_flamegraph_html(self, data):
393394
# Let CSS control size; keep markup simple
394395
logo_html = f'<img src="data:image/png;base64,{b64_logo}" alt="Tachyon logo"/>'
395396
html_template = html_template.replace("<!-- INLINE_LOGO -->", logo_html)
397+
html_template = html_template.replace(
398+
"<!-- PYTHON_VERSION -->", f"{sys.version_info.major}.{sys.version_info.minor}"
399+
)
396400

397401
d3_js = d3_path.read_text(encoding="utf-8")
398402
fg_css = fg_css_path.read_text(encoding="utf-8")

0 commit comments

Comments
 (0)