[incubator-superset] branch release--0.31 updated: Address tooltip's disappearance and stickiness (#6898)

[christine]

This is an automated email from the ASF dual-hosted git repository.

christine pushed a commit to branch release--0.31
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/release--0.31 by this push:
     new 953d6dc  Address tooltip's disappearance and stickiness (#6898)
953d6dc is described below

commit 953d6dc9d614e99c55ca6c9c8dd4829a619613b1
Author: Christine Chambers <christine.d.h...@gmail.com>
AuthorDate: Tue Feb 19 15:45:16 2019 -0800

    Address tooltip's disappearance and stickiness (#6898)
    
    * Address tooltip's disappearance and stickiness
    
    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 agai [...]
    
    * adding a comment about the shouldRemove parameter
---
 superset/assets/src/visualizations/nvd3/NVD3Vis.js |  9 +++++----
 superset/assets/src/visualizations/nvd3/utils.js   | 17 ++++++++++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/superset/assets/src/visualizations/nvd3/NVD3Vis.js 
b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
index e7f9445..dbd2e6a 100644
--- a/superset/assets/src/visualizations/nvd3/NVD3Vis.js
+++ b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
@@ -711,8 +711,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) {
@@ -933,10 +934,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/superset/assets/src/visualizations/nvd3/utils.js 
b/superset/assets/src/visualizations/nvd3/utils.js
index a6d4842..26346c5 100644
--- a/superset/assets/src/visualizations/nvd3/utils.js
+++ b/superset/assets/src/visualizations/nvd3/utils.js
@@ -165,11 +165,18 @@ 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
+    for (const t of targets) {
+      if (shouldRemove) {
+        t.remove();
+      } else {
+        t.style.opacity = 0;
+      }
     }
   }
 }