Fixed a bug that tooltip remains

Author: sarutak

core/src/main/resources/org/apache/spark/ui/static/timeline-view.js

@@ -159,6 +159,40 @@ function drawTaskAssignmentTimeline(groupArray, eventObjArray, minLaunchTime, zo
     curEnd = minLaunchTime + zoomMax;
   }
   taskTimeline.setWindow(minLaunchTime, curEnd);
+  taskTimeline.on("rangechange", function(prop) {
+    if (currentDisplayedTooltip !== null) {
+      $(currentDisplayedTooltip).tooltip("hide");
+    }
+  });
+
+  function getTaskIdxAndAttempt(selector) {
+    var taskIdxText = $(selector).attr("data-title");
+    var taskIdxAndAttempt = taskIdxText.match("Task (\\d+) \\(attempt (\\d+)");
+    var taskIdx = taskIdxAndAttempt[1];
+    var taskAttempt = taskIdxAndAttempt[2];
+    return taskIdx + "-" + taskAttempt;
+  }
+
+  // If we zoom up and a box moves away when the corresponding tooltip is shown,
+  // the tooltip can be remain.
+  // So, we need to hide tooltips using another mechanism.
+  var currentDisplayedTooltip = null;
+
+  $("#task-assignment-timeline").on({
+    "mouseenter": function() {
+      var taskIdxAndAttempt = getTaskIdxAndAttempt(this);
+      $("#task-" + taskIdxAndAttempt).addClass("corresponding-item-hover");
+      $(this).tooltip("show");
+      currentDisplayedTooltip = this;
+    },
+    "mouseleave" : function() {
+      var taskIdxAndAttempt = getTaskIdxAndAttempt(this);
+      $("#task-" + taskIdxAndAttempt).removeClass("corresponding-item-hover");
+      $(this).tooltip("hide");
+      currentDisplayedTooltip = null;
+    }
+  }, ".task-assignment-timeline-content");
+
   setupZoomable('#task-assignment-timeline-zoom-lock', taskTimeline);
 
   $("span.expand-task-assignment-timeline").click(function() {
@@ -170,16 +204,6 @@ function drawTaskAssignmentTimeline(groupArray, eventObjArray, minLaunchTime, zo
   });
 }
 
-function setupTaskEventActionOnMouseOver(taskIdAndAttempt) {
-  $("#task-" + taskIdAndAttempt).addClass("corresponding-item-hover");
-  $("#task-event-" + taskIdAndAttempt).tooltip("show");
-}
-
-function setupTaskEventActionOnMouseOut(taskIdAndAttempt) {
-  $("#task-" + taskIdAndAttempt).removeClass("corresponding-item-hover");
-  $("#task-" + taskIdAndAttempt).tooltip("hide");
-}
-
 function setupExecutorEventAction() {
   $(".item.box.executor").each(function () {
     $(this).hover(

core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala

@@ -582,19 +582,15 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
 
         val index = taskInfo.index
         val attempt = taskInfo.attempt
-        val indexAndAttempt = index + "-" + attempt
         val timelineObject =
           s"""
              {
                'className': 'task task-assignment-timeline-object ${classNameByStatus}',
                'group': '${executorId}',
-               'content': '<div id="task-event-${indexAndAttempt}"' +
-                 'onmouseover="setupTaskEventActionOnMouseOver(\\'${indexAndAttempt}\\')"' +
-                 'onmouseout="setupTaskEventActionOnMouseOut(\\'${indexAndAttempt}\\')"' +
-                 'class="task-assignment-timeline-content"' +
+               'content': '<div class="task-assignment-timeline-content"' +
                  'data-toggle="tooltip" data-placement="top"' +
                  'data-html="true" data-container="body"' +
-                 'data-title="${s"Task" + index + "(attempt " + attempt + ")"}<br>' +
+                 'data-title="${s"Task " + index + " (attempt " + attempt + ")"}<br>' +
                  'Status: ${taskInfo.status}<br>' +
                  'Launch Time: ${UIUtils.formatDate(new Date(launchTime))}' +
                  '${