feat(map): click far away from element still select this element (MIN-207)

src/components/FunctionalArea/TopBar/ClearAnchorsButton/ClearAnchorsButton.component.test.tsx

+import { AppDispatch, RootState } from '@/redux/store';
+import {
+  InitialStoreState,
+  getReduxStoreWithActionsListener,
+} from '@/utils/testing/getReduxStoreActionsListener';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import { DRAWER_INITIAL_STATE } from '@/redux/drawer/drawer.constants';
+import { ClearAnchorsButton } from './ClearAnchorsButton.component';
+
+const renderComponent = (
+  initialStore: InitialStoreState = {},
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+  const { Wrapper, store } = getReduxStoreWithActionsListener(initialStore);
+
+  return (
+    render(
+      <Wrapper>
+        <ClearAnchorsButton />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('ClearAnchorsButton - component', () => {
+  it('should trigger clear actions on clear button click and close result drawer if it is open', () => {
+    const { store } = renderComponent({
+      drawer: {
+        ...DRAWER_INITIAL_STATE,
+        drawerName: 'bio-entity',
+        isOpen: true,
+      },
+    });
+
+    const button = screen.getByTitle('Clear');
+
+    act(() => {
+      fireEvent.click(button);
+    });
+
+    const actions = store.getActions();
+
+    expect(actions).toEqual([
+      { payload: undefined, type: 'drawer/closeDrawer' },
+      { payload: undefined, type: 'contextMenu/closeContextMenu' },
+      { payload: undefined, type: 'reactions/resetReactionsData' },
+      { payload: undefined, type: 'search/clearSearchData' },
+      { payload: undefined, type: 'bioEntityContents/clearBioEntitiesData' },
+      { payload: undefined, type: 'drugs/clearDrugsData' },
+      { payload: undefined, type: 'chemicals/clearChemicalsData' },
+    ]);
+  });
+  it('should trigger clear actions on clear button click and not close result drawer if it is not open', () => {
+    const { store } = renderComponent({
+      drawer: {
+        ...DRAWER_INITIAL_STATE,
+        drawerName: 'bio-entity',
+        isOpen: false,
+      },
+    });
+
+    const button = screen.getByTitle('Clear');
+
+    act(() => {
+      fireEvent.click(button);
+    });
+
+    const actions = store.getActions();
+
+    expect(actions).toEqual([
+      { payload: undefined, type: 'contextMenu/closeContextMenu' },
+      { payload: undefined, type: 'reactions/resetReactionsData' },
+      { payload: undefined, type: 'search/clearSearchData' },
+      { payload: undefined, type: 'bioEntityContents/clearBioEntitiesData' },
+      { payload: undefined, type: 'drugs/clearDrugsData' },
+      { payload: undefined, type: 'chemicals/clearChemicalsData' },
+    ]);
+  });
+});

src/components/FunctionalArea/TopBar/ClearAnchorsButton/ClearAnchorsButton.component.tsx

+import { clearBioEntitiesData } from '@/redux/bioEntity/bioEntity.slice';
+import { clearChemicalsData } from '@/redux/chemicals/chemicals.slice';
+import { closeContextMenu } from '@/redux/contextMenu/contextMenu.slice';
+import { resultDrawerOpen } from '@/redux/drawer/drawer.selectors';
+import { closeDrawer } from '@/redux/drawer/drawer.slice';
+import { clearDrugsData } from '@/redux/drugs/drugs.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { resetReactionsData } from '@/redux/reactions/reactions.slice';
+import { clearSearchData } from '@/redux/search/search.slice';
+import { Button } from '@/shared/Button';
+import { Icon } from '@/shared/Icon';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+export const ClearAnchorsButton = (): React.ReactNode => {
+  const dispatch = useAppDispatch();
+  const isResultDrawerOpen = useSelector(resultDrawerOpen);
+
+  const closeInterfaceElements = (): void => {
+    if (isResultDrawerOpen) {
+      dispatch(closeDrawer());
+    }
+    dispatch(closeContextMenu());
+  };
+
+  const resetData = (): void => {
+    // Reset reactions list to prevent keeping the old selected reaction rendered
+    dispatch(resetReactionsData());
+
+    // Reset search data to prevent invalid filtering of the click-search ()
+    dispatch(clearSearchData());
+
+    // Reset old pins data
+    dispatch(clearBioEntitiesData());
+    dispatch(clearDrugsData());
+    dispatch(clearChemicalsData());
+  };
+
+  const onClearAnchorsClick = (): void => {
+    closeInterfaceElements();
+    resetData();
+  };
+
+  return (
+    <Button
+      className="ml-2 hover:bg-transparent active:bg-transparent"
+      onClick={onClearAnchorsClick}
+      title="Clear"
+      variantStyles="quiet"
+    >
+      <Icon name="clear" />
+    </Button>
+  );
+};

src/components/FunctionalArea/TopBar/ClearAnchorsButton/index.ts

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

src/components/FunctionalArea/TopBar/TopBar.component.tsx

@@ -3,6 +3,7 @@ import { UserAvatar } from '@/components/FunctionalArea/TopBar/UserAvatar';
 import { openOverlaysDrawer, openSubmapsDrawer } from '@/redux/drawer/drawer.slice';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { Button } from '@/shared/Button';
+import { ClearAnchorsButton } from './ClearAnchorsButton';
 
 export const TopBar = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -20,11 +21,12 @@ export const TopBar = (): JSX.Element => {
       <div className="flex flex-row items-center">
         <UserAvatar />
         <SearchBar />
+        <ClearAnchorsButton />
         <Button
           icon="plus"
           isIcon
           isFrontIcon
-          className="ml-8 mr-4"
+          className="ml-5 mr-4"
           onClick={onSubmapsClick}
           title="Submaps"
         >

src/components/Map/MapViewer/utils/listeners/mapRightClick/onMapRightClick.ts

@@ -14,7 +14,7 @@ export const onMapRightClick =
     dispatch(handleDataReset);
     dispatch(openContextMenu(pixel));
 
-    const searchResults = await getSearchResults({ coordinate, mapSize, modelId });
+    const { searchResults } = await getSearchResults({ coordinate, mapSize, modelId });
     if (!searchResults || searchResults.length === SIZE_OF_EMPTY_ARRAY) {
       return;
     }

src/components/Map/MapViewer/utils/listeners/mapSingleClick/findClosestBioEntityPoint.test.ts

+/* eslint-disable no-magic-numbers */
+import { bioEntityContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { findClosestBioEntityPoint } from './findClosestBioEntityPoint';
+
+describe('findClosestBioEntityPoint', () => {
+  const bioEntityContents = [
+    {
+      ...bioEntityContentFixture,
+      bioEntity: { ...bioEntityContentFixture.bioEntity, x: 10, y: 10, width: 20, height: 20 },
+    },
+    {
+      ...bioEntityContentFixture,
+      bioEntity: { ...bioEntityContentFixture.bioEntity, x: 50, y: 50, width: 30, height: 30 },
+    },
+  ];
+
+  const validPoint = { x: 15, y: 15 };
+  const invalidPoint = {
+    x: 500,
+    y: 300,
+  };
+
+  const searchDistance = '10';
+  const maxZoom = 5;
+  const zoom = 2;
+
+  it('should return the closest bioEntity within the search distance', () => {
+    const result = findClosestBioEntityPoint(
+      bioEntityContents,
+      searchDistance,
+      maxZoom,
+      zoom,
+      validPoint,
+    );
+    expect(result).toEqual(bioEntityContents[0]);
+  });
+
+  it('should return undefined if no matching bioEntity is found within the search distance', () => {
+    const result = findClosestBioEntityPoint(
+      bioEntityContents,
+      searchDistance,
+      maxZoom,
+      zoom,
+      invalidPoint,
+    );
+    expect(result).toBeUndefined();
+  });
+});

src/components/Map/MapViewer/utils/listeners/mapSingleClick/findClosestBioEntityPoint.ts

+import { Point as PointType } from '@/types/map';
+import { BioEntityContent } from '@/types/models';
+import { getMaxClickDistance } from './getMaxClickDistance';
+
+export const findClosestBioEntityPoint = (
+  bioEntityContents: BioEntityContent[],
+  searchDistance: string,
+  maxZoom: number,
+  zoom: number,
+  point: PointType,
+): BioEntityContent | undefined => {
+  const maxDistance = getMaxClickDistance(maxZoom, zoom, searchDistance);
+
+  const matchingBioEntityFound = bioEntityContents.find(bio => {
+    const { x, y, width, height } = bio.bioEntity;
+
+    const minX = x - maxDistance;
+    const maxX = x + width + maxDistance;
+    const minY = y - maxDistance;
+    const maxY = y + height + maxDistance;
+
+    const withinXRange = point.x >= minX && point.x <= maxX;
+    const withinYRange = point.y >= minY && point.y <= maxY;
+
+    return withinXRange && withinYRange;
+  });
+
+  return matchingBioEntityFound;
+};

src/components/Map/MapViewer/utils/listeners/mapSingleClick/findClosestReactionPoint.test.ts

+/* eslint-disable no-magic-numbers */
+import { reactionsFixture } from '@/models/fixtures/reactionFixture';
+import { findClosestReactionPoint } from './findClosestReactionPoint';
+
+describe('findClosestReactionPoint', () => {
+  const reaction = {
+    ...reactionsFixture[0],
+    lines: [{ start: { x: 0, y: 0 }, end: { x: 3, y: 4 }, type: 'START' }],
+  };
+
+  const validPoint = { x: 1, y: 1 };
+  const invalidPoint = {
+    x: 1115,
+    y: 2225,
+  };
+  const searchDistance = '10';
+  const maxZoom = 10;
+  const zoom = 5;
+
+  it('should return the matching line segment if a point within the search distance is found', () => {
+    const result = findClosestReactionPoint({
+      reaction,
+      searchDistance,
+      maxZoom,
+      zoom,
+      point: validPoint,
+    });
+
+    expect(result).toEqual(reaction.lines[0]);
+  });
+
+  it('should return undefined if no point within the search distance is found', () => {
+    const result = findClosestReactionPoint({
+      reaction,
+      searchDistance,
+      maxZoom,
+      zoom,
+      point: invalidPoint,
+    });
+
+    expect(result).toBeUndefined();
+  });
+});

src/components/Map/MapViewer/utils/listeners/mapSingleClick/findClosestReactionPoint.ts

+/* eslint-disable no-magic-numbers */
+import { Point as PointType } from '@/types/map';
+import { Reaction } from '@/types/models';
+import { distance } from 'ol/coordinate';
+import { LineString, Point } from 'ol/geom';
+import { getMaxClickDistance } from './getMaxClickDistance';
+
+type ReactionLine = Reaction['lines'][0];
+
+type FindClosestReactionArgs = {
+  reaction: Reaction;
+  searchDistance: string;
+  maxZoom: number;
+  zoom: number;
+  point: PointType;
+};
+
+export const findClosestReactionPoint = ({
+  reaction,
+  searchDistance,
+  maxZoom,
+  zoom,
+  point,
+}: FindClosestReactionArgs): ReactionLine | undefined => {
+  const maxDistance = getMaxClickDistance(maxZoom, zoom, searchDistance);
+
+  const clickedPoint = new Point([point.x, point.y]);
+
+  const closestLine = reaction.lines.find(line => {
+    const lineString = new LineString([
+      [line.start.x, line.start.y],
+      [line.end.x, line.end.y],
+    ]);
+
+    const closestPointOnLine = lineString.getClosestPoint(clickedPoint.getCoordinates());
+    const distanceToLine = distance(closestPointOnLine, clickedPoint.getCoordinates());
+
+    return distanceToLine <= maxDistance;
+  });
+
+  return closestLine;
+};

src/components/Map/MapViewer/utils/listeners/mapSingleClick/getMaxClickDistance.test.ts

+/* eslint-disable no-magic-numbers */
+import { getMaxClickDistance } from './getMaxClickDistance';
+
+describe('getMaxClickDistance', () => {
+  it.each([
+    [10, 5, '10', 320],
+    [10, 5, '20', 640],
+    [10, 2, '10', 2560],
+    [10, 3, '18', 2304],
+  ])(
+    'should calculate the maximum click distance correctly',
+    (maxZoom, zoom, searchDistance, expected) => {
+      expect(getMaxClickDistance(maxZoom, zoom, searchDistance)).toBe(expected);
+    },
+  );
+
+  it.each([['invalid'], [''], [' ']])(
+    'should throw an error if the search distance "%s" is not a valid number',
+    invalidDistance => {
+      expect(() => getMaxClickDistance(10, 5, invalidDistance)).toThrow(
+        'Invalid search distance. Please provide a valid number.',
+      );
+    },
+  );
+});

src/components/Map/MapViewer/utils/listeners/mapSingleClick/getMaxClickDistance.ts

+/* eslint-disable no-magic-numbers */
+
+import { ZOOM_FACTOR } from '@/constants/common';
+
+export const getMaxClickDistance = (
+  maxZoom: number,
+  zoom: number,
+  searchDistance: string,
+): number => {
+  const distance = parseFloat(searchDistance);
+
+  if (typeof distance !== 'number' || Number.isNaN(distance)) {
+    throw new Error('Invalid search distance. Please provide a valid number.');
+  }
+
+  const zoomDiff = maxZoom - zoom;
+  const maxDistance = distance * ZOOM_FACTOR ** zoomDiff;
+
+  return maxDistance;
+};

src/components/Map/MapViewer/utils/listeners/mapSingleClick/getSearchResults.test.ts

@@ -36,7 +36,10 @@ describe('getSearchResults - util', () => {
         modelId,
       });
 
-      expect(result).toEqual([ELEMENT_SEARCH_RESULT_MOCK_ALIAS]);
+      expect(result).toEqual({
+        point,
+        searchResults: [ELEMENT_SEARCH_RESULT_MOCK_ALIAS],
+      });
     });
   });
 
@@ -65,7 +68,10 @@ describe('getSearchResults - util', () => {
         modelId,
       });
 
-      expect(result).toEqual([ELEMENT_SEARCH_RESULT_MOCK_REACTION]);
+      expect(result).toEqual({
+        point,
+        searchResults: [ELEMENT_SEARCH_RESULT_MOCK_REACTION],
+      });
     });
   });
 
@@ -96,7 +102,10 @@ describe('getSearchResults - util', () => {
         modelId,
       });
 
-      expect(result).toEqual(undefined);
+      expect(result).toEqual({
+        point,
+        searchResults: undefined,
+      });
     });
   });
 });

src/components/Map/MapViewer/utils/listeners/mapSingleClick/getSearchResults.ts

 import { MapSize } from '@/redux/map/map.types';
+import { Point } from '@/types/map';
 import { ElementSearchResult } from '@/types/models';
 import { latLngToPoint } from '@/utils/map/latLngToPoint';
 import { getElementsByPoint } from '@/utils/search/getElementsByCoordinates';
@@ -15,8 +16,16 @@ export const getSearchResults = async ({
   coordinate,
   mapSize,
   modelId,
-}: GetSearchResultsInput): Promise<ElementSearchResult[] | undefined> => {
+}: GetSearchResultsInput): Promise<{
+  searchResults: ElementSearchResult[] | undefined;
+  point: Point;
+}> => {
   const [lng, lat] = toLonLat(coordinate);
   const point = latLngToPoint([lat, lng], mapSize);
-  return getElementsByPoint({ point, currentModelId: modelId });
+  const searchResults = await getElementsByPoint({ point, currentModelId: modelId });
+
+  return {
+    searchResults,
+    point,
+  };
 };

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts

-import {
-  FIRST_ARRAY_ELEMENT,
-  SECOND_ARRAY_ELEMENT,
-  SIZE_OF_EMPTY_ARRAY,
-  THIRD_ARRAY_ELEMENT,
-} from '@/constants/common';
+/* eslint-disable no-magic-numbers */
+import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
 import { bioEntityResponseFixture } from '@/models/fixtures/bioEntityContentsFixture';
 import { ELEMENT_SEARCH_RESULT_MOCK_ALIAS } from '@/models/mocks/elementSearchResultMock';
 import { apiPath } from '@/redux/apiPath';
-import { mockNetworkResponse } from '@/utils/mockNetworkResponse';
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
 import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
 import { waitFor } from '@testing-library/react';
 import { HttpStatusCode } from 'axios';
+import { searchFitBounds } from '@/services/pluginsManager/map/triggerSearch/searchFitBounds';
 import { handleAliasResults } from './handleAliasResults';
 
-const mockedAxiosOldClient = mockNetworkResponse();
+jest.mock('../../../../../../services/pluginsManager/map/triggerSearch/searchFitBounds');
+
+const mockedAxiosClient = mockNetworkNewAPIResponse();
+
+const SEARCH_CONFIG_MOCK = {
+  point: {
+    x: 500,
+    y: 700,
+  },
+  maxZoom: 9,
+  zoom: 5,
+  isResultDrawerOpen: false,
+};
 
 describe('handleAliasResults - util', () => {
-  const { store } = getReduxStoreWithActionsListener();
-  const { dispatch } = store;
-
-  mockedAxiosOldClient
-    .onGet(
-      apiPath.getBioEntityContentsStringWithQuery({
-        searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
-        isPerfectMatch: true,
-      }),
-    )
-    .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
-
-  beforeAll(async () => {
-    handleAliasResults(
-      dispatch,
-      ELEMENT_SEARCH_RESULT_MOCK_ALIAS,
-    )(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
+  describe('when matching bioEntity not found', () => {
+    it('should clear bio entities and do not close drawer if result drawer is not open', async () => {
+      mockedAxiosClient
+        .onGet(
+          apiPath.getBioEntityContentsStringWithQuery({
+            searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+            isPerfectMatch: true,
+          }),
+        )
+        .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+      const { store } = getReduxStoreWithActionsListener();
+      const { dispatch } = store;
+
+      await handleAliasResults(dispatch, ELEMENT_SEARCH_RESULT_MOCK_ALIAS, {
+        ...SEARCH_CONFIG_MOCK,
+        searchDistance: '10',
+      })(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
+
+      await waitFor(() => {
+        const actions = store.getActions();
+        expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+
+        const actionTypes = actions.map(action => action.type);
+
+        expect(actionTypes).toEqual([
+          'project/getMultiBioEntity/pending',
+          'project/getBioEntityContents/pending',
+          'project/getBioEntityContents/fulfilled',
+          'entityNumber/addNumbersToEntityNumberData',
+          'project/getMultiBioEntity/fulfilled',
+          'bioEntityContents/clearBioEntitiesData',
+        ]);
+      });
+    });
+    it('should clear bio entities and close drawer if result drawer is already open', async () => {
+      mockedAxiosClient
+        .onGet(
+          apiPath.getBioEntityContentsStringWithQuery({
+            searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+            isPerfectMatch: true,
+          }),
+        )
+        .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+      const { store } = getReduxStoreWithActionsListener();
+      const { dispatch } = store;
+
+      await handleAliasResults(dispatch, ELEMENT_SEARCH_RESULT_MOCK_ALIAS, {
+        ...SEARCH_CONFIG_MOCK,
+        searchDistance: '10',
+        isResultDrawerOpen: true,
+      })(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
+
+      await waitFor(() => {
+        const actions = store.getActions();
+        expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
 
-  it('should run selectTab as first action', async () => {
-    await waitFor(() => {
-      const actions = store.getActions();
-      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-      expect(actions[FIRST_ARRAY_ELEMENT].type).toEqual('drawer/selectTab');
+        const actionTypes = actions.map(action => action.type);
+
+        expect(actionTypes).toEqual([
+          'project/getMultiBioEntity/pending',
+          'project/getBioEntityContents/pending',
+          'project/getBioEntityContents/fulfilled',
+          'entityNumber/addNumbersToEntityNumberData',
+          'project/getMultiBioEntity/fulfilled',
+          'drawer/closeDrawer',
+          'bioEntityContents/clearBioEntitiesData',
+        ]);
+      });
     });
   });
+  describe('when matching bioEntity found', () => {
+    it('should select tab and open bio entity drawer', async () => {
+      mockedAxiosClient
+        .onGet(
+          apiPath.getBioEntityContentsStringWithQuery({
+            searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+            isPerfectMatch: true,
+          }),
+        )
+        .reply(HttpStatusCode.Ok, {
+          ...bioEntityResponseFixture,
+          content: [
+            {
+              ...bioEntityResponseFixture.content[0],
+              bioEntity: {
+                ...bioEntityResponseFixture.content[0].bioEntity,
+                x: 500,
+                y: 700,
+                width: 50,
+                height: 50,
+              },
+            },
+          ],
+        });
+      const { store } = getReduxStoreWithActionsListener();
+      const { dispatch } = store;
+
+      await handleAliasResults(
+        dispatch,
+        ELEMENT_SEARCH_RESULT_MOCK_ALIAS,
+        SEARCH_CONFIG_MOCK,
+      )(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
+
+      await waitFor(() => {
+        const actions = store.getActions();
+        expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
 
-  it('should run openBioEntityDrawerById as second action', async () => {
-    await waitFor(() => {
-      const actions = store.getActions();
-      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-      expect(actions[SECOND_ARRAY_ELEMENT].type).toEqual('drawer/openBioEntityDrawerById');
+        const actionTypes = actions.map(action => action.type);
+
+        expect(actionTypes).toEqual([
+          'project/getMultiBioEntity/pending',
+          'project/getBioEntityContents/pending',
+          'project/getBioEntityContents/fulfilled',
+          'entityNumber/addNumbersToEntityNumberData',
+          'project/getMultiBioEntity/fulfilled',
+          'drawer/selectTab',
+          'drawer/openBioEntityDrawerById',
+        ]);
+      });
     });
   });
 
-  it('should run getMultiBioEntity as third action', async () => {
-    await waitFor(() => {
-      const actions = store.getActions();
-      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-      expect(actions[THIRD_ARRAY_ELEMENT].type).toEqual('project/getMultiBioEntity/pending');
+  describe('when searchDistance is not provided', () => {
+    it('should select tab and open drawer without clearing bio entities', async () => {
+      mockedAxiosClient
+        .onGet(
+          apiPath.getBioEntityContentsStringWithQuery({
+            searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+            isPerfectMatch: true,
+          }),
+        )
+        .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+      const { store } = getReduxStoreWithActionsListener();
+      const { dispatch } = store;
+
+      await handleAliasResults(dispatch, ELEMENT_SEARCH_RESULT_MOCK_ALIAS, {
+        ...SEARCH_CONFIG_MOCK,
+        isResultDrawerOpen: true,
+      })(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
+
+      await waitFor(() => {
+        const actions = store.getActions();
+        expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+
+        const actionTypes = actions.map(action => action.type);
+
+        expect(actionTypes).toEqual([
+          'project/getMultiBioEntity/pending',
+          'project/getBioEntityContents/pending',
+          'project/getBioEntityContents/fulfilled',
+          'entityNumber/addNumbersToEntityNumberData',
+          'project/getMultiBioEntity/fulfilled',
+          'drawer/selectTab',
+          'drawer/openBioEntityDrawerById',
+        ]);
+      });
+    });
+
+    describe('fitBounds after search', () => {
+      it('should fit bounds after search when hasFitBounds is true', async () => {
+        mockedAxiosClient
+          .onGet(
+            apiPath.getBioEntityContentsStringWithQuery({
+              searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+              isPerfectMatch: true,
+            }),
+          )
+          .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+        const { store } = getReduxStoreWithActionsListener();
+        const { dispatch } = store;
+
+        await handleAliasResults(dispatch, ELEMENT_SEARCH_RESULT_MOCK_ALIAS, {
+          ...SEARCH_CONFIG_MOCK,
+          hasFitBounds: true,
+        })(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
+
+        await waitFor(() => {
+          expect(searchFitBounds).toHaveBeenCalled();
+        });
+      });
+
+      it('should not fit bounds after search when hasFitBounds is false', async () => {
+        mockedAxiosClient
+          .onGet(
+            apiPath.getBioEntityContentsStringWithQuery({
+              searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+              isPerfectMatch: true,
+            }),
+          )
+          .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+        const { store } = getReduxStoreWithActionsListener();
+        const { dispatch } = store;
+
+        await handleAliasResults(dispatch, ELEMENT_SEARCH_RESULT_MOCK_ALIAS, {
+          ...SEARCH_CONFIG_MOCK,
+          hasFitBounds: false,
+        })(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
+
+        await waitFor(() => {
+          expect(searchFitBounds).not.toHaveBeenCalled();
+        });
+      });
     });
   });
 });

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.ts

 import { getMultiBioEntity } from '@/redux/bioEntity/bioEntity.thunks';
-import { openBioEntityDrawerById, selectTab } from '@/redux/drawer/drawer.slice';
+import { closeDrawer, openBioEntityDrawerById, selectTab } from '@/redux/drawer/drawer.slice';
 import { AppDispatch } from '@/redux/store';
 import { searchFitBounds } from '@/services/pluginsManager/map/triggerSearch/searchFitBounds';
 import { ElementSearchResult } from '@/types/models';
 import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
+import { clearBioEntitiesData } from '@/redux/bioEntity/bioEntity.slice';
+import { Point } from '@/types/map';
+import { findClosestBioEntityPoint } from './findClosestBioEntityPoint';
 
+type SearchConfig = {
+  point: Point;
+  searchDistance?: string;
+  maxZoom: number;
+  zoom: number;
+  hasFitBounds?: boolean;
+  isResultDrawerOpen?: boolean;
+};
 /* prettier-ignore */
 export const handleAliasResults =
-  (dispatch: AppDispatch, closestSearchResult: ElementSearchResult, hasFitBounds?: boolean, fitBoundsZoom?: number) =>
+  (dispatch: AppDispatch, closestSearchResult: ElementSearchResult, { hasFitBounds, maxZoom, point, searchDistance, zoom, isResultDrawerOpen }: SearchConfig) =>
     async ({ id }: ElementSearchResult): Promise<void> => {
-
-      dispatch(selectTab(`${id}`));
-      dispatch(openBioEntityDrawerById(id));
-      dispatch(
+      const bioEntityContents = await dispatch(
         getMultiBioEntity({
           searchQueries: [id.toString()],
           isPerfectMatch: true
         }),
-      )
-        .unwrap().then((bioEntityContents) => {
+      ).unwrap();
 
-          PluginsEventBus.dispatchEvent('onSearch', {
-            type: 'bioEntity',
-            searchValues: [closestSearchResult],
-            results: [bioEntityContents],
-          });
+      if (searchDistance) {
 
-          if (hasFitBounds) {
-            searchFitBounds(fitBoundsZoom);
+        const matchingBioEntityFound = findClosestBioEntityPoint(bioEntityContents, searchDistance, maxZoom, zoom, point);
+
+        if (!matchingBioEntityFound) {
+          if (isResultDrawerOpen) {
+            dispatch(closeDrawer());
           }
-        });
+
+          dispatch(clearBioEntitiesData());
+          return;
+        }
+      }
+
+      dispatch(selectTab(`${id}`));
+      dispatch(openBioEntityDrawerById(id));
+
+
+      PluginsEventBus.dispatchEvent('onSearch', {
+        type: 'bioEntity',
+        searchValues: [closestSearchResult],
+        results: [bioEntityContents],
+      });
+
+      if (hasFitBounds) {
+        searchFitBounds();
+      }
     };

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.test.ts

@@ -12,89 +12,258 @@ import { mockNetworkNewAPIResponse, mockNetworkResponse } from '@/utils/mockNetw
 import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
 import { HttpStatusCode } from 'axios';
 import { handleReactionResults } from './handleReactionResults';
+import * as findClosestReactionPoint from './findClosestReactionPoint';
 
 const mockedAxiosOldClient = mockNetworkResponse();
 const mockedAxiosNewClient = mockNetworkNewAPIResponse();
 
+jest.mock('./findClosestReactionPoint', () => ({
+  __esModule: true,
+  ...jest.requireActual('./findClosestReactionPoint'),
+}));
+
+const findClosestReactionPointSpy = jest.spyOn(
+  findClosestReactionPoint,
+  'findClosestReactionPoint',
+);
+
+const SEARCH_CONFIG_MOCK = {
+  point: {
+    x: 200,
+    y: 3012,
+  },
+  maxZoom: 9,
+  zoom: 3,
+  isResultDrawerOpen: false,
+};
+
 describe('handleReactionResults - util', () => {
-  const { store } = getReduxStoreWithActionsListener({
-    ...INITIAL_STORE_STATE_MOCK,
-  });
-  const { dispatch } = store;
-
-  mockedAxiosNewClient
-    .onGet(
-      apiPath.getBioEntityContentsStringWithQuery({
-        searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
-        isPerfectMatch: true,
-      }),
-    )
-    .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
-
-  mockedAxiosOldClient
-    .onGet(apiPath.getReactionsWithIds([ELEMENT_SEARCH_RESULT_MOCK_REACTION.id]))
-    .reply(HttpStatusCode.Ok, [
-      {
-        ...reactionsFixture[0],
-        reactants: [],
-        products: [],
-        modifiers: [
-          {
-            ...reactionsFixture[0].modifiers[0],
-            aliasId: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id,
-          },
-        ],
-      },
-    ]);
-
-  beforeEach(async () => {
-    await handleReactionResults(
-      dispatch,
-      ELEMENT_SEARCH_RESULT_MOCK_REACTION,
-    )(ELEMENT_SEARCH_RESULT_MOCK_REACTION);
-  });
+  const searchDistance = '10';
 
-  it('should run getReactionsByIds as first action', () => {
-    const actions = store.getActions();
-    expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-    expect(actions[0].type).toEqual('reactions/getByIds/pending');
-    expect(actions[1].type).toEqual('reactions/getByIds/fulfilled');
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
-  it('should run openReactionDrawerById to empty array as third action', () => {
-    const actions = store.getActions();
-    expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-    expect(actions[2].type).toEqual('drawer/openReactionDrawerById');
-    expect(actions[2].payload).toEqual(reactionsFixture[FIRST_ARRAY_ELEMENT].id);
-  });
+  describe('actions', () => {
+    const { store } = getReduxStoreWithActionsListener({
+      ...INITIAL_STORE_STATE_MOCK,
+    });
+    const { dispatch } = store;
 
-  it('should run select tab as fourth action', () => {
-    const actions = store.getActions();
-    expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-    expect(actions[3].type).toEqual('drawer/selectTab');
-  });
+    mockedAxiosNewClient
+      .onGet(
+        apiPath.getBioEntityContentsStringWithQuery({
+          searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+          isPerfectMatch: true,
+        }),
+      )
+      .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+
+    mockedAxiosOldClient
+      .onGet(apiPath.getReactionsWithIds([ELEMENT_SEARCH_RESULT_MOCK_REACTION.id]))
+      .reply(HttpStatusCode.Ok, [
+        {
+          ...reactionsFixture[0],
+          reactants: [],
+          products: [],
+          modifiers: [
+            {
+              ...reactionsFixture[0].modifiers[0],
+              aliasId: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id,
+            },
+          ],
+        },
+      ]);
 
-  it('should run getMultiBioEntity to empty array as fifth action', () => {
-    const actions = store.getActions();
-    expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-    expect(actions[4].type).toEqual('project/getMultiBioEntity/pending');
+    beforeEach(async () => {
+      await handleReactionResults(
+        dispatch,
+        ELEMENT_SEARCH_RESULT_MOCK_REACTION,
+      )(ELEMENT_SEARCH_RESULT_MOCK_REACTION);
+    });
+
+    it('should run getReactionsByIds as first action', () => {
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+      expect(actions[0].type).toEqual('reactions/getByIds/pending');
+      expect(actions[1].type).toEqual('reactions/getByIds/fulfilled');
+    });
+
+    it('should run openReactionDrawerById to empty array as third action', () => {
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+      expect(actions[2].type).toEqual('drawer/openReactionDrawerById');
+      expect(actions[2].payload).toEqual(reactionsFixture[FIRST_ARRAY_ELEMENT].id);
+    });
+
+    it('should run select tab as fourth action', () => {
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+      expect(actions[3].type).toEqual('drawer/selectTab');
+    });
+
+    it('should run getMultiBioEntity to empty array as fifth action', () => {
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+      expect(actions[4].type).toEqual('project/getMultiBioEntity/pending');
+    });
+
+    it('should run getBioEntityContents as sixth action', () => {
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+      expect(actions[5].type).toEqual('project/getBioEntityContents/pending');
+    });
+
+    it('should run getBioEntityContents fullfilled as seventh action', () => {
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+      expect(actions[6].type).toEqual('project/getBioEntityContents/fulfilled');
+    });
+
+    it('should run addNumbersToEntityNumberData as eighth action', () => {
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+      expect(actions[7].type).toEqual('entityNumber/addNumbersToEntityNumberData');
+    });
   });
+  describe('when search config provided but search distance is not provided', () => {
+    const { store } = getReduxStoreWithActionsListener();
+    const { dispatch } = store;
+
+    it('should not find closest reaction', async () => {
+      await handleReactionResults(
+        dispatch,
+        ELEMENT_SEARCH_RESULT_MOCK_REACTION,
+        SEARCH_CONFIG_MOCK,
+      )(ELEMENT_SEARCH_RESULT_MOCK_REACTION);
 
-  it('should run getBioEntityContents as sixth action', () => {
-    const actions = store.getActions();
-    expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-    expect(actions[5].type).toEqual('project/getBioEntityContents/pending');
+      expect(findClosestReactionPointSpy).not.toHaveBeenCalled();
+    });
   });
 
-  it('should run getBioEntityContents fullfilled as seventh action', () => {
-    const actions = store.getActions();
-    expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-    expect(actions[6].type).toEqual('project/getBioEntityContents/fulfilled');
+  describe('when search config provided and matching reaction not found', () => {
+    mockedAxiosNewClient
+      .onGet(
+        apiPath.getBioEntityContentsStringWithQuery({
+          searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+          isPerfectMatch: true,
+        }),
+      )
+      .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+
+    mockedAxiosOldClient
+      .onGet(apiPath.getReactionsWithIds([ELEMENT_SEARCH_RESULT_MOCK_REACTION.id]))
+      .reply(HttpStatusCode.Ok, [
+        {
+          ...reactionsFixture[0],
+          reactants: [],
+          products: [],
+          modifiers: [
+            {
+              ...reactionsFixture[0].modifiers[0],
+              aliasId: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id,
+            },
+          ],
+        },
+      ]);
+
+    const invalidPoint = {
+      x: 991,
+      y: 612,
+    };
+    it('should close drawer and reset data if result drawer open', async () => {
+      const { store } = getReduxStoreWithActionsListener();
+
+      await handleReactionResults(store.dispatch, ELEMENT_SEARCH_RESULT_MOCK_REACTION, {
+        ...SEARCH_CONFIG_MOCK,
+        searchDistance,
+        point: invalidPoint,
+        isResultDrawerOpen: true,
+      })(ELEMENT_SEARCH_RESULT_MOCK_REACTION);
+
+      const actions = store.getActions();
+      const acionTypes = actions.map(action => action.type);
+
+      expect(acionTypes).toStrictEqual([
+        'reactions/getByIds/pending',
+        'reactions/getByIds/fulfilled',
+        'drawer/closeDrawer',
+        'reactions/resetReactionsData',
+        'bioEntityContents/clearBioEntitiesData',
+      ]);
+    });
+
+    it('should only reset data if result drawer is closed', async () => {
+      const { store } = getReduxStoreWithActionsListener();
+
+      const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+      await handleReactionResults(store.dispatch, ELEMENT_SEARCH_RESULT_MOCK_REACTION, {
+        ...SEARCH_CONFIG_MOCK,
+        searchDistance,
+        point: invalidPoint,
+        isResultDrawerOpen: false,
+      })(ELEMENT_SEARCH_RESULT_MOCK_REACTION);
+
+      expect(dispatchSpy).toHaveBeenCalledWith({
+        payload: undefined,
+        type: 'reactions/resetReactionsData',
+      });
+
+      expect(dispatchSpy).toHaveBeenCalledWith({
+        payload: undefined,
+        type: 'bioEntityContents/clearBioEntitiesData',
+      });
+    });
   });
+  describe('when search config provided and matching reaction found', () => {
+    const reaction = {
+      ...reactionsFixture[0],
+      products: [],
+      reactants: [],
+      modifiers: [],
+      lines: [{ start: { x: 0, y: 0 }, end: { x: 3, y: 4 }, type: 'START' }],
+    };
+
+    const point = { x: 1, y: 1 };
+    const maxZoom = 10;
+    const zoom = 5;
+
+    it('should open reaction drawer and fetch bio entities', async () => {
+      const { store } = getReduxStoreWithActionsListener();
+      mockedAxiosNewClient
+        .onGet(
+          apiPath.getBioEntityContentsStringWithQuery({
+            searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+            isPerfectMatch: true,
+          }),
+        )
+        .reply(HttpStatusCode.Ok, []);
+
+      mockedAxiosOldClient
+        .onGet(apiPath.getReactionsWithIds([ELEMENT_SEARCH_RESULT_MOCK_REACTION.id]))
+        .reply(HttpStatusCode.Ok, [reaction]);
+
+      await handleReactionResults(store.dispatch, ELEMENT_SEARCH_RESULT_MOCK_REACTION, {
+        searchDistance,
+        maxZoom,
+        zoom,
+        point,
+        isResultDrawerOpen: false,
+      })(ELEMENT_SEARCH_RESULT_MOCK_REACTION);
+
+      const actions = store.getActions();
+      const acionTypes = actions.map(action => action.type);
 
-  it('should run addNumbersToEntityNumberData as eighth action', () => {
-    const actions = store.getActions();
-    expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
-    expect(actions[7].type).toEqual('entityNumber/addNumbersToEntityNumberData');
+      expect(acionTypes).toStrictEqual([
+        'reactions/getByIds/pending',
+        'reactions/getByIds/fulfilled',
+        'drawer/openReactionDrawerById',
+        'drawer/selectTab',
+        'project/getMultiBioEntity/pending',
+        'entityNumber/addNumbersToEntityNumberData',
+        'project/getMultiBioEntity/fulfilled',
+      ]);
+    });
   });
 });

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.ts

@@ -3,14 +3,26 @@ import { getMultiBioEntity } from '@/redux/bioEntity/bioEntity.thunks';
 import { openReactionDrawerById, selectTab } from '@/redux/drawer/drawer.slice';
 import { getReactionsByIds } from '@/redux/reactions/reactions.thunks';
 import { AppDispatch } from '@/redux/store';
-import { searchFitBounds } from '@/services/pluginsManager/map/triggerSearch/searchFitBounds';
-import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
 import { ElementSearchResult, Reaction } from '@/types/models';
 import { PayloadAction } from '@reduxjs/toolkit';
+import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
+import { Point } from '@/types/map';
+import { searchFitBounds } from '@/services/pluginsManager/map/triggerSearch/searchFitBounds';
+import { findClosestReactionPoint } from './findClosestReactionPoint';
+import { handleReactionSearchClickFailure } from './handleReactionSearchClickFailure';
+
+type SearchConfig = {
+  point: Point;
+  searchDistance?: string;
+  maxZoom: number;
+  zoom: number;
+  hasFitBounds?: boolean;
+  isResultDrawerOpen: boolean;
+};
 
 /* prettier-ignore */
 export const handleReactionResults =
-  (dispatch: AppDispatch, closestSearchResult: ElementSearchResult, hasFitBounds?: boolean, fitBoundsZoom?: number) =>
+  (dispatch: AppDispatch, closestSearchResult: ElementSearchResult, searchConfig?: SearchConfig) =>
     async ({ id }: ElementSearchResult): Promise<void> => {
       const data = await dispatch(getReactionsByIds([id])) as PayloadAction<Reaction[] | undefined>;
       const payload = data?.payload;
@@ -19,6 +31,20 @@ export const handleReactionResults =
       }
 
       const reaction = payload[FIRST_ARRAY_ELEMENT];
+
+      if (searchConfig && searchConfig.searchDistance) {
+        const { maxZoom, point, searchDistance, zoom, isResultDrawerOpen } = searchConfig;
+        const matchingReactionFound = findClosestReactionPoint({
+          reaction, searchDistance, maxZoom, zoom, point
+        });
+
+        if (!matchingReactionFound) {
+          handleReactionSearchClickFailure(dispatch, isResultDrawerOpen);
+
+          return;
+        }
+      }
+
       const { products, reactants, modifiers } = reaction;
       const productsIds = products.map(p => p.aliasId);
       const reactantsIds = reactants.map(r => r.aliasId);
@@ -26,6 +52,7 @@ export const handleReactionResults =
       const bioEntitiesIds = [...productsIds, ...reactantsIds, ...modifiersIds].map(identifier => String(identifier));
 
       dispatch(openReactionDrawerById(reaction.id));
+
       dispatch(selectTab(''));
       await dispatch(
         getMultiBioEntity({
@@ -39,8 +66,9 @@ export const handleReactionResults =
           results: [bioEntityContents],
         });
 
-        if (hasFitBounds) {
-          searchFitBounds(fitBoundsZoom);
+        if (searchConfig && searchConfig.hasFitBounds) {
+          searchFitBounds();
         }
       });
+
     };

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionSearchClickFailure.ts

+import { AppDispatch } from '@/redux/store';
+import { closeDrawer } from '@/redux/drawer/drawer.slice';
+import { resetReactionsData } from '@/redux/reactions/reactions.slice';
+import { clearBioEntitiesData } from '@/redux/bioEntity/bioEntity.slice';
+
+export const handleReactionSearchClickFailure = (
+  dispatch: AppDispatch,
+  isResultDrawerOpen: boolean,
+): void => {
+  if (isResultDrawerOpen) {
+    dispatch(closeDrawer());
+  }
+  dispatch(resetReactionsData());
+  dispatch(clearBioEntitiesData());
+};

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleSearchResultAction.test.ts

@@ -19,6 +19,13 @@ jest.mock('./handleReactionResults', () => ({
 const handleAliasResultsSpy = jest.spyOn(handleAliasResults, 'handleAliasResults');
 const handleReactionResultsSpy = jest.spyOn(handleReactionResults, 'handleReactionResults');
 
+const POINT_MOCK = {
+  x: 1323,
+  y: 2000,
+};
+const ZOOM_MOCK = 3;
+const MAX_ZOOM_MOCK = 9;
+
 describe('handleSearchResultAction - util', () => {
   const dispatch = jest.fn();
 
@@ -30,7 +37,14 @@ describe('handleSearchResultAction - util', () => {
     const searchResults = [ELEMENT_SEARCH_RESULT_MOCK_ALIAS];
 
     it('should fire handleAliasResults', async () => {
-      await handleSearchResultAction({ searchResults, dispatch });
+      await handleSearchResultAction({
+        searchResults,
+        dispatch,
+        maxZoom: MAX_ZOOM_MOCK,
+        isResultDrawerOpen: false,
+        point: POINT_MOCK,
+        zoom: ZOOM_MOCK,
+      });
       expect(handleAliasResultsSpy).toBeCalled();
     });
   });
@@ -39,7 +53,14 @@ describe('handleSearchResultAction - util', () => {
     const searchResults = [ELEMENT_SEARCH_RESULT_MOCK_REACTION];
 
     it('should fire handleReactionResults', async () => {
-      await handleSearchResultAction({ searchResults, dispatch });
+      await handleSearchResultAction({
+        searchResults,
+        dispatch,
+        maxZoom: MAX_ZOOM_MOCK,
+        isResultDrawerOpen: false,
+        point: POINT_MOCK,
+        zoom: ZOOM_MOCK,
+      });
       expect(handleReactionResultsSpy).toBeCalled();
     });
   });

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleSearchResultAction.ts

@@ -2,21 +2,30 @@ import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
 import { AppDispatch } from '@/redux/store';
 import { ElementSearchResult } from '@/types/models';
 import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
+import { Point } from '@/types/map';
 import { handleAliasResults } from './handleAliasResults';
 import { handleReactionResults } from './handleReactionResults';
 
 interface HandleSearchResultActionInput {
   searchResults: ElementSearchResult[];
   dispatch: AppDispatch;
+  point: Point;
+  searchDistance?: string;
+  maxZoom: number;
+  zoom: number;
   hasFitBounds?: boolean;
-  fitBoundsZoom?: number;
+  isResultDrawerOpen: boolean;
 }
 
 export const handleSearchResultAction = async ({
   searchResults,
   dispatch,
+  point,
+  searchDistance,
+  maxZoom,
+  zoom,
   hasFitBounds,
-  fitBoundsZoom,
+  isResultDrawerOpen,
 }: HandleSearchResultActionInput): Promise<void> => {
   const closestSearchResult = searchResults[FIRST_ARRAY_ELEMENT];
   const { type } = closestSearchResult;
@@ -25,7 +34,14 @@ export const handleSearchResultAction = async ({
     REACTION: handleReactionResults,
   }[type];
 
-  await action(dispatch, closestSearchResult, hasFitBounds, fitBoundsZoom)(closestSearchResult);
+  await action(dispatch, closestSearchResult, {
+    point,
+    searchDistance,
+    maxZoom,
+    zoom,
+    hasFitBounds,
+    isResultDrawerOpen,
+  })(closestSearchResult);
 
   if (type === 'ALIAS') {
     PluginsEventBus.dispatchEvent('onBioEntityClick', closestSearchResult);