NumericMenu start=0, end=0 doesn't work for me

Hey :wave:

Trying to implement this filter:

Notice that ‘No purchases yet’ doesn’t work - it returns the full list of users.

The items array looks like this:

items={[{ end: 0, label: 'No purchases yet' }, { start: 1, label: '1+' }, { start: 10, label: '10+' }]}

I’ve also tried with

items={[{ start: 0, end: 0, label: 'No purchases yet' }, { start: 1, label: '1+' }, { start: 10, label: '10+' }]}

but the result is the same. How would I go about this?

My custom component:

<ARNumericMenu
            attribute="submissionCount"
            title={'Number of purchases'}
            defaultRefinement={''}
            items={[{ end: 0, label: 'No purchases yet' }, { start: 1, label: '1+' }, { start: 10, label: '10+' }]}
          />

const NumericMenu: React.FC<Props & NumericMenuProvided> = ({ currentRefinement, refine, items, title }) => {
  const classes = useStyles();
  function handleChange(event: React.ChangeEvent<unknown>) {
    refine((event.target as HTMLInputElement).value);
  }
  return (
    <Grid>
      <FormLabel component="menu">{title}</FormLabel>
      <RadioGroup className={classes.group} value={currentRefinement} onChange={handleChange}>
        {items.map((item, index) => {
          return (
            <FormControlLabel value={item.value} control={<Radio />} label={item.label} key={`${title}${index}`} />
          );
        })}
      </RadioGroup>
    </Grid>
  );
};
export const ARNumericMenu = connectNumericMenu(NumericMenu);

Unfortunately this is an open issue: https://github.com/algolia/react-instantsearch/issues/867, not many people had noticed it, so it wasn’t very high on our list. You can work around it if you don’t have float values in your data by putting end: 0.1 or similar.

See https://codesandbox.io/s/react-instantsearch-app-2qv9o for a demo of this. The index I used doesn’t have a 0 value, so it won’t show as available, but it should on your index.

Hey Haroen,

Thanks again, but no dice :smile:

<ARNumericMenu
            attribute="submissionCount"
            title={'Number of purchases'}
            defaultRefinement={''}
            items={[
              {
                start: 0,
                end: 0.01, //https://discourse.algolia.com/t/numericmenu-start-0-end-0-doesnt-work-for-me/9095/2?u=jm1
                label: 'No purchases yet',
              },
              { start: 1, label: '1+' },
              { start: 10, label: '10+' },
            ]}
          />

And there are plenty with 0 purchases, but not all :slight_smile:

A snippet of Algolia’s “Browse index”:
image

PS: Gif relevant to our other discussion as well :slight_smile:

A way to adapt the widget to your case would be to rewrite a numeric menu connector with a specific case for the 0 value, as shown on these lines. You can read more on the how to create custom widgets guide.

We know this is not optimal for now, and we hear your feedback!

I’d really rather not build the widget from the ground up to fix a bug in the library if possible.

How come a bug like this lives for over 1,5 years in the repo?

And seeing as @haroen suggests that end: 0.1 ought to fix it, I assume it has done so before - why doesn’t that work now?

One of the primary reasons for our company to start using Algolia for our search needs rather than continue building on our home grown solution was the prebuilt widgets and easy-to-use connectors. But the more I work with them, the more issues I encounter :slightly_frowning_face:

Hi @jm1,

Thanks for bringing up all those good points.

How come a bug like this lives for over 1,5 years in the repo?

In the end, we’ve had to take decisions to prioritize other features by quarter. We hear the feedback though and if you’d like to add your “vote” to this please do not hesitate to comment in the GH issue so that it can be considered.

And seeing as @haroen suggests that end: 0.1 ought to fix it, I assume it has done so before - why doesn’t that work now?

If you create a sandbox with the minimum code needed to reproduce the issue, the team could take a look. Here is one with most of the boilerplate finished that you can adapt: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/react-instantsearch

One would expect 21469-18047=3422 items with 0 rating, but it returns the full list.

@jm1 that’s because numericMenu is expecting integers:

It’s not good for your use case. Here is what I would do if I were you:

  1. add a new property to each record: ratingRange: [ ]
    Your records would look like this:

    {
    “rating”: 4,
    “ratingRange”: [“0+”, “1+”, “2+”, “3+”, “4+”]
    }

    {
    “rating”: 2,
    “ratingRange”: [“0+”, “1+”, “2+”]
    }

    {
    “rating”: 0,
    “ratingRange”: [“0+”]
    }

  2. declare ratingRange as a facet in your index configuration. (there are many ways to do it)

  3. use <Refinement attribute="ratingRange" />

Here is a code sample implementing this solution: https://codesandbox.io/s/react-instantsearch-app-41pd5

I hope it helps.

That could work, but transfers the responsibility of defining the filters to the dataset instead of the client which sucks in terms of iteration speed for improving the form based on user feedback.

Any hope of getting a bugfix for this issue in a near future?

Hi @jm1 we don’t get a lot of people trying start: 0, end: 0 it’s an edge case.
We didn’t plan on fixing it in a near future but now that you brought it up I’ll try to prioritise it.

Finding users who has not yet engaged with your platform/product or made any purchases yet seems to me to be a pretty important metric for any business, but perhaps most of your users build end-user facing search rather than internal tools to filter customers?

In any case, it’d be great with a fix for the bug. Can you provide an ETA? Are we talking days, weeks, months, or years? :slight_smile:

We do have users building internal tools like you as well as customer-facing search. We take all received requests into account when prioritizing features/bugfixes to address, but didn’t hear feedback on this issue since January 2018.

We can’t provide a timeline for each open issue, but we will report our progress on the associated GitHub thread. I recommend that you comment on https://github.com/algolia/react-instantsearch/issues/867 that you are affected by the issue, to make it more visible to our react team. You can as well click the Subscribe button to get notified on updates.

Also React InstantSearch is open source and contributions are welcome. Feel free to send a Pull Request if you fix this issue on your side.