Merge branch 'feat/MIN-107-avoid-multiple-load-overlays' into 'development'

feat(vector-map): avoid multiple loading overlays

Closes MIN-107

See merge request !320

src/components/Map/Drawer/OverlaysDrawer/hooks/useOverlay.ts

 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import {
+  areOverlayBioEntitiesLoadedSelector,
   isOverlayActiveSelector,
   isOverlayLoadingSelector,
 } from '@/redux/overlayBioEntity/overlayBioEntity.selector';
-import { removeOverlayBioEntityForGivenOverlay } from '@/redux/overlayBioEntity/overlayBioEntity.slice';
 import { getOverlayBioEntityForAllModels } from '@/redux/overlayBioEntity/overlayBioEntity.thunk';
 import { BASE_API_URL } from '@/constants';
 import { apiPath } from '@/redux/apiPath';
 import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
 import { overlaySelector, userOverlaySelector } from '@/redux/overlays/overlays.selectors';
+import {
+  addOverlayToOverlaysId,
+  removeOverlayFromOverlaysId,
+} from '@/redux/overlayBioEntity/overlayBioEntity.slice';
 import { useEmptyBackground } from './useEmptyBackground';
 
 type UseOverlay = {
@@ -25,6 +29,9 @@ export const useOverlay = (overlayId: number): UseOverlay => {
   const isOverlayLoading = useAppSelector(state => isOverlayLoadingSelector(state, overlayId));
   const { setBackgroundtoEmptyIfAvailable } = useEmptyBackground();
   const overlay = useAppSelector(state => overlaySelector(state, overlayId));
+  const areOverlayBioEntitiesLoaded = useAppSelector(state =>
+    areOverlayBioEntitiesLoadedSelector(state, overlayId),
+  );
   const userOverlay = useAppSelector(state => userOverlaySelector(state, overlayId));
 
   const dispatchPluginEvents = (): void => {
@@ -41,9 +48,13 @@ export const useOverlay = (overlayId: number): UseOverlay => {
 
   const toggleOverlay = async (): Promise<void> => {
     if (isOverlayActive) {
-      dispatch(removeOverlayBioEntityForGivenOverlay({ overlayId }));
+      dispatch(removeOverlayFromOverlaysId(overlayId));
     } else {
-      await dispatch(getOverlayBioEntityForAllModels({ overlayId }));
+      if (areOverlayBioEntitiesLoaded) {
+        dispatch(addOverlayToOverlaysId(overlayId));
+      } else {
+        await dispatch(getOverlayBioEntityForAllModels({ overlayId }));
+      }
       setBackgroundtoEmptyIfAvailable();
     }
 

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

@@ -59,8 +59,7 @@ export const useOlMapReactionsLayer = ({
   const currentMarkers = useAppSelector(markersSufraceOfCurrentMapDataSelector);
   const markersRender = parseSurfaceMarkersToBioEntityRender(currentMarkers);
   const bioEntities = useAppSelector(overlayBioEntitiesForCurrentModelSelector);
-  const debouncedBioEntities = useDebouncedValue(bioEntities, 2000);
-
+  const debouncedBioEntities = useDebouncedValue(bioEntities, 1000);
   const { getOverlayBioEntityColorByAvailableProperties } = useGetOverlayColor();
 
   const pointToProjection = usePointToProjection();

src/redux/overlayBioEntity/overlayBioEntity.reducers.ts

-import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
+import { ActionReducerMapBuilder, PayloadAction } from '@reduxjs/toolkit';
 import { getOverlayBioEntity, getOverlayBioEntityForAllModels } from './overlayBioEntity.thunk';
 import {
   OverlaysBioEntityState,
@@ -41,3 +41,21 @@ export const removeOverlayBioEntityForGivenOverlayReducer = (
   state.overlaysId = state.overlaysId.filter(id => id !== overlayId);
   delete state.data[overlayId];
 };
+
+export const removeOverlayFromOverlaysIdReducer = (
+  state: OverlaysBioEntityState,
+  action: PayloadAction<number>,
+): void => {
+  const overlayId = action.payload;
+  state.overlaysId = state.overlaysId.filter(id => id !== overlayId);
+};
+
+export const addOverlayToOverlaysIdReducer = (
+  state: OverlaysBioEntityState,
+  action: PayloadAction<number>,
+): void => {
+  const overlayId = action.payload;
+  if (!state.overlaysId.includes(overlayId)) {
+    state.overlaysId.push(overlayId);
+  }
+};

src/redux/overlayBioEntity/overlayBioEntity.selector.ts

@@ -86,6 +86,11 @@ export const isOverlayActiveSelector = createSelector(
   (overlaysId, overlayId) => overlaysId.includes(overlayId),
 );
 
+export const areOverlayBioEntitiesLoadedSelector = createSelector(
+  [overlayBioEntityDataSelector, (_, overlayId: number): number => overlayId],
+  (bioEntities, overlayId) => Boolean(bioEntities[overlayId]),
+);
+
 export const isOverlayLoadingSelector = createSelector(
   [overlayBioEntitySelector, mapModelIdSelector, (_, overlayId: number): number => overlayId],
   ({ overlaysId, data }, mapId, overlayId) => {

src/redux/overlayBioEntity/overlayBioEntity.slice.ts

 import { createSlice } from '@reduxjs/toolkit';
 import {
+  addOverlayToOverlaysIdReducer,
   getOverlayBioEntityForAllModelsReducer,
   getOverlayBioEntityReducer,
   removeOverlayBioEntityForGivenOverlayReducer,
+  removeOverlayFromOverlaysIdReducer,
 } from './overlayBioEntity.reducers';
 import { OverlaysBioEntityState } from './overlayBioEntity.types';
 
@@ -16,6 +18,8 @@ export const overlayBioEntitySlice = createSlice({
   initialState,
   reducers: {
     removeOverlayBioEntityForGivenOverlay: removeOverlayBioEntityForGivenOverlayReducer,
+    removeOverlayFromOverlaysId: removeOverlayFromOverlaysIdReducer,
+    addOverlayToOverlaysId: addOverlayToOverlaysIdReducer,
   },
   extraReducers: builder => {
     getOverlayBioEntityReducer(builder);
@@ -23,5 +27,9 @@ export const overlayBioEntitySlice = createSlice({
   },
 });
 
-export const { removeOverlayBioEntityForGivenOverlay } = overlayBioEntitySlice.actions;
+export const {
+  removeOverlayBioEntityForGivenOverlay,
+  removeOverlayFromOverlaysId,
+  addOverlayToOverlaysId,
+} = overlayBioEntitySlice.actions;
 export default overlayBioEntitySlice.reducer;