Fix commit graph toolips being left visible when scrolling on Firefox

Multiple commit graph tooltips could remain visible on Firefox when
scrolling over the commit graph. The cause of thi problem is that each
scroll event on network graph calls `renderPartialGraph()` to re-render
the graph if needed to show newly scrolled parts.
This in turn calls `top.toFront()` to bring certain SVG elements of the
tooltip to the top of the z-index.
However this is not just the tooltip and also includes the anchor
element (i.e. the dot that has the hover event handler registered for
it). `toFront()` is a function provided by raphael which ultimately
calls appendChild on each of the nodes in the set. This "re-adds" them
to the SVG DOM and ensure that they are on top.

On Firefox (as least as far back as 53 and up to 84) this `appendChild`
effectively removes the element from the DOM for a short period
before re-adding it.

Because we're triggering `renderPartialGraph()` from scroll events,
at the same time a previously hovered anchor can become un-hovered.
The "remove from DOM" behaviour on Firefox introduces a race condition
which means that the mouseout event can fail to be delivered to these
temporarily removed elements.

This in turn stops gitlab's hover out handler from firing and this stop
the tooltip from being removed.

Chrome doesn't have this behaviour and seems to still deliver events to
the `appendChild`'ed elements.

This fix changes the network graph code to only call `toFront()` on the
actual tooltip elements themselves (which do not have any hover
event handlers registered) rather than the anchor elements as well.

app/assets/javascripts/network/branch_graph.js

@@ -234,8 +234,7 @@ export default class BranchGraph {
 
   appendAnchor(x, y, commit) {
     const { r, top, options } = this;
-    const anchor = r
-      .circle(x, y, 10)
+    r.circle(x, y, 10)
       .attr({
         fill: '#000',
         opacity: 0,
@@ -245,13 +244,14 @@ export default class BranchGraph {
       .hover(
         function () {
           this.tooltip = r.commitTooltip(x + 5, y, commit);
-          return top.push(this.tooltip.insertBefore(this));
+          top.push(this.tooltip.insertBefore(this));
+          return this.tooltip.toFront();
         },
         function () {
+          top.remove(this.tooltip);
           return this.tooltip && this.tooltip.remove() && delete this.tooltip;
         },
       );
-    return top.push(anchor);
   }
 
   drawDot(x, y, commit) {

changelogs/unreleased/18573-tooltip-remain-displayed-in-the-graph-view.yml

+---
+title: Fix tooltips failing to hide in commit graph on Firefox
+merge_request: 56631
+author: Jonathan Duncan
+type: fixed