Building a UI using the search tool Elasticsearch -reactive search (application)

Building a UI using the search tool Elasticsearch -reactive search (application)

In the previous article, we explained the basic form of search. In this article, I will explain filtering components that enable more detailed search.

In order to filter the searched data, we will use the LIST components and Range components mentioned in the previous explanation.

LIST components are mainly used for filtering string data, and can be used to select one candidate (singlelist), multiple candidates (multilist), or a drop-down list ( singledropdwonlist, multidropdownlist). For simple filtering, you can use single dropdown list or multi dropdown list. Here is an example of basic use code for each.

single dropdown list

<SingleDropdownList
  componentId="CitySensor"
  dataField="group.group_city.raw"
  title="Cities"
/>

multi dropdown list

<MultiDropdownList
  componentId="CitySensor"
  dataField="group.group_city.raw"
  title="Cities"
/>

Other components include Single Data List and Multi Data List combined with the search section, Togglebutton, a button selection UI, and TagCloud combined with the tag cloud.

Range Compopnents are mainly for filtering numerical data, starting with SilgeRane, MultiRange, SingleDropdownRange, MultiDropDownRange, and filtering date and time. It also includes DatPicker and DateRange for filtering date and time, RatingFilter for filtering by rating (number of stars) for search, and RangeSlider and DynamicRangeSlider for slider UI.

The sample source code for MultiDropDownRange is as follows

<MultiDropdownRange
  componentId="PriceSensor"
  dataField="price"
  data={
    [{"start": 0, "end": 10, "label": "Cheap"},
     {"start": 11, "end": 20, "label": "Moderate"},
     {"start": 21, "end": 50, "label": "Pricey"},
     {"start": 51, "end": 1000, "label": "First Date"}]
  }
  title="Prices"
/>

By combining these filtering components with search components such as SearchComponents, it is possible to create a UI with multiple facets.

To collect filtering elements in the left sidebar and output the main search results in the center (right side), we can combine filtering components into a single class. For example, you can write the following

 <div className="sub-container">
              <div className="left-bar">
                 
                   <SingleDataList
                    componentId="dta1-list"
                    dataField="data1"
                    className="data1-filter"
                    showSearch={false}
                    data={[
                      {
                        label: "data1-1",
                        value: "data1-1"
                      },
                      {
                        label: "data1-2",
                        value: "data1-2"
                      },
                      {
                        label: "data1-3",
                        value: "data1-3"
                      }
                    ]}
                    title="data1の種類"
                   /> 

　　　　(他のコンポーネント)

           </div>
</div>

If you add components to the “Other components” section, you can build a Facet search with a series of filter elements.

To actually make the filter elements affect the search, we can add the “react property” to the ReactiveList component, which is the result output.

                  <ReactiveList
                        componentId="resultLists"
                        dataField="Data1"
                        size={10}
                        pagination={true}
                        
                        react={{
                            "and": ["mainSearch", "filter1","filter2", "filter3"]
                        }}
                        className="result"
                         sortOptions={[
                         {label: "古い順", dataField: "Date", sortBy: "asc"},
                         {label: "新しい順", dataField: "Date", sortBy: "desc"}
                        ]}
                    >

In the above code, the result of Datasearch is multiplied by “and” to “filter1”, “filter2”, and “filter3”. In addition, we have added a UI to sort the data in ascending or descending order by time axis.

With the above, we can start up elasticsearch and build the base part of a search UI that allows us to narrow down the search by various facets using reactiveserach. In addition to being used for general full-text search, these search tools can be widely used as a platform for various AI verification experiments, such as checking the results of machine learning.

In order to use these tools in practice, it is necessary to set up a more detailed appearance using CSS settings and add material-UI, a general-purpose UI module of react, to adjust the output results.

In the next article, we will take a break and talk about artificial intelligence and TV dramas.