From bcc131e8660d7bc84dea91ce29444b1d4340038e Mon Sep 17 00:00:00 2001
From: tamo <tamo@meilisearch.com>
Date: Wed, 31 Mar 2021 16:17:34 +0200
Subject: [PATCH 1/2] add a button to display or hide the facets

---
 http-ui/public/script.js     | 17 +++++++++++++++++
 http-ui/public/style.css     | 10 +++++++++-
 http-ui/templates/index.html |  1 +
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/http-ui/public/script.js b/http-ui/public/script.js
index 4a16e8fc3..9d8c95b61 100644
--- a/http-ui/public/script.js
+++ b/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()
diff --git a/http-ui/public/style.css b/http-ui/public/style.css
index 1de348082..ef032e51e 100644
--- a/http-ui/public/style.css
+++ b/http-ui/public/style.css
@@ -10,11 +10,19 @@
 }
 
 #facets {
+    display: none;
     max-width: 900px;
     margin: 20px auto 0 auto;
     padding: 0;
     max-height: 16em;
-  overflow: scroll;
+    overflow: scroll;
+}
+
+#display_facets {
+    margin: 20px auto 0 auto;
+    padding: 5px;
+    max-height: 16em;
+    overflow: scroll;
 }
 
 #facets .tag:hover {
diff --git a/http-ui/templates/index.html b/http-ui/templates/index.html
index 83b1a3e49..49fb0eb2b 100644
--- a/http-ui/templates/index.html
+++ b/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>

From 13ce0ebb873c5193cef38de61220d2cacd46c7ef Mon Sep 17 00:00:00 2001
From: tamo <tamo@meilisearch.com>
Date: Wed, 31 Mar 2021 16:27:32 +0200
Subject: [PATCH 2/2] stop requestings the facets if the user has hidden them

---
 http-ui/public/script.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/http-ui/public/script.js b/http-ui/public/script.js
index 9d8c95b61..b621cd453 100644
--- a/http-ui/public/script.js
+++ b/http-ui/public/script.js
@@ -1,5 +1,6 @@
 var request = null;
 var timeoutID = null;
+var display_facets = false;
 
 $('#query, #filters').on('input', function () {
   var query = $('#query').val();
@@ -18,7 +19,7 @@ $('#query, #filters').on('input', function () {
       data: JSON.stringify({
         'query': query,
         'filters': filters,
-        "facetDistribution": true,
+        "facetDistribution": display_facets,
       }),
       contentType: 'application/json',
       success: function (data, textStatus, request) {
@@ -114,7 +115,6 @@ function selectedFacetsToArray(facets_obj) {
   return array;
 }
 
-display_facets = false;
 $('#display_facets').click(function() {
   if (display_facets) {
     display_facets = false;