How to make facets stay even after the selection

[pradeepjanga (pradeep)]

Is there a way, can we show all facets even after the selection on single facets value.
Right now if i filter on any facets, all the other selection are hidden.
Example like below:

is there a config to do that. or Do we have to customize something.

Thanks

[reka.gay]

You can make your facets disjunctive - then they will remain (without their counters being updated) on selection as they represent an OR not an AND relation - so selecting more will increase the number of results, not decrease them.

Only works within its own "group", though: in your example, if you had an "Exam phase" as well as a "Study Phase", selecting a box in the former will filter out all without that value in the latter.

I got around that by implementing a session cookie for available facets so at least I can display them, grayed out.

[pradeepjanga (pradeep)]

How did you implement session cookie thing for facets.
Do you got an example on how to do that ?

Thanks
Pradeep

[reka.gay]

/**
 * Helper method to store facet values of a particular section (label) in session storage.
 * This is necessary because even with disjunctive facets 
 * Elastic will filter out facets of other groups that have no items to filter on,
 * leaving us with empty labels.
 * 
 * So, we will save the values into a session storage and display them, greyed out,
 * even when elastic would have filtered them out.
 * 
 * @param {Array} facets an array of facets within this group (label) as provided by elastic
 * @param {String} label the label for this facet section
 * @returns the values (individual checkbox names) of this facet section
 */
export function handleStorage(facets, label) {
    let values = [];
    if (Array.isArray(facets)) { // getting the current values from the provided facets
        facets.forEach((facet) => values.push(facet.value))
    }
    // window.sessionStorage.clear() // for debugging
    let storedValues = window.sessionStorage.getItem(SESSION_KEY);
    if (storedValues) {
        storedValues = JSON.parse(storedValues);
    }
    if (storedValues && storedValues.hasOwnProperty(label)) {
        // if we had values, and the values have this label, update just in 
        // case (found issue where it saved an empty array first)
        values = [...new Set([...values, ...storedValues[label]])];
        storedValues[label] = values;
    } else {
        if (storedValues) { // if we have stored values, just not this label, then add our current values
            storedValues[`${label}`] = values;
        } else {
            storedValues = { // if we don't have stored values at all, create the object
                [`${label}`]: values
            }
        }
    }
    window.sessionStorage.setItem(SESSION_KEY, JSON.stringify(storedValues))
    return values;
}

SESSION_KEY is just a string constant of your choice.

I have my own filter component that I created based on the original one from the react-search-ui-views, using the withSearch HOC with

withSearch(({ filters, facets, addFilter, removeFilter })

Then in the actual component....

  const facetsForField = facets[field];

  const facetValues = getSelectedFacetValues(
    facetsForField,
    filters,
    field,
    FILTER_TYPE
  );

  const storedFacets = handleStorage(facetValues, label);

Where field and label are props passed in.

Finally...

storedFacets.forEach(( value ) => {
  const available = facetValues.find((availableValue) => {
    return availableValue.value === value;
  });
  const disabled = available === undefined;
  const { count, selected } = available
    ? available
    : { count: "0", selected: false };
  rows.push(
    <Row key={`r-${value}`}>
      <Column lg={14} key={`c-${value}`}>
        <Checkbox
          onChange={() =>
            selected
              ? removeFilter(field, value, FILTER_TYPE)
              : addFilter(field, value, FILTER_TYPE)
          }
          key={value}
          labelText={value}
          checked={selected}
          disabled={disabled}
          title={
            disabled
              ? "Filter not available with the already selected options"
              : `Filter for ${value}`
          }
          id={`cb-${value.toLowerCase()}`}
        />
      </Column>
      <Column className={cx(counter)} lg={2} key={`cc-${value}`}>
        {count}
      </Column>
    </Row>
  );
});

We're using the carbon design framework.

Hope this helps