Add a way to filter facets in the facets "more" modal (#3367)

* Facet typeahead: back end

This creates a new endpoint at /catalog/facet/<facet_name>/<query_fragment>

Co-authored-by: Isha Sinha <[email protected]>

* Facet typeahead: front end

Co-authored-by: Christina Chortaria <[email protected]>

* bundle exec i18n-tasks add-missing

* Incorporate feedback from review

Rather than two very similar controller actions for facets vs. facet_suggest,
this commit combines them into a single controller action.

---------

Co-authored-by: Isha Sinha <[email protected]>
Co-authored-by: Christina Chortaria <[email protected]>

Author: 3 people

.rubocop.yml

@@ -43,6 +43,7 @@ Metrics/BlockLength:
 
 Metrics/ClassLength:
   Exclude:
+    - "app/services/blacklight/search_service.rb"
     - "lib/blacklight/configuration.rb"
     - "lib/blacklight/search_builder.rb"
     - "lib/blacklight/search_state.rb"

app/components/blacklight/search/facet_suggest_input.html.erb

@@ -0,0 +1,9 @@
+<label for="facet-suggest-<%= facet.key %>">
+  <%= I18n.t('blacklight.search.facets.suggest.label', field_label: presenter&.label) %>
+</label>
+<input class="facet-suggest form-control"
+       id="facet-suggest-<%= facet.key %>"
+       data-facet-field="<%= facet.key %>"
+       name="facet_suggest_<%= facet.key %>"
+       placeholder="<%= I18n.t('blacklight.search.form.search.placeholder') %>">
+</input>

app/components/blacklight/search/facet_suggest_input.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Search
+    class FacetSuggestInput < Blacklight::Component
+      def initialize(facet:, presenter:)
+        @facet = facet
+        @presenter = presenter
+      end
+
+      private
+
+      attr_accessor :facet, :presenter
+    end
+  end
+end

app/controllers/concerns/blacklight/catalog.rb

@@ -83,7 +83,12 @@ def facet
     @facet = blacklight_config.facet_fields[params[:id]]
     raise ActionController::RoutingError, 'Not Found' unless @facet
 
-    @response = search_service.facet_field_response(@facet.key)
+    query_fragment = params[:query_fragment] || ''
+    @response = if query_fragment.present?
+                  search_service.facet_suggest_response(@facet.key, params[:query_fragment])
+                else
+                  @response = search_service.facet_field_response(@facet.key)
+                end
     @display_facet = @response.aggregations[@facet.field]
 
     @presenter = @facet.presenter.new(@facet, @display_facet, view_context)
@@ -92,6 +97,8 @@ def facet
       format.html do
         # Draw the partial for the "more" facet modal window:
         return render layout: false if request.xhr?
+        # Only show the facet names and their values:
+        return render 'facet_values', layout: false if params[:only_values]
         # Otherwise draw the facet selector for users who have javascript disabled.
       end
       format.json

app/javascript/blacklight/debounce.js

@@ -0,0 +1,15 @@
+// Usage:
+// ```
+// const basicFunction = (entry) => console.log(entry)
+// const debounced = debounce(basicFunction("I should only be called once"));
+//
+// debounced // does NOT print to the screen becase it is invoked again less than 200 milliseconds later
+// debounced // does print to the screen
+// ```
+export default function debounce(func, timeout = 200) {
+    let timer;
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => { func.apply(this, args); }, timeout);
+    };
+}

app/javascript/blacklight/facet_suggest.js

@@ -0,0 +1,26 @@
+import debounce from "blacklight/debounce";
+
+const FacetSuggest = async (e) => {
+  if (e.target.matches('.facet-suggest')) {
+    const queryFragment = e.target.value?.trim();
+    const facetField = e.target.dataset.facetField;
+    if (!facetField) { return; }
+
+    const urlToFetch = `/catalog/facet_suggest/${facetField}/${queryFragment}`
+    const response = await fetch(urlToFetch);
+    if (response.ok) {
+        const blob = await response.blob()
+        const text = await blob.text()
+    
+        const facetArea = document.querySelector('.facet-extended-list');
+    
+        if (text && facetArea) {
+            facetArea.innerHTML = text
+        }
+    }
+  }
+};
+
+document.addEventListener('input', debounce(FacetSuggest));
+
+export default FacetSuggest

app/javascript/blacklight/index.js

@@ -1,12 +1,14 @@
 import BookmarkToggle from 'blacklight/bookmark_toggle'
 import ButtonFocus from 'blacklight/button_focus'
+import FacetSuggest from 'blacklight/facet_suggest'
 import Modal from 'blacklight/modal'
 import SearchContext from 'blacklight/search_context'
 import Core from 'blacklight/core'
 
 export default {
   BookmarkToggle,
   ButtonFocus,
+  FacetSuggest,
   Modal,
   SearchContext,
   Core,

app/presenters/blacklight/facet_field_presenter.rb

@@ -31,7 +31,8 @@ def in_advanced_search?
     end
 
     def in_modal?
-      search_state.params[:action] == "facet"
+      modal_like_actions = %w[facet facet_suggest]
+      modal_like_actions.include? search_state.params[:action]
     end
 
     def modal_path

app/services/blacklight/search_service.rb

@@ -62,6 +62,11 @@ def facet_field_response(facet_field, extra_controller_params = {})
       repository.search(query.merge(extra_controller_params))
     end
 
+    def facet_suggest_response(facet_field, facet_suggestion_query, extra_controller_params = {})
+      query = search_builder.with(search_state).facet(facet_field).facet_suggestion_query(facet_suggestion_query)
+      repository.search(query.merge(extra_controller_params))
+    end
+
     # Get the previous and next document from a search result
     # @return [Blacklight::Solr::Response, Array<Blacklight::SolrDocument>] the solr response and a list of the first and last document
     def previous_and_next_documents_for_search(index, request_params, extra_controller_params = {})

app/views/catalog/facet.html.erb

@@ -6,6 +6,7 @@
   <% end %>
 
   <% component.with_title { facet_field_label(@facet.key) } %>
+  <%= render Blacklight::Search::FacetSuggestInput.new(facet: @facet, presenter: @presenter) %>
 
   <%= render partial: 'facet_index_navigation' if @facet.index_range && @display_facet.index? %>