collapse NTP graphs on page call

scss/_ntp.scss

@@ -1,3 +1,27 @@
 .js-plotly-plot {
     margin-bottom: 10px;
+}
+
+.js-plotly-plot .plotly .user-select-none {
+    width: 100% !important;
+    overflow: hidden;
+}
+
+.ntpBanner{
+    margin-top: 10px;
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: $back-color-3;
+}
+
+.ntpContent{
+    padding: 20px;
+    display: none;
+    background-color: $back-color-3;
+    transition: max-height 0.2s ease-out;
+}
+
+.visible {
+    display: block;
 }

ts/jl-ntp-graph.ts

@@ -18,8 +18,11 @@ graphElements.forEach((elememt) => {
     let ip:string = <string> elememt.getAttribute("data-server-ip");
 
     elememt.innerHTML = `
-    <div id="${graphIndexCounter}-Delay"></div>
-    <div id="${graphIndexCounter}-Score"></div>
+    <span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
+    <span id="${graphIndexCounter}-Content" class="ntpContent">
+        <div id="${graphIndexCounter}-Delay"></div>
+        <div id="${graphIndexCounter}-Score"></div>
+    </span>
     `;
     let currentIndex = graphIndexCounter;
     graphIndexCounter++;

ts/ntpMenu.ts

@@ -0,0 +1,14 @@
+let ntpNav = document.querySelectorAll(".ntpBanner");
+
+ntpNav.forEach((element) => {
+    (<HTMLElement>element).onclick = function (){
+        let contentID = element.getAttribute("data-index") + "-Content";
+        let contentElement = <HTMLElement> document.getElementById(contentID);
+
+        if(contentElement.classList.contains("visible")){
+            contentElement.classList.remove("visible");
+        } else {
+            contentElement.classList.add("visible");
+        }
+    }
+});