added connection highlight

server/static/hover.js

@@ -0,0 +1,10 @@
+var connections = document.querySelectorAll('.connection');
+
+connections.forEach((connection) => {
+  connection.addEventListener('mouseover', function(event) {
+    event.target.style.stroke = 'red';
+  });
+  connection.addEventListener('mouseout', function(event) {
+    event.target.style.stroke = 'black';
+  });
+});

server/static/style.css

@@ -14,6 +14,10 @@ body {
   cursor: move;
 }
 
+.red-stroke {
+  stroke: red;
+}
+
 .svg-scrim {
   pointer-events: none;
   z-index: 5;

server/templates/index.html.tmpl

@@ -32,5 +32,6 @@
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>
     <script type="text/javascript" src="static/main.js"></script>
+    <script type="text/javascript" src="static/hover.js"></script>
   </body>
 </html>