feat(vector-map): implement pathway compartment

Closes MIN-27

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

@@ -19,6 +19,7 @@ import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import CompartmentSquare from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare';
 import CompartmentCircle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle';
 import { ModelElement } from '@/types/models';
+import CompartmentPathway from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway';
 
 export const useOlMapReactionsLayer = ({
   mapInstance,
@@ -36,16 +37,48 @@ export const useOlMapReactionsLayer = ({
   const shapes = useSelector(bioShapesSelector);
   const lineTypes = useSelector(lineTypesSelector);
 
-  const elements: Array<MapElement | CompartmentCircle | CompartmentSquare> = useMemo(() => {
-    if (!modelElements || !shapes) return [];
+  const elements: Array<MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway> =
+    useMemo(() => {
+      if (!modelElements || !shapes) return [];
 
-    const validElements: Array<MapElement | CompartmentCircle | CompartmentSquare> = [];
-    modelElements.content.forEach((element: ModelElement) => {
-      const shape = shapes.find(bioShape => bioShape.sboTerm === element.sboTerm);
-      if (shape) {
-        validElements.push(
-          new MapElement({
-            shapes: shape.shapes,
+      const validElements: Array<
+        MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway
+      > = [];
+      modelElements.content.forEach((element: ModelElement) => {
+        const shape = shapes.find(bioShape => bioShape.sboTerm === element.sboTerm);
+        if (shape) {
+          validElements.push(
+            new MapElement({
+              shapes: shape.shapes,
+              x: element.x,
+              y: element.y,
+              nameX: element.nameX,
+              nameY: element.nameY,
+              nameHeight: element.nameHeight,
+              nameWidth: element.nameWidth,
+              width: element.width,
+              height: element.height,
+              zIndex: element.z,
+              lineWidth: element.lineWidth,
+              lineType: element.borderLineType,
+              fontColor: element.fontColor,
+              fillColor: element.fillColor,
+              borderColor: element.borderColor,
+              nameVerticalAlign: element.nameVerticalAlign as VerticalAlign,
+              nameHorizontalAlign: element.nameHorizontalAlign as HorizontalAlign,
+              homodimer: element.homodimer,
+              activity: element.activity,
+              text: element.name,
+              fontSize: element.fontSize,
+              pointToProjection,
+              mapInstance,
+              modifications: element.modificationResidues,
+              lineTypes,
+              bioShapes: shapes,
+            }),
+          );
+        } else if (element.sboTerm === 'SBO:0000290') {
+          const compartmentProps = {
             x: element.x,
             y: element.y,
             nameX: element.nameX,
@@ -55,57 +88,30 @@ export const useOlMapReactionsLayer = ({
             width: element.width,
             height: element.height,
             zIndex: element.z,
-            lineWidth: element.lineWidth,
-            lineType: element.borderLineType,
+            innerWidth: element.innerWidth,
+            outerWidth: element.outerWidth,
+            thickness: element.thickness,
             fontColor: element.fontColor,
             fillColor: element.fillColor,
             borderColor: element.borderColor,
             nameVerticalAlign: element.nameVerticalAlign as VerticalAlign,
             nameHorizontalAlign: element.nameHorizontalAlign as HorizontalAlign,
-            homodimer: element.homodimer,
-            activity: element.activity,
             text: element.name,
             fontSize: element.fontSize,
             pointToProjection,
             mapInstance,
-            modifications: element.modificationResidues,
-            lineTypes,
-            bioShapes: shapes,
-          }),
-        );
-      } else if (element.sboTerm === 'SBO:0000290') {
-        const compartmentProps = {
-          x: element.x,
-          y: element.y,
-          nameX: element.nameX,
-          nameY: element.nameY,
-          nameHeight: element.nameHeight,
-          nameWidth: element.nameWidth,
-          width: element.width,
-          height: element.height,
-          zIndex: element.z,
-          innerWidth: element.innerWidth,
-          outerWidth: element.outerWidth,
-          thickness: element.thickness,
-          fontColor: element.fontColor,
-          fillColor: element.fillColor,
-          borderColor: element.borderColor,
-          nameVerticalAlign: element.nameVerticalAlign as VerticalAlign,
-          nameHorizontalAlign: element.nameHorizontalAlign as HorizontalAlign,
-          text: element.name,
-          fontSize: element.fontSize,
-          pointToProjection,
-          mapInstance,
-        };
-        if (element.shape === 'OVAL_COMPARTMENT') {
-          validElements.push(new CompartmentCircle(compartmentProps));
-        } else if (element.shape === 'SQUARE_COMPARTMENT') {
-          validElements.push(new CompartmentSquare(compartmentProps));
+          };
+          if (element.shape === 'OVAL_COMPARTMENT') {
+            validElements.push(new CompartmentCircle(compartmentProps));
+          } else if (element.shape === 'SQUARE_COMPARTMENT') {
+            validElements.push(new CompartmentSquare(compartmentProps));
+          } else if (element.shape === 'PATHWAY') {
+            validElements.push(new CompartmentPathway(compartmentProps));
+          }
         }
-      }
-    });
-    return validElements;
-  }, [modelElements, shapes, pointToProjection, mapInstance, lineTypes]);
+      });
+      return validElements;
+    }, [modelElements, shapes, pointToProjection, mapInstance, lineTypes]);
 
   const features = useMemo(() => {
     return elements.map(element => element.multiPolygonFeature);