superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From christ...@apache.org
Subject [incubator-superset] branch release--0.31 updated: Address tooltip's disappearance and stickiness (#6898)
Date Tue, 19 Feb 2019 23:45:23 GMT
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.hang@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;
+      }
     }
   }
 }


Mime
View raw message