From 99247f0368019c5e186139822fc8cabae7710583 Mon Sep 17 00:00:00 2001 From: Christine Chambers Date: Wed, 20 Feb 2019 14:30:08 -0800 Subject: [PATCH] fix(legacy-preset-chart-nvd3): tooltip's disappearance and stickiness This is a replication of PR #6898 in apache/incubator-superset Nvd3 attaches tooltips to the body of the dom, not the chart the tooltip is meant fo. On hover, it sets their opacity to 1. In order to address both their stickiness when chart reloads (PR #6805) and thier disappearance on scroll in dashboards (PR #6852), we introduce a shouldRemove parameter to `hideTooltips` and only remove them befor chart reloads. For the scroll events triggered on dashboards, we only hide the tooltips by setting their opacity to 0. When they get hovered over again, nvd3 sets their opacity to 1 which causes them to reappear. --- .../src/NVD3Vis.js | 9 +++++---- .../src/utils.js | 20 +++++++++++++------ 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js index 98a737f17..a54d8b25d 100644 --- a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js +++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js @@ -737,8 +737,9 @@ function nvd3Vis(element, props) { .attr('height', height) .call(chart); - // on scroll, hide tooltips. throttle to only 4x/second. - window.addEventListener('scroll', throttle(() => hideTooltips(element), 250)); + // On scroll, hide (not remove) tooltips so they can reappear on hover. + // Throttle to only 4x/second. + window.addEventListener('scroll', throttle(() => hideTooltips(false), 250)); // The below code should be run AFTER rendering because chart is updated in call() if (isTimeSeries && activeAnnotationLayers.length > 0) { @@ -1001,10 +1002,10 @@ function nvd3Vis(element, props) { return chart; }; - // hide tooltips before rendering chart, if the chart is being re-rendered sometimes + // Remove tooltips before rendering chart, if the chart is being re-rendered sometimes // there are left over tooltips in the dom, // this will clear them before rendering the chart again. - hideTooltips(element); + hideTooltips(true); nv.addGraph(drawGraph); } diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js index df681d61e..a6f151c54 100644 --- a/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js +++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js @@ -176,12 +176,20 @@ export function generateBubbleTooltipContent({ return s; } -export function hideTooltips(element) { - if (element) { - const targets = element.querySelectorAll('.nvtooltip'); - if (targets.length > 0) { - targets.forEach(t => t.remove()); - } +// shouldRemove indicates whether the nvtooltips should be removed from the DOM +export function hideTooltips(shouldRemove) { + const targets = document.querySelectorAll('.nvtooltip'); + if (targets.length > 0) { + // Only set opacity to 0 when hiding tooltips so they would reappear + // on hover, which sets the opacity to 1 + targets.forEach(t => { + if (shouldRemove) { + t.remove(); + } else { + // eslint-disable-next-line no-param-reassign + t.style.opacity = 0; + } + }); } }