diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
index 750e7e97c038140356e78a4680306d4c857fc4c2..44fd0a0b3e1ba4fc46bf9c857da5e1eef102289b 100644
--- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
+++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
@@ -66,6 +66,8 @@ export const SearchBar = (): JSX.Element => {
};
const handleSearchClick = (): void => {
+ if (!currentTab) return;
+
openSearchDrawerIfClosed(currentTab);
};
diff --git a/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/ConnectedBioEntitiesList.component.test.tsx b/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/ConnectedBioEntitiesList.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0fe3a588ecd06ed39cb31a05821f63f31d6a3ad4
--- /dev/null
+++ b/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/ConnectedBioEntitiesList.component.test.tsx
@@ -0,0 +1,63 @@
+/* eslint-disable no-magic-numbers */
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { InitialStoreState } from '@/utils/testing/getReduxStoreActionsListener';
+import { StoreType } from '@/redux/store';
+import { render, screen } from '@testing-library/react';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { BIOENTITY_INITIAL_STATE_MOCK } from '@/redux/bioEntity/bioEntity.mock';
+import { ConnectedBioEntitiesList } from './ConnectedBioEntitiesList.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+ return (
+ render(
+ <Wrapper>
+ <ConnectedBioEntitiesList />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('ConnectedBioEntitiesList', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders loading indicator when bioEntityLoading is pending', () => {
+ renderComponent({
+ bioEntity: {
+ ...BIOENTITY_INITIAL_STATE_MOCK,
+ loading: 'pending',
+ },
+ });
+
+ const loadingIndicator = screen.getByTestId('loading-indicator');
+
+ expect(loadingIndicator).toBeVisible();
+ });
+
+ it('renders list of bio entities when bioEntityData is available', () => {
+ const bioEntityData = [bioEntitiesContentFixture[0]];
+
+ renderComponent({
+ bioEntity: {
+ ...BIOENTITY_INITIAL_STATE_MOCK,
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ data: bioEntityData,
+ },
+ ],
+ },
+ });
+
+ expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument();
+ expect(screen.queryByText(bioEntitiesContentFixture[0].bioEntity.name)).toBeVisible();
+ });
+});
diff --git a/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/ConnectedBioEntitiesList.component.tsx b/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/ConnectedBioEntitiesList.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..04c02e458ed6a5413190a0b832eb399ac6ef85f2
--- /dev/null
+++ b/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/ConnectedBioEntitiesList.component.tsx
@@ -0,0 +1,30 @@
+import {
+ bioEntityDataListSelector,
+ bioEntityLoadingSelector,
+} from '@/redux/bioEntity/bioEntity.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { LoadingIndicator } from '@/shared/LoadingIndicator';
+import { BioEntitiesPinsListItem } from '../../SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem';
+
+export const ConnectedBioEntitiesList = (): React.ReactNode => {
+ const bioEntityLoading = useAppSelector(bioEntityLoadingSelector);
+ const bioEntityData = useAppSelector(bioEntityDataListSelector);
+ const isPending = bioEntityLoading === 'pending';
+
+ if (isPending) {
+ return <LoadingIndicator />;
+ }
+
+ return (
+ <div>
+ {bioEntityData &&
+ bioEntityData.map(item => (
+ <BioEntitiesPinsListItem
+ name={item.bioEntity.name}
+ pin={item.bioEntity}
+ key={item.bioEntity.name}
+ />
+ ))}
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/index.ts b/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..beb271ba06a0417936a140296bfe6f94801d0540
--- /dev/null
+++ b/src/components/Map/Drawer/ReactionDrawer/ConnectedBioEntitiesList/index.ts
@@ -0,0 +1 @@
+export { ConnectedBioEntitiesList } from './ConnectedBioEntitiesList.component';
diff --git a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx
index 9f6a8c4c3a130a2986a2a7cb15879fa93cb6cca9..2ba8e96d0a91fd7c88bf022494114eedb3ea63ea 100644
--- a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx
+++ b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx
@@ -5,6 +5,7 @@ import {
import { DrawerHeading } from '@/shared/DrawerHeading';
import { useSelector } from 'react-redux';
import { ReferenceGroup } from './ReferenceGroup';
+import { ConnectedBioEntitiesList } from './ConnectedBioEntitiesList';
export const ReactionDrawer = (): React.ReactNode => {
const reaction = useSelector(currentDrawerReactionSelector);
@@ -23,7 +24,7 @@ export const ReactionDrawer = (): React.ReactNode => {
</>
}
/>
- <div className="flex flex-col gap-6 p-6">
+ <div className="flex h-[calc(100%-93px)] max-h-[calc(100%-93px)] flex-col gap-6 overflow-y-auto p-6">
<div className="text-sm font-normal">
Type: <b className="font-semibold">{reaction.type}</b>
</div>
@@ -32,6 +33,7 @@ export const ReactionDrawer = (): React.ReactNode => {
{referencesGrouped.map(group => (
<ReferenceGroup key={group.source} group={group} />
))}
+ <ConnectedBioEntitiesList />
</div>
</div>
);
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx
index 5e85e6ae53922e84d030d6384dc5b5350bf43b86..bcd33a53cc7290ad6a7be91825a0ea8553796db1 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx
@@ -54,7 +54,7 @@ describe('DrugsAccordion - component', () => {
},
});
- expect(screen.getByText('Chemicals (4)')).toBeInTheDocument();
+ expect(screen.getByText('Small molecule targets (4)')).toBeInTheDocument();
});
it('should display loading indicator while waiting for chemicals search response', () => {
renderComponent({
@@ -77,7 +77,7 @@ describe('DrugsAccordion - component', () => {
},
});
- expect(screen.getByText('Chemicals (Loading...)')).toBeInTheDocument();
+ expect(screen.getByText('Small molecule targets (Loading...)')).toBeInTheDocument();
});
it('should navigate user to chemical results list after clicking button', async () => {
const { store } = renderComponent({
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx
index 36dc7c61cab95a7f43df3f3e5c7ead3bf8f40225..4730eb40a26204be394a5633ff360dd83f829f6a 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx
@@ -29,7 +29,7 @@ export const ChemicalsAccordion = (): JSX.Element => {
onClick={onAccordionClick}
disabled={isPending || isChemicalsEmpty}
>
- Chemicals
+ Small molecule targets
{isPending && ' (Loading...)'}
{isSucceeded && ` (${chemicalsNumber})`}
</AccordionItemButton>
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.test.tsx
index dfdbab89420af6132fbc965e055ad8ae0c617181..c114185cc4130ac2dd5330b4b0752269a351aaa3 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.test.tsx
@@ -47,7 +47,7 @@ describe('DrugsAccordion - component', () => {
error: { name: '', message: '' },
},
});
- expect(screen.getByText('Drugs (4)')).toBeInTheDocument();
+ expect(screen.getByText('Drug targets (4)')).toBeInTheDocument();
});
it('should display loading indicator while waiting for drug search response', () => {
renderComponent({
@@ -64,7 +64,7 @@ describe('DrugsAccordion - component', () => {
error: { name: '', message: '' },
},
});
- expect(screen.getByText('Drugs (Loading...)')).toBeInTheDocument();
+ expect(screen.getByText('Drug targets (Loading...)')).toBeInTheDocument();
});
it('should navigate user to drugs results list after clicking button', async () => {
const { store } = renderComponent({
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.tsx
index e92ba2bd1d565d99c5200c69bf73e70fd0820603..4dba78863a7a49917e6399a2b856bd6bde502615 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.tsx
@@ -26,7 +26,7 @@ export const DrugsAccordion = (): JSX.Element => {
onClick={onAccordionClick}
disabled={isPending || isDrugsEmpty}
>
- Drugs
+ Drug targets
{isPending && ' (Loading...)'}
{isSucceeded && ` (${drugsNumber})`}
</AccordionItemButton>
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx
index b1810ecd93fe5dbfd52efd4fdbebdcc5b211de77..280246c664c61e8c7263fd08edb4f26a8a0887c1 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx
@@ -7,7 +7,7 @@ import {
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { render, screen } from '@testing-library/react';
-import { PinItem, PinTypeWithNone } from '../PinsList/PinsList.types';
+import { PinItem } from '../PinsList/PinsList.types';
import { AccordionsDetails } from './AccordionsDetails.component';
const DRUGS_PINS_LIST = drugsFixture.map(drug => ({
@@ -24,7 +24,6 @@ const CHEMICALS_PINS_LIST = chemicalsFixture.map(chemical => ({
const renderComponent = (
pinsList: PinItem[],
- type: PinTypeWithNone,
initialStoreState: InitialStoreState = {},
): { store: StoreType } => {
const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
@@ -32,7 +31,7 @@ const renderComponent = (
return (
render(
<Wrapper>
- <AccordionsDetails pinsList={pinsList} type={type} />
+ <AccordionsDetails pinsList={pinsList} />
</Wrapper>,
),
{
@@ -43,21 +42,21 @@ const renderComponent = (
describe('AccordionsDetails - component', () => {
it('should display name of drug', () => {
- renderComponent(DRUGS_PINS_LIST, 'drugs');
+ renderComponent(DRUGS_PINS_LIST);
const drugName = drugsFixture[0].name;
expect(screen.getByText(drugName, { exact: false })).toBeInTheDocument();
});
it('should display description of drug', () => {
- renderComponent(DRUGS_PINS_LIST, 'drugs');
+ renderComponent(DRUGS_PINS_LIST);
const drugDescription = drugsFixture[0].description ? drugsFixture[0].description : '';
expect(screen.getByTestId('details-description').textContent).toContain(drugDescription);
});
it('should display synonyms of drug', () => {
- renderComponent(DRUGS_PINS_LIST, 'drugs');
+ renderComponent(DRUGS_PINS_LIST);
const firstDrugSynonym = drugsFixture[0].synonyms[0];
const secondDrugSynonym = drugsFixture[0].synonyms[1];
@@ -65,15 +64,8 @@ describe('AccordionsDetails - component', () => {
expect(screen.getByText(firstDrugSynonym, { exact: false })).toBeInTheDocument();
expect(screen.getByText(secondDrugSynonym, { exact: false })).toBeInTheDocument();
});
- it('should display blood brain barrier for drug', () => {
- renderComponent(DRUGS_PINS_LIST, 'drugs');
-
- const drugAdditionalInfo = drugsFixture[0].bloodBrainBarrier;
-
- expect(screen.getByText(drugAdditionalInfo, { exact: false })).toBeInTheDocument();
- });
it('should display direct evidence publications for chemicals', () => {
- renderComponent(CHEMICALS_PINS_LIST, 'chemicals');
+ renderComponent(CHEMICALS_PINS_LIST);
const chemicalsAdditionalInfo = chemicalsFixture[0].directEvidence
? chemicalsFixture[0].directEvidence
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx
index 6044b3cd3a8cafacde0f4b2a96bcf14b47da957b..79678e9ef36b3f7c02316afab1c69a5a746a4130 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx
@@ -5,9 +5,8 @@ import {
AccordionItemHeading,
AccordionItemPanel,
} from '@/shared/Accordion';
-import { PinItem, PinTypeWithNone } from '../PinsList/PinsList.types';
+import { PinItem } from '../PinsList/PinsList.types';
import {
- getAdditionalInfo,
getEntityDescriptions,
getEntityNames,
getEntitySynonyms,
@@ -15,46 +14,29 @@ import {
interface AccordionsDetailsProps {
pinsList: PinItem[];
- type: PinTypeWithNone;
}
-export const AccordionsDetails = ({ pinsList, type }: AccordionsDetailsProps): JSX.Element => {
+export const AccordionsDetails = ({ pinsList }: AccordionsDetailsProps): JSX.Element => {
return (
- <div data-testid="accordions-details">
+ <div data-testid="accordions-details" className="mb-4">
+ <div className="px-6 py-4">
+ <span className="font-semibold">Name:</span> {getEntityNames(pinsList)}
+ </div>
<Accordion allowZeroExpanded className="px-6">
<AccordionItem>
<AccordionItemHeading>
- <AccordionItemButton className="capitalize">{type}</AccordionItemButton>
- </AccordionItemHeading>
- <AccordionItemPanel>{getEntityNames(pinsList)}</AccordionItemPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionItemHeading>
- <AccordionItemButton>Description</AccordionItemButton>
+ <AccordionItemButton>Details</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
- <div data-testid="details-description">{getEntityDescriptions(pinsList)}</div>
+ <div data-testid="details-description" className="mb-5">
+ <span className="font-semibold">Description:</span> {getEntityDescriptions(pinsList)}
+ </div>
+ <div>
+ <span className="font-semibold">Synonyms:</span> {getEntitySynonyms(pinsList)}
+ </div>
</AccordionItemPanel>
</AccordionItem>
- <AccordionItem>
- <AccordionItemHeading>
- <AccordionItemButton>Synonyms</AccordionItemButton>
- </AccordionItemHeading>
- <AccordionItemPanel>{getEntitySynonyms(pinsList)}</AccordionItemPanel>
- </AccordionItem>
</Accordion>
- {type === 'drugs' && (
- <div className="flex justify-between px-6 py-4 text-sm font-bold">
- <div>Blood brain barrier</div>
- <div>{getAdditionalInfo(pinsList, type)}</div>
- </div>
- )}
- {type === 'chemicals' && (
- <div className="flex justify-between px-6 py-4 text-sm">
- <div className="font-bold">Direct Evidence Publications</div>
- <div>{getAdditionalInfo(pinsList, type)}</div>
- </div>
- )}
</div>
);
};
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx
index 3a734b7d7dadfa5ea848dbf04657d1e9793a9dcb..9f0b9e949d480487a32fbc560bb64fcc722e05cd 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx
@@ -21,7 +21,7 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => {
return (
<div className="h-[calc(100%-214px)] max-h-[calc(100%-214px)] overflow-auto">
- <AccordionsDetails pinsList={pinsList} type={type} />
+ <AccordionsDetails pinsList={pinsList} />
<ul className="px-6 py-2" data-testid="pins-list">
{targetElements.map(({ target, element }) => (
<PinsListItem
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
index 4601d1aa7decd26af61741f6162fcf85f504512a..0be1f6ddb98cabbae809ae7bca96b922e69660e1 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
@@ -67,7 +67,7 @@ describe('ResultsList - component ', () => {
renderComponent(INITIAL_STATE);
const headingText = screen.getByTestId('drawer-heading-text');
- expect(headingText.textContent).toBe('drugs');
+ expect(headingText.textContent).toBe('Drug targets');
const fristDrugName = drugsFixture[0].targets[0].name;
const secondDrugName = drugsFixture[0].targets[1].name;
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx
index 28f99dd6d6019c02fcda5dc4885eaa601770b3a5..85d5004c284a700d271202b479acc52937714a16 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx
@@ -4,6 +4,7 @@ import { DrawerHeadingBackwardButton } from '@/shared/DrawerHeadingBackwardButto
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { displayGroupedSearchResults } from '@/redux/drawer/drawer.slice';
import { PinsList } from './PinsList';
+import { mapStepTypeToHeading } from './ResultsList.component.utils';
export const ResultsList = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -17,9 +18,7 @@ export const ResultsList = (): JSX.Element => {
return (
<div className="h-full">
<DrawerHeadingBackwardButton backwardFunction={navigateToGroupedSearchResults}>
- <span className="capitalize" data-testid="drawer-heading-text">
- {stepType}
- </span>
+ <span data-testid="drawer-heading-text">{mapStepTypeToHeading(stepType)}</span>
</DrawerHeadingBackwardButton>
{data && <PinsList pinsList={data} type={stepType} />}
</div>
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.utils.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.utils.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fb28052d99947c363b6806ac8af69c8dbced1d97
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.utils.test.tsx
@@ -0,0 +1,33 @@
+import { mapStepTypeToHeading } from './ResultsList.component.utils';
+
+describe('mapStepTypeToHeading - util', () => {
+ it('should return "Drug targets" for stepType "drugs"', () => {
+ const result = mapStepTypeToHeading('drugs');
+ expect(result).toBe('Drug targets');
+ });
+
+ it('should return "Small molecule targets" for stepType "chemicals"', () => {
+ const result = mapStepTypeToHeading('chemicals');
+ expect(result).toBe('Small molecule targets');
+ });
+
+ it('should return the input stepType for other values', () => {
+ const result = mapStepTypeToHeading('someOtherType');
+ expect(result).toBe('someOtherType');
+ });
+
+ it('should return the same string case-sensitive for stepType "drugs"', () => {
+ const result = mapStepTypeToHeading('Drugs');
+ expect(result).toBe('Drugs');
+ });
+
+ it('should return the same string case-sensitive for stepType "chemicals"', () => {
+ const result = mapStepTypeToHeading('Chemicals');
+ expect(result).toBe('Chemicals');
+ });
+
+ it('should return empty string for empty input', () => {
+ const result = mapStepTypeToHeading('');
+ expect(result).toBe('');
+ });
+});
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.utils.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.utils.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5eb97686255688719511d00f1692334dbbf77de4
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.utils.tsx
@@ -0,0 +1,10 @@
+export const mapStepTypeToHeading = (stepType: string): string => {
+ switch (stepType) {
+ case 'drugs':
+ return 'Drug targets';
+ case 'chemicals':
+ return 'Small molecule targets';
+ default:
+ return stepType;
+ }
+};
diff --git a/src/redux/bioEntity/bioEntity.selectors.ts b/src/redux/bioEntity/bioEntity.selectors.ts
index ce4bd31b28b232515501ee64a30d9f0d90e4c977..25479877fe57e2a9a3a7cdbd7ee80fc545759a49 100644
--- a/src/redux/bioEntity/bioEntity.selectors.ts
+++ b/src/redux/bioEntity/bioEntity.selectors.ts
@@ -27,6 +27,11 @@ export const bioEntitySelector = createSelector(rootSelector, state => state.bio
export const bioEntityDataSelector = createSelector(bioEntitySelector, bioEntity => bioEntity.data);
+export const bioEntityLoadingSelector = createSelector(
+ bioEntitySelector,
+ bioEntity => bioEntity.loading,
+);
+
export const bioEntityDataListSelector = createSelector(bioEntityDataSelector, bioEntityData =>
bioEntityData.map(b => b.data || []).flat(),
);
diff --git a/src/shared/LoadingIndicator/LoadingIndicator.component.tsx b/src/shared/LoadingIndicator/LoadingIndicator.component.tsx
index 9f047575680c21cf2c0f6934e60960a5b02cb508..39a2a4139dc58b06f7a71f810502a126e71d56f0 100644
--- a/src/shared/LoadingIndicator/LoadingIndicator.component.tsx
+++ b/src/shared/LoadingIndicator/LoadingIndicator.component.tsx
@@ -19,5 +19,6 @@ export const LoadingIndicator = ({
height={height}
width={width}
className="animate-spin"
+ data-testid="loading-indicator"
/>
);