Stowage/cpython
2
0
Fork 0
mirror of https://github.com/python/cpython.git synced 2025-12-31 04:23:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

gh-138122: Make Tachyon flamegraph and heatmap output more similar (#142590)

Browse source
This commit is contained in:
Stan Ulbrych 2025-12-11 21:28:42 +00:00 • committed by GitHub
parent 0a62f8277e
commit 2eca80ffab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 67 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

34
Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
View file

@ -329,34 +329,44 @@ .summary-card {
gap: 8px;
padding: 8px 10px;
background: var(--bg-primary);
border: 1px solid var(--border);
border: 2px solid var(--border);
border-radius: 8px;
transition: all var(--transition-fast);
animation: slideUp 0.4s ease-out backwards;
animation-delay: calc(var(--i, 0) * 0.05s);
animation-delay: calc(var(--i, 0) * 0.08s);
overflow: hidden;
position: relative;
}
.summary-card:nth-child(1) { --i: 0; }
.summary-card:nth-child(2) { --i: 1; }
.summary-card:nth-child(3) { --i: 2; }
.summary-card:nth-child(4) { --i: 3; }
.summary-card:nth-child(1) { --i: 0; --card-color: 55, 118, 171; }
.summary-card:nth-child(2) { --i: 1; --card-color: 40, 167, 69; }
.summary-card:nth-child(3) { --i: 2; --card-color: 255, 193, 7; }
.summary-card:nth-child(4) { --i: 3; --card-color: 111, 66, 193; }
.summary-card:hover {
border-color: var(--accent);
background: var(--accent-glow);
border-color: rgba(var(--card-color), 0.6);
background: linear-gradient(135deg, rgba(var(--card-color), 0.08) 0%, var(--bg-primary) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--card-color), 0.15);
}
.summary-icon {
font-size: 16px;
font-size: 14px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
background: linear-gradient(135deg, rgba(var(--card-color), 0.15) 0%, rgba(var(--card-color), 0.05) 100%);
border: 1px solid rgba(var(--card-color), 0.2);
border-radius: 6px;
flex-shrink: 0;
transition: all var(--transition-fast);
}
.summary-card:hover .summary-icon {
transform: scale(1.05);
background: linear-gradient(135deg, rgba(var(--card-color), 0.25) 0%, rgba(var(--card-color), 0.1) 100%);
}
.summary-data {
@ -368,8 +378,8 @@ .summary-data {
.summary-value {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--accent);
font-weight: 800;
color: rgb(var(--card-color));
line-height: 1.2;
white-space: nowrap;
overflow: hidden;

32
Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
View file

@ -187,6 +187,27 @@ function restoreUIState() {
}
}
// ============================================================================
// Logo/Favicon Setup
// ============================================================================
function setupLogos() {
const logo = document.querySelector('.sidebar-logo-img img');
if (!logo) return;
const navbarLogoContainer = document.getElementById('navbar-logo');
if (navbarLogoContainer) {
const navbarLogo = logo.cloneNode(true);
navbarLogoContainer.appendChild(navbarLogo);
}
const favicon = document.createElement('link');
favicon.rel = 'icon';
favicon.type = 'image/png';
favicon.href = logo.src;
document.head.appendChild(favicon);
}
// ============================================================================
// Status Bar
// ============================================================================
@ -198,6 +219,11 @@ function updateStatusBar(nodeData, rootValue) {
const timeMs = (nodeData.value / 1000).toFixed(2);
const percent = rootValue > 0 ? ((nodeData.value / rootValue) * 100).toFixed(1) : "0.0";
const brandEl = document.getElementById('status-brand');
const taglineEl = document.getElementById('status-tagline');
if (brandEl) brandEl.style.display = 'none';
if (taglineEl) taglineEl.style.display = 'none';
const locationEl = document.getElementById('status-location');
const funcItem = document.getElementById('status-func-item');
const timeItem = document.getElementById('status-time-item');
@ -230,6 +256,11 @@ function clearStatusBar() {
const el = document.getElementById(id);
if (el) el.style.display = 'none';
});
const brandEl = document.getElementById('status-brand');
const taglineEl = document.getElementById('status-tagline');
if (brandEl) brandEl.style.display = 'flex';
if (taglineEl) taglineEl.style.display = 'flex';
}
// ============================================================================
@ -1065,6 +1096,7 @@ function exportSVG() {
function initFlamegraph() {
ensureLibraryLoaded();
restoreUIState();
setupLogos();
let processedData = EMBEDDED_DATA;
if (EMBEDDED_DATA.strings) {

11
Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tachyon Profiler - Flamegraph</title>
<title>Tachyon Profiler - Flamegraph Report</title>
<!-- INLINE_VENDOR_D3_JS -->
<!-- INLINE_VENDOR_FLAMEGRAPH_CSS -->
<!-- INLINE_VENDOR_FLAMEGRAPH_JS -->
@ -15,9 +15,10 @@
<!-- Top Bar -->
<header class="top-bar">
<div class="brand">
<div class="brand-logo" id="navbar-logo"></div>
<span class="brand-text">Tachyon</span>
<span class="brand-divider"></span>
<span class="brand-subtitle">Profiler</span>
<span class="brand-subtitle">Flamegraph Report</span>
</div>
<div class="search-wrapper">
<input
@ -290,6 +291,12 @@ <h3 class="section-title">Heat Map</h3>
<!-- Status Bar -->
<footer class="status-bar">
<span class="status-item" id="status-brand">
<span class="status-value">Tachyon Profiler</span>
</span>
<span class="status-item" id="status-tagline">
<span class="status-label">Python Sampling Profiler</span>
</span>
<span class="status-item" id="status-location" style="display: none;">
<span class="status-label">File:</span>
<span class="status-value" id="status-file">--</span>

18
Lib/profiling/sampling/_heatmap_assets/heatmap.css
View file

@ -20,24 +20,6 @@ .top-bar {
z-index: 100;
}
/* Back link in toolbar */
.back-link {
color: white;
text-decoration: none;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
font-size: 13px;
font-weight: 500;
transition: all var(--transition-fast);
}
.back-link:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.35);
}
/* --------------------------------------------------------------------------
Main Content Area
-------------------------------------------------------------------------- */

2
Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
View file

@ -17,7 +17,7 @@
<span class="brand-subtitle" style="font-family: var(--font-mono); font-size: 13px;"><!-- FILENAME --></span>
</div>
<div class="toolbar">
<a href="index.html" class="back-link">Back to Index</a>
<a href="index.html" class="toolbar-btn" title="Back to Index" aria-label="Back to Index">&#8962;</a>
<button
class="toolbar-btn theme-toggle"
onclick="toggleTheme()"

4
Lib/profiling/sampling/_shared_assets/base.css
View file

@ -292,6 +292,7 @@ .toolbar-btn {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: all var(--transition-fast);
}
@ -385,7 +386,8 @@ @keyframes shimmer {
button:focus-visible,
select:focus-visible,
input:focus-visible {
input:focus-visible,
a.toolbar-btn:focus-visible {
outline: 2px solid var(--python-gold);
outline-offset: 2px;
}