Marker to indicate status of collapsible

display/display.css

@@ -334,3 +334,21 @@
     bottom: 0;
     left: 0;
 }
+
+.open-status-marker {
+    position: absolute;
+    right: 20px;
+    font-size: 26px;
+    color: #595858;
+    top: 2px;
+    bottom: 2px;
+}
+
+.open-status-marker-tab {
+    position: absolute;
+    right: 20px;
+    font-size: 15px;
+    color: #595858;
+    top: 10px;
+    bottom: 10px;
+}

display/overlays/neighbors.js

@@ -49,13 +49,23 @@ class NodeNeighborOverlay {
         );
         this.contentTab = contentTabs;
         contentTabs.style.display = "flex";
+        const openMarker = Helpers.createDiv(
+            "open-status-marker",
+            coll
+        );
+        openMarker.innerText = '-';
         coll.addEventListener("click", function() {
             if(contentTabs.style.display === "flex") {
                 contentTabs.style.display = "none";
+                openMarker.innerText = '+';
             } else {
                 contentTabs.style.display = "flex";
+                openMarker.innerText = '-';
             }
         });
+
+
+
         const colors =
             this.type === "link"
                 ? this.graph.edgeColors
@@ -79,6 +89,12 @@ class NodeNeighborOverlay {
             collTabMarker.style.borderColor = color;
             collTabMarker.style.backgroundColor = color;
 
+            const openMarkerTabs = Helpers.createDiv(
+                "open-status-marker-tab",
+                collTab
+            );
+            openMarkerTabs.innerText = '+';
+
             // Content of the different tabs
             const collTabContent = Helpers.createDiv(
                 "neighbor-content-links",
@@ -89,8 +105,10 @@ class NodeNeighborOverlay {
             collTab.addEventListener("click", function() {
                 if(collTabContent.style.display === "flex") {
                     collTabContent.style.display = "none";
+                    openMarkerTabs.innerText = '+';
                 } else {
                     collTabContent.style.display = "flex";
+                    openMarkerTabs.innerText = '-';
                 }
             });
         }