Instantsearch.js: Allow ToggleWidgetValues to accept multiple values

[timkelty]

Do you want to request a feature or report a bug?
feature

Feature: What is your use case for such a feature?
I have an attribute I'd like to use a toggle widget for, but I'd like to have the "on" value be one of many options.

Feature: What is your proposed API entry? The new option to add? What is the behavior?
I'd like to use it like this:

search.addWidget(instantsearch.widgets.toggle({
  container: '#toggle',
  attributeName: `hasMedia`,
  on: [true, 'true', 1, '1'],
}));

An alternate implementation might allow you to pass a fn with an argument of the value of the specified attr, returning a bool:

search.addWidget(instantsearch.widgets.toggle({
  container: '#toggle',
  attributeName: `hasMedia`,
  on: (value) => {
    return value && value !== 'off';
  },
}));

What is the version you are using? Always use the latest one before opening a bug issue.
1.11.12/2.beta-5

[iam4x]

I will discuss about this feature with @bobylito but I'm pretty sure it's a good thing that we can add into the v2 without a breaking changes for older implementations 👍

[timkelty]

@iam4x that's what I was hoping, thanks!

[bobylito]

Hi @timkelty how is the component supposed to figure out which value to select? Or will it add all the filters at once when on?

[timkelty]

@bobylito right - so in the array example, any one of those values would be considered "on".

In the fn example, it would only be on if you returned true.

[bobylito]

So if I understand correctly you have different values that are "on" in a single attribute of the dataset, right? Wouldn't it be easier to have a single value? Can you elaborate on the use case maybe?

[timkelty]

@bobylito It would be simpler yes, and my use-case is actually kind of dumb...basically my indexer can run out of my database or directly from the request. If it populates from the database, certain values get "minimized", e.g. true/false to 1/0.

_Anyway_ - while my use case isn't great, (because I could just hack into my indexing stuff and fix that), I thought it could be useful other ways.

For example - Consider a "Has Images" toggle. To do this, you'd have to index a new hasImages bool attribute.

However, if you accept a fn as I suggest, you could do something like (with images an array of your images):

search.addWidget(instantsearch.widgets.toggle({
  container: '#toggle',
  attributeName: `images`,
  on: (value) => {
    return value && value.count;
  },
}));

[bobylito]

Ok I got the problem of heterogenous data for a single attribute. And that could happen when scrapping some website. I would argue that if you know how to map the different values to a single on state, then this mapping could be done at indexing time. But it's understood that sometimes it's not possible.

About the function syntax that you propose, what's the value? It is the value of the facet? How do you see it working? Could it based on regexp or rules? Would something like that make sense:

search.addWidget(instantsearch.widgets.toggle({
  container: '#cat-toggle',
  attributeName: `imageDescription`,
  on: (value) => {
    return value.indexOf('cat') !== -1; // all values that have cats in it will be caught as `on` values
  },
}));

If so, the facet values are not likely to be exhaustive and they can change with the current search parameters which can make that feature a bit random, no?

[timkelty]

It is the value of the facet?

In your example, the value of imageDescription each record.
However that would involve passing each record through this function, which I'm sure is not what would be happening.

...So maybe a function doesn't make sense.

Initially I was thinking an array, because it felt similar to how you would pass a FacetList to SearchParameters.disjunctiveFacetsRefinements.

[timkelty]

@bobylito @iam4x Been over a year…any progress here?

This came up again for me…this time I have a similar but different use-case:

I want a toggle widget for "Include discontinued products", so when off I want to filter on isDiscontinued:false, but when on, I want to show all.

If the undefined logic that off has were applied to on as well, I could achieve this like so:

search.addWidget(instantsearch.widgets.toggle({
  container: '#toggle',
  attributeName: 'isDiscontinued',
  on: undefined,
  off: false
}));

Unfortunately, the undefined logic only seems to work for off.
I could also get it to work if they accepted arrays, so I could do on: [true,false].

It seems silly that I could make this work if I changed the toggle to "Hide Discontinued Products" instead of "Show Discontinued Products".

[Kocal]

Hi!

I'm having a similar problem but for a "favorites" system.

Users of our applications can add hits in their favorites, and we would like to use the toggleConnector (Vue connector widget in fact) to toggle over hits' ids:

search.addWidget(instantsearch.widgets.toggle({
  container: '#toggle',
  attributeName: 'id',
  on: [3, 39, 44], // user's favorites hits
}));

I will try to send a PR as soon as possible.

EDIT: PR opened at #4420

[Kocal]

Should this issue be closed since #4420 has been merged, or we are waiting for a new release?

[Haroenv]

ah yes, it didn't have fixes in. Closing this while awaiting the next release indeed (not today because it's Friday)

[eunjae-lee]

I'll release this on Monday.

[Kocal]

Nice, thanks you!

[eunjae-lee]

@Kocal It's [email protected].
https://github.com/algolia/instantsearch.js/blob/master/CHANGELOG.md#460-2020-06-08

Thank you for your contribution :)