From d25a859985dd048ce1e896b9c51dea9bc288f622 Mon Sep 17 00:00:00 2001
From: Kerollmops <clement@meilisearch.com>
Date: Mon, 28 Dec 2020 19:32:56 +0100
Subject: [PATCH] Display the facet values on the HTML debug page

---
 http-ui/public/script.js     | 15 ++++++++++++++-
 http-ui/public/style.css     | 12 ++++++++++++
 http-ui/templates/index.html |  4 ++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/http-ui/public/script.js b/http-ui/public/script.js
index a2005a9bd..b73bd0cd5 100644
--- a/http-ui/public/script.js
+++ b/http-ui/public/script.js
@@ -4,6 +4,7 @@ var timeoutID = null;
 $('#query, #facet').on('input', function () {
   var query = $('#query').val();
   var facet = $('#facet').val();
+  let fetchFacetDistribution = query.trim() !== "" || facet.trim() !== "";
   var timeoutMs = 100;
 
   if (timeoutID !== null) {
@@ -15,10 +16,13 @@ $('#query, #facet').on('input', function () {
       type: "POST",
       url: "query",
       contentType: 'application/json',
-      data: JSON.stringify({ 'query': query, 'facetCondition': facet, "facetDistribution": true }),
+      data: JSON.stringify({
+        'query': query, 'facetCondition': facet, "facetDistribution": fetchFacetDistribution
+      }),
       contentType: 'application/json',
       success: function (data, textStatus, request) {
         results.innerHTML = '';
+        facets.innerHTML = '';
 
         let timeSpent = request.getResponseHeader('Time-Ms');
         let numberOfDocuments = data.documents.length;
@@ -26,6 +30,15 @@ $('#query, #facet').on('input', function () {
         time.innerHTML = `${timeSpent}ms`;
         time.classList.remove('fade-in-out');
 
+        for (facet_name in data.facets) {
+          for (value of data.facets[facet_name]) {
+              const elem = document.createElement('span');
+              elem.classList.add("tag");
+              elem.innerHTML = `${facet_name}:${value}`;
+              facets.appendChild(elem);
+          }
+        }
+
         for (element of data.documents) {
           const elem = document.createElement('li');
           elem.classList.add("document");
diff --git a/http-ui/public/style.css b/http-ui/public/style.css
index 970b71ec5..2e58c24ff 100644
--- a/http-ui/public/style.css
+++ b/http-ui/public/style.css
@@ -4,6 +4,18 @@
   padding: 0;
 }
 
+#facets .tag {
+    margin-right: 1em;
+    margin-bottom: 1em;
+}
+#facets {
+    max-width: 900px;
+    margin: 20px auto 0 auto;
+    padding: 0;
+    max-height: 16em;
+  overflow: scroll;
+}
+
 #logo-white {
   display: none;
 }
diff --git a/http-ui/templates/index.html b/http-ui/templates/index.html
index 0ef239622..49d36bb65 100644
--- a/http-ui/templates/index.html
+++ b/http-ui/templates/index.html
@@ -84,6 +84,10 @@
     </div>
   </section>
 
+  <section id="facets">
+    <!-- facet values -->
+  </section>
+
   <section>
     <ol id="results" class="content">
       <!-- documents matching requests -->