diff --git a/src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx b/src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5079669e629d9f5672788a377400108e53f25520
--- /dev/null
+++ b/src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx
@@ -0,0 +1,31 @@
+import { DrawerHeading } from '@/shared/DrawerHeading';
+import { useSelector } from 'react-redux';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component';
+import { ZERO } from '@/constants/common';
+import { currentDrawerCommentId } from '@/redux/drawer/drawer.selectors';
+import { allCommentsSelectorOfCurrentMap } from '@/redux/comment/comment.selectors';
+
+export const CommentDrawer = (): React.ReactNode => {
+ const commentId = useSelector(currentDrawerCommentId);
+
+ const commentsData = useAppSelector(allCommentsSelectorOfCurrentMap);
+
+ const comments = commentsData.filter(commentEntry => commentEntry.id === commentId);
+
+ if (comments.length === ZERO) {
+ return null;
+ }
+
+ return (
+ <div className="h-full max-h-full" data-testid="reaction-drawer">
+ <DrawerHeading title={<span className="font-normal">Area: </span>} />
+ <div className="flex h-[calc(100%-93px)] max-h-[calc(100%-93px)] flex-col gap-6 overflow-y-auto p-6">
+ <div className="font-bold"> Comments</div>
+ {comments.map(comment => (
+ <CommentItem key={comment.id} comment={comment} />
+ ))}
+ </div>
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/CommentDrawer/index.ts b/src/components/Map/Drawer/CommentDrawer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c55db1b1fc7616d7d986678344a3bcb560f8c823
--- /dev/null
+++ b/src/components/Map/Drawer/CommentDrawer/index.ts
@@ -0,0 +1 @@
+export { CommentDrawer } from './CommentDrawer.component';
diff --git a/src/components/Map/Drawer/Drawer.component.tsx b/src/components/Map/Drawer/Drawer.component.tsx
index de1aa94ea44f6f9e2203ea3a386e373cbce620d6..71f10406f94ba978b951b7649e921f4c6013fa53 100644
--- a/src/components/Map/Drawer/Drawer.component.tsx
+++ b/src/components/Map/Drawer/Drawer.component.tsx
@@ -2,6 +2,7 @@ import { DRAWER_ROLE } from '@/components/Map/Drawer/Drawer.constants';
import { drawerSelector } from '@/redux/drawer/drawer.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { twMerge } from 'tailwind-merge';
+import { CommentDrawer } from '@/components/Map/Drawer/CommentDrawer';
import { AvailablePluginsDrawer } from './AvailablePluginsDrawer';
import { BioEntityDrawer } from './BioEntityDrawer/BioEntityDrawer.component';
import { ExportDrawer } from './ExportDrawer';
@@ -30,6 +31,7 @@ export const Drawer = (): JSX.Element => {
{isOpen && drawerName === 'project-info' && <ProjectInfoDrawer />}
{isOpen && drawerName === 'export' && <ExportDrawer />}
{isOpen && drawerName === 'available-plugins' && <AvailablePluginsDrawer />}
+ {isOpen && drawerName === 'comment' && <CommentDrawer />}
</div>
);
};
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
index 0be1f6ddb98cabbae809ae7bca96b922e69660e1..3a46ecdc9645f9e2446fc76f52da22b8d5f2a0d3 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
@@ -32,6 +32,9 @@ const INITIAL_STATE: InitialStoreState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
},
drugs: {
data: [
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.test.tsx
index 3ad3dbabe05b7683c49f4916d616c884b0e4aa47..3d5b627bc96d13a0b96a00150c8627afae1664f7 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.test.tsx
@@ -51,6 +51,9 @@ describe('SearchDrawerWrapper - component', () => {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
},
});
@@ -77,6 +80,9 @@ describe('SearchDrawerWrapper - component', () => {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
},
});
diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts
index fd48e330b1aee1e0fe77abaaf54cf6046381a9b9..f1b980a9c9670573bfb071a903289eefb026bbc7 100644
--- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts
+++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts
@@ -1,6 +1,10 @@
import { SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common';
import { FEATURE_TYPE, PIN_ICON_ANY, SURFACE_ANY } from '@/constants/features';
-import { openBioEntityDrawerById, openReactionDrawerById } from '@/redux/drawer/drawer.slice';
+import {
+ openBioEntityDrawerById,
+ openCommentDrawerById,
+ openReactionDrawerById,
+} from '@/redux/drawer/drawer.slice';
import { AppDispatch } from '@/redux/store';
import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
import { FeatureLike } from 'ol/Feature';
@@ -37,7 +41,7 @@ export const handleFeaturesClick = (
dispatch(getCommentReaction({ elementId: Number(elementId), modelId }));
dispatch(openReactionDrawerById(Number(elementId)));
} else if (type === 'POINT') {
- throw new Error(`Opening point comment is not implemented yet`);
+ dispatch(openCommentDrawerById(Number(pinId)));
} else {
throw new Error(`Unknown comment type${type}`);
}
diff --git a/src/redux/drawer/drawer.constants.ts b/src/redux/drawer/drawer.constants.ts
index 84246ac3f1aab141811c7659991410663c3afd9a..a55405a76b197fe36e8fe20fbcad40f8ff43fe2c 100644
--- a/src/redux/drawer/drawer.constants.ts
+++ b/src/redux/drawer/drawer.constants.ts
@@ -18,6 +18,9 @@ export const DRAWER_INITIAL_STATE: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const RESULT_DRAWERS = ['search', 'reaction', 'bio-entity'];
diff --git a/src/redux/drawer/drawer.reducers.ts b/src/redux/drawer/drawer.reducers.ts
index 29333ec2c70a27cb8088e55cee67a010d4d27b0f..88f1096c6e38f71dcc0442b506fa9a832e6e9434 100644
--- a/src/redux/drawer/drawer.reducers.ts
+++ b/src/redux/drawer/drawer.reducers.ts
@@ -2,6 +2,7 @@ import { STEP } from '@/constants/searchDrawer';
import type {
DrawerState,
OpenBioEntityDrawerByIdAction,
+ OpenCommentDrawerByIdAction,
OpenReactionDrawerByIdAction,
OpenSearchDrawerWithSelectedTabReducerAction,
} from '@/redux/drawer/drawer.types';
@@ -113,6 +114,15 @@ export const openBioEntityDrawerByIdReducer = (
state.bioEntityDrawerState.bioentityId = action.payload;
};
+export const openCommentDrawerByIdReducer = (
+ state: DrawerState,
+ action: OpenCommentDrawerByIdAction,
+): void => {
+ state.isOpen = true;
+ state.drawerName = 'comment';
+ state.commentDrawerState.commentId = action.payload;
+};
+
export const getBioEntityDrugsForTargetReducers = (
builder: ActionReducerMapBuilder<DrawerState>,
): void => {
diff --git a/src/redux/drawer/drawer.selectors.ts b/src/redux/drawer/drawer.selectors.ts
index 96fab201b57beab6ff170e17cdecb3a3a1d8a4e0..6c3a2a016bd005b4afde1d2a6500d48f17be3c92 100644
--- a/src/redux/drawer/drawer.selectors.ts
+++ b/src/redux/drawer/drawer.selectors.ts
@@ -43,11 +43,21 @@ export const bioEntityDrawerStateSelector = createSelector(
state => state.bioEntityDrawerState,
);
+export const commentDrawerStateSelector = createSelector(
+ drawerSelector,
+ state => state.commentDrawerState,
+);
+
export const currentSearchedBioEntityId = createSelector(
bioEntityDrawerStateSelector,
state => state.bioentityId,
);
+export const currentDrawerCommentId = createSelector(
+ commentDrawerStateSelector,
+ state => state.commentId,
+);
+
export const currentSearchedBioEntityDrugsSelector = createSelector(
bioEntityDrawerStateSelector,
currentSearchedBioEntityId,
diff --git a/src/redux/drawer/drawer.slice.ts b/src/redux/drawer/drawer.slice.ts
index 99d928dba8b5ae28f1c860bf4bd5ad15cd9af396..ddb7c23e04cf509ffc3cf0ee470a175512ad0036 100644
--- a/src/redux/drawer/drawer.slice.ts
+++ b/src/redux/drawer/drawer.slice.ts
@@ -11,6 +11,7 @@ import {
getBioEntityChemicalsForTargetReducers,
getBioEntityDrugsForTargetReducers,
openBioEntityDrawerByIdReducer,
+ openCommentDrawerByIdReducer,
openDrawerReducer,
openOverlaysDrawerReducer,
openReactionDrawerByIdReducer,
@@ -37,6 +38,7 @@ const drawerSlice = createSlice({
displayEntityDetails: displayEntityDetailsReducer,
openReactionDrawerById: openReactionDrawerByIdReducer,
openBioEntityDrawerById: openBioEntityDrawerByIdReducer,
+ openCommentDrawerById: openCommentDrawerByIdReducer,
},
extraReducers: builder => {
getBioEntityDrugsForTargetReducers(builder);
@@ -59,6 +61,7 @@ export const {
displayEntityDetails,
openReactionDrawerById,
openBioEntityDrawerById,
+ openCommentDrawerById,
} = drawerSlice.actions;
export default drawerSlice.reducer;
diff --git a/src/redux/drawer/drawer.types.ts b/src/redux/drawer/drawer.types.ts
index a0d5198979607da4cd56dd22cfd129a5c3517418..4cf1440f73bc5b3fdb006c0dac47e1507503f298 100644
--- a/src/redux/drawer/drawer.types.ts
+++ b/src/redux/drawer/drawer.types.ts
@@ -25,6 +25,10 @@ export type BioEntityDrawerState = {
chemicals: KeyedFetchDataState<Chemical[], []>;
};
+export type CommentDrawerState = {
+ commentId?: number;
+};
+
export type DrawerState = {
isOpen: boolean;
drawerName: DrawerName;
@@ -32,6 +36,7 @@ export type DrawerState = {
reactionDrawerState: ReactionDrawerState;
bioEntityDrawerState: BioEntityDrawerState;
overlayDrawerState: OverlayDrawerState;
+ commentDrawerState: CommentDrawerState;
};
export type OpenSearchDrawerWithSelectedTabReducerPayload = string;
@@ -46,3 +51,6 @@ export type OpenBioEntityDrawerByIdAction = PayloadAction<OpenBioEntityDrawerByI
export type SetSelectedSearchElementPayload = string;
export type SetSelectedSearchElementAction = PayloadAction<SetSelectedSearchElementPayload>;
+
+export type OpenCommentDrawerByIdPayload = number;
+export type OpenCommentDrawerByIdAction = PayloadAction<OpenCommentDrawerByIdPayload>;
diff --git a/src/redux/drawer/drawerFixture.ts b/src/redux/drawer/drawerFixture.ts
index fc7138abf5033cc3c2b233d85092dd17f1788d88..a2a5adac3171713b9e27579ad7b9fd45442dac2e 100644
--- a/src/redux/drawer/drawerFixture.ts
+++ b/src/redux/drawer/drawerFixture.ts
@@ -18,6 +18,9 @@ export const initialStateFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const openedDrawerSubmapsFixture: DrawerState = {
@@ -38,6 +41,9 @@ export const openedDrawerSubmapsFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const drawerSearchStepOneFixture: DrawerState = {
@@ -58,6 +64,9 @@ export const drawerSearchStepOneFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const drawerSearchDrugsStepTwoFixture: DrawerState = {
@@ -78,6 +87,9 @@ export const drawerSearchDrugsStepTwoFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const drawerSearchChemicalsStepTwoFixture: DrawerState = {
@@ -98,6 +110,9 @@ export const drawerSearchChemicalsStepTwoFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const drawerOverlaysStepOneFixture: DrawerState = {
@@ -118,6 +133,9 @@ export const drawerOverlaysStepOneFixture: DrawerState = {
overlayDrawerState: {
currentStep: 2,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const openedExportDrawerFixture: DrawerState = {
@@ -138,4 +156,7 @@ export const openedExportDrawerFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
diff --git a/src/types/drawerName.ts b/src/types/drawerName.ts
index 3715c57ddd45995b4c8194a917bf0ad8a129b5f4..d6f7961005116de9743cb35d7b2c7797de8aca3c 100644
--- a/src/types/drawerName.ts
+++ b/src/types/drawerName.ts
@@ -9,4 +9,5 @@ export type DrawerName =
| 'reaction'
| 'overlays'
| 'bio-entity'
+ | 'comment'
| 'available-plugins';