show hidden button style + do not create div if hidden

web/app.html

@@ -14,11 +14,11 @@
 
 <!--banner-->
 <div class="banner">
-    <p>Lorem ipsum dolor sit amet</p>
+    <p></p>
     <input id="additemid" type="text" placeholder="item id" pattern="[0-9]*">
     <input id="addattributes" type="text" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
     <button id="addbutton" type="button">Add</button>
-    <button id="global_toggleshow" type="button">show_hidden</button>
+    <button id="global_toggleshow" class="global_toggleshow" type="button">show hidden</button>
 </div>
 
 <!--popup confirmation window-->

web/app.js

@@ -18,6 +18,11 @@ const currentUrl = window.location.href;
 var show_hidden = false;
 document.getElementById("global_toggleshow").addEventListener("click", function() {
    show_hidden = !show_hidden;
+   if (document.getElementById("global_toggleshow").innerHTML == "show hidden") {
+       document.getElementById("global_toggleshow").innerHTML = "hide";
+    } else {
+        document.getElementById("global_toggleshow").innerHTML = "show hidden";
+    }
    refresh_graphs();
 });
 

web/rendergraphs.js

@@ -1,5 +1,4 @@
 function render_graphs(items, history, show_hidden) {
-
     // Date domain (width)
     const x = d3.scaleTime()
         .domain(d3.extent(history, d => d.date))
@@ -8,10 +7,13 @@ function render_graphs(items, history, show_hidden) {
     // Group the data by (uuid)
     const nestedData = d3.group(history, d => d.uuid);
     // Create a div for each graph
+    console.log(nestedData.size)
     const graphDivs = d3.select("#graphs")
         .selectAll(".graph-container")
         .data(nestedData.keys())
-        .enter().append("div")
+        .enter()
+        .filter(key => items[key].show || show_hidden)
+        .append("div")
         .attr("class", "graph-container");
 
     // Append SVG elements to each div

web/style.css

@@ -23,6 +23,11 @@ body {
   text-align: center;
 }
 
+.global_toggleshow {
+  float: right;
+  margin-right: 20px;
+}
+
 .banner {
   background-color: #177013; /* background color */
   color: #fff; /* text color */