show modification residues

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

@@ -13,6 +13,7 @@ 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 { ModificationResidueItem } from '@/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem';
 import { CollapsibleSection } from '../ExportDrawer/CollapsibleSection';
 import { AnnotationItem } from './AnnotationItem';
 import { AssociatedSubmap } from './AssociatedSubmap';
@@ -42,6 +43,10 @@ export const BioEntityDrawer = (): React.ReactNode => {
 
   const isReferenceAvailable = bioEntityData.references.length > ZERO;
   const isCommentAvailable = commentsData.length > ZERO;
+  const modificationResidues = (
+    bioEntityData.modificationResidues ? bioEntityData.modificationResidues : []
+  ).filter(modificationResidue => modificationResidue.state && modificationResidue.state !== '');
+  const isModificationAvailable = modificationResidues.length > ZERO;
 
   return (
     <div className="h-calc-drawer" data-testid="bioentity-drawer">
@@ -62,6 +67,17 @@ export const BioEntityDrawer = (): React.ReactNode => {
             Full name: <b className="font-semibold">{bioEntityData.fullName}</b>
           </div>
         )}
+        {bioEntityData.notes && <div className="text-sm font-normal">{bioEntityData.notes}</div>}
+        {isModificationAvailable && (
+          <h3 className="font-semibold">Post-translational modifications:</h3>
+        )}
+        {isModificationAvailable && (
+          <ul className="ml-5 list-disc">
+            {modificationResidues.map(residue => (
+              <ModificationResidueItem key={residue.id} state={residue.state} name={residue.name} />
+            ))}
+          </ul>
+        )}
         <h3 className="font-semibold">
           Annotations:{' '}
           {!isReferenceAvailable && <span className="font-normal">No annotations</span>}

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

+import { ModificationResidue } from '@/types/models';
+
+type ModificationResidueItemProps = Pick<ModificationResidue, 'state' | 'name'>;
+
+export const ModificationResidueItem = ({
+  state,
+  name,
+}: ModificationResidueItemProps): JSX.Element => (
+  <li>
+    <span>
+      {state} {name && <span>at position {name}</span>}
+    </span>
+  </li>
+);

src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/index.ts

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

src/types/models.ts

@@ -65,6 +65,7 @@ import { commentSchema } from '@/models/commentSchema';
 import { userSchema } from '@/models/userSchema';
 import { javaStacktraceSchema } from '@/models/javaStacktraceSchema';
 import { oauthSchema } from '@/models/oauthSchema';
+import { modificationResiduesSchema } from '@/models/modificationResiduesSchema';
 
 export type Project = z.infer<typeof projectSchema>;
 export type OverviewImageView = z.infer<typeof overviewImageView>;
@@ -123,6 +124,7 @@ export type MarkerSurface = z.infer<typeof markerSurfaceSchema>;
 export type MarkerLine = z.infer<typeof markerLineSchema>;
 export type MarkerWithPosition = z.infer<typeof markerWithPositionSchema>;
 export type Marker = z.infer<typeof markerSchema>;
+export type ModificationResidue = z.infer<typeof modificationResiduesSchema>;
 export type JavaStacktrace = z.infer<typeof javaStacktraceSchema>;
 export type Comment = z.infer<typeof commentSchema>;