Merge branch 'bugfix/MIN-116-login-slow-on-response' into 'development'

Resolve MIN-116 "Bugfix/ login slow on response"

Closes MIN-116

See merge request !336

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,
@@ -244,6 +253,8 @@ export const useOlMapReactionsLayer = ({
   return useMemo(() => {
     const vectorLayer = new VectorLayer({
       source: vectorSource,
+      updateWhileAnimating: true,
+      updateWhileInteracting: true,
     });
     vectorLayer.set('type', VECTOR_MAP_LAYER_TYPE);
     return vectorLayer;

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts

@@ -309,7 +309,7 @@ export default abstract class BaseMultiPolygon {
               largestExtent,
               this.text,
               scale,
-              this.zIndex + 1000,
+              this.zIndex + 100000,
               this.mapSize,
             ),
           );

src/components/Map/MapViewer/MapViewerVector/utils/shapes/overlay/areOverlayOrdersEqual.ts

+/* eslint-disable no-magic-numbers */
+import { OverlayOrder } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
+
+export default function areOverlayOrdersEqual(
+  overlaysOrder1: Array<OverlayOrder>,
+  overlaysOrder2: Array<OverlayOrder>,
+): boolean {
+  if (overlaysOrder1 === overlaysOrder2) {
+    return true;
+  }
+
+  if (overlaysOrder1.length !== overlaysOrder2.length) {
+    return false;
+  }
+
+  for (let index = 0; index < overlaysOrder1.length; index += 1) {
+    const obj1 = overlaysOrder1[index];
+    const obj2 = overlaysOrder2[index];
+
+    if (
+      obj1.id !== obj2.id ||
+      obj1.order !== obj2.order ||
+      obj1.calculatedOrder !== obj2.calculatedOrder ||
+      obj1.index !== obj2.index
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}

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

 /* eslint-disable no-magic-numbers */
-import { OPTIONS, ZOOM_RESCALING_FACTOR } from '@/constants/map';
+import { DEFAULT_EXTENT_PADDING, OPTIONS, ZOOM_RESCALING_FACTOR } from '@/constants/map';
 import { mapDataInitialPositionSelector, mapDataSizeSelector } from '@/redux/map/map.selectors';
 import { MapInstance, Point } from '@/types/map';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
@@ -34,13 +34,13 @@ export const useOlMapView = ({ mapInstance }: UseOlMapViewInput): MapConfig['vie
       heightPadding = mapSize.width / mapInstanceWidthToHeightRatio - mapSize.height;
     }
     const topLeftPoint: Point = {
-      x: mapSize.width + widthPadding / 2,
-      y: mapSize.height + heightPadding / 2,
+      x: mapSize.width + widthPadding / 2 + DEFAULT_EXTENT_PADDING,
+      y: mapSize.height + heightPadding / 2 + DEFAULT_EXTENT_PADDING,
     };
 
     const bottomRightPoint: Point = {
-      x: -widthPadding / 2,
-      y: -heightPadding / 2,
+      x: -widthPadding / 2 - DEFAULT_EXTENT_PADDING,
+      y: -heightPadding / 2 - DEFAULT_EXTENT_PADDING,
     };
 
     return boundingExtent([topLeftPoint, bottomRightPoint].map(pointToProjection));

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

@@ -65,7 +65,7 @@ export const useOlMap: UseOlMap = ({ target } = {}) => {
         mouseWheelZoom: false,
       }).extend([
         new MouseWheelZoom({
-          duration: 0,
+          duration: 250,
           timeout: 80,
         }),
       ]),

src/constants/map.ts

@@ -11,7 +11,7 @@ export const DEFAULT_CENTER_Y = 0;
 // eslint-disable-next-line no-magic-numbers
 export const LATLNG_FALLBACK: LatLng = [0, 0];
 export const EXTENT_PADDING_MULTIPLICATOR = 1;
-
+export const DEFAULT_EXTENT_PADDING = 20;
 export const ZOOM_RESCALING_FACTOR = 1;
 
 export const DEFAULT_CENTER_POINT: Point = {