Custom Queries

Data Aware UI components

One of the key ideas behind Reactive Search and Reactive Maps is the abstraction of a query interface.

The UI components are already associated with the data queries. For instance,

  • SingleList and MultiList components create a exact term match query based on the selected items.
  • A RangeSlider component creates a numeric range query based on the selected start and end values.

Components rely on the dataField prop for selecting the database field on which the query needs to be applied.

However, there are cases where you would wish to override the associated query with your own. For example,

Defining a Custom Query

Each component has a customQuery prop that accepts a function. The function should return a query object compatible with Elasticsearch Query DSL. Here is a simple query object that applies a match query.

<TextField
  ...
  customQuery={this.customQuery}
/>

this.customQuery=function() {
  return {
    "match": { "fieldName": "text to match" }
  }
}

Here is another example that applies a match_phrase_prefix query.

<DataSearch
  ...
  customQuery={this.customQuery}
/>

this.customQuery=function() {
  return {
    "match_phrase_prefix": {
      "fieldName": {
        "query": "hello world",
        "max_expansions": 10
      }
    }
  }
}

Data Controller Component

Reactive Maps UI library comes with a specific component that is designed to be truly customizable, Data Controller. It’s a UI optional component that requires defining the customQuery prop.

For example, let’s say you want to apply a query filter to represent an end-user’s global preferences within the UI without adding a widget. Data Controller allows you to define a query without needing a UI widget.

Not familiar to Elasticsearch?

You need to write a custom query but haven’t worked with Elasticsearch. Okay, as a super quick primer, Elasticsearch is a data store cum search engine with a NoSQL JSON data model.

The docs link above is a good way to explore ElasticSearch in depth. Another alternative to get started with the query syntax is Mirage, a GUI for composing Elasticsearch queries.