Added Tablist of links in InfoOverlay

graph.js

@@ -153,6 +153,39 @@ function createInfoOverlay() {
     description.innerText = 'Default Text';
     textArea.appendChild(description);
 
+    const link_container = document.createElement('div');
+    const links = document.createElement('div');
+    const linkClasses = getLinkClasses();
+
+    link_container.id = 'link_container';
+    links.className = 'tab';
+    links.id = 'links';
+
+    for(i=0; i < linkClasses.length; i++){
+
+        const linkType = linkClasses[i];
+        const tablink = document.createElement('button');
+        tablink.className = 'tablinks';
+        tablink.id = linkType + "_id";
+        tablink.innerHTML = linkType[0] + linkType[1] + linkType[2];
+        tablink.style = "background-color: " + edgeColors[linkClasses[i]];
+        tablink.setAttribute("onclick", "openTab(event, " + linkType + "_id)"); //unusual function call
+        links.appendChild(tablink);
+
+    }
+
+    link_container.appendChild(links);
+
+    linkClasses.forEach(linkType => {
+
+        const tabcontent = document.createElement('div');
+        tabcontent.className = 'tabcontent';
+        tabcontent.id = linkType + "_id_content";
+        link_container.appendChild(tabcontent);
+
+    })
+
+    overlayNode.appendChild(link_container);
 
     jQuery('#infoOverlayCloseButton').click(function () {
         jQuery('#infoOverlay').slideUp('fast');
@@ -270,6 +303,31 @@ function updateInfoOverlay(node) {
         jQuery('#infoOverlayDescription').text('Default Text');
     }
 
+    //tabs of the links to other nodes:
+    //delete old nodes from tabcontent
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+        childs = tabcontent[i].children;
+        for(j = 0; j < childs.length; j++) {
+            tabcontent[i].removeChild(childs[j]);
+        }
+    }
+    //add new nodes to tabcontent
+    for (i = 0; i < tabcontent.length; i++) {                                   //for every type of link
+        node.links.forEach(link => {                                            //and for every link
+            if(link.type + '_id_content' == tabcontent[i].id){                  //is checked if the type is equal
+                const linkButton = document.createElement('button');    //and if so a new element is created
+                if(link.source == node){
+                    linkButton.innerHTML = link.target.id;
+                }
+                if(link.target == node){
+                    linkButton.innerHTML = link.source.id;
+                }
+                //linkButton.setAttribute("onclick", "focusOnNode(" + linkButton.node + ")");  //TODO: make it so that the node is the parameter.
+                tabcontent[i].appendChild(linkButton);                          //and added
+            }
+        });
+    }
     jQuery('#infoOverlay').slideDown('fast');
 }
 
@@ -334,6 +392,23 @@ function updateHighlight() {
         .linkDirectionalParticles(Graph.linkDirectionalParticles());
 }
 
+//is used in createInfoOverlay, as an unusual function call to open link-tabs
+function openTab (event, tab) {
+    var i, tabcontent, tablinks;
 
+    // Get all elements with class="tabcontent" and hide them
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+    }
 
+    // Get all elements with class="tablinks" and remove the class "active"
+    tablinks = document.getElementsByClassName("tablinks");
+    for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
 
+    // Show the current tab, and add an "active" class to the button that opened the tab
+    document.getElementById(tab.id + "_content").style.display = "block";
+    event.currentTarget.className += " active";
+}
\ No newline at end of file

kg-style.css

@@ -78,7 +78,7 @@
     width: 350px;
     max-width: 400px;
     padding: 10px;
-    left: 0px;
+    left: 0;
     display: block;
     background-color: rgba(0,0,0,.6);
 }
@@ -99,4 +99,31 @@
     display: block;
     height: 2px;
     width: 78px;
+}
+
+.tab {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+.tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+}
+.tab button:hover {
+    background-color: #ddd;
+}
+.tab button.active {
+    background-color: #ccc;
+}
+.tabcontent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
 }
\ No newline at end of file