From 8b7277244426f37dc73dabf99c04dc71b6f1cb0c Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 28 Apr 2021 10:05:05 +0100
Subject: [PATCH] GraphNG: Fix exemplars window position (#33427) (#33462)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 70bafc2725263cd3c4553fe7abe6d855c1e098b1)

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
---
 .../src/components/Chart/TooltipContainer.tsx | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx b/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
index 6ba4d183b4e..76de3f1e61a 100644
--- a/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
+++ b/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
@@ -20,7 +20,7 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
 }) => {
   const theme = useTheme();
   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,
@@ -36,15 +36,15 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
           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(() => {
@@ -62,15 +62,14 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
     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;
       }
     }
 
@@ -78,7 +77,7 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
       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 = getTooltipContainerStyles(theme);