fix(vector-map): add hiding context menu after clicking on the map

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts

@@ -16,32 +16,65 @@ import { handleDataReset } from '@/components/Map/MapViewer/utils/listeners/mapS
 import { FEATURE_TYPE } from '@/constants/features';
 import { clickHandleReaction } from '@/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/clickHandleReaction';
 
+function isFeatureFilledCompartment(feature: FeatureLike): boolean {
+  return feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled');
+}
+
+function isFeatureNotCompartment(feature: FeatureLike): boolean {
+  return (
+    [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) &&
+    feature.get('type') !== FEATURE_TYPE.COMPARTMENT
+  );
+}
+
 /* prettier-ignore */
 export const onMapLeftClick =
-  (mapSize: MapSize, modelId: number, dispatch: AppDispatch, isResultDrawerOpen: boolean, comments: Comment[], modelElements: Array<ModelElement>, reactions: Array<NewReaction>) =>
-    async ({ coordinate, pixel }: Pick<MapBrowserEvent<UIEvent>, 'coordinate' | 'pixel'>, mapInstance: Map): Promise<void> => {
+  (
+    mapSize: MapSize,
+    modelId: number,
+    dispatch: AppDispatch,
+    isResultDrawerOpen: boolean,
+    comments: Comment[],
+    modelElements: Array<ModelElement>,
+    reactions: Array<NewReaction>,
+  ) =>
+    async (
+      { coordinate, pixel }: Pick<MapBrowserEvent<UIEvent>, 'coordinate' | 'pixel'>,
+      mapInstance: Map,
+    ): Promise<void> => {
       const [lng, lat] = toLonLat(coordinate);
       const point = latLngToPoint([lat, lng], mapSize);
 
       dispatch(updateLastClick({ coordinates: point, modelId }));
 
       let featureAtPixel: FeatureLike | undefined;
-      mapInstance.forEachFeatureAtPixel(pixel, (feature, ) => {
-        if(
-          feature.get('id') &&
-          (
-            feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled') ||
-            [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('type') !== FEATURE_TYPE.COMPARTMENT
-          )
-          && feature.get('zIndex') >= 0
-          && !feature.get('hidden')
-        ) {
-          featureAtPixel = feature;
-          return true;
+      mapInstance.forEachFeatureAtPixel(
+        pixel,
+        feature => {
+          const featureZIndex = feature.get('zIndex');
+          if (
+            (isFeatureFilledCompartment(feature) || isFeatureNotCompartment(feature)) &&
+            (featureZIndex === undefined || featureZIndex >= 0) &&
+            !feature.get('hidden')
+          ) {
+            featureAtPixel = feature;
+            return true;
+          }
+          return false;
+        },
+        { hitTolerance: 10 },
+      );
+
+      if (featureAtPixel) {
+        const { shouldBlockCoordSearch } = handleFeaturesClick([featureAtPixel], dispatch, comments);
+        if (shouldBlockCoordSearch) {
+          return;
         }
-        return false;
-      }, {hitTolerance: 10});
-      if(!featureAtPixel) {
+      }
+
+      dispatch(handleDataReset);
+
+      if (!featureAtPixel) {
         if (isResultDrawerOpen) {
           dispatch(closeDrawer());
         }
@@ -51,19 +84,11 @@ export const onMapLeftClick =
         return;
       }
 
-      const { shouldBlockCoordSearch } = handleFeaturesClick([featureAtPixel], dispatch, comments);
-
-      if (shouldBlockCoordSearch) {
-        return;
-      }
-
-      dispatch(handleDataReset);
-
       const type = featureAtPixel.get('type');
       const id = featureAtPixel.get('id');
-      if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
+      if ([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
         await leftClickHandleAlias(dispatch)(featureAtPixel, modelId);
       } else if (type === FEATURE_TYPE.REACTION) {
-        clickHandleReaction(dispatch)(modelElements, reactions, id,  modelId);
+        clickHandleReaction(dispatch)(modelElements, reactions, id, modelId);
       }
     };

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts

@@ -23,6 +23,8 @@ export const onMapRightClick =
       const [lng, lat] = toLonLat(coordinate);
       const point = latLngToPoint([lat, lng], mapSize);
       dispatch(updateLastRightClick({ coordinates: point, modelId }));
+      dispatch(handleDataReset);
+      dispatch(openContextMenu(pixel));
 
       let foundFeature: Feature | undefined;
       mapInstance.getAllLayers().forEach(layer => {
@@ -47,8 +49,6 @@ export const onMapRightClick =
       if(!foundFeature) {
         return;
       }
-      dispatch(handleDataReset);
-      dispatch(openContextMenu(pixel));
 
       const type = foundFeature.get('type');
       const id = foundFeature.get('id');