Add option to downloads links to log clicks to GA

broadinstitute · Mar 28, 2024 · 8955084 · 8955084
1 parent 7ad1402
commit 8955084
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/browser/src/DownloadsPage/GnomadV2Downloads.tsx b/browser/src/DownloadsPage/GnomadV2Downloads.tsx
@@ -108,6 +108,7 @@ const LDFiles = () => {
             // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
             label={`LD matrix Hail BlockMatrix for ${GNOMAD_POPULATION_NAMES[selectedPopulation]} population`}
             path={`/release/2.1.1/ld/gnomad.genomes.r2.1.1.${urlPopId}.common.adj.ld.bm`}
+            logClicks
           />
         </ListItem>
         {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
@@ -116,6 +117,7 @@ const LDFiles = () => {
             // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
             label={`Variant indices Hail Table for ${GNOMAD_POPULATION_NAMES[selectedPopulation]} population`}
             path={`/release/2.1.1/ld/gnomad.genomes.r2.1.1.${urlPopId}.common.adj.ld.variant_indices.ht`}
+            logClicks
           />
         </ListItem>
         {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
@@ -124,6 +126,7 @@ const LDFiles = () => {
             // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
             label={`LD scores Hail Table for ${GNOMAD_POPULATION_NAMES[selectedPopulation]} population`}
             path={`/release/2.1.1/ld/scores/gnomad.genomes.r2.1.1.${urlPopId}.adj.ld_scores.ht`}
+            logClicks
           />
         </ListItem>
         {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
@@ -132,6 +135,7 @@ const LDFiles = () => {
             // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
             label={`LDSC .ldscore.bgz file for ${GNOMAD_POPULATION_NAMES[selectedPopulation]} population`}
             path={`/release/2.1.1/ld/scores/gnomad.genomes.r2.1.1.${urlPopId}.adj.ld_scores.ldscore.bgz`}
+            logClicks
           />
         </ListItem>
         {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
@@ -140,6 +144,7 @@ const LDFiles = () => {
             // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
             label={`LDSC .M file for ${GNOMAD_POPULATION_NAMES[selectedPopulation]} population`}
             path={`/release/2.1.1/ld/scores/gnomad.genomes.r2.1.1.${urlPopId}.adj.ld_scores.M`}
+            logClicks
           />
         </ListItem>
         {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
@@ -148,6 +153,7 @@ const LDFiles = () => {
             // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
             label={`LDSC .M_5_50 file for ${GNOMAD_POPULATION_NAMES[selectedPopulation]} population`}
             path={`/release/2.1.1/ld/scores/gnomad.genomes.r2.1.1.${urlPopId}.adj.ld_scores.M_5_50`}
+            logClicks
           />
         </ListItem>
       </FileList>
@@ -554,10 +560,7 @@ const GnomadV2Downloads = () => {
           </ListItem>
           {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
           <ListItem>
-            <DownloadLinks
-              label="Coding MNVs TSV"
-              path="/release/2.1/mnv/gnomad_mnv_coding.tsv"
-            />
+            <DownloadLinks label="Coding MNVs TSV" path="/release/2.1/mnv/gnomad_mnv_coding.tsv" />
           </ListItem>
           {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
           <ListItem>

diff --git a/browser/src/DownloadsPage/downloadsPageStyles.tsx b/browser/src/DownloadsPage/downloadsPageStyles.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { Button, ExternalLink, List, Modal, PrimaryButton, TextButton } from '@gnomad/ui'
 
 import { withAnchor } from '../AnchorLink'
+import { logButtonClick } from '../analytics'
 
 export const FileList = styled(List)`
   li {
@@ -52,15 +53,19 @@ export const DownloadsSection = styled.section`
 type ShowURLButtonProps = {
   label: string
   url: string
+  logClicks: boolean
 }
 
-const ShowURLButton = ({ label, url, ...otherProps }: ShowURLButtonProps) => {
+const ShowURLButton = ({ label, url, logClicks, ...otherProps }: ShowURLButtonProps) => {
   const [isExpanded, setIsExpanded] = useState(false)
   return (
     <>
       <TextButton
         {...otherProps}
         onClick={() => {
+          if (logClicks) {
+            logButtonClick(`User showed or copied URL for ${label}`)
+          }
           setIsExpanded(true)
         }}
       />
@@ -117,6 +122,7 @@ type OwnGetUrlButtonsProps = {
   includeGCP?: boolean
   includeAWS?: boolean
   includeAzure?: boolean
+  logClicks?: boolean
 }
 
 // @ts-expect-error TS(2456) FIXME: Type alias 'GetUrlButtonsProps' circularly referen... Remove this comment to see the full error message
@@ -132,6 +138,7 @@ export const GetUrlButtons = ({
   includeGCP,
   includeAWS,
   includeAzure,
+  logClicks = false,
 }: GetUrlButtonsProps) => {
   return (
     <>
@@ -154,6 +161,7 @@ export const GetUrlButtons = ({
             aria-label={`Show Google URL for ${label}`}
             label={label}
             url={`gs://${gcsBucket}${path}`}
+            logClicks={logClicks}
           >
             Google
           </ShowURLButton>
@@ -165,6 +173,7 @@ export const GetUrlButtons = ({
             aria-label={`Show Amazon URL for ${label}`}
             label={label}
             url={`s3://gnomad-public-us-east-1${path}`}
+            logClicks={logClicks}
           >
             Amazon
           </ShowURLButton>
@@ -176,6 +185,7 @@ export const GetUrlButtons = ({
             aria-label={`Show Microsoft URL for ${label}`}
             label={label}
             url={`https://datasetgnomad.blob.core.windows.net/dataset${path}`}
+            logClicks={logClicks}
           >
             Microsoft
           </ShowURLButton>
@@ -191,6 +201,9 @@ export const GetUrlButtons = ({
                 key="gcp"
                 aria-label={`Copy Google URL for ${label}`}
                 onClick={() => {
+                  if (logClicks) {
+                    logButtonClick(`User showed or copied URL for ${label}`)
+                  }
                   navigator.clipboard.writeText(`gs://${gcsBucket}${path}`)
                 }}
               >
@@ -202,6 +215,9 @@ export const GetUrlButtons = ({
                 key="aws"
                 aria-label={`Copy Amazon URL for ${label}`}
                 onClick={() => {
+                  if (logClicks) {
+                    logButtonClick(`User showed or copied URL for ${label}`)
+                  }
                   navigator.clipboard.writeText(`s3://gnomad-public-us-east-1${path}`)
                 }}
               >
@@ -213,6 +229,9 @@ export const GetUrlButtons = ({
                 key="azure"
                 aria-label={`Copy Microsoft URL for ${label}`}
                 onClick={() => {
+                  if (logClicks) {
+                    logButtonClick(`User showed or copied URL for ${label}`)
+                  }
                   navigator.clipboard.writeText(
                     `https://datasetgnomad.blob.core.windows.net/dataset${path}`
                   )