diff --git a/CHANGELOG b/CHANGELOG index 1c4431b1740872df9cbd07bcb4a6433b885762d6..0aea267c35f97c38589ab73413b1528d6a40c2d5 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,5 +1,7 @@ minerva-front (18.0.3) stable; urgency=medium * Bug fix: Molart froze after clicking (#313) + * Bug fix: missing description and modifications added to element and + reaction summary (#314) -- Piotr Gawron <piotr.gawron@uni.lu> Fri, 08 Nov 2024 13:00:00 +0200 diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx index 06e815d3c8bb534d50a118613f64a912e222aac6..86dec734fd2b2ddde87bdc8214a2fa9c5f37a496 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 0000000000000000000000000000000000000000..6aee2f8c6f5a2f5c5cb6e61459c0426591d2679c --- /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 0000000000000000000000000000000000000000..222316a9294eb1053e1938beeebb854d2923d82b --- /dev/null +++ b/src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/index.ts @@ -0,0 +1 @@ +export { ModificationResidueItem } from './ModificationResidueItem.component'; diff --git a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx index ea1396ea0af8a1956983723000c72c5a2f4e91c2..1423ef7d11a71e2b51e8206a047ba28d3c0e4d83 100644 --- a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx +++ b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx @@ -37,6 +37,7 @@ export const ReactionDrawer = (): React.ReactNode => { Type: <b className="font-semibold">{reaction.type}</b> </div> <hr className="border-b border-b-divide" /> + {reaction.notes && <div className="text-sm font-normal">{reaction.notes}</div>} <h3 className="font-semibold">Annotations:</h3> {referencesGrouped.map(group => ( <ReferenceGroup key={group.source} group={group} /> diff --git a/src/types/models.ts b/src/types/models.ts index c55955ac291dc9571cd2879f730777ebb663682e..565b18304f48f5f6d3269d3c2af20d55ef8c1944 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>;