fix(xychart): PointerEvent fixes (#957)

* fix(xychart/TooltipProvider): cancel debounced hideTooltip in showTooltip * fix(xychart/Series): fix pointer event source event key and emitter logic * fix(xychart/Series): don't emit pointer events unless prop handlers are passed * fix(xychart/TooltipProvider): remove console.log
airbnb · Dec 3, 2020 · aa1dcae · aa1dcae
1 parent 4c82b1c
commit aa1dcae
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 15 deletions.
diff --git a/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx b/packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx
@@ -74,8 +74,9 @@ function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
     },
     [hideTooltip, onPointerOutProps],
   );
+  const ownEventSourceKey = `${AREASERIES_EVENT_SOURCE}-${dataKey}`;
   const pointerEventEmitters = usePointerEventEmitters({
-    source: AREASERIES_EVENT_SOURCE,
+    source: ownEventSourceKey,
     onPointerMove: !!onPointerMoveProps && pointerEvents,
     onPointerOut: !!onPointerOutProps && pointerEvents,
     onPointerUp: !!onPointerUpProps && pointerEvents,
@@ -85,7 +86,7 @@ function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
     onPointerMove: pointerEvents ? onPointerMove : undefined,
     onPointerOut: pointerEvents ? onPointerOut : undefined,
     onPointerUp: pointerEvents ? onPointerUpProps : undefined,
-    sources: [XYCHART_EVENT_SOURCE, `${AREASERIES_EVENT_SOURCE}-${dataKey}`],
+    sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
   });
 
   const numericScaleBaseline = useMemo(() => getScaleBaseline(horizontal ? xScale : yScale), [

diff --git a/packages/visx-xychart/src/components/series/private/BaseBarGroup.tsx b/packages/visx-xychart/src/components/series/private/BaseBarGroup.tsx
@@ -115,8 +115,9 @@ export default function BaseBarGroup<
     },
     [hideTooltip, onPointerOutProps],
   );
+  const ownEventSourceKey = `${BARGROUP_EVENT_SOURCE}-${dataKeys.join('-')}}`;
   const pointerEventEmitters = usePointerEventEmitters({
-    source: BARGROUP_EVENT_SOURCE,
+    source: ownEventSourceKey,
     onPointerMove: !!onPointerMoveProps && pointerEvents,
     onPointerOut: !!onPointerOutProps && pointerEvents,
     onPointerUp: !!onPointerUpProps && pointerEvents,
@@ -126,7 +127,7 @@ export default function BaseBarGroup<
     onPointerMove: pointerEvents ? onPointerMove : undefined,
     onPointerOut: pointerEvents ? onPointerOut : undefined,
     onPointerUp: pointerEvents ? onPointerUpProps : undefined,
-    sources: [XYCHART_EVENT_SOURCE, `${BARGROUP_EVENT_SOURCE}-${dataKeys.join('-')}`],
+    sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
   });
 
   const xZeroPosition = useMemo(() => (xScale ? getScaleBaseline(xScale) : 0), [xScale]);

diff --git a/packages/visx-xychart/src/components/series/private/BaseBarSeries.tsx b/packages/visx-xychart/src/components/series/private/BaseBarSeries.tsx
@@ -107,8 +107,9 @@ function BaseBarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum
     },
     [hideTooltip, onPointerOutProps],
   );
+  const ownEventSourceKey = `${BARSERIES_EVENT_SOURCE}-${dataKey}`;
   const pointerEventEmitters = usePointerEventEmitters({
-    source: BARSERIES_EVENT_SOURCE,
+    source: ownEventSourceKey,
     onPointerMove: !!onPointerMoveProps && pointerEvents,
     onPointerOut: !!onPointerOutProps && pointerEvents,
     onPointerUp: !!onPointerUpProps && pointerEvents,
@@ -118,7 +119,7 @@ function BaseBarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum
     onPointerMove: pointerEvents ? onPointerMove : undefined,
     onPointerOut: pointerEvents ? onPointerOut : undefined,
     onPointerUp: pointerEvents ? onPointerUpProps : undefined,
-    sources: [XYCHART_EVENT_SOURCE, `${BARSERIES_EVENT_SOURCE}-${dataKey}`],
+    sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
   });
 
   return (

diff --git a/packages/visx-xychart/src/components/series/private/BaseBarStack.tsx b/packages/visx-xychart/src/components/series/private/BaseBarStack.tsx
@@ -151,8 +151,9 @@ function BaseBarStack<
     },
     [hideTooltip, onPointerOutProps],
   );
+  const ownEventSourceKey = `${BARSTACK_EVENT_SOURCE}-${dataKeys.join('-')}`;
   const pointerEventEmitters = usePointerEventEmitters({
-    source: BARSTACK_EVENT_SOURCE,
+    source: ownEventSourceKey,
     onPointerMove: !!onPointerMoveProps && pointerEvents,
     onPointerOut: !!onPointerOutProps && pointerEvents,
     onPointerUp: !!onPointerUpProps && pointerEvents,
@@ -162,7 +163,7 @@ function BaseBarStack<
     onPointerMove: pointerEvents ? onPointerMove : undefined,
     onPointerOut: pointerEvents ? onPointerOut : undefined,
     onPointerUp: pointerEvents ? onPointerUpProps : undefined,
-    sources: [XYCHART_EVENT_SOURCE, `${BARSTACK_EVENT_SOURCE}-${dataKeys.join('-')}`],
+    sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
   });
 
   // if scales and data are not available in the registry, bail

diff --git a/packages/visx-xychart/src/components/series/private/BaseGlyphSeries.tsx b/packages/visx-xychart/src/components/series/private/BaseGlyphSeries.tsx
@@ -64,8 +64,9 @@ function BaseGlyphSeries<XScale extends AxisScale, YScale extends AxisScale, Dat
     },
     [hideTooltip, onPointerOutProps],
   );
+  const ownEventSourceKey = `${GLYPHSERIES_EVENT_SOURCE}-${dataKey}`;
   const pointerEventEmitters = usePointerEventEmitters({
-    source: GLYPHSERIES_EVENT_SOURCE,
+    source: ownEventSourceKey,
     onPointerMove: !!onPointerMoveProps && pointerEvents,
     onPointerOut: !!onPointerOutProps && pointerEvents,
     onPointerUp: !!onPointerUpProps && pointerEvents,
@@ -75,7 +76,7 @@ function BaseGlyphSeries<XScale extends AxisScale, YScale extends AxisScale, Dat
     onPointerMove: pointerEvents ? onPointerMove : undefined,
     onPointerOut: pointerEvents ? onPointerOut : undefined,
     onPointerUp: pointerEvents ? onPointerUpProps : undefined,
-    sources: [XYCHART_EVENT_SOURCE, `${GLYPHSERIES_EVENT_SOURCE}-${dataKey}`],
+    sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
   });
 
   const glyphs = useMemo(

diff --git a/packages/visx-xychart/src/components/series/private/BaseLineSeries.tsx b/packages/visx-xychart/src/components/series/private/BaseLineSeries.tsx
@@ -66,8 +66,9 @@ function BaseLineSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
     },
     [hideTooltip, onPointerOutProps],
   );
+  const ownEventSourceKey = `${LINESERIES_EVENT_SOURCE}-${dataKey}`;
   const pointerEventEmitters = usePointerEventEmitters({
-    source: LINESERIES_EVENT_SOURCE,
+    source: ownEventSourceKey,
     onPointerMove: !!onPointerMoveProps && pointerEvents,
     onPointerOut: !!onPointerOutProps && pointerEvents,
     onPointerUp: !!onPointerUpProps && pointerEvents,
@@ -77,7 +78,7 @@ function BaseLineSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
     onPointerMove: pointerEvents ? onPointerMove : undefined,
     onPointerOut: pointerEvents ? onPointerOut : undefined,
     onPointerUp: pointerEvents ? onPointerUpProps : undefined,
-    sources: [XYCHART_EVENT_SOURCE, `${LINESERIES_EVENT_SOURCE}-${dataKey}`],
+    sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
   });
 
   return (

diff --git a/packages/visx-xychart/src/providers/TooltipProvider.tsx b/packages/visx-xychart/src/providers/TooltipProvider.tsx
@@ -24,8 +24,16 @@ export default function TooltipProvider<Datum extends object>({
     hideTooltip: privateHideTooltip,
   } = useTooltip<TooltipData<Datum>>(undefined);
 
+  const debouncedHideTooltip = useRef<ReturnType<typeof debounce> | null>(null);
+
   const showTooltip = useRef(
     ({ svgPoint, index, key, datum, distanceX, distanceY }: PointerEventParams<Datum>) => {
+      // cancel any hideTooltip calls so it won't hide after invoking the logic below
+      if (debouncedHideTooltip.current) {
+        debouncedHideTooltip.current.cancel();
+        debouncedHideTooltip.current = null;
+      }
+
       const distance = Math.sqrt((distanceX ?? Infinity ** 2) + (distanceY ?? Infinity ** 2));
 
       updateTooltip(({ tooltipData: currData }) => ({
@@ -51,9 +59,10 @@ export default function TooltipProvider<Datum extends object>({
     },
   );
 
-  const hideTooltip = useCallback(debounce(privateHideTooltip, hideTooltipDebounceMs), [
-    privateHideTooltip,
-  ]);
+  const hideTooltip = useCallback(() => {
+    debouncedHideTooltip.current = debounce(privateHideTooltip, hideTooltipDebounceMs);
+    debouncedHideTooltip.current();
+  }, [privateHideTooltip, hideTooltipDebounceMs]);
 
   return (
     <TooltipContext.Provider