Merge branch '187-process-annotation' into 'development'

Resolve "[MIN-252] Process annotation: consistency in how it looks in comparison to protein annotation"

Closes #187

See merge request !342

CHANGELOG

@@ -6,6 +6,8 @@ minerva-front (19.0.0~alpha.0) stable; urgency=medium
   * Feature: allow plugin to hide opened panel (#309)
   * Feature: allow plugin to open left panel (#309)
   * Feature: allow to export current view for graphics export (#327)
+  * Small improvement: reaction element annotations use the same styling as
+    elements (#187)
 
  -- Piotr Gawron <piotr.gawron@uni.lu>  Fri, 18 Oct 2024 13:00:00 +0200
 

src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/ConnectedBioEntitiesList.component.tsx

@@ -4,6 +4,7 @@ import {
 } from '@/redux/bioEntity/bioEntity.selectors';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { LoadingIndicator } from '@/shared/LoadingIndicator';
+import React from 'react';
 import { BioEntitiesPinsListItem } from '../../SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem';
 
 export const ConnectedBioEntitiesList = (): React.ReactNode => {
@@ -17,6 +18,7 @@ export const ConnectedBioEntitiesList = (): React.ReactNode => {
 
   return (
     <div>
+      <h3 className="mb-1 font-semibold">Reaction elements:</h3>
       {bioEntityData &&
         bioEntityData.map(item => (
           <BioEntitiesPinsListItem

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

@@ -52,6 +52,7 @@ export const ReactionDrawer = (): React.ReactNode => {
         {referencesGrouped.map(group => (
           <ReferenceGroup key={group.source} group={group} />
         ))}
+        <hr className="border-b border-b-divide" />
         <ConnectedBioEntitiesList />
         {isCommentAvailable && <div className="font-bold"> Comments</div>}
         {isCommentAvailable &&

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx

@@ -17,6 +17,9 @@ import { resetReactionsData } from '@/redux/reactions/reactions.slice';
 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 { PinListBioEntity } from './BioEntitiesPinsListItem.types';
 import { isPinWithCoordinates } from './BioEntitiesPinsListItem.utils';
 
@@ -99,25 +102,26 @@ export const BioEntitiesPinsListItem = ({
           </span>
         </p>
       )}
-      <p className="font-bold leading-6">
-        Synonyms: <span className="w-full font-normal">{pin.synonyms.join(', ')}</span>
-      </p>
-      <ul className="leading-6">
-        <div className="font-bold">References:</div>
-        {pin.references.map(reference => {
-          return (
-            <li key={reference.id} className="my-2 px-2">
-              <a
-                href={reference.link ? reference.link : undefined}
-                target="_blank"
-                className="cursor-pointer text-primary-500 underline"
-              >
-                {reference.type} ({reference.resource})
-              </a>
+      {pin.synonyms.length > ZERO && (
+        <p className="font-bold leading-6">
+          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>
+          ))}
+        </ul>
+      )}
     </div>
   );
 };