Addressed review comments

Signed-off-by: Vijayan Balasubramanian <[email protected]>
opensearch-project · Mar 9, 2023 · 82f9e61 · 82f9e61
1 parent 6ad6235
commit 82f9e61
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/public/components/map_container/map_container.tsx b/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,7 +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";
+import { DrawTooltip } from '../toolbar/spatial_filter/draw_tooltip';
 
 interface MapContainerProps {
   setLayers: (layers: MapLayerSpecification[]) => void;
@@ -266,7 +271,9 @@ export const MapContainer = ({
       {mounted && tooltipState === TOOLTIP_STATE.DISPLAY_FEATURES && (
         <DisplayFeatures map={maplibreRef.current!} layers={layers} />
       )}
-      {mounted && <DrawTooltip map={maplibreRef.current!} mode={filterProperties.mode} />}
+      {mounted && Boolean(maplibreRef.current) && (
+        <DrawTooltip map={maplibreRef.current!} mode={filterProperties.mode} />
+      )}
       <div className="SpatialFilterToolbar-container">
         {mounted && (
           <SpatialFilterToolbar

diff --git a/public/components/toolbar/spatial_filter/draw_tooltip.tsx b/public/components/toolbar/spatial_filter/draw_tooltip.tsx
@@ -13,7 +13,8 @@ interface Props {
   mode: FILTER_DRAW_MODE;
 }
 
-const gapBetweenCursorAndPopupOnXAxis: number = -12;
+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) {
@@ -42,34 +43,36 @@ export const DrawTooltip = ({ map, mode }: Props) => {
     // 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);
-      }
+      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);
     }
 
-    map.on('mouseout', (ev) => {
+    function onMouseMoveOut() {
       hoverPopupRef.current.remove();
-    });
+    }
 
-    if (map && mode === FILTER_DRAW_MODE.NONE) {
+    function resetAction() {
       map.getCanvas().style.cursor = '';
-      hoverPopupRef?.current.remove();
+      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 () => {
-      if (map) {
-        // remove tooltip when users mouse move over a point
-        // when component is unmounted
-        map.off('mousemove', onMouseMoveMap);
-      }
+      // remove tooltip when users mouse move over a point
+      // when component is unmounted
+      resetAction();
     };
   }, [mode]);