SelectedFacets

The SelectedFacets widget displays colored, labeled tags representing the facet values selected in a search application. The widget can display selections from these FastTrack widgets:

• StringFacet

• DateRangeFacet 

• BucketRangeFacet 

• NumberRangeFacet 

Example configuration

This React application code includes the SelectedFacets widget. The code configures the widget to display current selections from the four types of facet selection widgets.

import { SelectedFacets } from "ml-fasttrack"
 
const App = () => {
 
  const [valueDateFacet, setValueDateFacet] = useState({ start: new Date(1980, 1, 1), end: new Date(2020, 12, 31) });
  const [resetNumberFacet, setResetNumberFacet] = useState(false);
  const [resetBucketFacet, setResetBucketFacet] = useState('');
  const [resetMultistringFacet, setResetMultistringFacet] = useState('');
  const [resetStringFacet, setResetStringFacet] = useState('');
 
  const removeFacets = (facet, type, value) => {
    if (type === 'rf') {
      // Number range facet
      if (facet[0]?.type === 'number') {
        setResetNumberFacet(true)
      } else {
        // Date range facet
        setValueDateFacet({ start: null, end: null })
      }
      context.removeRangeFacetConstraint(facet)
    }
    else if (type === 'sf') {
      // Bucketed facet
      if (facet?.name === 'bucketedString') {
        setResetBucketFacet(facet?.value[0])
        context.removeStringFacetConstraint(facet)
      // Multi-select string
      } else if (facet?.name === 'multiString') {
        setResetMultistringFacet(value)
        context.removeStringFacetConstraint(facet, value)
      } else {
        // String facet
        setResetStringFacet(facet?.value[0])
        context.removeStringFacetConstraint(facet)
      }
    }
  }
 
  return (
    <SelectedFacets
      selectedFacetConfig={{
        'string': {
          color: 'red',
          closable: true
        },
        'date': {
          color: 'blue',
          closable: true,
          iconLabel: <i className='fas fa-calendar' style={{ marginRight: 3 }}></i>
        },
        'number': {
          color: 'green',
          dashed: false,
          closable: true,
          iconLabel: <i className='fas fa-dollar-sign' style={{ marginRight: 3 }}></i>
        },
      }}
      stringFacets={context.stringFacetConstraints}
      rangeFacets={context.rangeFacetConstraints}
      removeStringFacet={(f, v) => removeFacets(f, 'sf', v)}
      removeRangeFacet={(f) => removeFacets(f, 'rf')}
      separator="to"
    ></SelectedFacets>
  )
 
}

Code explanation

The SelectedFacets widget displays tags based on the selected facet values set in the application context.

• String facet selections and range facet selections are stored separately in the stringFacetConstraints and rangeFacetConstraints context variables. As those values change, the set of displayed tags change.

• The removeStringFacet and removeRangeFacet callback functions handle close events.

• The removeFacets function determines the type of facet being closed.

• The removeStringFacetConstraint or removeRangeFacetConstraint methods handle the closure in the application context.

• The example code also removes the facet selections from the facet selections widgets (StringFacet, DateRangeFacet, BucketRangeFacet, or NumberRangeFacet).

  Note:

  The StringFacet, DateRangeFacet, BucketRangeFacet, and NumberRangeFacet widgets are not shown in the Example Configuration.

• The local state variables (valueDateFacet, resetNumberFacet, resetBucketFacet, resetMultistringFacet, resetStringFacet) handle the reset state for the facet widgets. See StringFacet, DateRangeFacet, BucketRangeFacet, or NumberRangeFacet for details.

  Note:

  In the Example Configuration, the multi-string example represents a string facet that can have multiple value selections at once (hence the value argument is required when calling removeStringFacetConstraint). The string example represents a string facet that can only have a single selection at a time (hence the value is not required when calling removeStringFacetConstraint).

• The selectedFacetConfig object handles styling and other features. See API for more information.

Example rendering

This example shows the tags rendered by the SelectedFacets widget:

The Status facet is an example of a string facet that can only have a single selection. The Sources facet is an example of a string facet that can have multiple selections.

API