wrong `noRefinement` value in NumericMenu widget

[eunjae-lee]

Describe the bug 🐛

In a situation where noRefinement value is supposed to be true, it's actually false.

To Reproduce 🔍

1. Go to https://codesandbox.io/s/peaceful-hill-5ywbq?file=/src/App.js
2. See noRefinement of '$3 ~ $8' is false
3. Click on '$3 ~ $8'
4. See there is no hit for the facet

Expected behavior 💭

https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch-core/src/connectors/connectNumericMenu.js#L68-L86

In the code, we only use the big range where hits exist, so the subset of the range where hits don't exist is not marked as "noRefinement".

[KevinBodi]

I have this same issue as well. It seems to only happen with ranges which are supposed to be noRefinement: true which are between two or multiple other ranges which actually are noRefinement: false.

Here is my complete log of the filter list items (which is based on an auto-generated array relative to current date)

2019, 'Mars' and 'Januar' are all supposed to return noRefinement: true. They do not have any results. As you can see, "2017" works like it is supposed to.

[
    {
        "label": "Mars",
        "value": "16145532:16172279",
        "isRefined": false,
        "noRefinement": false
    },
    {
        "label": "Februar",
        "value": "16121340:16145531",
        "isRefined": false,
        "noRefinement": false
    },
    {
        "label": "Januar",
        "value": "16094556:16121339",
        "isRefined": false,
        "noRefinement": false
    },
    {
        "label": 2021,
        "value": "16094556:16409915",
        "isRefined": false,
        "noRefinement": false
    },
    {
        "label": 2020,
        "value": "15778332:16094555",
        "isRefined": false,
        "noRefinement": false
    },
    {
        "label": 2019,
        "value": "15462972:15778331",
        "isRefined": false,
        "noRefinement": false
    },
    {
        "label": 2018,
        "value": "15147612:15462971",
        "isRefined": false,
        "noRefinement": false
    },
    {
        "label": 2017,
        "value": "14832252:15147611",
        "isRefined": false,
        "noRefinement": true
    },
    {
        "value": "",
        "isRefined": true,
        "noRefinement": false,
        "label": "All"
    }
]

[tkrugg]

Hi @KevinBodi, thanks for reaching out. It's great for us to have this feedback on our library and the issues we open. Please keep them coming.

So in the particular case of numeric filters, what we can achieve is more limited than facets (string filters). Numeric refinements work with single ranges. I'd say they were designed for <input type="range"> or sliders like experiences. You could say menus aren't the most natural use case for them.

They work, but with many limitations (this one, and the inability to get counts for each range).

The way I'd work around this is by "bucketing", ie:

1. create on each record an attribute called buckets which lists the ranges it belongs to:

{
   objectID: "xxx", 

   ...
   date_buckets: [ "april", "march", "may" ]
}

2. declare date_buckets as a facet
3. use the Menu widget instead of numericMenu.

I should say that you are right, this is bug. It's just not something we can fix on the React InstantSearch level alone (hence the open issue).