fix: revert the bin limits on hover points and use a visual limit for…

… the Tooltip (#396)

* fix: limit the total hove points with more precision and flexibility

* chore: fix typo and wording

* fix: revert the bin limits on hover points and use a visual limit for the Tooltip

* fix: allow legend orientation to affect Tooltip rendering limit

* chore: add comment clarifying how the Tooltip column limit is determined

giraffe/src/components/Tooltip.tsx

@@ -17,6 +17,8 @@ export const Tooltip: FunctionComponent<Props> = ({data, config}) => {
   const tooltipElement = useTooltipElement()
 
   const {
+    width,
+    height,
     legendFont: font,
     legendFontColor: fontColor,
     legendFontBrightColor: fontBrightColor,
@@ -44,6 +46,16 @@ export const Tooltip: FunctionComponent<Props> = ({data, config}) => {
 
   const switchToVertical = columns.length > orientationThreshold
 
+  // 'switchToVertical': true
+  //   each column of data displays vertically, and
+  //   additional columns are next to the previous column, therefore,
+  //   the limit is the horizontal space (width)
+  // 'switchToVertical': false
+  //   each column of data displays horizontally, and
+  //   additional columns are stacked below the previous column, therefore,
+  //   the limit is the vertical space (height)
+  const maxLength = switchToVertical ? width : height
+
   const styles = generateTooltipStyles(
     columns,
     switchToVertical,
@@ -77,6 +89,7 @@ export const Tooltip: FunctionComponent<Props> = ({data, config}) => {
           <TooltipColumn
             key={name}
             name={name}
+            maxLength={maxLength}
             values={values}
             columnStyle={styles.columns[i]}
             columnHeaderStyle={styles.headers}
@@ -93,6 +106,7 @@ Tooltip.displayName = 'Tooltip'
 
 interface TooltipColumnProps {
   name: string
+  maxLength: number
   values: string[]
   columnStyle: React.CSSProperties
   columnHeaderStyle: React.CSSProperties
@@ -101,17 +115,19 @@ interface TooltipColumnProps {
 
 const TooltipColumn: FunctionComponent<TooltipColumnProps> = ({
   name,
+  maxLength,
   values,
   columnStyle,
   columnHeaderStyle,
   columnValueStyles,
 }) => {
+  const valuesLimitedByPlotDimensions = values.slice(0, maxLength)
   return (
     <div className="giraffe-tooltip-column" style={columnStyle}>
       <div className="giraffe-tooltip-column-header" style={columnHeaderStyle}>
         {name}
       </div>
-      {values.map((value, i) => (
+      {valuesLimitedByPlotDimensions.map((value, i) => (
         <div
           className="giraffe-tooltip-column-value"
           key={i}

giraffe/src/constants/index.ts

@@ -128,7 +128,6 @@ export const BAND_COLOR_SCALE_CONSTANT = 3
 
 export const TOOLTIP_MINIMUM_OPACITY = 0
 export const TOOLTIP_MAXIMUM_OPACITY = 1.0
-export const HOVER_POINTS_COUNT_LIMIT = 200
 
 export const CLOCKFACE_Z_INDEX = 9599
 

giraffe/src/utils/useHoverPointIndices.ts

@@ -5,8 +5,6 @@ import {useLazyMemo} from './useLazyMemo'
 import {isDefined} from './isDefined'
 import {minBy} from './extrema'
 
-import {HOVER_POINTS_COUNT_LIMIT} from '../constants'
-
 export const useHoverPointIndices = (
   mode: 'x' | 'y' | 'xy',
   mouseX: number,
@@ -411,15 +409,12 @@ const collectNearestIndices = (
   colData: NumericColumnData,
   groupColData: NumericColumnData
 ): void => {
-  let counter = 0
-  while (counter < HOVER_POINTS_COUNT_LIMIT && counter < rowIndices.length) {
-    const index = rowIndices[counter]
-    const group = groupColData[index]
-    const distance = Math.floor(Math.abs(dataCoord - colData[index]))
+  for (const i of rowIndices) {
+    const group = groupColData[i]
+    const distance = Math.floor(Math.abs(dataCoord - colData[i]))
 
     if (!acc[group] || distance < acc[group].distance) {
-      acc[group] = {i: index, distance}
+      acc[group] = {i, distance}
     }
-    counter += 1
   }
 }