315 - Add GA custom event for Dataset to DOM elements

src/components/Dataset/DatasetExplore.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Box, Heading } from 'grommet'
+import gtag from 'analytics/gtag'
 import { usePageRendered } from 'hooks/usePageRendered'
 import { useResponsive } from 'hooks/useResponsive'
 import { Anchor } from 'components/shared/Anchor'
@@ -8,11 +9,17 @@ import { List } from 'components/shared/List'
 import { Row } from 'components/shared/Row'
 import { links } from 'config'
 
-const ListItem = ({ text, href }) => (
-  <Box as="li" margin={{ bottom: 'small' }}>
-    <Anchor href={href} label={text} />
-  </Box>
-)
+const ListItem = ({ text, href }) => {
+  return (
+    <Box as="li" margin={{ bottom: 'small' }}>
+      <Anchor
+        href={href}
+        label={text}
+        onClick={() => gtag.trackExploredUsageClick(href)}
+      />
+    </Box>
+  )
+}
 
 export const DatasetExplore = ({ dataset }) => {
   const pageRendered = usePageRendered()

src/components/Dataset/DatasetReady.js

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Box, Heading, Text } from 'grommet'
+import gtag from 'analytics/gtag'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { useResponsive } from 'hooks/useResponsive'
 import { useToken } from 'hooks/useToken'
@@ -21,6 +22,7 @@ export const DatasetReady = ({ dataset }) => {
 
   const handleDownloadNow = async () => {
     await downloadDataset(dataset.id, dataset.download_url)
+    gtag.trackDatasetDownload(dataset)
   }
 
   return (

src/components/Dataset/DatasetRegenerate.js

@@ -1,14 +1,15 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { Box, Heading, Paragraph } from 'grommet'
+import gtag from 'analytics/gtag'
+import { cache, links } from 'config'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { useResponsive } from 'hooks/useResponsive'
 import { Anchor } from 'components/shared/Anchor'
 import { Button } from 'components/shared/Button'
 import { Column } from 'components/shared/Column'
 import { InlineMessage } from 'components/shared/InlineMessage'
 import { Row } from 'components/shared/Row'
-import { cache, links } from 'config'
 
 export const DatasetRegenerate = () => {
   const {
@@ -29,6 +30,7 @@ export const DatasetRegenerate = () => {
     const response = await updateDataset(await createDataset(), params)
     const pathname = `/dataset/${response.id}`
 
+    gtag.trackRegeneratedDataset(selectedDataset)
     push(
       {
         pathname,

src/components/Dataset/MoveToDatasetModal.js

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router'
 import { Box, Heading } from 'grommet'
+import gtag from 'analytics/gtag'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { useResponsive } from 'hooks/useResponsive'
 import formatNumbers from 'helpers/formatNumbers'
@@ -57,6 +58,7 @@ export const MoveToDatasetModal = ({
         pathname
       )
     }
+    gtag.trackDatasetAction(MoveToDatasetModal)
     closeModal(id)
   }
 

src/components/Dataset/ShareDatasetButton.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Box, Heading } from 'grommet'
+import gtag from 'analytics/gtag'
 import { useModal } from 'hooks/useModal'
 import { useResponsive } from 'hooks/useResponsive'
 import { useTimeoutInCallback } from 'hooks/useTimeoutInCallback'
@@ -10,20 +11,26 @@ import { InlineMessage } from 'components/shared/InlineMessage'
 import { Modal } from 'components/shared/Modal'
 import { TextInput } from 'components/shared/TextInput'
 
-export const ShareDatasetButton = ({ datasetId }) => {
+export const ShareDatasetButton = ({ dataset }) => {
   const { openModal } = useModal()
   const { setResponsive } = useResponsive()
   const { startTimer, clearTimer } = useTimeoutInCallback(() => {
     setIsCopied(false)
   }, 3000)
   const [isCopied, setIsCopied] = useState(false)
-  const [value, handdleCopy] = useCopyToClipboard(null)
+  const [value, copyText] = useCopyToClipboard(null)
+  const { id: datasetId } = dataset
   const id = `shareable-link_${datasetId}`
   const shareableLink = `${getDomain()}/dataset/${datasetId}?ref=share`
 
-  const handleClick = (link) => {
-    handdleCopy(link)
+  const onShareClick = () => {
+    openModal(id)
+  }
+
+  const onCopyClick = () => {
+    copyText(shareableLink)
     setIsCopied(true)
+    gtag.trackSharedDataset(dataset)
   }
 
   useEffect(() => {
@@ -39,7 +46,7 @@ export const ShareDatasetButton = ({ datasetId }) => {
           label="Share Dataset"
           secondary
           responsive
-          onClick={() => openModal(id)}
+          onClick={onShareClick}
         />
       }
       fullHeight={false}
@@ -71,12 +78,7 @@ export const ShareDatasetButton = ({ datasetId }) => {
             <TextInput value={shareableLink} />
           </Box>
           <Box>
-            <Button
-              label="Copy"
-              primary
-              responsive
-              onClick={() => handleClick(shareableLink)}
-            />
+            <Button label="Copy" primary responsive onClick={onCopyClick} />
           </Box>
         </Box>
       </Box>

src/components/Download/DatasetDetails/RemoveAllButton.js

@@ -1,4 +1,5 @@
 import { Box, Heading } from 'grommet'
+import gtag from 'analytics/gtag'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { useModal } from 'hooks/useModal'
 import { useResponsive } from 'hooks/useResponsive'
@@ -15,6 +16,7 @@ export const RemoveAllButton = () => {
   const handleRemoveAll = () => {
     clearDataset()
     closeModal(id)
+    gtag.trackDatasetAction(RemoveAllButton)
   }
 
   return (

src/components/Download/FilesSummary.js

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Box, Heading, Text } from 'grommet'
+import gtag from 'analytics/gtag'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { useResponsive } from 'hooks/useResponsive'
 import { links, options } from 'config'
@@ -37,7 +38,7 @@ const Card = ({ description, format, index, title }) => {
   )
 }
 
-export const FilesSummary = ({ dataset, isProcessed }) => {
+export const FilesSummary = ({ dataset, defaultDataset = {}, isProcessed }) => {
   const { createDataset, updateDataset, regeneratedDataset } =
     useDatasetManager()
   const { setResponsive } = useResponsive()
@@ -105,17 +106,24 @@ export const FilesSummary = ({ dataset, isProcessed }) => {
     (acc, cur) => ({ ...acc, [cur.value]: cur.label }),
     {}
   )
+
   const [openForm, setOpenForm] = useState(false)
 
   const handleRegenerateDataset = async (downloadOptions) => {
     const params = { data: dataset.data, ...downloadOptions }
-
     const response = await updateDataset(
       regeneratedDataset?.id || (await createDataset()),
       params
     )
     const pathname = `/dataset/${response.id}`
 
+    gtag.trackRegeneratedDataset(
+      defaultDataset,
+      JSON.stringify(defaultDataset) !== JSON.stringify(dataset)
+        ? dataset
+        : null
+    )
+
     return pathname
   }
 

src/components/Download/StartProcessingForm/index.js

@@ -1,10 +1,11 @@
 import { useRouter } from 'next/navigation'
 import { Formik } from 'formik'
 import { Form } from 'grommet'
+import gtag from 'analytics/gtag'
+import { validationSchemas } from 'config'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { useResponsive } from 'hooks/useResponsive'
 import subscribeEmail from 'helpers/subscribeEmail'
-import { validationSchemas } from 'config'
 import { Button } from 'components/shared/Button'
 import { Column } from 'components/shared/Column'
 import { Row } from 'components/shared/Row'
@@ -46,6 +47,7 @@ export const StartProcessingForm = ({ dataset }) => {
 
         const pathname = `/dataset/${response.id}`
         push({ pathname }, pathname)
+        gtag.trackDatasetDownloadOptions(dataset)
         setSubmitting(false)
       }}
     >

src/components/shared/DatasetActionButton/AddRemainingDatasetButton.js

@@ -1,3 +1,4 @@
+import gtag from 'analytics/gtag'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import formatNumbers from 'helpers/formatNumbers'
 import { Button } from 'components/shared/Button'
@@ -6,14 +7,19 @@ import { InlineMessage } from 'components/shared/InlineMessage'
 export const AddRemainingDatasetButton = ({ dataToAdd, samplesInDataset }) => {
   const { loading, addSamples } = useDatasetManager()
 
+  const handleClick = () => {
+    addSamples(dataToAdd)
+    gtag.trackDatasetAction(AddRemainingDatasetButton)
+  }
+
   return (
     <>
       <Button
         isLoading={loading}
         label="Add Remaining"
         secondary
         responsive
-        onClick={() => addSamples(dataToAdd)}
+        onClick={handleClick}
       />
       <InlineMessage
         label={

src/components/shared/DatasetActionButton/AddToDatasetButton.js

@@ -1,21 +1,23 @@
+import gtag from 'analytics/gtag'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { Button } from 'components/shared/Button'
 
-export const AddToDatasetButton = ({
-  dataToAdd,
-  label = 'Add To Dataset',
-  ...props
-}) => {
+export const AddToDatasetButton = ({ dataToAdd, ...props }) => {
   const { loading, addSamples } = useDatasetManager()
 
+  const handleClick = () => {
+    addSamples(dataToAdd)
+    gtag.trackDatasetAction(AddToDatasetButton)
+  }
+
   return (
     <Button
-      label={label}
+      label="Add To Dataset"
       isLoading={loading}
       responsive
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
-      onClick={() => addSamples(dataToAdd)}
+      onClick={handleClick}
     />
   )
 }

src/components/shared/DatasetActionButton/RemoveDatasetButton.js

@@ -1,4 +1,5 @@
 import { Box } from 'grommet'
+import gtag from 'analytics/gtag'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { useResponsive } from 'hooks/useResponsive'
 import { Button } from 'components/shared/Button'
@@ -8,6 +9,11 @@ export const RemoveDatasetButton = ({ dataToRemove }) => {
   const { loading, removeSamples } = useDatasetManager()
   const { setResponsive } = useResponsive()
 
+  const handleClick = () => {
+    removeSamples(dataToRemove)
+    gtag.trackDatasetAction(RemoveDatasetButton)
+  }
+
   return (
     <Box align="center" direction="row" wrap>
       <InlineMessage
@@ -23,7 +29,7 @@ export const RemoveDatasetButton = ({ dataToRemove }) => {
         linkFontSize={setResponsive('medium', 'small')}
         margin={{ left: 'xsmall' }}
         width="50px"
-        onClick={() => removeSamples(dataToRemove)}
+        onClick={handleClick}
       />
     </Box>
   )

src/components/shared/SearchCard/SearchCard.js

@@ -55,12 +55,7 @@ export const SearchCard = ({ result = {} }) => {
         </Box>
         <Box gridArea="ctas" margin={{ top: setResponsive('none', 'large') }}>
           <Box align={setResponsive('start', 'end')} width="100%">
-            <SearchCardAction
-              accessionCode={accessionCode}
-              downloadableSamples={downloadableSamples}
-              organismNames={organismNames}
-              technology={technology}
-            />
+            <SearchCardAction experiment={result} technology={technology} />
           </Box>
         </Box>
         <Box gridArea="meta">

src/components/shared/SearchCard/SearchCardAction/DownloadNowButton.js

@@ -4,10 +4,11 @@ import { Modal } from 'components/shared/Modal'
 import { DownloadNowModal } from './DownloadNowModal'
 
 export const DownloadNowButton = ({
-  accessionCode,
+  experiment,
   hasMultipleOrganisms,
   hasRnaSeq
 }) => {
+  const { accession_code: accessionCode } = experiment
   const { openModal } = useModal()
   const id = `download-now-${accessionCode}`
 
@@ -26,7 +27,7 @@ export const DownloadNowButton = ({
       width="600px"
     >
       <DownloadNowModal
-        accessionCode={accessionCode}
+        experiment={experiment}
         hasMultipleOrganisms={hasMultipleOrganisms}
         hasRnaSeq={hasRnaSeq}
         id={id}

src/components/shared/SearchCard/SearchCardAction/DownloadNowModal.js

@@ -1,5 +1,6 @@
 import { Formik } from 'formik'
 import { Box, Form, Heading, Paragraph } from 'grommet'
+import gtag from 'analytics/gtag'
 import { options, validationSchemas } from 'config'
 import { useDatasetManager } from 'hooks/useDatasetManager'
 import { useResponsive } from 'hooks/useResponsive'
@@ -13,13 +14,14 @@ import { ReceiveUpdatesCheckBox } from 'components/Download/StartProcessingForm/
 import { TermsOfUseCheckBox } from 'components/Download/StartProcessingForm/TermsOfUseCheckBox'
 
 export const DownloadNowModal = ({
-  accessionCode,
+  experiment,
   hasMultipleOrganisms,
   hasRnaSeq
 }) => {
   const { email, startProcessingDataset } = useDatasetManager()
   const { setResponsive } = useResponsive()
   const { StartProcessingFormSchema } = validationSchemas
+  const { accession_code: accessionCode } = experiment
 
   return (
     <Box pad={{ bottom: 'small', horizontal: 'large' }}>
@@ -53,6 +55,7 @@ export const DownloadNowModal = ({
           }
 
           await startProcessingDataset(values, null, accessionCode)
+          gtag.trackOneOffExperimentDownload(experiment)
           setSubmitting(false)
         }}
       >