Add tooltip to draw shape filter (#330)

* Add tooltip to draw filter shape

1. Changes cursor
2. Add instruction on how to proceed.
3. Revert once cancel is selected.

Signed-off-by: Vijayan Balasubramanian <[email protected]>
(cherry picked from commit 3a20e81)

public/components/map_container/map_container.tsx

@@ -8,7 +8,12 @@ import { Map as Maplibre, NavigationControl } from 'maplibre-gl';
 import { debounce, throttle } from 'lodash';
 import { LayerControlPanel } from '../layer_control_panel';
 import './map_container.scss';
-import { DASHBOARDS_MAPS_LAYER_TYPE, DrawFilterProperties, FILTER_DRAW_MODE, MAP_INITIAL_STATE } from '../../../common';
+import {
+  DASHBOARDS_MAPS_LAYER_TYPE,
+  DrawFilterProperties,
+  FILTER_DRAW_MODE,
+  MAP_INITIAL_STATE,
+} from '../../../common';
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import {
   Filter,
@@ -36,6 +41,7 @@ import { MapsFooter } from './maps_footer';
 import { DisplayFeatures } from '../tooltip/display_features';
 import { TOOLTIP_STATE } from '../../../common';
 import { SpatialFilterToolbar } from '../toolbar/spatial_filter/filter_toolbar';
+import { DrawTooltip } from '../toolbar/spatial_filter/draw_tooltip';
 
 interface MapContainerProps {
   setLayers: (layers: MapLayerSpecification[]) => void;
@@ -265,6 +271,9 @@ export const MapContainer = ({
       {mounted && tooltipState === TOOLTIP_STATE.DISPLAY_FEATURES && (
         <DisplayFeatures map={maplibreRef.current!} layers={layers} />
       )}
+      {mounted && Boolean(maplibreRef.current) && (
+        <DrawTooltip map={maplibreRef.current!} mode={filterProperties.mode} />
+      )}
       <div className="SpatialFilterToolbar-container">
         {mounted && (
           <SpatialFilterToolbar

public/components/toolbar/spatial_filter/draw_tooltip.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import maplibregl, { Map as Maplibre, MapEventType, Popup } from 'maplibre-gl';
+import React, { Fragment, useEffect, useRef } from 'react';
+import { i18n } from '@osd/i18n';
+import { FILTER_DRAW_MODE } from '../../../../common';
+
+interface Props {
+  map: Maplibre;
+  mode: FILTER_DRAW_MODE;
+}
+
+const X_AXIS_GAP_BETWEEN_CURSOR_AND_POPUP = -12;
+const Y_AXIS_GAP_BETWEEN_CURSOR_AND_POPUP = 0;
+
+const getTooltipContent = (mode: FILTER_DRAW_MODE): string => {
+  switch (mode) {
+    case FILTER_DRAW_MODE.POLYGON:
+      return i18n.translate('maps.drawFilterPolygon.tooltipContent', {
+        defaultMessage: 'Click to start shape. Click for vertex. Double click to finish.',
+      });
+    default:
+      return i18n.translate('maps.drawFilterDefault.tooltipContent', {
+        defaultMessage: 'Click to start shape. Double click to finish.',
+      });
+  }
+};
+
+export const DrawTooltip = ({ map, mode }: Props) => {
+  const hoverPopupRef = useRef<Popup>(
+    new maplibregl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      anchor: 'right',
+      maxWidth: 'max-content',
+    })
+  );
+
+  useEffect(() => {
+    // remove previous popup
+    function onMouseMoveMap(e: MapEventType['mousemove']) {
+      map.getCanvas().style.cursor = 'crosshair'; // Changes cursor to '+'
+      hoverPopupRef.current
+        .setLngLat(e.lngLat)
+        .setOffset([X_AXIS_GAP_BETWEEN_CURSOR_AND_POPUP, Y_AXIS_GAP_BETWEEN_CURSOR_AND_POPUP]) // add some gap between cursor and pop up
+        .setText(getTooltipContent(mode))
+        .addTo(map);
+    }
+
+    function onMouseMoveOut() {
+      hoverPopupRef.current.remove();
+    }
+
+    function resetAction() {
+      map.getCanvas().style.cursor = '';
+      hoverPopupRef.current.remove();
+      // remove tooltip when users mouse move over a point
+      map.off('mousemove', onMouseMoveMap);
+      map.off('mouseout', onMouseMoveOut);
+    }
+
+    if (map && mode === FILTER_DRAW_MODE.NONE) {
+      resetAction();
+    } else {
+      // add tooltip when users mouse move over a point
+      map.on('mousemove', onMouseMoveMap);
+      map.on('mouseout', onMouseMoveOut);
+    }
+    return () => {
+      // remove tooltip when users mouse move over a point
+      // when component is unmounted
+      resetAction();
+    };
+  }, [mode]);
+
+  return <Fragment />;
+};

public/components/toolbar/spatial_filter/filter_input_panel.tsx

@@ -53,7 +53,7 @@ export const FilterInputPanel = ({
   };
 
   return (
-    <EuiPanel className={"spatialFilterGroup__popoverPanel"}>
+    <EuiPanel className={'spatialFilterGroup__popoverPanel'}>
       <EuiForm>
         <EuiFormRow label="Filter label" display="rowCompressed">
           <EuiFieldText