From 474034210cdbc6f09e32775f108cbbedf15d3c75 Mon Sep 17 00:00:00 2001
From: Timmy Luong <TCL735@users.noreply.github.com>
Date: Mon, 23 Nov 2020 16:06:27 -0800
Subject: [PATCH] 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 | 18 +++++++++++++++++-
giraffe/src/constants/index.ts | 1 -
giraffe/src/utils/useHoverPointIndices.ts | 13 ++++---------
3 files changed, 21 insertions(+), 11 deletions(-)
diff --git a/giraffe/src/components/Tooltip.tsx b/giraffe/src/components/Tooltip.tsx
index 9405d401..8bf37e3a 100644
--- a/giraffe/src/components/Tooltip.tsx
+++ b/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}
diff --git a/giraffe/src/constants/index.ts b/giraffe/src/constants/index.ts
index ebadcd5d..8eef7c6d 100644
--- a/giraffe/src/constants/index.ts
+++ b/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
diff --git a/giraffe/src/utils/useHoverPointIndices.ts b/giraffe/src/utils/useHoverPointIndices.ts
index 6535f5ac..4c5828dd 100644
--- a/giraffe/src/utils/useHoverPointIndices.ts
+++ b/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
}
}