Removed scroll listenter logic to quickly resolve the performance issues. The tootlip will now adjust its vertical position based on how close you are to the top of the chart instead of the top of the screen.

Author: Robert Crocker

src/components/ListeningRect.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import * as d3 from 'd3';
 import {
   Margin,
@@ -155,7 +155,7 @@ export default function ListeningRect({
       }
     }
 
-    tooltipState.distanceFromTop = tooltipState.cursorY + margin.top;
+    tooltipState.distanceFromTop = yScale(closestYValue) + margin.top;
     tooltipState.distanceFromRight =
       width - (margin.left + tooltipState.cursorX);
     tooltipState.distanceFromLeft = margin.left + tooltipState.cursorX;

src/components/VoronoiCell.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { VoronoiProps } from '../../types';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 
@@ -14,6 +14,10 @@ export const VoronoiCell = ({
   margin,
 }: VoronoiProps): JSX.Element => {
   const { width } = useWindowDimensions();
+
+  // The code below was commented out because of the performance issues we ran
+  // into when charts are taking in large data sets
+  // TODO: Figure out how to performantly use scroll to improve the performance.
   // const [scrollPosition, setScrollPosition] = useState(0);
 
   // const handleScroll = () => {
@@ -48,7 +52,7 @@ export const VoronoiCell = ({
       data,
     };
 
-    tooltipState.distanceFromTop = tooltipState.cursorY + margin.top;
+    tooltipState.distanceFromTop = cellCenter.cy + margin.top;
     tooltipState.distanceFromRight =
       width - (margin.left + tooltipState.cursorX);
     tooltipState.distanceFromLeft = margin.left + tooltipState.cursorX;