blacklight_range_limit 8.4.0 → 9.0.0.beta1

data/app/assets/javascripts/blacklight-range-limit/index.js

@@ -0,0 +1,345 @@
+//import Chart from 'chart.js/auto';
+
+// Selective import to keep package size smaller if we have a bundler that can tree-shake
+// https://www.chartjs.org/docs/latest/getting-started/integration.html
+import {
+  Chart,
+  LineController,
+  LineElement,
+  LinearScale,
+  PointElement,
+  Filler,
+} from "chart.js";
+
+Chart.register(
+  LineController,
+  LineElement,
+  LinearScale,
+  PointElement,
+  Filler
+);
+
+
+export default class BlacklightRangeLimit {
+  static init(args = {}) {
+    // args and defaults
+    const {
+      // a basic vanilla JS onLoad handler as default, but pass in Blacklight.onLoad please
+      onLoadHandler = (fn => document.readyState !== 'loading' ? fn() : document.addEventListener('DOMContentLoaded', fn)),
+      callback = (range_limit_obj => {}),
+      containerQuerySelector = ".limit_content.range_limit"
+    } = args;
+
+    // For turbolinks on_loads, we need to execute this on every page change, and
+    // count on being passed Blacklight.onLoad to take care of it. We need to do
+    // a new querySelector on every onLoad, because of turbo changes!
+    onLoadHandler( () => {
+      document.querySelectorAll(containerQuerySelector).forEach( container => {
+        const range_limit = new BlacklightRangeLimit(container);
+        callback(range_limit);
+      });
+    });
+  }
+
+  chartEnabled = true;
+  textualFacets = true;
+  textualFacetsCollapsible = true;
+  rangeListHeadingLocalized = undefined;
+
+  rangeBuckets = []; // array of objects with bucket range info
+
+  xTicks = []; // array of x values to use as chart ticks
+
+  lineDataPoints = [] // array of objects in Chart.js line chart data format, { x: xVal, y: yVal }
+
+  container;  // div.range-limit wrapping entire facet display box
+  chartCanvasElement; // <canvas> DOM element
+
+  // container should be a `div.range-limit` that will have within it a `.distribution`
+  // with textual distributions that will be turned into a histogram chart.
+  constructor(container) {
+    this.container = container;
+
+    if (!this.container) {
+      throw new Error("BlacklightRangeLimit missing argument")
+    }
+
+    this.distributionElement = container.querySelector(".distribution")
+
+    // If there is no distribution element on page, it means we don't have data,
+    // nothing to do.
+    if (! this.distributionElement) {
+      return;
+    }
+
+    this.chartEnabled = (this.container.getAttribute("data-chart-enabled") != "false");
+    this.textualFacets = (this.container.getAttribute("data-textual-facets") != "false");
+    this.textualFacetsCollapsible = (this.container.getAttribute("data-textual-facets-collapsible") != "false")
+
+    this.rangeListHeadingLocalized = this.container.getAttribute("data-range-list-heading-localized") || "Range List";
+
+    const bounding = container.getBoundingClientRect();
+    if (bounding.width > 0 || bounding.height > 0) {
+      this.setup(); // visible, init now
+    } else {
+      // Delay setup until someone clicks to open the facet, mainly to avoid making
+      // extra http request to server if it will never be needed!
+      this.whenBecomesVisible(container, target => this.setup());
+    }
+  }
+
+  // if the range fetch link is still in DOM, fetch ranges from back-end,
+  // create chart element in DOM (replacing existing fetch link), chart
+  // with chart.js, store state in instance variables.
+  //
+  // This is idempotent in that if the items it creates appear to already have been
+  // created, it will skip creating them.
+  setup() {
+    // we replace this link in DOM after loaded, so if it's there, we need to load
+    const loadLink = this.distributionElement.querySelector("a.load_distribution");
+
+    // What we'll do to put the chart on page whether or not we need to load --
+    // when query has range limits, we don't need to load, it's already there.
+    let conditonallySetupChart = () => {
+      // No need to draw chart for only one or none buckets, not useful
+      if (this.chartEnabled && this.rangeBuckets.length > 1) {
+        this.chartCanvasElement = this.setupDomForChart();
+        this.drawChart(this.chartCanvasElement);
+      }
+    }
+
+    if (loadLink) {
+      loadLink.innerHTML = loadLink.getAttribute("data-loading-message-html") || "Loading...";
+
+      fetch(loadLink["href"]).
+        then( response => response.ok ? response.text() : Promise.reject(response)).
+        then( responseBody => new DOMParser().parseFromString(responseBody, "text/html")).
+        then( responseDom => responseDom.querySelector(".facet-values")).
+        then( element => this.extractBucketData(element)).
+        then( element => this.placeFacetValuesListElement(element)).
+        then( _ => { conditonallySetupChart()  }).
+        catch( error => {
+          console.error(error);
+        });
+    } else {
+      const listElement = this.distributionElement.querySelector(".facet-values");
+      this.extractBucketData(listElement);
+      this.placeFacetValuesListElement(listElement);
+      conditonallySetupChart();
+    }
+  }
+
+  // Extract our bucket ranges from HTML DOM, and store in our instance variables
+  extractBucketData(facetListDom = this.distributionElement.querySelector(".facet-values")) {
+    this.rangeBuckets = Array.from(facetListDom.querySelectorAll("ul.facet-values li")).map( li => {
+      const from    = this.parseNum(li.querySelector("span.from")?.getAttribute("data-blrl-begin") || li.querySelector("span.single")?.getAttribute("data-blrl-single"));
+      const to      = this.parseNum(li.querySelector("span.to")?.getAttribute("data-blrl-end") || li.querySelector("span.single")?.getAttribute("data-blrl-single"));
+      const count   = this.parseNum(li.querySelector("span.facet-count,span.count").textContent);
+      const avg     = (count / (to - from + 1));
+
+      return {
+        from: from,
+        to: to,
+        count: count,
+        avg: avg,
+      }
+    });
+
+    this.lineDataPoints = [];
+    this.xTicks = [];
+
+    // Points to graph on our line chart to make it look like a histogram.
+    // We use the avg as the y-coord, to make the area of each
+    // segment proportional to how many documents it holds.
+    this.rangeBuckets.forEach(bucket => {
+      this.lineDataPoints.push({ x: bucket.from, y: bucket.avg });
+      this.lineDataPoints.push({ x: bucket.to + 1, y: bucket.avg });
+
+      this.xTicks.push(bucket.from);
+    });
+
+    // Try to even up end point ticks
+    if (this.xTicks.length > 3 && (this.xTicks[1] - this.xTicks[0]) != (this.xTicks[2] - this.xTicks[1])) {
+      this.xTicks.shift();
+    }
+    if (this.xTicks[this.xTicks.length - 1] - this.xTicks[this.xTicks.length - 2] == 1) {
+      this.xTicks.push(this.rangeBuckets[this.rangeBuckets.length - 1].to + 1);
+    }
+
+    return facetListDom;
+  }
+
+  // Take HTML element with facet list values
+  //
+  // Possibly hide or wrap it with open/close disclosure, depending on
+  // configuration.
+  //
+  // Place it onto page.
+  placeFacetValuesListElement(listElement) {
+    if (!listElement) {
+      return;
+    }
+
+    listElement.classList.add("mt-3");
+
+    // No need to show if only 1 or none categories, not useful
+    if (!this.textualFacets || this.rangeBuckets.length <= 1) {
+      listElement.style["display"] = "none"
+    } else if (this.textualFacetsCollapsible) {
+      const detailsEl = this.container.ownerDocument.createElement("details");
+      detailsEl.innerHTML = "<summary>" + this.rangeListHeadingLocalized + "</summary>";
+      detailsEl.classList.add("mt-4", "text-muted");
+      detailsEl.appendChild( listElement );
+      listElement = detailsEl;
+    }
+
+    this.distributionElement.innerHTML  = listElement.outerHTML;
+  }
+
+  setupDomForChart() {
+    if(this.chartCanvasElement) {
+      // already there, we're good.
+      return this.chartCanvasElement;
+    }
+
+    const listDiv = this.distributionElement.querySelector(".facet-values");
+    const wrapperDiv = this.container.querySelector("*[data-chart-wrapper=true]");
+
+
+
+    // if (this.chartReplacesText) {
+    //   // We keep the textual facet data as accessible screen-reader, add .sr-only to it though
+    //   listDiv.classList.add("sr-only")
+    //   listDiv.classList.add("visually-hidden");
+    // }
+
+    // We create a <chart>, insert it into DOM in wrapper
+    this.chartCanvasElement = this.container.ownerDocument.createElement("canvas");
+    this.chartCanvasElement.setAttribute("aria-hidden", "true"); // textual facets sr-only are alternative
+    this.chartCanvasElement.classList.add("blacklight-range-limit-chart");
+    // We set inline-block for compatibility with container-fluid layouts, e.g. when
+    // Blacklight's config.full_width_layout = true
+    // See: https://github.com/projectblacklight/blacklight_range_limit/pull/269
+    this.chartCanvasElement.style.display = 'inline-block';
+    wrapperDiv.style.display  = "block"; // un-hide it
+    wrapperDiv.prepend(this.chartCanvasElement);
+
+    return this.chartCanvasElement;
+  }
+
+  // Draw chart to a <canvas> element
+  //
+  // Somehow this method should be locally over-rideable if you want to change parameters for chart, just
+  // override and draw the chart how you want?
+  drawChart(chartCanvasElement) {
+    const minX = this.lineDataPoints[0].x;
+    const maxX = this.lineDataPoints[this.lineDataPoints.length - 1].x;
+
+    // Get aspect ratio from CSS on wrapper element, has to match.
+    // Getting responsive chart.js to work was a pain! https://github.com/chartjs/Chart.js/issues/11005
+    const wrapper = chartCanvasElement.closest("*[data-chart-wrapper=true]");
+    const aspectRatio = window.getComputedStyle(wrapper)?.getPropertyValue("aspect-ratio") || 2;
+
+    const segmentBorderColor = this.container.getAttribute("data-chart-segment-border-color") || 'rgb(54, 162, 235)';
+    const segmentBgColor = this.container.getAttribute("data-chart-segment-bg-color") || 'rgba(54, 162, 235, 0.5)';
+
+    new Chart(chartCanvasElement.getContext("2d"), {
+      type: 'line',
+      options: {
+        // disable all animations
+        animation: {
+            duration: 0 // general animation time
+        },
+        hover: {
+            animationDuration: 0 // duration of animations when hovering an item
+        },
+        responsiveAnimationDuration: 0,
+        aspectRatio: aspectRatio,
+        resizeDelay: 15, // to debounce a bit
+        plugins: {
+          legend: false,
+          tooltip: { enabled: false} // tooltips don't currently show anything useful for our
+        },
+        elements: {
+          // hide points, and hide hover tooltip, which is not useful in our simulated histogram
+          point: {
+            radius: 0
+          }
+        },
+        scales: {
+          x: {
+            // scale should go from our actual min and max x values, we need min/max here and in ticks
+            min: minX,
+            max: maxX,
+            type: 'linear',
+            afterBuildTicks: axis => {
+              // will autoskip to remove ticks that don't fit, but give it our segment boundaries
+              // to start with
+              axis.ticks = this.xTicks.map(v => ({ value: v }))
+            },
+            ticks: {
+              min: minX,
+              max: maxX,
+              autoSkip: true, // supposed to skip when can't fit, but does not always work
+              maxRotation: 0,
+              maxTicksLimit: 5, // try a number that should fit
+              callback: (val, index) => {
+                // Don't format for locale, these are years, just display as years.
+                return val;
+                //
+              }
+            }
+          },
+          y: {
+            beginAtZero: true,
+            // hide axis labels and grid lines on y, to save space and
+            // because it's kind of meant to be relative?
+            ticks: {
+              display: false,
+            },
+            grid: {
+              display: false
+            }
+          }
+        },
+      },
+      data: {
+        datasets: [
+          {
+            data: this.lineDataPoints,
+            stepped: true,
+            fill: true,
+            // hide segments tha just go y 0 to 0 along the bottom
+            segment: {
+              borderColor: ctx => {
+                return (ctx.p0.parsed.y == 0 && ctx.p1.parsed.y == 0) ? 'transparent' : segmentBorderColor;
+              },
+            },
+            // Fill color under line:
+            backgroundColor: segmentBgColor
+          }
+        ]
+      }
+    });
+  }
+
+  // takes a string and parses into an integer, but throws away commas first, to avoid truncation when there is a comma
+  // use in place of javascript's native parseInt
+  parseNum(str) {
+    return parseInt( String(str).replace(/[^0-9-]/g, ''), 10);
+  }
+
+  // https://stackoverflow.com/a/70019478/307106
+  whenBecomesVisible(element, callback) {
+    const resizeWatcher = new ResizeObserver((entries, observer) => {
+      for (const entry of entries) {
+         if (entry.contentRect.width !== 0 && entry.contentRect.height !== 0) {
+           callback.call(entry.target);
+           // turn off observing, we only fire once
+           observer.unobserve(entry.target);
+         }
+       }
+    });
+    resizeWatcher.observe(element);
+  }
+}

data/app/components/blacklight_range_limit/range_facet_component.html.erb

@@ -4,43 +4,45 @@
   <% end %>
 
   <% component.with_body do %>
-    <div class="limit_content range_limit <%= @facet_field.key %>-config blrl-plot-config">
+    <div class="limit_content range_limit <%= @facet_field.key %>-config blrl-plot-config"
+        data-chart-enabled="<%= !! range_config[:chart_js] %>"
+        data-chart-segment-border-color="<%= range_config[:chart_segment_border_color] %>"
+        data-chart-segment-bg-color="<%= range_config[:chart_segment_bg_color] %>"
+        data-textual-facets="<%= !! range_config[:textual_facets] %>"
+        data-textual-facets-collapsible="<%= !! range_config[:textual_facets_collapsible] %>"
+        data-range-list-heading-localized="<%= t('blacklight.range_limit.range_list_heading') %>"
+    >
       <% if @facet_field.selected_range_facet_item %>
-        <%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field, facet_items: [@facet_field.selected_range_facet_item], classes: ['current']) %>
+        <%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field, facet_items: [@facet_field.selected_range_facet_item], classes: ['current', 'mb-3']) %>
       <% end %>
 
       <!-- no results profile if missing is selected -->
       <% unless @facet_field.missing_selected? %>
-        <!-- you can hide this if you want, but it has to be on page if you want
-             JS slider and calculated facets to show up, JS sniffs it. -->
-        <div class="profile">
-          <% if (min = @facet_field.min) &&
-                (max = @facet_field.max) %>
-
-            <% if range_config[:segments] != false %>
-              <div class="distribution subsection <%= 'chart_js' unless range_config[:chart_js] == false %>">
-                <!-- if  we already fetched segments from solr, display them
-                     here. Otherwise, display a link to fetch them, which JS
-                     will AJAX fetch.  -->
-                <% if @facet_field.range_queries.any? %>
-                  <%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field) %>
-                <% else %>
-                  <%= link_to(t('blacklight.range_limit.view_distribution'), range_limit_url(range_start: min, range_end: max), class: "load_distribution") %>
-                <% end %>
-              </div>
-            <% end %>
-            <p class="range subsection <%= "slider_js" unless range_config[:slider_js] == false %>">
-              <%= t('blacklight.range_limit.results_range_html', min: min, max: max) %>
-            </p>
-          <% end %>
+        <%# this has to be on page if you want calculated facets to show up, JS sniffs it.
+          it was very hard to get chart.js to be succesfully resonsive, required this wrapper!
+          https://github.com/chartjs/Chart.js/issues/11005 -%>
+        <div class="chart-wrapper mb-3" data-chart-wrapper="true" style="display: none; position: relative; width: 100%; aspect-ratio: <%= range_config[:chart_aspect_ratio] %>;">
         </div>
 
         <%= render BlacklightRangeLimit::RangeFormComponent.new(facet_field: @facet_field, classes: @classes) %>
 
-        <%= with_more_link(key: @facet_field.key, label: @facet_field.label) unless @facet_field.in_modal? %>
+        <% if uses_distribution? &&
+              (min = @facet_field.min) &&
+              (max = @facet_field.max) %>
+          <div class="distribution <%= 'chart_js' unless range_config[:chart_js] == false %>">
+            <!-- if  we already fetched segments from solr, display them
+                 here. Otherwise, display a link to fetch them, which JS
+                 will AJAX fetch.  -->
+            <% if @facet_field.range_queries.any? %>
+              <%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field) %>
+            <% else %>
+              <%= link_to(t('blacklight.range_limit.view_distribution'), range_limit_url(range_start: min, range_end: max), class: "load_distribution", "data-loading-message-html": t('blacklight.range_limit.loading_html')) %>
+            <% end %>
+          </div>
+        <% end %>
 
-        <% if @facet_field.missing_facet_item && !request.xhr? %>
-          <%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field, facet_items: [@facet_field.missing_facet_item], classes: ['missing', 'subsection']) %>
+        <% if @facet_field.missing_facet_item && !request.xhr? && uses_distribution? %>
+          <%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field, facet_items: [@facet_field.missing_facet_item], classes: ['missing', 'mt-3']) %>
         <% end %>
       <% end %>
     </div>

data/app/components/blacklight_range_limit/range_facet_component.rb

@@ -2,14 +2,6 @@
 
 module BlacklightRangeLimit
   class RangeFacetComponent < Blacklight::Component
-    renders_one :more_link, ->(key:, label:) do
-      tag.div class: 'more_facets' do
-        link_to t('blacklight.range_limit.view_larger', field_name: label),
-          search_facet_path(id: key),
-          data: { blacklight_modal: 'trigger' }
-      end
-    end
-
     delegate :search_action_path, :search_facet_path, to: :helpers
 
     def initialize(facet_field:, layout: nil, classes: BlacklightRangeLimit.classes)
@@ -18,12 +10,26 @@ module BlacklightRangeLimit
       @classes = classes
     end
 
+    # Don't render if we have no values at all -- most commonly on a zero results page.
+    # Normally we'll have at least a min and a max (of values in result set, solr returns),
+    # OR a count of objects missing a value -- if we don't have ANY of that, there is literally
+    # nothing we can display, and we're probably in a zero results situation.
+    def render?
+      (@facet_field.min.present? && @facet_field.max.present?) ||
+        @facet_field.missing_facet_item.present?
+    end
+
     def range_config
       @facet_field.range_config
     end
 
     def range_limit_url(options = {})
-      helpers.main_app.url_for(@facet_field.search_state.to_h.merge(range_field: @facet_field.key, action: 'range_limit').merge(options))
+      helpers.main_app.url_for(@facet_field.search_state.to_h.merge(range_field: @facet_field.key,
+                                                                    action: 'range_limit').merge(options))
+    end
+
+    def uses_distribution?
+      range_config[:chart_js] || range_config[:textual_facets]
     end
   end
 end

data/app/components/blacklight_range_limit/range_form_component.html.erb

@@ -1,12 +1,20 @@
 <%= form_tag search_action_path, method: :get, class: [@classes[:form], "range_#{@facet_field.key} d-flex justify-content-center"].join(' ') do %>
   <%= render hidden_search_state %>
 
-  <div class="input-group input-group-sm mb-3 flex-nowrap range-limit-input-group">
-    <%= render_range_input(:begin, begin_label) %>
-    <%= render_range_input(:end, end_label) %>
-    <div class="input-group-append visually-hidden">
+  <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, 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, class: "form-control form-control-sm range_end") %>
+      </div>
+    </div>
+    <div class="d-flex justify-content-end mt-2">
       <%= submit_tag t('blacklight.range_limit.submit_limit'), class: @classes[:submit], name: nil %>
     </div>
-    <%= submit_tag t('blacklight.range_limit.submit_limit'), class: @classes[:submit] + " sr-only", "aria-hidden": "true", name: nil %>
   </div>
 <% end %>

data/app/components/blacklight_range_limit/range_form_component.rb

@@ -9,32 +9,20 @@ module BlacklightRangeLimit
       @classes = classes
     end
 
-    def begin_label
-      range_config[:input_label_range_begin] || t("blacklight.range_limit.range_begin", field_label: @facet_field.label)
+    def begin_value_default
+      @facet_field.selected_range.is_a?(Range) ? @facet_field.selected_range.begin : @facet_field.min
     end
 
-    def end_label
-      range_config[:input_label_range_end] || t("blacklight.range_limit.range_end", field_label: @facet_field.label)
+    def end_value_default
+      @facet_field.selected_range.is_a?(Range) ? @facet_field.selected_range.end : @facet_field.max
     end
 
-    def maxlength
-      range_config[:maxlength]
+    def begin_input_name
+      "range[#{@facet_field.key}][begin]"
     end
 
-    # type is 'begin' or 'end'
-    def render_range_input(type, input_label = nil, maxlength_override = nil)
-      type = type.to_s
-
-      default = if @facet_field.selected_range.is_a?(Range)
-                  case type
-                  when 'begin' then @facet_field.selected_range.first
-                  when 'end' then @facet_field.selected_range.last
-                  end
-                end
-
-      html = number_field_tag("range[#{@facet_field.key}][#{type}]", default, maxlength: maxlength_override || maxlength, class: "form-control text-center range_#{type}")
-      html += label_tag("range[#{@facet_field.key}][#{type}]", input_label, class: 'sr-only visually-hidden') if input_label.present?
-      html
+    def end_input_name
+      "range[#{@facet_field.key}][end]"
     end
 
     private

data/app/presenters/blacklight_range_limit/facet_field_presenter.rb

@@ -38,7 +38,7 @@ module BlacklightRangeLimit
     def selected_range_facet_item
       return unless selected_range
 
-      Blacklight::Solr::Response::Facets::FacetItem.new(value: selected_range, hits: response.total)
+      Blacklight::Solr::Response::Facets::FacetItem.new(value: selected_range, hits: selected_range_hits)
     end
 
     def missing_facet_item
@@ -77,9 +77,20 @@ module BlacklightRangeLimit
       return nil unless stats.key? type
       # StatsComponent returns weird min/max when there are in
       # fact no values
-      return nil if response.total == stats['missing']
+      return nil if selected_range_hits == stats['missing']
 
       stats[type].to_s.gsub(/\.0+/, '')
     end
+
+    def selected_range_hits
+      return response.total unless response.grouped?
+
+      # The total doc count when results are *grouped* is located at a
+      # different key path than in a normal ungrouped response.
+      # If a config.index.group field is set via blacklight_config, use that.
+      # Otherwise, use the first (and likely only) group key in the response.
+      group_key = blacklight_config.view_config(action_name: :index).group || response.grouped.first.key
+      response.dig('grouped', group_key, 'matches')
+    end
   end
 end

data/app/presenters/blacklight_range_limit/facet_item_presenter.rb

@@ -15,15 +15,15 @@ module BlacklightRangeLimit
 
       view_context.t(
         range_limit_label_key,
-        begin: format_range_display_value(value.first),
-        begin_value: value.first,
-        end: format_range_display_value(value.last),
-        end_value: value.last
+        begin: format_range_display_value(value.begin),
+        begin_value: value.begin,
+        end: format_range_display_value(value.end),
+        end_value: value.end
       )
     end
 
     def range_limit_label_key
-      if value.first == value.last
+      if value.begin == value.end
         'blacklight.range_limit.single_html'
       else
         'blacklight.range_limit.range_html'
@@ -34,12 +34,7 @@ module BlacklightRangeLimit
     # A method that is meant to be overridden downstream to format how a range
     # label might be displayed to a user. By default it just returns the value.
     def format_range_display_value(value)
-      if view_context.method(:format_range_display_value).owner == RangeLimitHelper
-        value
-      else
-        Deprecation.warn(BlacklightRangeLimit, 'Helper method #format_range_display_value has been overridden; implement a custom FacetItemPresenter instead')
-        view_context.format_range_display_value(value, key)
-      end
+      value
     end
   end
 end

data/app/presenters/blacklight_range_limit/filter_field.rb

@@ -22,7 +22,7 @@ module BlacklightRangeLimit
       if value.is_a? Range
         param_key = filters_key
         params[param_key] = (params[param_key] || {}).dup
-        params[param_key][config.key] = { begin: value.first, end: value.last }
+        params[param_key][config.key] = { begin: value.begin, end: value.end }
         new_state.reset(params)
       else
         super
@@ -55,7 +55,7 @@ module BlacklightRangeLimit
       elsif params.dig(param_key, config.key).is_a? Hash
         b_bound = params.dig(param_key, config.key, :begin).presence
         e_bound = params.dig(param_key, config.key, :end).presence
-        Range.new(b_bound&.to_i, e_bound&.to_i) if b_bound && e_bound
+        Range.new(b_bound&.to_i, e_bound&.to_i) if b_bound || e_bound
       end
 
       f = except.include?(:filters) ? [] : [range].compact

data/blacklight_range_limit.gemspec

@@ -19,11 +19,11 @@ Gem::Specification.new do |s|
 
   s.add_dependency 'blacklight', '>= 7.25.2', '< 9'
   s.add_dependency 'view_component', ">= 2.54", "< 4"
-  s.add_dependency 'deprecation'
 
   s.add_development_dependency 'rspec', '~> 3.0'
   s.add_development_dependency 'rspec-rails'
   s.add_development_dependency 'capybara', '~> 3'
+  s.add_development_dependency 'capybara-screenshot', "~> 1.0"
   s.add_development_dependency 'sqlite3'
   s.add_development_dependency 'launchy'
   s.add_development_dependency 'solr_wrapper'

data/config/importmap.rb

@@ -0,0 +1,9 @@
+# our local js
+pin_all_from File.expand_path("../app/assets/javascripts/blacklight-range-limit", __dir__), under: "blacklight-range-limit", to: "blacklight-range-limit"
+
+
+# our dependencies also need to be pinned -- chart.js and it's single dependenchy.
+# But instead of including here, we generate into local app, so they can update version
+# numbers themselves if they want to, seems preferable.
+#
+# Chart.js will not work as a vendored pin at present, it has to be pin to "live" CDN.