@abi-software/map-side-bar 1.3.35 → 1.3.36-staging

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.34",
+  "version": "1.3.28",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

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

package/src/App.vue

@@ -132,10 +132,7 @@ export default {
     neuronSearch: function(){
       this.$refs.sideBar.openNeuronSearch('ilxtr:neuron-type-keast-10')
     }
-  },
-  mounted: function() {
-    console.log("mounted app")
-  },
+  }
 }
 </script>
 

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 ? res.pennsieve.updatedAt : undefined,
-        publishDate: res.pennsieve ? res.pennsieve.publishDate : undefined,
+        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 ? r.pennsieve.identifier : r.objectID),
+            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/algolia/utils.js

@@ -8,16 +8,16 @@ export const facetPropPathMapping = {
   'item.modalities.keyword' : 'Experimental Approach',
   'attributes.subject.sex.value' : 'Sex',
   'attributes.subject.ageCategory.value' : 'Age Categories',
-  'item.types.name' : 'Data type',
+  'item.keywords.keyword' : 'Keywords'
 }
 
 // Same as above, but these show on the sidebar filters
 export const shownFilters = {
   'anatomy.organ.name' : 'Anatomical Structure',
   'organisms.primary.species.name' : 'Species',
+  'item.modalities.keyword' : 'Experimental Approach',
   'attributes.subject.sex.value' : 'Sex',
   'attributes.subject.ageCategory.value' : 'Age Categories',
-  'item.types.name' : 'Data type',
 }
 
 /* Returns filter for searching algolia. All facets of the same category are joined with OR,

package/src/components/BadgesGroup.vue

@@ -53,8 +53,7 @@ export default {
   },
   data: function () {
     return {
-      //Always start with 1 image - the dataset thumbnail itself
-      categories: { "All": {size: 1}, "Dataset": {size: 1} },
+      categories: { "All": {size: 1} },
       active: "All"
     };
   },
@@ -83,7 +82,7 @@ export default {
       immediate: true,
       handler: function (biolucidaData) {
         if ("dataset_images" in biolucidaData) {
-          this.addToCategories(biolucidaData["dataset_images"], "Images");
+          this.addToCategories(biolucidaData["dataset_images"], "Biolucida Images");
         }
       }
     },

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,
@@ -86,8 +86,7 @@ export default {
       ro: null,
       maxWidth: 3,
       items: {
-        //Use the Images instead for Biolucida Images
-        //"Biolucida Images": [],
+        "Biolucida Images": [],
         'Dataset': [],
         'Images': [],
         'Scaffolds': [],
@@ -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]}`
       }
     }
@@ -411,7 +405,7 @@ export default {
               };
               return {
                 id: dataset_image.image_id,
-                title: `Image`,
+                title: `Biolucida Image`,
                 type: "Image",
                 thumbnail: thumbnailURL,
                 userData: action,
@@ -421,7 +415,7 @@ export default {
             })
           );
         }
-        this.items['Images'] = items;
+        this.items['Biolucida Images'] = items;
       },
     },
   },

package/src/components/SearchFilters.vue

@@ -178,6 +178,7 @@ export default {
                   this.createCascaderItemValue(facet.label, facetItem.label);
               });
             });
+            this.createDataTypeFacet();
           })
           .finally(() => {
             resolve();
@@ -289,6 +290,28 @@ export default {
       }
       return event;
     },
+    createDataTypeFacet: function(){
+      let dataFacet = {...this.facets[2]} // copy the 'Experiemental approach' facet
+      let count = this.facets.at(-1).id // get the last id count
+
+      // Step through the children that are valid data types, switch thier values 
+      let newChildren = dataFacet.children.filter( el=> {
+        if (el.label === 'Scaffold' || el.label === 'Simulation' || el.label === 'Show all'){
+          el.key = el.label
+          el.id = count
+          el.value = el.value.replace('Experimental approach', 'Data type')
+          count++
+          return el
+        }
+      })
+      dataFacet.id = count
+      dataFacet.key = 'Data type'
+      // Add 'duplicate' so that the key is unique. This is removed in the cascade event for filtering
+      dataFacet.value += 'duplicate' 
+      dataFacet.children = newChildren
+      dataFacet.label = 'Data type'
+      this.facets.push(dataFacet)
+    },
     cascadeExpandChange: function (event) {
       //work around as the expand item may change on modifying the cascade props
       this.__expandItem__ = event;

package/src/components/SideBar.vue

@@ -52,6 +52,23 @@ locale.use(lang);
 Vue.use(Drawer);
 Vue.use(Icon);
 
+var initial_state = {
+      searchInput: "",
+      lastSearch: "",
+      results: [],
+      drawerOpen: false,
+      numberOfHits: 0,
+      filter:{},
+      filterFacet: undefined,
+      loadingCards: false,
+      numberPerPage: 10,
+      page: 1,
+      pageModel: 1,
+      start: 0,
+      hasSearched: false,
+      sciCrunchError: false
+}
+
 export default {
   components: {SidebarContent, Tabs },
   name: "SideBar",
@@ -60,6 +77,10 @@ export default {
       type: Boolean,
       default: false
     },
+    entry: {
+      type: Object,
+      default: () => (initial_state)
+    },
     envVars: {
       type: Object,
       default: () => {}
@@ -79,7 +100,7 @@ export default {
   },
   data: function () {
     return {
-      drawerOpen: false,
+      ...this.entry,
     }
   },
   methods: {

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,
@@ -380,7 +383,7 @@ export default {
     // initialise algolia
     this.algoliaClient = new AlgoliaClient(this.envVars.ALGOLIA_ID, this.envVars.ALGOLIA_KEY, this.envVars.PENNSIEVE_API_LOCATION);
     this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);
-    this.openSearch(this.filter, this.searchInput);
+    this.openSearch(undefined, '');
   },
   created: function() {
     //Create non-reactive local variables

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

package/delte.json

@@ -1,30 +0,0 @@
-{
-    "description": "This dataset contains single cell scale anatomical map of the rat intrinsic cardiac nervous system (ICNS) across four male and three female hearts. These cell clusters can be seen by the yellow data points on the image as well as spherical markers on the 3D heart scaffold. The dataset provides an integrative framework to visualise the spatial distribution of ICNS across different hearts.",
-    "heading": "Mapped ICN samples",
-    "id": "sparc.science.context_data",
-    "samples": [
-        {
-            "annotation": "",
-            "description": "Spatial location of isolated ICNS mapped onto a generic heart scaffold",
-            "doi": "",
-            "heading": "ICNS from subject M54-8",
-            "id": "Sample 1",
-            "path": "",
-            "view": "View 1",
-            "color": "#FFFF00",
-            "thumbnail": "https://raw.githubusercontent.com/ABI-Software/map-sidebar/main/assets/temp-pics/orange.png"
-        },
-        {
-            "annotation": "",
-            "description": "Spatial location of isolated ICNS mapped onto a generic heart scaffold",
-            "doi": "",
-            "heading": "ICNS from subject M54-5",
-            "id": "Sample 2",
-            "path": "",
-            "view": "View 2",
-            "color": "#FFA500",
-            "thumbnail": "https://raw.githubusercontent.com/ABI-Software/map-sidebar/main/assets/temp-pics/teal.png"
-        }
-    ],
-    "version": "0.1.0"
-}