Add link to the selected page

graph.js

@@ -85,9 +85,9 @@ function splitText(text) {
 
 function getTitle(obj) {
     if(obj.parent) {
-        return "sub of " + obj.parent.split('#', 1)[0].replace('_', ' ');
+        return "sub of " + obj.parent.split('#', 1)[0].replaceAll('_', ' ');
     }
-    return obj['@id'].split('#', 1)[0].replace('_', ' ');
+    return obj['@id'].split('#', 1)[0].replaceAll('_', ' ');
 }
 function getClasses(obj) {
     if (!obj._INST)
@@ -341,8 +341,11 @@ function selectNode(evt, node, d3Node){
     infoEl = document.getElementById('nodeInfo');
     infoEl.classList.remove('hidden');
 
-    infoEl.querySelector('.nodeTitle').textContent = getTitle(node);
-    infoEl.querySelector('.nodeContents').src = getUrl(node);
+    const url = getUrl(node);
+    const hrefEl = infoEl.querySelector('.nodeHref');
+    hrefEl.textContent = getTitle(node);
+    hrefEl.setAttribute('href',url);
+    infoEl.querySelector('.nodeContents').src = url;
     
 }
 

index.html

@@ -140,6 +140,13 @@
         #closeInfo:hover{
             color: var(--hover-color);
         }
+
+        a, a:link{
+            text-decoration: none;
+        }
+        a:hover{
+            text-decoration: underline;
+        }
     </style>
 </head>
 
@@ -154,7 +161,7 @@
     </svg>
 
     <div id="nodeInfo" class='hidden'>
-        <h2 class='nodeTitle'></h2>
+        <h2 class='nodeTitle'><a class='nodeHref' target="_blank"></a></h2>
         <div id='closeInfo'>&times;</div>
         <iframe class='nodeContents'></iframe>
     </div>