From c44d7d0facf12eb0fb27a1e383678d9856239af4 Mon Sep 17 00:00:00 2001 From: Nikolay Akhmetov Date: Fri, 1 Nov 2024 14:03:52 -0400 Subject: [PATCH 1/2] CAT-892 add vitessce json link --- CHANGELOG-cat-892-add-vitessce-json-link.md | 1 + .../ProcessedDataset/DatasetTitle.tsx | 6 +++++ .../VisualizationIconButton.tsx | 26 +++++++++++++++++++ .../SummaryJSONButton/SummaryJSONButton.tsx | 1 - context/app/static/js/pages/Dataset/hooks.ts | 11 +++++--- .../TooltipButton/TooltipIconButton.tsx | 2 ++ 6 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 CHANGELOG-cat-892-add-vitessce-json-link.md create mode 100644 context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx diff --git a/CHANGELOG-cat-892-add-vitessce-json-link.md b/CHANGELOG-cat-892-add-vitessce-json-link.md new file mode 100644 index 0000000000..2dc846d38b --- /dev/null +++ b/CHANGELOG-cat-892-add-vitessce-json-link.md @@ -0,0 +1 @@ +- Add "View Vitessce Configuration" button to processed datasets with visualizations. diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/DatasetTitle.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/DatasetTitle.tsx index edd1ff6113..73c2f16225 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/DatasetTitle.tsx +++ b/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 ( @@ -35,6 +40,7 @@ export function DatasetTitle() { + {conf && } diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx new file mode 100644 index 0000000000..09358efd45 --- /dev/null +++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx @@ -0,0 +1,26 @@ +import React 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(); + + return ( + trackEntityPageEvent({ action: 'View Vitessce Conf' })} + > + + + ); +} + +export default VisualizationIconButton; diff --git a/context/app/static/js/components/detailPage/summary/SummaryJSONButton/SummaryJSONButton.tsx b/context/app/static/js/components/detailPage/summary/SummaryJSONButton/SummaryJSONButton.tsx index 2939d916ee..c5c1562234 100644 --- a/context/app/static/js/components/detailPage/summary/SummaryJSONButton/SummaryJSONButton.tsx +++ b/context/app/static/js/components/detailPage/summary/SummaryJSONButton/SummaryJSONButton.tsx @@ -15,7 +15,6 @@ function SummaryJSONButton({ entity_type, uuid }: Props) { return ( trackEntityPageEvent({ action: 'View JSON' })} diff --git a/context/app/static/js/pages/Dataset/hooks.ts b/context/app/static/js/pages/Dataset/hooks.ts index ea502943c9..6317f136e4 100644 --- a/context/app/static/js/pages/Dataset/hooks.ts +++ b/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(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)) { diff --git a/context/app/static/js/shared-styles/buttons/TooltipButton/TooltipIconButton.tsx b/context/app/static/js/shared-styles/buttons/TooltipButton/TooltipIconButton.tsx index ba7e485376..a87cea491e 100644 --- a/context/app/static/js/shared-styles/buttons/TooltipButton/TooltipIconButton.tsx +++ b/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 }; From bf86e434b3c2ac0d31f9f27928e71a78ae6a2cea Mon Sep 17 00:00:00 2001 From: Nikolay Akhmetov Date: Mon, 4 Nov 2024 10:43:08 -0500 Subject: [PATCH 2/2] add `useCallback` --- .../ProcessedDataset/VisualizationIconButton.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx index 09358efd45..4d60af6e26 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx +++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/VisualizationIconButton.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { WhiteRectangularTooltipIconButton } from 'js/shared-styles/buttons/TooltipButton'; import { VisualizationIcon } from 'js/shared-styles/icons'; @@ -11,12 +11,16 @@ interface Props { function VisualizationIconButton({ href }: Props) { const trackEntityPageEvent = useTrackEntityPageEvent(); + const trackViewVitessceConf = useCallback(() => { + trackEntityPageEvent({ action: 'View Vitessce Conf' }); + }, [trackEntityPageEvent]); + return ( trackEntityPageEvent({ action: 'View Vitessce Conf' })} + onClick={trackViewVitessceConf} >