Skip to content

Commit 59ede34

Browse files
ivonastojanovicivonastojanovic
authored
gh-138122: Convert GIL/GC/exception stats from tiles to progress bars (#143177)
1 parent b9a4806 commit 59ede34

File tree

3 files changed

+110
-90
lines changed

3 files changed

+110
-90
lines changed

‎Lib/profiling/sampling/_flamegraph_assets/flamegraph.css‎

Lines changed: 39 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -405,43 +405,40 @@ body.resizing-sidebar {
405405
text-overflow: ellipsis;
406406
}
407407

408-
/* Efficiency Bar */
409-
.efficiency-section {
410-
margin-top: 10px;
411-
padding-top: 10px;
412-
border-top: 1px solid var(--border);
413-
}
408+
/* --------------------------------------------------------------------------
409+
Progress Bars
410+
-------------------------------------------------------------------------- */
414411

415-
.efficiency-header {
412+
.bar-header {
416413
display: flex;
417414
justify-content: space-between;
418415
align-items: center;
419416
margin-bottom: 5px;
420417
}
421418

422-
.efficiency-label {
419+
.bar-label {
423420
font-size: 9px;
424421
font-weight: 600;
425422
color: var(--text-secondary);
426423
text-transform: uppercase;
427424
letter-spacing: 0.2px;
428425
}
429426

430-
.efficiency-value {
427+
.bar-value {
431428
font-family: var(--font-mono);
432429
font-size: 11px;
433430
font-weight: 700;
434431
color: var(--accent);
435432
}
436433

437-
.efficiency-bar {
434+
.bar {
438435
height: 6px;
439436
background: var(--bg-tertiary);
440437
border-radius: 3px;
441438
overflow: hidden;
442439
}
443440

444-
.efficiency-fill {
441+
.bar-fill {
445442
height: 100%;
446443
background: linear-gradient(90deg, #28a745 0%, #20c997 50%, #17a2b8 100%);
447444
border-radius: 3px;
@@ -450,7 +447,7 @@ body.resizing-sidebar {
450447
overflow: hidden;
451448
}
452449

453-
.efficiency-fill::after {
450+
.bar-fill::after {
454451
content: '';
455452
position: absolute;
456453
top: 0;
@@ -467,68 +464,56 @@ body.resizing-sidebar {
467464
}
468465

469466
/* --------------------------------------------------------------------------
470-
Thread Stats Grid (in Sidebar)
467+
Efficiency Section Container
468+
-------------------------------------------------------------------------- */
469+
470+
.efficiency-section {
471+
margin-top: 10px;
472+
padding-top: 10px;
473+
border-top: 1px solid var(--border);
474+
}
475+
476+
/* --------------------------------------------------------------------------
477+
Thread Stats Progress Bars (in Sidebar)
471478
-------------------------------------------------------------------------- */
472479

473480
.thread-stats-section {
474481
display: block;
475482
}
476483

477-
.stats-grid {
478-
display: grid;
479-
grid-template-columns: 1fr 1fr;
480-
gap: 8px;
484+
.stats-container {
485+
display: flex;
486+
flex-direction: column;
487+
gap: 10px;
481488
}
482489

483-
.stat-tile {
484-
background: var(--bg-primary);
485-
border-radius: 8px;
486-
padding: 10px;
487-
text-align: center;
488-
border: 2px solid var(--border);
489-
transition: all var(--transition-fast);
490+
.stat-item {
490491
animation: fadeIn 0.4s ease-out backwards;
491492
animation-delay: calc(var(--i, 0) * 0.05s);
492493
}
493494

494-
.stat-tile:nth-child(1) { --i: 0; }
495-
.stat-tile:nth-child(2) { --i: 1; }
496-
.stat-tile:nth-child(3) { --i: 2; }
497-
.stat-tile:nth-child(4) { --i: 3; }
495+
.stat-item:nth-child(1) { --i: 0; }
496+
.stat-item:nth-child(2) { --i: 1; }
497+
.stat-item:nth-child(3) { --i: 2; }
498+
.stat-item:nth-child(4) { --i: 3; }
499+
.stat-item:nth-child(5) { --i: 4; }
498500

499-
.stat-tile:hover {
500-
transform: translateY(-2px);
501-
box-shadow: var(--shadow-sm);
501+
/* Color variants for bar-fill */
502+
.bar-fill--green {
503+
background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
502504
}
503505

504-
.stat-tile-value {
505-
font-family: var(--font-mono);
506-
font-size: 16px;
507-
font-weight: 700;
508-
color: var(--text-primary);
509-
line-height: 1.2;
506+
.bar-fill--yellow {
507+
background: linear-gradient(90deg, #ffc107 0%, #ffdb4d 100%);
510508
}
511509

512-
.stat-tile-label {
513-
font-size: 9px;
514-
font-weight: 600;
515-
text-transform: uppercase;
516-
letter-spacing: 0.3px;
517-
color: var(--text-muted);
518-
margin-top: 2px;
510+
.bar-fill--purple {
511+
background: linear-gradient(90deg, #6f42c1 0%, #9b6dd6 100%);
519512
}
520513

521-
/* Stat tile color variants */
522-
.stat-tile--green { --tile-color: 40, 167, 69; --tile-text: #28a745; }
523-
.stat-tile--red { --tile-color: 220, 53, 69; --tile-text: #dc3545; }
524-
.stat-tile--yellow { --tile-color: 255, 193, 7; --tile-text: #d39e00; }
525-
.stat-tile--purple { --tile-color: 111, 66, 193; --tile-text: #6f42c1; }
526-
527-
.stat-tile[class*="--"] {
528-
border-color: rgba(var(--tile-color), 0.4);
529-
background: linear-gradient(135deg, rgba(var(--tile-color), 0.08) 0%, var(--bg-primary) 100%);
514+
.bar-fill--red {
515+
background: linear-gradient(90deg, #dc3545 0%, #ff6b7a 100%);
530516
}
531-
.stat-tile[class*="--"] .stat-tile-value { color: var(--tile-text); }
532517

533518
/* --------------------------------------------------------------------------
534519
Hotspot Cards
@@ -985,10 +970,6 @@ body.resizing-sidebar {
985970
.brand-info {
986971
display: none;
987972
}
988-
989-
.stats-grid {
990-
grid-template-columns: 1fr;
991-
}
992973
}
993974

994975
/* --------------------------------------------------------------------------

‎Lib/profiling/sampling/_flamegraph_assets/flamegraph.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -742,24 +742,38 @@ function populateThreadStats(data, selectedThreadId = null) {
742742
if (gilReleasedStat) gilReleasedStat.style.display = 'block';
743743
if (gilWaitingStat) gilWaitingStat.style.display = 'block';
744744

745+
const gilHeldPct = threadStats.has_gil_pct || 0;
745746
const gilHeldPctElem = document.getElementById('gil-held-pct');
746-
if (gilHeldPctElem) gilHeldPctElem.textContent = `${(threadStats.has_gil_pct || 0).toFixed(1)}%`;
747+
if (gilHeldPctElem) gilHeldPctElem.textContent = `${gilHeldPct.toFixed(1)}%`;
748+
const gilHeldFill = document.getElementById('gil-held-fill');
749+
if (gilHeldFill) gilHeldFill.style.width = `${gilHeldPct}%`;
747750

748-
const gilReleasedPctElem = document.getElementById('gil-released-pct');
749751
// GIL Released = not holding GIL and not waiting for it
750752
const gilReleasedPct = Math.max(0, 100 - (threadStats.has_gil_pct || 0) - (threadStats.gil_requested_pct || 0));
753+
const gilReleasedPctElem = document.getElementById('gil-released-pct');
751754
if (gilReleasedPctElem) gilReleasedPctElem.textContent = `${gilReleasedPct.toFixed(1)}%`;
755+
const gilReleasedFill = document.getElementById('gil-released-fill');
756+
if (gilReleasedFill) gilReleasedFill.style.width = `${gilReleasedPct}%`;
752757

758+
const gilWaitingPct = threadStats.gil_requested_pct || 0;
753759
const gilWaitingPctElem = document.getElementById('gil-waiting-pct');
754-
if (gilWaitingPctElem) gilWaitingPctElem.textContent = `${(threadStats.gil_requested_pct || 0).toFixed(1)}%`;
760+
if (gilWaitingPctElem) gilWaitingPctElem.textContent = `${gilWaitingPct.toFixed(1)}%`;
761+
const gilWaitingFill = document.getElementById('gil-waiting-fill');
762+
if (gilWaitingFill) gilWaitingFill.style.width = `${gilWaitingPct}%`;
755763
}
756764

765+
const gcPct = threadStats.gc_pct || 0;
757766
const gcPctElem = document.getElementById('gc-pct');
758-
if (gcPctElem) gcPctElem.textContent = `${(threadStats.gc_pct || 0).toFixed(1)}%`;
767+
if (gcPctElem) gcPctElem.textContent = `${gcPct.toFixed(1)}%`;
768+
const gcFill = document.getElementById('gc-fill');
769+
if (gcFill) gcFill.style.width = `${gcPct}%`;
759770

760771
// Exception stats
772+
const excPct = threadStats.has_exception_pct || 0;
761773
const excPctElem = document.getElementById('exc-pct');
762-
if (excPctElem) excPctElem.textContent = `${(threadStats.has_exception_pct || 0).toFixed(1)}%`;
774+
if (excPctElem) excPctElem.textContent = `${excPct.toFixed(1)}%`;
775+
const excFill = document.getElementById('exc-fill');
776+
if (excFill) excFill.style.width = `${excPct}%`;
763777
}
764778

765779
// ============================================================================

‎Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html‎

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -159,21 +159,21 @@ <h3 class="section-title">Profile Summary</h3>
159159
</div>
160160
<!-- Efficiency Bar -->
161161
<div class="efficiency-section" id="efficiency-section" style="display: none;">
162-
<div class="efficiency-header">
163-
<span class="efficiency-label">Sampling Efficiency</span>
164-
<span class="efficiency-value" id="stat-efficiency">--</span>
162+
<div class="bar-header">
163+
<span class="bar-label">Sampling Efficiency</span>
164+
<span class="bar-value" id="stat-efficiency">--</span>
165165
</div>
166-
<div class="efficiency-bar">
167-
<div class="efficiency-fill" id="efficiency-fill"></div>
166+
<div class="bar">
167+
<div class="bar-fill" id="efficiency-fill"></div>
168168
</div>
169-
<div class="missed-samples-header">
170-
<span class="efficiency-label">Missed samples</span>
171-
<span class="efficiency-value" id="stat-missed-samples">--</span>
169+
<div class="bar-header">
170+
<span class="bar-label">Missed samples</span>
171+
<span class="bar-value" id="stat-missed-samples">--</span>
172172
</div>
173-
<div class="efficiency-bar">
174-
<div class="efficiency-fill" id="missed-samples-fill"></div>
173+
<div class="bar">
174+
<div class="bar-fill" id="missed-samples-fill"></div>
175175
</div>
176-
176+
177177
</div>
178178
</div>
179179
</section>
@@ -187,26 +187,51 @@ <h3 class="section-title">Runtime Stats</h3>
187187
</svg>
188188
</button>
189189
<div class="section-content">
190-
<div class="stats-grid">
191-
<div class="stat-tile stat-tile--green" id="gil-held-stat">
192-
<div class="stat-tile-value" id="gil-held-pct">--</div>
193-
<div class="stat-tile-label">GIL Held</div>
190+
<div class="stats-container">
191+
<div class="stat-item" id="gil-held-stat">
192+
<div class="bar-header">
193+
<span class="bar-label">GIL Held</span>
194+
<span class="bar-value" id="gil-held-pct">--</span>
195+
</div>
196+
<div class="bar">
197+
<div class="bar-fill bar-fill--green" id="gil-held-fill"></div>
198+
</div>
194199
</div>
195-
<div class="stat-tile stat-tile--red" id="gil-released-stat">
196-
<div class="stat-tile-value" id="gil-released-pct">--</div>
197-
<div class="stat-tile-label">GIL Released</div>
200+
<div class="stat-item" id="gil-released-stat">
201+
<div class="bar-header">
202+
<span class="bar-label">GIL Released</span>
203+
<span class="bar-value" id="gil-released-pct">--</span>
204+
</div>
205+
<div class="bar">
206+
<div class="bar-fill bar-fill--red" id="gil-released-fill"></div>
207+
</div>
198208
</div>
199-
<div class="stat-tile stat-tile--yellow" id="gil-waiting-stat">
200-
<div class="stat-tile-value" id="gil-waiting-pct">--</div>
201-
<div class="stat-tile-label">Waiting GIL</div>
209+
<div class="stat-item" id="gil-waiting-stat">
210+
<div class="bar-header">
211+
<span class="bar-label">Waiting GIL</span>
212+
<span class="bar-value" id="gil-waiting-pct">--</span>
213+
</div>
214+
<div class="bar">
215+
<div class="bar-fill bar-fill--yellow" id="gil-waiting-fill"></div>
216+
</div>
202217
</div>
203-
<div class="stat-tile stat-tile--purple" id="gc-stat">
204-
<div class="stat-tile-value" id="gc-pct">--</div>
205-
<div class="stat-tile-label">GC</div>
218+
<div class="stat-item" id="gc-stat">
219+
<div class="bar-header">
220+
<span class="bar-label">GC</span>
221+
<span class="bar-value" id="gc-pct">--</span>
222+
</div>
223+
<div class="bar">
224+
<div class="bar-fill bar-fill--purple" id="gc-fill"></div>
225+
</div>
206226
</div>
207-
<div class="stat-tile stat-tile--red" id="exc-stat">
208-
<div class="stat-tile-value" id="exc-pct">--</div>
209-
<div class="stat-tile-label">Exception</div>
227+
<div class="stat-item" id="exc-stat">
228+
<div class="bar-header">
229+
<span class="bar-label">Exception</span>
230+
<span class="bar-value" id="exc-pct">--</span>
231+
</div>
232+
<div class="bar">
233+
<div class="bar-fill bar-fill--red" id="exc-fill"></div>
234+
</div>
210235
</div>
211236
</div>
212237
</div>

0 commit comments

Comments
 (0)