export to image should include overlays

CHANGELOG

+minerva-front (18.0.7) stable; urgency=medium
+  * Bug fix: export to image did not include overlays (#326)
+
+-- Piotr Gawron <piotr.gawron@uni.lu>  Wed, 11 Dec 2024 13:00:00 +0200
+
 minerva-front (18.0.6) stable; urgency=medium
 
   * No changes in frontend

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx

@@ -5,6 +5,7 @@ import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { modelsDataSelector, modelsIdsSelector } from '@/redux/models/models.selectors';
 import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { activeOverlaysIdSelector } from '@/redux/overlayBioEntity/overlayBioEntity.selector';
 import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
 import { Annotations } from './Annotations';
 import { DownloadElements } from './DownloadElements/DownloadElements';
@@ -33,6 +34,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
   const modelIds = useAppSelector(modelsIdsSelector);
   const currentModels = useAppSelector(modelsDataSelector);
   const currentBackground = useAppSelector(currentBackgroundSelector);
+  const overlays = useAppSelector(activeOverlaysIdSelector);
   const [annotations, setAnnotations] = useState<CheckboxItem[]>([]);
   const [includedCompartmentPathways, setIncludedCompartmentPathways] = useState<CheckboxItem[]>(
     [],
@@ -76,6 +78,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
       modelId: models?.[FIRST_ARRAY_ELEMENT]?.id,
       handler: imageFormats?.[FIRST_ARRAY_ELEMENT]?.id,
       zoom: getModelExportZoom(imageSize.width, model),
+      overlayIds: overlays.map(overlayId => `${overlayId}`),
     });
 
     if (url) {

src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.test.ts

@@ -3,10 +3,11 @@ import { GetGraphicsDownloadUrlProps, getGraphicsDownloadUrl } from './getGraphi
 
 describe('getGraphicsDownloadUrl - util', () => {
   const cases: [GetGraphicsDownloadUrlProps, string | undefined][] = [
-    [{}, undefined],
+    [{ overlayIds: [] }, undefined],
     [
       {
         backgroundId: 50,
+        overlayIds: [],
       },
       undefined,
     ],
@@ -14,6 +15,7 @@ describe('getGraphicsDownloadUrl - util', () => {
       {
         backgroundId: 50,
         modelId: '30',
+        overlayIds: [],
       },
       undefined,
     ],
@@ -22,6 +24,7 @@ describe('getGraphicsDownloadUrl - util', () => {
         backgroundId: 50,
         modelId: '30',
         handler: 'any.handler.image',
+        overlayIds: [],
       },
       undefined,
     ],
@@ -31,6 +34,7 @@ describe('getGraphicsDownloadUrl - util', () => {
         modelId: '30',
         handler: 'any.handler.image',
         zoom: 7,
+        overlayIds: [],
       },
       `${BASE_API_URL}/projects/${PROJECT_ID}/models/30:downloadImage?backgroundOverlayId=50&handlerClass=any.handler.image&zoomLevel=7`,
     ],

src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.ts

@@ -5,6 +5,7 @@ export interface GetGraphicsDownloadUrlProps {
   modelId?: string;
   handler?: string;
   zoom?: number;
+  overlayIds: string[];
 }
 
 export const getGraphicsDownloadUrl = ({
@@ -12,6 +13,7 @@ export const getGraphicsDownloadUrl = ({
   modelId,
   handler,
   zoom,
+  overlayIds,
 }: GetGraphicsDownloadUrlProps): string | undefined => {
   const isAllElementsTruthy = [backgroundId, modelId, handler, zoom].reduce(
     (a, b) => Boolean(a) && Boolean(b),
@@ -22,5 +24,7 @@ export const getGraphicsDownloadUrl = ({
     return undefined;
   }
 
-  return `${BASE_API_URL}/projects/${PROJECT_ID}/models/${modelId}:downloadImage?backgroundOverlayId=${backgroundId}&handlerClass=${handler}&zoomLevel=${zoom}`;
+  const overlays = overlayIds.join(',');
+
+  return `${BASE_API_URL}/projects/${PROJECT_ID}/models/${modelId}:downloadImage?backgroundOverlayId=${backgroundId}&handlerClass=${handler}&zoomLevel=${zoom}&overlayIds=${overlays}`;
 };