@abi-software/map-side-bar 1.3.27 → 1.3.29-staging

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.6",
+  "version": "1.3.27-staging",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4061,8 +4061,7 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -4517,6 +4516,11 @@
       "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
+    },
     "cssnano": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@@ -7635,6 +7639,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.1.1.tgz",
+      "integrity": "sha512-0cNMnTcUJPxbA6uWmCmjWz4NJRe/0Xfk2NhXCUHjew9qJzFN20krFnsUe7QynwqOwa5m1fZ4UDg0ycKFVC0ccw=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -13536,6 +13545,15 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xss": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
+      "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.27",
+  "version": "1.3.29-staging",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",
@@ -21,7 +21,9 @@
     "@abi-software/svg-sprite": "^0.1.14",
     "algoliasearch": "^4.10.5",
     "element-ui": "^2.13.0",
-    "vue": "^2.6.10"
+    "marked": "^4.1.1",
+    "vue": "^2.6.10",
+    "xss": "^1.0.14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

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

@@ -1,15 +1,15 @@
 <template>
   <div class="context-card-container"  ref="container">
     <div v-show="showContextCard">
-      <div v-show="showDetails" class="hide" @click="showDetails = !showDetails">Hide information panel<i class="el-icon-arrow-up"></i></div>
-      <div v-show="!showDetails" class="hide" @click="showDetails = !showDetails">Show information panel<i class="el-icon-arrow-down"></i></div>
+      <div v-show="showDetails" class="hide" @click="showDetails = !showDetails">Hide information<i class="el-icon-arrow-up"></i></div>
+      <div v-show="!showDetails" class="hide" @click="showDetails = !showDetails">Show information<i class="el-icon-arrow-down"></i></div>
       <el-card v-if="showDetails && Object.keys(contextData).length !== 0" v-loading="loading" class="context-card" >
         <div class="card-left">
           <img :src="banner" class="context-image">
         </div>
         <div class="card-right scrollbar">
           <div class="title">{{contextData.heading}}</div>
-          <div v-html="contextData.description"/>
+          <div v-html="parseMarkdown(contextData.description)"/>
           <br/>
 
           <!-- Show sampeles and views seperately if they do not match -->
@@ -71,6 +71,9 @@ import locale from "element-ui/lib/locale";
 import EventBus from "./EventBus"
 import hardcoded_info from './hardcoded-context-info'
 
+import { marked } from 'marked'
+import xss from 'xss'
+
 locale.use(lang);
 Vue.use(Link);
 Vue.use(Icon);
@@ -140,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)
@@ -160,8 +166,9 @@ export default {
     },
     banner: function(){
       if (this.contextData.banner){
-        this.getFileFromPath(this.contextData.banner) 
-      } else if (this.contextData && this.contextData.views) {
+        console.log('found 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)
         }
@@ -255,6 +262,9 @@ export default {
       return `${this.envVars.ROOT_URL}/file/${sample.discoverId}/${sample.version}?path=${this.processPathForUrl(sample.path)}`
 
     },
+    parseMarkdown(markdown){
+      return xss(marked.parse(markdown))
+    },
     openViewFile: function(view){
       // note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)
       this.entry.viewUrl = `${this.envVars.API_LOCATION}s3-resource/${this.entry.discoverId}/${this.entry.version}/${view.path}`

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/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.')
+        }
+      )
+    },
+  },
+}