@abi-software/map-side-bar 1.1.1-beta.5 → 1.1.3-fix-0

package/src/App.vue

@@ -4,6 +4,7 @@
       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">single facets</el-button>
     <el-button @click="multiFacets">multiple facets</el-button>
     <el-button @click="neuronSearch">open neuron search</el-button>
     <SideBar class="side-bar" ref="sideBar" :apiLocation="apiLocation" :visible="sideBarVisibility"
@@ -77,7 +78,13 @@ export default {
       console.log("action fired: ", val)
     },
     openSearch: function(){
-      this.$refs.sideBar.openSearch('heart', [{facet: 'Show all', term:'species'}] )
+      this.$refs.sideBar.openSearch('heart', [{facet: "show all", term:'organ'},
+        {facet: "show all", term:'species'},
+        {facet: "show all", term:'gender'},
+        {facet: "show all", term:'datasets'}] )
+    },
+    singleFacets: function(){
+      this.$refs.sideBar.openSearch('', [{facet: 'Heart', term:'organ'}])
     },
     multiFacets: function(){
       this.$refs.sideBar.openSearch('', [{facet: 'Rat', term:'species'}, {facet: 'Heart', term:'organ'}])

package/src/components/DatasetCard.vue

@@ -43,19 +43,16 @@ import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import EventBus from "./EventBus"
 import scaffoldMetaMap from './scaffold-meta-map';
-import speciesMap from "./species-map"
+import speciesMap from "./species-map";
 
 locale.use(lang);
 Vue.use(Button);
 Vue.use(Icon);
 
 const capitalise = function(string){
-  return string.replace(/\b\w/g, v => v.toUpperCase())
+  return string.replace(/\b\w/g, v => v.toUpperCase());
 }
 
-const swapped = (obj)=>Object.fromEntries(Object.entries(obj).map(a => a.reverse()))
-const swappedSpeciesMap = swapped(speciesMap)
-
 export default {
   name: "DatasetCard",
   props: {
@@ -103,8 +100,8 @@ export default {
         text = this.entry.numberSamples + " samples";
       }
       if (this.entry.species) {
-        if (swappedSpeciesMap[this.entry.species[0].toLowerCase()]){
-          text += ` (${swappedSpeciesMap[this.entry.species[0].toLowerCase()]})`
+        if (speciesMap[this.entry.species[0].toLowerCase()]){
+          text += ` (${speciesMap[this.entry.species[0].toLowerCase()]})`
         } else {
           text += ` (${this.entry.species})`
         }

package/src/components/SearchFilters.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="filters">
-    <SvgSpriteColor />
+    <map-svg-sprite-color />
     <transition name="el-zoom-in-top">
       <span v-show="showFilters" class="search-filters transition-box">
         <custom-cascader
@@ -18,7 +18,7 @@
           @tags-changed="tagsChangedCallback"
         ></custom-cascader>
         <div v-if="showFiltersText" class="filter-default-value">
-          <svg-icon icon="noun-filter" class="filter-icon-inside" />Apply Filters
+          <map-svg-icon icon="noun-filter" class="filter-icon-inside" />Apply Filters
         </div>
       </span>
     </transition>
@@ -43,22 +43,32 @@ import { Option, Select } from "element-ui";
 import CustomCascader from "./Cascader";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
-import { SvgIcon, SvgSpriteColor } from "@abi-software/svg-sprite";
-Vue.component("svg-icon", SvgIcon);
+import speciesMap from "./species-map";
+import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 
 locale.use(lang);
 Vue.use(Option);
 Vue.use(Select);
 
-var capitalise = function(txt) {
+const capitalise = function(txt) {
   return txt.charAt(0).toUpperCase() + txt.slice(1);
 };
 
+const convertReadableLabel = function(original) {
+  const name = original.toLowerCase();
+  if (speciesMap[name]){
+    return capitalise(speciesMap[name]);
+  } else {
+    return capitalise(name);
+  }
+}
+
 export default {
   name: "SearchFilters",
   components: {
     CustomCascader,
-    SvgSpriteColor
+    MapSvgIcon,
+    MapSvgSpriteColor
   },
   props: {
     /**
@@ -117,7 +127,7 @@ export default {
               this.facets[i].toLowerCase(),
               undefined
             ),
-            label: capitalise(this.facets[i]),
+            label: convertReadableLabel(this.facets[i]),
             children: []
           });
           promiseList.push(
@@ -127,9 +137,8 @@ export default {
                 this.options[i].children.push({
                   value: this.createCascaderItemValue(
                     this.facets[i].toLowerCase(),
-                    labels[j].toLowerCase()
-                  ),
-                  label: capitalise(labels[j]) // Capitalisation is to match design specs
+                    labels[j].toLowerCase()),
+                  label: convertReadableLabel(labels[j]) // Capitalisation is to match design specs
                 });
               }
             })
@@ -165,32 +174,6 @@ export default {
     switchTermToRequest: function(term) {
       return term.split(" ")[0].toLowerCase();
     },
-    // updateLabels is used to show user how many are at each nested level.
-    // i.e.: if 3 species are selected it will show 'Species (3)' in the cascader
-    updateLabels: function(counts) {
-      for (let i in counts) {
-        switch (i) {
-          case "species":
-            this.options[0].label = this.options[0].label.split(" ")[0];
-            if (counts[i] > 0) this.options[0].label += ` (${counts[i]})`;
-            break;
-          case "gender":
-            this.options[1].label = this.options[1].label.split(" ")[0];
-            if (counts[i] > 0) this.options[1].label += ` (${counts[i]})`;
-            break;
-          case "organ":
-            this.options[2].label = this.options[2].label.split(" ")[0];
-            if (counts[i] > 0) this.options[2].label += ` (${counts[i]})`;
-            break;
-          case "datasets":
-            this.options[3].label = this.options[3].label.split(" ")[0];
-            if (counts[i] > 0) this.options[3].label += ` (${counts[i]})`;
-            break;
-          default:
-            break;
-        }
-      }
-    },
     tagsChangedCallback: function(presentTags) {
       if (presentTags.length > 0) {
         this.showFiltersText = false;
@@ -232,7 +215,6 @@ export default {
           if (facetMaps[event[i][0]] === undefined) facetMaps[event[i][0]] = [];
           facetMaps[event[i][0]].push(event[i]);
         }
-
         // go through each facets
         for (const facet in facetMaps) {
           let showAll = undefined;
@@ -259,11 +241,33 @@ export default {
             modifiedEvent.push(...facetMaps[facet]);
           }
         }
-        return modifiedEvent;
+        //Make sure the expanded item are sorted first.
+        return modifiedEvent.sort((a, b) => {
+          if (this.__expandItem__) {
+            if (a[0] == this.__expandItem__) {
+              if (b[0] == this.__expandItem__) {
+                return 0;
+              } else {
+                return -1;
+              }
+            } else if (b[0] == this.__expandItem__) {
+              if (a[0] == this.__expandItem__) {
+                return 0;
+              } else {
+                return 1;
+              }
+            } else {
+              return 0;
+            }
+          } else
+            return 0;
+        });
       }
       return event;
     },
-    cascadeExpandChange: function() {
+    cascadeExpandChange: function(event) {
+      //work around as the expand item may change on modifying the cascade props
+      this.__expandItem__ = event;
       this.makeCascadeLabelsClickable();
     },
     numberShownChanged: function(event) {
@@ -291,7 +295,6 @@ export default {
     setCascader: function(filterFacets) {
       //Do not set the value unless it is ready
       if (this.cascaderIsReady) {
-        let labelCounts = { species: 0, gender: 0, organ: 0, datasets: 0 };
         this.cascadeSelected = [];
         filterFacets.forEach(e => {
           this.cascadeSelected.push([
@@ -301,10 +304,8 @@ export default {
               e.facet.toLowerCase()
             )
           ]);
-          labelCounts[e.term.toLowerCase()] += 1;
         });
         this.updatePreviousShowAllChecked(this.cascadeSelected);
-        this.updateLabels(labelCounts);
       }
     },
     makeCascadeLabelsClickable: function() {

package/src/components/SidebarContent.vue

@@ -91,7 +91,6 @@ var initial_state = {
   results: [],
   numberOfHits: 0,
   filter: [],
-  filterFacets: undefined,
   loadingCards: false,
   numberPerPage: 10,
   page: 1,
@@ -145,7 +144,7 @@ export default {
     filterEntry: function() {
       return {
         numberOfHits: this.numberOfHits,
-        filterFacets: this.filterFacets
+        filterFacets: this.filter
       };
     }
   },
@@ -156,8 +155,8 @@ export default {
       this.resetPageNavigation();
       this.searchSciCrunch(search, filter, endpoint, params);
       if (filter) {
-        this.filterFacets = [...filter];
-        this.$refs.filtersRef.setCascader(this.filterFacets);
+        this.filter = [...filter];
+        this.$refs.filtersRef.setCascader(this.filter);
       }
     },
     clearSearchClicked: function() {
@@ -237,8 +236,11 @@ export default {
       }
       if (f)
         f.forEach(e => {
-          term.push(e.term);
-          facet.push(e.facet);
+          //Do not ask for any "show all" request
+          if (e.facet !== "show all") {
+            term.push(e.term);
+            facet.push(e.facet);
+          }
         });
       params.term = term;
       params.facet = facet;
@@ -327,9 +329,17 @@ export default {
   mounted: function() {
     // temporarily disable flatmap search since there are no datasets
     if (this.firstSearch === "Flatmap" || this.firstSearch === "flatmap") {
-      this.openSearch("", []);
+      this.openSearch('', [
+        {facet: "show all", term:'species'},
+        {facet: "show all", term:'gender'},
+        {facet: "show all", term:'organ'},
+        {facet: "show all", term:'datasets'}]);
     } else {
-      this.openSearch(this.firstSearch, []);
+      this.openSearch(this.firstSearch,  [
+        {facet: "show all", term:'species'},
+        {facet: "show all", term:'gender'},
+        {facet: "show all", term:'organ'},
+        {facet: "show all", term:'datasets'}]);
     }
   },
   created: function() {

package/src/components/species-map.js

@@ -1,8 +1,8 @@
 export default {
-    'Human': 'homo sapiens',
-    'Rat': 'rattus norvegicus',
-    'Mouse': 'mus musculus',
-    'Pig': 'sus scrofa domesticus',
-    'Boar': 'sus scrofa',
-    'Cat': 'felis catus'
+    'homo sapiens': 'Human',
+    'rattus norvegicus': 'Rat',
+    'mus musculus': 'Mouse',
+    'sus scrofa domesticus': 'Pig',
+    'sus scrofa': 'Boar',
+    'felis catus': 'Cat'
 }