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

Author: StanFromIreland

Lib/profiling/sampling/_flamegraph_assets/flamegraph.css

@@ -329,34 +329,44 @@ body.resizing-sidebar {
   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 @@ body.resizing-sidebar {
 .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;

Lib/profiling/sampling/_flamegraph_assets/flamegraph.js

@@ -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) {

Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html

@@ -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>

Lib/profiling/sampling/_heatmap_assets/heatmap.css

@@ -20,24 +20,6 @@
   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
    -------------------------------------------------------------------------- */

Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html

@@ -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()"

Lib/profiling/sampling/_shared_assets/base.css

@@ -292,6 +292,7 @@ body {
   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 @@ body {
 
 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;
 }