commentFeature

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx

@@ -39,6 +39,8 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => {
     }
     case 'bioEntity':
       return <div />;
+    case 'comment':
+      return <div />;
     case 'none':
       return <div />;
     default:

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.utils.ts

@@ -8,6 +8,7 @@ export const getPinColor = (type: PinTypeWithNone): string => {
     bioEntity: 'fill-primary-500',
     drugs: 'fill-orange',
     chemicals: 'fill-purple',
+    comment: 'fill-blue',
     none: 'none',
   };
 

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

+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { PinType } from '@/types/pin';
+import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection';
+import {
+  GetReduxWrapperUsingSliceReducer,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import { Feature } from 'ol';
+import Style from 'ol/style/Style';
+import { commentsFixture } from '@/models/fixtures/commentsFixture';
+import { getCommentsFeatures } from '@/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures';
+
+const getPointToProjection = (
+  wrapper: ReturnType<GetReduxWrapperUsingSliceReducer>['Wrapper'],
+): UsePointToProjectionResult => {
+  const { result: usePointToProjectionHook } = renderHook(() => usePointToProjection(), {
+    wrapper,
+  });
+
+  return usePointToProjectionHook.current;
+};
+
+describe('getCommentsFeatures', () => {
+  const { Wrapper } = getReduxWrapperWithStore({
+    map: initialMapStateFixture,
+  });
+  const comments = commentsFixture.map(comment => ({
+    ...comment,
+    pinType: 'comment' as PinType,
+  }));
+
+  const pointToProjection = getPointToProjection(Wrapper);
+
+  it('should return array of instances of Feature with Style', () => {
+    const result = getCommentsFeatures(comments, {
+      pointToProjection,
+    });
+
+    result.forEach(resultElement => {
+      expect(resultElement).toBeInstanceOf(Feature);
+      expect(resultElement.getStyle()).toBeInstanceOf(Style);
+    });
+  });
+});

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

+import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
+import { Feature } from 'ol';
+import { CommentWithPinType } from '@/types/comment';
+import { getPinFeature } from '@/components/Map/MapViewer/utils/config/pinsLayer/getPinFeature';
+import { PinType } from '@/types/pin';
+import { PINS_COLORS, TEXT_COLOR } from '@/constants/canvas';
+import { getPinStyle } from '@/components/Map/MapViewer/utils/config/pinsLayer/getPinStyle';
+
+export const getCommentFeature = (
+  comment: CommentWithPinType,
+  {
+    pointToProjection,
+    type,
+    value,
+  }: {
+    pointToProjection: UsePointToProjectionResult;
+    type: PinType;
+    value: number;
+  },
+): Feature => {
+  const color = PINS_COLORS[type];
+
+  const textColor = TEXT_COLOR;
+
+  const feature = getPinFeature(
+    {
+      x: comment.coord.x,
+      height: 0,
+      id: `comment_${comment.id}`,
+      width: 0,
+      y: comment.coord.y,
+    },
+    pointToProjection,
+  );
+  const style = getPinStyle({
+    color,
+    value,
+    textColor,
+  });
+
+  feature.setStyle(style);
+  return feature;
+};
+
+export const getCommentsFeatures = (
+  comments: CommentWithPinType[],
+  {
+    pointToProjection,
+  }: {
+    pointToProjection: UsePointToProjectionResult;
+  },
+): Feature[] => {
+  return comments.map(comment =>
+    getCommentFeature(comment, { pointToProjection, type: comment.pinType, value: 7 }),
+  );
+};

src/constants/canvas.ts

@@ -16,6 +16,7 @@ export const PINS_COLORS: Record<PinType, string> = {
   drugs: '#F48C41',
   chemicals: '#008325',
   bioEntity: '#106AD7',
+  comment: '#106AD7',
 };
 
 export const PINS_COLOR_WITH_NONE: Record<PinTypeWithNone, string> = {

src/models/fixtures/commentsFixture.ts

+import { ZOD_SEED } from '@/constants';
+import { z } from 'zod';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createFixture } from 'zod-fixture';
+import { commentSchema } from '@/models/commentSchema';
+
+export const commentsFixture = createFixture(z.array(commentSchema), {
+  seed: ZOD_SEED,
+  array: { min: 2, max: 10 },
+});

src/types/pin.ts

-export type PinType = 'chemicals' | 'drugs' | 'bioEntity';
+export type PinType = 'chemicals' | 'drugs' | 'bioEntity' | 'comment';