From 2e1e8ce1910b631b09a282bcfb6800cfe213b1b9 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Fri, 24 May 2024 12:47:35 +0200
Subject: [PATCH] commentFeature
---
.../PinsList/PinsList.component.tsx | 2 +
.../PinsListItem.component.utils.ts | 1 +
.../commentsLayer/getCommentsFeatures.test.ts | 45 +++++++++++++++
.../commentsLayer/getCommentsFeatures.ts | 56 +++++++++++++++++++
src/constants/canvas.ts | 1 +
src/models/fixtures/commentsFixture.ts | 10 ++++
src/types/pin.ts | 2 +-
7 files changed, 116 insertions(+), 1 deletion(-)
create mode 100644 src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.test.ts
create mode 100644 src/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures.ts
create mode 100644 src/models/fixtures/commentsFixture.ts
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 9f0b9e94..d612aae3 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 f0775c25..bbc87ce8 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 00000000..6a760729
--- /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 00000000..f1e1a82c
--- /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 29931be1..e5ab204a 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 00000000..7b062714
--- /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 ffb2ab26..7310215f 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';
--
GitLab