From 543c22bb508a90741ff770e50670b412a45e1871 Mon Sep 17 00:00:00 2001
From: Alanna Scott <alanna.scott@airbnb.com>
Date: Wed, 1 Feb 2017 19:16:52 -0800
Subject: [PATCH] [dashboard] fix nvd3 tooltips (#2096)

* hide tooltips on scroll

* hide tooltips on render/re-render of the chart

* move function above vis function, fixes linter
---
 superset/assets/package.json               |  1 +
 superset/assets/stylesheets/superset.css   |  6 ++++++
 superset/assets/visualizations/nvd3_vis.js | 13 +++++++++++++
 3 files changed, 20 insertions(+)

diff --git a/superset/assets/package.json b/superset/assets/package.json
index 73de6117c1b70..c3484559b8759 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -58,6 +58,7 @@
     "immutable": "^3.8.1",
     "jquery": "^2.2.1",
     "jquery-ui": "1.10.5",
+    "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^0.26.0",
     "moment": "^2.14.1",
     "moments": "0.0.2",
diff --git a/superset/assets/stylesheets/superset.css b/superset/assets/stylesheets/superset.css
index 1f7796dacfae5..98b1260b6712a 100644
--- a/superset/assets/stylesheets/superset.css
+++ b/superset/assets/stylesheets/superset.css
@@ -114,6 +114,12 @@ span.title-block {
 .nvtooltip {
     //position: relative !important;
     z-index: 888;
+    transition: opacity 0ms linear;
+    -moz-transition: opacity 0ms linear;
+    -webkit-transition: opacity 0ms linear;
+    transition-delay: 0ms;
+    -moz-transition-delay: 0ms;
+    -webkit-transition-delay: 0ms;
 }
 .nvtooltip table td{
     font-size: 11px !important;
diff --git a/superset/assets/visualizations/nvd3_vis.js b/superset/assets/visualizations/nvd3_vis.js
index ec09a8fc8bf06..ce2e6988a75ab 100644
--- a/superset/assets/visualizations/nvd3_vis.js
+++ b/superset/assets/visualizations/nvd3_vis.js
@@ -3,6 +3,7 @@ import $ from 'jquery';
 import { category21 } from '../javascripts/modules/colors';
 import { timeFormatFactory, formatDate } from '../javascripts/modules/dates';
 import { customizeToolTip } from '../javascripts/modules/utils';
+import throttle from 'lodash.throttle';
 
 const d3 = require('d3');
 const nv = require('nvd3');
@@ -58,6 +59,10 @@ const addTotalBarValues = function (chart, data, stacked) {
     });
 };
 
+function hideTooltips() {
+  $('.nvtooltip').css({ opacity: 0 });
+}
+
 function nvd3Vis(slice, payload) {
   let chart;
   let colorKey = 'key';
@@ -402,9 +407,17 @@ function nvd3Vis(slice, payload) {
       .call(chart);
     }
 
+    // on scroll, hide tooltips. throttle to only 4x/second.
+    $(window).scroll(throttle(hideTooltips, 250));
+
     return chart;
   };
 
+  // hide 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();
+
   const graph = drawGraph();
   nv.addGraph(graph);
 }