From 0d6d20a0e5d0b55fca7bbc9287c3d9aeec8fc0b0 Mon Sep 17 00:00:00 2001 From: Timmy Luong Date: Thu, 24 Sep 2020 10:32:49 -0700 Subject: [PATCH] fix: prevent invisible tooltips for the zero value of legendOpacity from the api --- src/shared/components/BandPlot.tsx | 16 ++++++++++------ src/shared/components/HeatmapPlot.tsx | 16 ++++++++++------ src/shared/components/HistogramPlot.tsx | 16 ++++++++++------ src/shared/components/MosaicPlot.tsx | 16 ++++++++++------ src/shared/components/ScatterPlot.tsx | 16 ++++++++++------ src/shared/components/XYPlot.tsx | 16 ++++++++++------ 6 files changed, 60 insertions(+), 36 deletions(-) diff --git a/src/shared/components/BandPlot.tsx b/src/shared/components/BandPlot.tsx index fe3e740da4d..9fc02113e9a 100644 --- a/src/shared/components/BandPlot.tsx +++ b/src/shared/components/BandPlot.tsx @@ -30,6 +30,7 @@ import { BAND_LINE_WIDTH, BAND_SHADE_OPACITY, LEGEND_OPACITY_DEFAULT, + LEGEND_OPACITY_MINIMUM, VIS_THEME, VIS_THEME_LIGHT, } from 'src/shared/constants' @@ -107,12 +108,15 @@ const BandPlot: FC = ({ [selectedFunctions, upperColumnName, mainColumn, lowerColumnName] ) - const tooltipOpacity = useMemo(() => { - if (isFlagEnabled('legendOrientation')) { - return legendOpacity - } - return LEGEND_OPACITY_DEFAULT - }, [legendOpacity]) + const tooltipOpacity = Math.max( + useMemo(() => { + if (isFlagEnabled('legendOrientation')) { + return legendOpacity + } + return LEGEND_OPACITY_DEFAULT + }, [legendOpacity]), + LEGEND_OPACITY_MINIMUM + ) const tooltipOrientationThreshold = useMemo(() => { if (isFlagEnabled('legendOrientation')) { diff --git a/src/shared/components/HeatmapPlot.tsx b/src/shared/components/HeatmapPlot.tsx index 86b10591300..f1b4c90f716 100644 --- a/src/shared/components/HeatmapPlot.tsx +++ b/src/shared/components/HeatmapPlot.tsx @@ -16,6 +16,7 @@ import {getFormatter} from 'src/shared/utils/vis' // Constants import { LEGEND_OPACITY_DEFAULT, + LEGEND_OPACITY_MINIMUM, VIS_THEME, VIS_THEME_LIGHT, } from 'src/shared/constants' @@ -60,12 +61,15 @@ const HeatmapPlot: FunctionComponent = ({ }) => { const columnKeys = table.columnKeys - const tooltipOpacity = useMemo(() => { - if (isFlagEnabled('legendOrientation')) { - return legendOpacity - } - return LEGEND_OPACITY_DEFAULT - }, [legendOpacity]) + const tooltipOpacity = Math.max( + useMemo(() => { + if (isFlagEnabled('legendOrientation')) { + return legendOpacity + } + return LEGEND_OPACITY_DEFAULT + }, [legendOpacity]), + LEGEND_OPACITY_MINIMUM + ) const tooltipOrientationThreshold = useMemo(() => { if (isFlagEnabled('legendOrientation')) { diff --git a/src/shared/components/HistogramPlot.tsx b/src/shared/components/HistogramPlot.tsx index 0da63f07beb..606ba7a7b41 100644 --- a/src/shared/components/HistogramPlot.tsx +++ b/src/shared/components/HistogramPlot.tsx @@ -13,6 +13,7 @@ import {getFormatter} from 'src/shared/utils/vis' // Constants import { LEGEND_OPACITY_DEFAULT, + LEGEND_OPACITY_MINIMUM, VIS_THEME, VIS_THEME_LIGHT, } from 'src/shared/constants' @@ -49,12 +50,15 @@ const HistogramPlot: FunctionComponent = ({ }) => { const columnKeys = table.columnKeys - const tooltipOpacity = useMemo(() => { - if (isFlagEnabled('legendOrientation')) { - return legendOpacity - } - return LEGEND_OPACITY_DEFAULT - }, [legendOpacity]) + const tooltipOpacity = Math.max( + useMemo(() => { + if (isFlagEnabled('legendOrientation')) { + return legendOpacity + } + return LEGEND_OPACITY_DEFAULT + }, [legendOpacity]), + LEGEND_OPACITY_MINIMUM + ) const tooltipOrientationThreshold = useMemo(() => { if (isFlagEnabled('legendOrientation')) { diff --git a/src/shared/components/MosaicPlot.tsx b/src/shared/components/MosaicPlot.tsx index ec2a472e13c..d5ba78eafa2 100644 --- a/src/shared/components/MosaicPlot.tsx +++ b/src/shared/components/MosaicPlot.tsx @@ -16,6 +16,7 @@ import {getFormatter, defaultXColumn, mosaicYcolumn} from 'src/shared/utils/vis' // Constants import { LEGEND_OPACITY_DEFAULT, + LEGEND_OPACITY_MINIMUM, VIS_THEME, VIS_THEME_LIGHT, } from 'src/shared/constants' @@ -65,12 +66,15 @@ const MosaicPlot: FunctionComponent = ({ } const columnKeys = table.columnKeys - const tooltipOpacity = useMemo(() => { - if (isFlagEnabled('legendOrientation')) { - return legendOpacity - } - return LEGEND_OPACITY_DEFAULT - }, [legendOpacity]) + const tooltipOpacity = Math.max( + useMemo(() => { + if (isFlagEnabled('legendOrientation')) { + return legendOpacity + } + return LEGEND_OPACITY_DEFAULT + }, [legendOpacity]), + LEGEND_OPACITY_MINIMUM + ) const tooltipOrientationThreshold = useMemo(() => { if (isFlagEnabled('legendOrientation')) { diff --git a/src/shared/components/ScatterPlot.tsx b/src/shared/components/ScatterPlot.tsx index ba5c4bc806f..45c527e262e 100644 --- a/src/shared/components/ScatterPlot.tsx +++ b/src/shared/components/ScatterPlot.tsx @@ -20,6 +20,7 @@ import { // Constants import { LEGEND_OPACITY_DEFAULT, + LEGEND_OPACITY_MINIMUM, VIS_THEME, VIS_THEME_LIGHT, } from 'src/shared/constants' @@ -70,12 +71,15 @@ const ScatterPlot: FunctionComponent = ({ const columnKeys = table.columnKeys - const tooltipOpacity = useMemo(() => { - if (isFlagEnabled('legendOrientation')) { - return legendOpacity - } - return LEGEND_OPACITY_DEFAULT - }, [legendOpacity]) + const tooltipOpacity = Math.max( + useMemo(() => { + if (isFlagEnabled('legendOrientation')) { + return legendOpacity + } + return LEGEND_OPACITY_DEFAULT + }, [legendOpacity]), + LEGEND_OPACITY_MINIMUM + ) const tooltipOrientationThreshold = useMemo(() => { if (isFlagEnabled('legendOrientation')) { diff --git a/src/shared/components/XYPlot.tsx b/src/shared/components/XYPlot.tsx index 1c756029306..5c7ac894e95 100644 --- a/src/shared/components/XYPlot.tsx +++ b/src/shared/components/XYPlot.tsx @@ -30,6 +30,7 @@ import { // Constants import { LEGEND_OPACITY_DEFAULT, + LEGEND_OPACITY_MINIMUM, VIS_THEME, VIS_THEME_LIGHT, } from 'src/shared/constants' @@ -85,12 +86,15 @@ const XYPlot: FC = ({ }, theme, }) => { - const tooltipOpacity = useMemo(() => { - if (isFlagEnabled('legendOrientation')) { - return legendOpacity - } - return LEGEND_OPACITY_DEFAULT - }, [legendOpacity]) + const tooltipOpacity = Math.max( + useMemo(() => { + if (isFlagEnabled('legendOrientation')) { + return legendOpacity + } + return LEGEND_OPACITY_DEFAULT + }, [legendOpacity]), + LEGEND_OPACITY_MINIMUM + ) const tooltipOrientationThreshold = useMemo(() => { if (isFlagEnabled('legendOrientation')) {