Ability to create a custom filter not based on one of ES index mapping fields

[francoisruty]

Affected Projects

React

Is your feature request related to a problem? Please describe.

Currently I need to have a dropdown or a select menu that lets the users choose the aggregation interval, for the DataSearch custom query which performs a date_histogram aggregation.

Describe the solution you'd like

I would like the ability to trigger a refresh of ReactiveSearch state (= launch new up-to-date query) from outside ReactiveSearch, so that I can have my material-ui select field update search results with the aggregation interval chosen by the user.

Describe alternatives you've considered

I've tried using SingleDataList with my options, use a bogus datafield, and override the query with CustomQuery. It works to an extent but it is unusable since option selection in my case is mandatory, and SingleDataList defaultSelected prop does not work.

I've tried ReactiveComponent but those allows you to read from ReactiveSearch state, not change it.

I've tried setting my DataSearch as a controlled component so that form the outside I can change its value to "" and then back to its former value, to force a refresh, but it does not work, because of debounce I presume.

Additional context

In a more general fashion ReactiveSearch only lets you set up filters based on existing ES index mapping fields. It is VERY hard (as is, I've been looking for hours for ways to do it and I still have no clue) to set up custom filter that propose inputs to the user and update queries based on those inputs. There is no need to implement this in ReactiveSearch, just let React components outside ReactiveSearch trigger queries or state refresh.

[marcelchastain]

One way is to alter the defaultQuery of ReactiveList, e.g.

const makeDefaultQuery = (aggValue) => {
  if (aggValue === null) {
    return {};
  }

  return { aggs: { all_cities: { terms: { field: aggValue } } } };
 };
}

export const SomeComponent = () => {
  const [aggValue, setAggValue] = useState("city");
  return [
    <SomeDropdown value={aggValue} onChange={value => setAggValue(value)} />,
    <ReactiveList
      dataField="_score"
      componentId="results"
      defaultQuery={() => makeDefaultQuery(aggValue)}
      react={{ and: [] }}
    >
      {({ data }) => data.map(item => <div>{item.name}</div>)}
    </ReactiveList>
  ];
};

Anything that might normally trigger a re-render (state change, props change, etc) will trigger a reevaluation of makeDefaultQuery, and if the resulting query is different ReactiveSearch picks up the change and executes a new search.

I use this within my own code to create a dropdown to control the sort order.

Good luck!