I am trying to implement hierarchical facets using search UI which is connecting to my app search instance.
At the moment I have a config file which lists my facets in like so -
"facets": [
"type",
"sectors",
"locations",
"generations",
"genders",
"behaviours",
"authors"
],
They are then 'built' using this function -
export function buildFacetConfigFromConfig() {
const config = getConfig(); const facets = (config.facets || []).reduce(( acc , n ) => {
acc = acc || {};
acc [ n ] = {
type: "value",
size: 100
};
return acc ;
}, undefined); return facets;
}
Then in my App.js I have -
const config = {
searchQuery: {
facets: buildFacetConfigFromConfig(),
...buildSearchOptionsFromConfig()
},
autocompleteQuery: buildAutocompleteQueryConfig(),
apiConnector: connector,
alwaysSearchOnInitialLoad: true
};
This works for my facets that are just 'one level' however when viewing the facets locally, some of them are showing up as in the screenshot attached -
As you can see, under locations there options and sub-options (e.g When clicking on Central & East Asia you will see the Japan facet show up).
I'm finding it very tricky to implement this and struggling to come across any clear documentation. I would like to know how to implement these hierarchical facets based on my current implementation or (if I am at the wrong starting point) then what I need to do instead to implement this.