Split arcs and labels to move labels to foreground

Change-Id: Ied6cfe989dfc8f0768d1d5d9e89de75c23031cde
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index 5857253..34efe04 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -231,7 +231,7 @@
       var overlaps = arc.overlaps;
       if (startPos == endPos) {
         startPos -= this.overlapDiff / 3;
-        endPos += this.overlapDiff / 3;
+        endPos   += this.overlapDiff / 3;
         overlaps += .5;
       };
 
@@ -285,6 +285,15 @@
       var middleY = (((startY + controlY) / 2) + controlY) / 2;
 
       // Create a boxed label
+      g = this._c("g");
+      g.setAttribute("class", "label");
+      this._labelsElement.appendChild(g);
+
+      var that = this;
+      g.addEventListener('mouseenter', function () {
+        that._labelsElement.appendChild(this);
+      });
+
       var labelE = g.appendChild(this._c("text"));
       labelE.setAttribute("x", x + middle);
       labelE.setAttribute("y", middleY + 3);
@@ -481,6 +490,10 @@
       this._arcsElement = arcs;
       arcs.classList.add("arcs");
 
+      var labels = g.appendChild(this._c("g"));
+      this._labelsElement = labels;
+      labels.classList.add("labels");
+
       // Sort arcs if not sorted yet
       if (this._sortedArcs === undefined)
         this._sortArcs();