@abi-software/map-side-bar 1.3.18 → 1.3.21

package/package.json

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

package/src/App.vue

@@ -114,7 +114,7 @@ export default {
       this.$refs.sideBar.addFilter({facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
     },
     addStomach: function(){
-      this.$refs.sideBar.addFilter({facet: 'Stomach', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
+      this.$refs.sideBar.addFilter({facet: 'Stomach', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: false})
     },
     addInvalidTerm: function(){
       this.$refs.sideBar.addFilter({facet: 'Invalid', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})

package/src/components/ContextCard.vue

@@ -48,7 +48,7 @@
                 <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" :key="i+'_2'"/>
-              <a v-bind:key="i+'_5'" v-if="sampleDetails[i]" :href="generateFileLink(samplesMatching(view.id).path)" target="_blank">View Source</a>
+              <a v-bind:key="i+'_5'" v-if="sampleDetails[i]" :href="generateFileLink(samplesMatching(view.id))" target="_blank">View Source</a>
               <div :key="i" class="padding"/>
 
               <!-- Extra padding if sample details is open -->
@@ -79,6 +79,26 @@ Vue.use(Button);
 Vue.use(Select);
 Vue.use(Input);
 
+const addFilesToPathIfMissing = function(path){
+  if (!path.includes('files')){
+    return 'files/' + path
+  } else {
+    return path
+  }
+}
+
+const convertBackslashToForwardSlash = function(path){
+  path = path.replaceAll('\\','/')
+  path = path.replaceAll('\\\\', '/')
+  return path
+}
+
+// const switchPathToDirectory = function(path){
+//   let newPath = path.split('/')
+//   newPath.pop()
+//   return newPath.join('/')
+// }
+
 
 export default {
   name: "contextCard",
@@ -88,6 +108,7 @@ export default {
      * the required viewing.
      */
     entry: Object,
+    envVars: Object,
   },
   data: function () {
     return {
@@ -162,9 +183,11 @@ export default {
         .then((data) => {
           this.contextData = data
           this.loading = false
+          this.addDiscoverIdsToContextData() 
         })
-        .catch(() => {
+        .catch((err) => {
           //set defaults if we hit an error
+          console.error('caught error!', err)
           this.thumbnail = require('@/../assets/missing-image.svg')
           this.discoverId = undefined
           this.loading = false
@@ -192,15 +215,39 @@ export default {
         return path
       }
       path = this.removeDoubleFilesPath(path)
-      return  `${this.entry.apiLocation}s3-resource/${this.entry.discoverId}/${this.entry.version}/files/${path}`
+      return  `${this.envVars.API_LOCATION}s3-resource/${this.entry.discoverId}/${this.entry.version}/files/${path}`
     },
-    generateFileLink(path){
-      return `https://sparc.science/file/${this.entry.discoverId}/${this.entry.version}?path=${encodeURI(path)}`
+    //  This is used later when generateing links to the resource on sparc.science (see generateFileLink)
+    addDiscoverIdsToContextData(){
+      this.contextData.samples.forEach((sample, i)=>{
+        if (sample && sample.doi && sample.doi !== ""){
+          fetch(`${this.envVars.PENNSIEVE_API_LOCATION}/discover/datasets/doi/${this.splitDoiFromUrl(sample.doi)}`)
+          .then((response) => response.json())
+          .then((data) => {
+            this.contextData.samples[i].discoverId = data.id
+            this.contextData.samples[i].version = data.version
+          })
+        } else {
+            this.contextData.samples[i].discoverId = this.entry.discoverId
+            this.contextData.samples[i].version = this.entry.version
+        }
+      })
+    },
+    processPathForUrl(path){
+      path = convertBackslashToForwardSlash(path)
+      path = addFilesToPathIfMissing(path)
+      return encodeURI(path)
+    },
+    splitDoiFromUrl(url){
+      return url.split('https://doi.org/').pop()
+    },
+    generateFileLink(sample){
+      return `${this.envVars.ROOT_URL}/file/${sample.discoverId}/${sample.version}?path=${this.processPathForUrl(sample.path)}`
 
     },
     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.entry.apiLocation}s3-resource/${this.entry.discoverId}/${this.entry.version}/${view.path}`
+      this.entry.viewUrl = `${this.envVars.API_LOCATION}s3-resource/${this.entry.discoverId}/${this.entry.version}/${view.path}`
       this.entry.type = 'Scaffold View'
       EventBus.$emit("PopoverActionClick", this.entry)
     }
@@ -237,7 +284,7 @@ export default {
 
 .view-image {
   width: 34px;
-  height: auto;
+  height: 34px;
   flex: 1;
   margin-right: 4px;
 }

package/src/components/ImageGallery.vue

@@ -215,8 +215,9 @@ export default {
     },
     createScaffoldItems: function () {
       if (this.entry.scaffolds) {
+        window.entry = this.entry
         let index = 0;
-        this.entry.scaffolds.forEach((scaffold) => {
+        this.entry.scaffolds.forEach((scaffold, i) => {
           const filePath = scaffold.dataset.path;
           const id = scaffold.identifier;
           const thumbnail = this.getThumbnailForScaffold(
@@ -236,6 +237,7 @@ export default {
             });
             mimetype = thumbnail.mimetype.name;
           }
+          let contextIndex = this.entry.contextualInformation.length > 0 ? i : 0
           let action = {
             label: capitalise(this.label),
             resource: `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${filePath}`,
@@ -245,7 +247,7 @@ export default {
             apiLocation: this.envVars.API_LOCATION,
             version: this.datasetVersion,
             banner: this.datasetThumbnail,
-            contextCardUrl: this.entry.contextualInformation ? `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${this.entry.contextualInformation}` : undefined,
+            contextCardUrl: this.entry.contextualInformation[contextIndex] ? `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${this.entry.contextualInformation[contextIndex]}` : undefined,
           };
           this.items['Scaffolds'].push({
             id,

package/src/components/SearchFilters.vue

@@ -447,6 +447,7 @@ export default {
       this.checkShowAllBoxes();
       this.setCascader(this.entry.filterFacets);
       this.makeCascadeLabelsClickable();
+      this.$emit("cascaderReady");
     });
   },
 };

package/src/components/SidebarContent.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card :body-style="bodyStyle" class="content-card">
     <div slot="header" class="header">
-      <context-card v-if="contextCardEntry && contextCardEnabled" :entry="contextCardEntry" />
+      <context-card v-if="contextCardEntry && contextCardEnabled" :entry="contextCardEntry" :envVars="envVars"/>
       <el-input
         class="search-input"
         placeholder="Search"
@@ -20,6 +20,7 @@
       @filterResults="filterUpdate"
       @numberPerPage="numberPerPageUpdate"
       @loading="filtersLoading"
+      @cascaderReady="cascaderReady"
     ></SearchFilters>
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
       <div
@@ -125,10 +126,6 @@ export default {
       type: Object,
       default: () => {}
     },
-    firstSearch: {
-      type: String,
-      default: ""
-    }
   },
   data: function() {
     return {
@@ -137,7 +134,8 @@ export default {
         flex: "1 1 auto",
         "flex-flow": "column",
         display: "flex"
-      }
+      },
+      cascaderIsReady: false,
     };
   },
   computed: {
@@ -163,26 +161,48 @@ export default {
     openSearch: function(filter, search='') {
       this.searchInput = search;
       this.resetPageNavigation();
-      this.filter = this.$refs.filtersRef.getValidatedFilters(filter);
-      //Facets provided but cannot find at least one valid
-      //facet. Tell the users the search is invalid and reset
-      //facets check boxes.
-      if ((filter && filter.length > 0) && 
-        (this.filter && this.filter.length === 0)) {
-        this.$refs.filtersRef.checkShowAllBoxes();
-        this.resetSearch();
-      } else if (this.filter) {
-        this.searchAlgolia(this.filter, search);
-        this.$refs.filtersRef.setCascader(this.filter);
+      //Proceed normally if cascader is ready
+      if (this.cascaderIsReady) {
+        this.filter = this.$refs.filtersRef.getValidatedFilters(filter);
+        //Facets provided but cannot find at least one valid
+        //facet. Tell the users the search is invalid and reset
+        //facets check boxes.
+        if ((filter && filter.length > 0) && 
+          (this.filter && this.filter.length === 0)) {
+          this.$refs.filtersRef.checkShowAllBoxes();
+          this.resetSearch();
+        } else if (this.filter) {
+          this.searchAlgolia(this.filter, search);
+          this.$refs.filtersRef.setCascader(this.filter);
+        }
+      } else {
+        //cascader is not ready, perform search if no filter is set,
+        //otherwise waith for cascader to be ready
+        this.filter = filter;
+        if (!filter || filter.length == 0) {
+          this.searchAlgolia(this.filter, search);
+        }
       }
     },
     addFilter: function(filter) {
-      this.resetPageNavigation();
-      if (filter) {
-        if (this.$refs.filtersRef.addFilter(filter))
-          this.$refs.filtersRef.initiateSearch();
+      if (this.cascaderIsReady) {
+        this.resetPageNavigation();
+        if (filter) {
+          if (this.$refs.filtersRef.addFilter(filter))
+            this.$refs.filtersRef.initiateSearch();
+        }
+      } else {
+        if (Array.isArray(this.filter)) {
+          this.filter.push(filter);
+        } else {
+          this.filter = [filter];
+        }
       }
     },
+    cascaderReady: function() {
+      this.cascaderIsReady = true;
+      this.openSearch(this.filter, this.searchInput);
+    },
     clearSearchClicked: function() {
       this.searchInput = "";
       this.resetPageNavigation();
@@ -360,13 +380,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);
-
-    // temporarily disable flatmap search since there are no datasets
-    if (this.firstSearch === "Flatmap" || this.firstSearch === "flatmap") {
-      this.openSearch(undefined, '')
-    } else {
-      this.openSearch(undefined, '');
-    }
+    this.openSearch(undefined, '');
   },
   created: function() {
     //Create non-reactive local variables

package/src/components/delte.json

@@ -0,0 +1,27 @@
+{
+    "description": "Mean luminal pressure (represented by a color field with red as high pressure and blue as low pressure) recorded from the proximal, transverse and distal sections of the pig colon are mapped on the scaffold. \n\nBaseline data was collected for 30min, followed by 15min of stimulation and 30min of post-stimulation.",
+    "heading": "Direct proximal colon stimulation",
+    "id": "sparc.science.context_data",
+    "samples": [
+        {
+            "annotation": "",
+            "description": "Manometry data recorded from pigs under direct proximal colon stimulation.",
+            "doi": "https://doi.org/10.26275/up27-ibcr",
+            "heading": "Proximal direct stimulation samples",
+            "id": "Sample 1",
+            "path": "derivative\\stim_proximal-colon_manometry.csv",
+            "view": "View 1"
+        }
+    ],
+    "version": "0.1.0",
+    "views": [
+        {
+            "annotation": "--",
+            "description": "Sections of pig colon scaffold with mapped manometry data where the data are collected from. ",
+            "id": "View 1",
+            "path": "colon_Layout1_view.json",
+            "sample": "Sample 1",
+            "thumbnail": "derivative\\pig_colon_main_thumbnail.jpeg"
+        }
+    ]
+}