@abi-software/mapintegratedvuer 1.12.0 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -52,14 +52,14 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.11.0",
-    "@abi-software/map-side-bar": "2.10.0",
+    "@abi-software/flatmapvuer": "1.11.1",
+    "@abi-software/map-side-bar": "2.10.2",
     "@abi-software/map-utilities": "1.7.0",
-    "@abi-software/plotvuer": "1.0.4",
-    "@abi-software/scaffoldvuer": "1.11.0",
-    "@abi-software/simulationvuer": "2.0.14",
+    "@abi-software/plotvuer": "1.0.5",
+    "@abi-software/scaffoldvuer": "1.11.2",
+    "@abi-software/simulationvuer": "2.0.17",
     "@abi-software/sparc-annotation": "0.3.2",
-    "@abi-software/svg-sprite": "^1.0.1",
+    "@abi-software/svg-sprite": "1.0.2",
     "@element-plus/icons-vue": "^2.3.1",
     "@vitejs/plugin-vue": "^4.6.2",
     "css-element-queries": "^1.2.3",
@@ -140,8 +140,5 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ],
-  "engines": {
-    "node": "18.17.1"
-  }
+  ]
 }

package/src/components/ContentBar.vue

@@ -98,6 +98,7 @@ import {
   ElRow as Row,
   ElSelect as Select,
 } from "element-plus";
+import tagging from '../services/tagging';
 
 export default {
   name: "ContentBar",
@@ -251,6 +252,15 @@ export default {
           }, 1200);
         });
         //this.contextCardVisible = false; // Hide all context cards when switching viewers
+
+        // GA Tracking
+        const viewCategory = this.entries.find(entry => entry.id === value);
+        tagging.sendEvent({
+          'event': 'interaction_event',
+          'event_name': `portal_maps_toolbar_viewer_changed`,
+          'category': viewCategory?.title || '',
+          'location': 'map_toolbar'
+        });
       }
     },
     // setPopper with is needed as the flatmap context card does not have an image and has smaller with

package/src/components/ContextCard.vue

@@ -63,7 +63,7 @@
 
       <!-- Copy to clipboard button container -->
       <div class="float-button-container">
-        <CopyToClipboard :content="updatedCopyContent" theme="light" />
+        <CopyToClipboard :content="updatedCopyContent" @copied="onCopied" theme="light" />
       </div>
     </div>
   </div>
@@ -73,6 +73,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import { CopyToClipboard } from "@abi-software/map-utilities";
+import tagging from '../services/tagging';
 import '@abi-software/map-utilities/dist/style.css';
 
 //provide the s3Bucket related methods and data.
@@ -348,6 +349,17 @@ export default {
       // note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)
       const viewUrl = this.getFileFromPath(view.path)
       this.$emit("scaffold-view-clicked", viewUrl);
+    },
+    onCopied: function () {
+      const { label, type, discoverId } = this.entry;
+      const category = type ? `${label} ${type}` : label;
+      tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': `portal_maps_context_card_copy`,
+        'category': category || '',
+        'location': 'map_toolbar',
+        'dataset_id': discoverId ? discoverId + '' : '',
+      });
     }
   }
 };

package/src/components/DialogToolbarContent.vue

@@ -87,7 +87,7 @@
                     <template #reference>
                       <el-checkbox
                         v-model="globalSettings.displayMarkers"
-                        @change="updateGlobalSettings"
+                        @change="updateGlobalSettings('displayMarkers')"
                         size="small"
                         :disabled="globalSettings.viewingMode !== 'Exploration'"
                       >
@@ -101,7 +101,7 @@
                 <div class="setting-popover-block" v-if="'connectionType' in globalSettings">
                   <el-radio-group
                     v-model="globalSettings.connectionType"
-                    @change="updateGlobalSettings"
+                    @change="updateGlobalSettings('connectionType')"
                   >
                     <el-radio-button value="Origin" size="small">Origin</el-radio-button>
                     <el-radio-button value="Via" size="small">Via</el-radio-button>
@@ -306,7 +306,7 @@
           <!-- <div class="setting-popover-block" v-if="'displayMarkers' in globalSettings">
             <el-checkbox
               v-model="globalSettings.displayMarkers"
-              @change="updateGlobalSettings"
+              @change="updateGlobalSettings('displayMarkers')"
             >
               Display Map Markers
             </el-checkbox>
@@ -316,14 +316,14 @@
             <el-checkbox
               v-if="'highlightConnectedPaths' in globalSettings"
               v-model="globalSettings.highlightConnectedPaths"
-              @change="updateGlobalSettings"
+              @change="updateGlobalSettings('highlightConnectedPaths')"
             >
               Highlight Connected Paths
             </el-checkbox>
             <el-checkbox
               v-if="'highlightDOIPaths' in globalSettings"
               v-model="globalSettings.highlightDOIPaths"
-              @change="updateGlobalSettings"
+              @change="updateGlobalSettings('highlightDOIPaths')"
             >
               Highlight DOI Paths
             </el-checkbox>
@@ -332,7 +332,7 @@
             <h5>Interactive Mode</h5>
             <el-radio-group
               v-model="globalSettings.interactiveMode"
-              @change="updateGlobalSettings"
+              @change="updateGlobalSettings('interactiveMode')"
             >
               <el-radio value="dataset">Dataset Exploration</el-radio>
               <el-radio value="connectivity">Connectivity Exploration</el-radio>
@@ -344,7 +344,7 @@
             <h5>Flight path</h5>
             <el-radio-group
               v-model="globalSettings.flightPathDisplay"
-              @change="updateGlobalSettings"
+              @change="updateGlobalSettings('flightPathDisplay')"
             >
               <el-radio :value="false">2D</el-radio>
               <el-radio :value="true">3D</el-radio>
@@ -354,7 +354,7 @@
             <h5>Organs</h5>
             <el-radio-group
               v-model="globalSettings.organsDisplay"
-              @change="updateGlobalSettings"
+              @change="updateGlobalSettings('organsDisplay')"
             >
               <el-radio :value="true">Color</el-radio>
               <el-radio :value="false">Grayscale</el-radio>
@@ -364,7 +364,7 @@
             <h5>Apply outlines</h5>
             <el-radio-group
               v-model="globalSettings.outlinesDisplay"
-              @change="updateGlobalSettings"
+              @change="updateGlobalSettings('outlinesDisplay')"
             >
               <el-radio :value="true">Show</el-radio>
               <el-radio :value="false">Hide</el-radio>
@@ -375,7 +375,7 @@
             <el-radio-group
               class="bg-color-radio-group"
               v-model="globalSettings.backgroundDisplay"
-              @change="updateGlobalSettings"
+              @change="updateGlobalSettings('backgroundDisplay')"
             >
               <el-radio value="white" class="bg-color-radio">
                 <span style="--bg-color: white">white</span>
@@ -443,6 +443,7 @@ import {
   ElRadioGroup as RadioGroup,
   ElRow as Row,
 } from "element-plus";
+import tagging from '../services/tagging';
 
 /**
  * Cmponent for the header of differnt vuers.
@@ -551,10 +552,10 @@ export default {
           this.globalSettings.interactiveMode = 'connectivity';
         }
 
-        this.updateGlobalSettings();
+        this.updateGlobalSettings('viewingMode');
       }
     },
-    updateGlobalSettings: function() {
+    updateGlobalSettings: function(changedKey) {
       const updatedSettings = this.settingsStore.getUpdatedGlobalSettingsKey(this.globalSettings);
       this.settingsStore.updateGlobalSettings(this.globalSettings);
 
@@ -574,20 +575,71 @@ export default {
         updatedSettings.includes('backgroundDisplay')) {
         EventBus.emit('globalViewerSettingsUpdate');
       }
+
+      // GA Tracking
+      let category = this.globalSettings[changedKey];
+
+      // Format category for some items
+      if (changedKey === 'flightPathDisplay') {
+        category = this.globalSettings.flightPathDisplay ? '3D' : '2D';
+      }
+      if (changedKey === 'organsDisplay') {
+        category = this.globalSettings.organsDisplay ? 'Color': 'Grayscale';
+      }
+      if (changedKey === 'outlinesDisplay') {
+        category = this.globalSettings.outlinesDisplay ? 'Show' : 'Hide';
+      }
+
+      // Prevent viewing mode clicks on active item
+      if (updatedSettings.length) {
+        tagging.sendEvent({
+          'event': 'interaction_event',
+          'event_name': `portal_maps_settings_${changedKey}`,
+          'category': category,
+          'location': 'map_toolbar'
+        });
+      }
     },
     titleClicked: function(id) {
       this.$emit("titleClicked", id);
     },
     startHelp: function(){
       EventBus.emit("startHelp");
+
+      // GA Tracking
+      tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': `portal_maps_toolbar_help`,
+        'category': 'help_mode_start',
+        'location': 'map_toolbar'
+      });
     },
     onFullscreen: function() {
       this.$emit("onFullscreen");
       this.isFullscreen = !this.isFullscreen;
+
+      // GA Tracking
+      // only for fullscreen enter event to prevent duplicate events
+      if (this.isFullscreen) {
+        tagging.sendEvent({
+          'event': 'interaction_event',
+          'event_name': `portal_maps_toolbar_fullscreen`,
+          'category': this.isFullscreen ? 'enter' : 'exit',
+          'location': 'map_toolbar'
+        });
+      }
     },
     onFullscreenEsc: function () {
       if (!document.fullscreenElement) {
         this.isFullscreen = false;
+
+        // GA Tracking
+        tagging.sendEvent({
+          'event': 'interaction_event',
+          'event_name': `portal_maps_toolbar_fullscreen`,
+          'category': this.isFullscreen ? 'enter' : 'exit',
+          'location': 'map_toolbar'
+        });
       }
     },
     close: function() {
@@ -597,6 +649,14 @@ export default {
       if (document) {
         this.$refs.linkInput.$el.querySelector("input").select();
         document.execCommand('copy');
+
+        // GA Tracking
+        tagging.sendEvent({
+          'event': 'interaction_event',
+          'event_name': 'portal_maps_permalink',
+          'category': 'permalink_copy',
+          'location': 'map_toolbar'
+        });
       }
     },
     setFailedSearch: function(result) {
@@ -613,13 +673,34 @@ export default {
       this.displayShareOptions = false;
       this.loadingLink = true;
       EventBus.emit("updateShareLinkRequested", withAnnotation);
+
+      // GA Tracking
+      tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_permalink',
+        'category': 'permalink_generate',
+        'location': 'map_toolbar'
+      });
     },
     viewClicked: function(view) {
+      const prevActiveView = this.activeView;
+
       this.splitFlowStore.updateActiveView({
         view,
         entries: this.entriesStore.entries,
       });
 
+      // GA Tracking
+      if (view !== prevActiveView) {
+        const viewCategory = this.viewIcons.find((item) => item.icon === view);
+        tagging.sendEvent({
+          'event': 'interaction_event',
+          'event_name': `portal_maps_toolbar_split_view`,
+          'category': viewCategory?.name || '',
+          'location': 'map_toolbar'
+        });
+      }
+
       if (this.$refs.viewPopover) {
         this.$refs.viewPopover.hide();
       }

package/src/components/FlatmapContextCard.vue

@@ -13,7 +13,7 @@
 
     <!-- Copy to clipboard button container -->
     <div class="float-button-container">
-      <CopyToClipboard :content="updatedCopyContent" theme="light" />
+      <CopyToClipboard :content="updatedCopyContent" @copied="onCopied" theme="light" />
     </div>
   </div>
 </template>
@@ -25,6 +25,7 @@ import {
   ElLoading as Loading
 } from "element-plus";
 import { CopyToClipboard } from "@abi-software/map-utilities";
+import tagging from '../services/tagging';
 import '@abi-software/map-utilities/dist/style.css';
 
 export default {
@@ -126,6 +127,16 @@ export default {
       return contentArray.join('\n\n<br>');
     },
   },
+  methods: {
+    onCopied: function () {
+      tagging.sendEvent({
+        'event': 'interaction_event',
+        'event_name': `portal_maps_context_card_copy`,
+        'category': this.mapImpProv?.id || 'Flatmap Provenance',
+        'location': 'map_toolbar'
+      });
+    },
+  },
 };
 </script>
 

package/src/components/SplitFlow.vue

@@ -50,6 +50,7 @@
           @connectivity-source-change="onConnectivitySourceChange"
           @filter-visibility="onFilterVisibility"
           @connectivity-item-close="onConnectivityItemClose"
+          @trackEvent="trackEvent"
         />
         <SplitDialog
           :entries="entries"
@@ -126,7 +127,6 @@ export default {
       search: '',
       expanded: '',
       filterTriggered: false,
-      availableFacets: [],
       connectivityEntry: [],
       annotationEntry: [],
       annotationCallback: undefined,
@@ -279,13 +279,31 @@ export default {
             Tagging.sendEvent({
               'event': 'interaction_event',
               'event_name': 'portal_maps_action_filter',
-              'category': facetString || 'filter',
+              'category': facetString || 'filter_reset',
               'location': 'map_location_pin'
             });
             this.filterTriggered = true;
           }
         } else if (action.type == "Facets") {
           const facets = [];
+          const facetsArray = action.facets ? action.facets : action.labels;
+          const availableFacetsRaw = localStorage.getItem('available-anatomy-facets');
+          const availableFacetsAll = availableFacetsRaw ? JSON.parse(availableFacetsRaw) : [];
+
+          // get label values
+          let availableFacets = availableFacetsAll.flatMap(facet => {
+            if (facet.children && facet.children.length) {
+              return [facet.label, ...facet.children.map(child => child.label)];
+            }
+            return facet.label;
+          }).map(label => label.toLowerCase());
+
+          // remove duplicate items
+          availableFacets = [...new Set(availableFacets)];
+
+          const filterValuesArray = intersectArrays(availableFacets, facetsArray);
+          const filterValues = filterValuesArray.join(', ');
+
           this.settingsStore.facets.species.forEach(e => {
             facets.push({
               facet: capitalise(e),
@@ -293,8 +311,9 @@ export default {
               facetPropPath: "organisms.primary.species.name",
             });
           });
+
           facets.push(
-            ...action.facets.map(val => ({
+            ...filterValuesArray.map(val => ({
               facet: capitalise(val),
               term: "Anatomical structure",
               facetPropPath: "anatomy.organ.category.name",
@@ -302,14 +321,12 @@ export default {
             }))
           );
           this.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',
+            'category': filterValues || 'filter_reset',
             'location': 'map_popup_button'
           });
           this.filterTriggered = true;
@@ -448,7 +465,9 @@ export default {
     },
     openAnnotation: function (payload) {
       this.annotationEntry = payload.annotationEntry;
-      this.annotationHighlight = this.annotationEntry.map(entry => entry.models);
+      // If drawing, `entry.models` may be undefined; use an empty array instead of [undefined]
+      // to prevent errors on highlight
+      this.annotationHighlight = this.annotationEntry.map(entry => entry.models).filter(Boolean);
       if (payload.commitCallback) {
         this.annotationCallback = markRaw(payload.commitCallback);
       }
@@ -513,7 +532,7 @@ export default {
               'event': 'interaction_event',
               'event_name': 'portal_maps_action_search',
               'category': this.search,
-              'location': 'map_sidebar_search'
+              'location': 'map_sidebar_dataset_search'
             });
           }
           this.filterTriggered = false; // reset for next action
@@ -534,8 +553,8 @@ export default {
             Tagging.sendEvent({
               'event': 'interaction_event',
               'event_name': 'portal_maps_action_filter',
-              'category': filterValues || 'filter',
-              'location': 'map_sidebar_filter'
+              'category': filterValues || 'filter_reset',
+              'location': 'map_sidebar_dataset_filter'
             });
           }
           this.filterTriggered = false; // reset for next action
@@ -555,6 +574,29 @@ export default {
             activeFlatmap.updateConnectivityFilters(data.filter);
           });
           EventBus.emit("connectivity-query-filter", data);
+
+          const filterValues = data.filter.filter(f => (f.facet && f.facet.toLowerCase() !== 'show all'))
+            .map((f) => f.tagLabel)
+            .join(', ');
+          const searchValue = data.query;
+
+          if (filterValues) {
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': 'portal_maps_action_filter',
+              'category': filterValues,
+              'location': 'map_sidebar_connectivity_filter'
+            });
+          }
+
+          if (searchValue) {
+            Tagging.sendEvent({
+              'event': 'interaction_event',
+              'event_name': 'portal_maps_action_search',
+              'category': searchValue,
+              'location': 'map_sidebar_connectivity_search'
+            });
+          }
         }
       }
     },
@@ -794,6 +836,9 @@ export default {
         this.settingsStore.updateGlobalSettings(state.globalSettings);
       }
     },
+    trackEvent: function (data) {
+      Tagging.sendEvent(data);
+    },
   },
   created: function () {
     this._facets = [];

package/src/components/scripts/utilities.js

@@ -164,7 +164,12 @@ const getBodyScaffoldInfo = async (sparcApi, species) => {
 
 // Array intersection
 const intersectArrays = (arr1, arr2) => {
-  return arr1.filter((x) => arr2.includes(x));
+  const lowerArr2 = arr2.map(x => typeof x === 'string' ? x.toLowerCase() : x);
+  return arr1.filter(x =>
+    typeof x === 'string'
+      ? lowerArr2.includes(x.toLowerCase())
+      : lowerArr2.includes(x)
+  );
 };
 
 // Not using URLSearchParams to avoid encoding spaces

package/src/components/viewers/Flatmap.vue

@@ -39,6 +39,7 @@
       @pathway-selection-changed="onPathwaySelectionChanged"
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
+      @trackEvent="trackEvent"
     />
 
     <HelpModeDialog

package/src/components/viewers/MultiFlatmap.vue

@@ -40,6 +40,7 @@
       @open-pubmed-url="onOpenPubmedUrl"
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
+      @trackEvent="trackEvent"
     />
 
     <HelpModeDialog

package/src/mixins/ContentMixin.js

@@ -760,6 +760,9 @@ export default {
       })
       EventBus.emit('connectivity-info-open', this.tooltipEntry);
     },
+    trackEvent: function (data) {
+      Tagging.sendEvent(data);
+    },
   },
   data: function () {
     return {