diff --git a/CHANGELOG-cat-925.md b/CHANGELOG-cat-925.md new file mode 100644 index 0000000000..53a1b42e0c --- /dev/null +++ b/CHANGELOG-cat-925.md @@ -0,0 +1 @@ +- Ensure visualizations for image pyramids use parent UUID to fetch notebooks. diff --git a/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.tsx b/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.tsx index bd8ff0c846..a8cd6db484 100644 --- a/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.tsx +++ b/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { Vitessce } from 'vitessce'; import Paper from '@mui/material/Paper'; @@ -98,6 +98,19 @@ function Visualization({ const isMultiDataset = Array.isArray(vitessceConfig); + // Find parent UUID for the visualization if present + const parentUuid: string | undefined = useMemo(() => { + if (Array.isArray(vitData)) { + const vitDataArray = vitData as object[]; + const found = vitDataArray.find((data) => 'parentUuid' in data) as { parentUuid: string } | undefined; + return found?.parentUuid; + } + if ('parentUuid' in vitData) { + return (vitData as { parentUuid: string }).parentUuid; + } + return undefined; + }, [vitData]); + if (!vitessceConfig) { return null; } @@ -119,7 +132,7 @@ function Visualization({ buttons={ {hasNotebook && } - + diff --git a/context/app/static/js/components/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx b/context/app/static/js/components/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx index 71ac9c67ea..09cbbe037d 100644 --- a/context/app/static/js/components/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx +++ b/context/app/static/js/components/detailPage/visualization/VisualizationDownloadButton/VisualizationDownloadButton.tsx @@ -13,23 +13,24 @@ const tooltip = 'Download Jupyter Notebook'; interface VisualizationDownloadButtonProps { uuid?: string; hasNotebook?: boolean; + parentUuid?: string; } -function VisualizationDownloadButton({ uuid, hasNotebook }: VisualizationDownloadButtonProps) { +function VisualizationDownloadButton({ uuid, hasNotebook, parentUuid }: VisualizationDownloadButtonProps) { const trackEntityPageEvent = useTrackEntityPageEvent(); const { toastError } = useSnackbarActions(); const downloadNotebook = useCallback(() => { trackEntityPageEvent({ action: `Vitessce / ${tooltip}` }); postAndDownloadFile({ - url: `/notebooks/entities/dataset/${uuid}.ws.ipynb`, + url: `/notebooks/entities/dataset/${parentUuid ?? uuid}.ws.ipynb`, body: {}, }) .then() .catch(() => { toastError('Failed to download Jupyter Notebook'); }); - }, [uuid, toastError, trackEntityPageEvent]); + }, [parentUuid, uuid, toastError, trackEntityPageEvent]); if (!uuid || !hasNotebook) { return null; diff --git a/context/app/static/js/components/detailPage/visualization/VisualizationWrapper/VisualizationWrapper.tsx b/context/app/static/js/components/detailPage/visualization/VisualizationWrapper/VisualizationWrapper.tsx index bd58c89b3f..56a44b2a92 100644 --- a/context/app/static/js/components/detailPage/visualization/VisualizationWrapper/VisualizationWrapper.tsx +++ b/context/app/static/js/components/detailPage/visualization/VisualizationWrapper/VisualizationWrapper.tsx @@ -34,6 +34,7 @@ function VisualizationWrapper({ }), [isPublicationPage, shouldDisplayHeader, uuid], ); + return ( diff --git a/context/app/static/js/pages/Dataset/hooks.ts b/context/app/static/js/pages/Dataset/hooks.ts index 285cf8cebe..0b2f937158 100644 --- a/context/app/static/js/pages/Dataset/hooks.ts +++ b/context/app/static/js/pages/Dataset/hooks.ts @@ -73,9 +73,13 @@ export function useVitessceConf(uuid: string, parentUuid?: string) { if (parentUuid) { urlParams.set('parent', parentUuid); } - return useSWR(getVitessceConfKey(uuid, groupsToken), (_key: unknown) => + const swr = useSWR(getVitessceConfKey(uuid, groupsToken), (_key: unknown) => fetcher({ url: `${base}?${urlParams.toString()}`, requestInit: { headers: getAuthHeader(groupsToken) } }), ); + if (parentUuid) { + return { ...swr, data: { ...swr.data, parentUuid } }; + } + return swr; } function useProcessedDatasets(includeComponents?: boolean) {