From c940c6d111fb5d9b5803347d3b3587026f53a9dd Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@rafelsberger.at>
Date: Wed, 19 Sep 2018 10:53:27 +0200
Subject: [PATCH] [ML] Fixes a race condition where the chart tooltip could be
 hidden even if it should be shown. (#23270)

- Even with the check if fadeTimeout was set in show(), I could reproduce race conditions where a new tooltip would disappear again, because a previous fadeTimeout would trigger and set the new tooltips display to none.
- This PR fixes it by adding a non-asynchronous visible flag to mlChartTooltipService to check if the tooltip should stay visible if fadeTimeout triggers.
---
 .../components/chart_tooltip/chart_tooltip_service.js     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js b/x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js
index 1c5a3185a3f4d..a548e9a9ec798 100644
--- a/x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js
+++ b/x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js
@@ -14,6 +14,7 @@ const FADE_TIMEOUT_MS = 200;
 export const mlChartTooltipService = {
   element: null,
   fadeTimeout: null,
+  visible: false
 };
 
 mlChartTooltipService.show = function (contents, target, offset = { x: 0, y: 0 }) {
@@ -21,6 +22,7 @@ mlChartTooltipService.show = function (contents, target, offset = { x: 0, y: 0 }
     return;
   }
 
+  this.visible = true;
   // if a previous fade out was happening, stop it
   if (this.fadeTimeout !== null) {
     clearTimeout(this.fadeTimeout);
@@ -64,6 +66,8 @@ mlChartTooltipService.hide = function () {
     return;
   }
 
+  this.visible = false;
+
   this.element.css({
     opacity: '0',
   });
@@ -71,7 +75,9 @@ mlChartTooltipService.hide = function () {
   // after the fade out transition has finished, set the display to
   // none so it doesn't block any mouse events underneath it.
   this.fadeTimeout = setTimeout(() => {
-    this.element.css('display', 'none');
+    if (this.visible === false) {
+      this.element.css('display', 'none');
+    }
     this.fadeTimeout = null;
   }, FADE_TIMEOUT_MS);
 };