From 7ad1402e9ae4f8cc022c5c09e77e46b4a924179b Mon Sep 17 00:00:00 2001
From: Riley Grant <grantrileyh@gmail.com>
Date: Thu, 28 Mar 2024 16:00:45 -0500
Subject: [PATCH] Track additional click event in google analytics

Track every toggle to the Variant Co-occurrence table on the Gene page, every time a genetic ancestry group is toggled on the Variant page frequency table, and every time a user clicks 'more info' for the multi nucleotide variant summary text
---
 browser/src/GenePage/GenePage.tsx            | 18 +++++++++++++++---
 browser/src/MNVPage/MNVSummaryList.tsx       |  6 ++++++
 browser/src/VariantPage/PopulationsTable.tsx |  6 +++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/browser/src/GenePage/GenePage.tsx b/browser/src/GenePage/GenePage.tsx
index 7e6e2dda0..c92bc1b1a 100644
--- a/browser/src/GenePage/GenePage.tsx
+++ b/browser/src/GenePage/GenePage.tsx
@@ -62,8 +62,15 @@ import {
   CopyNumberVariant,
 } from '../VariantPage/VariantPage'
 import CopyNumberVariantsInGene from './CopyNumberVariantsInGene'
-import { ControlPanel, Legend, LegendItemWrapper, Label, CheckboxInput, LegendSwatch } from '../ChartStyles'
-
+import {
+  ControlPanel,
+  Legend,
+  LegendItemWrapper,
+  Label,
+  CheckboxInput,
+  LegendSwatch,
+} from '../ChartStyles'
+import { logButtonClick } from '../analytics'
 
 export type Strand = '+' | '-'
 
@@ -183,7 +190,12 @@ const BaseTableSelector = styled.div<TableSelectorProps>
 
 const TableSelector = BaseTableSelector.attrs(
   ({ setSelectedTableName, ownTableName }: TableSelectorProps) => ({
-    onClick: () => setSelectedTableName(ownTableName),
+    onClick: () => {
+      if (ownTableName === 'cooccurrence') {
+        logButtonClick('User selected variant co-occurrence table on Gene page')
+      }
+      setSelectedTableName(ownTableName)
+    },
   })
 )`
   border: 1px solid black;
diff --git a/browser/src/MNVPage/MNVSummaryList.tsx b/browser/src/MNVPage/MNVSummaryList.tsx
index 601799788..c6034ddca 100644
--- a/browser/src/MNVPage/MNVSummaryList.tsx
+++ b/browser/src/MNVPage/MNVSummaryList.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { Badge, List, ListItem } from '@gnomad/ui'
 
 import Link from '../Link'
+import { logButtonClick } from '../analytics'
 
 type Props = {
   multiNucleotideVariants: {
@@ -37,6 +38,11 @@ const MNVSummaryList = ({ multiNucleotideVariants }: Props) => (
         in {mnv.n_individuals} individual{mnv.individuals !== 1 && 's'}
         {mnv.changes_amino_acids && ', altering the amino acid sequence'}.{' '}
         <Link
+          // onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
+          onClick={() => {
+            logButtonClick('User clicked "more info" in the MNV summary text')
+            // event.preventDefault()
+          }}
           to={`/variant/${mnv.combined_variant_id}?dataset=gnomad_r2_1`}
           preserveSelectedDataset={false}
         >
diff --git a/browser/src/VariantPage/PopulationsTable.tsx b/browser/src/VariantPage/PopulationsTable.tsx
index cd5435204..bb29883fc 100644
--- a/browser/src/VariantPage/PopulationsTable.tsx
+++ b/browser/src/VariantPage/PopulationsTable.tsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 
 import { BaseTable, TextButton, TooltipAnchor, TooltipHint } from '@gnomad/ui'
+import { logButtonClick } from '../analytics'
 
 const Table = styled(BaseTable)`
   min-width: 100%;
@@ -160,7 +161,10 @@ export class PopulationsTable extends Component<PopulationsTableProps, Populatio
           <TogglePopulationButton
             // @ts-expect-error TS(2769) FIXME: No overload matches this call.
             isExpanded={isExpanded}
-            onClick={() => this.togglePopulationExpanded(pop.name)}
+            onClick={() => {
+              logButtonClick(`User toggled ${pop.name} in variant page frequency table`)
+              this.togglePopulationExpanded(pop.name)
+            }}
           >
             {pop.name}
           </TogglePopulationButton>