@abi-software/map-side-bar 1.3.6 → 1.3.9

package/package-lock.json

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

package/package.json

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

package/src/App.vue

@@ -4,7 +4,8 @@
       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="singleFacets">Add to Filter</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="multiFacets">multiple facets</el-button>
     <el-button @click="neuronSearch">open neuron search</el-button>
     <el-button @click="keywordSearch">keyword search</el-button>
@@ -109,7 +110,10 @@ export default {
       this.$refs.sideBar.openSearch([], 'heart')
     },
     singleFacets: function(){
-      this.$refs.sideBar.addFilter({facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'})
+      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})
     },
     multiFacets: function(){
       this.$refs.sideBar.openSearch([{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}], '')
@@ -117,6 +121,9 @@ export default {
     keywordSearch: function(){
       this.$refs.sideBar.openSearch([{facet: 'http://purl.obolibrary.org/obo/UBERON_0001103', term:'Keywords', facetPropPath:'item.keywords.keyword'}])
     },
+    markerFromFlatmap: function(){
+      this.$refs.sideBar.openSearch([{facet: 'http://purl.obolibrary.org/obo/UBERON_0001103', term:'Keywords', facetPropPath:'item.keywords.keyword'}])
+    },
     neuronSearch: function(){
       this.$refs.sideBar.openNeuronSearch('ilxtr:neuron-type-keast-10')
     }

package/src/algolia/algolia.js

@@ -1,9 +1,10 @@
 /* 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 {
-  constructor(algoliaId, algoliaKey, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+  constructor(algoliaId, algoliaKey, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
     this.client = algoliasearch(
       algoliaId,
       algoliaKey
@@ -14,9 +15,9 @@ export class AlgoliaClient {
     this.index = this.client.initIndex(ALGOLIA_INDEX);
   }
 
-  getAlgoliaFacets (propPathMapping) {
+  getAlgoliaFacets(propPathMapping) {
     const map = new Map(Object.entries(propPathMapping));
-    const facetPropPaths = Array.from(map.keys() );
+    const facetPropPaths = Array.from(map.keys());
     let facetData = []
     let facetId = 0
     return this.index
@@ -28,7 +29,7 @@ export class AlgoliaClient {
         facetPropPaths.map((facetPropPath) => {
           var children = []
           const responseFacets = response.facets
-          if (responseFacets === undefined) {return}
+          if (responseFacets === undefined) { return }
           const responseFacetChildren =
             responseFacets[facetPropPath] == undefined
               ? {}
@@ -52,18 +53,18 @@ export class AlgoliaClient {
         return facetData
       })
   }
-  
+
   // Returns all DOIs of all versions for a given discover dataset
-  _discoverAllDois (discoverId, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+  _discoverAllDois(discoverId, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
     return new Promise(resolve => {
-      fetch(`${PENNSIEVE_API_LOCATION}/discover/datasets/${discoverId}/versions`).then(r=>r.json()).then(dataset => {
+      fetch(`${PENNSIEVE_API_LOCATION}/discover/datasets/${discoverId}/versions`).then(r => r.json()).then(dataset => {
         resolve(dataset.map(version => version.doi))
       })
     })
   }
-  
+
   // Get all dois given a list of discoverIds
-  _expandDois (discoverIds, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+  _expandDois(discoverIds, PENNSIEVE_API_LOCATION = 'https://api.pennsieve.io') {
     return new Promise(resolve => {
       let promiseList = discoverIds.map(discoverId => this._discoverAllDois(discoverId, PENNSIEVE_API_LOCATION))
       Promise.all(promiseList).then((values) => {
@@ -76,7 +77,7 @@ export class AlgoliaClient {
     let newResults = []
     let newResult = {}
     for (let res of results) {
-      newResult = {...res}
+      newResult = { ...res }
       newResult = {
         doi: res.item.curie.split(':')[1],
         name: res.item.name,
@@ -91,83 +92,93 @@ export class AlgoliaClient {
     return newResults
   }
 
-  _processKeywords(hits){
+  _processAnatomy(hits) {
     let foundKeyWords = []
     let uniqueKeywords = []
-    hits.forEach(hit=>{
-      if ( hit.item && hit.item.keywords) {
-        hit.item.keywords.forEach(keywordObj=>{
+    hits.forEach(hit => {
+      if (hit.item && hit.item.keywords) {
+        hit.item.keywords.forEach(keywordObj => {
           let keyword = keywordObj.keyword
           if (keyword.includes('UBERON') || keyword.includes('ilxtr') || keyword.includes('ILX')) {
             foundKeyWords.push(this._processUberonURL(keyword))
-            uniqueKeywords = [...new Set(foundKeyWords)]
           }
         })
       }
+      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)
+            }
+          })
+        })
+      }
     })
+    uniqueKeywords = [...new Set(foundKeyWords)]
     return uniqueKeywords
   }
 
-  _processUberonURL(url){
+  _processUberonURL(url) {
     let ub = url.split('/').pop()
-    return ub.replace('_',':')
+    return ub.replace('_', ':')
   }
-  
+
   /**
    * Get Search results
    * This is using fetch from the Algolia API
    */
-  search (filter, query='', hitsperPage=10, page=1) {
+  search(filter, query = '', hitsperPage = 10, page = 1) {
     return new Promise(resolve => {
       this.index
-      .search(query, {
-        facets:['*'],
-        hitsPerPage: hitsperPage,
-        page: page-1,
-        filters: filter,
-        attributesToHighlight: [],
-        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),
-          dois: response.hits.map(r=>r.item.curie.split(':')[1])
-        }
-        resolve(searchData)
-      })
+        .search(query, {
+          facets: ['*'],
+          hitsPerPage: hitsperPage,
+          page: page - 1,
+          filters: filter,
+          attributesToHighlight: [],
+          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),
+            dois: response.hits.map(r => r.item.curie.split(':')[1])
+          }
+          resolve(searchData)
+        })
     })
   }
 
-    /**
-   * Get key words
-   * This is used to return all keywords for a given search. Note that you often want the hits per page to be maxed out
-   */
-    keywordsInSearch (filter, query='', hitsperPage=999999, page=1) {
-      return new Promise(resolve => {
-        this.index
+  /**
+ * Get key words
+ * This is used to return all keywords for a given search. Note that you often want the hits per page to be maxed out
+ */
+  anatomyInSearch(filter, query = '', hitsperPage = 999999, page = 1) {
+    return new Promise(resolve => {
+      this.index
         .search(query, {
-          facets:['*'],
+          facets: ['*'],
           hitsPerPage: hitsperPage,
-          page: page-1,
+          page: page - 1,
           filters: filter,
           attributesToHighlight: [],
           attributesToRetrieve: [
             'item.keywords.keyword',
+            'anatomy.organ.name',
           ],
         })
         .then(response => {
-          let keywords = this._processKeywords(response.hits)
-          resolve(keywords)
+          let anatomyAsUberons = this._processAnatomy(response.hits)
+          resolve(anatomyAsUberons)
         })
-      })
-    }
+    })
+  }
 }

package/src/algolia/markerZoomLevels.js

@@ -0,0 +1,213 @@
+// 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
+  },
+]

package/src/algolia/utils.js

@@ -11,6 +11,7 @@ export const facetPropPathMapping = {
   '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',
@@ -39,18 +40,24 @@ export function getFilters(selectedFacetArray=undefined) {
 
   const facetPropPaths = Object.keys(facetPropPathMapping);
   facetPropPaths.map((facetPropPath) => {
-    const facetsToOr = facets.filter(
+    const facetsToBool = facets.filter(
       (facet) => facet.facetPropPath == facetPropPath
     );
-    var filter = "";
-    facetsToOr.map((facet) => {
-      filter += `"${facetPropPath}":"${facet.label}" OR `;
+    let orFilters = "";
+    let andFilters = "";
+    facetsToBool.map((facet) => {
+      if (facet.AND){
+        andFilters += `AND "${facetPropPath}":"${facet.label}"`;
+      } else {
+        orFilters += `"${facetPropPath}":"${facet.label}" OR `;
+      }
     });
-    if (filter == "") {
+    if (orFilters == "" && andFilters =="") {
       return;
     }
-    filter = `(${filter.substring(0, filter.lastIndexOf(" OR "))})`;
-    filters += `${filter} AND `;
+    orFilters = `(${orFilters.substring(0, orFilters.lastIndexOf(" OR "))})` // remove last OR
+    filters += `${orFilters + andFilters} AND `; // Put them together 
+    // (Note that we add an extra AND in case there are facets at a higher level)
   });
   return filters.substring(0, filters.lastIndexOf(" AND "));
 }

package/src/components/SearchFilters.vue

@@ -202,6 +202,7 @@ export default {
           facetPropPath: fs[0], 
           facet: fs[1].split("/")[1],
           term: fs[1].split("/")[0], 
+          AND: fs[2] // for setting the boolean
         }))
 
         // Move results from arrays to object for use on scicrunch (note that we remove 'duplicate' as that is only needed for filter keys)
@@ -211,6 +212,7 @@ export default {
             facetPropPath: propPath, 
             facet: fs[1].split("/")[1],
             term: fs[1].split("/")[0], 
+            AND: fs[2] // for setting the boolean
           }
         })
 
@@ -333,6 +335,7 @@ export default {
     //      facetPropPath: 'anatomy.organ.name',
     //      term: 'Sex',
     //      facet: 'Male'
+    //      AND: true  // Optional value for setting the boolean within a facet
     //    }
     setCascader: function (filterFacets) {
       //Do not set the value unless it is ready
@@ -341,6 +344,7 @@ export default {
           return [
             e.facetPropPath,
             this.createCascaderItemValue(capitalise(e.term), e.facet),
+            e.AND
           ]
         });
         this.updatePreviousShowAllChecked(this.cascadeSelected);
@@ -350,7 +354,8 @@ export default {
       //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)])
+        this.cascadeSelected.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
       }
     },
     initiateSearch: function() {

package/src/components/SideBar.vue

@@ -139,7 +139,7 @@ export default {
     EventBus.$on("PopoverActionClick", (payLoad) => {
       this.$emit("actionClick", payLoad);
     })
-    EventBus.$on('keywordsFound', (payLoad)=> {
+    EventBus.$on('anatomyFound', (payLoad)=> {
       this.$emit('search-changed', {
         type: 'keyword-update',
         value: payLoad

package/src/components/SidebarContent.vue

@@ -192,8 +192,8 @@ export default {
     searchAlgolia(filters, query=''){
       // Algolia search
       this.loadingCards = true
-      this.algoliaClient.keywordsInSearch(getFilters(filters), query).then(keywords => {
-        EventBus.$emit("keywordsFound", keywords) 
+      this.algoliaClient.anatomyInSearch(getFilters(filters), query).then(anatomy => {
+        EventBus.$emit("anatomyFound", anatomy) 
       })
       this.algoliaClient.search(getFilters(filters), query, this.numberPerPage, this.page).then(searchData => {
         this.numberOfHits = searchData.total