Feat: Implement DevRank Heatmap CSS Transitions (#9078)

Author: tobiu

apps/devrank/view/GridContainer.mjs

@@ -200,10 +200,19 @@ class GridContainer extends BaseGridContainer {
                 cellAlign: 'center',
                 renderer : ({value}) => value || '',
                 cellCls  : ({value}) => {
-                    if (!value)       return 'heatmap-cell-0';
-                    if (value < 100)  return 'heatmap-cell-1';
-                    if (value < 1000) return 'heatmap-cell-2';
-                    return 'heatmap-cell-3';
+                    let cls = ['neo-heatmap'];
+
+                    if (!value) {
+                        cls.push('heatmap-cell-0')
+                    } else if (value < 100) {
+                        cls.push('heatmap-cell-1')
+                    } else if (value < 1000) {
+                        cls.push('heatmap-cell-2')
+                    } else {
+                        cls.push('heatmap-cell-3')
+                    }
+
+                    return cls
                 }
             });
         }

resources/scss/src/apps/devrank/GridContainer.scss

@@ -2,19 +2,24 @@
     border-radius: 8px;
 
     .devrank-sparkline-wrapper {
-        height: 100%;
+        height  : 100%;
         position: relative;
-        width: 100%;
+        width   : 100%;
 
         .devrank-sparkline-canvas {
-            height: 100%;
-            left: 0;
+            height  : 100%;
+            left    : 0;
             position: absolute;
-            top: 0;
-            width: 100%;
+            top     : 0;
+            width   : 100%;
         }
     }
 
+    // Only animate heatmap transitions when NOT scrolling to prevent ghosting and repaint costs
+    .neo-grid-body:not(.neo-is-scrolling) .neo-grid-row .neo-grid-cell.neo-heatmap {
+        transition: background-color 150ms ease-out, color 150ms ease-out;
+    }
+
     .neo-grid-body .neo-grid-row {
         // Selection state overrides heatmap
         &.neo-selected {
@@ -62,4 +67,4 @@
             }
         }
     }
-}
+}