Link aliases in entity node details to their node

When viewing the details of an entity node, the listed aliases are now
 links that, when clicked, select the relevant alias node. If that alias
 node is not wholly visible, the view is updated to centre on that node.

The highlighting of the selected node has been adjusted to make it more
 obvious.

The event listener for node selection is now on the "select" event
 rather than the "tap" event so that it fires when a node is selected
 through code.

Author: mtaylorgds

templates/graph.html

@@ -27,6 +27,30 @@ <h2 id="sidebar-title">No node selected</h2>
 
       const BASE_NODE_SIZE = 10;
 
+      function isNodeInViewport(node) {
+        const nodeBoundingBox = node.renderedBoundingBox();
+        const container = node.cy().container();
+
+        const viewportWidth = container.clientWidth;
+        const viewportHeight = container.clientHeight;
+
+        return !(
+          nodeBoundingBox.x1 < 0 ||
+          nodeBoundingBox.x2 > viewportWidth ||
+          nodeBoundingBox.y1 < 0 ||
+          nodeBoundingBox.y2 > viewportHeight
+        );
+      }
+
+      function ensureNodeInView(node) {
+        if (!isNodeInViewport(node)) {
+          node.cy().animate({
+            center: { eles: node },
+            duration: 500
+          });
+        }
+      }
+
       function renderEntityDetails(node) {
         const data = node.data();
 
@@ -43,9 +67,24 @@ <h2 id="sidebar-title">No node selected</h2>
         } else {
           const aliasList = aliasNodes.map(aliasNode => {
             const aliasLabel = aliasNode.data('label');
-            return `<li>${escapeHtml(aliasLabel)}</li>`;
+            return `<li><a href="#" data-alias-id="${aliasNode.id()}">${aliasLabel}</a></li>`;
           }).join('');
           details.innerHTML = `<ul>${aliasList}</ul>`;
+
+          document.querySelectorAll('#node-details li a[data-alias-id]').forEach(item => {
+            item.addEventListener('click', (e) => {
+              const aliasId = e.target.getAttribute('data-alias-id');
+              if (aliasId) {
+                const cy = node.cy();
+                const aliasNode = cy.getElementById(aliasId);
+                if (aliasNode.length > 0) {
+                  cy.elements().unselect();
+                  aliasNode.select();
+                  ensureNodeInView(aliasNode);
+                }
+              }
+            });
+          });
         }
       }
 
@@ -169,8 +208,8 @@ <h2 id="sidebar-title">No node selected</h2>
               {
                 selector: ':selected',
                 style: {
-                  'border-width': 0.5,
-                  'border-color': '#10b981'
+                  'border-width': 1.5,
+                  'border-color': '#ffdd00'
                 }
               }
             ],
@@ -184,7 +223,7 @@ <h2 id="sidebar-title">No node selected</h2>
             }
           });
 
-          cy.on('tap', 'node', (event) => {
+          cy.on('select', 'node', (event) => {
             renderNodeDetails(event.target);
           });