From 8955084f993596ce79ce1ec500a1804486804bce Mon Sep 17 00:00:00 2001 From: Riley Grant Date: Thu, 28 Mar 2024 16:19:46 -0500 Subject: [PATCH] Add option to downloads links to log clicks to GA --- .../src/DownloadsPage/GnomadV2Downloads.tsx | 11 ++++++---- .../src/DownloadsPage/downloadsPageStyles.tsx | 21 ++++++++++++++++++- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/browser/src/DownloadsPage/GnomadV2Downloads.tsx b/browser/src/DownloadsPage/GnomadV2Downloads.tsx index 7d5c1ea92..26a53c325 100644 --- 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 /> {/* @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 /> {/* @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 /> {/* @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 /> {/* @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 /> {/* @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 /> @@ -554,10 +560,7 @@ const GnomadV2Downloads = () => { {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */} - + {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */} diff --git a/browser/src/DownloadsPage/downloadsPageStyles.tsx b/browser/src/DownloadsPage/downloadsPageStyles.tsx index 501123f3d..d84e621f5 100644 --- 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 ( <> { + 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 @@ -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 @@ -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 @@ -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}` )