diff --git a/CHANGELOG b/CHANGELOG
index 970ce7dcaf7b1c70543a7638bbb06707b4ec7f85..248b10670296aee11f284f8905590f394f1c6cbc 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -5,7 +5,7 @@ minerva-front (19.0.0~alpha.0) stable; urgency=medium
* Feature: allow plugin to access info about opened panel (#309)
* Feature: allow plugin to hide opened panel (#309)
* Feature: allow plugin to open left panel (#309)
- * Feature: allow to export current view for graphics export (#327)
+ * Feature: allow to export current view (#327)
* Small improvement: reaction element annotations use the same styling as
elements (#187)
* Small improvement: styling of annotation links improved (#186)
diff --git a/src/components/Map/Drawer/ExportDrawer/CurrentView/CurrentView.component.tsx b/src/components/Map/Drawer/ExportDrawer/CurrentView/CurrentView.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0a3ed7639c6acf90e532f8dae5dd21aed1bf253a
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/CurrentView/CurrentView.component.tsx
@@ -0,0 +1,12 @@
+import { Export } from '../ExportCompound';
+
+export const CurrentView = (): React.ReactNode => {
+ return (
+ <div data-testid="current-view-tab">
+ <Export>
+ <Export.ImageFormat />
+ <Export.DownloadCurrentView />
+ </Export>
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/index.ts b/src/components/Map/Drawer/ExportDrawer/CurrentView/index.ts
similarity index 100%
rename from src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/index.ts
rename to src/components/Map/Drawer/ExportDrawer/CurrentView/index.ts
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.component.tsx
deleted file mode 100644
index cb7e611dfa42b39a729dfd135eb9722c9183d640..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.component.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useContext } from 'react';
-import { ExportContext } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context';
-import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { currentModelIdSelector, currentModelNameSelector } from '@/redux/models/models.selectors';
-
-export const CurrentView = (): React.ReactNode => {
- const { setCurrentView, data, setModels } = useContext(ExportContext);
-
- const currentMapModelId = useAppSelector(currentModelIdSelector);
- const currentMapModelName = useAppSelector(currentModelNameSelector);
-
- return (
- <div className="flex flex-col gap-4 border-b">
- <label className="flex h-9 items-center gap-4">
- <span>Current view: </span>
- <input
- className="rounded-[64px] border border-transparent bg-cultured px-4 py-2.5 text-xs font-medium text-font-400 outline-none hover:border-greyscale-600 focus:border-greyscale-600"
- name="width"
- checked={data.currentView.value}
- type="checkbox"
- aria-label="export graphics width input"
- onChange={(e): void => {
- setCurrentView({ value: e.target.checked });
- if (e.target.checked) {
- setModels([
- {
- id: `${currentMapModelId}`,
- label: currentMapModelName,
- },
- ]);
- }
- }}
- />
- </label>
- </div>
- );
-};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants.ts
deleted file mode 100644
index f512b6d76fb6902fa945ec84a7ae710801601f5a..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CurrentView } from './CurrentView.types';
-
-export const DEFAULT_CURRENT_VIEW: CurrentView = {
- value: false,
-};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types.ts
deleted file mode 100644
index dc5bc917341152147477b7362f67a62a287fd8f5..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface CurrentView {
- value: boolean;
-}
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadCurrentView/DownloadCurrentView.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadCurrentView/DownloadCurrentView.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d9803337938c7a7ecb979b9645a4b2ea507a8888
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadCurrentView/DownloadCurrentView.component.tsx
@@ -0,0 +1,13 @@
+import { Button } from '@/shared/Button';
+import { useContext } from 'react';
+import { ExportContext } from '../ExportCompound.context';
+
+export const DownloadCurrentView = (): React.ReactNode => {
+ const { handleDownloadCurrentView } = useContext(ExportContext);
+
+ return (
+ <div className="mt-6">
+ <Button onClick={handleDownloadCurrentView}>Download</Button>
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadCurrentView/index.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadCurrentView/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b5d7cd637c7b9e4a5908194dd7b0cda3f2920ec
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadCurrentView/index.ts
@@ -0,0 +1 @@
+export { DownloadCurrentView } from './DownloadCurrentView.component';
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
index 1c7da28931cbf759afa8276f6c4502cdbcb382d6..295e2aee07cf4443963e5282da5fa57cfb8ead60 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
@@ -3,11 +3,15 @@ import { currentBackgroundSelector } from '@/redux/backgrounds/background.select
import { downloadElements, downloadNetwork } from '@/redux/export/export.thunks';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { modelsDataSelector, modelsIdsSelector } from '@/redux/models/models.selectors';
+import {
+ currentModelIdSelector,
+ modelsDataSelector,
+ modelsIdsSelector,
+} from '@/redux/models/models.selectors';
import { ReactNode, useCallback, useMemo, useState } from 'react';
import { activeOverlaysIdSelector } from '@/redux/overlayBioEntity/overlayBioEntity.selector';
-import { CurrentView } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView';
-import { DEFAULT_CURRENT_VIEW } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants';
+import { DownloadCurrentView } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadCurrentView/DownloadCurrentView.component';
+import { getZoom } from '@/services/pluginsManager/map/zoom/getZoom';
import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
import { Annotations } from './Annotations';
import { DownloadElements } from './DownloadElements/DownloadElements';
@@ -20,7 +24,6 @@ import { ImageFormat } from './ImageFormat';
import { ImageSize } from './ImageSize';
import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants';
import { ImageSize as ImageSizeType } from './ImageSize/ImageSize.types';
-import { CurrentView as CurrentViewType } from './CurrentView/CurrentView.types';
import { IncludedCompartmentPathways } from './IncludedCompartmentPathways ';
import { Submap } from './Submap';
import { getDownloadElementsBodyRequest } from './utils/getDownloadElementsBodyRequest';
@@ -35,6 +38,8 @@ type ExportProps = {
export const Export = ({ children }: ExportProps): JSX.Element => {
const dispatch = useAppDispatch();
const modelIds = useAppSelector(modelsIdsSelector);
+ const selectedModelId = useAppSelector(currentModelIdSelector);
+
const currentModels = useAppSelector(modelsDataSelector);
const currentBackground = useAppSelector(currentBackgroundSelector);
const overlays = useAppSelector(activeOverlaysIdSelector);
@@ -48,7 +53,6 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
const [models, setModels] = useState<CheckboxItem[]>([]);
const [imageSize, setImageSize] = useState<ImageSizeType>(DEFAULT_IMAGE_SIZE);
const [imageFormats, setImageFormats] = useState<CheckboxItem[]>([]);
- const [currentView, setCurrentView] = useState<CurrentViewType>(DEFAULT_CURRENT_VIEW);
const handleDownloadElements = useCallback(async () => {
const body = getDownloadElementsBodyRequest({
@@ -83,7 +87,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
handler: imageFormats?.[FIRST_ARRAY_ELEMENT]?.id,
zoom: getModelExportZoom(imageSize.width, model),
overlayIds: overlays.map(overlayId => `${overlayId}`),
- currentView: currentView.value,
+ currentView: false,
});
if (url) {
@@ -91,6 +95,21 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
}
}, [models, imageFormats, currentBackground, currentModels, imageSize.width]);
+ const handleDownloadCurrentView = useCallback(async () => {
+ const url = getGraphicsDownloadUrl({
+ backgroundId: currentBackground?.id,
+ modelId: `${selectedModelId}`,
+ handler: imageFormats?.[FIRST_ARRAY_ELEMENT]?.id,
+ zoom: getZoom(),
+ overlayIds: overlays.map(overlayId => `${overlayId}`),
+ currentView: true,
+ });
+
+ if (url) {
+ window.open(url);
+ }
+ }, [selectedModelId, imageFormats, currentBackground]);
+
const globalContextDataValue = useMemo(
() => ({
annotations,
@@ -99,7 +118,6 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
models,
imageSize,
imageFormats,
- currentView,
}),
[
annotations,
@@ -108,7 +126,6 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
models,
imageSize,
imageFormats,
- currentView,
],
);
@@ -120,10 +137,10 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
setModels,
setImageSize,
setImageFormats,
- setCurrentView,
handleDownloadElements,
handleDownloadNetwork,
handleDownloadGraphics,
+ handleDownloadCurrentView,
data: globalContextDataValue,
}),
[handleDownloadElements, handleDownloadNetwork, globalContextDataValue, handleDownloadGraphics],
@@ -141,4 +158,4 @@ Export.ImageSize = ImageSize;
Export.ImageFormat = ImageFormat;
Export.DownloadNetwork = DownloadNetwork;
Export.DownloadGraphics = DownloadGraphics;
-Export.CurrentView = CurrentView;
+Export.DownloadCurrentView = DownloadCurrentView;
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
index 5381e784a3e7d88eb5895b9fc93ea44c85050904..f464a371ad773b5fc69f68a98555246eb3eee58c 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
@@ -1,4 +1,3 @@
-import { DEFAULT_CURRENT_VIEW } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants';
import { ExportContextType } from './ExportCompound.types';
import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants';
@@ -55,10 +54,10 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = {
setModels: () => {},
setImageSize: () => {},
setImageFormats: () => {},
- setCurrentView: () => {},
handleDownloadElements: () => Promise.resolve(),
handleDownloadNetwork: () => Promise.resolve(),
handleDownloadGraphics: () => {},
+ handleDownloadCurrentView: () => {},
data: {
annotations: [],
includedCompartmentPathways: [],
@@ -66,6 +65,5 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = {
models: [],
imageFormats: [],
imageSize: DEFAULT_IMAGE_SIZE,
- currentView: DEFAULT_CURRENT_VIEW,
},
};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
index b57cc6e01bff11428ca94dbef9503ef53bfc69c3..c5d31e4506f701ad5015a3f74b7928143a5fabae 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
@@ -1,4 +1,3 @@
-import { CurrentView } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types';
import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
import { ImageSize } from './ImageSize/ImageSize.types';
@@ -7,18 +6,17 @@ export type ExportContextType = {
setIncludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
setExcludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
setModels: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
- setCurrentView: React.Dispatch<React.SetStateAction<CurrentView>>;
setImageSize: React.Dispatch<React.SetStateAction<ImageSize>>;
setImageFormats: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
handleDownloadElements: () => Promise<void>;
handleDownloadNetwork: () => Promise<void>;
handleDownloadGraphics: () => void;
+ handleDownloadCurrentView: () => void;
data: {
annotations: CheckboxItem[];
includedCompartmentPathways: CheckboxItem[];
excludedCompartmentPathways: CheckboxItem[];
models: CheckboxItem[];
- currentView: CurrentView;
imageSize: ImageSize;
imageFormats: CheckboxItem[];
};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
index d4869197ef7c1b80e24edddcc98ef7d2bc95eaa6..9ca56920536f0d3d41978fd8427abad24e658d73 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
@@ -1,10 +1,6 @@
import { MapModel } from '@/types/models';
import { numberToSafeInt } from '@/utils/number/numberToInt';
import { useCallback, useContext, useEffect } from 'react';
-import {
- getScreenAspectRatios,
- getScreenDimension,
-} from '@/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useScreenAspectRatios';
import { ExportContext } from '../../ExportCompound.context';
import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '../ImageSize.constants';
import { ImageSize, ModelAspectRatios } from '../ImageSize.types';
@@ -20,14 +16,9 @@ interface UseImageSizeResults {
export const useImageSize = (): UseImageSizeResults => {
const selectedModel = useExportGraphicsSelectedModel();
- const { data, setImageSize, setCurrentView } = useContext(ExportContext);
- const { imageSize, currentView } = data;
- let aspectRatios: ModelAspectRatios;
- if (currentView.value) {
- aspectRatios = getScreenAspectRatios();
- } else {
- aspectRatios = getModelAspectRatios(selectedModel);
- }
+ const { data, setImageSize } = useContext(ExportContext);
+ const { imageSize } = data;
+ const aspectRatios: ModelAspectRatios = getModelAspectRatios(selectedModel);
const maxWidth = selectedModel?.width || DEFAULT_IMAGE_WIDTH;
const maxHeight = selectedModel?.height || DEFAULT_IMAGE_HEIGHT;
@@ -37,8 +28,8 @@ export const useImageSize = (): UseImageSizeResults => {
const newWidth = newImageSize.width;
const newHeight = newImageSize.height;
- const widthMinMax = currentView.value ? newWidth : Math.min(maxWidth, newWidth);
- const heightMinMax = currentView.value ? newHeight : Math.min(maxHeight, newHeight);
+ const widthMinMax = Math.min(maxWidth, newWidth);
+ const heightMinMax = Math.min(maxHeight, newHeight);
const widthInt = numberToSafeInt(widthMinMax);
const heightInt = numberToSafeInt(heightMinMax);
@@ -53,9 +44,7 @@ export const useImageSize = (): UseImageSizeResults => {
const setDefaultModelImageSize = useCallback(
(model: MapModel): void => {
- const screenDimension = getScreenDimension();
- const width = currentView.value ? screenDimension.width : model.width;
- const height = currentView.value ? screenDimension.height : model.height;
+ const { width, height } = model;
const newImageSize = getNormalizedImageSize({
width,
height,
@@ -63,7 +52,7 @@ export const useImageSize = (): UseImageSizeResults => {
setImageSize(newImageSize);
},
- [getNormalizedImageSize, setImageSize, setCurrentView, currentView],
+ [getNormalizedImageSize, setImageSize],
);
const handleChangeWidth = (width: number): void => {
@@ -90,7 +79,7 @@ export const useImageSize = (): UseImageSizeResults => {
}
setDefaultModelImageSize(selectedModel);
- }, [setDefaultModelImageSize, selectedModel, setCurrentView, currentView]);
+ }, [setDefaultModelImageSize, selectedModel]);
return {
handleChangeWidth,
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.test.tsx
index cec6029b9679d30b241a675d1b3d9b222b610303..7159f58a7cb27742cefbd187b8d1583092ccc09f 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.test.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.test.tsx
@@ -30,7 +30,7 @@ describe('ExportDrawer - component', () => {
expect(screen.getByText('Export')).toBeInTheDocument();
- Object.keys(TAB_NAMES).forEach(label => {
+ Object.values(TAB_NAMES).forEach(label => {
expect(screen.getByText(label)).toBeInTheDocument();
});
});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.tsx
index 408b68c779a1f5a9e488e662ca24c9a3c0120b0a..64d3ddfdec10967735ffd7234d8b1703c1f442eb 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.tsx
@@ -4,6 +4,7 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modelsIdsSelector } from '@/redux/models/models.selectors';
import { DrawerHeading } from '@/shared/DrawerHeading';
import { useEffect, useState } from 'react';
+import { CurrentView } from './CurrentView';
import { Elements } from './Elements';
import { Graphics } from './Graphics';
import { Network } from './Network';
@@ -32,6 +33,7 @@ export const ExportDrawer = (): React.ReactNode => {
{activeTab === TAB_NAMES.ELEMENTS && <Elements />}
{activeTab === TAB_NAMES.NETWORK && <Network />}
{activeTab === TAB_NAMES.GRAPHICS && <Graphics />}
+ {activeTab === TAB_NAMES.CURRENT_VIEW && <CurrentView />}
</div>
</div>
);
diff --git a/src/components/Map/Drawer/ExportDrawer/Graphics/Graphics.component.tsx b/src/components/Map/Drawer/ExportDrawer/Graphics/Graphics.component.tsx
index aafe37a2139b710d8fb3f4b7bdd94f5354e5c043..547c2c14ed2b487a38bb5773552aa386ef84fadd 100644
--- a/src/components/Map/Drawer/ExportDrawer/Graphics/Graphics.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/Graphics/Graphics.component.tsx
@@ -4,7 +4,6 @@ export const Graphics = (): React.ReactNode => {
return (
<div data-testid="graphics-tab">
<Export>
- <Export.CurrentView />
<Export.Submap />
<Export.ImageSize />
<Export.ImageFormat />
diff --git a/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.component.test.tsx
index c604f80e4bc77ddedf4ef437a4ff6bb7e3fa0f19..0da162f9b33c5ca62f8e050493b90c66e037aa3a 100644
--- a/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.component.test.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.component.test.tsx
@@ -9,27 +9,27 @@ describe('TabNavigator - component', () => {
mockOnTabChange.mockReset();
});
it('should render TabNavigator with correct tabs', () => {
- render(<TabNavigator activeTab="elements" onTabChange={mockOnTabChange} />);
+ render(<TabNavigator activeTab="ELEMENTS" onTabChange={mockOnTabChange} />);
- Object.keys(TAB_NAMES).forEach(label => {
+ Object.values(TAB_NAMES).forEach(label => {
expect(screen.getByText(label)).toBeInTheDocument();
});
});
it('should change tabs correctly', () => {
- render(<TabNavigator activeTab="elements" onTabChange={mockOnTabChange} />);
+ render(<TabNavigator activeTab="ELEMENTS" onTabChange={mockOnTabChange} />);
- fireEvent.click(screen.getByText(/network/i));
- expect(mockOnTabChange).toHaveBeenCalledWith('network');
+ fireEvent.click(screen.getByText(/NETWORK/i));
+ expect(mockOnTabChange).toHaveBeenCalledWith('NETWORK');
- fireEvent.click(screen.getByText(/graphics/i));
- expect(mockOnTabChange).toHaveBeenCalledWith('graphics');
+ fireEvent.click(screen.getByText(/GRAPHICS/i));
+ expect(mockOnTabChange).toHaveBeenCalledWith('GRAPHICS');
});
it('should set initial active tab', () => {
- render(<TabNavigator activeTab="network" onTabChange={mockOnTabChange} />);
+ render(<TabNavigator activeTab="NETWORK" onTabChange={mockOnTabChange} />);
const currentTab = screen.getByRole('button', { current: true });
- const networkTab = screen.getByText(/network/i);
+ const networkTab = screen.getByText(/NETWORK/i);
expect(currentTab).toBe(networkTab);
});
diff --git a/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.component.tsx b/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.component.tsx
index e8714166f2e29bb4f16e8d7ada335b877d6cc2de..734ccde82528a38fd77c8f1048c9bb660b611dfa 100644
--- a/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.component.tsx
@@ -9,11 +9,11 @@ type TabNavigatorProps = {
export const TabNavigator = ({ activeTab, onTabChange }: TabNavigatorProps): React.ReactNode => (
<div className="flex gap-5">
- {Object.entries(TAB_NAMES).map(([label, tabName]) => (
+ {Object.entries(TAB_NAMES).map(([, tabName]) => (
<TabButton
key={tabName}
handleChangeTab={(): void => onTabChange(tabName)}
- label={label}
+ label={tabName}
active={activeTab === tabName}
/>
))}
diff --git a/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.constants.ts b/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.constants.ts
index 3eda3a5493ce18cb7f02d1d2e2a499a40c212a15..a626bc169c65f4036302b3b6917174abe09c8845 100644
--- a/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.constants.ts
+++ b/src/components/Map/Drawer/ExportDrawer/TabNavigator/TabNavigator.constants.ts
@@ -1,5 +1,6 @@
export const TAB_NAMES = {
- ELEMENTS: 'elements',
- NETWORK: 'network',
- GRAPHICS: 'graphics',
+ ELEMENTS: 'ELEMENTS',
+ NETWORK: 'NETWORK',
+ GRAPHICS: 'GRAPHICS',
+ CURRENT_VIEW: 'CURRENT VIEW',
} as const;