show comments in reaction

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

@@ -2,7 +2,7 @@ import { ZERO } from '@/constants/common';
 import {
   currentDrawerBioEntityRelatedSubmapSelector,
   currentDrawerBioEntitySelector,
-  currentDrawerCommentsSelector,
+  currentDrawerElementCommentsSelector,
 } from '@/redux/bioEntity/bioEntity.selectors';
 import {
   getChemicalsForBioEntityDrawerTarget,
@@ -25,7 +25,7 @@ const TARGET_PREFIX: ElementSearchResultType = `ALIAS`;
 export const BioEntityDrawer = (): React.ReactNode => {
   const dispatch = useAppDispatch();
   const bioEntityData = useAppSelector(currentDrawerBioEntitySelector);
-  const commentsData = useAppSelector(currentDrawerCommentsSelector);
+  const commentsData = useAppSelector(currentDrawerElementCommentsSelector);
   const relatedSubmap = useAppSelector(currentDrawerBioEntityRelatedSubmapSelector);
   const currentTargetId = bioEntityData?.id ? `${TARGET_PREFIX}:${bioEntityData.id}` : '';
 
@@ -90,7 +90,7 @@ export const BioEntityDrawer = (): React.ReactNode => {
           isShowGroupedOverlays={Boolean(relatedSubmap)}
           isShowOverlayBioEntityName={Boolean(relatedSubmap)}
         />
-        {isCommentAvailable && <div> Comments</div>}
+        {isCommentAvailable && <div className="font-bold"> Comments</div>}
         {isCommentAvailable &&
           commentsData.map(comment => <CommentItem key={comment.id} comment={comment} />)}
       </div>

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

@@ -4,6 +4,10 @@ import {
 } from '@/redux/reactions/reactions.selector';
 import { DrawerHeading } from '@/shared/DrawerHeading';
 import { useSelector } from 'react-redux';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { currentDrawerReactionCommentsSelector } from '@/redux/bioEntity/bioEntity.selectors';
+import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component';
+import { ZERO } from '@/constants/common';
 import { ReferenceGroup } from './ReferenceGroup';
 import { ConnectedBioEntitiesList } from './ConnectedBioEntitiesList';
 
@@ -11,10 +15,14 @@ export const ReactionDrawer = (): React.ReactNode => {
   const reaction = useSelector(currentDrawerReactionSelector);
   const referencesGrouped = useSelector(currentDrawerReactionGroupedReferencesSelector);
 
+  const commentsData = useAppSelector(currentDrawerReactionCommentsSelector);
+
   if (!reaction) {
     return null;
   }
 
+  const isCommentAvailable = commentsData.length > ZERO;
+
   return (
     <div className="h-full max-h-full" data-testid="reaction-drawer">
       <DrawerHeading
@@ -34,6 +42,9 @@ export const ReactionDrawer = (): React.ReactNode => {
           <ReferenceGroup key={group.source} group={group} />
         ))}
         <ConnectedBioEntitiesList />
+        {isCommentAvailable && <div className="font-bold"> Comments</div>}
+        {isCommentAvailable &&
+          commentsData.map(comment => <CommentItem key={comment.id} comment={comment} />)}
       </div>
     </div>
   );

src/redux/bioEntity/bioEntity.selectors.ts

@@ -9,6 +9,7 @@ import {
   allCommentsSelectorOfCurrentMap,
   commentElementSelector,
 } from '@/redux/comment/comment.selectors';
+import { currentDrawerReactionSelector } from '@/redux/reactions/reactions.selector';
 import {
   allChemicalsBioEntitesOfAllMapsSelector,
   allChemicalsBioEntitesOfCurrentMapSelector,
@@ -311,13 +312,32 @@ export const allVisibleBioEntitiesIdsSelector = createSelector(
   },
 );
 
-export const currentDrawerCommentsSelector = createSelector(
+export const currentDrawerElementCommentsSelector = createSelector(
   currentDrawerBioEntitySelector,
   allCommentsSelectorOfCurrentMap,
   (element, comments): Comment[] => {
     if (element) {
       return comments.filter(
-        comment => comment.modelId === element.model && Number(comment.elementId) === element.id,
+        comment =>
+          comment.type === 'ALIAS' &&
+          comment.modelId === element.model &&
+          Number(comment.elementId) === element.id,
+      );
+    }
+    return [];
+  },
+);
+
+export const currentDrawerReactionCommentsSelector = createSelector(
+  currentDrawerReactionSelector,
+  allCommentsSelectorOfCurrentMap,
+  (reaction, comments): Comment[] => {
+    if (reaction) {
+      return comments.filter(
+        comment =>
+          comment.type === 'REACTION' &&
+          comment.modelId === reaction.modelId &&
+          Number(comment.elementId) === reaction.id,
       );
     }
     return [];