From d4c2c2f32f153bd13c4b97d921bf69b9d382f8a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Or=C5=82=C3=B3w?= <adrian.orlow@fishbrain.com>
Date: Wed, 21 Feb 2024 20:23:45 +0100
Subject: [PATCH] feat: add drugs chemicals search for target
---
.../BioEntityDrawer.component.test.tsx | 189 +++++++++++++++++-
.../BioEntityDrawer.component.tsx | 35 +++-
.../ChemicalsList.component.test.tsx | 141 +++++++++++++
.../ChemicalsList/ChemicalsList.component.tsx | 23 +++
.../BioEntityDrawer/ChemicalsList/index.ts | 1 +
.../DrugsList/DrugsList.component.test.tsx | 141 +++++++++++++
.../DrugsList/DrugsList.component.tsx | 23 +++
.../Drawer/BioEntityDrawer/DrugsList/index.ts | 1 +
.../CollapsibleSection.component.tsx | 34 +++-
.../BioEntitiesPinsList.component.test.tsx | 13 +-
...BioEntitiesPinsListItem.component.test.tsx | 10 +-
.../BioEntitiesPinsListItem.component.tsx | 37 ++--
.../BioEntitiesPinsListItem.types.ts | 7 +
src/constants/fetchData.ts | 8 +
src/models/targetSearchNameResult.ts | 5 +
src/redux/apiPath.ts | 4 +
src/redux/drawer/drawer.constants.ts | 5 +-
src/redux/drawer/drawer.reducers.ts | 62 +++++-
src/redux/drawer/drawer.selectors.ts | 19 ++
src/redux/drawer/drawer.slice.ts | 12 +-
src/redux/drawer/drawer.thunks.ts | 77 +++++++
src/redux/drawer/drawer.types.ts | 3 +
src/types/fetchDataState.ts | 2 +
src/types/models.ts | 2 +
24 files changed, 801 insertions(+), 53 deletions(-)
create mode 100644 src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/ChemicalsList.component.test.tsx
create mode 100644 src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/ChemicalsList.component.tsx
create mode 100644 src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/index.ts
create mode 100644 src/components/Map/Drawer/BioEntityDrawer/DrugsList/DrugsList.component.test.tsx
create mode 100644 src/components/Map/Drawer/BioEntityDrawer/DrugsList/DrugsList.component.tsx
create mode 100644 src/components/Map/Drawer/BioEntityDrawer/DrugsList/index.ts
create mode 100644 src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.types.ts
create mode 100644 src/constants/fetchData.ts
create mode 100644 src/models/targetSearchNameResult.ts
create mode 100644 src/redux/drawer/drawer.thunks.ts
diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.test.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.test.tsx
index dbff8087..b2fad199 100644
--- a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.test.tsx
+++ b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.test.tsx
@@ -1,26 +1,31 @@
/* 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',
+ );
+ });
});
});
diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx
index 6f3af872..1c37d3bd 100644
--- a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx
+++ b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx
@@ -1,13 +1,36 @@
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 { 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 +71,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>
diff --git a/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/ChemicalsList.component.test.tsx b/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/ChemicalsList.component.test.tsx
new file mode 100644
index 00000000..03adc8fd
--- /dev/null
+++ b/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/ChemicalsList.component.test.tsx
@@ -0,0 +1,141 @@
+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();
+ });
+ });
+});
diff --git a/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/ChemicalsList.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/ChemicalsList.component.tsx
new file mode 100644
index 00000000..ffbacbd9
--- /dev/null
+++ b/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/ChemicalsList.component.tsx
@@ -0,0 +1,23 @@
+import { currentSearchedBioEntityChemicalsSelector } from '@/redux/drawer/drawer.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { LoadingIndicator } from '@/shared/LoadingIndicator';
+import { ZERO } from '@/constants/common';
+import { BioEntitiesPinsListItem } from '../../SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem';
+
+export const ChemicalsList = (): JSX.Element => {
+ const chemicals = useAppSelector(currentSearchedBioEntityChemicalsSelector);
+ const chemicalsData = chemicals.data || [];
+
+ if (chemicals.loading === 'pending') {
+ return <LoadingIndicator />;
+ }
+
+ return (
+ <div>
+ {chemicalsData.map(drug => (
+ <BioEntitiesPinsListItem key={`${drug.id}`} pin={drug} name={drug.name} />
+ ))}
+ {chemicalsData.length === ZERO && 'List is empty'}
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/index.ts b/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/index.ts
new file mode 100644
index 00000000..ee38f9ad
--- /dev/null
+++ b/src/components/Map/Drawer/BioEntityDrawer/ChemicalsList/index.ts
@@ -0,0 +1 @@
+export { ChemicalsList } from './ChemicalsList.component';
diff --git a/src/components/Map/Drawer/BioEntityDrawer/DrugsList/DrugsList.component.test.tsx b/src/components/Map/Drawer/BioEntityDrawer/DrugsList/DrugsList.component.test.tsx
new file mode 100644
index 00000000..0ec503c4
--- /dev/null
+++ b/src/components/Map/Drawer/BioEntityDrawer/DrugsList/DrugsList.component.test.tsx
@@ -0,0 +1,141 @@
+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();
+ });
+ });
+});
diff --git a/src/components/Map/Drawer/BioEntityDrawer/DrugsList/DrugsList.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/DrugsList/DrugsList.component.tsx
new file mode 100644
index 00000000..998a0a77
--- /dev/null
+++ b/src/components/Map/Drawer/BioEntityDrawer/DrugsList/DrugsList.component.tsx
@@ -0,0 +1,23 @@
+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 || [];
+
+ if (drugs.loading === 'pending') {
+ return <LoadingIndicator />;
+ }
+
+ return (
+ <div>
+ {drugsData.map(drug => (
+ <BioEntitiesPinsListItem key={`${drug.id}`} pin={drug} name={drug.name} />
+ ))}
+ {drugsData.length === ZERO && 'List is empty'}
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/BioEntityDrawer/DrugsList/index.ts b/src/components/Map/Drawer/BioEntityDrawer/DrugsList/index.ts
new file mode 100644
index 00000000..1389bcc4
--- /dev/null
+++ b/src/components/Map/Drawer/BioEntityDrawer/DrugsList/index.ts
@@ -0,0 +1 @@
+export { DrugsList } from './DrugsList.component';
diff --git a/src/components/Map/Drawer/ExportDrawer/CollapsibleSection/CollapsibleSection.component.tsx b/src/components/Map/Drawer/ExportDrawer/CollapsibleSection/CollapsibleSection.component.tsx
index b0d478bb..2dc750a9 100644
--- a/src/components/Map/Drawer/ExportDrawer/CollapsibleSection/CollapsibleSection.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/CollapsibleSection/CollapsibleSection.component.tsx
@@ -1,3 +1,4 @@
+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>
+ );
+};
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx
index a03b5b4c..32311422 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx
@@ -1,12 +1,12 @@
/* 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);
});
});
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
index 9c245a24..6049a6e2 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
@@ -1,12 +1,12 @@
/* eslint-disable no-magic-numbers */
-import { render, screen } from '@testing-library/react';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { StoreType } from '@/redux/store';
+import { BioEntity } from '@/types/models';
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 { BioEntitiesPinsListItem } from './BioEntitiesPinsListItem.component';
const BIO_ENTITY = bioEntitiesContentFixture[0].bioEntity;
@@ -53,7 +53,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);
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx
index c4322112..8dc30490 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx
@@ -1,11 +1,11 @@
-import { twMerge } from 'tailwind-merge';
import { Icon } from '@/shared/Icon';
-import { BioEntity } from '@/types/models';
+import { twMerge } from 'tailwind-merge';
import { getPinColor } from '../../../ResultsList/PinsList/PinsListItem/PinsListItem.component.utils';
+import { PinListBioEntity } from './BioEntitiesPinsListItem.types';
interface BioEntitiesPinsListItemProps {
name: string;
- pin: BioEntity;
+ pin: PinListBioEntity;
}
export const BioEntitiesPinsListItem = ({
@@ -17,21 +17,26 @@ export const BioEntitiesPinsListItem = ({
<div className="flex w-full flex-row items-center gap-2">
<Icon name="pin" className={twMerge('mr-2 shrink-0', getPinColor('bioEntity'))} />
<p>
- {pin.stringType}: <span className="w-full font-bold">{name}</span>
+ {pin.stringType ? `${pin.stringType}: ` : ''}
+ <span className="w-full font-bold">{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>
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.types.ts b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.types.ts
new file mode 100644
index 00000000..03cfcae8
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.types.ts
@@ -0,0 +1,7 @@
+import { BioEntity } from '@/types/models';
+
+export type PinListBioEntity = Pick<BioEntity, 'synonyms' | 'references'> & {
+ symbol?: BioEntity['symbol'];
+ stringType?: BioEntity['stringType'];
+ fullName?: BioEntity['fullName'];
+};
diff --git a/src/constants/fetchData.ts b/src/constants/fetchData.ts
new file mode 100644
index 00000000..692b2f95
--- /dev/null
+++ b/src/constants/fetchData.ts
@@ -0,0 +1,8 @@
+import { FetchDataState } from '@/types/fetchDataState';
+import { DEFAULT_ERROR } from './errors';
+
+export const DEFAULT_FETCH_DATA: FetchDataState<[]> = {
+ data: [],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+};
diff --git a/src/models/targetSearchNameResult.ts b/src/models/targetSearchNameResult.ts
new file mode 100644
index 00000000..721a63eb
--- /dev/null
+++ b/src/models/targetSearchNameResult.ts
@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const targetSearchNameResult = z.object({
+ name: z.string(),
+});
diff --git a/src/redux/apiPath.ts b/src/redux/apiPath.ts
index ac815f25..5051aa2a 100644
--- a/src/redux/apiPath.ts
+++ b/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}`,
diff --git a/src/redux/drawer/drawer.constants.ts b/src/redux/drawer/drawer.constants.ts
index f1035f97..33890a23 100644
--- a/src/redux/drawer/drawer.constants.ts
+++ b/src/redux/drawer/drawer.constants.ts
@@ -11,7 +11,10 @@ export const DRAWER_INITIAL_STATE: DrawerState = {
selectedSearchElement: '',
},
reactionDrawerState: {},
- bioEntityDrawerState: {},
+ bioEntityDrawerState: {
+ drugs: {},
+ chemicals: {},
+ },
overlayDrawerState: {
currentStep: 0,
},
diff --git a/src/redux/drawer/drawer.reducers.ts b/src/redux/drawer/drawer.reducers.ts
index 8a60b60f..3a72aa53 100644
--- a/src/redux/drawer/drawer.reducers.ts
+++ b/src/redux/drawer/drawer.reducers.ts
@@ -6,7 +6,11 @@ import type {
OpenSearchDrawerWithSelectedTabReducerAction,
} from '@/redux/drawer/drawer.types';
import type { DrawerName } from '@/types/drawerName';
-import type { PayloadAction } from '@reduxjs/toolkit';
+import type { ActionReducerMapBuilder, PayloadAction } from '@reduxjs/toolkit';
+import {
+ getChemicalsForBioEntityDrawerTarget,
+ getDrugsForBioEntityDrawerTarget,
+} from './drawer.thunks';
export const openDrawerReducer = (state: DrawerState, action: PayloadAction<DrawerName>): void => {
state.isOpen = true;
@@ -109,3 +113,59 @@ export const openBioEntityDrawerByIdReducer = (
state.bioEntityDrawerState.bioentityId = action.payload;
state.searchDrawerState.selectedSearchElement = action.payload.toString();
};
+
+export const getBioEntityDrugsForTargetReducers = (
+ builder: ActionReducerMapBuilder<DrawerState>,
+): void => {
+ builder.addCase(getDrugsForBioEntityDrawerTarget.pending, state => {
+ const bioEntityId = state.bioEntityDrawerState.bioentityId || '';
+ state.bioEntityDrawerState.drugs[bioEntityId] = {
+ ...state.bioEntityDrawerState.drugs[bioEntityId],
+ loading: 'pending',
+ };
+ });
+ builder.addCase(getDrugsForBioEntityDrawerTarget.fulfilled, (state, action) => {
+ const bioEntityId = state.bioEntityDrawerState.bioentityId || '';
+ state.bioEntityDrawerState.drugs[bioEntityId] = {
+ ...state.bioEntityDrawerState.drugs[bioEntityId],
+ data: action.payload || [],
+ loading: 'succeeded',
+ };
+ });
+ builder.addCase(getDrugsForBioEntityDrawerTarget.rejected, state => {
+ const bioEntityId = state.bioEntityDrawerState.bioentityId || '';
+ state.bioEntityDrawerState.drugs[bioEntityId] = {
+ ...state.bioEntityDrawerState.drugs[bioEntityId],
+ loading: 'failed',
+ };
+ // TODO to discuss manage state of failure
+ });
+};
+
+export const getBioEntityChemicalsForTargetReducers = (
+ builder: ActionReducerMapBuilder<DrawerState>,
+): void => {
+ builder.addCase(getChemicalsForBioEntityDrawerTarget.pending, state => {
+ const bioEntityId = state.bioEntityDrawerState.bioentityId || '';
+ state.bioEntityDrawerState.chemicals[bioEntityId] = {
+ ...state.bioEntityDrawerState.chemicals[bioEntityId],
+ loading: 'pending',
+ };
+ });
+ builder.addCase(getChemicalsForBioEntityDrawerTarget.fulfilled, (state, action) => {
+ const bioEntityId = state.bioEntityDrawerState.bioentityId || '';
+ state.bioEntityDrawerState.chemicals[bioEntityId] = {
+ ...state.bioEntityDrawerState.chemicals[bioEntityId],
+ data: action.payload || [],
+ loading: 'succeeded',
+ };
+ });
+ builder.addCase(getChemicalsForBioEntityDrawerTarget.rejected, state => {
+ const bioEntityId = state.bioEntityDrawerState.bioentityId || '';
+ state.bioEntityDrawerState.chemicals[bioEntityId] = {
+ ...state.bioEntityDrawerState.chemicals[bioEntityId],
+ loading: 'failed',
+ };
+ // TODO to discuss manage state of failure
+ });
+};
diff --git a/src/redux/drawer/drawer.selectors.ts b/src/redux/drawer/drawer.selectors.ts
index 26e9a90b..30d9831c 100644
--- a/src/redux/drawer/drawer.selectors.ts
+++ b/src/redux/drawer/drawer.selectors.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_FETCH_DATA } from '@/constants/fetchData';
import { rootSelector } from '@/redux/root/root.selectors';
import { assertNever } from '@/utils/assertNever';
import { createSelector } from '@reduxjs/toolkit';
@@ -46,6 +47,24 @@ export const currentSearchedBioEntityId = createSelector(
state => state.bioentityId,
);
+export const currentSearchedBioEntityDrugsSelector = createSelector(
+ bioEntityDrawerStateSelector,
+ currentSearchedBioEntityId,
+ (state, currentBioEntityId) =>
+ currentBioEntityId && state.drugs[currentBioEntityId]
+ ? state.drugs[currentBioEntityId]
+ : DEFAULT_FETCH_DATA,
+);
+
+export const currentSearchedBioEntityChemicalsSelector = createSelector(
+ bioEntityDrawerStateSelector,
+ currentSearchedBioEntityId,
+ (state, currentBioEntityId) =>
+ currentBioEntityId && state.chemicals[currentBioEntityId]
+ ? state.chemicals[currentBioEntityId]
+ : DEFAULT_FETCH_DATA,
+);
+
export const resultListSelector = createSelector(
rootSelector,
currentStepTypeSelector,
diff --git a/src/redux/drawer/drawer.slice.ts b/src/redux/drawer/drawer.slice.ts
index 98e073ae..99d928db 100644
--- a/src/redux/drawer/drawer.slice.ts
+++ b/src/redux/drawer/drawer.slice.ts
@@ -1,21 +1,23 @@
import { createSlice } from '@reduxjs/toolkit';
+import { DRAWER_INITIAL_STATE } from './drawer.constants';
import {
closeDrawerReducer,
+ displayAddOverlaysDrawerReducer,
displayBioEntitiesListReducer,
displayChemicalsListReducer,
displayDrugsListReducer,
displayEntityDetailsReducer,
displayGroupedSearchResultsReducer,
+ getBioEntityChemicalsForTargetReducers,
+ getBioEntityDrugsForTargetReducers,
+ openBioEntityDrawerByIdReducer,
openDrawerReducer,
openOverlaysDrawerReducer,
- openBioEntityDrawerByIdReducer,
openReactionDrawerByIdReducer,
openSearchDrawerWithSelectedTabReducer,
openSubmapsDrawerReducer,
selectTabReducer,
- displayAddOverlaysDrawerReducer,
} from './drawer.reducers';
-import { DRAWER_INITIAL_STATE } from './drawer.constants';
const drawerSlice = createSlice({
name: 'drawer',
@@ -36,6 +38,10 @@ const drawerSlice = createSlice({
openReactionDrawerById: openReactionDrawerByIdReducer,
openBioEntityDrawerById: openBioEntityDrawerByIdReducer,
},
+ extraReducers: builder => {
+ getBioEntityDrugsForTargetReducers(builder);
+ getBioEntityChemicalsForTargetReducers(builder);
+ },
});
export const {
diff --git a/src/redux/drawer/drawer.thunks.ts b/src/redux/drawer/drawer.thunks.ts
new file mode 100644
index 00000000..7e60536f
--- /dev/null
+++ b/src/redux/drawer/drawer.thunks.ts
@@ -0,0 +1,77 @@
+import { chemicalSchema } from '@/models/chemicalSchema';
+import { drugSchema } from '@/models/drugSchema';
+import { targetSearchNameResult } from '@/models/targetSearchNameResult';
+import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
+import { Chemical, Drug, TargetSearchNameResult } from '@/types/models';
+import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { apiPath } from '../apiPath';
+
+const QUERY_COLUMN_NAME = 'name';
+
+const getDrugsNamesForTarget = async (target: string): Promise<TargetSearchNameResult[]> => {
+ const response = await axiosInstanceNewAPI.get<TargetSearchNameResult[]>(
+ apiPath.getDrugsStringWithColumnsTarget(QUERY_COLUMN_NAME, target),
+ );
+
+ const isDataValid = (obj: unknown): obj is TargetSearchNameResult =>
+ validateDataUsingZodSchema(obj, targetSearchNameResult);
+
+ return response.data.filter(isDataValid);
+};
+
+const getDrugsByName = async (drugName: string): Promise<Drug[]> => {
+ const response = await axiosInstanceNewAPI.get<Drug[]>(apiPath.getDrugsStringWithQuery(drugName));
+
+ const isDataValid = (obj: unknown): obj is Drug => validateDataUsingZodSchema(obj, drugSchema);
+
+ return response.data.filter(isDataValid);
+};
+
+export const getDrugsForBioEntityDrawerTarget = createAsyncThunk(
+ 'drawer/getDrugsForBioEntityDrawerTarget',
+ async (target: string): Promise<Drug[]> => {
+ const drugsNames = await getDrugsNamesForTarget(target);
+ const drugsArrays = await Promise.all(
+ drugsNames.map(({ name }) => getDrugsByName(encodeURIComponent(name))),
+ );
+ const drugs = drugsArrays.flat();
+
+ return drugs;
+ },
+);
+
+const getChemicalsNamesForTarget = async (target: string): Promise<TargetSearchNameResult[]> => {
+ const response = await axiosInstanceNewAPI.get<TargetSearchNameResult[]>(
+ apiPath.getChemicalsStringWithColumnsTarget(QUERY_COLUMN_NAME, target),
+ );
+
+ const isDataValid = (obj: unknown): obj is TargetSearchNameResult =>
+ validateDataUsingZodSchema(obj, targetSearchNameResult);
+
+ return response.data.filter(isDataValid);
+};
+
+const getChemicalsByName = async (chemicalName: string): Promise<Chemical[]> => {
+ const response = await axiosInstanceNewAPI.get<Chemical[]>(
+ apiPath.getChemicalsStringWithQuery(chemicalName),
+ );
+
+ const isDataValid = (obj: unknown): obj is Chemical =>
+ validateDataUsingZodSchema(obj, chemicalSchema);
+
+ return response.data.filter(isDataValid);
+};
+
+export const getChemicalsForBioEntityDrawerTarget = createAsyncThunk(
+ 'drawer/getChemicalsForBioEntityDrawerTarget',
+ async (target: string): Promise<Chemical[]> => {
+ const chemicalsNames = await getChemicalsNamesForTarget(target);
+ const chemicalsArrays = await Promise.all(
+ chemicalsNames.map(({ name }) => getChemicalsByName(encodeURIComponent(name))),
+ );
+ const chemicals = chemicalsArrays.flat();
+
+ return chemicals;
+ },
+);
diff --git a/src/redux/drawer/drawer.types.ts b/src/redux/drawer/drawer.types.ts
index 075fcd19..f4104f25 100644
--- a/src/redux/drawer/drawer.types.ts
+++ b/src/redux/drawer/drawer.types.ts
@@ -1,4 +1,5 @@
import type { DrawerName } from '@/types/drawerName';
+import { KeyedFetchDataState } from '@/types/fetchDataState';
import { BioEntityContent, Chemical, Drug } from '@/types/models';
import { PayloadAction } from '@reduxjs/toolkit';
@@ -20,6 +21,8 @@ export type ReactionDrawerState = {
export type BioEntityDrawerState = {
bioentityId?: number;
+ drugs: KeyedFetchDataState<Drug[], []>;
+ chemicals: KeyedFetchDataState<Chemical[], []>;
};
export type DrawerState = {
diff --git a/src/types/fetchDataState.ts b/src/types/fetchDataState.ts
index 0ee6719c..95131583 100644
--- a/src/types/fetchDataState.ts
+++ b/src/types/fetchDataState.ts
@@ -15,3 +15,5 @@ export type MultiFetchDataState<T> = {
loading: Loading;
error: Error;
};
+
+export type KeyedFetchDataState<T, T2 = undefined> = Record<string, FetchDataState<T, T2>>;
diff --git a/src/types/models.ts b/src/types/models.ts
index fbc40b49..df6237ad 100644
--- a/src/types/models.ts
+++ b/src/types/models.ts
@@ -48,6 +48,7 @@ import { referenceSchema } from '@/models/referenceSchema';
import { sessionSchemaValid } from '@/models/sessionValidSchema';
import { statisticsSchema } from '@/models/statisticsSchema';
import { targetSchema } from '@/models/targetSchema';
+import { targetSearchNameResult } from '@/models/targetSearchNameResult';
import { z } from 'zod';
export type Project = z.infer<typeof projectSchema>;
@@ -96,3 +97,4 @@ export type ExportNetwork = z.infer<typeof exportNetworkchema>;
export type ExportElements = z.infer<typeof exportElementsSchema>;
export type MinervaPlugin = z.infer<typeof pluginSchema>; // Plugin type interfers with global Plugin type
export type GeneVariant = z.infer<typeof geneVariant>;
+export type TargetSearchNameResult = z.infer<typeof targetSearchNameResult>;
--
GitLab