test: add tests for overview image interactive layer

src/components/FunctionalArea/Modal/OverviewImagesModal/OverviewImagesModal.constants.ts

+import { OverviewImageLinkConfigSize } from './OverviewImageModal.types';
+
+export const DEFAULT_OVERVIEW_IMAGE_LINK_CONFIG: OverviewImageLinkConfigSize = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+};

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

+import { OverviewImageLink } from '@/types/models';
+import { OverviewImageLinkConfigSize } from '../OverviewImageModal.types';
+import { DEFAULT_OVERVIEW_IMAGE_LINK_CONFIG } from '../OverviewImagesModal.constants';
+import { getOverviewImageLinkSize } from './getOverviewImageLinkSize';
+
+describe('getOverviewImageLinkSize - util', () => {
+  const cases: [
+    Pick<OverviewImageLink, 'polygon'>,
+    {
+      sizeFactor: number;
+    },
+    OverviewImageLinkConfigSize,
+  ][] = [
+    // invalid polygon
+    [
+      {
+        polygon: [],
+      },
+      {
+        sizeFactor: 1,
+      },
+      DEFAULT_OVERVIEW_IMAGE_LINK_CONFIG,
+    ],
+    // invalid polygon
+    [
+      {
+        polygon: [
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+        ],
+      },
+      {
+        sizeFactor: 1,
+      },
+      DEFAULT_OVERVIEW_IMAGE_LINK_CONFIG,
+    ],
+    // valid polygon with size of 0x0
+    [
+      {
+        polygon: [
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+        ],
+      },
+      {
+        sizeFactor: 1,
+      },
+      {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+      },
+    ],
+    // valid polygon with size of 20x50
+    [
+      {
+        polygon: [
+          { x: 10, y: 0 },
+          { x: 30, y: 0 },
+          { x: 30, y: 50 },
+          { x: 10, y: 50 },
+        ],
+      },
+      {
+        sizeFactor: 1,
+      },
+      {
+        top: 0,
+        left: 10,
+        width: 20,
+        height: 50,
+      },
+    ],
+    // valid polygon with size of 27x67.5 in scale of 1.35
+    [
+      {
+        polygon: [
+          { x: 10, y: 0 },
+          { x: 30, y: 0 },
+          { x: 30, y: 50 },
+          { x: 10, y: 50 },
+        ],
+      },
+      {
+        sizeFactor: 1.35,
+      },
+      {
+        height: 67.5,
+        left: 13.5,
+        top: 0,
+        width: 27,
+      },
+    ],
+  ];
+
+  it.each(cases)(
+    'should return valid link config size',
+    (overviewImageWithPolygon, options, finalConfigSize) => {
+      expect(getOverviewImageLinkSize(overviewImageWithPolygon, options)).toStrictEqual(
+        finalConfigSize,
+      );
+    },
+  );
+});

src/components/FunctionalArea/Modal/OverviewImagesModal/utils/getOverviewImageLinkSize.ts

+import { SIZE_OF_ARRAY_WITH_FOUR_ELEMENTS } from '@/constants/common';
 import { OverviewImageLink } from '@/types/models';
 import { OverviewImageLinkConfigSize } from '../OverviewImageModal.types';
+import { DEFAULT_OVERVIEW_IMAGE_LINK_CONFIG } from '../OverviewImagesModal.constants';
 
 export const getOverviewImageLinkSize = (
-  { polygon }: OverviewImageLink,
+  { polygon }: Pick<OverviewImageLink, 'polygon'>,
   {
     sizeFactor,
   }: {
     sizeFactor: number;
   },
 ): OverviewImageLinkConfigSize => {
+  // valid polygon needs to have four points
+  if (polygon.length < SIZE_OF_ARRAY_WITH_FOUR_ELEMENTS) {
+    return DEFAULT_OVERVIEW_IMAGE_LINK_CONFIG;
+  }
+
   const polygonScaled = polygon.map(({ x, y }) => ({ x: x * sizeFactor, y: y * sizeFactor }));
   const [pointTopLeft, , pointBottomRight] = polygonScaled;
   const width = pointBottomRight.x - pointTopLeft.x;

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

+import { projectFixture } from '@/models/fixtures/projectFixture';
+import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
+import {
+  OVERVIEW_LINK_IMAGE_MOCK,
+  OVERVIEW_LINK_MODEL_MOCK,
+} from '@/models/mocks/overviewImageMocks';
+import {
+  initialMapDataFixture,
+  openedMapsInitialValueFixture,
+  openedMapsThreeSubmapsFixture,
+} from '@/redux/map/map.fixtures';
+import { MODAL_INITIAL_STATE_MOCK } from '@/redux/modal/modal.mock';
+import { PROJECT_OVERVIEW_IMAGE_MOCK } from '@/redux/project/project.mock';
+import { OverviewImageLink } from '@/types/models';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import {
+  FIRST_ARRAY_ELEMENT,
+  NOOP,
+  SECOND_ARRAY_ELEMENT,
+  SIZE_OF_EMPTY_ARRAY,
+  THIRD_ARRAY_ELEMENT,
+} from '../../../../../constants/common';
+import { useOverviewImageLinkActions } from './useOverviewImageLinkActions';
+
+jest.mock('../../../../../constants/common', () => ({
+  ...jest.requireActual('../../../../../constants/common'),
+  NOOP: jest.fn(),
+}));
+
+describe('useOverviewImageLinkActions - hook', () => {
+  describe('when clicked on image link', () => {
+    describe('when image id is NOT valid', () => {
+      const { Wrapper, store } = getReduxStoreWithActionsListener({
+        project: {
+          data: {
+            ...projectFixture,
+            overviewImageViews: [],
+            topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+          },
+          loading: 'succeeded',
+          error: { message: '', name: '' },
+        },
+        modal: {
+          ...MODAL_INITIAL_STATE_MOCK,
+          overviewImagesState: {
+            imageId: 0,
+          },
+        },
+        map: {
+          data: {
+            ...initialMapDataFixture,
+            modelId: 5053,
+          },
+          loading: 'succeeded',
+          error: { name: '', message: '' },
+          openedMaps: openedMapsThreeSubmapsFixture,
+        },
+      });
+
+      const {
+        result: {
+          current: { handleLinkClick },
+        },
+      } = renderHook(() => useOverviewImageLinkActions(), {
+        wrapper: Wrapper,
+      });
+
+      it('should NOT fire action set overview image id', () => {
+        handleLinkClick(OVERVIEW_LINK_IMAGE_MOCK);
+        const actions = store.getActions();
+        expect(actions.length).toEqual(SIZE_OF_EMPTY_ARRAY);
+      });
+    });
+
+    describe('when image id is valid', () => {
+      const { Wrapper, store } = getReduxStoreWithActionsListener({
+        project: {
+          data: {
+            ...projectFixture,
+            overviewImageViews: [
+              {
+                ...PROJECT_OVERVIEW_IMAGE_MOCK,
+                height: 500,
+                width: 500,
+              },
+            ],
+            topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+          },
+          loading: 'succeeded',
+          error: { message: '', name: '' },
+        },
+        modal: {
+          ...MODAL_INITIAL_STATE_MOCK,
+          overviewImagesState: {
+            imageId: PROJECT_OVERVIEW_IMAGE_MOCK.idObject,
+          },
+        },
+        map: {
+          data: {
+            ...initialMapDataFixture,
+            modelId: 5053,
+          },
+          loading: 'succeeded',
+          error: { name: '', message: '' },
+          openedMaps: openedMapsThreeSubmapsFixture,
+        },
+      });
+
+      const {
+        result: {
+          current: { handleLinkClick },
+        },
+      } = renderHook(() => useOverviewImageLinkActions(), {
+        wrapper: Wrapper,
+      });
+
+      it('should fire action set overview image id', () => {
+        handleLinkClick(OVERVIEW_LINK_IMAGE_MOCK);
+        const actions = store.getActions();
+        expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+          payload: 440,
+          type: 'modal/setOverviewImageId',
+        });
+      });
+    });
+  });
+  describe('when clicked on model link', () => {
+    describe('when model is not available', () => {});
+
+    describe('when model is available', () => {
+      describe('when map is already opened', () => {
+        const { Wrapper, store } = getReduxStoreWithActionsListener({
+          project: {
+            data: {
+              ...projectFixture,
+              overviewImageViews: [
+                {
+                  ...PROJECT_OVERVIEW_IMAGE_MOCK,
+                  height: 500,
+                  width: 500,
+                },
+              ],
+              topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+            },
+            loading: 'succeeded',
+            error: { message: '', name: '' },
+          },
+          modal: {
+            ...MODAL_INITIAL_STATE_MOCK,
+            overviewImagesState: {
+              imageId: PROJECT_OVERVIEW_IMAGE_MOCK.idObject,
+            },
+          },
+          map: {
+            data: {
+              ...initialMapDataFixture,
+              modelId: 5053,
+            },
+            loading: 'succeeded',
+            error: { name: '', message: '' },
+            openedMaps: openedMapsThreeSubmapsFixture,
+          },
+          models: {
+            data: MODELS_MOCK_SHORT,
+            loading: 'succeeded',
+            error: { name: '', message: '' },
+          },
+        });
+
+        const {
+          result: {
+            current: { handleLinkClick },
+          },
+        } = renderHook(() => useOverviewImageLinkActions(), {
+          wrapper: Wrapper,
+        });
+
+        it('should set active map', () => {
+          handleLinkClick(OVERVIEW_LINK_MODEL_MOCK);
+          const actions = store.getActions();
+          expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+            payload: {
+              modelId: 5053,
+            },
+            type: 'map/setActiveMap',
+          });
+        });
+
+        it('should set map position', () => {
+          handleLinkClick(OVERVIEW_LINK_MODEL_MOCK);
+          const actions = store.getActions();
+          expect(actions[SECOND_ARRAY_ELEMENT]).toStrictEqual({
+            payload: { x: 15570, y: 3016, z: 7 },
+            type: 'map/setMapPosition',
+          });
+        });
+
+        it('should close modal', () => {
+          handleLinkClick(OVERVIEW_LINK_MODEL_MOCK);
+          const actions = store.getActions();
+          expect(actions[THIRD_ARRAY_ELEMENT]).toStrictEqual({
+            payload: undefined,
+            type: 'modal/closeModal',
+          });
+        });
+      });
+
+      describe('when map is not opened', () => {
+        const { Wrapper, store } = getReduxStoreWithActionsListener({
+          project: {
+            data: {
+              ...projectFixture,
+              overviewImageViews: [
+                {
+                  ...PROJECT_OVERVIEW_IMAGE_MOCK,
+                  height: 500,
+                  width: 500,
+                },
+              ],
+              topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+            },
+            loading: 'succeeded',
+            error: { message: '', name: '' },
+          },
+          modal: {
+            ...MODAL_INITIAL_STATE_MOCK,
+            overviewImagesState: {
+              imageId: PROJECT_OVERVIEW_IMAGE_MOCK.idObject,
+            },
+          },
+          map: {
+            data: {
+              ...initialMapDataFixture,
+              modelId: 5053,
+            },
+            loading: 'succeeded',
+            error: { name: '', message: '' },
+            openedMaps: openedMapsInitialValueFixture,
+          },
+          models: {
+            data: MODELS_MOCK_SHORT,
+            loading: 'succeeded',
+            error: { name: '', message: '' },
+          },
+        });
+
+        const {
+          result: {
+            current: { handleLinkClick },
+          },
+        } = renderHook(() => useOverviewImageLinkActions(), {
+          wrapper: Wrapper,
+        });
+
+        it('should open map and set as active', () => {
+          handleLinkClick(OVERVIEW_LINK_MODEL_MOCK);
+          const actions = store.getActions();
+          expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+            payload: {
+              modelId: 5053,
+              modelName: 'Core PD map',
+            },
+            type: 'map/openMapAndSetActive',
+          });
+        });
+
+        it('should set map position', () => {
+          handleLinkClick(OVERVIEW_LINK_MODEL_MOCK);
+          const actions = store.getActions();
+          expect(actions[SECOND_ARRAY_ELEMENT]).toStrictEqual({
+            payload: { x: 15570, y: 3016, z: 7 },
+            type: 'map/setMapPosition',
+          });
+        });
+
+        it('should close modal', () => {
+          handleLinkClick(OVERVIEW_LINK_MODEL_MOCK);
+          const actions = store.getActions();
+          expect(actions[THIRD_ARRAY_ELEMENT]).toStrictEqual({
+            payload: undefined,
+            type: 'modal/closeModal',
+          });
+        });
+      });
+    });
+  });
+  describe('when clicked on unsupported link', () => {
+    const { Wrapper } = getReduxWrapperWithStore();
+    const {
+      result: {
+        current: { handleLinkClick },
+      },
+    } = renderHook(() => useOverviewImageLinkActions(), {
+      wrapper: Wrapper,
+    });
+
+    it('should noop', () => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore to simulate invalid link object
+      handleLinkClick({ link: {} as unknown as OverviewImageLink });
+      expect(NOOP).toBeCalled();
+    });
+  });
+});

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

@@ -5,41 +5,45 @@ import { mapOpenedMapsSelector } from '@/redux/map/map.selectors';
 import { openMapAndSetActive, setActiveMap, setMapPosition } from '@/redux/map/map.slice';
 import { closeModal, setOverviewImageId } from '@/redux/modal/modal.slice';
 import { modelsDataSelector } from '@/redux/models/models.selectors';
-import { MapModel, OverviewImageLink } from '@/types/models';
+import { projectOverviewImagesSelector } from '@/redux/project/project.selectors';
+import { MapModel, OverviewImageLink, OverviewImageLinkModel } from '@/types/models';
 import {
   OverviewImageLinkImageHandler,
   OverviewImageLinkModelHandler,
 } from '../OverviewImageModal.types';
 
 interface UseOverviewImageLinkActionsResult {
-  handleOnLinkClick(link: OverviewImageLink): void;
+  handleLinkClick(link: OverviewImageLink): void;
 }
 
-export const useOvervieImageLinkActions = (): UseOverviewImageLinkActionsResult => {
+export const useOverviewImageLinkActions = (): UseOverviewImageLinkActionsResult => {
   const dispatch = useAppDispatch();
   const openedMaps = useAppSelector(mapOpenedMapsSelector);
   const models = useAppSelector(modelsDataSelector);
+  const overviewImages = useAppSelector(projectOverviewImagesSelector);
 
-  const isMapAlreadyOpened = (modelId: number): boolean =>
+  const checkIfImageIsAvailable = (imageId: number): boolean =>
+    overviewImages.some(image => image.idObject === imageId);
+
+  const checkIfMapAlreadyOpened = (modelId: number): boolean =>
     openedMaps.some(map => map.modelId === modelId);
 
   const getModelById = (modelId: number): MapModel | undefined =>
     models.find(map => map.idObject === modelId);
 
-  const onSubmapClick: OverviewImageLinkModelHandler = link => {
-    const modelId = link.modelLinkId;
-    const model = getModelById(modelId);
-    const isMapOpened = isMapAlreadyOpened(modelId);
-    if (!model) {
-      return;
-    }
+  const handleOpenMap = (model: MapModel): void => {
+    const modelId = model.idObject;
+    const isMapOpened = checkIfMapAlreadyOpened(modelId);
 
     if (isMapOpened) {
       dispatch(setActiveMap({ modelId }));
-    } else {
-      dispatch(openMapAndSetActive({ modelId, modelName: model.name }));
+      return;
     }
 
+    dispatch(openMapAndSetActive({ modelId, modelName: model.name }));
+  };
+
+  const handleSetMapPosition = (link: OverviewImageLinkModel, model: MapModel): void => {
     dispatch(
       setMapPosition({
         x: link.modelPoint.x,
@@ -47,26 +51,45 @@ export const useOvervieImageLinkActions = (): UseOverviewImageLinkActionsResult
         z: link.zoomLevel + model.minZoom,
       }),
     );
+  };
+
+  const onSubmapClick: OverviewImageLinkModelHandler = link => {
+    const modelId = link.modelLinkId;
+    const model = getModelById(modelId);
+    if (!model) {
+      return;
+    }
+
+    handleOpenMap(model);
+    handleSetMapPosition(link, model);
     dispatch(closeModal());
   };
 
   const onImageClick: OverviewImageLinkImageHandler = link => {
+    const isImageAvailable = checkIfImageIsAvailable(link.imageLinkId);
+    if (!isImageAvailable) {
+      return;
+    }
+
     dispatch(setOverviewImageId(link.imageLinkId));
   };
 
-  const handleOnLinkClick: UseOverviewImageLinkActionsResult['handleOnLinkClick'] = link => {
-    if ('imageLinkId' in link) {
+  const handleLinkClick: UseOverviewImageLinkActionsResult['handleLinkClick'] = link => {
+    const isImageLink = 'imageLinkId' in link;
+    const isModelLink = 'modelLinkId' in link;
+
+    if (isImageLink) {
       return onImageClick(link);
     }
 
-    if ('modelLinkId' in link) {
+    if (isModelLink) {
       return onSubmapClick(link);
     }
 
-    return NOOP;
+    return NOOP();
   };
 
   return {
-    handleOnLinkClick,
+    handleLinkClick,
   };
 };

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

+import { ZERO } from '@/constants/common';
+import { projectFixture } from '@/models/fixtures/projectFixture';
+import { MODAL_INITIAL_STATE_MOCK } from '@/redux/modal/modal.mock';
+import { PROJECT_OVERVIEW_IMAGE_MOCK } from '@/redux/project/project.mock';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import { useOverviewImageLinkConfigs } from './useOverviewImageLinkElements';
+
+describe('useOverviewImageLinkConfigs - hook', () => {
+  describe('when currentImage is undefined', () => {
+    const { Wrapper } = getReduxWrapperWithStore({
+      project: {
+        data: {
+          ...projectFixture,
+          overviewImageViews: [],
+          topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+        },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+      },
+      modal: {
+        ...MODAL_INITIAL_STATE_MOCK,
+        overviewImagesState: {
+          imageId: 0,
+        },
+      },
+    });
+
+    const {
+      result: { current: returnValue },
+    } = renderHook(
+      () =>
+        useOverviewImageLinkConfigs({
+          sizeFactor: 1,
+        }),
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    it('should return empty array', () => {
+      expect(returnValue).toStrictEqual([]);
+    });
+  });
+
+  describe('when sizeFactor is zero', () => {
+    const { Wrapper } = getReduxWrapperWithStore({
+      project: {
+        data: {
+          ...projectFixture,
+          overviewImageViews: [PROJECT_OVERVIEW_IMAGE_MOCK],
+          topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+        },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+      },
+      modal: {
+        ...MODAL_INITIAL_STATE_MOCK,
+        overviewImagesState: {
+          imageId: PROJECT_OVERVIEW_IMAGE_MOCK.idObject,
+        },
+      },
+    });
+
+    const {
+      result: { current: returnValue },
+    } = renderHook(
+      () =>
+        useOverviewImageLinkConfigs({
+          sizeFactor: ZERO,
+        }),
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    it('should return empty array', () => {
+      expect(returnValue).toStrictEqual([]);
+    });
+  });
+
+  describe('when all args are valid', () => {
+    const { Wrapper } = getReduxWrapperWithStore({
+      project: {
+        data: {
+          ...projectFixture,
+          overviewImageViews: [PROJECT_OVERVIEW_IMAGE_MOCK],
+          topOverviewImage: PROJECT_OVERVIEW_IMAGE_MOCK,
+        },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+      },
+      modal: {
+        ...MODAL_INITIAL_STATE_MOCK,
+        overviewImagesState: {
+          imageId: PROJECT_OVERVIEW_IMAGE_MOCK.idObject,
+        },
+      },
+    });
+
+    const {
+      result: { current: returnValue },
+    } = renderHook(
+      () =>
+        useOverviewImageLinkConfigs({
+          sizeFactor: 1,
+        }),
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    it('should return correct value', () => {
+      expect(returnValue).toStrictEqual([
+        {
+          idObject: 2062,
+          size: { top: 2187, left: 515, width: 558, height: 333 },
+          onClick: expect.any(Function),
+        },
+        {
+          idObject: 2063,
+          size: { top: 1360, left: 2410, width: 282, height: 210 },
+          onClick: expect.any(Function),
+        },
+        {
+          idObject: 2064,
+          size: { top: 497, left: 2830, width: 426, height: 335 },
+          onClick: expect.any(Function),
+        },
+        {
+          idObject: 2065,
+          size: { top: 2259, left: 3232, width: 288, height: 197 },
+          onClick: expect.any(Function),
+        },
+        {
+          idObject: 2066,
+          size: { top: 761, left: 4205, width: 420, height: 341 },
+          onClick: expect.any(Function),
+        },
+        {
+          idObject: 2067,
+          size: { top: 1971, left: 4960, width: 281, height: 192 },
+          onClick: expect.any(Function),
+        },
+      ]);
+    });
+  });
+});

src/components/FunctionalArea/Modal/OverviewImagesModal/utils/useOverviewImageLinkElements.tsx

+import { ZERO } from '@/constants/common';
 import { currentOverviewImageSelector } from '@/redux/project/project.selectors';
 import { useSelector } from 'react-redux';
 import { OverviewImageLinkConfig } from '../OverviewImageModal.types';
 import { getOverviewImageLinkSize } from './getOverviewImageLinkSize';
-import { useOvervieImageLinkActions } from './useOverviewImageLinkActions';
+import { useOverviewImageLinkActions } from './useOverviewImageLinkActions';
 
 interface UseOverviewImageLinksArgs {
   sizeFactor: number;
@@ -11,18 +12,14 @@ interface UseOverviewImageLinksArgs {
 export const useOverviewImageLinkConfigs = ({
   sizeFactor,
 }: UseOverviewImageLinksArgs): OverviewImageLinkConfig[] => {
-  const { handleOnLinkClick } = useOvervieImageLinkActions();
+  const { handleLinkClick } = useOverviewImageLinkActions();
   const currentImage = useSelector(currentOverviewImageSelector);
 
-  if (!currentImage || !sizeFactor) return [];
+  if (!currentImage || sizeFactor === ZERO) return [];
 
-  const linkConfigs = currentImage.links.map(link => {
-    return {
-      idObject: link.idObject,
-      size: getOverviewImageLinkSize(link, { sizeFactor }),
-      onClick: () => handleOnLinkClick(link),
-    };
-  });
-
-  return linkConfigs;
+  return currentImage.links.map(link => ({
+    idObject: link.idObject,
+    size: getOverviewImageLinkSize(link, { sizeFactor }),
+    onClick: () => handleLinkClick(link),
+  }));
 };

src/constants/common.ts

 export const SIZE_OF_EMPTY_ARRAY = 0;
+export const SIZE_OF_ARRAY_WITH_FOUR_ELEMENTS = 4;
+
 export const ZERO = 0;
 export const FIRST_ARRAY_ELEMENT = 0;
 
 export const ONE = 1;
 export const SECOND_ARRAY_ELEMENT = 1;
 
+export const THIRD_ARRAY_ELEMENT = 2;
+
 export const NOOP = (): void => {};

src/models/mocks/overviewImageMocks.ts

+import { PROJECT_OVERVIEW_IMAGE_MOCK } from '@/redux/project/project.mock';
+import { OverviewImageLinkImage, OverviewImageLinkModel } from '@/types/models';
+
+export const OVERVIEW_LINK_IMAGE_MOCK: OverviewImageLinkImage = {
+  idObject: 1,
+  polygon: [],
+  imageLinkId: PROJECT_OVERVIEW_IMAGE_MOCK.idObject,
+  type: 'OverviewImageLink',
+};
+
+export const OVERVIEW_LINK_MODEL_MOCK: OverviewImageLinkModel = {
+  idObject: 1,
+  polygon: [],
+  zoomLevel: 5,
+  modelPoint: {
+    x: 15570.0,
+    y: 3016.0,
+  },
+  modelLinkId: 5053,
+  type: 'OverviewImageLink',
+};

src/redux/project/project.selectors.ts

@@ -22,6 +22,11 @@ export const currentOverviewImageSelector = createSelector(
     ),
 );
 
+export const projectOverviewImagesSelector = createSelector(
+  projectDataSelector,
+  (projectData): OverviewImageView[] => projectData?.overviewImageViews || [],
+);
+
 export const projectDirectorySelector = createSelector(
   projectDataSelector,
   projectData => projectData?.directory,