facets: add year range facet by zubeydecivelek · Pull Request #289 · inveniosoftware/react-searchkit

zubeydecivelek · 2026-01-21T16:34:35Z

closes Group records by year CERNDocumentServer/cds-rdm#209

Description

RFC: https://github.com/inveniosoftware/rfcs/blob/1f7ec435f144226e2463c38ffe899869a944eb15/rfcs/rdm-0100-facets.md#date-facets
Codimd for UI and dependency comparison: https://codimd.web.cern.ch/O2LVmzZAQduLmBNJVRUiVg
Similar implementation on Open Data: cernopendata/cernopendata-portal#171

New RangeFacet component implemented to support year/range filtering.
RangeFacet container includes:

Histogram (Implemented with @visx/scale, @visx/shape)
RangeSlider for selecting min/max (Almost same with opendata implementation with small changes, thanks to @dianarand)
Optional filters:
RangeQuickFilters for common presets (Last 5 years/Last 6 month)
RangeCustomFilter for manual input (YYYY-MM-DD to YYYY-MM-DD)

RangeFacet usage example:

<RangeFacet
  title="Year"
  agg={{ aggName: "years" }}
  rangeSeparator=".."
  // optional
  defaultRanges={[
    { label: "Last 1 year", type: "years", value: 1 },
    { label: "Last 5 years", type: "years", value: 5 },
    { label: "Last 6 months", type: "months", value: 6 },
  ]}
  // optional 
  enableCustomRange 
/>

Checklist

Ticks in all boxes and 🟢 on all GitHub actions status checks are required to merge:

I'm aware of the code of conduct.
I've created logical separate commits and followed the commit message format.
I've added relevant test cases.
I've added relevant documentation.
I've marked translation strings.
I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
I've NOT included third-party code (copy/pasted source code or new dependencies).
- If you have added third-party code (copy/pasted or new dependencies), please reach out to an architect on Discord.

Frontend

I've followed the CSS/JS and React guidelines.
I've followed the web accessibility guidelines.
I've followed the user interface guidelines.

Reminder

By using GitHub, you have already agreed to the GitHub’s Terms of Service including that:

You license your contribution under the same terms as the current repository’s license.
You agree that you have the right to license your contribution under the current repository’s license.

src/lib/components/RangeFacet/RangeQuickFilters.js

src/lib/components/RangeFacet/RangeFacet.js

src/lib/components/RangeFacet/RangeHistogram.js

zzacharo

In general to follow some consistent pattern with the rest of the codebase here, you can have a look in BuggetAggregration component and see how we separate the Element from wrapper component.

package-lock.json

kpsherva · 2026-01-23T10:18:49Z

src/lib/components/RangeFacet/DateRangeInputs.js

+const getPartConfig = (part) => {
+  switch (part) {
+    case "YYYY":
+      return { placeholder: "YYYY", maxLength: 4, width: "8.5ch" };


what does 8.5ch translate to?

8.5ch is about 8.5 characters wide so enough space for YYYY

kpsherva · 2026-01-23T10:23:44Z

src/lib/components/RangeFacet/DateRangeInputs.js

+};
+
+DateRangeInputs.defaultProps = {
+  overridableId: "",


I am not sure about providing the empty string as a default... wouldn't it be better not to have the prop at all or to make it required? Otherwise we can cause some wrongly built overridableIDs

It was the same for all the overridable classes in the repo, see. Should we keep like that or change?

src/lib/components/RangeFacet/RangeCustomFilter.js

kpsherva · 2026-01-23T10:28:23Z

src/lib/components/RangeFacet/RangeCustomFilter.js

+      return this.setError(`Year must be between ${min} and ${max}`);
+    }
+    // Month bounds
+    if (from.m < 1 || from.m > 12 || to.m < 1 || to.m > 12) {
+      return this.setError("Month must be between 1 and 12");
+    }


wouldn't it be better to use a date handling library to validate it? ping @zzacharo for opinion

I found these libraries if we want to use :)

luxon: https://github.com/moment/luxon

date-fns: https://github.com/date-fns/date-fns

We have quite some experience with luxon, and we use it in InvenioRDM.

src/lib/components/RangeFacet/RangeCustomFilter.js

kpsherva · 2026-01-23T10:50:06Z

src/lib/components/RangeFacet/RangeCustomFilter.js

+        dateError={dateError}
+      >
+        <div className="range-custom-filter">
+          {!expanded ? (


I am not sure what does expanded do, could you describe?

It's for displaying the full date after clicking the Custom Dates button

kpsherva · 2026-01-23T10:53:43Z

src/lib/components/RangeFacet/RangeDefaultFilters.js

+    if (checked) {
+      this.setState({ activeLabel: null });
+      onClear();
+      return;


is return needed?

yes otherwise we can't uncheck it. Or below code can be in else block

src/lib/components/RangeFacet/RangeDefaultFilters.js

src/lib/components/RangeFacet/RangeFacet.js

src/lib/components/RangeFacet/RangeFacet.scss

kpsherva · 2026-01-23T12:25:11Z

src/lib/components/RangeFacet/RangeSlider.js

+    const areLabelsClose = minVal !== maxVal && diff < 20;
+    const areLabelsOverlapping = minVal !== maxVal && diff < 10;
+
+    const labelPlacement = (percentage) => percentage + ((-3 * percentage) / 50 + 3);


could you add a comment in the code explaining the math? why we have -3 for example, for a person first time reading, it is hard to figure out

Added the comment, it would be great if you can check :)

kpsherva · 2026-01-23T12:25:54Z

src/lib/components/RangeFacet/RangeSlider.js

+          <div className="slider-track" />
+          <div
+            className="slider-range"
+            style={{ left: `${minPercent}%`, width: `${diff}%` }}


please remove all inline styling, it is not a best practice (see in RDM docs). Sometimes it will cause errors if an instance has restritive CSP

@zubeydecivelek can you explain here why do we need dynamic styling? Maybe with @kpsherva we can find a better way to handle this :)

Selected range and label positions depend on the slider values and it's recalculates on every change.

Slider component is not written from scratch, it is based on the existing opendata implementation with minimal changes.

kpsherva · 2026-01-23T12:26:26Z

src/lib/components/RangeFacet/RangeSlider.js

+            style={{ left: `${minPercent}%`, width: `${diff}%` }}
+          />
+
+          {isDegenerate ? (


the variable name is quite interesting... what does it mean ? :)

it means range collapses to a single point, in case the aggregation has only one value. I changed the variable name to isSingleValue

src/lib/components/RangeFacet/RangeSlider.js

ntarocco

Massive amount of work. From a quick review, it looks good to me. However I did not test it.

Do I ask too much if you could update the doc and example apps in this repo too? They will be really helpful for users testing this library out (you can even test it live with Zenodo/CDS Videos).

ntarocco · 2026-01-29T16:29:35Z

src/lib/components/RangeFacet/RangeCustomFilter.js

+    const { value, min, max } = this.props;
+    const { checked } = this.state;
+
+    if (!checked) {


why this condition?

to be able watch the filter even if it's not checked but it's not needed I'm removing it thanks :)

ntarocco · 2026-01-29T16:30:55Z

src/lib/components/RangeFacet/RangeCustomFilter.js

+      return this.setError(`Year must be between ${min} and ${max}`);
+    }
+    // Month bounds
+    if (from.m < 1 || from.m > 12 || to.m < 1 || to.m > 12) {
+      return this.setError("Month must be between 1 and 12");
+    }


We have quite some experience with luxon, and we use it in InvenioRDM.

src/lib/components/RangeFacet/utils.js

package.json

zubeydecivelek · 2026-01-29T16:45:17Z

@ntarocco thank you for reviewing!

Do I ask too much if you could update the doc and example apps in this repo too? They will be really helpful for users testing this library out (you can even test it live with Zenodo/CDS Videos).

Example app update is ready (for opensearch and cern-videos demos), I'll push the code after the facet :) and I'll update the doc thanks!

zubeydecivelek · 2026-02-02T16:59:40Z

Clear button removed, to override it in invenio-search-ui. See here

Should we still keep it in react-searchkit?

sakshamarora1 · 2026-02-04T09:38:47Z

src/lib/components/RangeFacet/RangeFacet.js

+        ...currentQueryState,
+        filters: [...filters, [agg.aggName, filterValue]],
+      });
+    }, 500);


Nit: Should we have the delay parameter configurable as well or would it be an overkill?

It makes sense, but I’d prefer to keep it fixed for now. It’s internal performance detail rather than a user facing behavior. We can make it parameter if it's needed in the future.

JakobMiesner

partial review together with @palkerecsenyi

src/lib/components/RangeFacet/RangeFacet.js

JakobMiesner · 2026-02-04T10:58:02Z

src/lib/components/RangeFacet/utils.js

+  return `${from.toISODate()}${rangeSeparator}${to.toISODate()}`;
+}
+
+export const RANGE_MODES = Object.freeze({


nit and probably out of scope: I think the active mode and RANGE_MODES could be avoided by only passing the current value and updateValue from RangeFacet to the custom and default filters.
On render they can check is props.value == myExpectedValue (e.g. [2025, 2025] for "last 1 Year" filter) and be checked in that case and unchecked otherwise. And when clicked they do props.updateValue(myExpectedValue)

Thanks! Yes it can be removed, but in this case default filter and custom filter will be checked. It might be better because user will see the exact filter. What do you think? @zzacharo @kpsherva

src/lib/components/RangeFacet/RangeFacet.js

src/lib/components/RangeFacet/utils.js

src/lib/components/RangeFacet/RangeFacet.js

src/lib/components/RangeFacet/RangeDefaultFilters.js

src/lib/components/RangeFacet/RangeCustomFilter.js

palkerecsenyi · 2026-02-04T13:08:12Z

src/lib/components/RangeFacet/RangeCustomFilter.js

+                onClick={() => this.setState({ expanded: true })}
+                className="searchkit-daterange-custom-toggle"
+              >
+                Custom Dates


Do we have i18n support in this library?

@zzacharo Should we add invenio-i18n to react-searchkit?

We cannot because it is a python module... in priciple the user facing labels we expose them as props and we translate the values when we call the component. See for example here the requests searchbar

I added them as props, so we can use i18n in invenio-search-ui. See the commit:42ff73e
@zzacharo @palkerecsenyi

Since we're not enabling the custom filters, do you think we still need to add the label customization in invenio-search-ui or should we enable everything as default?

src/lib/components/RangeFacet/DateRangeInputs.js

src/lib/components/RangeFacet/RangeSlider.js

zubeydecivelek force-pushed the date-facet branch 2 times, most recently from 1572dd1 to 8a9c9c9 Compare January 21, 2026 16:53

zzacharo reviewed Jan 22, 2026

View reviewed changes

src/lib/components/RangeFacet/RangeQuickFilters.js Outdated Show resolved Hide resolved

zzacharo reviewed Jan 22, 2026

View reviewed changes

src/lib/components/RangeFacet/RangeFacet.js Outdated Show resolved Hide resolved

zzacharo reviewed Jan 22, 2026

View reviewed changes

src/lib/components/RangeFacet/RangeHistogram.js Outdated Show resolved Hide resolved

zzacharo reviewed Jan 22, 2026

View reviewed changes

zubeydecivelek force-pushed the date-facet branch 2 times, most recently from c7aec02 to 6d7266d Compare January 22, 2026 14:21

zubeydecivelek linked an issue Jan 22, 2026 that may be closed by this pull request

add date range facet component #287

Closed

carlinmack reviewed Jan 22, 2026

View reviewed changes

package-lock.json Show resolved Hide resolved

zubeydecivelek force-pushed the date-facet branch from 6d7266d to 545a8ab Compare January 23, 2026 09:00