NickAkhmetov/CAT-892 add vitessce json link

CHANGELOG-cat-892-add-vitessce-json-link.md

@@ -0,0 +1 @@
+- Add "View Vitessce Configuration" button to processed datasets with visualizations.

context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/DatasetTitle.tsx

@@ -5,18 +5,23 @@ import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
 import IconButton from '@mui/material/IconButton';
 import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
 import Stack from '@mui/material/Stack';
+import { useVitessceConfLink } from 'js/pages/Dataset/hooks';
 import StatusIcon from '../../StatusIcon';
 import { useProcessedDatasetContext } from './ProcessedDatasetContext';
 import VersionSelect from '../../VersionSelect';
 import { useTrackEntityPageEvent } from '../../useTrackEntityPageEvent';
 import SummaryJSONButton from '../../summary/SummaryJSONButton';
+import VisualizationIconButton from './VisualizationIconButton';
 
 export function DatasetTitle() {
   const {
     dataset: { hubmap_id, status, uuid, entity_type },
+    conf,
   } = useProcessedDatasetContext();
   const copyText = useHandleCopyClick();
   const track = useTrackEntityPageEvent();
+  const parentUuid = conf && 'parentUuid' in conf ? (conf.parentUuid as string) : undefined;
+  const vitessceConfUrl = useVitessceConfLink(uuid, parentUuid);
   return (
     <Typography variant="h5" display="flex" alignItems="center" gap={0.5}>
       <StatusIcon status={status} tooltip />
@@ -35,6 +40,7 @@ export function DatasetTitle() {
         </IconButton>
       </SecondaryBackgroundTooltip>
       <Stack ml="auto" direction="row" gap={1} alignItems="center">
+        {conf && <VisualizationIconButton href={vitessceConfUrl} />}
         <SummaryJSONButton entity_type={entity_type} uuid={uuid} />
         <VersionSelect />
       </Stack>

context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+
+import { WhiteRectangularTooltipIconButton } from 'js/shared-styles/buttons/TooltipButton';
+import { VisualizationIcon } from 'js/shared-styles/icons';
+import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
+
+interface Props {
+  href: string;
+}
+
+function VisualizationIconButton({ href }: Props) {
+  const trackEntityPageEvent = useTrackEntityPageEvent();
+
+  const trackViewVitessceConf = useCallback(() => {
+    trackEntityPageEvent({ action: 'View Vitessce Conf' });
+  }, [trackEntityPageEvent]);
+
+  return (
+    <WhiteRectangularTooltipIconButton
+      tooltip="View Vitessce Configuration"
+      href={href}
+      target="_blank"
+      onClick={trackViewVitessceConf}
+    >
+      <VisualizationIcon color="primary" />
+    </WhiteRectangularTooltipIconButton>
+  );
+}
+
+export default VisualizationIconButton;

context/app/static/js/components/detailPage/summary/SummaryJSONButton/SummaryJSONButton.tsx

@@ -15,7 +15,6 @@ function SummaryJSONButton({ entity_type, uuid }: Props) {
   return (
     <WhiteRectangularTooltipIconButton
       tooltip="View JSON"
-      sx={{ height: '36px', display: 'flex' }}
       href={`/browse/${entity_type.toLowerCase()}/${uuid}.json`}
       target="_blank"
       onClick={() => trackEntityPageEvent({ action: 'View JSON' })}

context/app/static/js/pages/Dataset/hooks.ts

@@ -65,15 +65,20 @@ function getVitessceConfKey(uuid: string, groupsToken: string) {
   return `vitessce-conf-${uuid}-${groupsToken}`;
 }
 
-export function useVitessceConf(uuid: string, parentUuid?: string) {
-  const { groupsToken } = useAppContext();
+export function useVitessceConfLink(uuid: string, parentUuid?: string) {
   const base = `/browse/dataset/${uuid}.vitessce.json`;
   const urlParams = new URLSearchParams(window.location.search);
   if (parentUuid) {
     urlParams.set('parent', parentUuid);
   }
+  return `${base}?${urlParams.toString()}`;
+}
+
+export function useVitessceConf(uuid: string, parentUuid?: string) {
+  const { groupsToken } = useAppContext();
+  const url = useVitessceConfLink(uuid, parentUuid);
   const swr = useSWR<VitessceConf | VitessceConf[]>(getVitessceConfKey(uuid, groupsToken), (_key: unknown) =>
-    fetcher({ url: `${base}?${urlParams.toString()}`, requestInit: { headers: getAuthHeader(groupsToken) } }),
+    fetcher({ url, requestInit: { headers: getAuthHeader(groupsToken) } }),
   );
   if (parentUuid) {
     if (Array.isArray(swr.data)) {

context/app/static/js/shared-styles/buttons/TooltipButton/TooltipIconButton.tsx

@@ -30,6 +30,8 @@ const WhiteRectangularTooltipIconButton = styled(RectangularTooltipIconButton)((
   color: theme.palette.primary.main,
   border: `1px solid ${theme.palette.divider}`,
   borderRadius: theme.spacing(0.5),
+  height: theme.spacing(4.5),
+  display: 'flex',
 }));
 
 export { RectangularTooltipIconButton, WhiteRectangularTooltipIconButton };