@abi-software/mapintegratedvuer 1.3.4-isan.2 → 1.3.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.3.4-isan.2",
+  "version": "1.3.5-beta.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,12 +50,12 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.3.2-isan.0",
-    "@abi-software/map-side-bar": "^2.4.0-isan-2",
-    "@abi-software/map-utilities": "^1.0.0",
+    "@abi-software/flatmapvuer": "^1.3.2",
+    "@abi-software/map-side-bar": "^2.3.2-beta.5",
+    "@abi-software/map-utilities": "^1.0.1-beta.3",
     "@abi-software/plotvuer": "1.0.0",
     "@abi-software/scaffoldvuer": "^1.3.3",
-    "@abi-software/simulationvuer": "^2.0.5",
+    "@abi-software/simulationvuer": "1.0.0",
     "@abi-software/svg-sprite": "1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "@pinia/testing": "^0.1.3",

package/src/App.vue

@@ -95,7 +95,6 @@ export default {
         flatmapAPI: import.meta.env.VITE_FLATMAPAPI_LOCATION,
         nlLinkPrefix: import.meta.env.VITE_NL_LINK_PREFIX,
         rootUrl: import.meta.env.VITE_ROOT_URL,
-        pmrHost: import.meta.env.VITE_PMR_HOST,
       }
     }
   },
@@ -166,7 +165,6 @@ export default {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
     },
     mapIsReady: function() {
-      if (!this.uuid) this.setFlatmap();
       console.log("map is ready")
     },
     parseQuery: function () {

package/src/components/ContextCard.vue

@@ -16,7 +16,7 @@
               <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
               <template v-for="(view, i) in contextData.views" :key="i+'_1'">
                 <div @click="openViewFile(view)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"> 
+                  <img class="view-image" :src="getFileFromPath(view.thumbnail)">
                   <div class="view-description">{{view.description}}</div>
                 </div>
                 <div class="padding"/>
@@ -43,7 +43,7 @@
               <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
               <template v-for="(view, i) in contextData.views" :key="i+'_1'">
                 <span  @click="viewClicked(view, i)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"/> 
+                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"/>
                   <div class="view-description">{{view.description}}<i class="el-icon-warning-outline info"></i> </div>
                 </span>
                 <div v-if="sampleDetails[i]" v-html="samplesMatching(view.id).description"/>
@@ -57,6 +57,11 @@
           </div>
         </div>
       </div>
+
+      <!-- Copy to clipboard button container -->
+      <div class="float-button-container">
+        <CopyToClipboard :content="updatedCopyContent" theme="light" />
+      </div>
     </div>
   </div>
 </template>
@@ -64,6 +69,8 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { CopyToClipboard } from "@abi-software/map-utilities";
+import '@abi-software/map-utilities/dist/style.css';
 
 //provide the s3Bucket related methods and data.
 import S3Bucket from "../mixins/S3Bucket.vue";
@@ -94,6 +101,9 @@ const convertBackslashToForwardSlash = function(path){
 
 export default {
   name: "contextCard",
+  components: {
+    CopyToClipboard,
+  },
   mixins: [S3Bucket],
   props: {
     /**
@@ -109,7 +119,7 @@ export default {
       showDetails: true,
       showContextCard: true,
       sampleDetails: {},
-      loading: false
+      loading: false,
     };
   },
   watch: {
@@ -142,8 +152,8 @@ export default {
         if (this.contextData.samplesUnderViews){
           return true
         } else {
-          let viewId = this.contextData.views.map(v=>v.id)
-          let samplesView = this.contextData.samples.map(s=>s.view)
+          let viewId = this.contextData.views?.map(v=>v.id) || [];
+          let samplesView = this.contextData.samples?.map(s=>s.view) || [];
 
           // get matching values
           let matching = viewId.filter(v=>samplesView.includes(v))
@@ -152,21 +162,90 @@ export default {
           if ( viewId.length === matching.length && matching.length === samplesView.length){
             return true
           }
-          return false
         }
       }
-      else return false
+      return false;
     },
     banner: function(){
       if (this.contextData.banner){
-        return this.getFileFromPath(this.contextData.banner) 
+        return this.getFileFromPath(this.contextData.banner)
       } else if (this.contextData && this.contextData.views && this.contextData.views.length > 0) {
         if(this.contextData.views[0].thumbnail){
           return this.getFileFromPath(this.contextData.views[0].thumbnail)
         }
-      } 
+      }
       return this.entry.banner
-    }
+    },
+    updatedCopyContent: function () {
+      const contentArray = [];
+
+      // Use <div> instead of <h1>..<h6> or <p>
+      // to avoid default formatting on font size and margin
+
+      if (this.contextData.heading) {
+        contentArray.push(`<div><strong>${this.contextData.heading}</strong></div>`);
+      }
+
+      if (this.contextData.description) {
+        contentArray.push(`<div>${this.contextData.description}</div>`);
+      }
+
+      if (this.contextData.views?.length) {
+        let scaffoldViews = '<div><strong>Scaffold Views</strong></div>';
+        const views = [];
+
+        this.contextData.views.forEach((view, i) => {
+          const viewContents = [];
+          const viewPath = this.getFileFromPath(view.path);
+          let viewContent = `<div>${view.description}</div>`;
+          viewContent += `\n`;
+          viewContent += `<div><a href="${viewPath}">${viewPath}</a></div>`;
+          viewContents.push(viewContent);
+
+          if (this.samplesUnderViews) {
+            const description = this.samplesMatching(view.id).description;
+            let sampleContent = `<div>${description}</div>`;
+
+            if (this.samplesMatching(view.id).path) {
+              sampleContent += `\n`;
+              const url = this.generateFileLink(this.samplesMatching(view.id));
+              sampleContent += `<div><a href="${url}">${url}</a></div>`;
+            }
+            viewContents.push(sampleContent);
+          }
+          const viewContentStr = viewContents.join('\n');
+          views.push(`<li>${viewContentStr}</li>`);
+        });
+        scaffoldViews += '\n\n';
+        scaffoldViews += `<ul>${views.join('\n')}</ul>`;
+        contentArray.push(scaffoldViews);
+      }
+
+      if (!this.samplesUnderViews) {
+        if (this.contextData.samples?.length) {
+          let sampleViews = '<div><strong>Samples on Scaffold</strong></div>';
+          const samples = [];
+
+          this.contextData.samples.forEach((sample, i) => {
+            let sampleContents = '';
+            sampleContents += `<div>${sample.heading}</div>`;
+            sampleContents += `\n`;
+            sampleContents += `<div>${sample.description}</div>`;
+            if (sample.path) {
+              const url = this.generateFileLink(sample);
+              sampleContents += `\n`;
+              sampleContents += `<div><a href="${url}">${url}</a></div>`;
+            }
+            samples.push(`<li>${sampleContents}</li>`);
+          });
+          sampleViews += '\n\n';
+          sampleViews += `<ul>${samples.join('\n')}</ul>`;
+          contentArray.push(sampleViews);
+        }
+      }
+
+      return contentArray.join('\n\n<br>');
+    },
   },
   methods: {
     samplesMatching: function(viewId){
@@ -176,7 +255,7 @@ export default {
       else return []
     },
     viewClicked: function(view, i){
-      this.openViewFile(view) 
+      this.openViewFile(view)
       this.toggleSampleDetails(i)
     },
     getContextFile: function (contextFileUrl) {
@@ -192,7 +271,7 @@ export default {
         .then((data) => {
           this.contextData = data
           this.loading = false
-          this.addDiscoverIdsToContextData() 
+          this.addDiscoverIdsToContextData()
         })
         .catch((err) => {
           //set defaults if we hit an error
@@ -382,4 +461,16 @@ export default {
   background-color: #979797;
 }
 
+.float-button-container {
+  position: absolute;
+  bottom: 6px;
+  right: 12px;
+  opacity: 0;
+  visibility: hidden;
+
+  .context-card-container:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
 </style>

package/src/components/FlatmapContextCard.vue

@@ -10,6 +10,11 @@
         View publication <a :href="flatmapSource" target="_blank">here</a>
       <br/>
     </div>
+
+    <!-- Copy to clipboard button container -->
+    <div class="float-button-container">
+      <CopyToClipboard :content="copyContent" theme="light" />
+    </div>
   </div>
 </template>
 
@@ -19,11 +24,14 @@
 import {
   ElLoading as Loading
 } from "element-plus";
+import { CopyToClipboard } from "@abi-software/map-utilities";
+import '@abi-software/map-utilities/dist/style.css';
 
 export default {
   name: "FlatmapContextCard",
   components: {
     Loading,
+    CopyToClipboard,
   },
   props: {
     /**
@@ -38,7 +46,8 @@ export default {
       showDetails: true,
       showContextCard: true,
       sampleDetails: {},
-      loading: false
+      loading: false,
+      copyContent: '',
     };
   },
   computed: {
@@ -51,7 +60,7 @@ export default {
             year: 'numeric',
         })
       }
-      return flatmapPublished 
+      return flatmapPublished
     },
     sckanReleaseDisplay: function() {
       let sckanRelease = "Unknown"
@@ -59,20 +68,18 @@ export default {
         sckanRelease = this.mapImpProv.connectivity?.npo.date
         if (!sckanRelease) {
           let sckanCreated = this.mapImpProv.sckan?.created ? this.mapImpProv.sckan.created : this.mapImpProv.sckan
-          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',
-            })
-          }
+          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";
         }
       }
-      return sckanRelease 
+      return sckanRelease
     },
     sckanReleaseLink: function() {
       let sckanLink = "Unknown"
@@ -95,6 +102,36 @@ export default {
       return flatmapSource
     },
   },
+  mounted: function () {
+    this.updateCopyContent();
+  },
+  methods: {
+    updateCopyContent: function () {
+      const contentArray = [];
+
+      // Use <div> instead of <h1>..<h6> or <p>
+      // to avoid default formatting on font size and margin
+
+      contentArray.push(`<div><strong>Flatmap Provenance</strong></div>`);
+
+      let versionContent = `<div>SCKAN version:</div>`;
+      versionContent += `\n`;
+      versionContent += `<div><a href="${this.sckanReleaseLink}">${this.sckanReleaseLink}</a></div>`;
+      contentArray.push(versionContent);
+
+      let publishedContent = `<div>Published on:</div>`;
+      publishedContent += `\n`;
+      publishedContent += `<div>${this.flatmapPublishedDisplay}</div>`;
+      contentArray.push(publishedContent);
+
+      let publicationContent = `<div>View publication:</div>`;
+      publicationContent += `\n`;
+      publicationContent += `<div><a href="${this.flatmapSource}">${this.flatmapSource}</a></div>`;
+      contentArray.push(publicationContent);
+
+      this.copyContent = contentArray.join('\n\n<br>');
+    },
+  }
 };
 </script>
 
@@ -145,4 +182,16 @@ export default {
   background-color: #979797;
 }
 
+.float-button-container {
+  position: absolute;
+  bottom: 6px;
+  right: 12px;
+  opacity: 0;
+  visibility: hidden;
+
+  .flatmap-context-card:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
 </style>

package/src/components/MapContent.vue

@@ -245,7 +245,6 @@ export default {
           const newView = {
             type: state.type,
             resource: state.resource,
-            data: state.data,
             state: state.state,
             label: state.label
           };
@@ -299,15 +298,14 @@ export default {
   beforeMount: function() {
     if (this.options) {
       // Split options prop up to commit to the store
-      this.options.sparcApi ? this.settingsStore.updateSparcAPI(this.options.sparcApi) : null;
-      this.options.algoliaIndex ? this.settingsStore.updateAlgoliaIndex(this.options.algoliaIndex) : null;
-      this.options.algoliaKey ? this.settingsStore.updateAlgoliaKey(this.options.algoliaKey) : null;
-      this.options.algoliaId ? this.settingsStore.updateAlgoliaId(this.options.algoliaId) : null;
-      this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null;
-      this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null;
-      this.options.nlLinkPrefix ? this.settingsStore.updateNLLinkPrefix(this.options.nlLinkPrefix) : null;
-      this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null;
-      this.options.pmrHost ? this.settingsStore.updatePmrHost(this.options.pmrHost) : null;
+      this.options.sparcApi ? this.settingsStore.updateSparcAPI(this.options.sparcApi) : null
+      this.options.algoliaIndex ? this.settingsStore.updateAlgoliaIndex(this.options.algoliaIndex) : null
+      this.options.algoliaKey ? this.settingsStore.updateAlgoliaKey(this.options.algoliaKey) : null
+      this.options.algoliaId ? this.settingsStore.updateAlgoliaId(this.options.algoliaId) : null
+      this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null
+      this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null,
+      this.options.nlLinkPrefix ? this.settingsStore.updateNLLinkPrefix(this.options.nlLinkPrefix) : null
+      this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null
     }
     this.splitFlowStore?.reset();
     this.splitFlowStore?.getAvailableTerms(this.settingsStore.sparcApi);

package/src/components/SimulatedData.js

@@ -266,7 +266,7 @@ function getHumanData(term, label, dataset, scaffold, simulations) {
         data.actions = {
           search: {
             title: "Explore data",
-            term: "Colon",
+            label: "Colon",
             resource: "https://sparc.science/data?type=dataset&q=colon",
             type: "Search",
             filter: {
@@ -289,7 +289,7 @@ function getHumanData(term, label, dataset, scaffold, simulations) {
           data.actions = {
             search: {
               title: "Explore data",
-              term: "Heart",
+              label: "Heart",
               resource: "https://sparc.science/data?type=dataset&q=colon",
               type: "Search",
               filter: {
@@ -345,7 +345,7 @@ function getRatData(term, label, dataset, scaffold, simulations) {
           data.actions = {
             search: {
               title: "Explore data",
-              term: "Heart",
+              label: "Heart",
               resource: "https://sparc.science/data?type=dataset&q=heart",
               type: "Search",
               filter: {
@@ -597,7 +597,7 @@ function getPigData(term, label, dataset, scaffold, simulations) {
               data.actions = {
                 search: {
                   title: "Explore data",
-                  term: "Heart",
+                  label: "Heart",
                   resource: "https://sparc.science/data?type=dataset&q=colon",
                   type: "Search",
                   filter: {

package/src/components/SplitFlow.vue

@@ -121,14 +121,8 @@ export default {
     actionClick: function (action) {
       if (action) {
         if (action.type == "Search") {
-          if (action.filter) {
-            this.openSearch([action.filter], action.term);
-            Tagging.sendEvent({
-              'event': 'interaction_event',
-              'event_name': 'portal_maps_action_filter',
-              'category': action.term || 'filter',
-              'location': 'map_location_pin'
-            });
+          if (action.nervePath) {
+            this.openSearch([action.filter], action.label);
           } else {
             this.openSearch([], action.term);
             // GA Tagging
@@ -565,7 +559,6 @@ export default {
         PENNSIEVE_API_LOCATION: this.settingsStore.pennsieveApi,
         NL_LINK_PREFIX: this.settingsStore.nlLinkPrefix,
         ROOT_URL: this.settingsStore.rootUrl,
-        FLATMAP_API_LOCATION: this.settingsStore.flatmapAPI
       };
     },
     entries: function() {

package/src/components/viewers/Flatmap.vue

@@ -5,7 +5,7 @@
       :entry="entry.resource"
       @resource-selected="flatmaprResourceSelected(entry.type, $event)"
       @pan-zoom-callback="flatmapPanZoomCallback"
-      :name="entry.resource ? entry.resource : entry.data"
+      :name="entry.resource"
       style="height: 100%; width: 100%"
       :minZoom="entry.minZoom"
       :helpMode="helpMode"
@@ -77,6 +77,7 @@ export default {
     flatmaprResourceSelected: function (type, resource) {
       this.resourceSelected(
         type, resource, (this.$refs.flatmap.viewingMode === "Exploration"));
+
       if (resource.eventType === 'click' && resource.feature.type === 'feature') {
         const eventData = {
           label: resource.label || '',

package/src/components/viewers/MultiFlatmap.vue

@@ -332,7 +332,7 @@ export default {
       }
     },
     getFlatmapImp: function () {
-      if (this.flatmapReady && this.$refs.multiflatmap) {
+      if (this.entry.type === "MultiFlatmap" && this.flatmapReady && this.$refs.multiflatmap) {
         return this.$refs.multiflatmap.getCurrentFlatmap()["mapImp"];
       } else {
         return undefined;
@@ -478,7 +478,7 @@ export default {
     z-index: 1;
     div {
       scale: 0.5;
-      transform: translate(45px, -7px);
+      width: 0;
     }
   }
 }

package/src/components/viewers/Simulation.vue

@@ -1,7 +1,7 @@
 <template>
   <SimulationVuer
     :apiLocation="apiLocation"
-    :id="id"
+    :id="entry.discoverId"
   />
 </template>
 
@@ -13,27 +13,9 @@ import "@abi-software/simulationvuer/dist/style.css";
 
 export default {
   name: "Simulation",
-  data: function() {
-    return {
-      id: undefined,
-    };
-  },
   mixins: [ ContentMixin ],
   components: {
     SimulationVuer,
   },
-  created: function() {
-    if (this.entry) {
-      if (this.entry.discoverId) {
-        this.id = this.entry.discoverId;
-      } else if (this.entry.resource) {
-        if (this.settingsStore.pmrHost) {
-          this.id = this.entry.resource.replace(this.settingsStore.pmrHost, '');
-        } else {
-          this.id = this.entry.resource;
-        }
-      }
-    }
-  }
 };
 </script>

package/src/mixins/ContentMixin.js

@@ -99,41 +99,6 @@ export default {
     searchSuggestions: function () {
       return;
     },
-    getMarkerClickedACtion: function(resource) {
-      let label = this.idNamePair[resource.feature.models];
-      let hardcodedAnnotation = markerZoomLevels.filter(
-        mz => mz.id === resource.feature.models
-      );
-
-      if (this.settingsStore.isFeaturedMarkerIdentifier(resource.feature.id)) {
-        // It is a featured dataset search for DOI.
-        return {
-          type: "Search",
-          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
-        // Keyword searches do not contain labels, so switch to keyword search if no label exists
-        return {
-          type: "Search",
-          term:
-            "http://purl.obolibrary.org/obo/" +
-            resource.feature.models.replace(":", "_"),
-        };
-      } else {
-        // Facet search on anatomy if it is not a keyword search
-        return {
-          type: "Facet",
-          facet: label,
-          facetPropPath: "anatomy.organ.category.name",
-          term: "Anatomical structure",
-        };
-      }
-
-    },
     /**
      * Callback when the vuers emit a selected event.
      */
@@ -143,6 +108,7 @@ export default {
         EventBus.emit("PopoverActionClick", resource);
         return;
       }
+
       let returnedAction = undefined;
       let action = "none";
       let fireResourceSelected = false;
@@ -153,33 +119,56 @@ export default {
         internalName: undefined,
         eventType: undefined,
       };
+
       if (type == "MultiFlatmap" || type == "Flatmap") {
-        const flatmapImp = this.getFlatmapImp();
         result.internalName = this.idNamePair[resource.feature.models];
         if (resource.eventType == "click") {
           result.eventType = "selected";
           if (resource.feature.type == "marker") {
-            returnedAction = this.getMarkerClickedACtion(resource);
+            let label = this.idNamePair[resource.feature.models];
+            let hardcodedAnnotation = markerZoomLevels.filter(
+              mz => mz.id === resource.feature.models
+            );
+
+            if (
+              this.settingsStore.isFeaturedMarkerIdentifier(
+                resource.feature.id
+              )
+            ) {
+              // It is a featured dataset search for DOI.
+              returnedAction = {
+                type: "Search",
+                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
+              // Keyword searches do not contain labels, so switch to keyword search if no label exists
+              returnedAction = {
+                type: "Search",
+                term:
+                  "http://purl.obolibrary.org/obo/" +
+                  resource.feature.models.replace(":", "_"),
+              };
+            } else {
+              // Facet search on anatomy if it is not a keyword search
+              returnedAction = {
+                type: "Facet",
+                facet: label,
+                facetPropPath: "anatomy.organ.category.name",
+                term: "Anatomical structure",
+              };
+            }
+
             fireResourceSelected = true;
             if (type == "MultiFlatmap") {
-              flatmapImp.clearSearchResults();
+              const flatmap =
+                this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
+              flatmap.clearSearchResults();
             }
           } else if (resource.feature.type == "feature") {
-            if (flatmapImp.options && flatmapImp.options.style === 'functional') {
-              if (resource.feature?.label) {
-                const filter = {
-                  facet: "PMR",
-                  term: "Data type",
-                  facetPropPath: "item.types.name",
-                };
-                returnedAction = {
-                  filter: filter,
-                  type: "Search",
-                  term: resource.feature.label,
-                  
-                };
-              }
-            }
             // Do no open scaffold in sync map
             if (this.syncMode) {
               fireResourceSelected = true;

package/src/stores/settings.js

@@ -11,7 +11,6 @@ export const useSettingsStore = defineStore('settings', {
       algoliaKey: undefined,
       algoliaId: undefined,
       pennsieveApi: undefined,
-      pmrHost: "https://models.physiomeproject.org/",
       flatmapAPI: undefined,
       nlLinkPrefix: undefined,
       rootUrl: undefined,
@@ -69,9 +68,6 @@ export const useSettingsStore = defineStore('settings', {
     updateRootUrl(rootUrl) {
       this.rootUrl = rootUrl;
     },
-    updatePmrHost(pmrHost) {
-      this.pmrHost = pmrHost ? pmrHost : "https://models.physiomeproject.org/";
-    },
     updateMarkers(markers) {
       this.markers = markers;
     },