How to get Hierarchical Filters for interdependent search categories?

[flyfoto]

My web-site offers >80.000 aerial photographs from 13 countries and 75 states that are all geocoded.
Filtering the seach by location i.e. country and state is convenient:

I fear if I would add another filte-category for the city level this would make the filter unusable, since it would result in > 4.500 possble values.
Eductatinb/forcing the user to filter by country and state first, would result in more manageable counts of filter results for the city.
I wonder how this could be achieved - with a tree menu for the filter?
An alternative would be to limit the number of results for each filter category and show an elipse for the not yet rendered part.

[bglw]

Good discussion point! I think this is straying into the realm I'm hoping the imminent Modular UI will solve. It's effectively as easy as the default UI, but will support far more customization. The Default UI as it currently exists I don't want to change much, as I think it has the right balance of features to complexity — I don't want it to do everything.

I wouldn't rely on it for a project just yet, as some changes are coming, but you can see the documentation so far for the Modular UI here: https://www.npmjs.com/package/@pagefind/modular-ui

Notably, this UI package still needs to have a filter panel matching the Default UI, that hasn't been built yet. But if we imagine that the FilterPills component was instead vertical, I can see a solution where you add a FilterPills to the page for the city filter, and conditionally show/hide it when country/state filters are selected.

The Modular UI exposes more hooks to implement something along these lines, for example:

instance.on("filters", (filters) => {
    // do things
});

The filters hook calls a function whenever the selected filters have changed.

(For a wee taste of the Modular UI in action, click the search icon in the top right of this page)

Keep an eye out for more progress on this front 🙂

[stereobooster]

Not sure if this gonna help, but in my experiment I managed to achieve hierarchical filter:

Repo: https://github.com/stereobooster/pagefind-instantsearch
Demo: https://pagefind-instantsearch.netlify.app/search/?query=chrome