From b0c31500fc0e6bce9ad8ffa86aea4f6b31902e56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Renault?= Date: Wed, 20 Jan 2021 13:28:34 +0100 Subject: [PATCH] Simplify the front page --- http-ui/public/script.js | 65 ++++++++++++------------------------ http-ui/public/style.css | 27 +++++++++++++++ http-ui/templates/index.html | 20 ++++------- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/http-ui/public/script.js b/http-ui/public/script.js index 9887f06ce..4a16e8fc3 100644 --- a/http-ui/public/script.js +++ b/http-ui/public/script.js @@ -1,11 +1,9 @@ var request = null; var timeoutID = null; -var selected_facets = {}; $('#query, #filters').on('input', function () { var query = $('#query').val(); var filters = $('#filters').val(); - var facet_filters = selectedFacetsToArray(selected_facets); var timeoutMs = 100; if (timeoutID !== null) { @@ -20,12 +18,11 @@ $('#query, #filters').on('input', function () { data: JSON.stringify({ 'query': query, 'filters': filters, - 'facetFilters': facet_filters, "facetDistribution": true, }), contentType: 'application/json', success: function (data, textStatus, request) { - documents.innerHTML = ''; + results.innerHTML = ''; facets.innerHTML = ''; let timeSpent = request.getResponseHeader('Time-Ms'); @@ -35,39 +32,15 @@ $('#query, #filters').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); - $("

").text(upperCaseName).appendTo($('#facets')); - - // Create a div for a bulma select - const header = document.createElement('div'); - let div = $("
").addClass('select is-multiple'); - - // Create the select element - let select = $(``); - let selected_values = selected_facets[facet_name] || []; - // Create the previously selected facets (mark them as selected) - for (value of selected_values) { - let option = $('') - .text(value) - .attr('selected', "selected") - .attr('value', value) - .attr('title', value); - select.append(option); + for (value in data.facets[facet_name]) { + const elem = document.createElement('span'); + const count = data.facets[facet_name][value]; + elem.classList.add("tag"); + elem.setAttribute('data-name', facet_name); + elem.setAttribute('data-value', value); + elem.innerHTML = `${facet_name}:${value} (${count})`; + facets.appendChild(elem); } - - // Create the newly discovered facets - let diff = diffArray(Object.keys(data.facets[facet_name]), selected_values); - for (value of diff) { - let option = $('') - .text(value) - .attr('value', value) - .attr('title', value); - select.append(option); - } - - div.append(select); - $('#facets').append(div); } for (element of data.documents) { @@ -95,15 +68,21 @@ $('#query, #filters').on('input', function () { } elem.appendChild(ol); - documents.appendChild(elem); + results.appendChild(elem); } - // 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(); - $('#query').trigger('input'); + // 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 = $('#filters').val().trim(); + if (facet_query === "") { + $('#filters').val(`${name} = "${value}"`).trigger('input'); + } else { + $('#filters').val(`${facet_query} AND ${name} = "${value}"`).trigger('input'); + } }); }, beforeSend: function () { diff --git a/http-ui/public/style.css b/http-ui/public/style.css index c7ce75537..1de348082 100644 --- a/http-ui/public/style.css +++ b/http-ui/public/style.css @@ -1,5 +1,24 @@ #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 { @@ -61,6 +80,14 @@ 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 adb202b3a..83b1a3e49 100644 --- a/http-ui/templates/index.html +++ b/http-ui/templates/index.html @@ -84,20 +84,14 @@ -
-
-
-
- -
-
+
+ +
-
-
    - -
-
-
+
+
    + +