Improve heatmap colors

Previously, colors were generated in HeatmapCollector based on
intensity, and the same colors were used for both light and dark
themes. As a result, the displayed colors didn’t always match the
color legend for the selected theme.

To fix this, we now compute only the intensity for both self and
total samples in HeatmapCollector. The actual color is chosen later
based on that intensity and the active theme, ensuring the lines
correctly follow the theme-specific color legend.

Author: Ivona Stojanovic

Lib/profiling/sampling/_heatmap_assets/heatmap.css

@@ -1094,18 +1094,34 @@
 }
 
 #scroll_marker .marker.cold {
+  background: var(--heat-1);
+}
+
+#scroll_marker .marker.cool {
   background: var(--heat-2);
 }
 
+#scroll_marker .marker.mild {
+  background: var(--heat-3);
+}
+
 #scroll_marker .marker.warm {
-  background: var(--heat-5);
+  background: var(--heat-4);
 }
 
 #scroll_marker .marker.hot {
+  background: var(--heat-5);
+}
+
+#scroll_marker .marker.very-hot {
+  background: var(--heat-6);
+}
+
+#scroll_marker .marker.intense {
   background: var(--heat-7);
 }
 
-#scroll_marker .marker.vhot {
+#scroll_marker .marker.extreme {
   background: var(--heat-8);
 }
 

Lib/profiling/sampling/_heatmap_assets/heatmap.js

@@ -26,6 +26,7 @@ function toggleTheme() {
     if (btn) {
         btn.innerHTML = next === 'dark' ? '☼' : '☾';  // sun or moon
     }
+    applyLineColors();
 
     // Rebuild scroll marker with new theme colors
     buildScrollMarker();
@@ -161,10 +162,14 @@ function getSampleCount(line) {
 }
 
 function getIntensityClass(ratio) {
-    if (ratio > 0.75) return 'vhot';
-    if (ratio > 0.5) return 'hot';
-    if (ratio > 0.25) return 'warm';
-    return 'cold';
+    if (ratio <= 0.125) return 'cold';
+    if (ratio <= 0.25) return 'cool';
+    if (ratio <= 0.375) return 'mild';
+    if (ratio <= 0.5) return 'warm';
+    if (ratio <= 0.625) return 'hot';
+    if (ratio <= 0.75) return 'very-hot';
+    if (ratio <= 0.875) return 'intense';
+    return 'extreme';
 }
 
 // ============================================================================
@@ -212,6 +217,21 @@ function buildScrollMarker() {
     document.body.appendChild(scrollMarker);
 }
 
+function applyLineColors() {
+    const lines = document.querySelectorAll('.code-line');
+    lines.forEach(line => {
+        let intensity;
+        if (colorMode === 'self') {
+            intensity = parseFloat(line.getAttribute('data-self-intensity')) || 0;
+        } else {
+            intensity = parseFloat(line.getAttribute('data-cumulative-intensity')) || 0;
+        }
+
+        const color = intensityToColor(intensity);
+        line.style.background = color;
+    });
+}
+
 // ============================================================================
 // Toggle Controls
 // ============================================================================
@@ -264,20 +284,7 @@ function applyHotFilter() {
 
 function toggleColorMode() {
     colorMode = colorMode === 'self' ? 'cumulative' : 'self';
-    const lines = document.querySelectorAll('.code-line');
-
-    lines.forEach(line => {
-        let bgColor;
-        if (colorMode === 'self') {
-            bgColor = line.getAttribute('data-self-color');
-        } else {
-            bgColor = line.getAttribute('data-cumulative-color');
-        }
-
-        if (bgColor) {
-            line.style.background = bgColor;
-        }
-    });
+    applyLineColors();
 
     updateToggleUI('toggle-color-mode', colorMode === 'cumulative');
 
@@ -295,14 +302,7 @@ function toggleColorMode() {
 document.addEventListener('DOMContentLoaded', function() {
     // Restore UI state (theme, etc.)
     restoreUIState();
-
-    // Apply background colors
-    document.querySelectorAll('.code-line[data-bg-color]').forEach(line => {
-        const bgColor = line.getAttribute('data-bg-color');
-        if (bgColor) {
-            line.style.background = bgColor;
-        }
-    });
+    applyLineColors();
 
     // Initialize navigation buttons
     document.querySelectorAll('.nav-btn').forEach(button => {

Lib/profiling/sampling/_heatmap_assets/heatmap_index.js

@@ -1,6 +1,19 @@
 // Tachyon Profiler - Heatmap Index JavaScript
 // Index page specific functionality
 
+// ============================================================================
+// Heatmap Bar Coloring
+// ============================================================================
+
+function applyHeatmapBarColors() {
+    const bars = document.querySelectorAll('.heatmap-bar[data-intensity]');
+    bars.forEach(bar => {
+        const intensity = parseFloat(bar.getAttribute('data-intensity')) || 0;
+        const color = intensityToColor(intensity);
+        bar.style.backgroundColor = color;
+    });
+}
+
 // ============================================================================
 // Theme Support
 // ============================================================================
@@ -17,6 +30,8 @@ function toggleTheme() {
     if (btn) {
         btn.innerHTML = next === 'dark' ? '☼' : '☾';  // sun or moon
     }
+
+    applyHeatmapBarColors();
 }
 
 function restoreUIState() {
@@ -108,4 +123,5 @@ function collapseAll() {
 
 document.addEventListener('DOMContentLoaded', function() {
     restoreUIState();
+    applyHeatmapBarColors();
 });

Lib/profiling/sampling/_heatmap_assets/heatmap_shared.js

@@ -0,0 +1,32 @@
+// Tachyon Profiler - Shared Heatmap JavaScript
+// Common utilities shared between index and file views
+
+// ============================================================================
+// Color Mapping (Intensity to Heat Color)
+// ============================================================================
+
+function intensityToColor(intensity) {
+    if (intensity <= 0) {
+        return 'transparent';
+    }
+
+    const rootStyle = getComputedStyle(document.documentElement);
+
+    if (intensity <= 0.125) {
+        return rootStyle.getPropertyValue('--heat-1').trim();
+    } else if (intensity <= 0.25) {
+        return rootStyle.getPropertyValue('--heat-2').trim();
+    } else if (intensity <= 0.375) {
+        return rootStyle.getPropertyValue('--heat-3').trim();
+    } else if (intensity <= 0.5) {
+        return rootStyle.getPropertyValue('--heat-4').trim();
+    } else if (intensity <= 0.625) {
+        return rootStyle.getPropertyValue('--heat-5').trim();
+    } else if (intensity <= 0.75) {
+        return rootStyle.getPropertyValue('--heat-6').trim();
+    } else if (intensity <= 0.875) {
+        return rootStyle.getPropertyValue('--heat-7').trim();
+    } else {
+        return rootStyle.getPropertyValue('--heat-8').trim();
+    }
+}