Add tooltip to draw filter shape

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

Signed-off-by: Vijayan Balasubramanian <[email protected]>

public/components/map_container/map_container.tsx

@@ -36,6 +36,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 +266,7 @@ export const MapContainer = ({
       {mounted && tooltipState === TOOLTIP_STATE.DISPLAY_FEATURES && (
         <DisplayFeatures map={maplibreRef.current!} layers={layers} />
       )}
+      {mounted && <DrawTooltip map={maplibreRef.current!} mode={filterProperties.mode} />}
       <div className="SpatialFilterToolbar-container">
         {mounted && (
           <SpatialFilterToolbar

public/components/toolbar/spatial_filter/__snapshots__/filter_toolbar.test.tsx.snap

@@ -2,10 +2,7 @@
 
 exports[`renders spatial filter before drawing 1`] = `
 <EuiFlexGroup
-  alignItems="flexStart"
-  direction="column"
   gutterSize="s"
-  responsive={false}
 >
   <EuiFlexItem>
     <FilterByPolygon

public/components/toolbar/spatial_filter/draw_tooltip.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 gapBetweenCursorAndPopupOnXAxis: number = -12;
+
+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 '+'
+      if (map) {
+        hoverPopupRef.current
+          .setLngLat(e.lngLat)
+          .setOffset([gapBetweenCursorAndPopupOnXAxis, 0]) // add some gap between cursor and pop up
+          .setText(getTooltipContent(mode))
+          .addTo(map);
+      }
+    }
+
+    map.on('mouseout', (ev) => {
+      hoverPopupRef.current.remove();
+    });
+
+    if (map && mode === FILTER_DRAW_MODE.NONE) {
+      map.getCanvas().style.cursor = '';
+      hoverPopupRef?.current.remove();
+      // add tooltip when users mouse move over a point
+      map.off('mousemove', onMouseMoveMap);
+    } else {
+      // add tooltip when users mouse move over a point
+      map.on('mousemove', onMouseMoveMap);
+    }
+    return () => {
+      if (map) {
+        map.off('mousemove', onMouseMoveMap);
+      }
+    };
+  }, [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

public/components/toolbar/spatial_filter/filter_toolbar.tsx

@@ -27,20 +27,15 @@ export const SpatialFilterToolbar = ({
       <FilterByPolygon setDrawFilterProperties={setFilterProperties} isDrawActive={isDrawActive} />
     </EuiFlexItem>
   );
-  if (isDrawActive) {
-    return (
-      <EuiFlexGroup gutterSize="s">
+  return (
+    <EuiFlexGroup gutterSize="s">
+      {isDrawActive && (
         <EuiFlexItem grow={false}>
           <EuiButton fill size="s" onClick={onCancel}>
             {'Cancel'}
           </EuiButton>
         </EuiFlexItem>
-        {filterIconGroups}
-      </EuiFlexGroup>
-    );
-  }
-  return (
-    <EuiFlexGroup responsive={false} direction="column" alignItems="flexStart" gutterSize="s">
+      )}
       {filterIconGroups}
     </EuiFlexGroup>
   );