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

@@ -8,6 +8,7 @@ type CheckboxElement = { id: string; label: string };
 type CheckboxElements = CheckboxElement[];
 
 export const getCompartmentPathwaysCheckboxElements = (
+  prefix: string,
   items: CompartmentPathwayDetails[],
 ): CheckboxElements => {
   const addedNames: AddedNames = {};
@@ -21,7 +22,7 @@ export const getCompartmentPathwaysCheckboxElements = (
   items.forEach(setNameToIdIfUndefined);
 
   const parseIdAndLabel = ([name, id]: [name: string, id: number]): CheckboxElement => ({
-    id: id.toString(),
+    id: `${prefix}-${id}`,
     label: name,
   });
 

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

+/* eslint-disable no-magic-numbers */
 import { getDownloadElementsBodyRequest } from './getDownloadElementsBodyRequest';
 
 describe('getDownloadElementsBodyRequest', () => {
   it('should return the correct DownloadBodyRequest object', () => {
-    const types = [
-      { id: '1', label: 'Type 1' },
-      { id: '2', label: 'Type 2' },
-    ];
-    const columns = [
-      { id: '1', label: 'Column 1' },
-      { id: '2', label: 'Column 2' },
-    ];
     // eslint-disable-next-line no-magic-numbers
     const modelIds = [1, 2, 3];
     const annotations = [
-      { id: '1', label: 'Annotation 1' },
-      { id: '2', label: 'Annotation 2' },
+      { id: 'Annotation 1', label: 'Annotation 1' },
+      { id: 'Annotation 2', label: 'Annotation 2' },
     ];
     const includedCompartmentPathways = [
-      { id: '1', label: 'Compartment 1' },
-      { id: '2', label: 'Compartment 2' },
+      { id: 'include-7', label: 'Compartment 1' },
+      { id: 'include-8', label: 'Compartment 2' },
     ];
     const excludedCompartmentPathways = [
-      { id: '1', label: 'Compartment 3' },
-      { id: '2', label: 'Compartment 4' },
+      { id: 'exclude-9', label: 'Compartment 3' },
+      { id: 'exclude-10', label: 'Compartment 4' },
     ];
 
     const result = getDownloadElementsBodyRequest({
-      types,
-      columns,
+      columns: ['Column 23', 'Column99'],
       modelIds,
       annotations,
       includedCompartmentPathways,
@@ -35,13 +27,37 @@ describe('getDownloadElementsBodyRequest', () => {
     });
 
     expect(result).toEqual({
-      types: ['Type 1', 'Type 2'],
-      columns: ['Column 1', 'Column 2'],
+      columns: ['Column 23', 'Column99'],
       // eslint-disable-next-line no-magic-numbers
       submaps: [1, 2, 3],
       annotations: ['Annotation 1', 'Annotation 2'],
-      includedCompartmentIds: ['Compartment 1', 'Compartment 2'],
-      excludedCompartmentIds: ['Compartment 3', 'Compartment 4'],
+      includedCompartmentIds: [7, 8],
+      excludedCompartmentIds: [9, 10],
     });
   });
+  it('should throw error if compartment id is not a number', () => {
+    const modelIds = [1, 2, 3];
+    const annotations = [
+      { id: 'Annotation 1', label: 'Annotation 1' },
+      { id: 'Annotation 2', label: 'Annotation 2' },
+    ];
+    const includedCompartmentPathways = [
+      { id: '', label: 'Compartment 1' },
+      { id: '', label: 'Compartment 2' },
+    ];
+    const excludedCompartmentPathways = [
+      { id: '', label: 'Compartment 3' },
+      { id: '', label: 'Compartment 4' },
+    ];
+
+    expect(() =>
+      getDownloadElementsBodyRequest({
+        columns: ['Column 23', 'Column99'],
+        modelIds,
+        annotations,
+        includedCompartmentPathways,
+        excludedCompartmentPathways,
+      }),
+    ).toThrow('compartment id is not a number');
+  });
 });

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

-import { CheckboxItem } from '../../CheckboxFilter/CheckboxFilter.component';
+import { CheckboxItem } from '../../CheckboxFilter/CheckboxFilter.types';
+import { extractAndParseNumberIdFromCompartment } from './extractAndParseNumberIdFromCompartment';
 
 type DownloadBodyRequest = {
-  types: string[];
   columns: string[];
   submaps: number[];
   annotations: string[];
-  includedCompartmentIds: string[];
-  excludedCompartmentIds: string[];
+  includedCompartmentIds: number[];
+  excludedCompartmentIds: number[];
 };
 
 type GetDownloadBodyRequestProps = {
-  types: CheckboxItem[];
-  columns: CheckboxItem[];
+  columns: string[];
   modelIds: number[];
   annotations: CheckboxItem[];
   includedCompartmentPathways: CheckboxItem[];
@@ -19,17 +18,15 @@ type GetDownloadBodyRequestProps = {
 };
 
 export const getDownloadElementsBodyRequest = ({
-  types,
   columns,
   modelIds,
   annotations,
   includedCompartmentPathways,
   excludedCompartmentPathways,
 }: GetDownloadBodyRequestProps): DownloadBodyRequest => ({
-  types: types.map(type => type.label),
-  columns: columns.map(column => column.label),
+  columns,
   submaps: modelIds,
-  annotations: annotations.map(annotation => annotation.label),
-  includedCompartmentIds: includedCompartmentPathways.map(compartment => compartment.label),
-  excludedCompartmentIds: excludedCompartmentPathways.map(compartment => compartment.label),
+  annotations: annotations.map(annotation => annotation.id),
+  includedCompartmentIds: includedCompartmentPathways.map(extractAndParseNumberIdFromCompartment),
+  excludedCompartmentIds: excludedCompartmentPathways.map(extractAndParseNumberIdFromCompartment),
 });

src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getExportContextWithReduxWrapper.tsx

+/* eslint-disable react/no-multi-comp */
+import { StoreType } from '@/redux/store';
+import { InitialStoreState } from '@/utils/testing/getReduxStoreActionsListener';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { EXPORT_CONTEXT_DEFAULT_VALUE } from '../ExportCompound.constant';
+import { ExportContext } from '../ExportCompound.context';
+import { ExportContextType } from '../ExportCompound.types';
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+export type ComponentWrapper = ({ children }: WrapperProps) => JSX.Element;
+
+export type GetExportContextWithReduxWrapper = (
+  contextValue?: ExportContextType,
+  initialState?: InitialStoreState,
+) => {
+  Wrapper: ComponentWrapper;
+  store: StoreType;
+};
+
+export const getExportContextWithReduxWrapper: GetExportContextWithReduxWrapper = (
+  contextValue,
+  initialState,
+) => {
+  const { Wrapper: ReduxWrapper, store } = getReduxWrapperWithStore(initialState);
+
+  const ContextWrapper: ComponentWrapper = ({ children }) => {
+    return (
+      <ExportContext.Provider value={contextValue || EXPORT_CONTEXT_DEFAULT_VALUE}>
+        {children}
+      </ExportContext.Provider>
+    );
+  };
+
+  const ContextWrapperWithRedux: ComponentWrapper = ({ children }) => {
+    return (
+      <ReduxWrapper>
+        <ContextWrapper>{children}</ContextWrapper>
+      </ReduxWrapper>
+    );
+  };
+
+  return { Wrapper: ContextWrapperWithRedux, store };
+};

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

+import { BASE_API_URL, PROJECT_ID } from '@/constants';
+import { GetGraphicsDownloadUrlProps, getGraphicsDownloadUrl } from './getGraphicsDownloadUrl';
+
+describe('getGraphicsDownloadUrl - util', () => {
+  const cases: [GetGraphicsDownloadUrlProps, string | undefined][] = [
+    [{}, undefined],
+    [
+      {
+        backgroundId: 50,
+      },
+      undefined,
+    ],
+    [
+      {
+        backgroundId: 50,
+        modelId: '30',
+      },
+      undefined,
+    ],
+    [
+      {
+        backgroundId: 50,
+        modelId: '30',
+        handler: 'any.handler.image',
+      },
+      undefined,
+    ],
+    [
+      {
+        backgroundId: 50,
+        modelId: '30',
+        handler: 'any.handler.image',
+        zoom: 7,
+      },
+      `${BASE_API_URL}/projects/${PROJECT_ID}/models/30:downloadImage?backgroundOverlayId=50&handlerClass=any.handler.image&zoomLevel=7`,
+    ],
+  ];
+
+  it.each(cases)('should return valid result', (input, result) => {
+    expect(getGraphicsDownloadUrl(input)).toBe(result);
+  });
+});

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

+import { BASE_API_URL, PROJECT_ID } from '@/constants';
+
+export interface GetGraphicsDownloadUrlProps {
+  backgroundId?: number;
+  modelId?: string;
+  handler?: string;
+  zoom?: number;
+}
+
+export const getGraphicsDownloadUrl = ({
+  backgroundId,
+  modelId,
+  handler,
+  zoom,
+}: GetGraphicsDownloadUrlProps): string | undefined => {
+  const isAllElementsTruthy = [backgroundId, modelId, handler, zoom].reduce(
+    (a, b) => Boolean(a) && Boolean(b),
+    true,
+  );
+
+  if (!isAllElementsTruthy) {
+    return undefined;
+  }
+
+  return `${BASE_API_URL}/projects/${PROJECT_ID}/models/${modelId}:downloadImage?backgroundOverlayId=${backgroundId}&handlerClass=${handler}&zoomLevel=${zoom}`;
+};

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

+/* eslint-disable no-magic-numbers */
+import { FIRST_ARRAY_ELEMENT, ZERO } from '@/constants/common';
+import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
+import { getModelExportZoom } from './getModelExportZoom';
+
+describe('getModelExportZoom - util', () => {
+  describe('when there is no model', () => {
+    const model = undefined;
+    const exportWidth = 100;
+
+    it('should return return zero', () => {
+      expect(getModelExportZoom(exportWidth, model)).toBe(ZERO);
+    });
+  });
+
+  // Math.log2 of zero is -Infty
+  describe('when model width is zero', () => {
+    const model = {
+      ...MODELS_MOCK_SHORT[FIRST_ARRAY_ELEMENT],
+      width: 0,
+    };
+    const exportWidth = 100;
+
+    it('should return return zero', () => {
+      expect(getModelExportZoom(exportWidth, model)).toBe(ZERO);
+    });
+  });
+
+  describe('when model is present and model width > ZERO', () => {
+    const model = MODELS_MOCK_SHORT[FIRST_ARRAY_ELEMENT];
+
+    // MAX_WIDTH 26779.25
+    // [zoom, width]
+    const cases: [number, number][] = [
+      [2, 100], // MIN ZOOM
+      [2.7142, 420],
+      [4.5391, 1488],
+      [9, 80000000], // MAX ZOOM
+    ];
+
+    it.each(cases)('should return export zoom=%s for width=%s', (zoom, width) => {
+      expect(getModelExportZoom(width, model)).toBeCloseTo(zoom);
+    });
+  });
+});

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

+import { ZERO } from '@/constants/common';
+import { MapModel } from '@/types/models';
+
+const ZOOM_BASE = 6;
+
+/*
+ * Width of exported image for zoom=1 is 128, for zoom=2 is 256, for zoom=3 is 1024
+ * So zoom level holds pattern of log2(width) with base of log2(128)=7
+ * Zoom base defined in this file is 6 as we need to provide minumum zoom of 1
+ */
+
+export const getModelExportZoom = (exportWidth: number, model?: MapModel): number => {
+  // log2 of zero is -Infty
+  if (!model || model.width === ZERO) {
+    return ZERO;
+  }
+
+  const { maxZoom, minZoom } = model;
+  const exportZoom = Math.log2(exportWidth) - ZOOM_BASE;
+
+  return Math.min(Math.max(exportZoom, minZoom), maxZoom);
+};

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

+/* eslint-disable no-magic-numbers */
 import { getNetworkDownloadBodyRequest } from './getNetworkBodyRequest';
 
 describe('getNetworkDownloadBodyRequest', () => {
-  it('should return an empty object', () => {
-    const result = getNetworkDownloadBodyRequest();
-    expect(result).toEqual({});
+  it('should return the correct DownloadBodyRequest object', () => {
+    const columns = ['column1', 'column2'];
+    const modelIds = [1, 2, 3];
+    const annotations = [
+      { id: 'Annotation 1', label: 'Annotation 1' },
+      { id: 'Annotation 2', label: 'Annotation 2' },
+    ];
+    const includedCompartmentPathways = [
+      { id: 'include-7', label: 'Compartment 1' },
+      { id: 'include-8', label: 'Compartment 2' },
+    ];
+    const excludedCompartmentPathways = [
+      { id: 'exclude-9', label: 'Compartment 3' },
+      { id: 'exclude-10', label: 'Compartment 4' },
+    ];
+
+    const result = getNetworkDownloadBodyRequest({
+      columns,
+      modelIds,
+      annotations,
+      includedCompartmentPathways,
+      excludedCompartmentPathways,
+    });
+
+    expect(result).toEqual({
+      columns: ['column1', 'column2'],
+      submaps: [1, 2, 3],
+      annotations: ['Annotation 1', 'Annotation 2'],
+      includedCompartmentIds: [7, 8],
+      excludedCompartmentIds: [9, 10],
+    });
   });
 });

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

-export const getNetworkDownloadBodyRequest = (): object => ({});
+import { CheckboxItem } from '../../CheckboxFilter/CheckboxFilter.types';
+import { extractAndParseNumberIdFromCompartment } from './extractAndParseNumberIdFromCompartment';
+
+type DownloadBodyRequest = {
+  columns: string[];
+  submaps: number[];
+  annotations: string[];
+  includedCompartmentIds: number[];
+  excludedCompartmentIds: number[];
+};
+
+type GetDownloadBodyRequestProps = {
+  columns: string[];
+  modelIds: number[];
+  annotations: CheckboxItem[];
+  includedCompartmentPathways: CheckboxItem[];
+  excludedCompartmentPathways: CheckboxItem[];
+};
+
+export const getNetworkDownloadBodyRequest = ({
+  columns,
+  modelIds,
+  annotations,
+  includedCompartmentPathways,
+  excludedCompartmentPathways,
+}: GetDownloadBodyRequestProps): DownloadBodyRequest => ({
+  columns,
+  submaps: modelIds,
+  annotations: annotations.map(annotation => annotation.id),
+  includedCompartmentIds: includedCompartmentPathways.map(extractAndParseNumberIdFromCompartment),
+  excludedCompartmentIds: excludedCompartmentPathways.map(extractAndParseNumberIdFromCompartment),
+});

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

+import { getCompartmentPathways } from '@/redux/compartmentPathways/compartmentPathways.thunks';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { modelsIdsSelector } from '@/redux/models/models.selectors';
 import { DrawerHeading } from '@/shared/DrawerHeading';
-import { getCompartmentPathways } from '@/redux/compartmentPathways/compartmentPathways.thunks';
 import { useEffect, useState } from 'react';
-import { TabNavigator } from './TabNavigator';
 import { Elements } from './Elements';
+import { Graphics } from './Graphics';
+import { Network } from './Network';
+import { TabNavigator } from './TabNavigator';
 import { TAB_NAMES } from './TabNavigator/TabNavigator.constants';
 import { TabNames } from './TabNavigator/TabNavigator.types';
-import { Network } from './Network';
 
 export const ExportDrawer = (): React.ReactNode => {
   const modelsIds = useAppSelector(modelsIdsSelector);
@@ -30,7 +31,7 @@ export const ExportDrawer = (): React.ReactNode => {
         <TabNavigator activeTab={activeTab} onTabChange={handleTabChange} />
         {activeTab === TAB_NAMES.ELEMENTS && <Elements />}
         {activeTab === TAB_NAMES.NETWORK && <Network />}
-        {activeTab === TAB_NAMES.GRAPHICS && <div>Graphics</div>}
+        {activeTab === TAB_NAMES.GRAPHICS && <Graphics />}
       </div>
     </div>
   );

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

+import { Export } from '../ExportCompound';
+
+export const Graphics = (): React.ReactNode => {
+  return (
+    <div data-testid="graphics-tab">
+      <Export>
+        <Export.Submap />
+        <Export.ImageSize />
+        <Export.ImageFormat />
+        <Export.DownloadGraphics />
+      </Export>
+    </div>
+  );
+};

src/components/Map/Drawer/ExportDrawer/Graphics/index.ts

+export { Graphics } from './Graphics.component';

src/components/Map/Drawer/ExportDrawer/Network/Network.component.test.tsx

+/* eslint-disable no-magic-numbers */
+import { compartmentPathwaysDetailsFixture } from '@/models/fixtures/compartmentPathways';
+import { configurationFixture } from '@/models/fixtures/configurationFixture';
+import { modelsFixture } from '@/models/fixtures/modelsFixture';
+import { statisticsFixture } from '@/models/fixtures/statisticsFixture';
+import { apiPath } from '@/redux/apiPath';
+import { CONFIGURATION_INITIAL_STORE_MOCK } from '@/redux/configuration/configuration.mock';
+import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
+import { AppDispatch, RootState } from '@/redux/store';
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { InitialStoreState } from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { HttpStatusCode } from 'axios';
+import { act } from 'react-dom/test-utils';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import { NETWORK_COLUMNS } from '../ExportCompound/ExportCompound.constant';
+import { Network } from './Network.component';
+
+const mockedAxiosClient = mockNetworkNewAPIResponse();
+
+const renderComponent = (
+  initialStore?: InitialStoreState,
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+  const { Wrapper, store } = getReduxStoreWithActionsListener(initialStore);
+  return (
+    render(
+      <Wrapper>
+        <Network />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('Network - component', () => {
+  it('should render all network sections', () => {
+    renderComponent({
+      ...INITIAL_STORE_STATE_MOCK,
+      configuration: {
+        ...CONFIGURATION_INITIAL_STORE_MOCK,
+        main: {
+          ...CONFIGURATION_INITIAL_STORE_MOCK.main,
+          data: {
+            ...configurationFixture,
+            miriamTypes: {
+              compartment_label: {
+                commonName: 'Compartment',
+                homepage: '',
+                registryIdentifier: '',
+                uris: [''],
+              },
+            },
+          },
+        },
+      },
+      statistics: {
+        data: {
+          ...statisticsFixture,
+          reactionAnnotations: {
+            compartment_label: 1,
+            pathway: 0,
+          },
+        },
+        loading: 'succeeded',
+        error: {
+          message: '',
+          name: '',
+        },
+      },
+      compartmentPathways: {
+        data: compartmentPathwaysDetailsFixture,
+        loading: 'succeeded',
+        error: {
+          message: '',
+          name: '',
+        },
+      },
+    });
+    const annotations = screen.getByText('Select annotations');
+    const includedCompartmentPathways = screen.getByText('Select included compartment / pathways');
+    const excludedCompartmentPathways = screen.getByText('Select excluded compartment / pathways');
+    const downloadButton = screen.getByText('Download');
+
+    expect(annotations).toBeVisible();
+    expect(includedCompartmentPathways).toBeVisible();
+    expect(excludedCompartmentPathways).toBeVisible();
+    expect(downloadButton).toBeVisible();
+  });
+  it('should handle download button click and dispatch proper data', async () => {
+    mockedAxiosClient.onPost(apiPath.downloadNetworkCsv()).reply(HttpStatusCode.Ok, 'test');
+    const FIRST_COMPARMENT_PATHWAY_NAME = compartmentPathwaysDetailsFixture[0].name;
+    const FIRST_COMPARMENT_PATHWAY_ID = compartmentPathwaysDetailsFixture[0].id;
+    const SECOND_COMPARMENT_PATHWAY_NAME = compartmentPathwaysDetailsFixture[1].name;
+    const SECOND_COMPARMENT_PATHWAY_ID = compartmentPathwaysDetailsFixture[1].id;
+    const { store } = renderComponent({
+      ...INITIAL_STORE_STATE_MOCK,
+      configuration: {
+        ...CONFIGURATION_INITIAL_STORE_MOCK,
+        main: {
+          ...CONFIGURATION_INITIAL_STORE_MOCK.main,
+          data: {
+            ...configurationFixture,
+            miriamTypes: {
+              reaction: {
+                commonName: 'Reaction Label',
+                homepage: '',
+                registryIdentifier: '',
+                uris: [''],
+              },
+            },
+          },
+        },
+      },
+      statistics: {
+        data: {
+          ...statisticsFixture,
+          elementAnnotations: {
+            compartment: 1,
+            pathway: 0,
+          },
+          reactionAnnotations: {
+            reaction: 2,
+            path: 0,
+          },
+        },
+        loading: 'succeeded',
+        error: {
+          message: '',
+          name: '',
+        },
+      },
+      compartmentPathways: {
+        data: compartmentPathwaysDetailsFixture,
+        loading: 'succeeded',
+        error: {
+          message: '',
+          name: '',
+        },
+      },
+      models: {
+        data: modelsFixture,
+        loading: 'succeeded',
+        error: {
+          message: '',
+          name: '',
+        },
+      },
+    });
+
+    const annotations = screen.getByText('Select annotations');
+
+    await act(() => {
+      annotations.click();
+    });
+    const annotationInput = screen.getByLabelText('Reaction Label');
+
+    await act(() => {
+      annotationInput.click();
+    });
+
+    expect(annotationInput).toBeChecked();
+
+    const includedCompartmentPathways = screen.getByText('Select included compartment / pathways');
+
+    await act(() => {
+      includedCompartmentPathways.click();
+    });
+    const includedCompartmentPathwaysInput = screen.getAllByLabelText(
+      FIRST_COMPARMENT_PATHWAY_NAME,
+    )[0];
+
+    await act(() => {
+      includedCompartmentPathwaysInput.click();
+    });
+
+    expect(includedCompartmentPathwaysInput).toBeChecked();
+
+    const excludedCompartmentPathways = screen.getByText('Select excluded compartment / pathways');
+
+    await act(() => {
+      excludedCompartmentPathways.click();
+    });
+    const excludedCompartmentPathwaysInput = screen.getAllByLabelText(
+      SECOND_COMPARMENT_PATHWAY_NAME,
+    )[1];
+
+    await act(() => {
+      excludedCompartmentPathwaysInput.click();
+    });
+
+    expect(excludedCompartmentPathwaysInput).toBeChecked();
+
+    const downloadButton = screen.getByText('Download');
+
+    await act(() => {
+      downloadButton.click();
+    });
+
+    const actions = store.getActions();
+
+    const firstAction = actions[0];
+    expect(firstAction.meta.arg).toEqual({
+      columns: NETWORK_COLUMNS,
+      submaps: modelsFixture.map(item => item.idObject),
+      annotations: ['reaction'],
+      includedCompartmentIds: [FIRST_COMPARMENT_PATHWAY_ID],
+      excludedCompartmentIds: [SECOND_COMPARMENT_PATHWAY_ID],
+    });
+  });
+});

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

 import { Export } from '../ExportCompound';
+import { ANNOTATIONS_TYPE } from '../ExportCompound/ExportCompound.constant';
 
 export const Network = (): React.ReactNode => {
   return (
     <div data-testid="export-tab">
       <Export>
-        <Export.Types />
-        <Export.Columns />
-        <Export.Annotations />
+        <Export.Annotations type={ANNOTATIONS_TYPE.NETWORK} />
         <Export.IncludedCompartmentPathways />
         <Export.ExcludedCompartmentPathways />
-        <Export.DownloadElements />
+        <Export.DownloadNetwork />
       </Export>
     </div>
   );

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx

@@ -17,6 +17,7 @@ import { apiPath } from '@/redux/apiPath';
 import { CORE_PD_MODEL_MOCK } from '@/models/mocks/modelsMock';
 import { MODELS_INITIAL_STATE_MOCK } from '@/redux/models/models.mock';
 import { parseOverlayBioEntityToOlRenderingFormat } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
+import { BASE_API_URL } from '@/constants';
 import { OverlayListItem } from './OverlayListItem.component';
 
 const mockedAxiosNewClient = mockNetworkNewAPIResponse();
@@ -111,6 +112,29 @@ describe('OverlayListItem - component', () => {
     });
   });
 
-  // TODO implement when connecting logic to component
-  it.skip('should trigger download overlay to PC on download button click', () => {});
+  it('should trigger download overlay to PC on download button click', () => {
+    const OVERLAY_ID = 21;
+    renderComponent({
+      map: {
+        ...initialMapStateFixture,
+        data: { ...initialMapStateFixture.data, backgroundId: EMPTY_BACKGROUND_ID },
+      },
+      backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+      overlayBioEntity: { ...OVERLAY_BIO_ENTITY_INITIAL_STATE_MOCK, overlaysId: [OVERLAY_ID] },
+      models: { ...MODELS_INITIAL_STATE_MOCK, data: [CORE_PD_MODEL_MOCK] },
+    });
+
+    const downloadButton = screen.getByText('Download');
+
+    expect(downloadButton).toBeVisible();
+
+    const windowOpenMock = jest.spyOn(window, 'open').mockImplementation();
+
+    downloadButton.click();
+
+    expect(windowOpenMock).toHaveBeenCalledWith(
+      `${BASE_API_URL}/${apiPath.downloadOverlay(OVERLAY_ID)}`,
+      '_blank',
+    );
+  });
 });

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx

 import { Button } from '@/shared/Button';
 import Image from 'next/image';
 import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
-import { useOverlay } from './hooks/useOverlay';
+import { useOverlay } from '../../hooks/useOverlay';
 
 interface OverlayListItemProps {
   name: string;
@@ -9,8 +9,8 @@ interface OverlayListItemProps {
 }
 
 export const OverlayListItem = ({ name, overlayId }: OverlayListItemProps): JSX.Element => {
-  const onDownloadOverlay = (): void => {};
-  const { toggleOverlay, isOverlayActive, isOverlayLoading } = useOverlay(overlayId);
+  const { toggleOverlay, isOverlayActive, isOverlayLoading, downloadOverlay } =
+    useOverlay(overlayId);
 
   return (
     <li className="flex flex-row flex-nowrap justify-between pl-5 [&:not(:last-of-type)]:mb-4">
@@ -32,7 +32,7 @@ export const OverlayListItem = ({ name, overlayId }: OverlayListItemProps): JSX.
           )}
           {isOverlayActive || isOverlayActive ? 'Disable' : 'View'}
         </Button>
-        <Button className="max-h-8" variantStyles="ghost" onClick={onDownloadOverlay}>
+        <Button className="max-h-8" variantStyles="ghost" onClick={downloadOverlay}>
           Download
         </Button>
       </div>

src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx

@@ -7,7 +7,6 @@ import {
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
 import { AppDispatch, RootState, StoreType } from '@/redux/store';
-import { DEFAULT_ERROR } from '@/constants/errors';
 import { drawerOverlaysStepOneFixture } from '@/redux/drawer/drawerFixture';
 import { MockStoreEnhanced } from 'redux-mock-store';
 import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
@@ -19,6 +18,7 @@ import {
   createdOverlayFixture,
   uploadedOverlayFileContentFixture,
 } from '@/models/fixtures/overlaysFixture';
+import { OVERLAYS_INITIAL_STATE_MOCK } from '@/redux/overlays/overlays.mock';
 import { UserOverlayForm } from './UserOverlayForm.component';
 
 const mockedAxiosClient = mockNetworkResponse();
@@ -81,15 +81,7 @@ describe('UserOverlayForm - Component', () => {
         loading: 'succeeded',
         error: { message: '', name: '' },
       },
-      overlays: {
-        data: [],
-        loading: 'idle',
-        error: DEFAULT_ERROR,
-        addOverlay: {
-          loading: 'idle',
-          error: DEFAULT_ERROR,
-        },
-      },
+      overlays: OVERLAYS_INITIAL_STATE_MOCK,
     });
 
     fireEvent.change(screen.getByTestId('overlay-name'), { target: { value: 'Test Overlay' } });
@@ -112,15 +104,7 @@ describe('UserOverlayForm - Component', () => {
         loading: 'succeeded',
         error: { message: '', name: '' },
       },
-      overlays: {
-        data: [],
-        loading: 'idle',
-        error: DEFAULT_ERROR,
-        addOverlay: {
-          loading: 'idle',
-          error: DEFAULT_ERROR,
-        },
-      },
+      overlays: OVERLAYS_INITIAL_STATE_MOCK,
     });
 
     fireEvent.change(screen.getByTestId('overlay-name'), { target: { value: 'Test Overlay' } });
@@ -139,15 +123,7 @@ describe('UserOverlayForm - Component', () => {
 
   it('should update the form inputs based on overlay content provided by elements list', async () => {
     renderComponent({
-      overlays: {
-        data: [],
-        loading: 'idle',
-        error: DEFAULT_ERROR,
-        addOverlay: {
-          loading: 'idle',
-          error: DEFAULT_ERROR,
-        },
-      },
+      overlays: OVERLAYS_INITIAL_STATE_MOCK,
     });
 
     fireEvent.change(screen.getByTestId('overlay-name'), { target: { value: 'Test Overlay' } });
@@ -171,15 +147,7 @@ describe('UserOverlayForm - Component', () => {
       type: 'text/plain',
     });
     renderComponent({
-      overlays: {
-        data: [],
-        loading: 'idle',
-        error: DEFAULT_ERROR,
-        addOverlay: {
-          loading: 'idle',
-          error: DEFAULT_ERROR,
-        },
-      },
+      overlays: OVERLAYS_INITIAL_STATE_MOCK,
     });
 
     fireEvent.change(screen.getByTestId('dropzone-input'), {
@@ -192,15 +160,7 @@ describe('UserOverlayForm - Component', () => {
 
   it('should not submit when form is not filled', async () => {
     renderComponent({
-      overlays: {
-        data: [],
-        loading: 'idle',
-        error: DEFAULT_ERROR,
-        addOverlay: {
-          loading: 'idle',
-          error: DEFAULT_ERROR,
-        },
-      },
+      overlays: OVERLAYS_INITIAL_STATE_MOCK,
     });
     expect(screen.getByTestId('overlay-description')).toHaveValue('');
     fireEvent.click(screen.getByLabelText('upload overlay'));
@@ -214,15 +174,7 @@ describe('UserOverlayForm - Component', () => {
         loading: 'succeeded',
         error: { message: '', name: '' },
       },
-      overlays: {
-        data: [],
-        loading: 'idle',
-        error: DEFAULT_ERROR,
-        addOverlay: {
-          loading: 'idle',
-          error: DEFAULT_ERROR,
-        },
-      },
+      overlays: OVERLAYS_INITIAL_STATE_MOCK,
     });
 
     const backButton = screen.getByRole('back-button');

src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.test.tsx

@@ -61,6 +61,7 @@ describe('UserOverlays component', () => {
         modalTitle: '',
         overviewImagesState: {},
         molArtState: {},
+        editOverlayState: null,
       },
     });
     screen.getByLabelText('login button').click();
@@ -81,4 +82,16 @@ describe('UserOverlays component', () => {
 
     expect(screen.getByLabelText('add overlay button')).toBeInTheDocument();
   });
+  it('renders user overlays section when user is authenticated', () => {
+    renderComponent({
+      user: {
+        loading: 'succeeded',
+        authenticated: true,
+        error: { name: '', message: '' },
+        login: 'test',
+      },
+    });
+
+    expect(screen.getByText('Without group')).toBeInTheDocument();
+  });
 });