Add mapbox-gl draw mode

CHANGELOG.md

@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * Update tooltip behavior change ([#317](https://github.com/opensearch-project/dashboards-maps/pull/317))
 * Update max supported layer count ([#332](https://github.com/opensearch-project/dashboards-maps/pull/332))
 * BWC for document layer label textType ([#340](https://github.com/opensearch-project/dashboards-maps/pull/340))
+* Add mapbox-gl draw mode ([#347](https://github.com/opensearch-project/dashboards-maps/pull/347))
 
 ### Bug Fixes
 * Fix property value undefined check ([#276](https://github.com/opensearch-project/dashboards-maps/pull/276))

common/index.ts

@@ -165,4 +165,4 @@ export interface DrawFilterProperties {
 export const DRAW_FILTER_SHAPE_TITLE = 'DRAW SHAPE';
 export const DRAW_FILTER_POLYGON_DEFAULT_LABEL = 'polygon';
 export const DRAW_FILTER_POLYGON = 'Draw Polygon';
-export const DRAW_FILTER_POLYGON_RELATIONS = ['intersects', 'disjoint', 'within'];
+export const DRAW_FILTER_SPATIAL_RELATIONS = ['intersects', 'disjoint', 'within'];

public/components/map_container/map_container.tsx

@@ -10,6 +10,7 @@ import { LayerControlPanel } from '../layer_control_panel';
 import './map_container.scss';
 import { DrawFilterProperties, FILTER_DRAW_MODE, MAP_INITIAL_STATE } from '../../../common';
 import { MapLayerSpecification } from '../../model/mapLayerType';
+import { DrawFilterShape } from '../toolbar/spatial_filter/draw_filter_shape';
 import {
   Filter,
   IndexPattern,
@@ -232,6 +233,13 @@ export const MapContainer = ({
       {mounted && Boolean(maplibreRef.current) && (
         <DrawTooltip map={maplibreRef.current!} mode={filterProperties.mode} />
       )}
+      {mounted && maplibreRef.current && tooltipState === TOOLTIP_STATE.FILTER_DRAW_SHAPE && (
+        <DrawFilterShape
+          map={maplibreRef.current}
+          filterProperties={filterProperties}
+          updateFilterProperties={setFilterProperties}
+        />
+      )}
       <div className="SpatialFilterToolbar-container">
         {mounted && (
           <SpatialFilterToolbar

public/components/toolbar/spatial_filter/draw_filter_shape.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useEffect, useRef } from 'react';
+import { IControl, Map as Maplibre } from 'maplibre-gl';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { Feature } from 'geojson';
+import { DrawFilterProperties, FILTER_DRAW_MODE} from '../../../../common';
+
+interface DrawFilterShapeProps {
+  filterProperties: DrawFilterProperties;
+  map: Maplibre;
+  updateFilterProperties: (properties: DrawFilterProperties) => void;
+}
+export const DrawFilterShape = ({
+  filterProperties,
+  map,
+  updateFilterProperties,
+}: DrawFilterShapeProps) => {
+  const onDraw = (event: { features: Feature[] }) => {
+    updateFilterProperties({
+      mode: FILTER_DRAW_MODE.NONE,
+    });
+  };
+  const mapboxDrawRef = useRef<MapboxDraw>(
+    new MapboxDraw({
+      displayControlsDefault: false,
+    })
+  );
+
+  useEffect(() => {
+    if (map) {
+      map.addControl((mapboxDrawRef.current as unknown) as IControl);
+      map.on('draw.create', onDraw);
+    }
+    return () => {
+      if (map) {
+        map.off('draw.create', onDraw);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        map.removeControl((mapboxDrawRef.current as unknown) as IControl);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (filterProperties.mode === FILTER_DRAW_MODE.POLYGON) {
+      mapboxDrawRef.current.changeMode('draw_polygon');
+    } else {
+      // default mode
+      mapboxDrawRef.current.changeMode('simple_select');
+    }
+  }, [filterProperties.mode]);
+
+  return <Fragment />;
+};

public/components/toolbar/spatial_filter/filter_by_polygon.tsx

@@ -11,7 +11,7 @@ import {
   DrawFilterProperties,
   DRAW_FILTER_POLYGON,
   DRAW_FILTER_POLYGON_DEFAULT_LABEL,
-  DRAW_FILTER_POLYGON_RELATIONS,
+  DRAW_FILTER_SPATIAL_RELATIONS,
   DRAW_FILTER_SHAPE_TITLE,
 } from '../../../../common';
 import { FILTER_DRAW_MODE } from '../../../../common';
@@ -52,7 +52,7 @@ export const FilterByPolygon = ({
         <FilterInputPanel
           drawLabel={DRAW_FILTER_POLYGON}
           defaultFilterLabel={DRAW_FILTER_POLYGON_DEFAULT_LABEL}
-          relations={DRAW_FILTER_POLYGON_RELATIONS}
+          relations={DRAW_FILTER_SPATIAL_RELATIONS}
           onSubmit={onSubmit}
           mode={FILTER_DRAW_MODE.POLYGON}
         />