when hovering over a note, outgoing and incoming connections are highlighted, set limit 3 seconds to the layout

src/public/javascripts/services/link_map.js

@@ -64,9 +64,9 @@ export default class LinkMap {
         const layout = new Springy.Layout.ForceDirected(
             graph,
             // param explanation here: https://github.com/dhotson/springy/issues/58
-            800.0, // Spring stiffness
+            400.0, // Spring stiffness
             400.0, // Node repulsion
-            0.2 // Damping
+            0.15 // Damping
         );
 
         const getNoteBox = noteId => {
@@ -91,6 +91,10 @@ export default class LinkMap {
                 $noteBox.addClass("link-map-active-note");
             }
 
+            $noteBox
+                .mouseover(() => $(".link-" + noteId).addClass("jsplumb-connection-hover"))
+                .mouseout(() => $(".link-" + noteId).removeClass("jsplumb-connection-hover"));
+
             this.$linkMapContainer.append($noteBox);
 
             this.jsPlumbInstance.draggable($noteBox[0], {
@@ -125,7 +129,10 @@ export default class LinkMap {
                 });
 
                 if (connection) {
-                    connection.canvas.id = connectionId;
+                    $(connection.canvas)
+                        .prop("id", connectionId)
+                        .addClass('link-' + edge.source.id)
+                        .addClass('link-' + edge.target.id);
                 }
                 else {
                     console.log(`connection not created for`, edge);
@@ -148,6 +155,9 @@ export default class LinkMap {
         );
 
         this.renderer.start();
+
+        // long rendering is annoying and by 3rd seconds the basic layout should be finished
+        setTimeout(() => this.renderer.stop(), 3000);
     }
 
     initPanZoom() {