CHANGELOG

 minerva-front (19.0.0~alpha.0) stable; urgency=medium
   * Feature: support for matomo (#289)
+  * Feature: allow plugin to not have a panel (#306)
 
  -- Piotr Gawron <piotr.gawron@uni.lu>  Fri, 18 Oct 2024 13:00:00 +0200
 
+minerva-front (18.0.2) stable; urgency=medium
+  * Bug fix: Terms of Service modal is not hidden by Select project modal when
+    login via ORCID (#305)
+  * Bug fix: when downloading map there was missing spinner indicating the
+    download is in progress (#297)
+
+ -- Piotr Gawron <piotr.gawron@uni.lu>  Wed, 30 Oct 2024 13:00:00 +0200
+
 minerva-front (18.0.1) stable; urgency=medium
   * Bug fix: show cookie baner only when cookie baner link is provided (#304)
+  * Bug fix: when link to submap is provided add submap name (#303)
+  * Bug fix: some old maps could not be opened (#311)
 
  -- Piotr Gawron <piotr.gawron@uni.lu>  Thu, 24 Oct 2024 13:00:00 +0200
 

docs/plugins/plugins.md

@@ -11,6 +11,7 @@ Your plugin should utilize the `window.minerva.plugins.registerPlugin` method fo
   pluginName: string;
   pluginVersion: string;
   pluginUrl: string;
+  withoutPanel: boolean | undefined;
 }
 ```
 
@@ -21,6 +22,7 @@ window.minerva.plugins.registerPlugin({
   pluginName: 'Your Plugin Name',
   pluginVersion: '1.8.3',
   pluginUrl: 'https://example.com/plugins/plugin.js',
+  withoutPanel: false,
 });
 ```
 
@@ -28,17 +30,17 @@ window.minerva.plugins.registerPlugin({
 
 The `window.minerva.plugins.registerPlugin` method returns object with `element` property which is a DOM element, allowing your plugin to append its HTML content to the DOM. Use this element to create and modify the HTML structure of your plugin.
 
-```
+```javascript
 // Plugin registration
 const { element } = window.minerva.plugins.registerPlugin({
-  pluginName: "Your Plugin Name",
-  pluginVersion: "1.0.0",
-  pluginUrl: "your-plugin-url",
+  pluginName: 'Your Plugin Name',
+  pluginVersion: '1.0.0',
+  pluginUrl: 'your-plugin-url',
 });
 
 // Modify plugin's HTML structure
 const yourContent = document.createElement('div');
-yourContent.textContent = "Your Plugin Content";
+yourContent.textContent = 'Your Plugin Content';
 element.appendChild(yourContent);
 ```
 

index.d.ts

@@ -3,15 +3,12 @@ import { fitBounds } from '@/services/pluginsManager/map/fitBounds';
 import { getOpenMapId } from '@/services/pluginsManager/map/getOpenMapId';
 import { triggerSearch } from '@/services/pluginsManager/map/triggerSearch';
 import { MinervaConfiguration } from '@/services/pluginsManager/pluginsManager';
-import { MapInstance } from '@/types/map';
 import { getModels } from '@/services/pluginsManager/map/models/getModels';
 import { openMap } from '@/services/pluginsManager/map/openMap';
 import { getCenter } from '@/services/pluginsManager/map/position/getCenter';
 import { setCenter } from '@/services/pluginsManager/map/position/setCenter';
-import { triggerSearch } from '@/services/pluginsManager/map/triggerSearch';
 import { getZoom } from '@/services/pluginsManager/map/zoom/getZoom';
 import { setZoom } from '@/services/pluginsManager/map/zoom/setZoom';
-import { MinervaConfiguration } from '@/services/pluginsManager/pluginsManager';
 import { getDisease } from '@/services/pluginsManager/project/data/getDisease';
 import { getName } from '@/services/pluginsManager/project/data/getName';
 import { getOrganism } from '@/services/pluginsManager/project/data/getOrganism';
@@ -29,6 +26,7 @@ type Plugin = {
   pluginName: string;
   pluginVersion: string;
   pluginUrl: string;
+  withoutPanel: boolean | undefined;
 };
 
 type RegisterPlugin = ({ pluginName, pluginVersion, pluginUrl }: Plugin) => {

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

@@ -9,11 +9,9 @@ import {
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
 import { act, render, screen, within } from '@testing-library/react';
+import { HISTAMINE_MAP_ID, MAIN_MAP_ID } from '@/constants/mocks';
 import { MapNavigation } from './MapNavigation.component';
 
-const MAIN_MAP_ID = 5053;
-const HISTAMINE_MAP_ID = 5052;
-
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
   const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
 

src/components/FunctionalArea/Modal/ToSModal/ToSModal.component.tsx

@@ -3,7 +3,7 @@ import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { Button } from '@/shared/Button';
 
 import { getSessionValid, logout, updateUser } from '@/redux/user/user.thunks';
-import { closeModal } from '@/redux/modal/modal.slice';
+import { closeModal, openSelectProjectModal } from '@/redux/modal/modal.slice';
 import { userSelector } from '@/redux/user/user.selectors';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { termsOfServiceValSelector } from '@/redux/configuration/configuration.selectors';
@@ -15,13 +15,14 @@ export const ToSModal: React.FC = () => {
   const termsOfService = useAppSelector(termsOfServiceValSelector);
 
   const updateUserTosHandler = async (): Promise<void> => {
-    // eslint-disable-next-line no-console
-    console.log('update');
     if (userData) {
       const user = { ...userData, termsOfUseConsent: true };
       await dispatch(updateUser(user));
       await dispatch(getSessionValid());
       dispatch(closeModal());
+      if (userData.orcidId && userData.orcidId !== '') {
+        dispatch(openSelectProjectModal());
+      }
     }
   };
 

src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx

@@ -16,7 +16,9 @@ export const LoadPlugin = ({ plugin }: Props): JSX.Element => {
     hash: plugin.hash,
     pluginUrl: plugin.urls[0],
     onPluginLoaded: () => {
-      dispatch(setCurrentDrawerPluginHash(plugin.hash));
+      if (!plugin.withoutPanel) {
+        dispatch(setCurrentDrawerPluginHash(plugin.hash));
+      }
     },
   });
 

src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin.ts

@@ -3,7 +3,7 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { isActiveLegendSelector } from '@/redux/legend/legend.selectors';
 import { removePluginLegend, setDefaultLegendId } from '@/redux/legend/legend.slice';
 import {
-  allActivePluginsSelector,
+  allActivePluginsWithPanelSelector,
   isPluginActiveSelector,
   isPluginLoadingSelector,
   isPluginSelectedSelector,
@@ -42,12 +42,12 @@ export const useLoadPlugin = ({
   const isPluginLoading = useAppSelector(state => isPluginLoadingSelector(state, hash));
   const isPluginSelected = useAppSelector(state => isPluginSelectedSelector(state, hash));
   const isActivePluginLegend = useAppSelector(state => isActiveLegendSelector(state, hash));
-  const allActivePlugins = useAppSelector(allActivePluginsSelector);
+  const allActivePluginsWithPanel = useAppSelector(allActivePluginsWithPanelSelector);
 
   const dispatch = useAppDispatch();
 
   const setLastPluginAsCurrentActivePlugin = (): void => {
-    const newAllActivePlugins = allActivePlugins.filter(p => p.hash !== hash);
+    const newAllActivePlugins = allActivePluginsWithPanel.filter(p => p.hash !== hash);
     const lastActivePlugin = newAllActivePlugins.pop();
     if (lastActivePlugin) {
       dispatch(setCurrentDrawerPluginHash(lastActivePlugin.hash));

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

@@ -19,7 +19,7 @@ export const AssociatedSubmap = (): React.ReactNode => {
       data-testid="associated-submap"
       className="flex flex-row flex-nowrap items-center justify-between"
     >
-      <p>Associated Submap: </p>
+      <p>Associated Submap: {relatedSubmap.name}</p>
       <Button className="max-h-8" variantStyles="ghost" onClick={openSubmap}>
         Open submap
       </Button>

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

@@ -11,6 +11,7 @@ import {
 } from '@/utils/testing/getReduxWrapperWithStore';
 import { render, screen } from '@testing-library/react';
 import { MockStoreEnhanced } from 'redux-mock-store';
+import { HISTAMINE_MAP_ID, MAIN_MAP_ID, PRKN_SUBSTRATES_MAP_ID } from '@/constants/mocks';
 import { BioEntitiesAccordion } from './BioEntitiesAccordion.component';
 
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -95,10 +96,22 @@ describe('BioEntitiesAccordion - component', () => {
       },
     });
 
-    expect(screen.getByText('Content (10)')).toBeInTheDocument();
-    expect(screen.getByText('Core PD map (6)')).toBeInTheDocument();
-    expect(screen.getByText('Histamine signaling (2)')).toBeInTheDocument();
-    expect(screen.getByText('PRKN substrates (2)')).toBeInTheDocument();
+    const countHistamine = bioEntitiesContentFixture.filter(
+      content => content.bioEntity.model === HISTAMINE_MAP_ID,
+    ).length;
+    const countCore = bioEntitiesContentFixture.filter(
+      content => content.bioEntity.model === MAIN_MAP_ID,
+    ).length;
+    const countPrkn = bioEntitiesContentFixture.filter(
+      content => content.bioEntity.model === PRKN_SUBSTRATES_MAP_ID,
+    ).length;
+
+    const countAll = bioEntitiesContentFixture.length;
+
+    expect(screen.getByText(`Content (${countAll})`)).toBeInTheDocument();
+    expect(screen.getByText(`Core PD map (${countCore})`)).toBeInTheDocument();
+    expect(screen.getByText(`Histamine signaling (${countHistamine})`)).toBeInTheDocument();
+    expect(screen.getByText(`PRKN substrates (${countPrkn})`)).toBeInTheDocument();
   });
 
   it('should fire toggleIsContentTabOpened on accordion item button click', () => {

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

@@ -62,6 +62,11 @@ const renderComponent = (
 };
 
 describe('PinsListItem - component ', () => {
+  drugsFixture[0].targets[0].targetParticipants[0].link = 'https://example.com/plugin.js';
+  drugsFixture[0].targets[0].targetParticipants[1].link = 'https://example.com/plugin.js';
+  chemicalsFixture[0].targets[0].targetParticipants[0].link = 'https://example.com/plugin.js';
+  chemicalsFixture[0].targets[0].targetParticipants[1].link = 'https://example.com/plugin.js';
+
   it('should display full name of pin', () => {
     renderComponent(DRUGS_PIN.name, DRUGS_PIN.pin, 'drugs', BIO_ENTITY, INITIAL_STORE_STATE);
 

src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/DownloadSubmap.component.tsx

@@ -2,18 +2,34 @@ import { formatsHandlersSelector } from '@/redux/configuration/configuration.sel
 import { Button } from '@/shared/Button';
 import { useSelect } from 'downshift';
 import { useSelector } from 'react-redux';
+import Image from 'next/image';
+import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
+import { useState } from 'react';
+import { downloadFileFromUrl } from '@/redux/export/export.utils';
 import { SUBMAP_DOWNLOAD_HANDLERS_NAMES } from './DownloadSubmap.constants';
 import { useGetSubmapDownloadUrl } from './utils/useGetSubmapDownloadUrl';
 
-export const DownloadSubmap = (): JSX.Element => {
+export const DownloadSubmap = (): React.ReactNode => {
   const formatsHandlers = useSelector(formatsHandlersSelector);
   const formatsHandlersItems = Object.entries(formatsHandlers);
   const getSubmapDownloadUrl = useGetSubmapDownloadUrl();
 
-  const { isOpen, getToggleButtonProps, getMenuProps } = useSelect({
+  const [isDownloading, setIsDownloading] = useState<boolean>(false);
+
+  const { isOpen, getToggleButtonProps, getMenuProps, closeMenu } = useSelect({
     items: formatsHandlersItems,
   });
 
+  const downloadSubmap = (handler: string) => {
+    return function () {
+      closeMenu();
+      setIsDownloading(true);
+      downloadFileFromUrl(getSubmapDownloadUrl({ handler })).finally(function () {
+        setIsDownloading(false);
+      });
+    };
+  };
+
   return (
     <div className="relative">
       <Button
@@ -22,6 +38,15 @@ export const DownloadSubmap = (): JSX.Element => {
         className="mr-4"
         {...getToggleButtonProps()}
       >
+        {isDownloading && (
+          <Image
+            src={spinnerIcon}
+            alt="spinner icon"
+            height={12}
+            width={12}
+            className="mr-5 animate-spin"
+          />
+        )}
         Download
       </Button>
       <ul
@@ -34,14 +59,13 @@ export const DownloadSubmap = (): JSX.Element => {
         {isOpen &&
           formatsHandlersItems.map(([formatId, handler]) => (
             <li key={formatId}>
-              <a
-                className="flex flex-col border-t px-4 py-2 shadow-sm"
-                href={getSubmapDownloadUrl({ handler })}
-                target="_blank"
-                download
+              <Button
+                variantStyles="ghost"
+                className="flex w-full flex-col border-t px-4 py-2 shadow-sm"
+                onClick={downloadSubmap(handler)}
               >
-                <span>{SUBMAP_DOWNLOAD_HANDLERS_NAMES[formatId]}</span>
-              </a>
+                {SUBMAP_DOWNLOAD_HANDLERS_NAMES[formatId]}
+              </Button>
             </li>
           ))}
       </ul>

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

@@ -6,7 +6,11 @@ import { useEffect, useMemo } from 'react';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
 import MapElement from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement';
 import { useSelector } from 'react-redux';
-import { bioShapesSelector, lineTypesSelector } from '@/redux/shapes/shapes.selectors';
+import {
+  arrowTypesSelector,
+  bioShapesSelector,
+  lineTypesSelector,
+} from '@/redux/shapes/shapes.selectors';
 import { MapInstance } from '@/types/map';
 import {
   HorizontalAlign,
@@ -21,6 +25,9 @@ import CompartmentCircle from '@/components/Map/MapViewer/MapViewerVector/utils/
 import { ModelElement } from '@/types/models';
 import Glyph from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph';
 import CompartmentPathway from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway';
+import Reaction from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction';
+import { newReactionsDataSelector } from '@/redux/newReactions/newReactions.selectors';
+import { getNewReactions } from '@/redux/newReactions/newReactions.thunks';
 
 export const useOlMapReactionsLayer = ({
   mapInstance,
@@ -29,14 +36,40 @@ export const useOlMapReactionsLayer = ({
 }): VectorLayer<VectorSource<Feature>> => {
   const dispatch = useAppDispatch();
   const modelElements = useSelector(modelElementsSelector);
+  const modelReactions = useSelector(newReactionsDataSelector);
   const currentModelId = useSelector(currentModelIdSelector);
   useEffect(() => {
     dispatch(getModelElements(currentModelId));
+    dispatch(getNewReactions(currentModelId));
   }, [currentModelId, dispatch]);
 
   const pointToProjection = usePointToProjection();
   const shapes = useSelector(bioShapesSelector);
   const lineTypes = useSelector(lineTypesSelector);
+  const arrowTypes = useSelector(arrowTypesSelector);
+
+  const reactions = useMemo(() => {
+    return modelReactions.map(reaction => {
+      const shape = shapes.find(bioShape => bioShape.sboTerm === reaction.sboTerm);
+      if (!shape) {
+        return [];
+      }
+      const reactionObject = new Reaction({
+        line: reaction.line,
+        products: reaction.products,
+        reactants: reaction.reactants,
+        modifiers: reaction.modifiers,
+        operators: reaction.operators,
+        zIndex: reaction.z,
+        lineTypes,
+        arrowTypes,
+        shapes: shape.shapes,
+        pointToProjection,
+        mapInstance,
+      });
+      return reactionObject.features;
+    });
+  }, [arrowTypes, lineTypes, mapInstance, modelReactions, pointToProjection, shapes]);
 
   const elements: Array<
     MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway | Glyph
@@ -135,8 +168,10 @@ export const useOlMapReactionsLayer = ({
   }, [modelElements, shapes, pointToProjection, mapInstance, lineTypes]);
 
   const features = useMemo(() => {
-    return elements.map(element => element.feature);
-  }, [elements]);
+    const reactionsFeatures = reactions.flat();
+    const elementsFeatures = elements.map(element => element.feature);
+    return [...reactionsFeatures, ...elementsFeatures];
+  }, [elements, reactions]);
 
   const vectorSource = useMemo(() => {
     return new VectorSource({

src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCentroid.test.ts → src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCenter.test.ts

 /* eslint-disable no-magic-numbers */
 import { Coordinate } from 'ol/coordinate';
-import getCentroid from './getCentroid';
+import getCenter from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCenter';
 
-describe('getCentroid', () => {
-  it('should return a centroid for coordinates', () => {
+describe('getCenter', () => {
+  it('should return a center for coordinates', () => {
     const coords: Array<Coordinate> = [
       [0, 0],
       [20, 0],
@@ -13,9 +13,9 @@ describe('getCentroid', () => {
       [0, 20],
     ];
 
-    const result = getCentroid(coords);
+    const result = getCenter(coords);
 
-    expect(result[0]).toBeCloseTo(13.46);
-    expect(result[1]).toBeCloseTo(12.05);
+    expect(result[0]).toBeCloseTo(17.5);
+    expect(result[1]).toBeCloseTo(15);
   });
 });

src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCenter.ts

+/* eslint-disable no-magic-numbers */
+import { Coordinate } from 'ol/coordinate';
+
+export default function getCenter(coords: Array<Coordinate>): Coordinate {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  coords.forEach(([x, y]) => {
+    if (x < minX) {
+      minX = x;
+    }
+    if (x > maxX) {
+      maxX = x;
+    }
+    if (y < minY) {
+      minY = y;
+    }
+    if (y > maxY) {
+      maxY = y;
+    }
+  });
+
+  const centerX = (minX + maxX) / 2;
+  const centerY = (minY + maxY) / 2;
+
+  return [centerX, centerY];
+}

src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getCentroid.ts

-/* eslint-disable no-magic-numbers */
-import { Coordinate } from 'ol/coordinate';
-
-export default function getCentroid(coords: Array<Coordinate>): Coordinate {
-  let area = 0;
-  let centroidX = 0;
-  let centroidY = 0;
-  const numPoints = coords.length;
-
-  for (let i = 0; i < numPoints; i += 1) {
-    const x1 = coords[i][0];
-    const y1 = coords[i][1];
-    const x2 = coords[(i + 1) % numPoints][0];
-    const y2 = coords[(i + 1) % numPoints][1];
-    const crossProduct = x1 * y2 - x2 * y1;
-    area += crossProduct;
-    centroidX += (x1 + x2) * crossProduct;
-    centroidY += (y1 + y2) * crossProduct;
-  }
-
-  area /= 2;
-
-  centroidX /= 6 * area;
-  centroidY /= 6 * area;
-
-  return [centroidX, centroidY];
-}

src/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getPolygonCoords.ts

@@ -45,6 +45,8 @@ export default function getPolygonCoords({
       return [[...lastPoint]];
     }
     const { p1, p2, p3 } = getCurveCoords({ x, y, point, height, width, pointToProjection });
-    return getBezierCurve({ p0: lastPoint, p1, p2, p3, numPoints: 20 });
+    const p0 = lastPoint;
+    lastPoint = p3;
+    return getBezierCurve({ p0, p1, p2, p3, numPoints: 20 });
   });
 }

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

@@ -73,6 +73,8 @@ export default abstract class BaseMultiPolygon {
 
   polygonsTexts: Array<string> = [];
 
+  lineWidths: Array<number> = [];
+
   feature: Feature = new Feature();
 
   pointToProjection: UsePointToProjectionResult;
@@ -159,26 +161,32 @@ export default abstract class BaseMultiPolygon {
       },
     });
 
-    this.feature.setStyle(this.styleFunction.bind(this));
+    this.feature.setStyle(this.getStyle.bind(this));
   }
 
-  protected styleFunction(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+  protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
     const getTextScale = feature.get('getTextScale');
     let textScale = 1;
     if (getTextScale instanceof Function) {
       textScale = getTextScale(resolution);
     }
-    let index = 0;
+    let textIndex = 0;
+    let strokeIndex = 0;
     this.styles.forEach(style => {
       if (style.getText()) {
         if (this.fontSize * textScale > 4) {
           style.getText()?.setScale(textScale);
-          style.getText()?.setText(this.polygonsTexts[index]);
-          index += 1;
+          style.getText()?.setText(this.polygonsTexts[textIndex]);
+          textIndex += 1;
         } else {
           style.getText()?.setText(undefined);
         }
       }
+      if (style.getStroke()) {
+        const lineWidth = this.lineWidths[strokeIndex] * textScale;
+        style.getStroke()?.setWidth(lineWidth);
+        strokeIndex += 1;
+      }
     });
     return this.styles;
   }

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

@@ -121,6 +121,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
         zIndex: this.zIndex,
       }),
     );
+    this.lineWidths.push(this.outerWidth);
     this.polygons.push(outerPolygon);
 
     const innerPolygon = new Polygon([this.innerCoords]);
@@ -132,6 +133,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
         zIndex: this.zIndex,
       }),
     );
+    this.lineWidths.push(this.innerWidth);
     this.polygons.push(innerPolygon);
   }
 }

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts

 /* eslint-disable no-magic-numbers */
 import { Feature, Map } from 'ol';
-import { Fill, Style, Text } from 'ol/style';
+import { Fill, Stroke, Style, Text } from 'ol/style';
 import { Polygon, MultiPolygon } from 'ol/geom';
 import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
-import getMultiPolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getMultiPolygon';
+import getShapePolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getShapePolygon';
 import getStroke from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStroke';
 import getFill from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getFill';
 import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex';
@@ -20,7 +20,7 @@ import getTextCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shap
 
 jest.mock('../text/getTextStyle');
 jest.mock('../text/getTextCoords');
-jest.mock('./getMultiPolygon');
+jest.mock('./getShapePolygon');
 jest.mock('../style/getStroke');
 jest.mock('../coords/getEllipseCoords');
 jest.mock('../style/getFill');
@@ -78,7 +78,7 @@ describe('MapElement', () => {
       }),
     );
     (getTextCoords as jest.Mock).mockReturnValue([10, 10]);
-    (getMultiPolygon as jest.Mock).mockReturnValue([
+    (getShapePolygon as jest.Mock).mockReturnValue(
       new Polygon([
         [
           [0, 0],
@@ -86,8 +86,8 @@ describe('MapElement', () => {
           [2, 2],
         ],
       ]),
-    ]);
-    (getStroke as jest.Mock).mockReturnValue(new Style());
+    );
+    (getStroke as jest.Mock).mockReturnValue(new Stroke());
     (getFill as jest.Mock).mockReturnValue(new Style());
     (rgbToHex as jest.Mock).mockReturnValue('#FFFFFF');
     (getEllipseCoords as jest.Mock).mockReturnValue([

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts

 /* eslint-disable no-magic-numbers */
 import { Feature, Map } from 'ol';
-import { Fill, Style, Text } from 'ol/style';
+import { Fill, Stroke, Style, Text } from 'ol/style';
 import { Polygon, MultiPolygon } from 'ol/geom';
 import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
-import getMultiPolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getMultiPolygon';
+import getShapePolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getShapePolygon';
 import getStroke from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStroke';
 import getFill from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getFill';
 import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex';
@@ -20,7 +20,7 @@ import getTextCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shap
 
 jest.mock('../text/getTextStyle');
 jest.mock('../text/getTextCoords');
-jest.mock('./getMultiPolygon');
+jest.mock('./getShapePolygon');
 jest.mock('../style/getStroke');
 jest.mock('../coords/getEllipseCoords');
 jest.mock('../style/getFill');
@@ -76,7 +76,7 @@ describe('MapElement', () => {
       }),
     );
     (getTextCoords as jest.Mock).mockReturnValue([10, 10]);
-    (getMultiPolygon as jest.Mock).mockReturnValue([
+    (getShapePolygon as jest.Mock).mockReturnValue(
       new Polygon([
         [
           [0, 0],
@@ -84,8 +84,8 @@ describe('MapElement', () => {
           [2, 2],
         ],
       ]),
-    ]);
-    (getStroke as jest.Mock).mockReturnValue(new Style());
+    );
+    (getStroke as jest.Mock).mockReturnValue(new Stroke());
     (getFill as jest.Mock).mockReturnValue(new Style());
     (rgbToHex as jest.Mock).mockReturnValue('#FFFFFF');
     (getEllipseCoords as jest.Mock).mockReturnValue([
@@ -107,7 +107,7 @@ describe('MapElement', () => {
     const multiPolygon = new CompartmentPathway(props);
     const { feature } = multiPolygon;
 
-    const style = feature.getStyleFunction()?.call(multiPolygon, feature, 1);
+    const style = feature.getStyleFunction()?.call(multiPolygon, feature, 3000);
 
     if (Array.isArray(style)) {
       expect(style.length).toBeGreaterThan(0);