src/components/FunctionalArea/MapNavigation/MapNavigation.component.test.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/utils/testing/getReduxWrapperWithStore';
 import { act, render, screen, within } from '@testing-library/react';
 import { HISTAMINE_MAP_ID, MAIN_MAP_ID } from '@/constants/mocks';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { MapNavigation } from './MapNavigation.component';
 
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -35,6 +36,7 @@ describe('MapNavigation - component', () => {
         loading: 'succeeded',
         error: { message: '', name: '' },
         openedMaps: openedMapsThreeSubmapsFixture,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 
@@ -55,6 +57,7 @@ describe('MapNavigation - component', () => {
         loading: 'succeeded',
         error: { message: '', name: '' },
         openedMaps: openedMapsThreeSubmapsFixture,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 
@@ -81,6 +84,7 @@ describe('MapNavigation - component', () => {
         loading: 'succeeded',
         error: { message: '', name: '' },
         openedMaps: openedMapsThreeSubmapsFixture,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 
@@ -111,6 +115,7 @@ describe('MapNavigation - component', () => {
           modelId: HISTAMINE_MAP_ID,
         },
         openedMaps: openedMapsThreeSubmapsFixture,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
         loading: 'succeeded',
         error: { message: '', name: '' },
       },
@@ -157,6 +162,7 @@ describe('MapNavigation - component', () => {
             modelId: HISTAMINE_MAP_ID,
           },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
           loading: 'succeeded',
           error: { message: '', name: '' },
         },
@@ -183,6 +189,7 @@ describe('MapNavigation - component', () => {
             modelId: HISTAMINE_MAP_ID,
           },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
           loading: 'succeeded',
           error: { message: '', name: '' },
         },
@@ -207,6 +214,7 @@ describe('MapNavigation - component', () => {
             modelId: HISTAMINE_MAP_ID,
           },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
           loading: 'succeeded',
           error: { message: '', name: '' },
         },

src/components/FunctionalArea/Modal/OverviewImagesModal/utils/useOverviewImageLinkActions.test.ts

@@ -17,6 +17,7 @@ import { OverviewImageLink } from '@/types/models';
 import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { renderHook } from '@testing-library/react';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import {
   FIRST_ARRAY_ELEMENT,
   NOOP,
@@ -59,6 +60,7 @@ describe('useOverviewImageLinkActions - hook', () => {
           loading: 'succeeded',
           error: { name: '', message: '' },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
       });
 
@@ -109,6 +111,7 @@ describe('useOverviewImageLinkActions - hook', () => {
           loading: 'succeeded',
           error: { name: '', message: '' },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
       });
 
@@ -166,6 +169,7 @@ describe('useOverviewImageLinkActions - hook', () => {
             loading: 'succeeded',
             error: { name: '', message: '' },
             openedMaps: openedMapsThreeSubmapsFixture,
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
           models: {
             data: MODELS_MOCK_SHORT,
@@ -244,6 +248,7 @@ describe('useOverviewImageLinkActions - hook', () => {
             loading: 'succeeded',
             error: { name: '', message: '' },
             openedMaps: openedMapsInitialValueFixture,
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
           models: {
             data: MODELS_MOCK_SHORT,
@@ -348,6 +353,7 @@ describe('useOverviewImageLinkActions - hook', () => {
           loading: 'succeeded',
           error: { name: '', message: '' },
           openedMaps: openedMapsInitialValueFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
         models: {
           data: MODELS_MOCK_SHORT,
@@ -405,6 +411,7 @@ describe('useOverviewImageLinkActions - hook', () => {
           loading: 'succeeded',
           error: { name: '', message: '' },
           openedMaps: openedMapsInitialValueFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
         models: {
           data: MODELS_MOCK_SHORT,
@@ -466,6 +473,7 @@ describe('useOverviewImageLinkActions - hook', () => {
           loading: 'succeeded',
           error: { name: '', message: '' },
           openedMaps: openedMapsInitialValueFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
         models: {
           data: MODELS_MOCK_SHORT,
@@ -529,6 +537,7 @@ describe('useOverviewImageLinkActions - hook', () => {
           loading: 'succeeded',
           error: { name: '', message: '' },
           openedMaps: openedMapsInitialValueFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
         models: {
           data: MODELS_MOCK_SHORT,

src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/ElementLink.component.test.tsx

@@ -14,6 +14,7 @@ import {
 import { render, screen, waitFor } from '@testing-library/react';
 import { HttpStatusCode } from 'axios';
 import { MockStoreEnhanced } from 'redux-mock-store';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { ElementLink } from './ElementLink.component';
 
 const mockedAxiosNewClient = mockNetworkNewAPIResponse();
@@ -208,6 +209,7 @@ describe('ElementLink - component', () => {
                 lastPosition: DEFAULT_POSITION,
               },
             ],
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
         },
       );

src/components/Map/Drawer/BioEntityDrawer/AssociatedSubmap/AssociatedSubmap.component.test.tsx

@@ -18,6 +18,7 @@ import {
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
 import { act, render, screen } from '@testing-library/react';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { AssociatedSubmap } from './AssociatedSubmap.component';
 
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -91,6 +92,7 @@ describe('AssociatedSubmap - component', () => {
           loading: 'succeeded',
           error: { name: '', message: '' },
           openedMaps: openedMapsInitialValueFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
         bioEntity: {
           ...BIOENTITY_INITIAL_STATE_MOCK,
@@ -150,6 +152,7 @@ describe('AssociatedSubmap - component', () => {
           loading: 'succeeded',
           error: { name: '', message: '' },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
         bioEntity: {
           ...BIOENTITY_INITIAL_STATE_MOCK,

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx

@@ -13,6 +13,7 @@ import {
   openedMapsInitialValueFixture,
   openedMapsThreeSubmapsFixture,
 } from '@/redux/map/map.fixtures';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { BioEntitiesSubmapItem } from './BioEntitiesSubmapItem.component';
 
 const CORE_MAP_ID = 5053;
@@ -100,6 +101,7 @@ describe('BioEntitiesSubmapItem - component', () => {
         loading: 'succeeded',
         error: { name: '', message: '' },
         openedMaps: openedMapsInitialValueFixture,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 
@@ -157,6 +159,7 @@ describe('BioEntitiesSubmapItem - component', () => {
         loading: 'succeeded',
         error: { name: '', message: '' },
         openedMaps: openedMapsThreeSubmapsFixture,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.test.tsx

@@ -11,6 +11,7 @@ import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/ma
 import { MODELS_DATA_MOCK_WITH_MAIN_MAP } from '@/redux/models/models.mock';
 import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
 import { MockStoreEnhanced } from 'redux-mock-store';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { PinTypeWithNone } from '../PinsList.types';
 import { PinsListItem } from './PinsListItem.component';
 
@@ -37,6 +38,7 @@ const INITIAL_STORE_STATE: InitialStoreState = {
     loading: 'succeeded',
     error: { message: '', name: '' },
     openedMaps: openedMapsThreeSubmapsFixture,
+    backgroundType: MapBackgroundsEnum.SEMANTIC,
   },
 };
 
@@ -169,6 +171,7 @@ describe('PinsListItem - component ', () => {
           loading: 'succeeded',
           error: { message: '', name: '' },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
       },
     );
@@ -202,6 +205,7 @@ describe('PinsListItem - component ', () => {
           loading: 'succeeded',
           error: { message: '', name: '' },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
       },
     );

src/components/Map/Drawer/SubmapsDrawer/SubmapsDrawer.test.tsx

@@ -11,6 +11,7 @@ import {
   openedMapsInitialValueFixture,
   openedMapsThreeSubmapsFixture,
 } from '@/redux/map/map.fixtures';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { SubmapsDrawer } from './SubmapsDrawer';
 
 const MAIN_MAP_ID = 5053;
@@ -64,6 +65,7 @@ describe('SubmapsDrawer - component', () => {
         loading: 'succeeded',
         error: { name: '', message: '' },
         openedMaps: openedMapsInitialValueFixture,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 
@@ -109,6 +111,7 @@ describe('SubmapsDrawer - component', () => {
         openedMaps: openedMapsThreeSubmapsFixture,
         loading: 'succeeded',
         error: { name: '', message: '' },
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
 

src/components/Map/Map.component.tsx

@@ -3,18 +3,23 @@ import { Drawer } from '@/components/Map/Drawer';
 import { Legend } from '@/components/Map/Legend';
 import { MapViewer } from '@/components/Map/MapViewer';
 import { MapLoader } from '@/components/Map/MapLoader/MapLoader.component';
+import { MapVectorBackgroundSelector } from '@/components/Map/MapVectorBackgroundSelector/MapVectorBackgroundSelector.component';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { vectorRenderingSelector } from '@/redux/models/models.selectors';
 import { MapAdditionalActions } from './MapAdditionalActions';
 import { MapAdditionalOptions } from './MapAdditionalOptions';
 import { PluginsDrawer } from './PluginsDrawer';
 
 export const Map = (): JSX.Element => {
+  const vectorRendering = useAppSelector(vectorRenderingSelector);
   return (
     <div
       className="relative z-0 h-screen w-full overflow-hidden bg-black"
       data-testid="map-container"
     >
       <MapViewer />
-      <MapAdditionalOptions />
+      {!vectorRendering && <MapAdditionalOptions />}
+      {vectorRendering && <MapVectorBackgroundSelector />}
       <Drawer />
       <PluginsDrawer />
       <Legend />

src/components/Map/MapAdditionalActions/MapAdditionalActions.component.test.tsx

@@ -11,6 +11,7 @@ import {
 import { act, render, screen } from '@testing-library/react';
 import Map from 'ol/Map';
 import { MockStoreEnhanced } from 'redux-mock-store';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { MapAdditionalActions } from './MapAdditionalActions.component';
 import { useVisibleBioEntitiesPolygonCoordinates } from './utils/useVisibleBioEntitiesPolygonCoordinates';
 
@@ -145,6 +146,7 @@ describe('MapAdditionalActions - component', () => {
             message: '',
           },
           openedMaps: [],
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
       });
 

src/components/Map/MapAdditionalActions/utils/useAdditionalActions.test.ts

@@ -8,6 +8,7 @@ import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreA
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { renderHook } from '@testing-library/react';
 import Map from 'ol/Map';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { useAddtionalActions } from './useAdditionalActions';
 import { useVisibleBioEntitiesPolygonCoordinates } from './useVisibleBioEntitiesPolygonCoordinates';
 
@@ -94,6 +95,7 @@ describe('useAddtionalActions - hook', () => {
                 message: '',
               },
               openedMaps: [],
+              backgroundType: MapBackgroundsEnum.SEMANTIC,
             },
           },
           {

src/components/Map/MapVectorBackgroundSelector/MapVectorBackgroundSelector.component.tsx

+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { mapBackgroundTypeSelector } from '@/redux/map/map.selectors';
+import { twMerge } from 'tailwind-merge';
+import { MAP_BACKGROUND_TYPES } from '@/redux/map/map.constants';
+import { setMapBackgroundType } from '@/redux/map/map.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { Select } from '@/shared/Select';
+
+export const MapVectorBackgroundSelector = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const backgroundType = useAppSelector(mapBackgroundTypeSelector);
+
+  const handleChange = (selectedBackgroundType: number): void => {
+    dispatch(setMapBackgroundType(selectedBackgroundType));
+  };
+
+  return (
+    <div className={twMerge('absolute right-6 top-[calc(64px+40px+24px)] z-10 flex')}>
+      <Select
+        options={MAP_BACKGROUND_TYPES}
+        selectedId={backgroundType}
+        onChange={handleChange}
+        width={100}
+      />
+    </div>
+  );
+};

src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts

@@ -10,6 +10,8 @@ export type MapConfig = {
 export type VerticalAlign = 'TOP' | 'MIDDLE' | 'BOTTOM';
 export type HorizontalAlign = 'LEFT' | 'RIGHT' | 'CENTER' | 'END' | 'START';
 
+export type ScaleFunction = (resolution: number) => number;
+
 export type OverlayBioEntityGroupedElementsType = {
   [id: string]: Array<OverlayBioEntityRender & { amount: number }>;
 };

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.test.ts

@@ -51,7 +51,11 @@ describe('onMapLeftClick', () => {
   it('dispatches updateLastClick and resets data if no feature at pixel', async () => {
     const dispatch = jest.fn();
     jest.spyOn(mapInstance, 'forEachFeatureAtPixel').mockImplementation((_, callback) => {
-      callback(new Feature({}), null as unknown as Layer, null as unknown as SimpleGeometry);
+      callback(
+        new Feature({ zIndex: 1 }),
+        null as unknown as Layer,
+        null as unknown as SimpleGeometry,
+      );
     });
     await onMapLeftClick(
       mapSize,
@@ -74,7 +78,7 @@ describe('onMapLeftClick', () => {
     const dispatch = jest.fn(() => ({
       unwrap: jest.fn().mockResolvedValue(mockBioEntities),
     }));
-    const feature = new Feature({ id: 1, type: FEATURE_TYPE.ALIAS });
+    const feature = new Feature({ id: 1, type: FEATURE_TYPE.ALIAS, zIndex: 1 });
     jest.spyOn(mapInstance, 'forEachFeatureAtPixel').mockImplementation((_, callback) => {
       callback(feature, null as unknown as Layer, null as unknown as SimpleGeometry);
     });
@@ -98,7 +102,7 @@ describe('onMapLeftClick', () => {
     const dispatch = jest.fn(() => ({
       unwrap: jest.fn().mockResolvedValue(mockBioEntities),
     }));
-    const feature = new Feature({ id: 1, type: FEATURE_TYPE.REACTION });
+    const feature = new Feature({ id: 1, type: FEATURE_TYPE.REACTION, zIndex: 1 });
     jest.spyOn(mapInstance, 'forEachFeatureAtPixel').mockImplementation((_, callback) => {
       callback(feature, null as unknown as Layer, null as unknown as SimpleGeometry);
     });

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts

+/* eslint-disable no-magic-numbers */
 import { MapSize } from '@/redux/map/map.types';
 import { AppDispatch } from '@/redux/store';
 import { Map, MapBrowserEvent } from 'ol';
@@ -26,13 +27,12 @@ export const onMapLeftClick =
 
       let featureAtPixel: FeatureLike | undefined;
       mapInstance.forEachFeatureAtPixel(pixel, (feature, ) => {
-        if(feature.get('id') && [...Object.values(FEATURE_TYPE)].includes(feature.get('type'))) {
+        if(feature.get('id') && [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('zIndex') >= 0) {
           featureAtPixel = feature;
           return true;
         }
         return false;
       }, {hitTolerance: 10});
-
       if(!featureAtPixel) {
         if (isResultDrawerOpen) {
           dispatch(closeDrawer());
@@ -53,7 +53,7 @@ export const onMapLeftClick =
 
       const type = featureAtPixel.get('type');
       const id = featureAtPixel.get('id');
-      if(type === FEATURE_TYPE.ALIAS) {
+      if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].includes(type)) {
         await leftClickHandleAlias(dispatch)(featureAtPixel, modelId);
       } else if (type === FEATURE_TYPE.REACTION) {
         clickHandleReaction(dispatch)(modelElements, reactions, id,  modelId);

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts

+/* eslint-disable no-magic-numbers */
 import { MapSize } from '@/redux/map/map.types';
 import { AppDispatch } from '@/redux/store';
 import { Feature, Map, MapBrowserEvent } from 'ol';
@@ -30,7 +31,11 @@ export const onMapRightClick =
             const source = layer.getSource();
             if (source instanceof VectorSource) {
               foundFeature = source.getClosestFeatureToCoordinate(coordinate, (feature) => {
-                return [FEATURE_TYPE.ALIAS, FEATURE_TYPE.REACTION].includes(feature.get('type'));
+                return [
+                  FEATURE_TYPE.ALIAS,
+                  FEATURE_TYPE.REACTION,
+                  FEATURE_TYPE.GLYPH
+                ].includes(feature.get('type')) && feature.get('zIndex') >= 0;
               });
             }
           }
@@ -44,7 +49,7 @@ export const onMapRightClick =
 
       const type = foundFeature.get('type');
       const id = foundFeature.get('id');
-      if(type === FEATURE_TYPE.ALIAS) {
+      if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].includes(type)) {
         const modelElement = modelElements.find(element => element.id === id);
         if(!modelElement) {
           return;

src/components/Map/MapViewer/MapViewerVector/listeners/useOlMapVectorListeners.test.ts

@@ -5,6 +5,7 @@ import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithSto
 import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/map/map.fixtures';
 import { useOlMapVectorListeners } from '@/components/Map/MapViewer/MapViewerVector/listeners/useOlMapVectorListeners';
 import { onMapLeftClick } from '@/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 
 jest.mock('./mouseClick/mouseLeftClick/onMapLeftClick', () => ({
   __esModule: true,
@@ -25,6 +26,7 @@ describe('useOlMapVectorListeners - util', () => {
       loading: 'succeeded',
       error: { message: '', name: '' },
       openedMaps: openedMapsThreeSubmapsFixture,
+      backgroundType: MapBackgroundsEnum.SEMANTIC,
     },
   });
 

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

@@ -14,6 +14,8 @@ import { BioShapesDict, LineTypeDict } from '@/redux/shapes/shapes.types';
 import { OverlayOrder } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
 import { OverlayBioEntityRender } from '@/types/OLrendering';
 import { GetOverlayBioEntityColorByAvailableProperties } from '@/components/Map/MapViewer/utils/config/overlaysLayer/useGetOverlayColor';
+import VectorSource from 'ol/source/Vector';
+import { MapSize } from '@/redux/map/map.types';
 
 export default function processModelElements(
   modelElements: ModelElements,
@@ -22,8 +24,11 @@ export default function processModelElements(
   groupedElementsOverlays: Record<string, Array<OverlayBioEntityRender>>,
   overlaysOrder: Array<OverlayOrder>,
   getOverlayColor: GetOverlayBioEntityColorByAvailableProperties,
+  vectorSource: VectorSource,
   mapInstance: MapInstance,
   pointToProjection: UsePointToProjectionResult,
+  mapBackgroundType: number,
+  mapSize: MapSize,
 ): Array<MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway | Glyph> {
   const validElements: Array<
     MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway | Glyph
@@ -31,7 +36,8 @@ export default function processModelElements(
   modelElements.content.forEach((element: ModelElement) => {
     if (element.glyph) {
       const glyph = new Glyph({
-        id: element.glyph.id,
+        elementId: element.id,
+        glyphId: element.glyph.id,
         x: element.x,
         y: element.y,
         width: element.width,
@@ -47,6 +53,8 @@ export default function processModelElements(
     if (element.sboTerm === 'SBO:0000290') {
       const compartmentProps = {
         id: element.id,
+        complexId: element.complex,
+        compartmentId: element.compartment,
         x: element.x,
         y: element.y,
         nameX: element.nameX,
@@ -66,8 +74,12 @@ export default function processModelElements(
         nameHorizontalAlign: element.nameHorizontalAlign as HorizontalAlign,
         text: element.name,
         fontSize: element.fontSize,
+        overlaysVisible: Boolean(overlaysOrder.length),
         pointToProjection,
         mapInstance,
+        vectorSource,
+        mapBackgroundType,
+        mapSize,
       };
       if (element.shape === 'OVAL_COMPARTMENT') {
         validElements.push(new CompartmentCircle(compartmentProps));
@@ -83,6 +95,8 @@ export default function processModelElements(
       validElements.push(
         new MapElement({
           id: element.id,
+          complexId: element.complex,
+          compartmentId: element.compartment,
           sboTerm: element.sboTerm,
           shapes: elementShapes,
           x: element.x,
@@ -107,12 +121,15 @@ export default function processModelElements(
           fontSize: element.fontSize,
           pointToProjection,
           mapInstance,
+          vectorSource,
           modifications: element.modificationResidues,
           lineTypes,
           bioShapes: shapes,
           overlays: groupedElementsOverlays[element.id],
           overlaysOrder,
           getOverlayColor,
+          mapBackgroundType,
+          mapSize,
         }),
       );
     }

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

@@ -38,6 +38,7 @@ import { parseSurfaceMarkersToBioEntityRender } from '@/components/Map/MapViewer
 import MarkerOverlay from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/overlay/MarkerOverlay';
 import processModelElements from '@/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements';
 import useDebouncedValue from '@/utils/useDebouncedValue';
+import { mapBackgroundTypeSelector, mapDataSizeSelector } from '@/redux/map/map.selectors';
 
 export const useOlMapReactionsLayer = ({
   mapInstance,
@@ -50,17 +51,22 @@ export const useOlMapReactionsLayer = ({
   const modelElements = useSelector(modelElementsSelector);
   const modelReactions = useSelector(newReactionsDataSelector);
   const shapes = useSelector(bioShapesSelector);
+  const mapSize = useSelector(mapDataSizeSelector);
   const lineTypes = useSelector(lineTypesSelector);
   const arrowTypes = useSelector(arrowTypesSelector);
   const overlaysOrder = useSelector(getOverlayOrderSelector);
+  const mapBackgroundType = useSelector(mapBackgroundTypeSelector);
   const currentMarkers = useAppSelector(markersSufraceOfCurrentMapDataSelector);
   const markersRender = parseSurfaceMarkersToBioEntityRender(currentMarkers);
   const bioEntities = useAppSelector(overlayBioEntitiesForCurrentModelSelector);
   const debouncedBioEntities = useDebouncedValue(bioEntities, 2000);
+
   const { getOverlayBioEntityColorByAvailableProperties } = useGetOverlayColor();
 
   const pointToProjection = usePointToProjection();
 
+  const vectorSource = useMemo(() => new VectorSource(), []);
+
   useEffect(() => {
     if (currentModelId) {
       dispatch(getModelElements(currentModelId));
@@ -130,11 +136,12 @@ export const useOlMapReactionsLayer = ({
         arrowTypes,
         shapes: reactionShapes,
         pointToProjection,
+        vectorSource,
         mapInstance,
       });
       return reactionObject.features;
     });
-  }, [arrowTypes, lineTypes, mapInstance, modelReactions, pointToProjection, shapes]);
+  }, [arrowTypes, lineTypes, mapInstance, modelReactions, pointToProjection, shapes, vectorSource]);
 
   const elements: Array<
     MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway | Glyph
@@ -149,18 +156,24 @@ export const useOlMapReactionsLayer = ({
       groupedElementsOverlays,
       overlaysOrder,
       getOverlayBioEntityColorByAvailableProperties,
+      vectorSource,
       mapInstance,
       pointToProjection,
+      mapBackgroundType,
+      mapSize,
     );
   }, [
     modelElements,
     shapes,
-    pointToProjection,
-    mapInstance,
     lineTypes,
     groupedElementsOverlays,
     overlaysOrder,
     getOverlayBioEntityColorByAvailableProperties,
+    vectorSource,
+    mapInstance,
+    pointToProjection,
+    mapBackgroundType,
+    mapSize,
   ]);
 
   const features = useMemo(() => {
@@ -174,8 +187,6 @@ export const useOlMapReactionsLayer = ({
     ];
   }, [elements, linesOverlaysFeatures, markerOverlaysFeatures, reactions]);
 
-  const vectorSource = useMemo(() => new VectorSource(), []);
-
   useEffect(() => {
     vectorSource.clear();
     vectorSource.addFeatures(features);
@@ -184,6 +195,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/config/useOlMapVectorLayers.test.ts

@@ -7,6 +7,7 @@ import VectorLayer from 'ol/layer/Vector';
 import React from 'react';
 import { useOlMap } from '@/components/Map/MapViewer/utils/useOlMap';
 import { useOlMapVectorLayers } from '@/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapVectorLayers';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 
 const useRefValue = {
   current: null,
@@ -59,6 +60,7 @@ describe('useOlMapLayers - util', () => {
           message: '',
         },
         openedMaps: OPENED_MAPS_INITIAL_STATE,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });
     const dummyElement = document.createElement('div');

src/components/Map/MapViewer/MapViewerVector/utils/config/useOlMapWhiteCardLayer.test.ts

@@ -5,6 +5,7 @@ import { renderHook } from '@testing-library/react';
 import BaseLayer from 'ol/layer/Base';
 import VectorLayer from 'ol/layer/Vector';
 import React from 'react';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { useOlMapWhiteCardLayer } from './useOlMapWhiteCardLayer';
 
 const useRefValue = {
@@ -58,6 +59,7 @@ describe('useOlMapWhiteCardLayer - util', () => {
           message: '',
         },
         openedMaps: OPENED_MAPS_INITIAL_STATE,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
     });