diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx index 9f0b9e949d480487a32fbc560bb64fcc722e05cd..d612aae39c45cc2e5bd3bd258ab2e9a7775b2d4f 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx +++ b/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: diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.utils.ts b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.utils.ts index f0775c25e6de370a0e0ace771cf6729bff5f4658..bbc87ce8971d920fe9086d6eb0cc88ee5ce7f3e8 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.utils.ts +++ b/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', }; diff --git a/src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.test.ts b/src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..6a76072960afb50b534f5d194b2cbf0c5e901450 --- /dev/null +++ b/src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.test.ts @@ -0,0 +1,45 @@ +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); + }); + }); +}); diff --git a/src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.ts b/src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.ts new file mode 100644 index 0000000000000000000000000000000000000000..f1e1a82c25bb1108db56c25703f06786da436477 --- /dev/null +++ b/src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.ts @@ -0,0 +1,56 @@ +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 }), + ); +}; diff --git a/src/constants/canvas.ts b/src/constants/canvas.ts index 29931be199a20e245d7c54b6185d186b9e089839..e5ab204a5e6465bf226c874f336676ecc86637f8 100644 --- a/src/constants/canvas.ts +++ b/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> = { diff --git a/src/models/fixtures/commentsFixture.ts b/src/models/fixtures/commentsFixture.ts new file mode 100644 index 0000000000000000000000000000000000000000..7b06271447f126d390a443f5f9537f6dcbed26ea --- /dev/null +++ b/src/models/fixtures/commentsFixture.ts @@ -0,0 +1,10 @@ +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 }, +}); diff --git a/src/types/pin.ts b/src/types/pin.ts index ffb2ab266d0d59f35c35896c30edf39c145930b8..7310215f63f09860d9f84880f2fbf024063adff0 100644 --- a/src/types/pin.ts +++ b/src/types/pin.ts @@ -1 +1 @@ -export type PinType = 'chemicals' | 'drugs' | 'bioEntity'; +export type PinType = 'chemicals' | 'drugs' | 'bioEntity' | 'comment';