open reaction and bioEntity drawers when clicking on comment

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.test.ts

@@ -22,12 +22,12 @@ describe('handleFeaturesClick - util', () => {
 
     it('should dispatch event onPinIconClick', () => {
       const dispatchEventSpy = jest.spyOn(PluginsEventBus, 'dispatchEvent');
-      handleFeaturesClick(features, dispatch);
+      handleFeaturesClick(features, dispatch, []);
       expect(dispatchEventSpy).toHaveBeenCalledWith('onPinIconClick', { id: featureId });
     });
 
     it('should return shouldBlockCoordSearch=true', () => {
-      expect(handleFeaturesClick(features, dispatch)).toStrictEqual({
+      expect(handleFeaturesClick(features, dispatch, [])).toStrictEqual({
         shouldBlockCoordSearch: true,
       });
     });
@@ -46,21 +46,21 @@ describe('handleFeaturesClick - util', () => {
 
     it('should dispatch event onPinIconClick', () => {
       const dispatchEventSpy = jest.spyOn(PluginsEventBus, 'dispatchEvent');
-      handleFeaturesClick(features, dispatch);
+      handleFeaturesClick(features, dispatch, []);
       expect(dispatchEventSpy).toHaveBeenCalledWith('onPinIconClick', { id: featureId });
     });
 
     it('should dispatch actions regarding opening entity drawer', () => {
       const { store: localStore } = getReduxStoreWithActionsListener();
       const { dispatch: localDispatch } = localStore;
-      handleFeaturesClick(features, localDispatch);
+      handleFeaturesClick(features, localDispatch, []);
       expect(store.getActions()).toStrictEqual([
         { payload: 1234, type: 'drawer/openBioEntityDrawerById' },
       ]);
     });
 
     it('should return shouldBlockCoordSearch=true', () => {
-      expect(handleFeaturesClick(features, dispatch)).toStrictEqual({
+      expect(handleFeaturesClick(features, dispatch, [])).toStrictEqual({
         shouldBlockCoordSearch: true,
       });
     });
@@ -79,12 +79,12 @@ describe('handleFeaturesClick - util', () => {
 
     it('should dispatch event onSurfaceClick', () => {
       const dispatchEventSpy = jest.spyOn(PluginsEventBus, 'dispatchEvent');
-      handleFeaturesClick(features, dispatch);
+      handleFeaturesClick(features, dispatch, []);
       expect(dispatchEventSpy).toHaveBeenCalledWith('onSurfaceClick', { id: featureId });
     });
 
     it('should return shouldBlockCoordSearch=false', () => {
-      expect(handleFeaturesClick(features, dispatch)).toStrictEqual({
+      expect(handleFeaturesClick(features, dispatch, [])).toStrictEqual({
         shouldBlockCoordSearch: false,
       });
     });
@@ -103,12 +103,12 @@ describe('handleFeaturesClick - util', () => {
 
     it('should dispatch event onSurfaceClick', () => {
       const dispatchEventSpy = jest.spyOn(PluginsEventBus, 'dispatchEvent');
-      handleFeaturesClick(features, dispatch);
+      handleFeaturesClick(features, dispatch, []);
       expect(dispatchEventSpy).toHaveBeenCalledWith('onSurfaceClick', { id: featureId });
     });
 
     it('should return shouldBlockCoordSearch=false', () => {
-      expect(handleFeaturesClick(features, dispatch)).toStrictEqual({
+      expect(handleFeaturesClick(features, dispatch, [])).toStrictEqual({
         shouldBlockCoordSearch: false,
       });
     });

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts

-import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
+import { SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common';
 import { FEATURE_TYPE, PIN_ICON_ANY, SURFACE_ANY } from '@/constants/features';
-import { openBioEntityDrawerById } from '@/redux/drawer/drawer.slice';
+import { openBioEntityDrawerById, openReactionDrawerById } from '@/redux/drawer/drawer.slice';
 import { AppDispatch } from '@/redux/store';
 import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
 import { FeatureLike } from 'ol/Feature';
+import { Comment } from '@/types/models';
 
 interface HandleFeaturesClickResult {
   shouldBlockCoordSearch: boolean;
@@ -12,6 +13,7 @@ interface HandleFeaturesClickResult {
 export const handleFeaturesClick = (
   features: FeatureLike[],
   dispatch: AppDispatch,
+  comments: Comment[],
 ): HandleFeaturesClickResult => {
   const pinFeatures = features.filter(feature => PIN_ICON_ANY.includes(feature.get('type')));
   const surfaceFeatures = features.filter(feature => SURFACE_ANY.includes(feature.get('type')));
@@ -24,7 +26,21 @@ export const handleFeaturesClick = (
     if (pin.get('type') === FEATURE_TYPE.PIN_ICON_BIOENTITY) {
       dispatch(openBioEntityDrawerById(pinId));
     } else if (pin.get('type') === FEATURE_TYPE.PIN_ICON_COMMENT) {
-      alert(`Show comment: ${pinId}`);
+      const filteredComments = comments.filter(comment => comment.id === pinId);
+      if (filteredComments.length > ZERO) {
+        const comment = filteredComments[ZERO];
+        if (comment.type === 'ALIAS') {
+          dispatch(openBioEntityDrawerById(Number(comment.elementId)));
+        } else if (comment.type === 'REACTION') {
+          dispatch(openReactionDrawerById(Number(comment.elementId)));
+        } else if (comment.type === 'POINT') {
+          throw new Error(`Opening point comment is not implemented yet`);
+        } else {
+          throw new Error(`Unknown comment type${comment.type}`);
+        }
+      } else {
+        throw new Error(`Cannot find comment with id ${pinId}`);
+      }
     }
   });
 

src/components/Map/MapViewer/utils/listeners/mapSingleClick/onMapSingleClick.test.ts

@@ -67,6 +67,7 @@ describe('onMapSingleClick - util', () => {
       MAX_ZOOM_MOCK_MOCK,
       ZOOM_MOCK,
       IS_RESULT_DRAWER_OPEN_MOCK,
+      [],
     );
     const coordinate = [90, 90];
     const event = getEvent(coordinate);
@@ -100,6 +101,7 @@ describe('onMapSingleClick - util', () => {
       MAX_ZOOM_MOCK_MOCK,
       ZOOM_MOCK,
       IS_RESULT_DRAWER_OPEN_MOCK,
+      [],
     );
     const coordinate = [90, 90];
     const point = { x: 180.0008084837557, y: 179.99919151624428 };
@@ -140,6 +142,7 @@ describe('onMapSingleClick - util', () => {
       MAX_ZOOM_MOCK_MOCK,
       ZOOM_MOCK,
       IS_RESULT_DRAWER_OPEN_MOCK,
+      [],
     );
     const coordinate = [180, 180];
     const point = { x: 360.0032339350228, y: 359.9967660649771 };
@@ -198,6 +201,7 @@ describe('onMapSingleClick - util', () => {
         MAX_ZOOM_MOCK_MOCK,
         ZOOM_MOCK,
         IS_RESULT_DRAWER_OPEN_MOCK,
+        [],
       );
       await handler(event, mapInstanceMock);
       await waitFor(() => expect(handleSearchResultActionSpy).not.toBeCalled());
@@ -237,6 +241,7 @@ describe('onMapSingleClick - util', () => {
           MAX_ZOOM_MOCK_MOCK,
           ZOOM_MOCK,
           IS_RESULT_DRAWER_OPEN_MOCK,
+          [],
         );
         await handler(event, mapInstanceMock);
         await waitFor(() => expect(handleSearchResultActionSpy).toBeCalled());
@@ -278,6 +283,7 @@ describe('onMapSingleClick - util', () => {
           MAX_ZOOM_MOCK_MOCK,
           ZOOM_MOCK,
           IS_RESULT_DRAWER_OPEN_MOCK,
+          [],
         );
         await handler(event, mapInstanceMock);
         await waitFor(() => expect(handleSearchResultActionSpy).toBeCalled());

src/components/Map/MapViewer/utils/listeners/mapSingleClick/onMapSingleClick.ts

@@ -3,6 +3,7 @@ import { MapSize } from '@/redux/map/map.types';
 import { AppDispatch } from '@/redux/store';
 import { Map, MapBrowserEvent } from 'ol';
 import { FeatureLike } from 'ol/Feature';
+import { Comment } from '@/types/models';
 import { getSearchResults } from './getSearchResults';
 import { handleDataReset } from './handleDataReset';
 import { handleFeaturesClick } from './handleFeaturesClick';
@@ -10,11 +11,12 @@ import { handleSearchResultAction } from './handleSearchResultAction';
 
 /* prettier-ignore */
 export const onMapSingleClick =
-  (mapSize: MapSize, modelId: number, dispatch: AppDispatch, searchDistance: string | undefined, maxZoom: number, zoom: number, isResultDrawerOpen: boolean) =>
+  (mapSize: MapSize, modelId: number, dispatch: AppDispatch, searchDistance: string | undefined, maxZoom: number, zoom: number, isResultDrawerOpen: boolean,
+    comments: Comment[]) =>
     async ({ coordinate, pixel }: Pick<MapBrowserEvent<UIEvent>, 'coordinate' | 'pixel'>, mapInstance: Map): Promise<void> => {
       const featuresAtPixel: FeatureLike[] = [];
       mapInstance.forEachFeatureAtPixel(pixel, (feature) => featuresAtPixel.push(feature));
-      const { shouldBlockCoordSearch } = handleFeaturesClick(featuresAtPixel, dispatch);
+      const { shouldBlockCoordSearch } = handleFeaturesClick(featuresAtPixel, dispatch, comments);
 
       if (shouldBlockCoordSearch) {
         return;

src/components/Map/MapViewer/utils/listeners/useOlMapListeners.ts

@@ -16,6 +16,7 @@ import { Pixel } from 'ol/pixel';
 import { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useDebouncedCallback } from 'use-debounce';
+import { allCommentsSelectorOfCurrentMap } from '@/redux/comment/comment.selectors';
 import { onMapRightClick } from './mapRightClick/onMapRightClick';
 import { onMapSingleClick } from './mapSingleClick/onMapSingleClick';
 import { onMapPositionChange } from './onMapPositionChange';
@@ -38,6 +39,8 @@ export const useOlMapListeners = ({ view, mapInstance }: UseOlMapListenersInput)
   const pixel = useRef<Pixel>([]);
   const dispatch = useAppDispatch();
 
+  const comments = useSelector(allCommentsSelectorOfCurrentMap);
+
   useHandlePinIconClick();
 
   const handleRightClick = useDebouncedCallback(
@@ -63,6 +66,7 @@ export const useOlMapListeners = ({ view, mapInstance }: UseOlMapListenersInput)
       maxZoom,
       lastZoom || DEFAULT_ZOOM,
       isResultDrawerOpen,
+      comments,
     ),
     OPTIONS.clickPersistTime,
     { leading: false },

src/redux/comment/comment.types.ts

 import { FetchDataState } from '@/types/fetchDataState';
 import { Comment } from '@/types/models';
+import { PayloadAction } from '@reduxjs/toolkit';
 
 export interface CommentsState extends FetchDataState<Comment[], []> {
   isOpen: boolean;
 }
+
+export type OpenCommentByIdPayload = number | string;
+export type OpenCommentByIdAction = PayloadAction<OpenCommentByIdPayload>;