Add facet count to NumericMenu

[EmilStenstrom]

Is your feature request related to a problem? Please describe 🙏
I'm building a project for searching my board game collection (available here: https://github.com/EmilStenstrom/mybgg), and everything works great!

I do have a small feature request though, that would make things work even better. On my own boardgame collection (https://games.emilstenstrom.se/), in the Total Plays-facet, I'm using a NumericMenu. All the other filters (RefinementLists) get a nice facet count after each value, but the NumericMenu does not.

Describe the solution you'd like 🤔
I would like NumericMenu to get facet counts for each value in the list.

Describe alternatives you've considered ✨
Switching to a refinementList and doing the grouping before indexing.

Additional context
I'm dealing with board game collections, which are often around 50 items, but occasionally up to 500 items. So the solution does not have to scale above that.

When looking at the facets in the algolia dashboard I see facet counts on individual values. What about sending them to the client, and summarizing them there?

[Haroenv]

For now numeric facets don't have the count available, since computing the buckets for other types of facets can be done at indexing time, while this would be at query time.

For now the best workaround is indeed precomputing the facet groups and using a refinement list.

If you don't per se care about the grouping, you can also directly use a refinement list.

I've forwarded this request to the team who deals with the engine to see if there's a way to change these assumptions in the future

[EmilStenstrom]

Thanks for your quick reply. I'll see if I can build my own widget that behaves like a refinementList at indexing time, and just sums the facets in each bucket just before displaying them.

[Haroenv]

That's indeed also an option, you can use connectRefinementList, and group in the rendering, as long as you know there can't be any overlapping items (when your attribute has an array as value, it could overlap, which is why we can't make this out of the box)

[EmilStenstrom]

Ah, thanks!

My value is a singe integer field, the number of times I've played a game. The buckets I'm looking at at 0, 1-5, 6-10, 11+, so no, there won't be any overlapping items. I'm thinking that this might be a common case, faceting a single value into buckets?

[anantakrishna]

@Haroenv thanks for the idea. I’ve tried this approach, and it works for rendering, but now I’m stuck at how to pass multiple values to the refine function when one of my buckets is selected. Any suggestion?

[francoischalifour]

Hey @anantakrishna, would you be able to show us what you've got so far in this InstantSearch.js sandbox?

[anantakrishna]

Here is the sandbox: https://codesandbox.io/s/instantsearch-radio-menu-with-counts-bowln.

Actually, with a fresh head I have managed it to work, however I'm not satisfied with that it gets rendered several times with intermediate set of refined values. This is seen in the console.

I'm calling refine in a loop to toggle the facet values, and I expect Instantsearch to trigger the search asynchronously, after all the calls are finished. Any idea on how to achieve the desired behavior?

[anantakrishna]

It seems that it is not possible with the refine function, and a custom widget should be used.

Here is the related discussion: https://discourse.algolia.com/t/matches-count-in-numeric-menu/11464.