in histogram facets only show the range where the buckets are not empty

searchlib/components/Facets/Unconnected/HistogramFacet/HistogramFacet.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import HistogramFacetComponent from './HistogramFacetComponent';
+import { getRangeStartEndFromData } from '@eeacms/search/lib/utils';
 
 const HistogramFacet = (props) => {
   // We're using the facet information to get the available values for the
@@ -15,6 +16,7 @@ const HistogramFacet = (props) => {
     onChange,
     onRemove,
     isInAccordion,
+    ranges,
   } = props; // , filters
   const filterValue = filters.find((f) => f.field === field);
 
@@ -30,19 +32,24 @@ const HistogramFacet = (props) => {
     : filterValue
     ? [filterValue.values?.[0]?.from, filterValue.values?.[0]?.to]
     : null;
-  const range_start = facet.data[0].value.from;
-  const range_end = facet.data[facet.data.length - 1].value.to;
-  // console.log('rendering', field, facet?.data);
+  const { data } = facet;
+  const histogram_range = getRangeStartEndFromData(data, ranges);
+
   return (
     props.active &&
     !!facet?.data && (
       <HistogramFacetComponent
         {...props}
-        data={facet?.data}
+        data={histogram_range.ranges}
         selection={value}
+        histogram_range={histogram_range}
         title={title || label}
         onChange={({ to, from }) => {
-          if (to === range_end && from === range_start && isInAccordion) {
+          if (
+            to === histogram_range.end &&
+            from === histogram_range.start &&
+            isInAccordion
+          ) {
             if (value) {
               const v = { to: value[1], from: value[0], type: 'range' };
               onRemove(v);

searchlib/components/Facets/Unconnected/HistogramFacet/HistogramFacetComponent.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { getRangeStartEnd } from '@eeacms/search/lib/utils';
 import { Input } from 'semantic-ui-react';
 import { HistogramSlider } from '@eeacms/search/components/Vis';
 
@@ -14,7 +13,7 @@ const visualStyle = {
 const useDebouncedInput = (initialValue) => {
   const [storedValue, setValue] = React.useState(initialValue);
   React.useEffect(() => {
-    if (initialValue !== storedValue && storedValue === undefined) {
+    if (initialValue !== storedValue) {
       // console.log('should update internal state', {
       //   initialValue,
       //   storedValue,
@@ -38,12 +37,10 @@ const useDebouncedInput = (initialValue) => {
 };
 
 const HistogramFacetComponent = (props) => {
-  const { data, ranges, onChange, selection } = props; // , step
-
-  const range = getRangeStartEnd(ranges);
+  const { data, histogram_range, onChange, selection } = props; // , step
   const {
-    start = selection ? selection[0] : undefined ?? range.start,
-    end = selection ? selection[1] : undefined ?? range.end,
+    start = selection ? selection[0] : undefined ?? histogram_range.start,
+    end = selection ? selection[1] : undefined ?? histogram_range.end,
   } = props;
 
   const [startValue, handleChangeStartValue] = useDebouncedInput(start);
@@ -71,8 +68,8 @@ const HistogramFacetComponent = (props) => {
             // console.log('selection', value, end, start);
             // onChange({ from: value, to: end }); //selection?.[1]
           }}
-          min={range.start}
-          max={range.end}
+          min={histogram_range.start}
+          max={histogram_range.end}
         />
         <Input
           type="number"
@@ -84,8 +81,8 @@ const HistogramFacetComponent = (props) => {
             // console.log('selection', value, end, start);
             // onChange({ from: start, to: value }); // selection?.[0]
           }}
-          min={range.start}
-          max={range.end}
+          min={histogram_range.start}
+          max={histogram_range.end}
         />
       </div>
 

searchlib/lib/utils.js

@@ -308,3 +308,42 @@ export function getBuckets({
     ];
   }
 }
+
+export function stripArray(a) {
+  while (true) {
+    if (a.length === 0) {
+      break;
+    }
+    if (a[0].count !== 0) {
+      break;
+    }
+    a = a.slice(1);
+  }
+
+  while (true) {
+    if (a.length === 0) {
+      break;
+    }
+    if (a[a.length - 1].count !== 0) {
+      break;
+    }
+    a.splice(-1);
+  }
+  return a;
+}
+
+export function getRangeStartEndFromData(data, ranges) {
+  const stripped_data = stripArray(data);
+
+  if (!data || data.length === 0 || stripped_data.length === 0) {
+    const fallback = getRangeStartEnd(ranges);
+    return { start: fallback.start, end: fallback.end, ranges: data };
+  }
+
+  const start = stripped_data[0].config.from || stripped_data[0].config.to;
+  const end =
+    stripped_data[stripped_data.length - 1].config.to ||
+    stripped_data[stripped_data.length - 1].config.from;
+
+  return { start, end, ranges: stripped_data };
+}