From 70bafc2725263cd3c4553fe7abe6d855c1e098b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Wed, 28 Apr 2021 09:37:35 +0200
Subject: [PATCH] GraphNG: Fix exemplars window position (#33427)

---
 .../VizTooltip/VizTooltipContainer.tsx        | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
index f5947b4e2d0..573e6ca60e3 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
@@ -25,7 +25,7 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
   ...otherProps
 }) => {
   const tooltipRef = useRef<HTMLDivElement>(null);
-  const tooltipMeasurementRef = useRef<Dimensions2D>({ width: 0, height: 0 });
+  const [tooltipMeasurement, setTooltipMeasurement] = useState<Dimensions2D>({ width: 0, height: 0 });
   const { width, height } = useWindowSize();
   const [placement, setPlacement] = useState({
     x: positionX + offsetX,
@@ -41,15 +41,15 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
           const tW = Math.floor(entry.contentRect.width + 2 * 8); //  adding padding until Safari supports borderBoxSize
           const tH = Math.floor(entry.contentRect.height + 2 * 8);
 
-          if (tooltipMeasurementRef.current.width !== tW || tooltipMeasurementRef.current.height !== tH) {
-            tooltipMeasurementRef.current = {
+          if (tooltipMeasurement.width !== tW || tooltipMeasurement.height !== tH) {
+            setTooltipMeasurement({
               width: tW,
               height: tH,
-            };
+            });
           }
         }
       }),
-    []
+    [tooltipMeasurement.height, tooltipMeasurement.width]
   );
 
   useLayoutEffect(() => {
@@ -67,15 +67,14 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
     let xO = 0,
       yO = 0;
     if (tooltipRef && tooltipRef.current) {
-      const measurement = tooltipMeasurementRef.current;
-      const xOverflow = width - (positionX + measurement.width);
-      const yOverflow = height - (positionY + measurement.height);
+      const xOverflow = width - (positionX + tooltipMeasurement.width);
+      const yOverflow = height - (positionY + tooltipMeasurement.height);
       if (xOverflow < 0) {
-        xO = measurement.width;
+        xO = tooltipMeasurement.width;
       }
 
       if (yOverflow < 0) {
-        yO = measurement.height;
+        yO = tooltipMeasurement.height;
       }
     }
 
@@ -83,7 +82,7 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
       x: positionX + offsetX - xO,
       y: positionY + offsetY - yO,
     });
-  }, [width, height, positionX, offsetX, positionY, offsetY]);
+  }, [width, height, positionX, offsetX, positionY, offsetY, tooltipMeasurement.width, tooltipMeasurement.height]);
 
   const styles = useStyles(getStyles);