VizTooltip: Fix heatmap histogram display (#88945)

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}
                     />
                   );
                 }}

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}>