feat: publications modal elements links + reaction search (MIN-241, MIN-229)

Closes MIN-241, MIN-229

Objective:

Make publications modal elements links interactive along with possibility to search reactions

What has been done:

• publications modal elements link fetching (target id -> element)
• possibility to click and search element + auto opening of submap
• possibility to search for reactions with use of elementId field + auto opening submap
• reactions loading side effect for bioentity-reactions (reactions in bioentity/content results) along with fetching of reaction's related bioentities
• resetting search data where needed
• unit tests

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx

+/* eslint-disable @next/next/no-img-element */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import {
   getDefaultSearchTab,
   getSearchValuesArrayAndTrimToSeven,
 } from '@/components/FunctionalArea/TopBar/SearchBar/SearchBar.utils';
+import { getCanvasIcon } from '@/components/Map/MapViewer/utils/config/getCanvasIcon';
+import { PINS_COLORS } from '@/constants/canvas';
 import { DEFAULT_MAX_ZOOM } from '@/constants/map';
 import { openSearchDrawerWithSelectedTab } from '@/redux/drawer/drawer.slice';
+import { numberByEntityNumberIdSelector } from '@/redux/entityNumber/entityNumber.selectors';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { setMapPosition } from '@/redux/map/map.slice';
 import { getSearchData } from '@/redux/search/search.thunks';
-import { Icon } from '@/shared/Icon';
 import { twMerge } from 'tailwind-merge';
-import { getPinColor } from '../../../ResultsList/PinsList/PinsListItem/PinsListItem.component.utils';
 import { PinListBioEntity } from './BioEntitiesPinsListItem.types';
 import { isPinWithCoordinates } from './BioEntitiesPinsListItem.utils';
 
@@ -26,6 +29,13 @@ export const BioEntitiesPinsListItem = ({
 }: BioEntitiesPinsListItemProps): JSX.Element => {
   const dispatch = useAppDispatch();
   const pinHasCoords = isPinWithCoordinates(pin);
+  const pinIconValue = useAppSelector(state =>
+    numberByEntityNumberIdSelector(state, pin.elementId || ''),
+  );
+  const pinIconCanvas = getCanvasIcon({
+    color: PINS_COLORS.bioEntity,
+    value: pinIconValue,
+  });
 
   const handleCenterMapToPin = (): void => {
     if (!pinHasCoords) {
@@ -56,7 +66,7 @@ export const BioEntitiesPinsListItem = ({
           className={twMerge('mr-2 shrink-0', !pinHasCoords && 'cursor-default')}
           data-testid="center-to-pin-button"
         >
-          <Icon name="pin" className={getPinColor('bioEntity')} />
+          <img src={pinIconCanvas.toDataURL()} alt="pin icon" />
         </button>
         <p>
           {pin.stringType ? `${pin.stringType}: ` : ''}