Merge branch '345-pmids-incorrectly-displayed-in-the-left-panel' into 'main'

Resolve "PMIDS incorrectly displayed in the left panel"

See merge request !377

CHANGELOG

 minerva-front (18.0.8) stable; urgency=medium
   * Small improvement: support for links that should be opened immediately
     (#342)
+  * Bug fix: reaction annotations were showing invalid id (#345)
   * Bug fix: data overlay removal did not work (#333)
   * Bug fix: submap download did not download selected map (#337)
   * Bug fix: styling of notes contains original styling for links (#344)

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

@@ -7,7 +7,6 @@ export const AnnotationItem = ({ link, type, resource }: AnnotationItemProps): J
   <a className="pl-3 text-sm font-normal" href={link?.toString()} target="_blank">
     <div className="flex justify-between">
       <span>
-        Source:{' '}
         <b className="font-semibold">
           {type} ({resource})
         </b>

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

@@ -49,6 +49,9 @@ export const BioEntityDrawer = (): React.ReactNode => {
   ).filter(modificationResidue => modificationResidue.state && modificationResidue.state !== '');
   const isModificationAvailable = modificationResidues.length > ZERO;
 
+  // eslint-disable-next-line no-console
+  console.log(bioEntityData.references);
+
   return (
     <div className="h-calc-drawer" data-testid="bioentity-drawer">
       <DrawerHeading

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

@@ -59,7 +59,7 @@ describe('ReactionDrawer - component', () => {
     );
 
     const referencesTextHref: [string, string][] = filteredReferences.map(ref => [
-      `${ref.type} (${ref.id})`,
+      `${ref.type} (${ref.resource})`,
       ref.link as string,
     ]);
 

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

@@ -65,11 +65,13 @@ describe('ReactionDrawer - component', () => {
         {
           ...singleReference,
           annotatorClassName: 'source1',
+          resource: '24448649-1',
           id: 1,
         },
         {
           ...singleReference,
           annotatorClassName: 'source1',
+          resource: '24448649-2',
           id: 2,
         },
       ],
@@ -80,6 +82,7 @@ describe('ReactionDrawer - component', () => {
         {
           ...singleReference,
           annotatorClassName: 'source2',
+          resource: '24448649-3',
           id: 3,
         },
       ],
@@ -88,7 +91,7 @@ describe('ReactionDrawer - component', () => {
 
   it.each(cases)('should show reference group with source=%s', (source, references) => {
     const referencesTextHref: [string, string][] = references.map(ref => [
-      `${ref.type} (${ref.id})`,
+      `${ref.type} (${ref.resource})`,
       ref.link as string,
     ]);
 
@@ -100,6 +103,8 @@ describe('ReactionDrawer - component', () => {
     });
 
     referencesTextHref.forEach(([refText, href]) => {
+      // eslint-disable-next-line
+      console.log(refText, href);
       const linkReferenceSpan = screen.getByText(refText, { exact: false });
       const linkReferenceAnchor = linkReferenceSpan.closest('a');
 

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

-import { Icon } from '@/shared/Icon';
 import { ReferenceGroup as ReferenceGroupType } from '@/types/reference';
+import { AnnotationItem } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem';
+import React from 'react';
 import { DEFAULT_REFERENCE_SOURCE } from '../ReactionDrawer.constants';
 
 export interface Props {
@@ -9,13 +10,13 @@ export interface Props {
 export const ReferenceGroup = ({ group: { source, references } }: Props): JSX.Element => (
   <>
     <h3 className="font-semibold">Source: {source || DEFAULT_REFERENCE_SOURCE}</h3>
-    {references.map(({ id, link, type }) => (
-      <a key={id} href={link} target="_blank">
-        <div className="flex justify-between">
-          <span>{`${type} (${id})`}</span>
-          <Icon name="arrow" className="h-6 w-6 fill-font-500" />
-        </div>
-      </a>
+    {references.map(reference => (
+      <AnnotationItem
+        key={reference.id}
+        type={reference.type}
+        link={reference.link}
+        resource={reference.resource}
+      />
     ))}
   </>
 );

src/models/bioEntitySchema.ts

@@ -13,7 +13,7 @@ import { submodelSchema } from './submodelSchema';
 export const bioEntitySchema = z.object({
   id: z.union([z.number().int().positive(), z.string()]),
   stringType: z.string(),
-  immediateLink: z.string().nullable(),
+  immediateLink: z.string().nullable().optional(),
   name: z.string(),
   elementId: z.string(),
   model: z.number(),