Merge branch '269-reported-number-of-pins-are-wrong' into 'development'

Resolve "Reported number of pins are wrong"

Closes #269

See merge request !207

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));

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({

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx

-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>

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({

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.tsx

-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>

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 = {