@abi-software/map-side-bar 1.3.31 → 1.3.32-staging

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.31",
+  "version": "1.3.32-staging",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",

package/src/algolia/algolia.js

@@ -79,10 +79,10 @@ export class AlgoliaClient {
       newResult = { ...res }
       newResult = {
         doi: res.item.curie.split(':')[1],
-        name: res.item.name,
-        description: res.item.description,
-        updated: res.pennsieve.updatedAt,
-        publishDate: res.pennsieve.publishDate,
+        name: res.item.dataset.name,
+        description: res.item.dataset.description,
+        updated: res.pennsieve ? res.pennsieve.updatedAt : 'Unkown',
+        publishDate: res.pennsieve? res.pennsieve.publishDate : 'Uknown',
         datasetId: res.objectID,
         detailsReady: false
       }
@@ -133,20 +133,20 @@ export class AlgoliaClient {
           page: page - 1,
           filters: filter,
           attributesToHighlight: [],
-          attributesToRetrieve: [
-            'pennsieve.publishDate',
-            'pennsieve.updatedAt',
-            'item.curie',
-            'item.name',
-            'item.description',
-            'objectID',
-          ],
+          // attributesToRetrieve: [
+          //   'pennsieve.publishDate',
+          //   'pennsieve.updatedAt',
+          //   'item.curie',
+          //   'item.name',
+          //   'item.description',
+          //   'objectID',
+          // ],
         })
         .then(response => {
           let searchData = {
             items: this._processResultsForCards(response.hits),
             total: response.nbHits,
-            discoverIds: response.hits.map(r => r.pennsieve.identifier),
+            discoverIds: response.hits.map(r => r.pennsieve ? r.pennsieve.identifier : undefined),
             dois: response.hits.map(r => r.item.curie.split(':')[1])
           }
           resolve(searchData)

package/src/components/ContextCard.vue

@@ -143,8 +143,11 @@ export default {
   computed: {
     samplesUnderViews: function(){
       if (this.contextData){
+        if (!this.contextData.views || !this.contextData.samples){
+          return false
+        }
         if (this.contextData.samplesUnderViews){
-          return true
+          return this.contextData.samplesUnderViews
         } else {
           let viewId = this.contextData.views.map(v=>v.id)
           let samplesView = this.contextData.samples.map(s=>s.view)

package/src/components/DatasetCard.vue

@@ -4,8 +4,8 @@
       <div class="seperator-path"></div>
       <div v-loading="loading" class="card" >
         <span class="card-left">
-          <image-gallery v-if="!loading && discoverId" 
-            :datasetId="discoverId"
+          <image-gallery v-if="!loading" 
+            :datasetId="String(discoverId)"
             :datasetVersion="version"
             :entry="entry"
             :envVars="envVars"
@@ -172,9 +172,11 @@ export default {
     splitDOI: function(doi){
       return [doi.split('/')[doi.split('/').length-2], doi.split('/')[doi.split('/').length-1]]
     },
-    getBanner: function () {
-      // Only load banner if card has changed
-      if (this.lastDoi !== this.entry.doi) {
+    getBanner: function () { // NOTE! This getBanner uses the pennsieve api to retrive the banner. Only use for curation!
+      if (this.entry.datasetId.length > 4){
+        this.loading = true
+        this.getPennsieveBanner()
+      } else if (this.lastDoi !== this.entry.doi) {
         this.lastDoi = this.entry.doi
         this.loading = true
         let doi = this.splitDOI(this.entry.doi)
@@ -191,7 +193,7 @@ export default {
             this.discoverId = data.id
             this.version = data.version
             this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
-            this.getBiolucidaInfo(this.discoverId)
+            if (this.discoverId.length < 5) this.getBiolucidaInfo(this.discoverId)
             this.loading = false
           })
           .catch(() => {
@@ -200,9 +202,67 @@ export default {
             this.discoverId = Number(this.entry.datasetId)
             this.loading = false
           });
-      }
+      } 
+    },
+    getPennsieveBanner: function(){
+      // authenticate with pennsieve
+      fetch('https://cognito-idp.us-east-1.amazonaws.com/', {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json, text/plain, */*',
+          'Content-Type': 'application/x-amz-json-1.1',
+          'X-Amz-Target': 'AWSCognitoIdentityProviderService.InitiateAuth',
+          'X-Amz-User-Agent': 'aws-amplify/0.1.x js',
+        },
+        body: JSON.stringify({"AuthFlow":"USER_PASSWORD_AUTH","ClientId":"670mo7si81pcc3sfub7o1914d8","AuthParameters":{"USERNAME":"jessekhorasanee@gmail.com","PASSWORD":"Asameswayhey@666","DEVICE_KEY":"us-east-1_0d4e8de7-6079-470d-bedd-62043ba70f7e"},"ClientMetadata":{}})
+      }).then(res => res.json())
+        .then(res => {
+            console.log(res)
+            let token = res.AuthenticationResult.AccessToken
+            let proxy = `${this.envVars.API_LOCATION}proxy/?url=` // set up proxy 
+
+            // call pennsieve api via proxy
+            fetch(`${proxy}https://api.pennsieve.io/datasets/N%3Adataset%3A${this.entry.datasetId}/banner?api_key=${token}`
+            ).then(res=>res.json()).then(res=>{
+              console.log('success!')
+              this.thumbnail = res.banner
+              this.discoverId = this.entry.datasetId
+              this.loading = false
+            })
+        })
 
     },
+    // getBanner: function () {
+    //   // Only load banner if card has changed
+    //   if (this.lastDoi !== this.entry.doi) {
+    //     this.lastDoi = this.entry.doi
+    //     this.loading = true
+    //     let doi = this.splitDOI(this.entry.doi)
+    //     fetch(`${this.envVars.PENNSIEVE_API_LOCATION}/discover/datasets/doi/${doi[0]}/${doi[1]}`)
+    //       .then((response) =>{
+    //         if (!response.ok){
+    //           throw Error(response.statusText)
+    //         } else {
+    //           return response.json()
+    //         }
+    //       })
+    //       .then((data) => {
+    //         this.thumbnail = data.banner
+    //         this.discoverId = data.id
+    //         this.version = data.version
+    //         this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
+    //         this.getBiolucidaInfo(this.discoverId)
+    //         this.loading = false
+    //       })
+    //       .catch(() => {
+    //         //set defaults if we hit an error
+    //         this.thumbnail = require('@/../assets/missing-image.svg')
+    //         this.discoverId = Number(this.entry.datasetId)
+    //         this.loading = false
+    //       });
+    //   }
+
+    // },
     lastName: function(fullName){
       return fullName.split(',')[0]
     },

package/src/components/ImageGallery.vue

@@ -28,7 +28,7 @@ const capitalise = function (string) {
   return string.replace(/\b\w/g, (v) => v.toUpperCase());
 };
 
-import GalleryHelper from "@abi-software/gallery/src/mixins/GalleryHelpers";
+import GalleryHelper from "../mixins/GalleryHelpers";
 import Gallery from "@abi-software/gallery";
 import "@abi-software/gallery/dist/gallery.css";
 
@@ -58,8 +58,8 @@ export default {
       },
     },
     datasetId: {
-      type: Number,
-      default: -1,
+      type: String,
+      default: "",
     },
     datasetVersion: {
       type: Number,
@@ -215,7 +215,6 @@ export default {
     },
     createScaffoldItems: function () {
       if (this.entry.scaffolds) {
-        window.entry = this.entry
         let index = 0;
         this.entry.scaffolds.forEach((scaffold, i) => {
           const filePath = scaffold.dataset.path;
@@ -229,12 +228,7 @@ export default {
           let mimetype = '';
           let thumbnailURL = undefined;
           if (thumbnail) {
-            thumbnailURL = this.getImageURLFromS3(this.envVars.API_LOCATION, {
-              id,
-              datasetId: this.datasetId,
-              datasetVersion: this.datasetVersion,
-              file_path: thumbnail.dataset.path,
-            });
+            thumbnailURL = `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${filePath}`
             mimetype = thumbnail.mimetype.name;
           }
           let action = {
@@ -350,7 +344,7 @@ export default {
         return undefined
       } else {
         // The line below checks if there is a context file for each scaffold. If there is not, we use the first context card for each scaffold.
-        let contextIndex = this.entry['abi-contextual-information'].length == this.entry.scaffolds.length ? scaffoldIndex : 0
+        let contextIndex = this.entry.contextualInformation.length == this.entry.scaffolds.length ? scaffoldIndex : 0
         return `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${this.entry.contextualInformation[contextIndex]}`
       }
     }

package/src/components/SideBar.vue

@@ -185,26 +185,25 @@ export default {
   top: calc(50vh - 80px);
   right: 0px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px #e4e7ed;
-  background-color: #F7FAFF;
+  border: solid 1px #8300BF;
+  background-color: #f9f2fc;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   pointer-events: auto;
 }
 
-.el-icon-arrow-left{
-  font-size: 20px;
-  padding-top: 8px;
-  color: #292b66;
-}
-
-.el-icon-arrow-right{
-  font-size: 20px;
-  padding-top: 8px;
-  color: #292b66;
+.el-icon-arrow-left,
+.el-icon-arrow-right
+{
+  font-weight: 600;
+  margin-top: 12px;
+  color: #8300BF;
   cursor: pointer;
   pointer-events: auto;
+  transform: scaleY(2.0);
+  text-align: center;
+  vertical-align: middle;
 }
 
 .close-tab{
@@ -215,9 +214,8 @@ export default {
   z-index: 8;
   margin-top: calc(50vh - 80px);
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px #e4e7ed;
-  border-right: 0;
-  background-color: #F7FAFF;
+  border: solid 1px #8300BF; 
+  background-color: #f9f2fc;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;

package/src/components/SidebarContent.vue

@@ -311,9 +311,12 @@ export default {
       }
       data.results.forEach(element => {
         // match the scicrunch result with algolia result
-        let i = this.results.findIndex(res => element.doi ? element.doi.includes(res.doi) : false )
+        let i = this.results.findIndex(res=> (res.datasetId === element.dataset_identifier) || (res.identifier === element.dataset_identifier))
+        console.log('i: ', i)
+        let name = this.results[i].name
         // Assign scicrunch results to the object
         Object.assign(this.results[i], element)
+        this.results[i].name = name
         // Assign the attributes that need some processing
         Object.assign(this.results[i],{
           numberSamples: element.sampleSize
@@ -322,8 +325,8 @@ export default {
           numberSubjects: element.subjectSize
             ? parseInt(element.subjectSize)
             : 0,
-          updated: (element.updated && element.updated.length) > 0 ? element.updated[0].timestamp.split("T")[0] : "",
-          url: element.uri[0],
+          updated: element.updated ? element.updated[0].timestamp.split("T")[0] : undefined,
+          url: element.uri? element.uri[0] : undefined,
           datasetId: element.dataset_identifier,
           datasetRevision: element.dataset_revision,
           datasetVersion: element.dataset_version,

package/src/mixins/GalleryHelpers.js

@@ -0,0 +1,104 @@
+import axios from 'axios'
+
+export default {
+  //this mixin is not used by this code base but it can be used by other
+  //projects to get a handle to various resources
+  data() {
+    return {
+      defaultImg: require('../../assets/logo-sparc-wave-primary.svg'),
+    }
+  },
+  methods: {
+    async getRequest(url, params, timeout) {
+      return await axios({
+        method: 'get',
+        url,
+        params,
+        timeout,
+      })
+    },
+    /**
+     * Returns a file path for S3.
+     * @param {String} dataset_id dataset id.
+     * @param {String} dataset_version dataset version.
+     * @param {String} file_path file path.
+     * @returns {String} full path to S3 file.
+     */
+    getS3FilePath(dataset_id, dataset_version, file_path) {
+      const encoded_file_path = encodeURIComponent(file_path)
+      return `${dataset_id}/${dataset_version}/files/${encoded_file_path}`
+    },
+    /**
+     * Find data path in the array that matches the provide path
+     */
+    findEntryWithPathInArray(array, path) {
+      if (path && array) {
+        for (let i = 0; i < array.length; i++) {
+          if (path === array[i].dataset.path) return array[i]
+        }
+      }
+      return undefined
+    },
+    getThumbnailForPlot(plot, thumbnails) {
+      if (thumbnails && plot) {
+        return this.findEntryWithPathInArray(thumbnails, plot.datacite.isSourceOf.path[0])
+      }
+      return undefined
+    },
+    /**
+     * Use the scaffoldViews to help with finding the correct thumbnails.
+     * Use the index if the workflow stated above fails.
+     */
+    getThumbnailForScaffold(scaffold, scaffoldViews, thumbnails, index) {
+      if (thumbnails && thumbnails.length > 0) {
+        let thumbnail = undefined
+        if (scaffold && scaffoldViews) {
+          const view = this.findEntryWithPathInArray(scaffoldViews, scaffold.datacite.isSourceOf.path[0])
+          if (view) {
+            thumbnail = this.findEntryWithPathInArray(thumbnails, view.datacite.isSourceOf.path[0])
+          }
+        }
+        if (thumbnail) {
+          return thumbnail
+        } else if (index < thumbnails.length) {
+          return thumbnails[index]
+        }
+      }
+      return undefined
+    },
+    getImageURLFromS3(apiEndpoint, info) {
+      return `${apiEndpoint}/s3-resource/${info.datasetId}/${info.datasetVersion}/files/${info.file_path}?encodeBase64=true`
+    },
+    getSegmentationThumbnailURL(apiEndpoint, info) {
+      let endpoint = `${apiEndpoint}/thumbnail/neurolucida`
+      endpoint = endpoint + `?datasetId=${info.datasetId}`
+      endpoint = endpoint + `&version=${info.datasetVersion}`
+      endpoint = endpoint + `&path=files/${info.segmentationFilePath}`
+      return endpoint
+    },
+    getThumbnailURLFromBiolucida(apiEndpoint, info) {
+      return `${apiEndpoint}/thumbnail/${info.id}`
+    },
+    getImageInfoFromBiolucida(apiEndpoint, items, info) {
+      const endpoint = `${apiEndpoint}/image/${info.id}`
+      const params = {}
+      this.getRequest(endpoint, params, 20000).then(
+        (response) => {
+          let item = items.find((x) => x.id === info.id)
+          const name = response.name
+          if (name) {
+            item.title = name
+          }
+        },
+        (reason) => {
+          if (reason.message.includes('timeout') && reason.message.includes('exceeded') && info.fetchAttempts < 3) {
+            info.fetchAttempts += 1
+            this.getImageInfoFromBiolucida(apiEndpoint, items, info)
+          }
+
+          return Promise.reject('Maximum iterations reached.')
+        }
+      )
+    },
+  },
+}