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

package/package.json

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

@@ -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() {