Fix Tooltip rerendering issues

CodeForAfrica · Feb 11, 2025 · 1172c49 · 1172c49
1 parent 1b34397
commit 1172c49
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
@@ -2,6 +2,7 @@ import { RichTypography } from "@commons-ui/next";
 import { ChartTooltip, IndicatorTitle, Download, Share } from "@hurumap/core";
 import { Source } from "@hurumap/next";
 import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { debounce } from "lodash";
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import * as vega from "vega";
 import embed from "vega-embed";
@@ -67,9 +68,25 @@ function Chart({
 
   const handler = useCallback(
     (_, event, item, value) => {
-      setTooltipData({ item, value, id, geoCode, event });
+      const debouncedTooltip = debounce((e, i, v) => {
+        if (!v) {
+          setTooltipData(null);
+          return;
+        }
+        if (
+          !tooltipData ||
+          tooltipData.value?.group !== v?.group ||
+          tooltipData.event?.clientX !== e?.clientX ||
+          tooltipData.event?.clientY !== e?.clientY
+        ) {
+          setTooltipData({ item: i, value: v, id, geoCode, event: e });
+        }
+      }, 50);
+
+      debouncedTooltip(event, item, value);
+      return () => debouncedTooltip.cancel();
     },
-    [id, geoCode],
+    [id, geoCode, tooltipData],
   );
 
   useEffect(() => {