Heatmap: Fix bottom bucket range in tooltip (#60562)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

public/app/features/transformers/calculateHeatmap/heatmap.ts

@@ -173,6 +173,14 @@ export function rowsToCellsHeatmap(opts: RowsHeatmapOptions): DataFrame {
     });
   }
 
+  const valueCfg = {
+    ...yFields[0].config,
+  };
+
+  if (valueCfg.displayNameFromDS) {
+    delete valueCfg.displayNameFromDS;
+  }
+
   return {
     length: xs.length,
     refId: opts.frame.refId,
@@ -199,7 +207,7 @@ export function rowsToCellsHeatmap(opts: RowsHeatmapOptions): DataFrame {
         name: opts.value?.length ? opts.value : 'Value',
         type: FieldType.number,
         values: new ArrayVector(counts2),
-        config: yFields[0].config,
+        config: valueCfg,
         display: yFields[0].display,
       },
     ],

public/app/plugins/panel/heatmap/HeatmapHoverView.tsx

@@ -64,11 +64,18 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
   let yBucketMin: string;
   let yBucketMax: string;
 
+  let nonNumericOrdinalDisplay: string | undefined = undefined;
+
   if (meta.yOrdinalDisplay) {
     const yMinIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx - 1 : yValueIdx;
     const yMaxIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx : yValueIdx + 1;
-    yBucketMin = `${meta.yOrdinalDisplay[yMinIdx]}`;
+    yBucketMin = yMinIdx < 0 ? meta.yMinDisplay! : `${meta.yOrdinalDisplay[yMinIdx]}`;
     yBucketMax = `${meta.yOrdinalDisplay[yMaxIdx]}`;
+
+    // e.g. "pod-xyz123"
+    if (!meta.yOrdinalLabel || Number.isNaN(+meta.yOrdinalLabel[0])) {
+      nonNumericOrdinalDisplay = data.yLayout === HeatmapCellLayout.le ? yBucketMax : yBucketMin;
+    }
   } else {
     const value = yVals?.[yValueIdx];
 
@@ -210,7 +217,11 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
     );
   }
 
-  const renderYBuckets = () => {
+  const renderYBucket = () => {
+    if (nonNumericOrdinalDisplay) {
+      return <div>Name: {nonNumericOrdinalDisplay}</div>;
+    }
+
     switch (data.yLayout) {
       case HeatmapCellLayout.unknown:
         return <div>{yDisp(yBucketMin)}</div>;
@@ -237,7 +248,7 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
         />
       )}
       <div>
-        {renderYBuckets()}
+        {renderYBucket()}
         <div>
           {getFieldDisplayName(countField!, data.heatmap)}: {data.display!(count)}
         </div>