Merge branch...

Merge branch 'MIN-187-implement-drugs-chemicals-search-for-target-in-bio-entity-modal' into 'development'

feat: add drugs chemicals search for target (MIN-187)

Closes MIN-187

See merge request !130

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

-import { StoreType } from '@/redux/store';
-import {
-  InitialStoreState,
-  getReduxWrapperWithStore,
-} from '@/utils/testing/getReduxWrapperWithStore';
-import { act, render, screen } from '@testing-library/react';
+import { SIZE_OF_ARRAY_WITH_ONE_ELEMENT, ZERO } from '@/constants/common';
+import { bioEntityContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
 import {
   BIOENTITY_INITIAL_STATE_MOCK,
   BIO_ENTITY_LINKING_TO_SUBMAP_DATA_MOCK,
 } from '@/redux/bioEntity/bioEntity.mock';
-import { bioEntityContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
 import { DRAWER_INITIAL_STATE } from '@/redux/drawer/drawer.constants';
-import { MODELS_INITIAL_STATE_MOCK } from '@/redux/models/models.mock';
-import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
 import {
   initialMapDataFixture,
   openedMapsInitialValueFixture,
   openedMapsThreeSubmapsFixture,
 } from '@/redux/map/map.fixtures';
-import { SIZE_OF_ARRAY_WITH_ONE_ELEMENT, ZERO } from '@/constants/common';
+import { MODELS_INITIAL_STATE_MOCK } from '@/redux/models/models.mock';
+import { StoreType } from '@/redux/store';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { act, render, screen } from '@testing-library/react';
 import { AssociatedSubmap } from './AssociatedSubmap.component';
 
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -49,6 +49,8 @@ describe('AssociatedSubmap - component', () => {
         ...DRAWER_INITIAL_STATE,
         bioEntityDrawerState: {
           bioentityId: bioEntityContentFixture.bioEntity.id,
+          drugs: {},
+          chemicals: {},
         },
       },
       models: {
@@ -68,6 +70,8 @@ describe('AssociatedSubmap - component', () => {
         ...DRAWER_INITIAL_STATE,
         bioEntityDrawerState: {
           bioentityId: bioEntityContentFixture.bioEntity.id,
+          drugs: {},
+          chemicals: {},
         },
       },
       models: {
@@ -96,6 +100,8 @@ describe('AssociatedSubmap - component', () => {
           ...DRAWER_INITIAL_STATE,
           bioEntityDrawerState: {
             bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
           },
         },
         models: {
@@ -153,6 +159,8 @@ describe('AssociatedSubmap - component', () => {
           ...DRAWER_INITIAL_STATE,
           bioEntityDrawerState: {
             bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
           },
         },
         models: {

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

 /* eslint-disable no-magic-numbers */
-import {
-  InitialStoreState,
-  getReduxWrapperWithStore,
-} from '@/utils/testing/getReduxWrapperWithStore';
-import { render, screen } from '@testing-library/react';
-import { DRAWER_INITIAL_STATE } from '@/redux/drawer/drawer.constants';
-import { StoreType } from '@/redux/store';
+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
 import {
   bioEntitiesContentFixture,
   bioEntityContentFixture,
 } from '@/models/fixtures/bioEntityContentsFixture';
-import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
 import {
   BIOENTITY_INITIAL_STATE_MOCK,
   BIO_ENTITY_LINKING_TO_SUBMAP_DATA_MOCK,
 } from '@/redux/bioEntity/bioEntity.mock';
-import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
+import { DRAWER_INITIAL_STATE } from '@/redux/drawer/drawer.constants';
 import { MODELS_INITIAL_STATE_MOCK } from '@/redux/models/models.mock';
+import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
+import { AppDispatch, RootState } from '@/redux/store';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { InitialStoreState } from '@/utils/testing/getReduxWrapperWithStore';
+import { act, render, screen } from '@testing-library/react';
+import { MockStoreEnhanced } from 'redux-mock-store';
 import { BioEntityDrawer } from './BioEntityDrawer.component';
 
-const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
-  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+const renderComponent = (
+  initialStoreState: InitialStoreState = {},
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+  const { Wrapper, store } = getReduxStoreWithActionsListener({
+    ...INITIAL_STORE_STATE_MOCK,
+    ...initialStoreState,
+  });
 
   return (
     render(
@@ -80,6 +85,8 @@ describe('BioEntityDrawer - component', () => {
           ...DRAWER_INITIAL_STATE,
           bioEntityDrawerState: {
             bioentityId: bioEntity.id,
+            drugs: {},
+            chemicals: {},
           },
         },
       });
@@ -114,6 +121,8 @@ describe('BioEntityDrawer - component', () => {
           ...DRAWER_INITIAL_STATE,
           bioEntityDrawerState: {
             bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
           },
         },
       });
@@ -148,6 +157,8 @@ describe('BioEntityDrawer - component', () => {
           ...DRAWER_INITIAL_STATE,
           bioEntityDrawerState: {
             bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
           },
         },
       });
@@ -173,6 +184,8 @@ describe('BioEntityDrawer - component', () => {
           ...DRAWER_INITIAL_STATE,
           bioEntityDrawerState: {
             bioentityId: bioEntity.id,
+            drugs: {},
+            chemicals: {},
           },
         },
       });
@@ -194,6 +207,8 @@ describe('BioEntityDrawer - component', () => {
           ...DRAWER_INITIAL_STATE,
           bioEntityDrawerState: {
             bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
           },
         },
         models: {
@@ -204,5 +219,157 @@ describe('BioEntityDrawer - component', () => {
 
       expect(screen.getByTestId('associated-submap')).toBeInTheDocument();
     });
+
+    it('should display chemicals list header', () => {
+      renderComponent({
+        bioEntity: {
+          data: [
+            {
+              searchQueryElement: '',
+              loading: 'succeeded',
+              error: { name: '', message: '' },
+              data: [
+                {
+                  ...bioEntityContentFixture,
+                  bioEntity: {
+                    ...bioEntityContentFixture.bioEntity,
+                    fullName: null,
+                  },
+                },
+              ],
+            },
+          ],
+          loading: 'succeeded',
+          error: { message: '', name: '' },
+        },
+        drawer: {
+          ...DRAWER_INITIAL_STATE,
+          bioEntityDrawerState: {
+            bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
+          },
+        },
+      });
+
+      expect(screen.getByText('Drugs for target')).toBeInTheDocument();
+    });
+
+    it('should display drugs list header', () => {
+      renderComponent({
+        bioEntity: {
+          data: [
+            {
+              searchQueryElement: '',
+              loading: 'succeeded',
+              error: { name: '', message: '' },
+              data: [
+                {
+                  ...bioEntityContentFixture,
+                  bioEntity: {
+                    ...bioEntityContentFixture.bioEntity,
+                    fullName: null,
+                  },
+                },
+              ],
+            },
+          ],
+          loading: 'succeeded',
+          error: { message: '', name: '' },
+        },
+        drawer: {
+          ...DRAWER_INITIAL_STATE,
+          bioEntityDrawerState: {
+            bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
+          },
+        },
+      });
+
+      expect(screen.getByText('Chemicals for target', { exact: false })).toBeInTheDocument();
+    });
+
+    it('should fetch drugs on drugs for target click', () => {
+      const { store } = renderComponent({
+        bioEntity: {
+          data: [
+            {
+              searchQueryElement: '',
+              loading: 'succeeded',
+              error: { name: '', message: '' },
+              data: [
+                {
+                  ...bioEntityContentFixture,
+                  bioEntity: {
+                    ...bioEntityContentFixture.bioEntity,
+                    fullName: null,
+                  },
+                },
+              ],
+            },
+          ],
+          loading: 'succeeded',
+          error: { message: '', name: '' },
+        },
+        drawer: {
+          ...DRAWER_INITIAL_STATE,
+          bioEntityDrawerState: {
+            bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
+          },
+        },
+      });
+
+      const button = screen.getByText('Drugs for target', { exact: false });
+      act(() => {
+        button.click();
+      });
+
+      expect(store.getActions()[0].type).toBe('drawer/getDrugsForBioEntityDrawerTarget/pending');
+    });
+
+    it('should fetch chemicals on chemicals for target click', () => {
+      const { store } = renderComponent({
+        bioEntity: {
+          data: [
+            {
+              searchQueryElement: '',
+              loading: 'succeeded',
+              error: { name: '', message: '' },
+              data: [
+                {
+                  ...bioEntityContentFixture,
+                  bioEntity: {
+                    ...bioEntityContentFixture.bioEntity,
+                    fullName: null,
+                  },
+                },
+              ],
+            },
+          ],
+          loading: 'succeeded',
+          error: { message: '', name: '' },
+        },
+        drawer: {
+          ...DRAWER_INITIAL_STATE,
+          bioEntityDrawerState: {
+            bioentityId: bioEntityContentFixture.bioEntity.id,
+            drugs: {},
+            chemicals: {},
+          },
+        },
+      });
+
+      const button = screen.getByText('Chemicals for target', { exact: false });
+      act(() => {
+        button.click();
+      });
+
+      expect(store.getActions()[0].type).toBe(
+        'drawer/getChemicalsForBioEntityDrawerTarget/pending',
+      );
+    });
   });
 });

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

 import { ZERO } from '@/constants/common';
-import { searchedFromMapBioEntityElement } from '@/redux/bioEntity/bioEntity.selectors';
+import {
+  searchedFromMapBioEntityElement,
+  searchedFromMapBioEntityElementRelatedSubmapSelector,
+} from '@/redux/bioEntity/bioEntity.selectors';
+import {
+  getChemicalsForBioEntityDrawerTarget,
+  getDrugsForBioEntityDrawerTarget,
+} from '@/redux/drawer/drawer.thunks';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { DrawerHeading } from '@/shared/DrawerHeading';
+import { ElementSearchResultType } from '@/types/models';
+import { CollapsibleSection } from '../ExportDrawer/CollapsibleSection';
 import { AnnotationItem } from './AnnotationItem';
 import { AssociatedSubmap } from './AssociatedSubmap';
+import { ChemicalsList } from './ChemicalsList';
+import { DrugsList } from './DrugsList';
 import { OverlayData } from './OverlayData';
 
+const TARGET_PREFIX: ElementSearchResultType = `ALIAS`;
+
 export const BioEntityDrawer = (): React.ReactNode => {
+  const dispatch = useAppDispatch();
   const bioEntityData = useAppSelector(searchedFromMapBioEntityElement);
+  const relatedSubmap = useAppSelector(searchedFromMapBioEntityElementRelatedSubmapSelector);
+  const currentTargetId = bioEntityData?.id ? `${TARGET_PREFIX}:${bioEntityData.id}` : '';
+
+  const fetchChemicalsForTarget = (): void => {
+    dispatch(getChemicalsForBioEntityDrawerTarget(currentTargetId));
+  };
+  const fetchDrugsForTarget = (): void => {
+    dispatch(getDrugsForBioEntityDrawerTarget(currentTargetId));
+  };
 
   if (!bioEntityData) {
     return null;
@@ -48,6 +72,16 @@ export const BioEntityDrawer = (): React.ReactNode => {
             />
           ))}
         <AssociatedSubmap />
+        {!relatedSubmap && (
+          <>
+            <CollapsibleSection title="Drugs for target" onOpened={fetchDrugsForTarget}>
+              <DrugsList />
+            </CollapsibleSection>
+            <CollapsibleSection title="Chemicals for target" onOpened={fetchChemicalsForTarget}>
+              <ChemicalsList />
+            </CollapsibleSection>
+          </>
+        )}
         <OverlayData />
       </div>
     </div>

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

+import { DEFAULT_FETCH_DATA } from '@/constants/fetchData';
+import { chemicalsFixture } from '@/models/fixtures/chemicalsFixture';
+import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
+import { StoreType } from '@/redux/store';
+import { InitialStoreState } from '@/utils/testing/getReduxStoreActionsListener';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { ChemicalsList } from './ChemicalsList.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <ChemicalsList />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('ChemicalsList - component', () => {
+  describe('when chemicals data is loading', () => {
+    beforeEach(() => {
+      const bioEntityId = 5000;
+
+      renderComponent({
+        drawer: {
+          ...INITIAL_STORE_STATE_MOCK.drawer,
+          bioEntityDrawerState: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioentityId: bioEntityId,
+            drugs: {},
+            chemicals: {
+              [`${bioEntityId}`]: {
+                ...DEFAULT_FETCH_DATA,
+                loading: 'pending',
+                data: [],
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it('should show loading indicator', () => {
+      expect(screen.getByAltText('spinner icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('when chemicals data is empty', () => {
+    beforeEach(() => {
+      const bioEntityId = 5000;
+
+      renderComponent({
+        drawer: {
+          ...INITIAL_STORE_STATE_MOCK.drawer,
+          bioEntityDrawerState: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioentityId: bioEntityId,
+            drugs: {},
+            chemicals: {
+              [`${bioEntityId}`]: {
+                ...DEFAULT_FETCH_DATA,
+                loading: 'succeeded',
+                data: [],
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it('should show text with info', () => {
+      expect(screen.getByText('List is empty')).toBeInTheDocument();
+    });
+  });
+
+  describe('when chemicals data is present and valid', () => {
+    beforeEach(() => {
+      const bioEntityId = 5000;
+
+      renderComponent({
+        drawer: {
+          ...INITIAL_STORE_STATE_MOCK.drawer,
+          bioEntityDrawerState: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioentityId: bioEntityId,
+            drugs: {},
+            chemicals: {
+              [`${bioEntityId}`]: {
+                ...DEFAULT_FETCH_DATA,
+                loading: 'succeeded',
+                data: chemicalsFixture,
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it.each(chemicalsFixture)('should show bio entitity card', chemical => {
+      expect(screen.getByText(chemical.name)).toBeInTheDocument();
+    });
+  });
+
+  describe('when chemicals data is present but for different bio entity id', () => {
+    beforeEach(() => {
+      const bioEntityId = 5000;
+
+      renderComponent({
+        drawer: {
+          ...INITIAL_STORE_STATE_MOCK.drawer,
+          bioEntityDrawerState: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioentityId: bioEntityId,
+            drugs: {},
+            chemicals: {
+              '2137': {
+                ...DEFAULT_FETCH_DATA,
+                loading: 'succeeded',
+                data: chemicalsFixture,
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it.each(chemicalsFixture)('should not show bio entitity card', chemical => {
+      expect(screen.queryByText(chemical.name)).not.toBeInTheDocument();
+    });
+
+    it('should show text with info', () => {
+      expect(screen.getByText('List is empty')).toBeInTheDocument();
+    });
+  });
+});

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

+import { ZERO } from '@/constants/common';
+import { currentSearchedBioEntityChemicalsSelector } from '@/redux/drawer/drawer.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { LoadingIndicator } from '@/shared/LoadingIndicator';
+import { BioEntitiesPinsListItem } from '../../SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem';
+
+export const ChemicalsList = (): JSX.Element => {
+  const chemicals = useAppSelector(currentSearchedBioEntityChemicalsSelector);
+  const chemicalsData = chemicals.data || [];
+  const isPending = chemicals.loading === 'pending';
+
+  if (isPending) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div>
+      {chemicalsData.map(chemical => (
+        <BioEntitiesPinsListItem key={`${chemical.id}`} pin={chemical} name={chemical.name} />
+      ))}
+      {chemicalsData.length === ZERO && 'List is empty'}
+    </div>
+  );
+};

src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/index.ts

+export { ChemicalsList } from './ChemicalsList.component';

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

+import { DEFAULT_FETCH_DATA } from '@/constants/fetchData';
+import { drugsFixture } from '@/models/fixtures/drugFixtures';
+import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
+import { StoreType } from '@/redux/store';
+import { InitialStoreState } from '@/utils/testing/getReduxStoreActionsListener';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { DrugsList } from './DrugsList.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <DrugsList />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('DrugsList - component', () => {
+  describe('when drugs data is loading', () => {
+    beforeEach(() => {
+      const bioEntityId = 5000;
+
+      renderComponent({
+        drawer: {
+          ...INITIAL_STORE_STATE_MOCK.drawer,
+          bioEntityDrawerState: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioentityId: bioEntityId,
+            drugs: {
+              [`${bioEntityId}`]: {
+                ...DEFAULT_FETCH_DATA,
+                loading: 'pending',
+                data: [],
+              },
+            },
+            chemicals: {},
+          },
+        },
+      });
+    });
+
+    it('should show loading indicator', () => {
+      expect(screen.getByAltText('spinner icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('when drugs data is empty', () => {
+    beforeEach(() => {
+      const bioEntityId = 5000;
+
+      renderComponent({
+        drawer: {
+          ...INITIAL_STORE_STATE_MOCK.drawer,
+          bioEntityDrawerState: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioentityId: bioEntityId,
+            drugs: {
+              [`${bioEntityId}`]: {
+                ...DEFAULT_FETCH_DATA,
+                loading: 'succeeded',
+                data: [],
+              },
+            },
+            chemicals: {},
+          },
+        },
+      });
+    });
+
+    it('should show text with info', () => {
+      expect(screen.getByText('List is empty')).toBeInTheDocument();
+    });
+  });
+
+  describe('when drugs data is present and valid', () => {
+    beforeEach(() => {
+      const bioEntityId = 5000;
+
+      renderComponent({
+        drawer: {
+          ...INITIAL_STORE_STATE_MOCK.drawer,
+          bioEntityDrawerState: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioentityId: bioEntityId,
+            drugs: {
+              [`${bioEntityId}`]: {
+                ...DEFAULT_FETCH_DATA,
+                loading: 'succeeded',
+                data: drugsFixture,
+              },
+            },
+            chemicals: {},
+          },
+        },
+      });
+    });
+
+    it.each(drugsFixture)('should show bio entitity card', drug => {
+      expect(screen.getByText(drug.name)).toBeInTheDocument();
+    });
+  });
+
+  describe('when drugs data is present but for different bio entity id', () => {
+    beforeEach(() => {
+      const bioEntityId = 5000;
+
+      renderComponent({
+        drawer: {
+          ...INITIAL_STORE_STATE_MOCK.drawer,
+          bioEntityDrawerState: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioentityId: bioEntityId,
+            drugs: {
+              '2137': {
+                ...DEFAULT_FETCH_DATA,
+                loading: 'succeeded',
+                data: drugsFixture,
+              },
+            },
+            chemicals: {},
+          },
+        },
+      });
+    });
+
+    it.each(drugsFixture)('should not show bio entitity card', drug => {
+      expect(screen.queryByText(drug.name)).not.toBeInTheDocument();
+    });
+
+    it('should show text with info', () => {
+      expect(screen.getByText('List is empty')).toBeInTheDocument();
+    });
+  });
+});

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

+import { ZERO } from '@/constants/common';
+import { currentSearchedBioEntityDrugsSelector } from '@/redux/drawer/drawer.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { LoadingIndicator } from '@/shared/LoadingIndicator';
+import { BioEntitiesPinsListItem } from '../../SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem';
+
+export const DrugsList = (): JSX.Element => {
+  const drugs = useAppSelector(currentSearchedBioEntityDrugsSelector);
+  const drugsData = drugs.data || [];
+  const isPending = drugs.loading === 'pending';
+
+  if (isPending) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div>
+      {drugsData.map(drug => (
+        <BioEntitiesPinsListItem key={`${drug.id}`} pin={drug} name={drug.name} />
+      ))}
+      {drugsData.length === ZERO && 'List is empty'}
+    </div>
+  );
+};

src/components/Map/Drawer/BioEntityDrawer/DrugsList/index.ts

+export { DrugsList } from './DrugsList.component';

src/components/Map/Drawer/ExportDrawer/CollapsibleSection/CollapsibleSection.component.tsx

+import { ZERO } from '@/constants/common';
 import {
   Accordion,
   AccordionItem,
@@ -5,22 +6,35 @@ import {
   AccordionItemHeading,
   AccordionItemPanel,
 } from '@/shared/Accordion';
+import { ID } from 'react-accessible-accordion/dist/types/components/ItemContext';
 
 type CollapsibleSectionProps = {
   title: string;
   children: React.ReactNode;
+  onOpened?(): void;
 };
 
 export const CollapsibleSection = ({
   title,
   children,
-}: CollapsibleSectionProps): React.ReactNode => (
-  <Accordion allowZeroExpanded>
-    <AccordionItem>
-      <AccordionItemHeading>
-        <AccordionItemButton>{title}</AccordionItemButton>
-      </AccordionItemHeading>
-      <AccordionItemPanel>{children}</AccordionItemPanel>
-    </AccordionItem>
-  </Accordion>
-);
+  onOpened,
+}: CollapsibleSectionProps): React.ReactNode => {
+  const handleOnChange = (ids: ID[]): void => {
+    const hasBeenOpened = ids.length > ZERO;
+
+    if (hasBeenOpened && onOpened) {
+      onOpened();
+    }
+  };
+
+  return (
+    <Accordion allowZeroExpanded onChange={handleOnChange}>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>{title}</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>{children}</AccordionItemPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};

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

 /* eslint-disable no-magic-numbers */
-import { render, screen } from '@testing-library/react';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { StoreType } from '@/redux/store';
+import { BioEntityContent } from '@/types/models';
 import {
   InitialStoreState,
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
-import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
-import { StoreType } from '@/redux/store';
-import { BioEntityContent } from '@/types/models';
+import { render, screen } from '@testing-library/react';
 import { BioEntitiesPinsList } from './BioEntitiesPinsList.component';
 
 const renderComponent = (
@@ -30,7 +30,10 @@ const renderComponent = (
 describe('BioEntitiesPinsList - component ', () => {
   it('should display list of bio entites elements', () => {
     renderComponent(bioEntitiesContentFixture);
+    const bioEntitiesWithFullName = bioEntitiesContentFixture.filter(({ bioEntity }) =>
+      Boolean(bioEntity.fullName),
+    );
 
-    expect(screen.getAllByTestId('bio-entity-name')).toHaveLength(10);
+    expect(screen.getAllByTestId('bio-entity-name')).toHaveLength(bioEntitiesWithFullName.length);
   });
 });

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

 /* eslint-disable no-magic-numbers */
-import { render, screen } from '@testing-library/react';
+import { DEFAULT_MAX_ZOOM } from '@/constants/map';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { MAP_INITIAL_STATE } from '@/redux/map/map.constants';
+import { AppDispatch, RootState, StoreType } from '@/redux/store';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
 import {
   InitialStoreState,
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
-import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
-import { StoreType } from '@/redux/store';
-import { BioEntity } from '@/types/models';
+import { render, screen } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { MAP_INITIAL_STATE } from '@/redux/map/map.constants';
-import { DEFAULT_MAX_ZOOM } from '@/constants/map';
+import { MockStoreEnhanced } from 'redux-mock-store';
 import { BioEntitiesPinsListItem } from './BioEntitiesPinsListItem.component';
+import { PinListBioEntity } from './BioEntitiesPinsListItem.types';
 
 const BIO_ENTITY = bioEntitiesContentFixture[0].bioEntity;
 
 const renderComponent = (
   name: string,
-  pin: BioEntity,
+  pin: PinListBioEntity,
   initialStoreState: InitialStoreState = {},
 ): { store: StoreType } => {
   const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
@@ -33,6 +35,25 @@ const renderComponent = (
   );
 };
 
+const renderComponentWithActionListener = (
+  name: string,
+  pin: PinListBioEntity,
+  initialStoreState: InitialStoreState = {},
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+  const { Wrapper, store } = getReduxStoreWithActionsListener(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <BioEntitiesPinsListItem name={name} pin={pin} />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
 describe('BioEntitiesPinsListItem - component ', () => {
   it('should display name of bio entity element', () => {
     renderComponent(BIO_ENTITY.name, BIO_ENTITY);
@@ -56,7 +77,7 @@ describe('BioEntitiesPinsListItem - component ', () => {
 
     renderComponent(bioEntity.name, bioEntity);
 
-    expect(screen.getAllByTestId('bio-entity-symbol')[0].textContent).toHaveLength(0);
+    expect(screen.queryAllByTestId('bio-entity-symbol')).toHaveLength(0);
   });
   it('should display string type of bio entity element', () => {
     renderComponent(BIO_ENTITY.name, BIO_ENTITY);
@@ -129,4 +150,120 @@ describe('BioEntitiesPinsListItem - component ', () => {
       z: DEFAULT_MAX_ZOOM,
     });
   });
+
+  it('should not center map to pin coordinates after click on pin icon if pin has no coords', async () => {
+    const { store } = renderComponent(
+      BIO_ENTITY.name,
+      {
+        ...BIO_ENTITY,
+        x: undefined,
+        y: undefined,
+      },
+      {
+        map: {
+          ...MAP_INITIAL_STATE,
+          data: {
+            ...MAP_INITIAL_STATE.data,
+            modelId: 5052,
+            size: {
+              width: 256,
+              height: 256,
+              tileSize: 256,
+              minZoom: 1,
+              maxZoom: 1,
+            },
+            position: {
+              initial: {
+                x: 0,
+                y: 0,
+                z: 2,
+              },
+              last: {
+                x: 1,
+                y: 1,
+                z: 3,
+              },
+            },
+          },
+        },
+      },
+    );
+    const button = screen.getByTestId('center-to-pin-button');
+    expect(button).toBeInTheDocument();
+
+    act(() => {
+      button.click();
+    });
+
+    expect(store.getState().map.data.position.last).toEqual({
+      x: 1,
+      y: 1,
+      z: 3,
+    });
+  });
+
+  it('should dispatch get search data and open drawer on fullName click', async () => {
+    const { store } = renderComponentWithActionListener(
+      BIO_ENTITY.name,
+      {
+        ...BIO_ENTITY,
+        x: undefined,
+        y: undefined,
+      },
+      {
+        map: {
+          ...MAP_INITIAL_STATE,
+          data: {
+            ...MAP_INITIAL_STATE.data,
+            modelId: 5052,
+            size: {
+              width: 256,
+              height: 256,
+              tileSize: 256,
+              minZoom: 1,
+              maxZoom: 1,
+            },
+            position: {
+              initial: {
+                x: 0,
+                y: 0,
+                z: 2,
+              },
+              last: {
+                x: 1,
+                y: 1,
+                z: 3,
+              },
+            },
+          },
+        },
+      },
+    );
+    const button = screen.getByText(BIO_ENTITY.name);
+    expect(button).toBeInTheDocument();
+
+    act(() => {
+      button.click();
+    });
+
+    const actions = store.getActions();
+
+    expect(actions).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          payload: undefined,
+          type: 'project/getSearchData/pending',
+        }),
+      ]),
+    );
+
+    expect(actions).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          payload: BIO_ENTITY.name,
+          type: 'drawer/openSearchDrawerWithSelectedTab',
+        }),
+      ]),
+    );
+  });
 });

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

-import { Icon } from '@/shared/Icon';
-import { BioEntity } from '@/types/models';
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import {
+  getDefaultSearchTab,
+  getSearchValuesArrayAndTrimToSeven,
+} from '@/components/FunctionalArea/TopBar/SearchBar/SearchBar.utils';
+import { DEFAULT_MAX_ZOOM } from '@/constants/map';
+import { openSearchDrawerWithSelectedTab } from '@/redux/drawer/drawer.slice';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { setMapPosition } from '@/redux/map/map.slice';
-import { DEFAULT_MAX_ZOOM } from '@/constants/map';
+import { getSearchData } from '@/redux/search/search.thunks';
+import { Icon } from '@/shared/Icon';
+import { twMerge } from 'tailwind-merge';
 import { getPinColor } from '../../../ResultsList/PinsList/PinsListItem/PinsListItem.component.utils';
+import { PinListBioEntity } from './BioEntitiesPinsListItem.types';
+import { isPinWithCoordinates } from './BioEntitiesPinsListItem.utils';
 
 interface BioEntitiesPinsListItemProps {
   name: string;
-  pin: BioEntity;
+  pin: PinListBioEntity;
 }
 
 export const BioEntitiesPinsListItem = ({
@@ -15,8 +25,13 @@ export const BioEntitiesPinsListItem = ({
   pin,
 }: BioEntitiesPinsListItemProps): JSX.Element => {
   const dispatch = useAppDispatch();
+  const pinHasCoords = isPinWithCoordinates(pin);
 
   const handleCenterMapToPin = (): void => {
+    if (!pinHasCoords) {
+      return;
+    }
+
     dispatch(
       setMapPosition({
         x: pin.x,
@@ -26,33 +41,49 @@ export const BioEntitiesPinsListItem = ({
     );
   };
 
+  const handleSearchMapForPin = (): void => {
+    const searchValues = getSearchValuesArrayAndTrimToSeven(name);
+    dispatch(getSearchData({ searchQueries: searchValues, isPerfectMatch: true }));
+    dispatch(openSearchDrawerWithSelectedTab(getDefaultSearchTab(searchValues)));
+  };
+
   return (
     <div className="mb-4 flex w-full flex-col gap-3 rounded-lg border-[1px] border-solid border-greyscale-500 p-4">
       <div className="flex w-full flex-row items-center gap-2">
         <button
           type="button"
           onClick={handleCenterMapToPin}
-          className="mr-2 shrink-0"
+          className={twMerge('mr-2 shrink-0', !pinHasCoords && 'cursor-default')}
           data-testid="center-to-pin-button"
         >
           <Icon name="pin" className={getPinColor('bioEntity')} />
         </button>
         <p>
-          {pin.stringType}: <span className="w-full font-bold">{name}</span>
+          {pin.stringType ? `${pin.stringType}: ` : ''}
+          <span
+            className="w-full cursor-pointer font-bold underline"
+            onClick={handleSearchMapForPin}
+          >
+            {name}
+          </span>
         </p>
       </div>
-      <p className="font-bold leading-6">
-        Full name:{' '}
-        <span className="w-full font-normal" data-testid="bio-entity-name">
-          {pin.fullName || ``}
-        </span>
-      </p>
-      <p className="font-bold leading-6">
-        Symbol:{' '}
-        <span className="w-full font-normal" data-testid="bio-entity-symbol">
-          {pin.symbol || ``}
-        </span>
-      </p>
+      {pin.fullName && (
+        <p className="font-bold leading-6">
+          Full name:{' '}
+          <span className="w-full font-normal" data-testid="bio-entity-name">
+            {pin.fullName}
+          </span>
+        </p>
+      )}
+      {pin.symbol && (
+        <p className="font-bold leading-6">
+          Symbol:{' '}
+          <span className="w-full font-normal" data-testid="bio-entity-symbol">
+            {pin.symbol}
+          </span>
+        </p>
+      )}
       <p className="font-bold leading-6">
         Synonyms: <span className="w-full font-normal">{pin.synonyms.join(', ')}</span>
       </p>

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.types.ts

+import { BioEntity } from '@/types/models';
+
+export type PinListBioEntity = Pick<BioEntity, 'synonyms' | 'references'> & {
+  symbol?: BioEntity['symbol'];
+  stringType?: BioEntity['stringType'];
+  fullName?: BioEntity['fullName'];
+  x?: BioEntity['x'];
+  y?: BioEntity['y'];
+};
+
+export type PinListBioEntityWithCoords = PinListBioEntity & {
+  x: BioEntity['x'];
+  y: BioEntity['y'];
+};

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.utils.ts

+import { PinListBioEntity, PinListBioEntityWithCoords } from './BioEntitiesPinsListItem.types';
+
+export const isPinWithCoordinates = (pin: PinListBioEntity): pin is PinListBioEntityWithCoords => {
+  return Boolean(pin?.x && pin?.y);
+};

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx

 /* eslint-disable no-magic-numbers */
-import { act, render, screen } from '@testing-library/react';
+import { drugsFixture } from '@/models/fixtures/drugFixtures';
+import { StoreType } from '@/redux/store';
 import {
   InitialStoreState,
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
-import { StoreType } from '@/redux/store';
-import { drugsFixture } from '@/models/fixtures/drugFixtures';
+import { act, render, screen } from '@testing-library/react';
 import { ResultsList } from './ResultsList.component';
 
 const INITIAL_STATE: InitialStoreState = {
@@ -25,7 +25,10 @@ const INITIAL_STATE: InitialStoreState = {
       selectedSearchElement: 'aspirin',
     },
     reactionDrawerState: {},
-    bioEntityDrawerState: {},
+    bioEntityDrawerState: {
+      drugs: {},
+      chemicals: {},
+    },
     overlayDrawerState: {
       currentStep: 0,
     },

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

@@ -44,7 +44,10 @@ describe('SearchDrawerWrapper - component', () => {
           selectedSearchElement: '',
         },
         reactionDrawerState: {},
-        bioEntityDrawerState: {},
+        bioEntityDrawerState: {
+          drugs: {},
+          chemicals: {},
+        },
         overlayDrawerState: {
           currentStep: 0,
         },
@@ -67,7 +70,10 @@ describe('SearchDrawerWrapper - component', () => {
           selectedSearchElement: '',
         },
         reactionDrawerState: {},
-        bioEntityDrawerState: {},
+        bioEntityDrawerState: {
+          drugs: {},
+          chemicals: {},
+        },
         overlayDrawerState: {
           currentStep: 0,
         },

src/constants/fetchData.ts

+import { FetchDataState } from '@/types/fetchDataState';
+import { DEFAULT_ERROR } from './errors';
+
+export const DEFAULT_FETCH_DATA: FetchDataState<[]> = {
+  data: [],
+  loading: 'idle',
+  error: DEFAULT_ERROR,
+};

src/models/targetSearchNameResult.ts

+import { z } from 'zod';
+
+export const targetSearchNameResult = z.object({
+  name: z.string(),
+});

src/redux/apiPath.ts

@@ -36,6 +36,10 @@ export const apiPath = {
     `projects/${PROJECT_ID}/models/*/bioEntities/reactions/?id=${ids.join(',')}&size=1000`,
   getDrugsStringWithQuery: (searchQuery: string): string =>
     `projects/${PROJECT_ID}/drugs:search?query=${searchQuery}`,
+  getDrugsStringWithColumnsTarget: (columns: string, target: string): string =>
+    `projects/${PROJECT_ID}/drugs:search?columns=${columns}&target=${target}`,
+  getChemicalsStringWithColumnsTarget: (columns: string, target: string): string =>
+    `projects/${PROJECT_ID}/chemicals:search?columns=${columns}&target=${target}`,
   getModelsString: (): string => `projects/${PROJECT_ID}/models/`,
   getChemicalsStringWithQuery: (searchQuery: string): string =>
     `projects/${PROJECT_ID}/chemicals:search?query=${searchQuery}`,