plausible view tomogram event (#297)

- Adds the `View tomogram` goal for tracking plausible - Refactors plausible URL to be a function that takes localhost tracking as input - This fixes errors on the frontend regarding references to `process.env` - Adds forward ref to Link component
chanzuckerberg · Dec 20, 2023 · 5dc39bc · 5dc39bc
1 parent 6edfe60
commit 5dc39bc
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 33 deletions.
diff --git 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<HTMLAnchorElement>,
+) {
   let newTabProps: Partial<LinkProps> = {}
 
   if (typeof to === 'string' && isExternalUrl(to)) {
@@ -14,5 +18,7 @@ export function Link({ to, ...props }: LinkProps) {
     }
   }
 
-  return <RemixLink to={to} {...props} {...newTabProps} />
+  return <RemixLink ref={ref} to={to} {...props} {...newTabProps} />
 }
+
+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
@@ -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 (
     <PageHeader
       actions={
         <>
           {neuroglancerConfig && (
-            <Button
-              to={`https://neuroglancer-demo.appspot.com/#!${encodeURIComponent(
-                neuroglancerConfig,
-              )}`}
-              startIcon={<Icon sdsIcon="table" sdsType="button" sdsSize="s" />}
-              sdsType="primary"
-              sdsStyle="rounded"
-              component={Link}
+            // We need to disable this rule because we need the div to capture
+            // bubbled click events from the link button below. This is because
+            // Plausible automatically adds event listeners to every link on the
+            // page to track outbound links, so we can't attach a click listener
+            // to the link directly because Plausible will overwrite it.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            <div
+              onClick={trackViewTomogram}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  trackViewTomogram()
+                }
+              }}
             >
-              <span>{t('viewTomogram')}</span>
-            </Button>
+              <Button
+                to={`https://neuroglancer-demo.appspot.com/#!${encodeURIComponent(
+                  neuroglancerConfig,
+                )}`}
+                startIcon={
+                  <Icon sdsIcon="table" sdsType="button" sdsSize="s" />
+                }
+                sdsType="primary"
+                sdsStyle="rounded"
+                component={Link}
+              >
+                <span>{t('viewTomogram')}</span>
+              </Button>
+            </div>
           )}
 
           <Button
@@ -160,7 +188,7 @@ export function RunHeader() {
                     label: i18n.tomogramProcessing,
                     values: run.tomogram_stats
                       .flatMap((stats) => stats.tomogram_processing)
-                      .map((tomogram) => tomogram.processing),
+                      .map((tomo) => tomo.processing),
                   },
                   {
                     label: i18n.annotatedObjects,

diff --git a/frontend/packages/data-portal/app/hooks/usePlausible.ts b/frontend/packages/data-portal/app/hooks/usePlausible.ts
@@ -5,14 +5,6 @@ import { useEnvironment } from 'app/context/Environment.context'
 import { DrawerId } from 'app/state/drawer'
 import { DownloadConfig, DownloadStep, DownloadTab } from 'app/types/download'
 
-const PLAUSIBLE_EXTENSIONS = [
-  'outbound-links',
-  'file-downloads',
-  ...(process.env.LOCALHOST_PLAUSIBLE_TRACKING === 'true' ? ['local'] : []),
-].join('.')
-
-export const PLAUSIBLE_URL = `https://plausible.io/js/script.${PLAUSIBLE_EXTENSIONS}.js`
-
 export const PLAUSIBLE_ENV_URL_MAP: Record<NodeJS.ProcessEnv['ENV'], string> = {
   local: 'frontend.cryoet.dev.si.czi.technology',
   dev: 'frontend.cryoet.dev.si.czi.technology',
@@ -30,6 +22,7 @@ export enum Events {
   Filter = 'Filter',
   OpenDownloadModal = 'Open download modal',
   ToggleMetadataDrawer = 'Toggle metadata drawer',
+  ViewTomogram = 'View tomogram',
 }
 
 export type PlausibleDownloadModalPayload<T = object> = T & {
@@ -70,6 +63,13 @@ export type EventPayloads = {
     open: boolean
     type: DrawerId
   }
+
+  [Events.ViewTomogram]: {
+    datasetId: number
+    organism: string
+    runId: number
+    tomogramId: number | string
+  }
 }
 
 export function usePlausible() {
@@ -112,3 +112,17 @@ export function usePlausible() {
 
   return logPlausibleEvent
 }
+
+export function getPlausibleUrl({
+  hasLocalhostTracking,
+}: {
+  hasLocalhostTracking: boolean
+}) {
+  const extensions = [
+    'outbound-links',
+    'file-downloads',
+    ...(hasLocalhostTracking ? ['local'] : []),
+  ].join('.')
+
+  return `https://plausible.io/js/script.${extensions}.js`
+}
diff --git a/frontend/packages/data-portal/app/root.tsx b/frontend/packages/data-portal/app/root.tsx
@@ -23,7 +23,7 @@ import {
   ENVIRONMENT_CONTEXT_DEFAULT_VALUE,
   EnvironmentContext,
 } from './context/Environment.context'
-import { PLAUSIBLE_ENV_URL_MAP, PLAUSIBLE_URL } from './hooks/usePlausible'
+import { getPlausibleUrl, PLAUSIBLE_ENV_URL_MAP } from './hooks/usePlausible'
 import { i18next } from './i18next.server'
 import { useCloseDrawerOnUnmount } from './state/drawer'
 import tailwindStyles from './tailwind.css'
@@ -122,7 +122,9 @@ const Document = withEmotionCache(
             data-domain={PLAUSIBLE_ENV_URL_MAP[ENV.ENV]}
             // TODO Fix proxying
             // src="/plausible.js"
-            src={PLAUSIBLE_URL}
+            src={getPlausibleUrl({
+              hasLocalhostTracking: ENV.LOCALHOST_PLAUSIBLE_TRACKING === 'true',
+            })}
           />
 
           <meta

diff --git a/frontend/packages/data-portal/app/routes/plausible[.js].ts b/frontend/packages/data-portal/app/routes/plausible[.js].ts
@@ -1,9 +1,13 @@
 import { pick } from 'lodash-es'
 
-import { PLAUSIBLE_URL } from 'app/hooks/usePlausible'
+import { getPlausibleUrl } from 'app/hooks/usePlausible'
 
 export async function loader() {
-  const response = await fetch(PLAUSIBLE_URL)
+  const plausibleUrl = getPlausibleUrl({
+    hasLocalhostTracking: process.env.LOCALHOST_PLAUSIBLE_TRACKING === 'true',
+  })
+
+  const response = await fetch(plausibleUrl)
   const script = await response.text()
   const { status, headers } = response
 

diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx
@@ -116,6 +116,7 @@ const GET_RUN_BY_ID_QUERY = gql(`
           affine_transformation_matrix
           ctf_corrected
           fiducial_alignment_status
+          id
           key_photo_url
           name
           neuroglancer_config
@@ -313,6 +314,8 @@ export default function RunByIdPage() {
   const fileSize =
     activeTomogram && fileSizeMap[activeTomogram.https_mrc_scale0]
 
+  const tomogram = run.tomogram_voxel_spacings.at(0)
+
   return (
     <TablePageLayout
       type={i18n.annotations}
@@ -327,12 +330,10 @@ export default function RunByIdPage() {
           runId={run.id}
           runName={run.name}
           s3DatasetPrefix={run.dataset.s3_prefix}
-          s3TomogramVoxelPrefix={
-            run.tomogram_voxel_spacings.at(0)?.s3_prefix ?? undefined
-          }
+          s3TomogramVoxelPrefix={tomogram?.s3_prefix ?? undefined}
           s3TomogramPrefix={activeTomogram?.s3_mrc_scale0 ?? undefined}
           tomogramId={activeTomogram?.id ?? undefined}
-          tomogramVoxelId={run.tomogram_voxel_spacings.at(0)?.id ?? undefined}
+          tomogramVoxelId={tomogram?.id ?? undefined}
           type="runs"
         />
       }