From bb14b6196ff16f82fc69f2ae5bb8c251c0ebabad Mon Sep 17 00:00:00 2001
From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com>
Date: Fri, 9 Oct 2026 11:33:16 +0200
Subject: [PATCH] Update Tachyon examples
---
Doc/_static/tachyon-example-flamegraph.html | 1013 ++++++++++++++-----
Doc/_static/tachyon-example-heatmap.html | 410 ++++++--
2 files changed, 1045 insertions(+), 378 deletions(-)
diff --git a/Doc/_static/tachyon-example-flamegraph.html b/Doc/_static/tachyon-example-flamegraph.html
index 701c959bda3ccc0..0563e7ce4acfe6e 100644
--- a/Doc/_static/tachyon-example-flamegraph.html
+++ b/Doc/_static/tachyon-example-flamegraph.html
@@ -1,5 +1,5 @@
-
+
@@ -166,6 +166,14 @@
/* Heatmap span highlighting colors */
--span-hot-base: 255, 100, 50;
--span-cold-base: 150, 150, 150;
+
+ /* Summary card colors - optimized for 4.5:1 contrast on light bg */
+ --card-blue: 44, 102, 149;
+ --card-green: 26, 116, 49;
+ --card-yellow: 134, 100, 4;
+ --card-purple: 102, 57, 166;
+ --card-red: 180, 40, 50;
+ --card-orange: 166, 90, 0;
}
/* Dark theme */
@@ -190,15 +198,15 @@
--header-gradient: linear-gradient(135deg, #21262d 0%, #30363d 100%);
- /* Dark mode heat palette - muted colors that provide sufficient contrast with light text */
- --heat-1: rgba(74, 123, 167, 0.35);
- --heat-2: rgba(90, 159, 168, 0.38);
- --heat-3: rgba(106, 181, 181, 0.40);
- --heat-4: rgba(126, 196, 136, 0.42);
- --heat-5: rgba(160, 216, 120, 0.45);
- --heat-6: rgba(196, 222, 106, 0.48);
- --heat-7: rgba(244, 212, 77, 0.50);
- --heat-8: rgba(255, 107, 53, 0.55);
+ /* Dark mode heat palette - cool to warm gradient for visualization */
+ --heat-1: rgba(90, 123, 167, 1);
+ --heat-2: rgba(106, 148, 168, 1);
+ --heat-3: rgba(122, 172, 172, 1);
+ --heat-4: rgba(142, 196, 152, 1);
+ --heat-5: rgba(168, 216, 136, 1);
+ --heat-6: rgba(200, 222, 122, 1);
+ --heat-7: rgba(244, 212, 93, 1);
+ --heat-8: rgba(255, 122, 69, 1);
/* Code view specific - dark mode */
--code-bg: #0d1117;
@@ -228,6 +236,14 @@
/* Heatmap span highlighting colors - dark theme */
--span-hot-base: 255, 107, 53;
--span-cold-base: 189, 189, 189;
+
+ /* Summary card colors - optimized for 4.5:1 contrast on dark bg */
+ --card-blue: 88, 166, 255;
+ --card-green: 63, 185, 80;
+ --card-yellow: 210, 153, 34;
+ --card-purple: 163, 113, 247;
+ --card-red: 248, 113, 113;
+ --card-orange: 251, 146, 60;
}
/* --------------------------------------------------------------------------
@@ -571,6 +587,46 @@
This file extends the shared foundation with flamegraph-specific styles.
========================================================================== */
+/* --------------------------------------------------------------------------
+ Differential Flamegraph
+ -------------------------------------------------------------------------- */
+
+:root {
+ /* Regression colors */
+ --diff-regression-deep: #d32f2f;
+ --diff-regression-medium: #e57373;
+ --diff-regression-light: #ef9a9a;
+ --diff-regression-verylight: #ffcdd2;
+
+ /* Improvement colors */
+ --diff-improvement-deep: #1976d2;
+ --diff-improvement-medium: #42a5f5;
+ --diff-improvement-light: #64b5f6;
+ --diff-improvement-verylight: #90caf9;
+
+ /* Other differential colors */
+ --diff-neutral: #bdbdbd;
+ --diff-new: #9575cd;
+ --diff-elided: #b39ddb;
+}
+
+/* Dark mode differential colors - adjusted for contrast against dark backgrounds */
+[data-theme="dark"] {
+ --diff-regression-deep: #ef5350;
+ --diff-regression-medium: #e57373;
+ --diff-regression-light: #ef9a9a;
+ --diff-regression-verylight: #ffcdd2;
+
+ --diff-improvement-deep: #42a5f5;
+ --diff-improvement-medium: #64b5f6;
+ --diff-improvement-light: #90caf9;
+ --diff-improvement-verylight: #bbdefb;
+
+ --diff-neutral: #757575;
+ --diff-new: #b39ddb;
+ --diff-elided: #ce93d8;
+}
+
/* --------------------------------------------------------------------------
Layout Overrides (Flamegraph-specific)
-------------------------------------------------------------------------- */
@@ -841,9 +897,17 @@
}
/* View Mode Section */
+.view-mode-section {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
.view-mode-section .section-content {
display: flex;
- justify-content: center;
+ flex-direction: column;
+ gap: 10px;
+ align-items: center;
}
/* Collapsible sections */
@@ -912,10 +976,10 @@
position: relative;
}
-.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:nth-child(1) { --i: 0; --card-color: var(--card-blue); }
+.summary-card:nth-child(2) { --i: 1; --card-color: var(--card-green); }
+.summary-card:nth-child(3) { --i: 2; --card-color: var(--card-yellow); }
+.summary-card:nth-child(4) { --i: 3; --card-color: var(--card-purple); }
.summary-card:hover {
border-color: rgba(var(--card-color), 0.6);
@@ -971,21 +1035,18 @@
text-overflow: ellipsis;
}
-/* Efficiency Bar */
-.efficiency-section {
- margin-top: 10px;
- padding-top: 10px;
- border-top: 1px solid var(--border);
-}
+/* --------------------------------------------------------------------------
+ Progress Bars
+ -------------------------------------------------------------------------- */
-.efficiency-header {
+.bar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
-.efficiency-label {
+.bar-label {
font-size: 9px;
font-weight: 600;
color: var(--text-secondary);
@@ -993,21 +1054,21 @@
letter-spacing: 0.2px;
}
-.efficiency-value {
+.bar-value {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--accent);
}
-.efficiency-bar {
+.bar {
height: 6px;
background: var(--bg-tertiary);
border-radius: 3px;
overflow: hidden;
}
-.efficiency-fill {
+.bar-fill {
height: 100%;
background: linear-gradient(90deg, #28a745 0%, #20c997 50%, #17a2b8 100%);
border-radius: 3px;
@@ -1016,7 +1077,7 @@
overflow: hidden;
}
-.efficiency-fill::after {
+.bar-fill::after {
content: '';
position: absolute;
top: 0;
@@ -1033,68 +1094,56 @@
}
/* --------------------------------------------------------------------------
- Thread Stats Grid (in Sidebar)
+ Efficiency Section Container
+ -------------------------------------------------------------------------- */
+
+.efficiency-section {
+ margin-top: 10px;
+ padding-top: 10px;
+ border-top: 1px solid var(--border);
+}
+
+/* --------------------------------------------------------------------------
+ Thread Stats Progress Bars (in Sidebar)
-------------------------------------------------------------------------- */
.thread-stats-section {
display: block;
}
-.stats-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 8px;
+.stats-container {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
}
-.stat-tile {
- background: var(--bg-primary);
- border-radius: 8px;
- padding: 10px;
- text-align: center;
- border: 2px solid var(--border);
- transition: all var(--transition-fast);
+.stat-item {
animation: fadeIn 0.4s ease-out backwards;
animation-delay: calc(var(--i, 0) * 0.05s);
}
-.stat-tile:nth-child(1) { --i: 0; }
-.stat-tile:nth-child(2) { --i: 1; }
-.stat-tile:nth-child(3) { --i: 2; }
-.stat-tile:nth-child(4) { --i: 3; }
+.stat-item:nth-child(1) { --i: 0; }
+.stat-item:nth-child(2) { --i: 1; }
+.stat-item:nth-child(3) { --i: 2; }
+.stat-item:nth-child(4) { --i: 3; }
+.stat-item:nth-child(5) { --i: 4; }
-.stat-tile:hover {
- transform: translateY(-2px);
- box-shadow: var(--shadow-sm);
+/* Color variants for bar-fill */
+.bar-fill--green {
+ background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}
-.stat-tile-value {
- font-family: var(--font-mono);
- font-size: 16px;
- font-weight: 700;
- color: var(--text-primary);
- line-height: 1.2;
+.bar-fill--yellow {
+ background: linear-gradient(90deg, #ffc107 0%, #ffdb4d 100%);
}
-.stat-tile-label {
- font-size: 9px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.3px;
- color: var(--text-muted);
- margin-top: 2px;
+.bar-fill--purple {
+ background: linear-gradient(90deg, #6f42c1 0%, #9b6dd6 100%);
}
-/* Stat tile color variants */
-.stat-tile--green { --tile-color: 40, 167, 69; --tile-text: #28a745; }
-.stat-tile--red { --tile-color: 220, 53, 69; --tile-text: #dc3545; }
-.stat-tile--yellow { --tile-color: 255, 193, 7; --tile-text: #d39e00; }
-.stat-tile--purple { --tile-color: 111, 66, 193; --tile-text: #6f42c1; }
-
-.stat-tile[class*="--"] {
- border-color: rgba(var(--tile-color), 0.4);
- background: linear-gradient(135deg, rgba(var(--tile-color), 0.08) 0%, var(--bg-primary) 100%);
+.bar-fill--red {
+ background: linear-gradient(90deg, #dc3545 0%, #ff6b7a 100%);
}
-.stat-tile[class*="--"] .stat-tile-value { color: var(--tile-text); }
/* --------------------------------------------------------------------------
Hotspot Cards
@@ -1396,6 +1445,41 @@
color: var(--accent);
}
+.tooltip-diff {
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid var(--border);
+}
+
+.tooltip-diff-title {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--accent);
+ margin-bottom: 8px;
+}
+
+.tooltip-diff-row {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 4px 14px;
+ font-size: 12px;
+ margin-bottom: 4px;
+}
+
+.tooltip-diff-row.regression .tooltip-stat-value {
+ color: var(--diff-regression-deep);
+ font-weight: 700;
+}
+
+.tooltip-diff-row.improvement .tooltip-stat-value {
+ color: var(--diff-improvement-deep);
+ font-weight: 700;
+}
+
+.tooltip-diff-row.neutral .tooltip-stat-value {
+ color: var(--text-secondary);
+}
+
.tooltip-source {
margin-top: 10px;
padding-top: 10px;
@@ -1551,10 +1635,6 @@
.brand-info {
display: none;
}
-
- .stats-grid {
- grid-template-columns: 1fr;
- }
}
/* --------------------------------------------------------------------------
@@ -1574,7 +1654,9 @@
Flamegraph-Specific Toggle Override
-------------------------------------------------------------------------- */
-#toggle-invert .toggle-track.on {
+#toggle-invert .toggle-track.on,
+#toggle-elided .toggle-track.on,
+#toggle-path-display .toggle-track.on {
background: #8e44ad;
border-color: #8e44ad;
box-shadow: 0 0 8px rgba(142, 68, 173, 0.3);
@@ -1674,7 +1756,7 @@
