@abi-software/mapintegratedvuer 1.12.1 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.12.1",
+  "version": "1.12.2",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -52,11 +52,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.11.1",
-    "@abi-software/map-side-bar": "2.10.2",
-    "@abi-software/map-utilities": "1.7.0",
+    "@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.2",
+    "@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.2",

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" @copied="onCopied" theme="light" />
+        <CopyToClipboard :content="copyContent" @copied="onCopied" theme="light" />
       </div>
     </div>
   </div>
@@ -73,11 +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'
@@ -124,6 +151,11 @@ export default {
       showContextCard: true,
       sampleDetails: {},
       loading: false,
+      loadingOriginalSource: true,
+      originalSource: [],
+      flatmapSource: [],
+      activeName: "",
+      copyContent: "",
     };
   },
   watch: {
@@ -151,6 +183,10 @@ export default {
     }
   },
   computed: {
+    ...mapStores(useSettingsStore),
+    flatmapAPI: function() {
+      return this.settingsStore.flatmapAPI;
+    },
     samplesUnderViews: function(){
       if (this.contextData){
         if (this.contextData.samplesUnderViews){
@@ -180,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>
@@ -194,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 = [];
@@ -250,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]
@@ -280,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
         });
     },
@@ -336,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;
     },
@@ -350,6 +427,47 @@ export default {
       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;
@@ -361,6 +479,10 @@ export default {
         'dataset_id': discoverId ? discoverId + '' : '',
       });
     }
+  },
+  mounted: function() {
+    this.copyContent = this.updateCopyContent()
+    this.getOriginalSource()
   }
 };
 </script>
@@ -506,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/FlatmapContextCard.vue

@@ -65,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";
@@ -84,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
         }

package/src/components/SplitFlow.vue

@@ -845,6 +845,9 @@ export default {
     this._externalStateSet = false;
   },
   mounted: function () {
+    EventBus.on("CreateNewEntry", newView => {
+      this.createNewEntry(newView);
+    });
     EventBus.on("RemoveEntryRequest", id => {
       this.removeEntry(id);
     });

package/src/components.d.ts

@@ -18,6 +18,8 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']