diff --git a/CHANGELOG b/CHANGELOG index 6be2d083938a389257ea878d2cbfe15e5e678926..9d55b629125abe3922afbb78fb3f55201b14edf7 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,4 +1,6 @@ minerva-front (18.0.0~beta.5) stable; urgency=medium + * Small improvements: there is a waiting spinner after clicking on download + button (#297) * Small improvements: when exporting map as image provide default selections in for format and submap (#295) diff --git a/public/config.js b/public/config.js index dfe787a79b976c768ede252505bcfec6a9dfb939..21e90e5000e69039e2ab45bf06a29750a0884be1 100644 --- a/public/config.js +++ b/public/config.js @@ -1,7 +1,7 @@ window.config = { - BASE_API_URL: 'https://lux1.atcomp.pl/minerva/api', - BASE_NEW_API_URL: 'https://lux1.atcomp.pl/minerva/new_api/', - BASE_MAP_IMAGES_URL: 'https://lux1.atcomp.pl/', + BASE_API_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/api', + BASE_NEW_API_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/new_api/', + BASE_MAP_IMAGES_URL: 'https://minerva-dev.lcsb.uni.lu/', DEFAULT_PROJECT_ID: 'sample', - ADMIN_PANEL_URL: 'https://lux1.atcomp.pl/minerva/admin.xhtml', + ADMIN_PANEL_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/admin.xhtml', }; diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx index 53276caa74a5bd4b0851f3b189df50e79a2a53f3..8a987f80d5a99437f0a06297a62daa1c8db2f8d4 100644 --- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx +++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx @@ -1,13 +1,33 @@ -import { useContext } from 'react'; +import { useContext, useState } from 'react'; import { Button } from '@/shared/Button'; +import Image from 'next/image'; +import spinnerIcon from '@/assets/vectors/icons/spinner.svg'; import { ExportContext } from '../ExportCompound.context'; export const DownloadElements = (): React.ReactNode => { const { handleDownloadElements } = useContext(ExportContext); + const [downloadingElements, setDownloadingElements] = useState<boolean>(false); + + const handleDownloadElementsWrapper = async (): Promise<void> => { + setDownloadingElements(true); + await handleDownloadElements(); + setDownloadingElements(false); + }; return ( <div className="mt-6"> - <Button onClick={handleDownloadElements}>Download</Button> + <Button onClick={handleDownloadElementsWrapper}> + {downloadingElements && ( + <Image + src={spinnerIcon} + alt="spinner icon" + height={12} + width={12} + className="mr-2 animate-spin" + /> + )} + Download + </Button> </div> ); }; diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx index 8e0fb25dd7a80742635bc5039e63a74ceae686cc..8097900e7f1212f33af740a4746d86678a85cd9f 100644 --- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx +++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx @@ -1,13 +1,33 @@ -import { useContext } from 'react'; +import { useContext, useState } from 'react'; import { Button } from '@/shared/Button'; +import Image from 'next/image'; +import spinnerIcon from '@/assets/vectors/icons/spinner.svg'; import { ExportContext } from '../ExportCompound.context'; export const DownloadNetwork = (): React.ReactNode => { const { handleDownloadNetwork } = useContext(ExportContext); + const [downloadingNetwork, setDownloadingNetwork] = useState<boolean>(false); + + const handleDownloadNetworkWrapper = async (): Promise<void> => { + setDownloadingNetwork(true); + await handleDownloadNetwork(); + setDownloadingNetwork(false); + }; return ( <div className="mt-6"> - <Button onClick={handleDownloadNetwork}>Download</Button> + <Button onClick={handleDownloadNetworkWrapper}> + {downloadingNetwork && ( + <Image + src={spinnerIcon} + alt="spinner icon" + height={12} + width={12} + className="mr-2 animate-spin" + /> + )} + Download + </Button> </div> ); }; diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx index 52bc373224656a1994d53acf5fbda4b6a9619273..f5803c10f60e163d333a9eadc1fb8b6855d7486c 100644 --- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx +++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx @@ -52,8 +52,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => { includedCompartmentPathways, excludedCompartmentPathways, }); - - dispatch(downloadElements(body)); + await dispatch(downloadElements(body)); }, [modelIds, annotations, includedCompartmentPathways, excludedCompartmentPathways, dispatch]); const handleDownloadNetwork = useCallback(async () => { @@ -65,7 +64,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => { excludedCompartmentPathways, }); - dispatch(downloadNetwork(data)); + await dispatch(downloadNetwork(data)); }, [modelIds, annotations, includedCompartmentPathways, excludedCompartmentPathways, dispatch]); const handleDownloadGraphics = useCallback(async () => { diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts index a07ae4c58f7b2fa3ec8ef4f652c1d4c9dbca075b..5a7e4f086b680db77987b73ae01317a6d0cb74b4 100644 --- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts +++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts @@ -54,8 +54,8 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = { setModels: () => {}, setImageSize: () => {}, setImageFormats: () => {}, - handleDownloadElements: () => {}, - handleDownloadNetwork: () => {}, + handleDownloadElements: () => Promise.resolve(), + handleDownloadNetwork: () => Promise.resolve(), handleDownloadGraphics: () => {}, data: { annotations: [], diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts index b6e70397e6d6edb1ca1a5220aebb814c3518ff4e..02c87101e98091a30464c03f9d46d9deba6f56a8 100644 --- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts +++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts @@ -8,8 +8,8 @@ export type ExportContextType = { setModels: React.Dispatch<React.SetStateAction<CheckboxItem[]>>; setImageSize: React.Dispatch<React.SetStateAction<ImageSize>>; setImageFormats: React.Dispatch<React.SetStateAction<CheckboxItem[]>>; - handleDownloadElements: () => void; - handleDownloadNetwork: () => void; + handleDownloadElements: () => Promise<void>; + handleDownloadNetwork: () => Promise<void>; handleDownloadGraphics: () => void; data: { annotations: CheckboxItem[];