diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx index 87f2ee4003064718bf64a1be929a50e8c7465e1c..3256b02fba979d2b0cde9b55f03e36d5acf590f4 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx @@ -17,6 +17,7 @@ import { useRouter } from 'next/router'; import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { ONE, ZERO } from '@/constants/common'; +import { clearEntityNumberData } from '@/redux/entityNumber/entityNumber.slice'; import { getDefaultSearchTab, getSearchValuesArrayAndTrimToSeven } from './SearchBar.utils'; const ENTER_KEY_CODE = 'Enter'; @@ -34,8 +35,6 @@ export const SearchBar = (): JSX.Element => { const updateSearchValueFromQueryParam = useCallback((): void => { const { searchValue: searchValueQueryParam } = router.query; if (typeof searchValueQueryParam === 'string') { - // eslint-disable-next-line no-console - console.log('y'); setSearchValue(searchValueQueryParam); } }, [router.query]); @@ -72,6 +71,7 @@ export const SearchBar = (): JSX.Element => { const searchValues = getSearchValuesArrayAndTrimToSeven(searchValue); if (event.code === ENTER_KEY_CODE) { + dispatch(clearEntityNumberData()); dispatch(resetReactionsData()); dispatch(getSearchData({ searchQueries: searchValues, isPerfectMatch })); openSearchDrawerIfClosed(getDefaultSearchTab(searchValues)); 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 bcd33a53cc7290ad6a7be91825a0ea8553796db1..6c2749ac2499f209219e65afb772e1063ef1f42a 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,9 @@ describe('DrugsAccordion - component', () => { }, }); - expect(screen.getByText('Small molecule targets (4)')).toBeInTheDocument(); + expect( + screen.getByText('Small molecule targets (4 of 4 found in the map)'), + ).toBeInTheDocument(); }); it('should display loading indicator while waiting for chemicals search response', () => { 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 4730eb40a26204be394a5633ff360dd83f829f6a..b4d479e500a8fae8bf0ad5419677e7b604223788 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx @@ -1,17 +1,21 @@ -import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common'; +import { SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common'; import { numberOfChemicalsSelector, loadingChemicalsStatusSelector, + chemicalsSelector, } from '@/redux/chemicals/chemicals.selectors'; import { displayChemicalsList } from '@/redux/drawer/drawer.slice'; import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; import { useAppSelector } from '@/redux/hooks/useAppSelector'; import { AccordionItem, AccordionItemHeading, AccordionItemButton } from '@/shared/Accordion'; +import { currentSelectedSearchElement } from '@/redux/drawer/drawer.selectors'; export const ChemicalsAccordion = (): JSX.Element => { const dispatch = useAppDispatch(); const chemicalsNumber = useAppSelector(numberOfChemicalsSelector); const chemicalsState = useAppSelector(loadingChemicalsStatusSelector); + const currentSearchElement = useAppSelector(currentSelectedSearchElement); + const chemicals = useAppSelector(chemicalsSelector); const isPending = chemicalsState === 'pending'; const isSucceeded = chemicalsState === 'succeeded'; @@ -21,6 +25,18 @@ export const ChemicalsAccordion = (): JSX.Element => { dispatch(displayChemicalsList()); }; + const currentChemical = chemicals.data.find( + ({ searchQueryElement }) => searchQueryElement === currentSearchElement, + ); + const list = (currentChemical?.data || []).map(chemical => + chemical.targets.filter(target => target.targetElements.length > ZERO), + ); + + let existingChemicalTargets = 0; + list.forEach(function (drugTargetList) { + existingChemicalTargets += drugTargetList.length; + }); + return ( <AccordionItem> <AccordionItemHeading> @@ -31,7 +47,7 @@ export const ChemicalsAccordion = (): JSX.Element => { > Small molecule targets {isPending && ' (Loading...)'} - {isSucceeded && ` (${chemicalsNumber})`} + {isSucceeded && ` (${existingChemicalTargets} of ${chemicalsNumber} found in the map)`} </AccordionItemButton> </AccordionItemHeading> </AccordionItem> 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 c114185cc4130ac2dd5330b4b0752269a351aaa3..d07af66340077b7cc78797a8cf86e24fd9e42b1f 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 @@ -32,7 +32,7 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St }; describe('DrugsAccordion - component', () => { - it('should display drugs number after succesfull drug search', () => { + it('should display drugs number after successfull drug search', () => { renderComponent({ drugs: { data: [ @@ -47,7 +47,7 @@ describe('DrugsAccordion - component', () => { error: { name: '', message: '' }, }, }); - expect(screen.getByText('Drug targets (4)')).toBeInTheDocument(); + expect(screen.getByText('Drug targets (4 of 4 found in the map)')).toBeInTheDocument(); }); it('should display loading indicator while waiting for drug search response', () => { 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 4dba78863a7a49917e6399a2b856bd6bde502615..289dfffe6c78bb69dffcd9d6b42c1ea7e6475750 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.tsx @@ -1,15 +1,23 @@ -import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common'; +import { SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common'; import { displayDrugsList } from '@/redux/drawer/drawer.slice'; -import { loadingDrugsStatusSelector, numberOfDrugsSelector } from '@/redux/drugs/drugs.selectors'; +import { + drugsSelector, + loadingDrugsStatusSelector, + numberOfDrugsSelector, +} from '@/redux/drugs/drugs.selectors'; import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; import { useAppSelector } from '@/redux/hooks/useAppSelector'; import { AccordionItem, AccordionItemHeading, AccordionItemButton } from '@/shared/Accordion'; +import { currentSelectedSearchElement } from '@/redux/drawer/drawer.selectors'; export const DrugsAccordion = (): JSX.Element => { const drugsNumber = useAppSelector(numberOfDrugsSelector); const drugsState = useAppSelector(loadingDrugsStatusSelector); const dispatch = useAppDispatch(); + const currentSearchElement = useAppSelector(currentSelectedSearchElement); + const drugs = useAppSelector(drugsSelector); + const isPending = drugsState === 'pending'; const isSucceeded = drugsState === 'succeeded'; const isDrugsEmpty = drugsNumber === SIZE_OF_EMPTY_ARRAY; @@ -18,6 +26,17 @@ export const DrugsAccordion = (): JSX.Element => { dispatch(displayDrugsList()); }; + const currentDrug = drugs.data.find( + ({ searchQueryElement }) => searchQueryElement === currentSearchElement, + ); + const list = (currentDrug?.data || []).map(drug => + drug.targets.filter(target => target.targetElements.length > ZERO), + ); + let existingDrugTargets = 0; + list.forEach(function (drugTargetList) { + existingDrugTargets += drugTargetList.length; + }); + return ( <AccordionItem> <AccordionItemHeading> @@ -28,7 +47,7 @@ export const DrugsAccordion = (): JSX.Element => { > Drug targets {isPending && ' (Loading...)'} - {isSucceeded && ` (${drugsNumber})`} + {isSucceeded && ` (${existingDrugTargets} of ${drugsNumber} found in the map)`} </AccordionItemButton> </AccordionItemHeading> </AccordionItem> diff --git a/src/redux/entityNumber/entityNumber.reducers.ts b/src/redux/entityNumber/entityNumber.reducers.ts index 56ce666551d9068af457ce07122f74bebea6f791..dd26edb93118860639dc4f147267c6d5343d96ad 100644 --- a/src/redux/entityNumber/entityNumber.reducers.ts +++ b/src/redux/entityNumber/entityNumber.reducers.ts @@ -14,9 +14,11 @@ export const addNumbersToEntityNumberDataReducer = ( action: AddNumbersToEntityNumberDataAction, ): void => { const { payload: ids } = action; + const uniqueIds = [...new Set(ids)]; + const lastNumber = Object.keys(state.data).length || ONE; // min num = 1 const newEntityNumber: EntityNumber = Object.fromEntries( - ids.map((id, index) => [id, lastNumber + index]), + uniqueIds.map((id, index) => [id, lastNumber + index]), ); state.data = {