fix: only remove tooltips relating to a single vis (#167)

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",

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);
 }

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 });

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()

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}