feat: add map action buttons

src/components/Map/MapViewer/utils/__TEST__useSetBoundingExtent.ts

-import { searchedBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEntity.selectors';
-import { usePointToProjection } from '@/utils/map/usePointToProjection';
-import { boundingExtent } from 'ol/extent';
-import { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { MapInstance } from '../MapViewer.types';
-
-interface Props {
-  mapInstance: MapInstance;
-}
-
-export const useSetBoundingExtent = ({ mapInstance }: Props): void => {
-  const contentBioEntites = useSelector(searchedBioEntitesSelectorOfCurrentMap);
-  const pointToProjection = usePointToProjection();
-
-  useEffect(() => {
-    if (!mapInstance || contentBioEntites.length === 0 || true) {
-      return;
-    }
-
-    const [allX, allY] = [contentBioEntites.map(e => e.x), contentBioEntites.map(e => e.y)];
-    const [minX, maxX] = [Math.min(...allX), Math.max(...allX)];
-    const [minY, maxY] = [Math.min(...allY), Math.max(...allY)];
-
-    console.log([
-      [minX, maxY],
-      [maxX, minY],
-    ]);
-
-    const ext = boundingExtent([
-      pointToProjection({ x: minX, y: maxY }),
-      pointToProjection({ x: maxX, y: minY }),
-    ]);
-
-    mapInstance.getView().fit(ext, {
-      size: mapInstance.getSize(),
-    });
-  }, [mapInstance, contentBioEntites, pointToProjection]);
-};

src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts

@@ -3,14 +3,15 @@ import { searchedBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEnt
 import { searchedChemicalsBioEntitesOfCurrentMapSelector } from '@/redux/chemicals/chemicals.selectors';
 import { searchedDrugsBioEntitesOfCurrentMapSelector } from '@/redux/drugs/drugs.selectors';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
-import BaseLayer from 'ol/layer/Base';
+import Feature from 'ol/Feature';
+import { Geometry } from 'ol/geom';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { getBioEntitiesFeatures } from './getBioEntitiesFeatures';
 
-export const useOlMapPinsLayer = (): BaseLayer => {
+export const useOlMapPinsLayer = (): VectorLayer<VectorSource<Feature<Geometry>>> => {
   const pointToProjection = usePointToProjection();
   const contentBioEntites = useSelector(searchedBioEntitesSelectorOfCurrentMap);
   const chemicalsBioEntities = useSelector(searchedChemicalsBioEntitesOfCurrentMapSelector);

src/components/Map/MapViewer/utils/config/useOlMapLayers.ts

@@ -30,11 +30,17 @@ export const useOlMapLayers = ({ mapInstance }: UseOlMapLayersInput): MapConfig[
   }, [reactionsLayer, tileLayer, pinsLayer, mapInstance, overlaysLayer]);
 
   useEffect(() => {
+    /* TODO: remove when poc not needed */
     if (!mapInstance || contentBioEntites.length === 0) {
       return;
     }
 
-    const extent = pinsLayer.getSource().getExtent();
+    const source = pinsLayer.getSource();
+    if (source === null) {
+      return;
+    }
+
+    const extent = source.getExtent();
     mapInstance.getView().fit(extent, {
       size: mapInstance.getSize(),
       maxZoom,