From 73018f3b3482dbf696d28f11beecb4a4ca80f74f Mon Sep 17 00:00:00 2001
From: Rex Lai <rexlai@ceh.ac.uk>
Date: Fri, 15 Nov 2024 08:49:02 +0000
Subject: [PATCH 1/2] Add multi-select widget for facet search. EMC-330

---
 templates/html/search/_facets.ftlh            | 25 ++-----
 web/less/editor.less                          | 37 ++++++++++
 web/less/search.less                          | 11 ---
 web/package-lock.json                         | 70 +++++++++++++++++++
 web/package.json                              |  4 +-
 web/src/index.js                              | 16 +----
 web/src/search/src/SearchFacets.js            | 26 -------
 .../src/templates/facetResultsTemplate.js     | 26 ++-----
 .../src/templates/facetsPanelTemplate.js      | 11 +--
 web/src/search/src/views/FacetsPanelView.js   | 62 ++++++++++++++--
 10 files changed, 190 insertions(+), 98 deletions(-)
 delete mode 100644 web/src/search/src/SearchFacets.js

diff --git a/templates/html/search/_facets.ftlh b/templates/html/search/_facets.ftlh
index 336977ea5..5b61114f3 100644
--- a/templates/html/search/_facets.ftlh
+++ b/templates/html/search/_facets.ftlh
@@ -5,32 +5,21 @@
   Where as the rest of the template matches up with
     /web/src/scripts/templates/facetsPanelTemplate.js
 -->
-<#macro facetResults results>
-  <ul>
-    <#list results as facet>
-      <#if facet.name?has_content && facet.name != 'Unknown' >
-        <li>
-          <a href="${facet.url}" title="${facet.name} (${facet.count})">${facet.name} <small class="facet-count">(${facet.count})</small></a>
-          <#if facet.active >
-            <a href="${facet.url}" title="${facet.name} (${facet.count})">
-              <span class="fa-solid fa-xmark"></span>
-            </a>
-          </#if>
-          <#if facet.subFacetResults?has_content>
-            <@facetResults facet.subFacetResults/>
-          </#if>
-        </li>
+<#macro facetResults facet>
+  <select style="display: none;" class="form-select search-facet" multiple="multiple" data-placeholder="search ${facet.displayName?lower_case}">
+    <#list facet.results as facetItem>
+      <#if facetItem.name?has_content && facetItem.name != 'Unknown' >
+        <option <#if facetItem.active> selected="selected"</#if> value="${facetItem.url}">${facetItem.name} (${facetItem.count})</option>
       </#if>
     </#list>
-  </ul>
+  </select>
 </#macro>
 
 <#list facets as facet>
   <#if facet.results?size gt 0>
     <div class="facet">
       <div class="facet-header">${facet.displayName}</div>
-      <input placeholder="search ${facet.displayName?lower_case}" id="search-facet-${facet.displayName?replace(' ', '-')}" class="form-control search-facet input-sm">
-      <@facetResults facet.results/>
+      <@facetResults facet/>
     </div>
   </#if>
 </#list>
diff --git a/web/less/editor.less b/web/less/editor.less
index c19721473..fcea0b990 100644
--- a/web/less/editor.less
+++ b/web/less/editor.less
@@ -5,6 +5,8 @@
 @import (inline) "../node_modules/jquery-ui/dist/themes/base/jquery-ui.min.css";
 @import (inline) "../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
 @import (inline) "../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
+@import (inline) "../node_modules/select2/dist/css/select2.min.css";
+@import (inline) "../node_modules/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css";
 
 .edit-mode {
     a#atlwdg-trigger {
@@ -478,3 +480,38 @@ ul.ui-autocomplete {
         background: #999;
     }
 }
+
+.select2-container {
+    .select2--large {
+        font-size: 1.7rem !important;
+
+        .select2-selection__rendered {
+            li {
+                font-size: 1.7rem !important;
+            }
+
+            .select2-selection__choice {
+                flex-direction: row-reverse !important;
+
+               .select2-selection__choice__remove {
+                    margin-left: 8px;
+                    margin-top: 4px;
+               }
+            }
+        }
+
+        .select2-results__options {
+            max-height: 290px !important;
+
+            li {
+                font-size: 1.7rem !important;
+                padding-left: 24px !important;
+            }
+
+            .select2-results__option--selected {
+                color: darkgray !important;
+                background-color: inherit !important;
+            }
+        }
+    }
+}
diff --git a/web/less/search.less b/web/less/search.less
index 1f68c2a1a..a937908a5 100644
--- a/web/less/search.less
+++ b/web/less/search.less
@@ -64,13 +64,6 @@ main {
             z-index: 999;
             padding: 1em;
         }
-
-        .form-control.search-facet {
-            display:none;
-            opacity: 85%;
-            position: sticky;
-            top: 0;
-        }
     }
 }
 
@@ -96,10 +89,6 @@ main {
 
             .facet {
 
-                &:not(:has(li)) {
-                    display: none;
-                }
-
                 .facet-header {
                     font-weight: 600;
                     font-size: 1.35em;
diff --git a/web/package-lock.json b/web/package-lock.json
index b5c809df0..c5ce4104a 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -24,6 +24,8 @@
                 "leaflet": "^1.9.4",
                 "leaflet-draw": "^1.0.4",
                 "leaflet.markercluster": "^1.5.3",
+                "select2": "4.1.0-rc.0",
+                "select2-bootstrap-5-theme": "~1.3.0",
                 "sweetalert2": "^11.7.27",
                 "underscore": "^1.13.6"
             },
@@ -2106,6 +2108,16 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "peer": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@puppeteer/browsers": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.1.0.tgz",
@@ -9040,6 +9052,37 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
+        "node_modules/select2": {
+            "version": "4.1.0-rc.0",
+            "resolved": "https://registry.npmjs.org/select2/-/select2-4.1.0-rc.0.tgz",
+            "integrity": "sha512-Hr9TdhyHCZUtwznEH2CBf7967mEM0idtJ5nMtjvk3Up5tPukOLXbHUNmh10oRfeNIhj+3GD3niu+g6sVK+gK0A=="
+        },
+        "node_modules/select2-bootstrap-5-theme": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/select2-bootstrap-5-theme/-/select2-bootstrap-5-theme-1.3.0.tgz",
+            "integrity": "sha512-uEJDruP4tmwyKcs3V0oP7CIsyC45PGF5ddo8unwTp8OucJ1PSuTOBr+xbWaHTQPGnvp7N96psVQ5UBMQvFCcHA==",
+            "dependencies": {
+                "bootstrap": "^5.1.3"
+            }
+        },
+        "node_modules/select2-bootstrap-5-theme/node_modules/bootstrap": {
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+            "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/twbs"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/bootstrap"
+                }
+            ],
+            "peerDependencies": {
+                "@popperjs/core": "^2.11.8"
+            }
+        },
         "node_modules/semver": {
             "version": "6.3.1",
             "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -12075,6 +12118,12 @@
                 "fastq": "^1.6.0"
             }
         },
+        "@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "peer": true
+        },
         "@puppeteer/browsers": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.1.0.tgz",
@@ -17352,6 +17401,27 @@
                 "ajv-keywords": "^3.5.2"
             }
         },
+        "select2": {
+            "version": "4.1.0-rc.0",
+            "resolved": "https://registry.npmjs.org/select2/-/select2-4.1.0-rc.0.tgz",
+            "integrity": "sha512-Hr9TdhyHCZUtwznEH2CBf7967mEM0idtJ5nMtjvk3Up5tPukOLXbHUNmh10oRfeNIhj+3GD3niu+g6sVK+gK0A=="
+        },
+        "select2-bootstrap-5-theme": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/select2-bootstrap-5-theme/-/select2-bootstrap-5-theme-1.3.0.tgz",
+            "integrity": "sha512-uEJDruP4tmwyKcs3V0oP7CIsyC45PGF5ddo8unwTp8OucJ1PSuTOBr+xbWaHTQPGnvp7N96psVQ5UBMQvFCcHA==",
+            "requires": {
+                "bootstrap": "^5.1.3"
+            },
+            "dependencies": {
+                "bootstrap": {
+                    "version": "5.3.3",
+                    "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+                    "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+                    "requires": {}
+                }
+            }
+        },
         "semver": {
             "version": "6.3.1",
             "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
diff --git a/web/package.json b/web/package.json
index 2f9a0fbd5..675fa8e07 100644
--- a/web/package.json
+++ b/web/package.json
@@ -100,6 +100,8 @@
         "leaflet-draw": "^1.0.4",
         "leaflet.markercluster": "^1.5.3",
         "sweetalert2": "^11.7.27",
-        "underscore": "^1.13.6"
+        "underscore": "^1.13.6",
+        "select2": "4.1.0-rc.0",
+        "select2-bootstrap-5-theme": "~1.3.0"
     }
 }
diff --git a/web/src/index.js b/web/src/index.js
index 6a9983695..6a2cda827 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -2,7 +2,6 @@
 /* eslint no-new: "off" */
 import './globals'
 import $ from 'jquery'
-import { createFacetSearch } from './search/src/SearchFacets.js'
 import Backbone from 'backbone'
 import 'bootstrap'
 import {
@@ -50,8 +49,6 @@ const $edit = $('.edit-control')
 const $serviceAgreement = $('.service-agreement')
 const $navbarToggle = $('.nav-toggle')
 
-initWithFetchingData()
-
 if ($catalogue.length) {
   initCatalogue()
 }
@@ -337,7 +334,8 @@ function initPermission () {
 
 function initSearch () {
   const app = new SearchApp()
-  new SearchAppView({ model: app })
+  const searchAppView = new SearchAppView({ model: app })
+  searchAppView.facetsPanelView.createFacetSearch(app)
   new SearchRouter({ model: app, location: window.location })
   new MessageView({ model: app })
 }
@@ -387,13 +385,3 @@ function initMetricsReport () {
   })
   new SearchRouter({ model: app, location: window.location })
 }
-
-/*
-  Page data is fetched on page load,
-  any js function for Freemarker template can be initialized here.
-*/
-function initWithFetchingData () {
-  $.getJSON(window.location.href, data => {
-    createFacetSearch(data.facets)
-  })
-}
diff --git a/web/src/search/src/SearchFacets.js b/web/src/search/src/SearchFacets.js
deleted file mode 100644
index a028f6e63..000000000
--- a/web/src/search/src/SearchFacets.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import $ from 'jquery'
-
-export function createFacetSearch (facets) {
-  facets.forEach(facet => {
-    const id = '#search-facet-' + facet.displayName.replaceAll(' ', '-')
-    if (typeof facet.results !== 'undefined') {
-      const data = facet.results
-        .filter(item => !item.active)
-        .map(item => ({
-          label: item.name,
-          url: item.url
-        }))
-      $(id).autocomplete({
-        minLength: 1,
-        source: data,
-        appendTo: '#search',
-        select: (event, ui) => {
-          $(id).val(ui.item.label)
-          const url = ui.item.url.replace('http:', window.location.protocol)
-          $('a[href="' + url + '"]').first().trigger('click')
-          return false
-        }
-      })
-    }
-  })
-}
diff --git a/web/src/search/src/templates/facetResultsTemplate.js b/web/src/search/src/templates/facetResultsTemplate.js
index ea899c98f..5002721c4 100644
--- a/web/src/search/src/templates/facetResultsTemplate.js
+++ b/web/src/search/src/templates/facetResultsTemplate.js
@@ -8,23 +8,11 @@ import _ from 'underscore'
  * corresponding freemarker template /templates/search/_facets.tpl
  */
 export default _.template(`
-  <ul>
-      <% _.each(results, function(facet) { %>
-          <% if(facet.name != 'Unknown') { %>
-              <li>
-                  <a href="<%=facet.url%>" title="<%=facet.name%> <span>(<%=facet.count%>)</span>"><%=facet.name%> <small class="facet-count">(<%=facet.count%>)</small></a>
-
-                  <% if(facet.active) { %>
-                      <a href="<%=facet.url%>" title="<%=facet.name%> <span>(<%=facet.count%>)</span>">
-                      <span class="fa-solid fa-times"></span>
-                      </a>
-                  <% } %>
-
-                  <% if (facet.subFacetResults) { %>
-                      <%= template({results:facet.subFacetResults, template: template}) %>
-                  <% } %>
-              <% } %>
-              </li>
-      <% }); %>
-  </ul>
+    <select style="display: none;" class="form-select search-facet" multiple="multiple" data-placeholder="search <%=facet.displayName.toLowerCase() %>">
+        <% _.each(facet.results, function(facetItem) { %>
+            <% if(facetItem.name != 'Unknown') { %>
+                <option <% if(facetItem.active) { %> selected="selected" <% } %> value="<%=facetItem.url%>"><%=facetItem.name%> (<%=facetItem.count%>)</option>
+            <% } %>
+        <% }); %>
+    </select>
 `)
diff --git a/web/src/search/src/templates/facetsPanelTemplate.js b/web/src/search/src/templates/facetsPanelTemplate.js
index 6ea9ce861..191034849 100644
--- a/web/src/search/src/templates/facetsPanelTemplate.js
+++ b/web/src/search/src/templates/facetsPanelTemplate.js
@@ -8,10 +8,11 @@ import _ from 'underscore'
  */
 export default _.template(`
 <% _.each(facets, function(facet) { %>
-  <div class="facet">
-    <div class="facet-header"><%= facet.displayName %></div>
-    <input placeholder="search <%= facet.displayName.toLowerCase() %>" id="search-facet-<%= facet.displayName.replaceAll(' ', '-') %>" class="form-control search-facet input-sm">
-    <%= template({"results": facet.results, "template": template}) %>
-  </div>
+  <% if(facet.results) { %>
+    <div class="facet">
+      <div class="facet-header"><%= facet.displayName %></div>
+      <%= template({"facet": facet, "template": template}) %>
+    </div>
+  <% } %>
 <% }); %>
 `)
diff --git a/web/src/search/src/views/FacetsPanelView.js b/web/src/search/src/views/FacetsPanelView.js
index d6032db23..f8a2d487f 100644
--- a/web/src/search/src/views/FacetsPanelView.js
+++ b/web/src/search/src/views/FacetsPanelView.js
@@ -1,7 +1,8 @@
 import Backbone from 'backbone'
 import panelTpl from '../templates/facetsPanelTemplate'
 import resultsTpl from '../templates/facetResultsTemplate'
-import { createFacetSearch } from '../SearchFacets.js'
+import deparam from 'deparam.js'
+import 'select2'
 
 export default Backbone.View.extend({
 
@@ -9,6 +10,58 @@ export default Backbone.View.extend({
     this.listenTo(this.model, 'results-sync', this.render)
   },
 
+  createFacetSearch (model) {
+    let closeDropdown = false
+    const searchFacets = this.$('.search-facet')
+    if (!searchFacets.data('select2')) {
+      searchFacets.select2({
+        theme: 'bootstrap-5',
+        width: '100%',
+        selectionCssClass: 'select2--large',
+        dropdownCssClass: 'select2--large',
+        templateSelection: e => { return e.text.split(' (')[0] }
+      })
+      this.$('.select2-selection__choice').removeAttr('title')
+
+      searchFacets.on('select2:select', e => {
+        this.handleMultiSelect(e.params.data.id, model)
+      })
+
+      searchFacets.on('select2:unselect', e => {
+        closeDropdown = true
+        this.handleMultiSelect(e.params.data.id, model)
+      })
+
+      searchFacets.on('select2:opening', e => {
+        if (closeDropdown) {
+          e.preventDefault()
+          closeDropdown = false
+        }
+      })
+    }
+  },
+
+  destroyFacetSearch () {
+    const searchFacets = this.$('.search-facet')
+    if (searchFacets.data('select2')) {
+      searchFacets.select2('close')
+      searchFacets.select2('destroy')
+      searchFacets.off('select2:select')
+      searchFacets.off('select2:unselect')
+      searchFacets.off('select2:opening')
+    }
+  },
+
+  handleMultiSelect (url, model) {
+    const query = url.split('?')[1]
+    if (query) {
+      model.setState(deparam(query, true))
+    } else {
+      model.setState({})
+    }
+    return false
+  },
+
   /*
      * Render the facet results panel as long as we have some results currently set.
      *
@@ -16,14 +69,15 @@ export default Backbone.View.extend({
      * results set.
      */
   render () {
+    this.destroyFacetSearch()
+
     const facets = this.model.getResults().attributes.facets
     this.$el.html(panelTpl({
-      facets: facets,
+      facets,
       template: resultsTpl
     }))
 
-    createFacetSearch(facets)
-
+    this.createFacetSearch(this.model)
     return this
   }
 })

From 672f43220f7385f7b873a77cb88d9a46ef882cd8 Mon Sep 17 00:00:00 2001
From: Rex Lai <rexlai@ceh.ac.uk>
Date: Fri, 15 Nov 2024 12:52:55 +0000
Subject: [PATCH 2/2] Fix search box width issue for firefox. EMC-330

---
 web/src/search/src/views/FacetsPanelView.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/search/src/views/FacetsPanelView.js b/web/src/search/src/views/FacetsPanelView.js
index f8a2d487f..141390b78 100644
--- a/web/src/search/src/views/FacetsPanelView.js
+++ b/web/src/search/src/views/FacetsPanelView.js
@@ -16,7 +16,10 @@ export default Backbone.View.extend({
     if (!searchFacets.data('select2')) {
       searchFacets.select2({
         theme: 'bootstrap-5',
-        width: '100%',
+        width: () => {
+          const userAgent = navigator.userAgent.toLowerCase()
+          return (userAgent.indexOf('firefox') > -1) ? '97%' : '99%'
+        },
         selectionCssClass: 'select2--large',
         dropdownCssClass: 'select2--large',
         templateSelection: e => { return e.text.split(' (')[0] }