@abi-software/mapintegratedvuer 1.12.0 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "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/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/flatmapvuer": "1.11.2",
+    "@abi-software/map-side-bar": "2.10.3",
+    "@abi-software/map-utilities": "1.7.1",
+    "@abi-software/plotvuer": "1.0.5",
+    "@abi-software/scaffoldvuer": "1.11.3",
+    "@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

@@ -13,6 +13,31 @@
           </div>
         </div>
         <div class="card-bottom">
+          <div v-loading="loadingOriginalSource">
+            <el-collapse v-if="originalSource && originalSource.length" v-model="activeName">
+              <el-collapse-item title="View/Hide source data links" name="sourceDataLinks">
+                <ul class="source-data-list">
+                  <template v-for="(source, i) in originalSource" :key="'source-'+ i">
+                    <li>
+                      <a v-if="source && source.path" :href="generateFileLink(source)" target="_blank">View {{source.name}}</a>
+                    </li>
+                  </template>
+                </ul>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+          <div v-if="flatmapSource && flatmapSource.length" class="flatmap-entry">
+            Associated flatmaps from source:
+            <ul class="source-data-list">
+              <template v-for="(source, i) in flatmapSource" :key="'flatmap-' + i">
+                <li>
+                  <span @click="flatmapClick(source)">
+                    For {{ source.name }}
+                  </span>
+                </li>
+              </template>
+            </ul>
+          </div>
           <div>
             <!-- Show sampeles and views seperately if they do not match -->
             <template v-if="!samplesUnderViews">
@@ -63,7 +88,7 @@
 
       <!-- Copy to clipboard button container -->
       <div class="float-button-container">
-        <CopyToClipboard :content="updatedCopyContent" theme="light" />
+        <CopyToClipboard :content="copyContent" @copied="onCopied" theme="light" />
       </div>
     </div>
   </div>
@@ -73,10 +98,13 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import { CopyToClipboard } from "@abi-software/map-utilities";
+import { mapStores } from 'pinia';
+import tagging from '../services/tagging';
 import '@abi-software/map-utilities/dist/style.css';
-
+import EventBus from './EventBus';
 //provide the s3Bucket related methods and data.
 import S3Bucket from "../mixins/S3Bucket.vue";
+import { useSettingsStore } from '../stores/settings';
 
 import { marked } from 'marked'
 import xss from 'xss'
@@ -123,6 +151,11 @@ export default {
       showContextCard: true,
       sampleDetails: {},
       loading: false,
+      loadingOriginalSource: true,
+      originalSource: [],
+      flatmapSource: [],
+      activeName: "",
+      copyContent: "",
     };
   },
   watch: {
@@ -150,6 +183,10 @@ export default {
     }
   },
   computed: {
+    ...mapStores(useSettingsStore),
+    flatmapAPI: function() {
+      return this.settingsStore.flatmapAPI;
+    },
     samplesUnderViews: function(){
       if (this.contextData){
         if (this.contextData.samplesUnderViews){
@@ -179,7 +216,17 @@ export default {
       }
       return this.entry.banner
     },
-    updatedCopyContent: function () {
+  },
+  methods: {
+    flatmapClick: function(source) {
+      const newView = {
+        type: "Flatmap",
+        resource: source.flatmapUUID,
+        label: this.contextData.heading
+      };
+      EventBus.emit("CreateNewEntry", newView);
+    },
+    updateCopyContent: function () {
       const contentArray = [];
 
       // Use <div> instead of <h1>..<h6> or <p>
@@ -193,6 +240,40 @@ export default {
         contentArray.push(`<div>${this.contextData.description}</div>`);
       }
 
+      if (this.originalSource && this.originalSource.length) {
+        let sourceDataLinks = '<div><strong>Source data links</strong></div>';
+        const sourceLinks = [];
+
+        this.originalSource.forEach((source, i) => {
+          const path = this.generateFileLink(source);
+          let sourceContent = `<div>${source.name}</div>`;
+          sourceContent += `\n`;
+          sourceContent += `<div><a href="${path}">${path}</a></div>`;
+          sourceLinks.push(`<li>${sourceContent}</li>`);
+        });
+        sourceDataLinks += '\n\n';
+        sourceDataLinks += `<ul>${sourceLinks.join('\n')}</ul>`;
+        contentArray.push(sourceDataLinks);
+      }
+
+      if (this.flatmapSource && this.flatmapSource.length) {
+        let flatmapDataLinks = '<div><strong>Associated flatmaps from source</strong></div>';
+        const flatmapLinks = [];
+
+        this.flatmapSource.forEach((source, i) => {
+          const path = this.generateFileLink(source);
+          let flatmapContent = `<div>${source.name}</div>`;
+          let flatmapSource = this.flatmapAPI ? 
+            `${this.flatmapAPI}viewer?id=${source.flatmapUUID}` : source.flatmapUUID;
+          flatmapContent += `\n`;
+          flatmapContent += `<div><a href="${flatmapSource}">${flatmapSource}</a></div>`;
+          flatmapLinks.push(`<li>${flatmapContent}</li>`);
+        });
+        flatmapDataLinks += '\n\n';
+        flatmapDataLinks += `<ul>${flatmapLinks.join('\n')}</ul>`;
+        contentArray.push(flatmapDataLinks);
+      }
+
       if (this.contextData.views?.length) {
         let scaffoldViews = '<div><strong>Scaffold Views</strong></div>';
         const views = [];
@@ -249,8 +330,6 @@ export default {
 
       return contentArray.join('\n\n<br>');
     },
-  },
-  methods: {
     samplesMatching: function(viewId){
       if (this.contextData && this.contextData.samples){
         return this.contextData.samples.filter(s=>s.view == viewId)[0]
@@ -279,7 +358,6 @@ export default {
         .catch((err) => {
           //set defaults if we hit an error
           console.error('caught error!', err)
-          this.discoverId = undefined
           this.loading = false
         });
     },
@@ -335,7 +413,7 @@ export default {
     },
     generateFileLink(sample){
       const path = this.processPathForUrl(sample.path);
-      let link = `${this.envVars.ROOT_URL}/file/${sample.discoverId}/${sample.version}` + '?path=';
+      let link = `${this.envVars.ROOT_URL}/datasets/file/${sample.discoverId}/${sample.version}` + '?path=';
       link = link + path;
       return link;
     },
@@ -348,7 +426,63 @@ 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);
+    },
+    getOriginalSource: function() {
+      const discoverId = this.entry.discoverId
+      const filesPos = 'files/'.length
+      const path =  this.entry.resource.substring(
+        this.entry.resource.indexOf("files/") + filesPos,
+        this.entry.resource.lastIndexOf("?"))
+      const params = new URLSearchParams({
+        discoverId,
+        path
+      });
+      const url = `${this.envVars.API_LOCATION}/file_info/get_original_source?${params.toString()}`
+      fetch(url)
+        .then((response) =>{
+          if (!response.ok){
+            throw Error(response.statusText)
+          } else {
+             return response.json()
+          }
+        })
+        .then((data) => {
+          this.loadingOriginalSource = false
+          if (data.result) {
+            data.result.forEach(result => {
+              if (result.flatmapUUID) {
+                this.flatmapSource.push(result)
+              } else {
+                this.originalSource.push(result)
+              }
+            })
+            if (this.flatmapSource.length || this.originalSource.length) {
+              this.copyContent = this.updateCopyContent()
+            }
+          }
+          this.loadingOriginalSource = false
+        })
+        .catch((err) => {
+          //set defaults if we hit an error
+          console.error('caught error!', err)
+          this.loadingOriginalSource = false
+        });
+    },
+    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 + '' : '',
+      });
     }
+  },
+  mounted: function() {
+    this.copyContent = this.updateCopyContent()
+    this.getOriginalSource()
   }
 };
 </script>
@@ -494,4 +628,19 @@ export default {
     visibility: visible;
   }
 }
+ 
+.flatmap-entry {
+  margin-top: 16px;
+}
+
+.source-data-list {
+  a {
+    color: #8300BF;
+  }
+  span {
+    color: #8300BF;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
 </style>

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 {
@@ -64,15 +65,17 @@ export default {
     sckanReleaseDisplay: function() {
       let sckanRelease = "Unknown"
       if(this.mapImpProv){
-        sckanRelease = this.mapImpProv.connectivity?.npo.date
+        sckanRelease = this.mapImpProv.connectivity?.npo?.date
         if (!sckanRelease) {
           let sckanCreated = this.mapImpProv.sckan?.created ? this.mapImpProv.sckan.created : this.mapImpProv.sckan
-          let isoTime = sckanCreated.replace(',', '.') // Date time does not accept commas but Sckan uses them
-          sckanRelease = new Date(isoTime).toLocaleDateString('en-US', {
-              day: '2-digit',
-              month: 'long',
-              year: 'numeric',
-          })
+          if (sckanCreated) {
+            let isoTime = sckanCreated.replace(',', '.') // Date time does not accept commas but Sckan uses them
+            sckanRelease = new Date(isoTime).toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: 'long',
+                year: 'numeric',
+            })
+          }
         }
         if (!sckanRelease) {
           sckanRelease = "Unknown";
@@ -83,7 +86,7 @@ export default {
     sckanReleaseLink: function() {
       let sckanLink = "Unknown"
       if(this.mapImpProv){
-        sckanLink = this.mapImpProv.connectivity?.npo.path
+        sckanLink = this.mapImpProv.connectivity?.npo?.path
         if (!sckanLink) {
           sckanLink = this.mapImpProv.sckan?.release
         }
@@ -126,6 +129,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>