Map Metrics Updates

src/components/AnnotationTool.vue

@@ -13,6 +13,7 @@
       :annotationEntry="annotationEntry"
       @annotation="$emit('annotation', $event)"
       @hover-changed="$emit('hover-changed', $event)"
+      @trackEvent="$emit('trackEvent', $event)"
     />
     <div v-if="createData && createData.toBeDeleted" class="delete-container">
       <el-row>

src/components/ConnectivityCard.vue

@@ -26,6 +26,8 @@
 </template>
 
 <script>
+import EventBus from './EventBus';
+
 export default {
   name: "ConnectivityCard",
   data() {
@@ -71,6 +73,12 @@ export default {
     cardClicked: function (data) {
       if (!this.loading) {
         this.$emit("open-connectivity", data);
+
+        EventBus.emit('trackEvent', {
+          'event_name': `portal_maps_connectivity_open`,
+          'category': data.id || '',
+          'location': 'map_sidebar_connectivity',
+        });
       }
     },
   },

src/components/ConnectivityExplorer.vue

@@ -371,6 +371,12 @@ export default {
         tabType: 'dataset',
         type: 'reset-update',
       })
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_action_filter`,
+        'category': `reset`,
+        'location': 'map_sidebar_connectivity',
+      });
     },
     openSearch: function (filter, search = "") {
       this.searchInput = search;
@@ -509,15 +515,31 @@ export default {
     },
     numberPerPageUpdate: function (val) {
       this.numberPerPage = val;
-      this.pageChange(1);
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_connectivity_perPage`,
+        'category': val,
+        'location': 'map_sidebar_connectivity',
+      });
+
+      const preventPaginationTracking = this.page === 1;
+      this.pageChange(1, preventPaginationTracking);
     },
-    pageChange: function (page) {
+    pageChange: function (page, preventPaginationTracking = false) {
       this.start = (page - 1) * this.numberPerPage;
       this.page = page;
       this.expanded = "";
       this.expandedData = null;
       this.scrollToTop();
       // this.searchKnowledge(this.filter, this.searchInput);
+
+      if (!preventPaginationTracking) {
+        EventBus.emit('trackEvent', {
+          'event_name': `portal_maps_connectivity_pagination`,
+          'category': `page_${this.page}`,
+          'location': 'map_sidebar_connectivity',
+        });
+      }
     },
     scrollToTop: function () {
       if (this.$refs.content) {

src/components/ConnectivityInfo.vue

@@ -49,7 +49,7 @@
             Show connectivity on map
           </span>
         </el-popover>
-        <CopyToClipboard :content="updatedCopyContent" />
+        <CopyToClipboard @copied="onCopied" :content="updatedCopyContent" />
         <template v-if="withCloseButton">
           <el-popover
             width="auto"
@@ -188,6 +188,7 @@
         :resources="resources"
         @references-loaded="onReferencesLoaded"
         @show-reference-connectivities="onShowReferenceConnectivities"
+        @trackEvent="onTrackEvent"
       />
     </div>
   </div>
@@ -363,6 +364,19 @@ export default {
       const featureIds = this.entry.featureId || [];
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_show_connectivity_on_map`,
+        'category': this.entry.id || '',
+        'location': 'map_sidebar_connectivity',
+      });
+    },
+    onCopied: function () {
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_connectivity_copy`,
+        'category': this.entry.id || '',
+        'location': 'map_sidebar_connectivity',
+      });
     },
     switchConnectivityView: function (val) {
       this.activeView = val;
@@ -374,6 +388,12 @@ export default {
           this.graphViewLoaded = true;
         });
       }
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_connectivity_switch_view`,
+        'category': val,
+        'location': 'map_sidebar_connectivity',
+      });
     },
     onTapNode: function (data) {
       // save selected state for list view
@@ -456,7 +476,7 @@ export default {
         const transformedNerves = transformData(title, nerveLabels);
         contentArray.push(transformedNerves);
       }
-      
+
       // Origins
       if (this.origins?.length) {
         const title = 'Origin';
@@ -562,6 +582,12 @@ export default {
         entry: this.entry,
         connectivitySource: connectivitySource,
       });
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_connectivity_source_change`,
+        'category': connectivitySource,
+        'location': 'map_sidebar_connectivity',
+      });
     },
     updateGraphConnectivity: function () {
       if (this.connectivitySource === "map") {
@@ -605,6 +631,15 @@ export default {
     },
     closeConnectivity: function () {
       this.$emit('close-connectivity');
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_connectivity_close`,
+        'category': this.entry.id || '',
+        'location': 'map_sidebar_connectivity',
+      });
+    },
+    onTrackEvent: function (data) {
+      EventBus.emit('trackEvent', data);
     },
   },
   mounted: function () {

src/components/DatasetExplorer.vue

@@ -266,6 +266,12 @@ export default {
         tabType: 'dataset',
         type: 'reset-update',
       })
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_action_filter`,
+        'category': `reset`,
+        'location': 'map_sidebar_dataset',
+      });
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
@@ -330,9 +336,17 @@ export default {
     },
     numberPerPageUpdate: function (val) {
       this.numberPerPage = val
-      this.pageChange(1)
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_dataset_perPage`,
+        'category': val + '',
+        'location': 'map_sidebar_dataset',
+      });
+
+      const preventPaginationTracking = this.page === 1;
+      this.pageChange(1, preventPaginationTracking)
     },
-    pageChange: function (page) {
+    pageChange: function (page, preventPaginationTracking = false) {
       this.start = (page - 1) * this.numberPerPage
       this.page = page
       this.searchAlgolia(
@@ -341,6 +355,14 @@ export default {
         this.numberPerPage,
         this.page
       )
+
+      if (!preventPaginationTracking) {
+        EventBus.emit('trackEvent', {
+          'event_name': `portal_maps_dataset_pagination`,
+          'category': `page_${this.page}`,
+          'location': 'map_sidebar_dataset',
+        });
+      }
     },
     handleMissingData: function (doi) {
       let i = this.results.findIndex((res) => res.doi === doi)

src/components/SearchHistory.vue

@@ -344,8 +344,22 @@ export default {
       // Save updated data
       localStorage.setItem(this.localStorageKey, JSON.stringify(this.searchHistory))
     },
+    getParentComponentName: function () {
+      const isConnectivity = this.localStorageKey?.indexOf('connectivity') !== -1;
+      const isDataset = this.localStorageKey?.indexOf('dataset') !== -1;
+      const location = isConnectivity ? 'connectivity' : isDataset ? 'dataset' : '';
+      return location;
+    },
     search: function (item) {
       this.$emit('search', item)
+
+      // Event tracking
+      const location = this.getParentComponentName();
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_search_history_click`,
+        'category': item.longLabel || item.label,
+        'location': `map_sidebar_${location}`,
+      });
     },
     searchHistoryItemLabel: function (search, filters) {
       let label = search ? `"${search.trim()}"` : '';
@@ -389,12 +403,27 @@ export default {
       });
       this.savedSearchHistory = this.searchHistory.filter((item) => item.saved);
       this.updateSearchHistory();
+
+      const eventName = item.saved ? 'portal_maps_search_history_saved' : 'portal_maps_search_history_unsaved';
+      const location = this.getParentComponentName();
+      EventBus.emit('trackEvent', {
+        'event_name': eventName,
+        'category': item.longLabel || item.label,
+        'location': `map_sidebar_${location}`,
+      });
     },
     removeFromSavedSearch: function (item) {
       const itemIndex = this.searchHistory.findIndex((_item) => _item.id === item.id);
       this.searchHistory.splice(itemIndex, 1);
       this.savedSearchHistory = this.searchHistory.filter((item) => item.saved);
       this.updateSearchHistory();
+
+      const location = this.getParentComponentName();
+      EventBus.emit('trackEvent', {
+        'event_name': 'portal_maps_search_history_removed',
+        'category': item.longLabel || item.label,
+        'location': `map_sidebar_${location}`,
+      });
     },
   },
 }

src/components/SideBar.vue

@@ -27,6 +27,7 @@
             :activeId="activeTabId"
             @tabClicked="tabClicked"
             @tabClosed="tabClosed"
+            @trackEvent="trackEvent"
           />
           <template v-for="tab in tabs" key="tab.id">
             <template v-if="tab.type === 'annotation'">
@@ -40,6 +41,7 @@
                 @cancel-create="$emit('cancel-create')"
                 @confirm-delete="$emit('confirm-delete', $event)"
                 @hover-changed="hoverChanged(tab.id, $event)"
+                @trackEvent="trackEvent"
               />
             </template>
             <template v-else-if="tab.type === 'connectivityExplorer'">
@@ -464,6 +466,19 @@ export default {
         });
       }
     },
+    /**
+     * @public
+     * Track an event for analytics
+     * @param {Object} `data` - The event data
+     */
+    trackEvent: function (data) {
+      const taggingData = {
+        'event': 'interaction_event',
+        'location': 'map_sidebar',
+        ...data,
+      };
+      this.$emit('trackEvent', taggingData);
+    }
   },
   computed: {
     // This should respect the information provided by the property
@@ -536,6 +551,11 @@ export default {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
         this.storeAvailableAnatomyFacets(this.availableAnatomyFacets);
     })
+
+    // Event tracking
+    EventBus.on('trackEvent', (data) => {
+      this.trackEvent(data);
+    });
   },
 }
 </script>

src/components/Tabs.vue

@@ -59,6 +59,14 @@ export default {
   methods: {
     tabClicked: function (tab) {
       this.$emit("tabClicked", { id: tab.id, type: tab.type });
+
+      // To track only direct tab click events
+      this.$emit('trackEvent', {
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_sidebar_open_tab',
+        'category': tab.type,
+        'location': 'map_sidebar_tabs',
+      });
     },
     tabClosed: function (tab) {
       this.$emit("tabClosed", { id: tab.id, type: tab.type });