feat(vector-map): treating complexes in the same way as compartments

Closes MIN-119

src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts

@@ -2,7 +2,7 @@
 import { Feature } from 'ol';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
 import MapElement from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement';
 import { useSelector } from 'react-redux';
@@ -48,6 +48,8 @@ import { mapBackgroundTypeSelector, mapDataSizeSelector } from '@/redux/map/map.
 import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { setMapBackgroundType } from '@/redux/map/map.slice';
 import { ZOOM_RESCALING_FACTOR } from '@/constants/map';
+import { OverlayOrder } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
+import areOverlayOrdersEqual from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/overlay/areOverlayOrdersEqual';
 
 export const useOlMapReactionsLayer = ({
   mapInstance,
@@ -56,6 +58,7 @@ export const useOlMapReactionsLayer = ({
 }): VectorLayer<VectorSource<Feature>> => {
   const dispatch = useAppDispatch();
 
+  const [overlaysOrderState, setOverlaysOrderState] = useState<Array<OverlayOrder>>([]);
   const currentModelId = useSelector(currentModelIdSelector);
   const shapes = useSelector(bioShapesSelector);
   const mapSize = useSelector(mapDataSizeSelector);
@@ -84,6 +87,12 @@ export const useOlMapReactionsLayer = ({
     return mapSize.maxZoom * ZOOM_RESCALING_FACTOR === mapModelOriginalMaxZoom;
   }, [mapModelOriginalMaxZoom, mapSize.maxZoom]);
 
+  useEffect(() => {
+    if (areOverlayOrdersEqual(overlaysOrderState, overlaysOrder)) {
+      setOverlaysOrderState(overlaysOrder);
+    }
+  }, [overlaysOrder, overlaysOrderState]);
+
   useEffect(() => {
     if (!currentModelId) {
       return;
@@ -97,10 +106,10 @@ export const useOlMapReactionsLayer = ({
   }, [currentModelId, dispatch, reactionsLoading, modelElementsLoading]);
 
   useEffect(() => {
-    if (overlaysOrder.length) {
+    if (overlaysOrderState.length) {
       dispatch(setMapBackgroundType(MapBackgroundsEnum.NETWORK));
     }
-  }, [dispatch, overlaysOrder]);
+  }, [dispatch, overlaysOrderState]);
 
   const groupedElementsOverlays = useMemo(() => {
     const elementsBioEntitesOverlay = debouncedBioEntities.filter(
@@ -202,7 +211,7 @@ export const useOlMapReactionsLayer = ({
       shapes,
       lineTypes,
       groupedElementsOverlays,
-      overlaysOrder,
+      overlaysOrderState,
       getOverlayBioEntityColorByAvailableProperties,
       vectorSource,
       mapInstance,
@@ -216,7 +225,7 @@ export const useOlMapReactionsLayer = ({
     isCorrectMapInstanceViewScale,
     lineTypes,
     groupedElementsOverlays,
-    overlaysOrder,
+    overlaysOrderState,
     getOverlayBioEntityColorByAvailableProperties,
     vectorSource,
     mapInstance,