From a8e3269ad6d32b11d3dec4cc5fd4c6c238d77780 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Renault?= <clement@meilisearch.com>
Date: Sun, 3 Jan 2021 21:15:02 +0100
Subject: [PATCH] Introduce a basic front to display facets

---
 http-ui/public/script.js     | 48 +++++++++++++++++++++---------------
 http-ui/public/style.css     | 27 --------------------
 http-ui/templates/index.html | 20 +++++++++------
 3 files changed, 41 insertions(+), 54 deletions(-)

diff --git a/http-ui/public/script.js b/http-ui/public/script.js
index 5b17dacbc..6a76fe859 100644
--- a/http-ui/public/script.js
+++ b/http-ui/public/script.js
@@ -1,5 +1,6 @@
 var request = null;
 var timeoutID = null;
+var selected_facets = {};
 
 $('#query, #facet').on('input', function () {
   var query = $('#query').val();
@@ -20,7 +21,7 @@ $('#query, #facet').on('input', function () {
       }),
       contentType: 'application/json',
       success: function (data, textStatus, request) {
-        results.innerHTML = '';
+        documents.innerHTML = '';
         facets.innerHTML = '';
 
         let timeSpent = request.getResponseHeader('Time-Ms');
@@ -30,16 +31,29 @@ $('#query, #facet').on('input', function () {
         time.classList.remove('fade-in-out');
 
         for (facet_name in data.facets) {
+          // Append an header to the list of facets
+          let upperCaseName = facet_name.charAt(0).toUpperCase() + facet_name.slice(1);
+          $("<h3></h3>").text(upperCaseName).appendTo($('#facets'));
+
+          // Create a div for a bulma select
+          const header = document.createElement('div');
+          let div = $("<div></div>").addClass('select is-multiple');
+
+          // Create the select element
+          let select = $(`<select data-facet-name='${facet_name}' multiple size=\"8\"></select>`);
           for (value of data.facets[facet_name]) {
-              const elem = document.createElement('span');
-              elem.classList.add("tag");
-              elem.setAttribute('data-name', facet_name);
-              elem.setAttribute('data-value', value);
-              elem.innerHTML = `${facet_name}:${value}`;
-              facets.appendChild(elem);
+              let option = $('<option></option>')
+                .text(value)
+                .attr('value', value)
+                .attr('title', value);
+              select.append(option);
           }
+
+          div.append(select);
+          $('#facets').append(div);
         }
 
+
         for (element of data.documents) {
           const elem = document.createElement('li');
           elem.classList.add("document");
@@ -65,22 +79,16 @@ $('#query, #facet').on('input', function () {
           }
 
           elem.appendChild(ol);
-          results.appendChild(elem);
+          documents.appendChild(elem);
         }
 
-        // When we click on a tag we append the facet value
-        // at the end of the facet query.
-        $('#facets .tag').on('click', function () {
-          let name = $(this).attr("data-name");
-          let value = $(this).attr("data-value");
-
-          let facet_query = $('#facet').val().trim();
-          if (facet_query === "") {
-            $('#facet').val(`${name} = "${value}"`).trigger('input');
-          } else {
-            $('#facet').val(`${facet_query} AND ${name} = "${value}"`).trigger('input');
-          }
+        // When we click on a facet value we change the global values
+        // to make sure that we don't loose the selection between requests.
+        $('#facets select').on('change', function(e) {
+            let facet_name = $(this).attr('data-facet-name');
+            selected_facets[facet_name] = $(this).val();
         });
+
       },
       beforeSend: function () {
         if (request !== null) {
diff --git a/http-ui/public/style.css b/http-ui/public/style.css
index 1de348082..c7ce75537 100644
--- a/http-ui/public/style.css
+++ b/http-ui/public/style.css
@@ -1,24 +1,5 @@
 #results {
-  max-width: 900px;
   margin: 20px auto 0 auto;
-  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;
-}
-
-#facets .tag:hover {
-  cursor: pointer;
 }
 
 #logo-white {
@@ -80,14 +61,6 @@
   opacity: 0.7;
 }
 
-.content {
-  max-width: 65%;
-  flex: 0 0 65%;
-  box-sizing: border-box;
-  padding-left: 10px;
-  color: rgba(0,0,0,.9);
-}
-
 .content mark {
   background-color: hsl(204, 86%, 88%);
   color: hsl(204, 86%, 25%);
diff --git a/http-ui/templates/index.html b/http-ui/templates/index.html
index 20de4884a..114652e7b 100644
--- a/http-ui/templates/index.html
+++ b/http-ui/templates/index.html
@@ -84,14 +84,20 @@
     </div>
   </section>
 
-  <section id="facets">
-    <!-- facet values -->
-  </section>
+  <section id="results" class="container">
+    <div class="columns">
+      <div class="column is-one-fifth">
+        <div id="facets" class="content">
+          <!-- facets matching requests -->
+        </div>
+      </div>
 
-  <section>
-    <ol id="results" class="content">
-      <!-- documents matching requests -->
-    </ol>
+      <div class="column is-four-fifths">
+        <ol id="documents" class="content">
+          <!-- documents matching requests -->
+        </ol>
+      </div>
+    </div>
   </section>
 
 </body>