Develop with FastTrack

Faceted search in MarkLogic requires a range index on the faceted property. A range index can be added for a property using the Admin Interface or a MarkLogic API. This screen shot shows a path range index added to the dob property in the Admin Interface:

Once the index is added, facets for the property can be returned in search results. To do this, a constraint is added in the query options of the application:

<?xml version="1.0" encoding="UTF-8"?>
<options xmlns="http://marklogic.com/appservices/search">
   <constraint name="dob">
        <range type="xs:date" facet="true" collation="">
            <path-index>/envelope/dob</path-index>
        </range>
   </constraint>
   <return-facets>true</return-facets>
</options>

The constraint settings correspond to the settings for the index. return-facets must be set to true so that facet results are returned with the search results. This example shows the dob facet information returned in the search response:

{
    "snippet-format": "snippet",
    "total": 3,
    "start": 1,
    "page-length": 10,
    "selected": "include",
    "results": [
        {
            "index": 1,
            "uri": "/person/1001.json",
            "path": "fn:doc(\"/person/1001.json\")",
            "score": 0,
            "confidence": 0,
            "fitness": 0,
            "href": "/v1/documents?uri=%2Fperson%2F1001.json",
            "mimetype": "application/json",
            "format": "json",
            "matches": [
                {
                    "path": "fn:doc(\"/person/1001.json\")/object-node()",
                    "match-text": [
                        "person Nerta Hallwood Marketing Manager Active 1985-03-04 104000 person-1001.jpg"
                    ]
                }
            ],
            "extracted": {
                "kind": "array",
                "content": [
                    {
                        "envelope": {
                            "entityType": "person",
                            "id": 1001,
                            "firstName": "Nerta",
                            "lastName": "Hallwood",
                            "title": "Marketing Manager",
                            "status": "Active",
                            "dob": "1985-03-04",
                            "salary": 104000,
                            "image": "person-1001.jpg",
                        }
                    }
                ]
            }
        },
        // ...
    ],
    "facets": {
        "dob": {
            "type": "xs:date",
            "facetValues": [
                {
                    "name": "1964-09-30",
                    "count": 1,
                    "value": "1964-09-30"
                },
                {
                    "name": "1985-03-04",
                    "count": 1,
                    "value": "1985-03-04"
                },
                {
                    "name": "1988-12-15",
                    "count": 1,
                    "value": "1988-12-15"
                }
            ]
        }   
    },
    // ...
}

This example shows the DateRangePicker widget. The widget has start and end date pickers for a faceted dob property in the results. With the constraint applied, only documents where the dob property is between 1/1/1980 and 12/31/1990 are returned and displayed.

This code shows the DateRangePicker widget imported and configured in a React application:

import { useContext, useState } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsSnippet, DateRangePicker } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
 
  const [dateVals, setDateVals] = useState({ start: new Date(1980, 0, 1), end: new Date(1990, 11, 31) });
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
 
  const updateDateRange = (constraint, previousConstraint, event) => {    
    constraint && context.addRangeFacetConstraint(constraint)
    constraint === undefined && context.removeRangeFacetConstraint(previousConstraint)
    setDateVals(event?.value)
  }
 
  const resetDateRange = (event, dateVals, constraint) => {
    context.removeRangeFacetConstraint(constraint)
    setDateVals({ start: new Date(1980, 0, 1), end: new Date(1990, 11, 31) })
  }
  
  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div style={{display: 'flex', flexDirection: 'row'}}>
          <div style={{width: '640px'}}>
            <ResultsSnippet
              results={context.searchResponse.results}
              paginationFooter={true}
            />
          </div>
          <div>
            {context?.searchResponse?.facets?.dob &&
              <DateRangePicker
                title={'Date of Birth'}
                name={'dob'}
                isFacet={true}
                value={dateVals}
                onSelect={updateDateRange}
                resetVisible={true}
                onReset={resetDateRange}
              />
            }
          </div>
      </div>
    </div>
  );
}
  
export default App;
 

In the DateRangePicker example configuration:

Example date range object passed to callbacks:

{
    "start": "1980-01-01T08:00:00.000Z",
    "end": "1990-12-31T08:00:00.000Z"
}

Example constraint passed to callbacks:

[
    {
        "type": "date",
        "name": "dob",
        "value": "1980-01-01",
        "operator": "GE",
        "title": "Date of Birth"
    },
    {
        "type": "date",
        "name": "dob",
        "value": "1990-12-31",
        "operator": "LE",
        "title": "Date of Birth"
    }
]