From 52fe19249e0b46c664297bfa631a10bb647d3341 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Fri, 7 Jun 2024 17:33:49 -0600
Subject: [PATCH] VizTooltip: Fix heatmap histogram display (#88945)

---
 public/app/plugins/panel/heatmap/HeatmapPanel.tsx   |  1 +
 public/app/plugins/panel/heatmap/HeatmapTooltip.tsx | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
index 0d32b9d69ad..f3cde37e399 100644
--- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
+++ b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
@@ -210,6 +210,7 @@ export const HeatmapPanel = ({
                       panelData={data}
                       annotate={enableAnnotationCreation ? annotate : undefined}
                       maxHeight={options.tooltip.maxHeight}
+                      maxWidth={options.tooltip.maxWidth}
                     />
                   );
                 }}
diff --git a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx b/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
index defd30e9c17..63cd3374997 100644
--- a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
+++ b/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
@@ -41,6 +41,7 @@ interface HeatmapTooltipProps {
   panelData: PanelData;
   annotate?: () => void;
   maxHeight?: number;
+  maxWidth?: number;
 }
 
 export const HeatmapTooltip = (props: HeatmapTooltipProps) => {
@@ -58,6 +59,9 @@ export const HeatmapTooltip = (props: HeatmapTooltipProps) => {
   return <HeatmapHoverCell {...props} />;
 };
 
+const defaultHistogramWidth = 264;
+const defaultHistogramHeight = 64;
+
 const HeatmapHoverCell = ({
   dataIdxs,
   dataRef,
@@ -67,6 +71,7 @@ const HeatmapHoverCell = ({
   mode,
   annotate,
   maxHeight,
+  maxWidth,
 }: HeatmapTooltipProps) => {
   const index = dataIdxs[1]!;
   const data = dataRef.current;
@@ -302,8 +307,11 @@ const HeatmapHoverCell = ({
 
   let can = useRef<HTMLCanvasElement>(null);
 
-  let histCssWidth = 264;
-  let histCssHeight = 64;
+  const theme = useTheme2();
+  const themeSpacing = parseInt(theme.spacing(1), 10);
+
+  let histCssWidth = Math.min(defaultHistogramWidth, maxWidth ? maxWidth - themeSpacing * 2 : defaultHistogramWidth);
+  let histCssHeight = defaultHistogramHeight;
   let histCanWidth = Math.round(histCssWidth * uPlot.pxRatio);
   let histCanHeight = Math.round(histCssHeight * uPlot.pxRatio);
 
@@ -352,7 +360,6 @@ const HeatmapHoverCell = ({
   }
 
   const styles = useStyles2(getStyles);
-  const theme = useTheme2();
 
   return (
     <div className={styles.wrapper}>