Merge pull request #4705 from pulibrary/4692-bl-range-limit

Upgrade blacklight_range_limit to v9.0.0

Gemfile

@@ -13,7 +13,7 @@ gem 'blacklight_dynamic_sitemap'
 gem 'blacklight-hierarchy'
 gem 'blacklight-marc', '~>8.1'
 # slider limit support
-gem 'blacklight_range_limit', '~> 8.2'
+gem 'blacklight_range_limit', '~> 9.0.0'
 gem 'bootstrap', '~> 5.2.0'
 gem 'psych'
 # Capistrano
@@ -23,6 +23,7 @@ gem 'capistrano-passenger'
 # support for non-marc citations (e.g. SCSB records)
 gem 'citeproc-ruby'
 gem 'csl-styles'
+gem 'deprecation'
 # Authentication and authorization
 gem 'devise'
 gem 'devise-guests'

Gemfile.lock

@@ -144,9 +144,8 @@ GEM
     blacklight_dynamic_sitemap (1.0.0)
       blacklight (> 7.0)
       rails
-    blacklight_range_limit (8.5.0)
+    blacklight_range_limit (9.0.0)
       blacklight (>= 7.25.2, < 9)
-      deprecation
       view_component (>= 2.54, < 4)
     bootstrap (5.2.3)
       autoprefixer-rails (>= 9.1.0)
@@ -771,7 +770,7 @@ DEPENDENCIES
   blacklight-hierarchy
   blacklight-marc (~> 8.1)
   blacklight_dynamic_sitemap
-  blacklight_range_limit (~> 8.2)
+  blacklight_range_limit (~> 9.0.0)
   bootstrap (~> 5.2.0)
   capistrano (~> 3.4)
   capistrano-passenger
@@ -781,6 +780,7 @@ DEPENDENCIES
   coveralls_reborn
   csl-styles
   datadog
+  deprecation
   devise
   devise-guests
   ed25519

app/assets/javascripts/application.js

@@ -18,10 +18,8 @@
 //
 // Required by Blacklight
 //= require blacklight/blacklight
-//= require 'blacklight_range_limit'
 //= require babel/polyfill
 //
-//= require ./custom_range_limit.js
 //= require ./orangelight.js
 
 // Wait for the modal to open

app/assets/stylesheets/application.scss

@@ -10,7 +10,6 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
- *= require  'blacklight_range_limit'
  *= require_self
  */
 

app/assets/stylesheets/components/search--advanced.scss

@@ -100,17 +100,6 @@
   white-space: normal;
 }
 
-.dropdown-item.divider {
-  pointer-events: none;
-  border-bottom: 1px solid black;
-  margin-bottom: 4px;
-}
-
-.row .range_limit input.range_begin,
-.row .range_limit input.range_end {
-  width: 5em;
-}
-
 @include media-breakpoint-up(md) {
   .two-columns-md {
     display: flex;

app/components/numismatics_search_form_component.html.erb

@@ -15,11 +15,8 @@
       <% end %>
       <div class="mb-3 advanced-search-facet row">
         <%= label_tag pub_date_field.parameterize, :class => "col-sm-4 control-label advanced-facet-label" do %>Year<% end %>
-        <div class="col-sm-8 range_limit">
-          <label for="range_pub_date_start_sort_begin" class="visually-hidden">date range (starting year)</label>
-          <%= BlacklightRangeLimit::RangeFormComponent.new(facet_field: pub_date_presenter).render_range_input(:begin) %> –
-          <label for="range_pub_date_start_sort_end" class="visually-hidden">date range (ending year)</label>
-          <%= BlacklightRangeLimit::RangeFormComponent.new(facet_field: pub_date_presenter).render_range_input(:end) %>
+        <div class="col-sm-8">
+          <%= render RangeFormComponent.new(facet_field: pub_date_presenter) %>
         </div>
       </div>
       <div class="mb-3 advanced-search-facet row">

app/components/numismatics_search_form_component.rb

@@ -22,8 +22,12 @@ def pub_date_field
       blacklight_config.facet_fields['pub_date_start_sort']
     end
 
+    def pub_date_field_display_facet
+      @response.aggregations[pub_date_field]
+    end
+
     def pub_date_presenter
-      view_context.facet_field_presenter(pub_date_field, {})
+      view_context.facet_field_presenter(pub_date_field, pub_date_field_display_facet)
     end
 
     def initialize_constraints

app/components/orangelight/advanced_search_form_component.html.erb

@@ -37,11 +37,8 @@
         <% end %>
         <div class="mb-3 advanced-search-facet row">
           <%= label_tag pub_date_field.parameterize, :class => "col-sm-4 control-label advanced-facet-label" do %>Publication year<% end %>
-          <div class="col-sm-8 range_limit">
-            <label for="range_pub_date_start_sort_begin" class="visually-hidden">Publication date range (starting year)</label>
-            <%= BlacklightRangeLimit::RangeFormComponent.new(facet_field: pub_date_presenter).render_range_input(:begin) %> –
-            <label for="range_pub_date_start_sort_end" class="visually-hidden">Publication date range (ending year)</label>
-            <%= BlacklightRangeLimit::RangeFormComponent.new(facet_field: pub_date_presenter).render_range_input(:end) %>
+          <div class="col-sm-8">
+            <%= render RangeFormComponent.new(facet_field: pub_date_presenter) %>
           </div>
         </div>
       </div>
@@ -52,6 +49,5 @@
     <div class="submit-buttons float-end mb-3">
       <%= submit_tag t('blacklight.advanced_search.form.search_btn_html'), class: 'btn btn-primary advanced-search-submit', id: "advanced-search-submit" %>
     </div>
-
   </div>
 <% end %>

app/components/orangelight/advanced_search_form_component.rb

@@ -15,8 +15,12 @@ def pub_date_field
     blacklight_config.facet_fields['pub_date_start_sort']
   end
 
+  def pub_date_field_display_facet
+    @response.aggregations[pub_date_field]
+  end
+
   def pub_date_presenter
-    view_context.facet_field_presenter(pub_date_field, {})
+    view_context.facet_field_presenter(pub_date_field, pub_date_field_display_facet)
   end
 
   def initialize_search_field_controls

app/components/range_form_component.html.erb

@@ -0,0 +1,25 @@
+<%= render hidden_search_state %>
+
+<div class="range-limit-input-group">
+    <div class="d-flex justify-content-between align-items-end">
+      <div class="d-flex flex-column mr-1 me-1">
+        <%= label_tag(begin_input_name, t("blacklight.range_limit.range_begin_short"), class: 'text-muted small mb-1') %>
+        <%= number_field_tag(begin_input_name,
+                              begin_value_default,
+                              min: range_config[:min_value],
+                              max: range_config[:max_value],
+                              class: "form-control form-control-sm range_begin")
+        %>
+      </div>
+
+      <div class="d-flex flex-column ml-1 ms-1">
+        <%= label_tag(end_input_name, t("blacklight.range_limit.range_end_short"), class: 'text-muted small mb-1') %>
+        <%= number_field_tag(end_input_name,
+                              end_value_default,
+                              min: range_config[:min_value],
+                              max: range_config[:max_value],
+                              class: "form-control form-control-sm range_end")
+        %>
+      </div>
+    </div>
+</div>

app/components/range_form_component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+# An override of the RangeFormComponent html to remove the Apply submit button
+# from the advanced search and the numismatics form
+class RangeFormComponent < BlacklightRangeLimit::RangeFormComponent
+end

app/controllers/catalog_controller.rb

@@ -118,10 +118,13 @@ class CatalogController < ApplicationController
                                      collapse: false, home: true, solr_params: { 'facet.mincount' => Blacklight.blacklight_yml['mincount'] || 1 }, include_in_advanced_search: true
 
     # num_segments and segments set to defaults here, included to show customizable features
-    config.add_facet_field 'pub_date_start_sort', label: 'Publication year', single: true, range: {
+    config.add_facet_field 'pub_date_start_sort', label: 'Publication year', single: true, range: true, range_config: {
       num_segments: 10,
       assumed_boundaries: [1100, Time.now.year + 1],
-      segments: true
+      segments: true,
+      chart_segment_border_color: 'rgb(255, 217, 96)',
+      chart_segment_bg_color: 'rgba(255, 217, 96, 0.5)',
+      show_missing_link: false
     }
     config.add_facet_field 'language_facet', label: 'Language', limit: true, include_in_advanced_search: true, suggest: true
     config.add_facet_field 'subject_topic_facet', label: 'Subject: Topic', limit: true, include_in_advanced_search: false, suggest: true

app/controllers/search_history_controller.rb

@@ -2,6 +2,4 @@
 
 class SearchHistoryController < ApplicationController
   include Blacklight::SearchHistory
-
-  helper RangeLimitHelper
 end

app/javascript/entrypoints/application.js

@@ -1,10 +1,13 @@
 import OrangelightUiLoader from '../orangelight/orangelight_ui_loader.es6';
 import { luxImport } from '../orangelight/lux_import';
+import BlacklightRangeLimit from 'blacklight-range-limit';
 
 // boot stuff
 Blacklight.onLoad(() => {
   const loader = new OrangelightUiLoader();
   loader.run();
 });
 
+BlacklightRangeLimit.init({ onLoadHandler: Blacklight.onLoad });
+
 luxImport();

package.json

@@ -2,7 +2,10 @@
   "dependencies": {
     "@apollo/client": "^3.7.1",
     "@babel/preset-stage-3": "^7.8.3",
+    "@kurkle/color": "0.3.2",
     "@vitejs/plugin-vue": "^5.1.2",
+    "blacklight-range-limit": "^9.0.0",
+    "chart.js": "4.2.0",
     "graphql": "^16.8.1",
     "jest-environment-jsdom": "^29.4.0",
     "lux-design-system": "^5.11.0",

spec/components/numismatics_search_form_component_spec.rb

@@ -37,7 +37,7 @@
     expected_fields = [
       'Object Type', 'Denomination', 'Metal', 'City', 'State',
       'Region', 'Ruler', 'Artist', 'Find Place', 'Year',
-      'date range (starting year)', 'date range (ending year)',
+      'Begin', 'End',
       'Keyword'
     ]
     expect(rendered.all('label').map(&:text)).to match_array(expected_fields)

spec/features/advanced_searching_spec.rb

@@ -25,8 +25,9 @@
     expect(page).to have_selector('label', exact_text: 'Advanced search terms - second parameter')
     expect(page).to have_selector('label', exact_text: 'Options for advanced search - third parameter')
     expect(page).to have_selector('label', exact_text: 'Advanced search terms - third parameter')
-    expect(page).to have_selector('label', exact_text: 'Publication date range (starting year)')
-    expect(page).to have_selector('label', exact_text: 'Publication date range (ending year)')
+    expect(page).to have_selector('label', exact_text: 'Publication year')
+    expect(page).to have_selector('label', exact_text: 'Begin')
+    expect(page).to have_selector('label', exact_text: 'End')
   end
 
   it 'allows searching by format', js: true do

spec/features/facets_spec.rb

@@ -69,12 +69,11 @@
   end
 
   describe 'publication date facet' do
-    describe 'view larger option' do
+    describe 'it has a submit button' do
       it 'shows a large version of the slider' do
         visit '/?f[format][]=Book'
         click_button 'Publication year'
-        click_link 'View larger'
-        expect(page).to have_selector('.modal-body .range_limit')
+        expect(page).to have_selector('.submit')
       end
     end
   end

yarn.lock

@@ -1536,6 +1536,16 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/[email protected]":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.4.tgz#4d4ff677e1609214fc71c580125ddddd86abcabf"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
 "@nicolo-ribaudo/[email protected]":
   version "5.1.1-v1"
   resolved "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz"
@@ -2357,6 +2367,13 @@ balanced-match@^2.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
+blacklight-range-limit@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/blacklight-range-limit/-/blacklight-range-limit-9.0.0.tgz#89e1e7d36cef7fef205d0266fa0591006801f05d"
+  integrity sha512-Qr+3Rr0jOeoSNN5kN3fmZYqggAgpPpu3LX7HAHkCtrkHG5gPKqV+TK8BLvila9zueAs77dbWV7AmucZEvE+IBg==
+  dependencies:
+    chart.js "^ 4.4.1"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
@@ -2448,6 +2465,20 @@ char-regex@^1.0.2:
   resolved "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+[email protected]:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.0.tgz#dd281b2ce890bff32f3e249cf2972a1e74bc032c"
+  integrity sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
+"chart.js@^ 4.4.1":
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.7.tgz#7a01ee0b4dac3c03f2ab0589af888db296d896fa"
+  integrity sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 ci-info@^3.2.0:
   version "3.9.0"
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz"