@abi-software/mapintegratedvuer 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -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",

package/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';
@@ -26,6 +27,7 @@ import { useSettingsStore } from '../stores/settings';
 import { findSpeciesKey } from './scripts/utilities.js';
 import { MapSvgSpriteColor} from '@abi-software/svg-sprite';
 import { initialState } from "./scripts/utilities.js";
+import RetrieveContextCardMixin from "../mixins/RetrieveContextCardMixin.js"
 import {
   ElLoading as Loading
 } from "element-plus";
@@ -40,6 +42,7 @@ export default {
     Loading,
     SplitFlow,
   },
+  mixins: [RetrieveContextCardMixin],
   props: {
     /**
      * A link (URL) to share.
@@ -158,7 +161,7 @@ export default {
      * instead change the current entry by setting the state.
      * @arg state
      */
-    setCurrentEntry: function(state) {
+    setCurrentEntry: async function(state) {
       if (state && state.type) {
         if (state.type === "Scaffold" && state.url) {
           //State for scaffold containing the following items:
@@ -167,7 +170,7 @@ export default {
           //  resource - the url to metadata
           //  state - state to restore (viewport)
           //  viewUrl - relative path of the view file to metadata
-          const newView = {
+          let newView = {
             type: state.type,
             label: state.label,
             region: state.region,
@@ -175,6 +178,9 @@ export default {
             state: state.state,
             viewUrl: state.viewUrl
           };
+          // Add content from scicrunch for the context card
+          const contextCardInfo = await this.retrieveContextCardFromUrl(state.url);
+          newView = {...newView, ...contextCardInfo};
           this.$refs.flow.createNewEntry(newView);
         } else if (state.type === "MultiFlatmap") {
           //State for scaffold containing the following items:
@@ -246,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: {

package/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,51 @@ 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, discoverId, resource } = action;
+      let filePath = '';
+      let id = datasetId ? datasetId : discoverId;
+      if (label) categoryValues.push(label);
+      if (type) categoryValues.push(type);
+      if (datasetId) categoryValues.push('(' + id + ')');
+      if (resource) {
+        if (type === "Plot") {
+          filePath = resource.dataSource.url;
+        } else {
+          filePath = typeof resource === 'string' ? resource : 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': id ? id + '' : '', // change to string format
+        'file_path': filePath,
+      });
+    },
     onDisplaySearch: function (payload) {
       let searchFound = false;
       //Search all active viewers when global callback is on
@@ -159,6 +229,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 +256,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 +434,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 = [];

package/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,
 }

package/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;

package/src/components/viewers/MultiFlatmap.vue

@@ -17,16 +17,22 @@
     :sparcAPI="apiLocation"
     @pan-zoom-callback="flatmapPanZoomCallback"
     @open-map="openMap"
+    @pathway-selection-changed="onPathwaySelectionChanged"
+    @open-pubmed-url="onOpenPubmedUrl"
   />
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { availableSpecies } from "../scripts/utilities.js";
+import Tagging from '../../services/tagging.js';
 import { MultiFlatmapVuer } from "@abi-software/flatmapvuer";
 import ContentMixin from "../../mixins/ContentMixin";
 import EventBus from "../EventBus";
-import { getBodyScaffoldInfo } from "../scripts/utilities";
+import {
+  availableSpecies,
+  getBodyScaffoldInfo,
+  transformObjToString
+} from "../scripts/utilities";
 import DyncamicMarkerMixin from "../../mixins/DynamicMarkerMixin";
 
 import "@abi-software/flatmapvuer/dist/style.css";
@@ -160,6 +166,45 @@ export default {
     flatmaprResourceSelected: function (type, resource) {
       const map = this.$refs.multiflatmap.getCurrentFlatmap();
       this.resourceSelected(type, resource, (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 + ' ' + map.viewingMode
+        });
+      }
+    },
+    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
+      });
+    },
+    onOpenPubmedUrl: function (url) {
+      // GA Tagging
+      // Event tracking for open pubmed url from popup
+      Tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_pubmed_url',
+        'file_path': url,
+        'location': 'map_popup_button',
+      });
     },
     /**
      * Handle sync pan zoom event
@@ -245,6 +290,14 @@ export default {
           await this.toggleSyncMode();
       }
       this.updateProvCard();
+
+      // GA Tagging
+      // Event tracking for maps' species change
+      Tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_species_change',
+        'category': this.activeSpecies
+      });
     },
     multiFlatmapReady: function (flatmap) {
       if (flatmap) {

package/src/mixins/ContentMixin.js

@@ -9,6 +9,7 @@ import markerZoomLevels from "../components/markerZoomLevelsHardCoded.js";
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
+import Tagging from '../services/tagging.js';
 
 function capitalise(text) {
   return text[0].toUpperCase() + text.substring(1)
@@ -52,10 +53,22 @@ export default {
     openMap: function (type) {
       if (type === "SYNC") {
         this.toggleSyncMode();
+        this.trackOpenMap('toggle_map_sync_mode');
       } else {
         EventBus.emit("OpenNewMap", type);
+        this.trackOpenMap(`open_new_${type}_map`);
       }
     },
+    trackOpenMap: function (category) {
+      // GA Tagging
+      // Open map tracking
+      Tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_open_map',
+        'category': category,
+        'location': 'open_new_map'
+      });
+    },
     updateWithViewUrl: function() {
       return;
     },
@@ -113,6 +126,7 @@ export default {
                 term: this.settingsStore.featuredMarkerDoi(
                   resource.feature.id
                 ),
+                featuredDataset: true,
               };
             } else if (hardcodedAnnotation.filter(h => h.keyword).length > 0) {
               // if it matches our stored keywords, it is a keyword search

package/src/mixins/RetrieveContextCardMixin.js

@@ -0,0 +1,83 @@
+
+/* eslint-disable no-alert, no-console */
+export default {
+  // Note that the setting store is included in MapContent.vue
+  methods: {
+    retrieveContextCardFromUrl: async function (url) {
+      // split the url to get the datasetId
+      const [datasetId, basePath, scaffoldPath, s3uri] = this.splitInfoFromUrl(url);
+
+      // get the context file from scicrunch
+      const sciResults = await this.getContextFileFromScicrunch(datasetId, scaffoldPath);
+      if (!sciResults.success){
+        return {} // return empty object if no context file is found (the empty object will be added to the entry)
+      }
+
+      // return the context file
+      const fullPath = basePath + sciResults.contextFile + s3uri;
+      return {
+        s3uri: sciResults.s3uri,
+        contextCardUrl: fullPath,
+      }
+    },
+    splitInfoFromUrl: function (url) {
+      // example url: "https://mapcore-demo.org/current/sparc-api-v2/s3-resource/221/3/files/derivative/Scaffolds/mouse_colon_metadata.json",
+      // find the part after 's3-resource' 
+      let s3path = url.split('s3-resource')[1];
+      let basePath = url.split('files/')[0] + 'files/' // This gives us the base path for our relative path we will get from scicrunch
+      let scaffoldPath = url.split('files/')[1].split('?')[0] // This gives us the relative path to the file we want to get from scicrunch
+      let s3uri = '?' + url.split('?')[1] // This gives us the uri needed to get the file from s3
+
+      // split the url by '/'
+      const parts = s3path.split('/');
+      // remove the first part
+      parts.shift();
+      // return the datasetId which is the first part
+      const datasetId = parts[0];
+
+      return [datasetId, basePath, scaffoldPath, s3uri];
+    },
+    getContextFileFromScicrunch: async function (datasetId, scaffoldPath) {
+      // get the context file from scicrunch
+      let results = await fetch(`${this.settingsStore.sparcApi}/dataset_info/using_multiple_discoverIds/?discoverIds=${datasetId}`)
+        .then(response => response.json())
+        .then(data => {
+          // get the context info from the response
+          if (data.numberOfHits === 1) { // check if there is only one hit (We don't want to use the data if there are multiple hits)
+            const contextFile = data.results[0]['abi-contextual-information']
+
+            // check if there is only one context file and if so return it
+            if ( contextFile && contextFile.length === 1) {
+              return {
+                success: true,
+                contextFile: contextFile[0], 
+                s3uri: data.results[0]['s3uri']
+              }
+            }
+
+            // If there are multiple context files, find the one that matches the scaffold path
+            else if (contextFile && contextFile.length > 1) {
+              let search = this.findContextInforForFilePath(data.results[0]['abi-context-file'], scaffoldPath);
+              if (search) {
+                return {
+                  success: true,
+                  contextFile: search, 
+                  s3uri: data.results[0]['s3uri']
+                }
+              }
+            }
+          }
+          return {success: false};
+        }).catch(error => {
+          console.error('Error:', error);
+          return {success: false};
+        });
+      return results;
+    },
+    findContextInforForFilePath: function (dataciteInfo, filePath) {
+      // find the context file that matches the scaffold path
+      let result = dataciteInfo.find((info) => info.datacite.isDerivedFrom.path.includes(filePath))
+      return result?.dataset?.path
+    }
+  }
+}

package/src/services/tagging.js

@@ -0,0 +1,28 @@
+export default {
+  sendEvent: function(data) {
+    const taggingData = {
+      event: data.event || '',
+      event_name: data.event_name || '',
+      files: data.files || '',
+      file_name: data.file_name || '',
+      file_path: data.file_path || '',
+      file_type: data.file_type || '',
+      category: data.category || '',
+      dataset_id: data.dataset_id || '',
+      version_id: data.version_id || '',
+      doi: data.doi || '',
+      citation_type: data.citation_type || '',
+      location: data.location || ''
+    };
+
+    // set debugging mode
+    if (localStorage.getItem('debugTagging') === 'yes') {
+      console.table(taggingData);
+    }
+
+    // push to dataLayer for GTM
+    if (typeof dataLayer !== 'undefined') {
+      dataLayer.push(taggingData);
+    }
+  }
+}