search-ui icon indicating copy to clipboard operation
search-ui copied to clipboard

[Qeustion] Is it possible to set multiple values at once with the setFilter action?

Open dbruvers opened this issue 3 years ago • 5 comments
trafficstars

Please correct me if I am wrong but it seems like it is not possible to set multiple values at once with the setFilter action. Is that correct?

The value is being wrapped in an array in this line making it impossible to pass an array as the value since that would be wrapped in an additional array.

The expected behavior would be that one can do either of these actions:

  setFilter('my_field', 'value1');
  setFilter('my_field', ['value1', 'value2']);

The later one ends up with a filter state of

{ 
  field: 'my_field',
  type: 'all',
  values: [
    ['value1', 'value2'],
  ],
 }

which should be rather

{ 
  field: 'my_field',
  type: 'all',
  values: ['value1', 'value2'],
 }

dbruvers avatar Jan 04 '22 17:01 dbruvers

I think you may be right, you'd need to call setFilter twice. It's not terribly inefficient since they'll ultimately get collapsed into a single state update, but it's not the cleanest.

JasonStoltz avatar Jan 04 '22 20:01 JasonStoltz

Thank you for the suggestion @JasonStoltz. I am working with an Elasticsearch based backend and working on a multi-value Select Facet view.

Setting setFilter multiple times did not work well: only one value gets set at a time. This is probably related to the fact that calling it causes a re-render and it's not possible to call it again while the re-render is in progress. In contrast the MultiCheckboxFacet view sets one value per render.

What I ended up was comparing new values to old values and then applying addFilter (onSelect) and removeFilter (onRemove) accordingly. As you wrote, this is not the cleanest solution but works since addFilter accepts an array of values.

One more note though: it seems that removeFilter has the same issue with accepting a single value only. This works when using the React Select component because it removes either one value at a time or all values at once. I can see though how this could cause issues in other circumstances.

dbruvers avatar Jan 05 '22 16:01 dbruvers

Thanks for the insightful tips so far, @dbruvers and @JasonStoltz!

To expand on the idea of making improvements to enable setting multiple filter values at once, is it possible to add another action that can set the entire request state? (perhaps called something like setRequestState?)

That new action will be helpful for batching multiple value changes at once even when they span across different dimensions (For example, changing multiple filters and searchTerm at once).

@JasonStoltz, what is your thought on that idea?

wentaoxu415 avatar Jan 13 '22 09:01 wentaoxu415

Hey all!

Another way we could look at it is having a request builder pattern for when you need to make more than one change to search. For the above example it could be

 request()
   .resetFilters()
   .addFilter("states", "Alaska")
   .addFilter("states", "Texas")
   .setPagination(1)
   .search()

The advantages is that any further additions to the API can be exposed via new methods and also typed really nicely. Behind the scenes the existing API like setFilters will use this.

joemcelroy avatar Jan 13 '22 11:01 joemcelroy

Nice, I like that a lot.

JasonStoltz avatar Jan 13 '22 13:01 JasonStoltz