From 2adac0a49b7a1096f7194c0fa868bb1ea06af86f Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Fri, 8 Nov 2024 12:37:51 +0100
Subject: [PATCH] show modification residues
---
.../BioEntityDrawer.component.tsx | 16 ++++++++++++++++
.../ModificationResidueItem.component.tsx | 14 ++++++++++++++
.../ModificationResidueItem/index.ts | 1 +
src/types/models.ts | 2 ++
4 files changed, 33 insertions(+)
create mode 100644 src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/ModificationResidueItem.component.tsx
create mode 100644 src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/index.ts
diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx
index 06e815d3..86dec734 100644
--- a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx
+++ b/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>}
diff --git a/src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/ModificationResidueItem.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/ModificationResidueItem.component.tsx
new file mode 100644
index 00000000..6aee2f8c
--- /dev/null
+++ b/src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/ModificationResidueItem.component.tsx
@@ -0,0 +1,14 @@
+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>
+);
diff --git a/src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/index.ts b/src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/index.ts
new file mode 100644
index 00000000..222316a9
--- /dev/null
+++ b/src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/index.ts
@@ -0,0 +1 @@
+export { ModificationResidueItem } from './ModificationResidueItem.component';
diff --git a/src/types/models.ts b/src/types/models.ts
index c55955ac..565b1830 100644
--- a/src/types/models.ts
+++ b/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>;
--
GitLab