Merge branch '186-element-annotation' into 'development'

Resolve "[MIN-251] Clicking on a protein: annotation"

Closes #186

See merge request !340

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
 

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

-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>
 );

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

+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>
+  );
+};

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 && (
           <>

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>
   );
 };