feat(overlays): added overlays to query params

src/components/Map/MapViewer/utils/config/overlaysLayer/getPolygonLatitudeCoordinates.ts

-import { roundToTwoDiggits } from '@/utils/number/roundToTwoDiggits';
+import { roundToTwoDigits } from '@/utils/number/roundToTwoDigits';
 
 type GetLatitudeCoordinatesProps = {
   width: number;
@@ -22,5 +22,5 @@ export const getPolygonLatitudeCoordinates = ({
   const polygonWidth = width / nOverlays;
   const newXMin = xMin + polygonWidth * overlayIndexBasedOnOrder;
   const xMax = newXMin + polygonWidth;
-  return { xMin: roundToTwoDiggits(newXMin), xMax: roundToTwoDiggits(xMax) };
+  return { xMin: roundToTwoDigits(newXMin), xMax: roundToTwoDigits(xMax) };
 };

src/redux/overlayBioEntity/overlayBioEntity.thunk.ts

@@ -9,6 +9,8 @@ import { parseOverlayBioEntityToOlRenderingFormat } from './overlayBioEntity.uti
 import { apiPath } from '../apiPath';
 import { modelsIdsSelector } from '../models/models.selectors';
 import type { RootState } from '../store';
+import { setMapBackground } from '../map/map.slice';
+import { emptyBackgroundIdSelector } from '../backgrounds/background.selectors';
 
 type GetOverlayBioEntityThunkProps = {
   overlayId: number;
@@ -54,3 +56,19 @@ export const getOverlayBioEntityForAllModels = createAsyncThunk<
     await Promise.all(asyncGetOverlayBioEntityFunctions);
   },
 );
+
+type GetInitOverlaysProps = { overlaysId: number[] };
+
+export const getInitOverlays = createAsyncThunk<void, GetInitOverlaysProps, { state: RootState }>(
+  'appInit/getInitOverlays',
+  async ({ overlaysId }, { dispatch, getState }): Promise<void> => {
+    const state = getState();
+
+    const emptyBackgroundId = emptyBackgroundIdSelector(state);
+    if (emptyBackgroundId) {
+      dispatch(setMapBackground(emptyBackgroundId));
+    }
+
+    overlaysId.forEach(id => dispatch(getOverlayBioEntityForAllModels({ overlayId: id })));
+  },
+);

src/redux/overlayBioEntity/overlayBioEntity.utils.ts

@@ -37,6 +37,13 @@ export type OverlayOrder = {
   index: number;
 };
 
+const byOrderOrId = (a: OverlayOrder, b: OverlayOrder): number => {
+  if (a.order === b.order) {
+    return a.id - b.id;
+  }
+  return a.order - b.order;
+};
+
 /** function calculates order of the function based on "order" property in ovarlay data. */
 export const calculateOvarlaysOrder = (
   overlaysIdsAndOrder: OverlayIdAndOrder[],
@@ -48,13 +55,7 @@ export const calculateOvarlaysOrder = (
     index,
   }));
 
-  /** if two overlays have the same order, order is determined by id of the overlay */
-  overlaysOrder.sort((a, b) => {
-    if (a.order === b.order) {
-      return a.id - b.id;
-    }
-    return a.order - b.order;
-  });
+  overlaysOrder.sort(byOrderOrId);
 
   overlaysOrder.forEach((overlay, index) => {
     const updatedOverlay = { ...overlay };

src/redux/root/init.thunks.ts

@@ -18,6 +18,7 @@ import { getSearchData } from '../search/search.thunks';
 import { setPerfectMatch } from '../search/search.slice';
 import { getSessionValid } from '../user/user.thunks';
 import { getConfigurationOptions } from '../configuration/configuration.thunks';
+import { getInitOverlays } from '../overlayBioEntity/overlayBioEntity.thunk';
 
 interface InitializeAppParams {
   queryData: QueryData;
@@ -28,7 +29,7 @@ export const fetchInitialAppData = createAsyncThunk<
   InitializeAppParams,
   { dispatch: AppDispatch }
 >('appInit/fetchInitialAppData', async ({ queryData }, { dispatch }): Promise<void> => {
-  /** Fetch all data required for renderin map */
+  /** Fetch all data required for rendering map */
   await Promise.all([
     dispatch(getConfigurationOptions()),
     dispatch(getProjectById(PROJECT_ID)),
@@ -59,4 +60,9 @@ export const fetchInitialAppData = createAsyncThunk<
     );
     dispatch(openSearchDrawerWithSelectedTab(getDefaultSearchTab(queryData.searchValue)));
   }
+
+  /** fetch overlays  */
+  if (queryData.overlaysId) {
+    dispatch(getInitOverlays({ overlaysId: queryData.overlaysId }));
+  }
 });

src/redux/root/query.selectors.ts

 import { QueryDataParams } from '@/types/query';
 import { createSelector } from '@reduxjs/toolkit';
+import { ZERO } from '@/constants/common';
 import { mapDataSelector } from '../map/map.selectors';
 import { perfectMatchSelector, searchValueSelector } from '../search/search.selectors';
+import { activeOverlaysIdSelector } from '../overlayBioEntity/overlayBioEntity.selector';
 
 export const queryDataParamsSelector = createSelector(
   searchValueSelector,
   perfectMatchSelector,
   mapDataSelector,
-  (searchValue, perfectMatch, { modelId, backgroundId, position }): QueryDataParams => ({
-    searchValue: searchValue.join(';'),
+  activeOverlaysIdSelector,
+  (
+    searchValue,
     perfectMatch,
-    modelId,
-    backgroundId,
-    ...position.last,
-  }),
+    { modelId, backgroundId, position },
+    activeOverlaysId,
+  ): QueryDataParams => {
+    const queryDataParams: QueryDataParams = {
+      searchValue: searchValue.join(';'),
+      perfectMatch,
+      modelId,
+      backgroundId,
+      ...position.last,
+    };
+
+    if (activeOverlaysId.length > ZERO) {
+      queryDataParams.overlaysId = activeOverlaysId.join(',');
+    }
+
+    return queryDataParams;
+  },
 );

src/types/query.ts

@@ -6,6 +6,7 @@ export interface QueryData {
   modelId?: number;
   backgroundId?: number;
   initialPosition?: Partial<Point>;
+  overlaysId?: number[];
 }
 
 export interface QueryDataParams {
@@ -16,6 +17,7 @@ export interface QueryDataParams {
   x?: number;
   y?: number;
   z?: number;
+  overlaysId?: string;
 }
 
 export interface QueryDataRouterParams {
@@ -26,4 +28,5 @@ export interface QueryDataRouterParams {
   x?: string;
   y?: string;
   z?: string;
+  overlaysId?: string;
 }

src/utils/number/roundToTwoDiggits.ts

-const TWO_DIGITS = 100;
-export const roundToTwoDiggits = (x: number): number => Math.round(x * TWO_DIGITS) / TWO_DIGITS;

src/utils/number/roundToTwoDiggits.test.ts → src/utils/number/roundToTwoDigits.test.ts

 /* eslint-disable no-magic-numbers */
-import { roundToTwoDiggits } from './roundToTwoDiggits';
+import { roundToTwoDigits } from './roundToTwoDigits';
 
 describe('roundToTwoDiggits', () => {
   it('should round a positive number with more than two decimal places to two decimal places', () => {
-    expect(roundToTwoDiggits(3.14159265359)).toBe(3.14);
-    expect(roundToTwoDiggits(2.71828182845)).toBe(2.72);
-    expect(roundToTwoDiggits(1.23456789)).toBe(1.23);
+    expect(roundToTwoDigits(3.14159265359)).toBe(3.14);
+    expect(roundToTwoDigits(2.71828182845)).toBe(2.72);
+    expect(roundToTwoDigits(1.23456789)).toBe(1.23);
   });
 
   it('should round a negative number with more than two decimal places to two decimal places', () => {
-    expect(roundToTwoDiggits(-3.14159265359)).toBe(-3.14);
-    expect(roundToTwoDiggits(-2.71828182845)).toBe(-2.72);
-    expect(roundToTwoDiggits(-1.23456789)).toBe(-1.23);
+    expect(roundToTwoDigits(-3.14159265359)).toBe(-3.14);
+    expect(roundToTwoDigits(-2.71828182845)).toBe(-2.72);
+    expect(roundToTwoDigits(-1.23456789)).toBe(-1.23);
   });
 
   it('should round a number with exactly two decimal places to two decimal places', () => {
-    expect(roundToTwoDiggits(3.14)).toBe(3.14);
-    expect(roundToTwoDiggits(2.72)).toBe(2.72);
-    expect(roundToTwoDiggits(1.23)).toBe(1.23);
+    expect(roundToTwoDigits(3.14)).toBe(3.14);
+    expect(roundToTwoDigits(2.72)).toBe(2.72);
+    expect(roundToTwoDigits(1.23)).toBe(1.23);
   });
 
   it('should round a number with less than two decimal places to two decimal places', () => {
-    expect(roundToTwoDiggits(3)).toBe(3.0);
-    expect(roundToTwoDiggits(2.7)).toBe(2.7);
-    expect(roundToTwoDiggits(1.2)).toBe(1.2);
+    expect(roundToTwoDigits(3)).toBe(3.0);
+    expect(roundToTwoDigits(2.7)).toBe(2.7);
+    expect(roundToTwoDigits(1.2)).toBe(1.2);
   });
 
   it('should round zero to two decimal places', () => {
-    expect(roundToTwoDiggits(0)).toBe(0);
+    expect(roundToTwoDigits(0)).toBe(0);
   });
 });

src/utils/number/roundToTwoDigits.ts

+const TWO_DIGITS = 100;
+export const roundToTwoDigits = (x: number): number => Math.round(x * TWO_DIGITS) / TWO_DIGITS;

src/utils/parseQueryToTypes.test.ts

@@ -10,6 +10,7 @@ describe('parseQueryToTypes', () => {
       modelId: undefined,
       backgroundId: undefined,
       initialPosition: { x: undefined, y: undefined, z: undefined },
+      overlaysId: undefined,
     });
 
     expect(parseQueryToTypes({ perfectMatch: 'true' })).toEqual({
@@ -18,6 +19,7 @@ describe('parseQueryToTypes', () => {
       modelId: undefined,
       backgroundId: undefined,
       initialPosition: { x: undefined, y: undefined, z: undefined },
+      overlaysId: undefined,
     });
 
     expect(parseQueryToTypes({ perfectMatch: 'false' })).toEqual({
@@ -26,6 +28,7 @@ describe('parseQueryToTypes', () => {
       modelId: undefined,
       backgroundId: undefined,
       initialPosition: { x: undefined, y: undefined, z: undefined },
+      overlaysId: undefined,
     });
 
     expect(parseQueryToTypes({ modelId: '666' })).toEqual({
@@ -34,6 +37,7 @@ describe('parseQueryToTypes', () => {
       modelId: 666,
       backgroundId: undefined,
       initialPosition: { x: undefined, y: undefined, z: undefined },
+      overlaysId: undefined,
     });
     expect(parseQueryToTypes({ x: '2137' })).toEqual({
       searchValue: undefined,
@@ -41,6 +45,7 @@ describe('parseQueryToTypes', () => {
       modelId: undefined,
       backgroundId: undefined,
       initialPosition: { x: 2137, y: undefined, z: undefined },
+      overlaysId: undefined,
     });
     expect(parseQueryToTypes({ y: '1372' })).toEqual({
       searchValue: undefined,
@@ -48,6 +53,7 @@ describe('parseQueryToTypes', () => {
       modelId: undefined,
       backgroundId: undefined,
       initialPosition: { x: undefined, y: 1372, z: undefined },
+      overlaysId: undefined,
     });
     expect(parseQueryToTypes({ z: '3721' })).toEqual({
       searchValue: undefined,
@@ -55,6 +61,16 @@ describe('parseQueryToTypes', () => {
       modelId: undefined,
       backgroundId: undefined,
       initialPosition: { x: undefined, y: undefined, z: 3721 },
+      overlaysId: undefined,
+    });
+    expect(parseQueryToTypes({ overlaysId: '1,2,3' })).toEqual({
+      searchValue: undefined,
+      perfectMatch: false,
+      modelId: undefined,
+      backgroundId: undefined,
+      initialPosition: { x: undefined, y: undefined, z: undefined },
+      // eslint-disable-next-line no-magic-numbers
+      overlaysId: [1, 2, 3],
     });
   });
 });

src/utils/parseQueryToTypes.ts

@@ -10,4 +10,5 @@ export const parseQueryToTypes = (query: QueryDataRouterParams): QueryData => ({
     y: Number(query.y) || undefined,
     z: Number(query.z) || undefined,
   },
+  overlaysId: query.overlaysId?.split(',').map(Number),
 });