demos: add range facet to opensearch and videos

src/demos/cern-videos/App.js

@@ -14,6 +14,7 @@ import { Accordion, Card, Container, Grid, Image, Item, Menu } from "semantic-ui
 import { InvenioSearchApi } from "../../lib/api/contrib/invenio";
 import {
   BucketAggregation,
+  RangeFacet,
   EmptyResults,
   Error,
   ReactSearchKit,
@@ -180,6 +181,21 @@ export class App extends Component {
             <Grid relaxed style={{ padding: "2em 0" }}>
               <Grid.Row columns={2}>
                 <Grid.Column width={4}>
+                  <RangeFacet
+                    title="Publication Year"
+                    agg={{
+                      aggName: "years",
+                    }}
+                    rangeSeparator="--"
+                    defaultRanges={[
+                      { label: "Last 1 year", type: "years", value: 1 },
+                      { label: "Last 10 years", type: "years", value: 10 },
+                    ]}
+                    enableCustomRange
+                    dateRangeToLabel="-"
+                    customDatesLabel="Choose dates"
+                  />
+                  <br />
                   <BucketAggregation
                     title="Categories"
                     agg={{

src/demos/opensearch/App.js

@@ -23,6 +23,7 @@ import {
 import { OSSearchApi } from "../../lib/api/contrib/opensearch";
 import {
   BucketAggregation,
+  RangeFacet,
   EmptyResults,
   Error,
   ReactSearchKit,
@@ -159,6 +160,17 @@ export class App extends Component {
             <Grid relaxed style={{ padding: "2em 0" }}>
               <Grid.Row columns={2}>
                 <Grid.Column width={4}>
+                  <RangeFacet
+                    title="Year"
+                    agg={{ aggName: "years" }}
+                    rangeSeparator=".."
+                    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 },
+                    ]}
+                    enableCustomRange
+                  />
                   <BucketAggregation
                     title="Tags"
                     agg={{ field: "tags", aggName: "tags_agg" }}

src/demos/opensearch/DemoOSRequestSerializer.js

@@ -86,14 +86,48 @@ export class DemoOSRequestSerializer {
         subtype_agg: "employee_type.subtype",
       };
       const aggValueObj = this.getFilters(filters);
+      const mustClauses = [];
       // conver to object
-      const terms = Object.keys(aggValueObj).map((aggName) => {
-        const obj = {};
+      Object.keys(aggValueObj).forEach((aggName) => {
+        const values = aggValueObj[aggName];
+        if (aggName === "years") {
+          const rangeValue = values[0];
+          if (!rangeValue) return;
+
+          const [fromPart, toPart] = rangeValue.split("..");
+          if (!fromPart || !toPart) return;
+
+          const fromYear = fromPart.slice(0, 4);
+          const toYear = toPart.slice(0, 4);
+
+          const gte = fromPart.length > 4 ? fromPart : `${fromYear}-01-01`;
+          const lte = toPart.length > 4 ? toPart : `${toYear}-12-31`;
+
+          mustClauses.push({
+            range: {
+              date: { gte, lte },
+            },
+          });
+
+          return;
+        }
         const fieldName = aggFieldsMapping[aggName];
-        obj[fieldName] = aggValueObj[aggName];
-        return { terms: obj };
+        if (fieldName) {
+          mustClauses.push({
+            terms: {
+              [fieldName]: values,
+            },
+          });
+        }
       });
-      bodyParams["post_filter"] = { bool: { must: terms } };
+
+      if (mustClauses.length) {
+        bodyParams.post_filter = {
+          bool: {
+            must: mustClauses,
+          },
+        };
+      }
     }
 
     // simulate a backend that defines all the possible complex aggregations per index
@@ -114,6 +148,16 @@ export class DemoOSRequestSerializer {
     };
     _extend(bodyParams["aggs"], aggBucketNestedEmployeeType);
 
+    _extend(bodyParams.aggs, {
+      years: {
+        date_histogram: {
+          field: "date",
+          calendar_interval: "year",
+          format: "yyyy",
+        },
+      },
+    });
+
     return bodyParams;
   };
 }