From 91aaac770586300f07e128db0534ed167f1845e8 Mon Sep 17 00:00:00 2001
From: erik_ritter <erik.ritter@airbnb.com>
Date: Tue, 23 Jul 2019 14:58:46 -0700
Subject: [PATCH] fix: only remove tooltips relating to a single vis

---
 package.json                                  |  2 +-
 .../src/NVD3Vis.js                            | 24 ++++++++++++++++++-
 .../src/ReactNVD3.js                          |  9 +++++--
 .../src/utils.js                              | 12 ++++++++++
 .../legacy-preset-chart-nvd3/Area/Stories.tsx |  1 +
 5 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 8cace29f5..e8401b970 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@superset-ui/build-config": "^0.1.0",
     "@superset-ui/commit-config": "^0.0.9",
-    "@superset-ui/chart": "^0.11.13",
+    "@superset-ui/chart": "^0.11.14",
     "@superset-ui/chart-composition": "^0.11.9",
     "@superset-ui/color": "^0.11.9",
     "@superset-ui/connection": "^0.11.10",
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 78a818070..4e3b2d405 100644
--- a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
+++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -43,12 +43,14 @@ import {
   generateMultiLineTooltipContent,
   generateRichLineTooltipContent,
   generateTimePivotTooltip,
+  generateTooltipClassName,
   generateAreaChartTooltipContent,
   getMaxLabelSize,
   getTimeOrNumberFormatter,
   hideTooltips,
   tipFactory,
   tryNumify,
+  removeTooltip,
   setAxisShowMaxMin,
   stringifyTimeRange,
   wrapTooltip,
@@ -254,6 +256,10 @@ function nvd3Vis(element, props) {
   const container = element;
   container.innerHTML = '';
   const activeAnnotationLayers = annotationLayers.filter(layer => layer.show);
+  const chartId =
+    container.parentElement && container.parentElement.id !== ''
+      ? container.parentElement.id
+      : null;
 
   let chart;
   let width = maxWidth;
@@ -803,6 +809,18 @@ function nvd3Vis(element, props) {
         data.push(...timeSeriesAnnotations);
       }
 
+      // Uniquely identify tooltips based on chartId so this chart instance only
+      // controls its own tooltips
+      if (chartId) {
+        if (chart && chart.interactiveLayer && chart.interactiveLayer.tooltip) {
+          chart.interactiveLayer.tooltip.classes([generateTooltipClassName(chartId)]);
+        }
+
+        if (chart && chart.tooltip) {
+          chart.tooltip.classes([generateTooltipClassName(chartId)]);
+        }
+      }
+
       // render chart
       svg
         .datum(data)
@@ -1080,7 +1098,11 @@ function nvd3Vis(element, props) {
   // 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(true);
+  if (chartId) {
+    removeTooltip(chartId);
+  } else {
+    hideTooltips(true);
+  }
 
   nv.addGraph(drawGraph);
 }
diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/ReactNVD3.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/ReactNVD3.js
index b05cb52c5..9183f302c 100644
--- a/packages/superset-ui-legacy-preset-chart-nvd3/src/ReactNVD3.js
+++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/ReactNVD3.js
@@ -18,10 +18,15 @@
  */
 import { reactify } from '@superset-ui/chart';
 import Component from './NVD3Vis';
-import { hideTooltips } from './utils';
+import { hideTooltips, removeTooltip } from './utils';
 
 function componentWillUnmount() {
-  hideTooltips(true);
+  const { id } = this.props; // eslint-disable-line babel/no-invalid-this
+  if (id !== null && id !== undefined) {
+    removeTooltip(id);
+  } else {
+    hideTooltips(true);
+  }
 }
 
 export default reactify(Component, { componentWillUnmount });
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 32961f3a4..1be7b7e0e 100644
--- a/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
+++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
@@ -267,6 +267,18 @@ export function hideTooltips(shouldRemove) {
   }
 }
 
+export function generateTooltipClassName(uuid) {
+  return `tooltip-${uuid}`;
+}
+
+export function removeTooltip(uuid) {
+  const classSelector = `.${generateTooltipClassName(uuid)}`;
+  const target = document.querySelector(classSelector);
+  if (target) {
+    target.remove();
+  }
+}
+
 export function wrapTooltip(chart, maxWidth) {
   const tooltipLayer =
     chart.useInteractiveGuideline && chart.useInteractiveGuideline()
diff --git a/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.tsx b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.tsx
index 96be88b49..86a7816a6 100644
--- a/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.tsx
+++ b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.tsx
@@ -8,6 +8,7 @@ export default [
   {
     renderStory: () => (
       <SuperChart
+        id="stacked-area-chart"
         chartType="area"
         datasource={dummyDatasource}
         width={400}