diff --git a/frontend/packages/data-portal/app/components/Link.tsx b/frontend/packages/data-portal/app/components/Link.tsx index 3dc669b88..2ae78f765 100644 --- a/frontend/packages/data-portal/app/components/Link.tsx +++ b/frontend/packages/data-portal/app/components/Link.tsx @@ -1,8 +1,12 @@ import { Link as RemixLink, LinkProps } from '@remix-run/react' +import { ForwardedRef, forwardRef } from 'react' import { isExternalUrl } from 'app/utils/url' -export function Link({ to, ...props }: LinkProps) { +function BaseLink( + { to, ...props }: LinkProps, + ref: ForwardedRef, +) { let newTabProps: Partial = {} if (typeof to === 'string' && isExternalUrl(to)) { @@ -14,5 +18,7 @@ export function Link({ to, ...props }: LinkProps) { } } - return + return } + +export const Link = forwardRef(BaseLink) diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx index fb2db6066..a29b43012 100644 --- a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx +++ b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx @@ -9,6 +9,7 @@ import { MetadataTable } from 'app/components/Table' import { TiltSeriesQualityScoreBadge } from 'app/components/TiltSeriesQualityScoreBadge' import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState' import { useI18n } from 'app/hooks/useI18n' +import { Events, usePlausible } from 'app/hooks/usePlausible' import { useRunById } from 'app/hooks/useRunById' import { i18n } from 'app/i18n' import { useDrawer } from 'app/state/drawer' @@ -19,29 +20,56 @@ export function RunHeader() { const { t } = useI18n() const tiltSeries = run.tiltseries[0] - const keyPhotoURL = - run.tomogram_voxel_spacings[0]?.tomograms[0]?.key_photo_url + + const tomogram = run.tomogram_voxel_spacings.at(0)?.tomograms.at(0) + const keyPhotoURL = tomogram?.key_photo_url + const neuroglancerConfig = tomogram?.neuroglancer_config const { openTomogramDownloadModal } = useDownloadModalQueryParamState() - const neuroglancerConfig = run.tomogram_voxel_spacings.at(0)?.tomograms.at(0) - ?.neuroglancer_config + const plausible = usePlausible() + + function trackViewTomogram() { + plausible(Events.ViewTomogram, { + datasetId: run.dataset.id, + organism: run.dataset.organism_name ?? 'None', + runId: run.id, + tomogramId: tomogram?.id ?? 'None', + }) + } return ( {neuroglancerConfig && ( - + + )}