Feasibility Test: Multi-Level InstantSearch Facet

[Mephistic]

Problem

For our LLM Tagging feature, we'd like to be able to filter on both tags and sub-tags in our Bill/Testimony Search, wherein a tag can have any number of sub-tags. This is effectively a two-layer hierarchy of tags. There can only be one layer of nesting (so a sub-tag cannot have further sub-tags).

e.g. a tag might be Environmental with sub-tags of Solar Power and Air Pollution. Environmental, Solar Power, and Air Pollution are all tags that should be filters for Bills/Testimonies, but any search for Environmental should include results for Solar Power and Air Pollution.

We believe that the UI for a feature like this may be difficult because so much of our search UX runs through Algolia/InstantSearch components that we import, but don't fully control. In order to determine whether it's worth investing resources in this, we should do a feasibility test - wherein we try to build out this component with our InstantSearch UX components to see how feasible it actually is. We should put a hard timebox of a week or two on this, but I fully expect this to be the trickiest part of the LLM UX, so let's keep that in mind.

Success Criteria

• Attempt to create a multi-level facet component that operates like the designs for Tags + Sub-tags in the linked Figma
• Report on that attempt
  • If it looks feasible, we can expand this work into the LLM epic
  • If it does not look feasible, we can rework the design to fit better with our existing UX stack.

Related Links

• Figma: https://www.figma.com/design/JJsbOTfqJIodDFAYp48wGU/Browse-Bills-V2?node-id=1-3&t=XsXwrif46cU1p0kj-1
• Instantsearch components: https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/

[Mephistic]

Update here: It looks like this is feasible by updating react-instantsearch and using a HierarchicalMenu. Closing this in favor of a new card to reflect the actual work to complete this.