show comments in the left tab

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

@@ -2,6 +2,7 @@ import { ZERO } from '@/constants/common';
 import {
   currentDrawerBioEntityRelatedSubmapSelector,
   currentDrawerBioEntitySelector,
+  currentDrawerCommentsSelector,
 } from '@/redux/bioEntity/bioEntity.selectors';
 import {
   getChemicalsForBioEntityDrawerTarget,
@@ -11,6 +12,7 @@ import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { DrawerHeading } from '@/shared/DrawerHeading';
 import { ElementSearchResultType } from '@/types/models';
+import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component';
 import { CollapsibleSection } from '../ExportDrawer/CollapsibleSection';
 import { AnnotationItem } from './AnnotationItem';
 import { AssociatedSubmap } from './AssociatedSubmap';
@@ -23,6 +25,7 @@ const TARGET_PREFIX: ElementSearchResultType = `ALIAS`;
 export const BioEntityDrawer = (): React.ReactNode => {
   const dispatch = useAppDispatch();
   const bioEntityData = useAppSelector(currentDrawerBioEntitySelector);
+  const commentsData = useAppSelector(currentDrawerCommentsSelector);
   const relatedSubmap = useAppSelector(currentDrawerBioEntityRelatedSubmapSelector);
   const currentTargetId = bioEntityData?.id ? `${TARGET_PREFIX}:${bioEntityData.id}` : '';
 
@@ -38,6 +41,7 @@ export const BioEntityDrawer = (): React.ReactNode => {
   }
 
   const isReferenceAvailable = bioEntityData.references.length > ZERO;
+  const isCommentAvailable = commentsData.length > ZERO;
 
   return (
     <div className="h-calc-drawer" data-testid="bioentity-drawer">
@@ -86,6 +90,9 @@ export const BioEntityDrawer = (): React.ReactNode => {
           isShowGroupedOverlays={Boolean(relatedSubmap)}
           isShowOverlayBioEntityName={Boolean(relatedSubmap)}
         />
+        {isCommentAvailable && <div> Comments</div>}
+        {isCommentAvailable &&
+          commentsData.map(comment => <CommentItem key={comment.id} comment={comment} />)}
       </div>
     </div>
   );

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

+import { Icon } from '@/shared/Icon';
+import { Comment } from '@/types/models';
+import React from 'react';
+
+interface CommentItemProps {
+  comment: Comment;
+}
+
+export const CommentItem = (commentItemProps: CommentItemProps): JSX.Element => {
+  const { comment } = commentItemProps;
+  const { owner, content } = comment;
+  return (
+    <div className="flex justify-between">
+      <div> {owner}</div>
+      <div> {content} </div>
+      <Icon name="arrow" className="h-6 w-6 fill-font-500" />
+    </div>
+  );
+};

src/redux/bioEntity/bioEntity.selectors.ts

@@ -3,9 +3,12 @@ import { ONE, SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common';
 import { BioEntityWithPinType } from '@/types/bioEntity';
 import { ElementIdTabObj } from '@/types/elements';
 import { MultiSearchData } from '@/types/fetchDataState';
-import { BioEntity, BioEntityContent, MapModel } from '@/types/models';
+import { BioEntity, BioEntityContent, Comment, MapModel } from '@/types/models';
 import { createSelector } from '@reduxjs/toolkit';
-import { commentElementSelector } from '@/redux/comment/comment.selectors';
+import {
+  allCommentsSelectorOfCurrentMap,
+  commentElementSelector,
+} from '@/redux/comment/comment.selectors';
 import {
   allChemicalsBioEntitesOfAllMapsSelector,
   allChemicalsBioEntitesOfCurrentMapSelector,
@@ -260,10 +263,6 @@ export const currentDrawerBioEntitySelector = createSelector(
   commentElementSelector,
   currentSearchedBioEntityId,
   (bioEntities, commentElement, currentBioEntityId): BioEntity | undefined => {
-    // eslint-disable-next-line no-console
-    console.log(currentBioEntityId);
-    // eslint-disable-next-line no-console
-    console.log(commentElement);
     if (commentElement && commentElement.id === currentBioEntityId) {
       return commentElement;
     }
@@ -311,3 +310,16 @@ export const allVisibleBioEntitiesIdsSelector = createSelector(
     return [...elements, ...submapConnections].map(e => e.id);
   },
 );
+
+export const currentDrawerCommentsSelector = createSelector(
+  currentDrawerBioEntitySelector,
+  allCommentsSelectorOfCurrentMap,
+  (element, comments): Comment[] => {
+    if (element) {
+      return comments.filter(
+        comment => comment.modelId === element.model && Number(comment.elementId) === element.id,
+      );
+    }
+    return [];
+  },
+);