@abi-software/map-side-bar 1.3.17 → 1.3.20

package/package.json

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

package/src/App.vue

@@ -3,9 +3,10 @@
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
     Click arrow to open sidebar
-    <el-button @click="openSearch">search 'heart' from refs</el-button>
+    <el-button @click="openSearch">search Uberon from refs</el-button>
     <el-button @click="singleFacets">Add heart to Filter</el-button>
-     <el-button @click="addStomach">Add stomach to Filter</el-button>
+    <el-button @click="addStomach">Add stomach to Filter</el-button>
+    <el-button @click="AddInvalidTerm">Add invalid term to Filter</el-button>
     <el-button @click="multiFacets">multiple facets</el-button>
     <el-button @click="neuronSearch">open neuron search</el-button>
     <el-button @click="keywordSearch">keyword search</el-button>
@@ -113,10 +114,14 @@ 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})
     },
     multiFacets: function(){
-      this.$refs.sideBar.openSearch([{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}], '')
+      this.$refs.sideBar.openSearch([{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'},
+        {facet: 'Not correct', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}], '')
     },
     keywordSearch: function(){
       this.$refs.sideBar.addFilter({type: 'Facet', label: undefined, facet: '3d model', facetPropPath: 'item.keywords.keyword', term: 'Keywords', 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/SearchFilters.vue

@@ -178,7 +178,7 @@ export default {
                   this.createCascaderItemValue(facet.label, facetItem.label);
               });
             });
-            this.createDataTypeFacet()
+            this.createDataTypeFacet();
           })
           .finally(() => {
             resolve();
@@ -225,7 +225,7 @@ export default {
         this.makeCascadeLabelsClickable();
       }
     },
-    // showAllEventModifier:  Modifies a cascade event to unlick all selections in category if "show all" is clicked. Also unchecks "Show all" if any secection is clicked
+    // showAllEventModifier:  Modifies a cascade event to unclick all selections in category if "show all" is clicked. Also unchecks "Show all" if any secection is clicked
     // *NOTE* Does NOT remove 'Show all' selections from showing in 'cascadeSelected'
     showAllEventModifier: function (event) {
       // check if show all is in the cascader checked option list
@@ -363,13 +363,13 @@ export default {
     addFilter: function (filter) {
       //Do not set the value unless it is ready
       if (this.cascaderIsReady && filter) {
-        this.cascadeSelected.filter(f=>f.term != filter.term)
-        this.cascadeSelected.push([filter.facetPropPath, this.createCascaderItemValue(filter.term, filter.facet), filter.AND])
-
-        this.cascadeSelectedWithBoolean.push([filter.facetPropPath, this.createCascaderItemValue(filter.term, filter.facet), filter.AND])
-        // The 'AND' her is to set the boolean value when we search on the filters. It can be undefined without breaking anything
-
-
+        if (this.validateFilter(filter)) {
+          this.cascadeSelected.filter(f=>f.term != filter.term)
+          this.cascadeSelected.push([filter.facetPropPath, this.createCascaderItemValue(filter.term, filter.facet), filter.AND])
+          this.cascadeSelectedWithBoolean.push([filter.facetPropPath, this.createCascaderItemValue(filter.term, filter.facet), filter.AND])
+          // The 'AND' her is to set the boolean value when we search on the filters. It can be undefined without breaking anything
+          return true;
+        }
       }
     },
     initiateSearch: function() {
@@ -406,15 +406,48 @@ export default {
           });
       });
     },
+    /**
+     * Validate ther filter term to make sure the term is correct
+     */
+    validateFilter: function(filter) {
+      if (filter && filter.facet && filter.term) {
+        const item = this.createCascaderItemValue(filter.term, filter.facet);
+        const facet = this.options.find(element => element.value === filter.facetPropPath);
+        if (facet) {
+          const filter = facet.children.find(element => element.value === item);
+          if (filter)
+            return true;
+        }
+      }
+      return false;
+    },
+    /**
+     * Return a list of valid filers given a list of filters, 
+     */
+    getValidatedFilters: function (filters) {
+      if (filters) {
+        if (this.cascaderIsReady) {
+          const result = [];
+          filters.forEach(filter => {
+            if (this.validateFilter(filter)) {
+              result.push(filter);
+            }
+          });
+          return result;
+        } else return filters;
+      }
+      return [];
+    },
   },
   mounted: function () {
     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.populateCascader().then(() => {
       this.cascaderIsReady = true;
-      this.checkShowAllBoxes()
+      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: {
@@ -153,22 +151,58 @@ export default {
     contextCardUpdate: function(val){
         this.contextCardEntry = val
     },
+    resetSearch: function() {
+      this.numberOfHits = 0
+      this.discoverIds = []
+      this._dois = []
+      this.results = []
+      this.loadingCards = false
+    },
     openSearch: function(filter, search='') {
       this.searchInput = search;
       this.resetPageNavigation();
-      this.searchAlgolia(filter, search);
-      if (filter) {
-        this.filter = [...filter];
-        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) {
-        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();
@@ -346,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"
+        }
+    ]
+}