From 143f9e2dd9678ac7df4757b1f2a8c84789ca0adc Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Mon, 30 May 2022 22:27:41 -0500
Subject: [PATCH] HeatmapNG: ensure non-zero y bucket size (#49454)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
---
 .../plugins/panel/heatmap-new/HeatmapPanel.tsx |  1 +
 .../panel/heatmap-new/migrations.test.ts       |  2 +-
 .../plugins/panel/heatmap-new/migrations.ts    |  2 +-
 public/app/plugins/panel/heatmap-new/utils.ts  | 18 ++++++++++++++----
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx
index 09040bb6836..01ce263be9b 100644
--- a/public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx
+++ b/public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx
@@ -115,6 +115,7 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
       cellGap: options.cellGap,
       hideThreshold: options.hideThreshold,
       exemplarColor: options.exemplars?.color ?? 'rgba(255,0,255,0.7)',
+      yAxisReverse: options.yAxisReverse,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options, data.structureRev]);
diff --git a/public/app/plugins/panel/heatmap-new/migrations.test.ts b/public/app/plugins/panel/heatmap-new/migrations.test.ts
index 276eb7fdb4d..8d8c5bf8018 100644
--- a/public/app/plugins/panel/heatmap-new/migrations.test.ts
+++ b/public/app/plugins/panel/heatmap-new/migrations.test.ts
@@ -43,7 +43,7 @@ describe('Heatmap Migrations', () => {
             "mode": "scheme",
             "scale": "exponential",
             "scheme": "BuGn",
-            "steps": 256,
+            "steps": 128,
           },
           "exemplars": Object {
             "color": "rgba(255,0,255,0.7)",
diff --git a/public/app/plugins/panel/heatmap-new/migrations.ts b/public/app/plugins/panel/heatmap-new/migrations.ts
index 9a1530f38d5..7864f8ff4ae 100644
--- a/public/app/plugins/panel/heatmap-new/migrations.ts
+++ b/public/app/plugins/panel/heatmap-new/migrations.ts
@@ -53,7 +53,7 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
     calculate,
     color: {
       ...defaultPanelOptions.color,
-      steps: 256, // best match with existing colors
+      steps: 128, // best match with existing colors
     },
     cellGap: asNumber(angular.cards?.cardPadding),
     cellSize: asNumber(angular.cards?.cardRound),
diff --git a/public/app/plugins/panel/heatmap-new/utils.ts b/public/app/plugins/panel/heatmap-new/utils.ts
index 3197cfab7ac..15b4cb6e5a1 100644
--- a/public/app/plugins/panel/heatmap-new/utils.ts
+++ b/public/app/plugins/panel/heatmap-new/utils.ts
@@ -52,6 +52,7 @@ interface PrepConfigOpts {
   exemplarColor: string;
   cellGap?: number | null; // in css pixels
   hideThreshold?: number;
+  yAxisReverse?: boolean;
 }
 
 export function prepConfig(opts: PrepConfigOpts) {
@@ -67,6 +68,7 @@ export function prepConfig(opts: PrepConfigOpts) {
     palette,
     cellGap,
     hideThreshold,
+    yAxisReverse,
   } = opts;
 
   const pxRatio = devicePixelRatio;
@@ -210,14 +212,18 @@ export function prepConfig(opts: PrepConfigOpts) {
     isTime: false,
     // distribution: ScaleDistribution.Ordinal, // does not work with facets/scatter yet
     orientation: ScaleOrientation.Vertical,
-    direction: ScaleDirection.Up,
+    direction: yAxisReverse ? ScaleDirection.Down : ScaleDirection.Up,
     // should be tweakable manually
     distribution: shouldUseLogScale ? ScaleDistribution.Log : ScaleDistribution.Linear,
     log: 2,
     range: shouldUseLogScale
       ? undefined
       : (u, dataMin, dataMax) => {
-          const bucketSize = dataRef.current?.yBucketSize;
+          let bucketSize = dataRef.current?.yBucketSize;
+
+          if (bucketSize === 0) {
+            bucketSize = 1;
+          }
 
           if (bucketSize) {
             if (dataRef.current?.yLayout === BucketLayout.le) {
@@ -302,7 +308,11 @@ export function prepConfig(opts: PrepConfigOpts) {
       gap: cellGap,
       hideThreshold,
       xAlign: dataRef.current?.xLayout === BucketLayout.le ? -1 : dataRef.current?.xLayout === BucketLayout.ge ? 1 : 0,
-      yAlign: dataRef.current?.yLayout === BucketLayout.le ? -1 : dataRef.current?.yLayout === BucketLayout.ge ? 1 : 0,
+      yAlign: ((dataRef.current?.yLayout === BucketLayout.le
+        ? -1
+        : dataRef.current?.yLayout === BucketLayout.ge
+        ? 1
+        : 0) * (yAxisReverse ? -1 : 1)) as -1 | 0 | 1,
       disp: {
         fill: {
           values: (u, seriesIdx) => {
@@ -437,7 +447,7 @@ export function heatmapPathsDense(opts: PathbuilderOpts) {
         // detect x and y bin qtys by detecting layout repetition in x & y data
         let yBinQty = dlen - ys.lastIndexOf(ys[0]);
         let xBinQty = dlen / yBinQty;
-        let yBinIncr = ys[1] - ys[0];
+        let yBinIncr = ys[1] - ys[0] || scaleY.max! - scaleY.min!;
         let xBinIncr = xs[yBinQty] - xs[0];
 
         // uniform tile sizes based on zoom level