NickAkhmetov/CAT-925 ensure visualizations for support image pyramid …

…datasets use parent dataset UUID for notebooks (#3570)

CHANGELOG-cat-925.md

@@ -0,0 +1 @@
+- Ensure visualizations for image pyramids use parent UUID to fetch notebooks.

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={
             <Stack direction="row" spacing={1}>
               {hasNotebook && <VisualizationWorkspaceButton uuid={uuid} />}
-              <VisualizationDownloadButton uuid={uuid} hasNotebook={hasNotebook} />
+              <VisualizationDownloadButton uuid={uuid} hasNotebook={hasNotebook} parentUuid={parentUuid} />
               <VisualizationShareButton />
               <VisualizationThemeSwitch />
               <SecondaryBackgroundTooltip title="Switch to Fullscreen">

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;

context/app/static/js/components/detailPage/visualization/VisualizationWrapper/VisualizationWrapper.tsx

@@ -34,6 +34,7 @@ function VisualizationWrapper({
     }),
     [isPublicationPage, shouldDisplayHeader, uuid],
   );
+
   return (
     <VizContainerStyleContext.Provider value={containerStyles}>
       <VisualizationErrorBoundary>

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<VitessceConf>(getVitessceConfKey(uuid, groupsToken), (_key: unknown) =>
+  const swr = useSWR<VitessceConf>(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) {