feat: display search filters in map layer config panel

Adding filters to map layer allows user to do more accurate and customized searches Signed-off-by: Yulong Ruan <[email protected]>
opensearch-project · Dec 20, 2022 · 48e5aad · 48e5aad
1 parent a0553cf
commit 48e5aad
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/maps_dashboards/public/components/layer_config/documents_config/document_layer_source.tsx b/maps_dashboards/public/components/layer_config/documents_config/document_layer_source.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   EuiComboBox,
   EuiFlexItem,
@@ -20,11 +20,11 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
-import { IndexPattern, IndexPatternField } from '../../../../../../src/plugins/data/public';
+import { Filter, IndexPattern, IndexPatternField } from '../../../../../../src/plugins/data/public';
 import { useOpenSearchDashboards } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapServices } from '../../../types';
 import { DocumentLayerSpecification } from '../../../model/mapLayerType';
-import _, { Dictionary } from "lodash";
+import _, { Dictionary } from 'lodash';
 
 interface Props {
   setSelectedLayerConfig: Function;
@@ -41,7 +41,7 @@ export const DocumentLayerSource = ({
     services: {
       savedObjects: { client: savedObjectsClient },
       data: {
-        ui: { IndexPatternSelect },
+        ui: { IndexPatternSelect, SearchBar },
         indexPatterns,
       },
     },
@@ -137,6 +137,16 @@ export const DocumentLayerSource = ({
     setSelectedLayerConfig({ ...selectedLayerConfig, source });
   };
 
+  const onFiltersUpdated = useCallback(
+    (filters: Filter[]) => {
+      setSelectedLayerConfig({
+        ...selectedLayerConfig,
+        source: { ...selectedLayerConfig.source, filters },
+      });
+    },
+    [selectedLayerConfig]
+  );
+
   useEffect(() => {
     const selectIndexPattern = async () => {
       if (selectedLayerConfig.source.indexPatternId) {
@@ -276,6 +286,23 @@ export const DocumentLayerSource = ({
         </EuiCollapsibleNavGroup>
       </EuiPanel>
       <EuiSpacer size="m" />
+      <EuiPanel>
+        <EuiCollapsibleNavGroup
+          title="Filters"
+          titleSize="xxs"
+          isCollapsible={true}
+          initialIsOpen={true}
+        >
+          <SearchBar
+            appName="maps-dashboards"
+            showQueryBar={false}
+            indexPatterns={indexPattern ? [indexPattern] : []}
+            filters={selectedLayerConfig.source.filters ?? []}
+            onFiltersUpdated={onFiltersUpdated}
+          />
+        </EuiCollapsibleNavGroup>
+      </EuiPanel>
+      <EuiSpacer size="m" />
       <EuiPanel paddingSize="s">
         <EuiCollapsibleNavGroup
           title="Tool Tips"

diff --git a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
@@ -37,7 +37,9 @@ import { MapServices } from '../../types';
 import {
   IOpenSearchDashboardsSearchResponse,
   isCompleteResponse,
+  buildOpenSearchQuery,
 } from '../../../../../src/plugins/data/common';
+import { IndexPattern } from '../../../../../src/plugins/data/public';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -52,7 +54,7 @@ interface Props {
 const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
   const {
     services: {
-      data: { search },
+      data: { search, indexPatterns },
       notifications,
     },
   } = useOpenSearchDashboards<MapServices>();
@@ -83,12 +85,17 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
         if (sourceConfig.showTooltips === true && sourceConfig.tooltipFields.length > 0) {
           sourceFields.push(...sourceConfig.tooltipFields);
         }
+        let indexPattern: IndexPattern | undefined = undefined;
+        if (layer.source.indexPatternId) {
+          indexPattern = await indexPatterns.get(layer.source.indexPatternId);
+        }
         const request = {
           params: {
             index: indexPatternRefName,
             size: layer.source.documentRequestNumber,
             body: {
               _source: sourceFields,
+              query: buildOpenSearchQuery(indexPattern, [], layer.source.filters),
             },
           },
         };

diff --git a/maps_dashboards/public/model/mapLayerType.ts b/maps_dashboards/public/model/mapLayerType.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { Filter } from '../../../../src/plugins/data/public';
+
 /* eslint @typescript-eslint/consistent-type-definitions: ["error", "type"] */
 export type MapLayerSpecification = OSMLayerSpecification | DocumentLayerSpecification;
 
@@ -38,6 +40,7 @@ export type DocumentLayerSpecification = {
     documentRequestNumber: number;
     showTooltips: boolean;
     tooltipFields: string[];
+    filters: Filter[];
   };
   style: {
     fillColor: string;