feat(vector-map): add modifications for map elements

Closes MIN-25

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

@@ -4,7 +4,7 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { useEffect, useMemo } from 'react';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
-import CustomMultiPolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/CustomMultiPolygon';
+import MapElement from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/MapElement';
 import { useSelector } from 'react-redux';
 import { shapesSelector } from '@/redux/shapes/shapes.selectors';
 import { MapInstance } from '@/types/map';
@@ -37,7 +37,7 @@ export const useOlMapReactionsLayer = ({
       return modelElements.content.map(element => {
         const shape = shapes.data.find(bioShape => bioShape.sboTerm === element.sboTerm);
         if (shape) {
-          return new CustomMultiPolygon({
+          return new MapElement({
             shapes: shape.shapes,
             x: element.x,
             y: element.y,
@@ -57,6 +57,8 @@ export const useOlMapReactionsLayer = ({
             text: element.name,
             pointToProjection,
             mapInstance,
+            modifications: element.modificationResidues,
+            bioShapes: shapes.data,
           });
         }
         return undefined;
@@ -67,7 +69,7 @@ export const useOlMapReactionsLayer = ({
 
   const features = useMemo(() => {
     return elements
-      .filter((element): element is CustomMultiPolygon => element !== undefined)
+      .filter((element): element is MapElement => element !== undefined)
       .map(element => element.multiPolygonFeature);
   }, [elements]);