From 28ff6ce01e52f4c7bf3822b6b41e65e6815066e9 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Wed, 27 Oct 2021 12:02:43 -0700
Subject: [PATCH] Set up google analytics tracking of card expand, support
 expand and publication opening

---
 src/components/AssocTable.vue     | 14 +++++++++++++-
 src/components/EvidenceViewer.vue | 14 ++++++++++++--
 src/components/NodeSidebar.vue    | 18 ++++++++++++++++--
 src/views/Node.vue                |  3 +--
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/components/AssocTable.vue b/src/components/AssocTable.vue
index e295953..0717553 100644
--- a/src/components/AssocTable.vue
+++ b/src/components/AssocTable.vue
@@ -212,7 +212,7 @@
           <template v-slot:cell(support)="data">
             <b-button
               :pressed="data.item._showDetails"
-              @click="data.item._showDetails = !data.item._showDetails"
+              @click="data.item._showDetails = !data.item._showDetails; trackShowDetails(data.item); "
               size="small"
               class="btn btn-xs px-1 py-0 m-0"
               variant="outline-info"
@@ -825,6 +825,18 @@ export default {
         (nodeType === "phenotype" && cardType === "disease")
       );
     },
+    trackShowDetails(item) {
+      if (item._showDetails) {
+        this.$gtag.event(
+          this.nodeType + " node, " + this.cardType + " card, expand support ",
+          {
+            event_category: "node page association table expand support",
+            event_label: item.assocObject,
+            value: item.supportLength,
+          }
+        );
+      }
+    },
   },
 };
 </script>
diff --git a/src/components/EvidenceViewer.vue b/src/components/EvidenceViewer.vue
index 89074b6..20cec04 100644
--- a/src/components/EvidenceViewer.vue
+++ b/src/components/EvidenceViewer.vue
@@ -172,13 +172,14 @@
               class="row"
             >
               <span v-if="pub.id.startsWith('PMID')" class="nowrap">
-                <a :href="pub.url" target="_blank" rel="noopener noreferrer">
+                <a :href="pub.url" target="_blank" rel="noopener noreferrer"
+                  @click="trackOpenPub(pub.id)">
                   {{ pub.label }}
                   <i class="fa fa-external-link" aria-hidden="true" />
                 </a>
               </span>
               <span v-else class="nowrap">
-                <router-link :to="pub.url">{{ pub.label }}</router-link>
+                <router-link :to="pub.url" @click="trackOpenPub(pub.id)">{{ pub.label }}</router-link>
               </span>
             </div>
           </template>
@@ -530,6 +531,15 @@ export default {
 
       return evidenceTable;
     },
+    trackOpenPub(label) {
+      this.$gtag.event(
+        this.nodeType + " node, " + this.cardType + " card, open publication",
+        {
+          event_category: "node association table evidence open publication",
+          event_label: label,
+        }
+      );
+    },
   },
 };
 </script>
diff --git a/src/components/NodeSidebar.vue b/src/components/NodeSidebar.vue
index 8bec5ff..ed224ea 100644
--- a/src/components/NodeSidebar.vue
+++ b/src/components/NodeSidebar.vue
@@ -83,8 +83,11 @@ export default {
     },
     nodeType: {
       type: String,
-      required: false,
-      default: "",
+      required: true,
+    },
+    nodeId: {
+      type: String,
+      required: true,
     },
     nodeLabel: {
       type: String,
@@ -137,8 +140,19 @@ export default {
 
   methods: {
     expandCard(cardType) {
+      this.trackExpandCard(cardType);
       this.$emit("expand-card", cardType);
     },
+    trackExpandCard(cardType) {
+      this.$gtag.event(
+        this.nodeType + " node, " + cardType + " card, expand card",
+        {
+          event_category: "node page card expand",
+          event_label: this.nodeId,
+          value: this.cardCounts[cardType],
+        }
+      );
+    },
     toggleNeighborhood() {
       this.$emit("toggle-neighborhood");
     },
diff --git a/src/views/Node.vue b/src/views/Node.vue
index ce1a032..41a13d8 100644
--- a/src/views/Node.vue
+++ b/src/views/Node.vue
@@ -10,8 +10,7 @@
       :available-cards="availableCards"
       :cards-to-display="nonEmptyCards"
       :card-counts="counts"
-      :parent-node="node"
-      :parent-node-id="nodeId"
+      :node-id="nodeId"
       :is-neighborhood-showing="isNeighborhoodShowing"
       :subclasses="subclasses"
       :superclasses="superclasses"