@abi-software/map-side-bar 1.3.16 → 1.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.16",
+  "version": "1.3.19",
   "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>
@@ -115,8 +116,12 @@ export default {
     addStomach: function(){
       this.$refs.sideBar.addFilter({facet: 'Stomach', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
     },
+    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/algolia/algolia.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-alert, no-console */
 import algoliasearch from 'algoliasearch'
-import markerZoomLevels from './markerZoomLevels';
 
 // export `createAlgoliaClient` to use it in page components
 export class AlgoliaClient {
@@ -104,13 +103,11 @@ export class AlgoliaClient {
           }
         })
       }
-      if (hit.anatomy && hit.anatomy.organ) {
+      if (hit.anatomy && hit.anatomy.organ ) {
         hit.anatomy.organ.forEach(anatomy => {
-          markerZoomLevels.forEach(marker => {
-            if (anatomy.name.toLowerCase() === marker.name.toLowerCase()) {
-              foundKeyWords.push(marker.id)
-            }
-          })
+          if (anatomy.curie) {
+            foundKeyWords.push(anatomy.curie)
+          }
         })
       }
     })
@@ -173,6 +170,7 @@ export class AlgoliaClient {
           attributesToRetrieve: [
             'item.keywords.keyword',
             'anatomy.organ.name',
+            'anatomy.organ.curie'
           ],
         })
         .then(response => {

package/src/algolia/utils.js

@@ -62,7 +62,6 @@ export function getFilters(selectedFacetArray=undefined) {
 
     filters = filters.split('()AND ').join(''); // Handle case where there where no OR facets
   });
-  console.log('filter string: ', filters.substring(0, filters.lastIndexOf(" AND ")))
   return filters.substring(0, filters.lastIndexOf(" AND "));
 }
 

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 `https://sparc.science/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,13 +406,45 @@ 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();
     });

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"
@@ -153,20 +153,34 @@ 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.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);
       }
     },
     addFilter: function(filter) {
       this.resetPageNavigation();
       if (filter) {
-        this.$refs.filtersRef.addFilter(filter);
-        this.$refs.filtersRef.initiateSearch()
+        if (this.$refs.filtersRef.addFilter(filter))
+          this.$refs.filtersRef.initiateSearch();
       }
     },
     clearSearchClicked: function() {

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"
+        }
+    ]
+}

package/src/algolia/markerZoomLevels.js

@@ -1,213 +0,0 @@
-// Set zoom values for micro and mesoscopic
-let microscopic = 7
-let mesoscopic = 5
-
-// Set what level each uberon shows at
-export default [
-  {
-      "id": "UBERON:0000948",
-      "name": "heart",
-      "showAtZoom": 1,
-  },
-  {
-      "id": "UBERON:0001759",
-      "name": "vagus nerve",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0001155",
-      "name": "colon",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0000945",
-      "name": "stomach",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0001013",
-      "name": "adipose tissue",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0001255",
-      "name": "urinary bladder",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0001348",
-      "name": "brown adipose tissue",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0002008",
-      "name": "cardiac nerve plexus",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0002240",
-      "name": "spinal cord",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0002005",
-      "name": "Enteric Nervous System",
-      "showAtZoom": 4
-  },
-  {
-      "id": "UBERON:0013702",
-      "name": "body proper",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0002298",
-      "name": "brainstem",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0002439",
-      "name": "myenteric nerve plexus",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0000010",
-      "name": "peripheral nervous system",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0002048",
-      "name": "lung",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0002410",
-      "name": "autonomic nervous system",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0002441",
-      "name": "cervicothoracic ganglion",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0005363",
-      "name": "inferior vagus X ganglion",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0001264",
-      "name": "pancreas",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0001884",
-      "name": "phrenic nerve",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0002059",
-      "name": "submandibular ganglion",
-      "showAtZoom": 7
-  },
-  {
-      "id": "UBERON:0001347",
-      "name": "white adipose tissue",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0001556",
-      "name": "lower urinary tract",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0002262",
-      "name": "celiac ganglion",
-      "showAtZoom": 5
-  },
-  {
-      "id": "UBERON:0000955",
-      "name": "Brain",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0000160",
-      "name": "intestine",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0001322",
-      "name": "sciatic nerve",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0001649",
-      "name": "glossopharyngeal nerve",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0002063",
-      "name": "sinus venosus",
-      "showAtZoom": 6
-  },
-  {
-      "id": "UBERON:0002107",
-      "name": "liver",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0002113",
-      "name": "kidney",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0002481",
-      "name": "bone tissue",
-      "showAtZoom": 1
-  },
-  {
-      "id": "UBERON:0004907",
-      "name": "lower digestive tract",
-      "showAtZoom": 4
-  },
-  {
-      "id": "UBERON:0000044",
-      "name": "Dorsal root ganglion",
-      "showAtZoom": 5
-  },
-  // New levels from Keeran
-  {
-      "id": "UBERON:0001736",
-      "name": "Submandibular gland",
-      "showAtZoom": microscopic
-  },
-  {
-      "id": "UBERON:0001103",
-      "name": "Diaphragm",
-      "showAtZoom": mesoscopic
-  },
-  {
-      "id": "UBERON:0001160",
-      "name": "Fundus of stomach",
-      "showAtZoom": mesoscopic
-  },
-  {
-      "id": "UBERON:0000955",
-      "name": "Brain",
-      "showAtZoom": mesoscopic
-  },
-  {
-      "id": "UBERON:0003708",
-      "name": "Carotid sinus",
-      "showAtZoom": microscopic
-  },
-  {
-      "id": "UBERON:0002079",
-      "name": "Left cardiac atrium",
-      "showAtZoom": mesoscopic
-  },
-  {
-      "id": "ILX:0485722",
-      "name": "Nodose ganglion",
-      "showAtZoom": microscopic
-  },
-]