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() {

src/public/stylesheets/desktop.css

@@ -367,7 +367,7 @@ body {
     background-color: var(--button-background-color);
     border-color: var(--button-border-color);
     border-width: 1px 0 1px 0;
-    border-radius: 3px;
+    border-radius: 4px;
     border-style: solid;
     display: flex;
     justify-content: space-between;
@@ -381,10 +381,6 @@ body {
     font-weight: bold;
 }
 
-.note-detail-sidebar .widget-header-actions {
-    padding-right: 10px;
-}
-
 .note-detail-sidebar .widget-header-action {
     color: var(--link-color) !important;
     cursor: pointer;

src/public/stylesheets/link_map.css

@@ -38,4 +38,9 @@
 
 .link-map-active-note {
     background-color: var(--more-accented-background-color) !important;
+}
+
+.link-map-container .jsplumb-connection-hover path {
+    stroke-width: 2 !important;
+    stroke: var(--main-text-color);
 }

src/routes/api/link_map.js

@@ -37,7 +37,7 @@ async function getLinkMap(req) {
             // no new note discovered, no need to search any further
             break;
         }
-        console.log(newNoteIds.size, maxNotes);
+
         if (newNoteIds.size > maxNotes) {
             // too many notes to display
             break;