From 4ef5c33af90967f3801e8bdc3b7cc32631db884e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20Ba=C4=8Di=C4=87?=
 <96543666+kureshimiru@users.noreply.github.com>
Date: Tue, 25 Jul 2023 18:27:44 +0200
Subject: [PATCH] Heatmap: Add datalink support (#71016)

---
 .../plugins/panel/heatmap/HeatmapHoverView.tsx   | 16 ++++++++++++++--
 .../app/plugins/panel/heatmap/HeatmapPanel.tsx   | 12 ++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
index 40fe2fe4897..5794e8bd88d 100644
--- a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
+++ b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
@@ -8,6 +8,9 @@ import {
   getFieldDisplayName,
   LinkModel,
   TimeRange,
+  getLinksSupplier,
+  InterpolateFunction,
+  ScopedVars,
 } from '@grafana/data';
 import { HeatmapCellLayout } from '@grafana/schema';
 import { LinkButton, VerticalGroup } from '@grafana/ui';
@@ -23,6 +26,8 @@ type Props = {
   hover: HeatmapHoverEvent;
   showHistogram?: boolean;
   timeRange: TimeRange;
+  replaceVars: InterpolateFunction;
+  scopedVars: ScopedVars[];
 };
 
 export const HeatmapHoverView = (props: Props) => {
@@ -32,7 +37,7 @@ export const HeatmapHoverView = (props: Props) => {
   return <HeatmapHoverCell {...props} />;
 };
 
-const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
+const HeatmapHoverCell = ({ data, hover, showHistogram, scopedVars, replaceVars }: Props) => {
   const index = hover.dataIdx;
   const xField = data.heatmap?.fields[0];
   const yField = data.heatmap?.fields[1];
@@ -119,7 +124,14 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
   const linkLookup = new Set<string>();
 
   for (const field of visibleFields ?? []) {
-    // TODO: Currently always undefined? (getLinks)
+    const hasLinks = field.config.links && field.config.links.length > 0;
+    if (hasLinks && data.heatmap) {
+      let appropriateScopedVars = scopedVars.filter(
+        (sv) => sv && sv.__dataContext && sv.__dataContext.value.field.name === nonNumericOrdinalDisplay
+      )[0];
+      field.getLinks = getLinksSupplier(data.heatmap, field, appropriateScopedVars ?? {}, replaceVars);
+    }
+
     if (field.getLinks) {
       const v = field.values[index];
       const disp = field.display ? field.display(v) : { text: `${v}`, numeric: +v };
diff --git a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
index a84729f0d83..b21560fdd4a 100644
--- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
+++ b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
@@ -43,6 +43,16 @@ export const HeatmapPanel = ({
   const styles = useStyles2(getStyles);
   const { sync } = usePanelContext();
 
+  //  necessary for enabling datalinks in hover view
+  let scopedVarsFromRawData = [];
+  for (const series of data.series) {
+    for (const field of series.fields) {
+      if (field.state?.scopedVars) {
+        scopedVarsFromRawData.push(field.state?.scopedVars);
+      }
+    }
+  }
+
   // ugh
   let timeRangeRef = useRef<TimeRange>(timeRange);
   timeRangeRef.current = timeRange;
@@ -210,6 +220,8 @@ export const HeatmapPanel = ({
               data={info}
               hover={hover}
               showHistogram={options.tooltip.yHistogram}
+              replaceVars={replaceVariables}
+              scopedVars={scopedVarsFromRawData}
             />
           </VizTooltipContainer>
         )}