Develop with FastTrack

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>
  )
 
}

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

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.