@abi-software/map-side-bar 1.3.7 → 1.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.7",
+  "version": "1.3.10",
   "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

@@ -92,7 +92,7 @@ export class AlgoliaClient {
     return newResults
   }
 
-  _processKeywords(hits) {
+  _processAnatomy(hits) {
     let foundKeyWords = []
     let uniqueKeywords = []
     hits.forEach(hit => {
@@ -161,7 +161,7 @@ export class AlgoliaClient {
  * 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) {
+  anatomyInSearch(filter, query = '', hitsperPage = 999999, page = 1) {
     return new Promise(resolve => {
       this.index
         .search(query, {
@@ -176,8 +176,8 @@ export class AlgoliaClient {
           ],
         })
         .then(response => {
-          let keywords = this._processKeywords(response.hits)
-          resolve(keywords)
+          let anatomyAsUberons = this._processAnatomy(response.hits)
+          resolve(anatomyAsUberons)
         })
     })
   }

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

@@ -122,6 +122,7 @@ export default {
       showFilters: true,
       showFiltersText: true,
       cascadeSelected: [],
+      cascadeSelectedWithBoolean: [], 
       numberShown: 10,
       filters: [],
       facets: ["Species", "Gender", "Organ", "Datasets"],
@@ -202,6 +203,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 +213,7 @@ export default {
             facetPropPath: propPath, 
             facet: fs[1].split("/")[1],
             term: fs[1].split("/")[0], 
+            AND: fs[2] // for setting the boolean
           }
         })
 
@@ -333,6 +336,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
@@ -343,6 +347,16 @@ export default {
             this.createCascaderItemValue(capitalise(e.term), e.facet),
           ]
         });
+
+        // Unforttunately the cascader is very particular about it's v-model
+        //   to get around this we create a clone of it and use this clone for adding our boolean information
+        this.cascadeSelectedWithBoolean= filterFacets.map(e => {
+          return [
+            e.facetPropPath,
+            this.createCascaderItemValue(capitalise(e.term), e.facet),
+            e.AND
+          ]
+        });
         this.updatePreviousShowAllChecked(this.cascadeSelected);
       }
     },
@@ -350,11 +364,16 @@ 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])
+
+        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
+
+
       }
     },
     initiateSearch: function() {
-      this.cascadeEvent(this.cascadeSelected)
+      this.cascadeEvent(this.cascadeSelectedWithBoolean)
     },
     // checkShowAllBoxes: Checks each 'Show all' cascade option by using the setCascader function
     checkShowAllBoxes: 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