検索ツールElasticsearch -reactive searchを使ったUIの構築(応用)

検索ツールElasticsearch -reactive searchを使ったUIの構築(応用)

前回までで基本的な検索が可能な形までの説明を行なった。今回は更に詳細な検索が可能になるfiltering componentsについて説明する。

検索したデータをfilteringするには、前回の説明の中にあったLIST componentsとRange componentsを利用する。

LIST componentsは主にstring系のデータをfilteringする際に利用するもので、候補の中から一つを選ぶもの(singlelist)、複数のものを選ぶもの(multilist)、それぞれがドロップダウンで表示されるもの(singledropdwonlist、multidropdownlist)がある。シンプルなfilteringを行う場合は、single dropdown listかmulti dropdown listを使えば良い。それぞれのBasic use code例を示す。

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"
/>

その他のcomponentとしては、検索部と組み合わされた　Single Data ListやMulti Data List、ボタンの選択UIであるTogglebutton、タグクラウドと組み合わされたTagCloudがある。

Range Compopnentsは主に数値系のデータに対するFilteringを行うもので、SilgeRane, MultiRange, SingleDropdownRange, MultiDropDownRangeから始まり、日時のfilteringを行うDatPickerやDateRange、検索等のRating(星の数)でfilteringを行うRatingFilter、またスライダー系のUIであるRangeSlider,DynamicRangeSlider等がある。

MultiDropDownRangeのsampleソースコードは以下の通り

<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"
/>

これらFiltering componentsを検索系のSearchComponents等と組み合わせることで複数のfacetを会したUIを実現することができる。

filtering要素を左側のサイドバーに集め、Mainの検索結果を中央(右側)に出力するには、filteringのcomponentを一つのクラスとしてまとめれば良い。例えば以下のように記述する

 <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>

「他のコンポーネント」の部分にコンポーネントを加えて行けば、filter要素が連なったFacet検索を構築できる。

実際にfilter要素を検索に影響させるには、結果出力であるReactiveListのコンポーネントの中に”reactプロパティ”を加えれば良い。

                  <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"}
                        ]}
                    >

上記のコードでは、結果としてDatasearchの出力結果に”and”で”filter1″,”filter2″,”filter3″が掛けられている。更に時間軸のデータでの昇順、降順に並べるUIも加えてある。

以上により、elasticsearchの立ち上げと、reactiveserachを用いて各種ファセットでの絞り込み検索まで可能な検索UIのベース部が構築できる。これらの検索ツールは一般的な全文検索で用いることの他に、機械学習の結果を確認する等、各種AI検証実験のプラットフォームとして広く利用することができる。

これらのツールを実際に活用する為には、更に細かな体裁をCSSの設定にて整え、出力結果の調整等にreactの汎用UIモジュールであるMaterial-UIを加えることが必要となるが、それらに関しては後日説明する。

次回は少し箸休めして、人工知能とテレビドラマについて述べる。