action for clicking on comment pin

src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.ts

@@ -26,11 +26,12 @@ export const getCommentFeature = (
     {
       x: comment.coord.x,
       height: 0,
-      id: `comment_${comment.id}`,
+      id: comment.id,
       width: 0,
       y: comment.coord.y,
     },
     pointToProjection,
+    type,
   );
   const style = getPinStyle({
     color,

src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.ts

@@ -31,7 +31,7 @@ export const getBioEntitySingleFeature = (
     ? TEXT_COLOR
     : addAlphaToHexString(TEXT_COLOR, INACTIVE_ELEMENT_OPACITY);
 
-  const feature = getPinFeature(bioEntity, pointToProjection);
+  const feature = getPinFeature(bioEntity, pointToProjection, type);
   const style = getPinStyle({
     color,
     value,

src/components/Map/MapViewer/utils/config/pinsLayer/getMarkerSingleFeature.ts

@@ -13,7 +13,7 @@ export const getMarkerSingleFeature = (
     pointToProjection: UsePointToProjectionResult;
   },
 ): Feature => {
-  const feature = getPinFeature(marker, pointToProjection);
+  const feature = getPinFeature(marker, pointToProjection, 'bioEntity');
   const style = getPinStyle({
     color: addAlphaToHexString(marker.color, marker.opacity),
     value: marker.number,

src/components/Map/MapViewer/utils/config/pinsLayer/getMultipinSingleFeature.ts

@@ -22,7 +22,7 @@ export const getMultipinSingleFeature = (
   const [mainElement, ...sortedElements] = multipin.sort(
     (a, b) => (activeIds.includes(b.id) ? ONE : ZERO) - (activeIds.includes(a.id) ? ONE : ZERO),
   );
-  const feature = getPinFeature(mainElement, pointToProjection);
+  const feature = getPinFeature(mainElement, pointToProjection, mainElement.type);
 
   const canvasPinsArgMainElement = getMultipinCanvasArgs(mainElement, {
     activeIds,

src/components/Map/MapViewer/utils/config/pinsLayer/getPinFeature.test.ts

@@ -17,7 +17,7 @@ describe('getPinFeature - subUtil', () => {
     wrapper: Wrapper,
   });
   const pointToProjection = usePointToProjectionHook.current;
-  const result = getPinFeature(bioEntity, pointToProjection);
+  const result = getPinFeature(bioEntity, pointToProjection, 'bioEntity');
 
   it('should return instance of Feature', () => {
     expect(result).toBeInstanceOf(Feature);
@@ -38,7 +38,7 @@ describe('getPinFeature - subUtil', () => {
   });
 
   describe('when is Marker Pin', () => {
-    const pinMarkerResult = getPinFeature(PIN_MARKER, pointToProjection);
+    const pinMarkerResult = getPinFeature(PIN_MARKER, pointToProjection, 'bioEntity');
 
     it('should return point parsed with point to projection', () => {
       const [x, y] = pinMarkerResult.getGeometry()?.getExtent() || [];

src/components/Map/MapViewer/utils/config/pinsLayer/getPinFeature.ts

@@ -6,6 +6,7 @@ import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
 import isUUID from 'is-uuid';
 import { Feature } from 'ol';
 import { Point } from 'ol/geom';
+import { PinType } from '@/types/pin';
 
 export const getPinFeature = (
   {
@@ -16,6 +17,7 @@ export const getPinFeature = (
     id,
   }: Pick<BioEntity, 'id' | 'width' | 'height' | 'x' | 'y'> | MarkerWithPosition,
   pointToProjection: UsePointToProjectionResult,
+  pinType: PinType,
 ): Feature => {
   const isMarker = isUUID.anyNonNil(`${id}`);
 
@@ -24,10 +26,18 @@ export const getPinFeature = (
     y: y + (height || ZERO) / HALF,
   };
 
+  let type = null;
+
+  if (pinType === 'comment') {
+    type = FEATURE_TYPE.PIN_ICON_COMMENT;
+  } else {
+    type = isMarker ? FEATURE_TYPE.PIN_ICON_MARKER : FEATURE_TYPE.PIN_ICON_BIOENTITY;
+  }
+
   const feature = new Feature({
     geometry: new Point(pointToProjection(point)),
     id,
-    type: isMarker ? FEATURE_TYPE.PIN_ICON_MARKER : FEATURE_TYPE.PIN_ICON_BIOENTITY,
+    type,
   });
 
   return feature;

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

@@ -23,6 +23,8 @@ 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}`);
     }
   });
 

src/constants/features.ts

@@ -3,7 +3,12 @@ export const FEATURE_TYPE = {
   PIN_ICON_MARKER: 'PIN_ICON_MARKER',
   SURFACE_OVERLAY: 'SURFACE_OVERLAY',
   SURFACE_MARKER: 'SURFACE_MARKER',
+  PIN_ICON_COMMENT: 'PIN_ICON_COMMENT',
 } as const;
 
-export const PIN_ICON_ANY = [FEATURE_TYPE.PIN_ICON_BIOENTITY, FEATURE_TYPE.PIN_ICON_MARKER];
+export const PIN_ICON_ANY = [
+  FEATURE_TYPE.PIN_ICON_BIOENTITY,
+  FEATURE_TYPE.PIN_ICON_MARKER,
+  FEATURE_TYPE.PIN_ICON_COMMENT,
+];
 export const SURFACE_ANY = [FEATURE_TYPE.SURFACE_OVERLAY, FEATURE_TYPE.SURFACE_MARKER];