Merge pull request #207 from akhuoa/feature/map-metrics

Map Metrics

package.json

@@ -48,8 +48,8 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.0.1",
-    "@abi-software/map-side-bar": "2.0.1",
+    "@abi-software/flatmapvuer": "1.0.2",
+    "@abi-software/map-side-bar": "2.1.0",
     "@abi-software/plotvuer": "1.0.0",
     "@abi-software/scaffoldvuer": "1.0.1",
     "@abi-software/simulationvuer": "1.0.0",

src/components/MapContent.vue

@@ -19,6 +19,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import Tagging from '../services/tagging.js';
 import SplitFlow from './SplitFlow.vue';
 import EventBus from './EventBus';
 import { mapStores } from 'pinia';
@@ -251,6 +252,15 @@ export default {
        * This event emit when the component is mounted.
        */
       this.$emit("isReady");
+
+      // GA Tagging
+      // Page view tracking for maps' buttons click on portal
+      // category: AC | FC | WholeBody
+      Tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_page_view',
+        'category': this.startingMap
+      });
     },
   },
   computed: {

src/components/SplitFlow.vue

@@ -29,6 +29,7 @@
           @tabClicked="tabClicked"
           @search-changed="searchChanged($event)"
           @contextUpdate="contextUpdate($event)"
+          @datalink-clicked="datalinkClicked($event)"
         />
         <SplitDialog
           :entries="entries"
@@ -42,12 +43,18 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import Tagging from '../services/tagging.js';
 import DialogToolbarContent from "./DialogToolbarContent.vue";
 import EventBus from "./EventBus";
 import SplitDialog from "./SplitDialog.vue";
 // import contextCards from './context-cards'
 import { SideBar } from "@abi-software/map-side-bar";
-import { capitalise, getNewMapEntry, initialDefaultState } from "./scripts/utilities.js";
+import {
+  capitalise,
+  getNewMapEntry,
+  initialDefaultState,
+  intersectArrays,
+} from "./scripts/utilities.js";
 import { mapStores } from 'pinia';
 import { useEntriesStore } from '../stores/entries';
 import { useSettingsStore } from '../stores/settings';
@@ -85,6 +92,8 @@ export default {
       startUp: true,
       search: '',
       activeDockedId : 1,
+      filterTriggered: false,
+      availableFacets: [],
     }
   },
   watch: {
@@ -109,12 +118,34 @@ export default {
             this.openSearch([action.filter], action.label);
           } else {
             this.openSearch([], action.term);
+            // GA Tagging
+            // Event tracking for map action search/filter data
+            const eventName = action.featuredDataset
+              ? 'portal_maps_featured_dataset_search'
+              : 'portal_maps_action_search';
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': eventName,
+              'category': action.term || 'filter',
+              'location': 'map_location_pin'
+            });
+            this.filterTriggered = true;
           }
         } else if (action.type == "URL") {
           window.open(action.resource, "_blank");
         } else if (action.type == "Facet") {
           if (this.$refs.sideBar) {
             this.$refs.sideBar.addFilter(action);
+            const { facet } = action;
+            // GA Tagging
+            // Event tracking for map action search/filter data
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': 'portal_maps_action_filter',
+              'category': facet || 'filter',
+              'location': 'map_location_pin'
+            });
+            this.filterTriggered = true;
           }
         } else if (action.type == "Facets") {
           const facets = [];
@@ -140,12 +171,46 @@ export default {
           );
           if (this.$refs.sideBar) {
             this.$refs.sideBar.openSearch(facets, "");
+
+            const filterValuesArray = intersectArrays(this.availableFacets, action.labels);
+            const filterValues = filterValuesArray.join(', ');
+            // GA Tagging
+            // Event tracking for map action search/filter data
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': 'portal_maps_action_filter',
+              'category': filterValues || 'filter',
+              'location': 'map_popup_button'
+            });
           }
         } else {
+          this.trackGalleryClick(action);
           this.createNewEntry(action);
         }
       }
     },
+    trackGalleryClick: function (action) {
+      const categoryValues = [];
+      const { label, type, datasetId, resource } = action;
+      let filePath = '';
+      if (label) categoryValues.push(label);
+      if (type) categoryValues.push(type);
+      if (datasetId) categoryValues.push('(' + datasetId + ')');
+      if (resource) {
+        filePath = resource.share_link;
+      }
+
+      // GA Tagging
+      // Event tracking for map sidebar gallery click
+      Tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_gallery_click',
+        'category': categoryValues.join(' '),
+        'location': 'map_sidebar_gallery',
+        'dataset_id': datasetId ? datasetId + '' : '', // change to string format
+        'file_path': filePath,
+      });
+    },
     onDisplaySearch: function (payload) {
       let searchFound = false;
       //Search all active viewers when global callback is on
@@ -159,6 +224,15 @@ export default {
         });
       }
       this.$refs.dialogToolbar.setFailedSearch(searchFound ? undefined : payload.term);
+
+      // GA Tagging
+      // Event tracking for map on display search
+      Tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_display_search',
+        'category': payload.term,
+        'location': 'map_toolbar'
+      });
     },
     fetchSuggestions: function(payload) {
       const suggestions = [];
@@ -177,14 +251,46 @@ export default {
     searchChanged: function (data) {
       if (data && data.type == "query-update") {
         this.search = data.value;
+        if (this.search && !this.filterTriggered) {
+          // GA Tagging
+          // Event tracking for map action search/filter data
+          Tagging.sendEvent({
+            'event': 'interaction_event',
+            'event_name': 'portal_maps_action_search',
+            'category': this.search,
+            'location': 'map_sidebar_search'
+          });
+        }
+        this.filterTriggered = false; // reset for next action
       }
       if (data && data.type == "filter-update") {
         this.settingsStore.updateFacets(data.value);
+
+        // Remove filter event from maps' popup
+        if (!this.filterTriggered) {
+          const { value } = data;
+          const filterValuesArray = value.filter((val) =>
+            val.facet && val.facet.toLowerCase() !== 'show all'
+          ).map((val) => val.facet);
+          const filterValues = filterValuesArray.join(', ');
+
+          // GA Tagging
+          // Event tracking for map action search/filter data
+          Tagging.sendEvent({
+            'event': 'interaction_event',
+            'event_name': 'portal_maps_action_filter',
+            'category': filterValues || 'filter',
+            'location': 'map_sidebar_filter'
+          });
+        }
+        this.filterTriggered = false; // reset for next action
       }
       if (data && data.type == "available-facets") {
         this.settingsStore.updateFacetLabels(data.value.labels);
         this.settingsStore.updateMarkers(data.value.uberons);
         EventBus.emit("markerUpdate");
+
+        this.availableFacets = data.value.labels
       }
     },
     getNewEntryId: function() {
@@ -323,7 +429,27 @@ export default {
     },
     contextUpdate: function (payload) {
       EventBus.emit("contextUpdate", payload);
-    }
+    },
+    datalinkClicked: function (payload) {
+      // payload is dataset URL
+      const datasetURL = payload || '';
+      const substringA = 'datasets/';
+      const substringB = '?type=dataset';
+      const datasetId = datasetURL.substring(
+        datasetURL.indexOf(substringA) + substringA.length,
+        datasetURL.indexOf(substringB)
+      );
+
+      // GA Tagging
+      // Event tracking for map sidebar gallery dataset click
+      Tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_gallery_click',
+        'category': datasetURL,
+        'location': 'map_sidebar_gallery',
+        'dataset_id': datasetId || ''
+      });
+    },
   },
   created: function () {
     this._facets = [];

src/components/scripts/utilities.js

@@ -162,12 +162,36 @@ const getBodyScaffoldInfo = async (sparcApi, species) => {
   return {url, datasetInfo};
 }
 
-export { 
+// Array intersection
+const intersectArrays = (arr1, arr2) => {
+  return arr1.filter((x) => arr2.includes(x));
+};
+
+// Not using URLSearchParams to avoid encoding spaces
+const transformObjToString = (obj) => {
+  return Object.keys(obj)
+    .map((key) => `${key}=${obj[key]}`)
+    .join('&');
+};
+
+const transformStringToObj = (str) => {
+  const params = new URLSearchParams(str);
+  const obj = {};
+  for (const [key, value] of params) {
+    obj[key] = value;
+  }
+  return obj;
+};
+
+export {
   availableSpecies,
   capitalise,
   findSpeciesKey,
   initialState,
   initialDefaultState,
   getBodyScaffoldInfo,
-  getNewMapEntry
+  getNewMapEntry,
+  intersectArrays,
+  transformObjToString,
+  transformStringToObj,
 }

src/components/viewers/Flatmap.vue

@@ -17,6 +17,7 @@
     :flatmapAPI="flatmapAPI"
     :sparcAPI="apiLocation"
     @open-map="openMap"
+    @pathway-selection-changed="onPathwaySelectionChanged"
   />
 </template>
 
@@ -26,6 +27,7 @@ import { FlatmapVuer } from "@abi-software/flatmapvuer";
 import EventBus from "../EventBus";
 import ContentMixin from "../../mixins/ContentMixin";
 import DynamicMarkerMixin from "../../mixins/DynamicMarkerMixin";
+import { transformObjToString } from '../scripts/utilities';
 import "@abi-software/flatmapvuer/dist/style.css";
 
 export default {
@@ -50,6 +52,24 @@ export default {
     flatmaprResourceSelected: function (type, resource) {
       this.$refs.flatmap.resourceSelected(
         type, resource, (this.$refs.map.viewingMode === "Exploration"));
+
+      if (resource.eventType === 'click' && resource.feature.type === 'feature') {
+        const eventData = {
+          label: resource.label || '',
+          id: resource.feature.id || '',
+          featureId: resource.feature.featureId || '',
+          taxonomy: resource.taxonomy || '',
+          resources: resource.resource.join(', ')
+        };
+        const paramString = transformObjToString(eventData);
+        // `transformStringToObj` function can be used to change it back to object
+        Tagging.sendEvent({
+          'event': 'interaction_event',
+          'event_name': 'portal_maps_connectivity',
+          'category': paramString,
+          "location": type + ' ' + this.$refs.map.viewingMode
+        });
+      }
     },
     flatmapReadyCall: function (flatmap) {
       let provClone = {id: this.entry.id, prov: this.getFlatmapImp().provenance}; //create clone of provenance and add id
@@ -60,6 +80,17 @@ export default {
         this.flatmapReadyForMarkerUpdates(flatmap);
       }
     },
+    onPathwaySelectionChanged: function (data) {
+      const { label, property, checked, selectionsTitle } = data;
+      // GA Tagging
+      // Event tracking for maps' pathway selection change
+      Tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_pathway_change',
+        'category': label + ' [' + property + '] ' + checked,
+        'location': selectionsTitle
+      });
+    },
     highlightFeatures: function(info) {
       let name = info.name;
       const flatmap = this.$refs.flatmap.mapImp;