diff --git a/CHANGELOG b/CHANGELOG index 7bae9c4cf8b6121ef47e1b711180c9a4fbce9fcd..c1deae1cb18d929d497824e6257a356c09d7de6d 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -8,6 +8,7 @@ minerva-front (19.0.0~alpha.0) stable; urgency=medium * Feature: allow to export current view for graphics export (#327) * Small improvement: reaction element annotations use the same styling as elements (#187) + * Small improvement: styling of annotation links improved (#186) -- Piotr Gawron <piotr.gawron@uni.lu> Fri, 18 Oct 2024 13:00:00 +0200 diff --git a/src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItem.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItem.component.tsx index 0ea1a10660e5e0e6bca9acf8069f5934fe438276..0415e964dd05ea04089c3d908b42fcf2076c451d 100644 --- a/src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItem.component.tsx +++ b/src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItem.component.tsx @@ -1,18 +1,18 @@ -import { Icon } from '@/shared/Icon'; import { Reference } from '@/types/models'; +import { twMerge } from 'tailwind-merge'; type AnnotationItemProps = Pick<Reference, 'link' | 'type' | 'resource'>; export const AnnotationItem = ({ link, type, resource }: AnnotationItemProps): JSX.Element => ( - <a className="pl-3 text-sm font-normal" href={link?.toString()} target="_blank"> + <a + className={twMerge('pl-3 text-sm font-normal', link ? 'text-blue-800 underline' : '')} + href={link?.toString()} + target="_blank" + > <div className="flex justify-between"> - <span> - Source:{' '} - <b className="font-semibold"> - {type} ({resource}) - </b> + <span className="w-full font-semibold"> + {type} ({resource}) </span> - <Icon name="arrow" className="h-6 w-6 fill-font-500" /> </div> </a> ); diff --git a/src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItemList.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItemList.component.tsx new file mode 100644 index 0000000000000000000000000000000000000000..c2b865669e379853a1a2687154f6d3ce51bb6a7e --- /dev/null +++ b/src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItemList.component.tsx @@ -0,0 +1,30 @@ +import { Reference } from '@/types/models'; +import { AnnotationItem } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItem.component'; +import React from 'react'; +import { ZERO } from '@/constants/common'; + +type AnnotationItemListProps = { + references: Reference[]; +}; + +export const AnnotationItemList = ({ references }: AnnotationItemListProps): React.ReactNode => { + const isReferenceAvailable = references.length > ZERO; + return ( + <div> + <h3 className="font-semibold"> + Annotations: {!isReferenceAvailable && <span className="font-normal">No annotations</span>} + </h3> + <div className="flex max-h-full flex-col gap-2 overflow-x-hidden pt-2"> + {isReferenceAvailable && + references.map(reference => ( + <AnnotationItem + key={reference.id} + type={reference.type} + link={reference.link} + resource={reference.resource} + /> + ))} + </div> + </div> + ); +}; diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx index 0108a32af847aa01a459605efab9f1841461fcd8..4c3600732baaae8b425afc46d90debcc7d291a04 100644 --- a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx +++ b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx @@ -16,8 +16,8 @@ import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/Co import { getTypeBySBOTerm } from '@/utils/bioEntity/getTypeBySBOTerm'; import { ModificationResidueItem } from '@/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem'; import React from 'react'; +import { AnnotationItemList } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItemList.component'; import { CollapsibleSection } from '../ExportDrawer/CollapsibleSection'; -import { AnnotationItem } from './AnnotationItem'; import { AssociatedSubmap } from './AssociatedSubmap'; import { ChemicalsList } from './ChemicalsList'; import { DrugsList } from './DrugsList'; @@ -42,7 +42,6 @@ export const BioEntityDrawer = (): React.ReactNode => { return null; } - const isReferenceAvailable = bioEntityData.references.length > ZERO; const isCommentAvailable = commentsData.length > ZERO; const modificationResidues = ( bioEntityData.modificationResidues ? bioEntityData.modificationResidues : [] @@ -92,19 +91,7 @@ export const BioEntityDrawer = (): React.ReactNode => { ))} </ul> )} - <h3 className="font-semibold"> - Annotations:{' '} - {!isReferenceAvailable && <span className="font-normal">No annotations</span>} - </h3> - {isReferenceAvailable && - bioEntityData.references.map(reference => ( - <AnnotationItem - key={reference.id} - type={reference.type} - link={reference.link} - resource={reference.resource} - /> - ))} + <AnnotationItemList references={bioEntityData.references} /> <AssociatedSubmap /> {!relatedSubmap && ( <> diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx index 3f6e84393a449b56a2b19900afd74b6e5bc10e41..d5764b93b440275ee76a200b794dfe6791e6b0bc 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx @@ -18,8 +18,8 @@ import { getSearchData } from '@/redux/search/search.thunks'; import { twMerge } from 'tailwind-merge'; import { getTypeBySBOTerm } from '@/utils/bioEntity/getTypeBySBOTerm'; import { ZERO } from '@/constants/common'; -import { AnnotationItem } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem'; import React from 'react'; +import { AnnotationItemList } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItemList.component'; import { PinListBioEntity } from './BioEntitiesPinsListItem.types'; import { isPinWithCoordinates } from './BioEntitiesPinsListItem.utils'; @@ -107,21 +107,7 @@ export const BioEntitiesPinsListItem = ({ Synonyms: <span className="w-full font-normal">{pin.synonyms.join(', ')}</span> </p> )} - {pin.references.length > ZERO && ( - <ul className="leading-6"> - <div className="font-bold">References:</div> - {pin.references.map(reference => ( - <li key={reference.id} className="ml-3"> - <AnnotationItem - key={reference.id} - type={reference.type} - link={reference.link} - resource={reference.resource} - /> - </li> - ))} - </ul> - )} + <AnnotationItemList references={pin.references} /> </div> ); };