Display the facet values on the HTML debug page

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");

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;
 }

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 -->