add a button to display or hide the facets

http-ui/public/script.js

@@ -114,6 +114,23 @@ function selectedFacetsToArray(facets_obj) {
   return array;
 }
 
+display_facets = false;
+$('#display_facets').click(function() {
+  if (display_facets) {
+    display_facets = false;
+    $('#display_facets').html("Display facets")
+    $('#display_facets').removeClass("is-danger");
+    $('#display_facets').addClass("is-success");
+    $('#facets').hide();
+  } else {
+    display_facets = true;
+    $('#display_facets').html("Hide facets")
+    $('#display_facets').addClass("is-danger");
+    $('#display_facets').removeClass("is-success");
+    $('#facets').show();
+  }
+});
+
 // Make the number of document a little bit prettier
 $('#docs-count').text(function(index, text) {
   return parseInt(text).toLocaleString()

http-ui/public/style.css

@@ -10,6 +10,7 @@
 }
 
 #facets {
+    display: none;
     max-width: 900px;
     margin: 20px auto 0 auto;
     padding: 0;
@@ -17,6 +18,13 @@
     overflow: scroll;
 }
 
+#display_facets {
+    margin: 20px auto 0 auto;
+    padding: 5px;
+    max-height: 16em;
+    overflow: scroll;
+}
+
 #facets .tag:hover {
   cursor: pointer;
 }

http-ui/templates/index.html

@@ -41,6 +41,7 @@
               <p class="heading">Number of Documents</p>
               <p class="title" id="docs-count">{{ docs_count }}</p>
             </div>
+	    <button id="display_facets" class="button is-success">display facets</button>
           </div>
         </nav>
       </div>