THIS IS ARCHIVED DOCUMENTATION

Use dependent facets (Deprecated)

Application developers often need to control the visibility of elements in a page, depending on some arbitrary condition.

In the context of a search application, a frequent use case is to define relationships between facets (or filters), so that a dependent facet will only appear when the user interacts with its specified parent facet.

Let’s assume that you have a @moviegenre facet field in your Coveo index, as well as a @moviesubgenre facet field.

@moviegenre may contain values such as Action, Comedy, or Drama.

@moviesubgenre may contain values such as War and Military Action, Martial Arts Action, Parody Comedy, or Historical Drama.

In your search interface, you only want the user to see the Movie genre facet initially. The Movie subgenre facet only appears after a selection is made in the Movie genre facet.

Defining the Relationship

Every Headless controller exposes its state, and can subscribe to any state changes. Defining a relationship between facets involves retrieving the relevant data from the state and using this data to control the visual appearance of the application.

import {Facet, loadFacetSetActions, SearchEngine} from '@coveo/headless';

function makeDependent(
 parentFacet: Facet,
 dependentFacets: Facet[],
 engine: SearchEngine
) {
 parentFacet.subscribe(() => {
   const isParentActive = parentFacet.state.values.some(
     (v) => v.state !== 'idle'
   );
   if (!isParentActive) {
     dependentFacets.forEach((childFacet) =>
       clearChildFacet(childFacet, engine)
     );
   }

   controlAppearanceOfThePageWithParentState(isParentActive);
 });
}

function clearChildFacet(childFacet: Facet, engine: SearchEngine) {
 loadFacetSetActions(engine).deselectAllFacetValues(childFacet.state.facetId);
}

function controlAppearanceOfThePageWithParentState(isParentActive: boolean) {
 // your code
}

In the example above, the makeDependent function can be called to define a relationship between a parent facet and one or more dependent facets.

You can modify the isParentActive condition to fit your particular use case. For example, instead of verifying whether any value is selected (that is, isn’t idle) in the parent facet, you could verify the state of a specific value.

We don’t provide a sample implementation for the controlAppearanceOfThePageWithParentState function, as this will vary depending on which Web framework you’re using (for example, Angular, React, or Vue).

React Example

To better understand this explanation, you can refer to this example made with React: Dependent Facet React Example.