show general comments

src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx

+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>
+  );
+};

src/components/Map/Drawer/CommentDrawer/index.ts

+export { CommentDrawer } from './CommentDrawer.component';

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>
   );
 };

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: [

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,
+        },
       },
     });
 

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

 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}`);
         }

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'];

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 => {

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,

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;

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>;

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,
+  },
 };

src/types/drawerName.ts

@@ -9,4 +9,5 @@ export type DrawerName =
   | 'reaction'
   | 'overlays'
   | 'bio-entity'
+  | 'comment'
   | 'available-plugins';