@abi-software/map-side-bar 1.1.5-beta-0 → 1.1.5-beta-1

package/src/components/SearchFilters.vue

@@ -18,7 +18,8 @@
           @tags-changed="tagsChangedCallback"
         ></custom-cascader>
         <div v-if="showFiltersText" class="filter-default-value">
-          <svg-icon icon="noun-filter" class="filter-icon-inside" />Apply Filters
+          <svg-icon icon="noun-filter" class="filter-icon-inside" />Apply
+          Filters
         </div>
       </span>
     </transition>
@@ -29,9 +30,14 @@
       placeholder="10"
       @change="numberShownChanged($event)"
     >
-      <el-option v-for="item in numberDatasetsShown" :key="item" :label="item" :value="item"></el-option>
+      <el-option
+        v-for="item in numberDatasetsShown"
+        :key="item"
+        :label="item"
+        :value="item"
+      ></el-option>
     </el-select>
-    <span class="dataset-results-feedback">{{this.numberOfResultsText}}</span>
+    <span class="dataset-results-feedback">{{ this.numberOfResultsText }}</span>
   </div>
 </template>
 
@@ -46,30 +52,33 @@ import locale from "element-ui/lib/locale";
 import speciesMap from "./species-map";
 import { SvgIcon, SvgSpriteColor } from "@abi-software/svg-sprite";
 
+import {AlgoliaClient} from "../algolia/algolia.js";
+import { facetPropPathMapping } from "../algolia/utils.js";
+
 Vue.component("svg-icon", SvgIcon);
 
 locale.use(lang);
 Vue.use(Option);
 Vue.use(Select);
 
-const capitalise = function(txt) {
+const capitalise = function (txt) {
   return txt.charAt(0).toUpperCase() + txt.slice(1);
 };
 
-const convertReadableLabel = function(original) {
+const convertReadableLabel = function (original) {
   const name = original.toLowerCase();
-  if (speciesMap[name]){
+  if (speciesMap[name]) {
     return capitalise(speciesMap[name]);
   } else {
     return capitalise(name);
   }
-}
+};
 
 export default {
   name: "SearchFilters",
   components: {
     CustomCascader,
-    SvgSpriteColor
+    SvgSpriteColor,
   },
   props: {
     /**
@@ -77,19 +86,19 @@ export default {
      * the required viewing.
      */
     entry: Object,
-    apiLocation: {
-      type: String,
-      default: ""
-    }
+    envVars: {
+      type: Object,
+      default: ()=>{}
+    },
   },
-  data: function() {
+  data: function () {
     return {
       cascaderIsReady: false,
       previousShowAllChecked: {
         species: false,
         gender: false,
         organ: false,
-        datasets: false
+        datasets: false,
       },
       showFilters: true,
       showFiltersText: true,
@@ -103,109 +112,91 @@ export default {
         {
           value: "Species",
           label: "Species",
-          children: [{}]
-        }
-      ]
+          children: [{}],
+        },
+      ],
     };
   },
   computed: {
-    numberOfResultsText: function() {
+    numberOfResultsText: function () {
       return `${this.entry.numberOfHits} results | Showing`;
-    }
+    },
   },
   methods: {
-    createCascaderItemValue: function(term, facet) {
+    createCascaderItemValue: function (term, facet) {
       if (facet) return term + "/" + facet;
       else return term;
     },
-    populateCascader: function() {
-      return new Promise(resolve => {
-        this.options = [];
-        let promiseList = [];
-        for (let i in this.facets) {
-          this.options.push({
-            value: this.createCascaderItemValue(
-              this.facets[i].toLowerCase(),
-              undefined
-            ),
-            label: convertReadableLabel(this.facets[i]),
-            children: []
-          });
-          promiseList.push(
-            this.getFacet(this.facets[i]).then(labels => {
-              // Populate children of each facet with scicrunch's facets
-              for (let j in labels) {
-                this.options[i].children.push({
-                  value: this.createCascaderItemValue(
-                    this.facets[i].toLowerCase(),
-                    labels[j].toLowerCase()),
-                  label: convertReadableLabel(labels[j]) // Capitalisation is to match design specs
-                });
-              }
-            })
-          );
-        }
-        Promise.allSettled(promiseList).then(() => {
-          resolve();
-        });
-      });
-    },
-    getFacet: function(facetLabel) {
-      if (facetLabel === "Datasets") {
-        // The datasets facet doesn't exist on SciCrunch yet, so manually set it
-        // for now.
-        return new Promise(resolve => {
-          resolve([...new Set(["Show all", "Scaffolds", "Simulations"])]);
-        });
-      }
-      return new Promise(resolve => {
-        let facets = ["Show all"]; // Set 'Show all' as our first label
-        let facet = facetLabel.toLowerCase();
-        this.callSciCrunch(this.apiLocation, this.facetEndpoint, facet).then(
-          facet_terms => {
-            facet_terms.forEach(element => {
-              facets.push(element["key"]); // add facets that scicrunch includes
+    populateCascader: function () {
+      return new Promise((resolve) => {
+        // Algolia facet serach
+        this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)
+          .then((data) => {
+            this.facets = data;
+            this.options = data;
+
+            // create top level of options in cascader
+            this.options.forEach((facet, i) => {
+              this.options[i].label = convertReadableLabel(facet.label);
+              this.options[i].value = this.createCascaderItemValue(
+                facet.key,
+                undefined
+              );
+
+              // put "Show all" as first option
+              this.options[i].children.unshift({
+                value: this.createCascaderItemValue("Show all"),
+                label: "Show all",
+              });
+
+              // populate second level of options 
+              this.options[i].children.forEach((facetItem, j) => {
+                this.options[i].children[j].label = convertReadableLabel(
+                  facetItem.label
+                );
+                this.options[i].children[j].value =
+                  this.createCascaderItemValue(facet.label, facetItem.label);
+              });
             });
-            resolve([...new Set(facets)]); // return no duplicates
-          }
-        );
+          })
+          .finally(() => {
+            resolve();
+          });
       });
     },
-    // switchTermToRequest is used to remove the count for sending a request to scicrunch
-    switchTermToRequest: function(term) {
-      return term.split(" ")[0].toLowerCase();
-    },
-    tagsChangedCallback: function(presentTags) {
+    tagsChangedCallback: function (presentTags) {
       if (presentTags.length > 0) {
         this.showFiltersText = false;
       } else {
         this.showFiltersText = true;
       }
     },
-    cascadeEvent: function(event) {
-      let filters = [];
+    // cascadeEvent: initiate searches based off cascader changes
+    cascadeEvent: function (event) {
       if (event) {
         // Check for show all in selected cascade options
         event = this.showAllEventModifier(event);
-        for (let i in event) {
-          if (event[i] !== undefined) {
-            let value = event[i][1];
-            let data = value.split("/");
-            let output = {};
-            output.term = this.switchTermToRequest(data[0]);
-            output.facet = data[1];
-            filters.push(output);
-          }
-        }
+
+        // Move results from arrays to object
+        let filters = event.filter( selection => selection !== undefined).map( fs => ({
+          facetPropPath: fs[0], 
+          facet: fs[1].split("/")[1],
+          term: fs[1].split("/")[0], 
+        }))
+
+        this.$emit('loading', true) // let sidebarcontent wait for the requests
+
+        this.$emit("filterResults", filters); // emit filters for apps above sidebar
+        this.setCascader(filters); //update our cascader v-model if we modified the event
+        this.makeCascadeLabelsClickable();
       }
-      this.$emit("filterResults", filters);
-      this.setCascader(filters); //update our cascader v-model if we modified the event
-      this.makeCascadeLabelsClickable();
     },
-    showAllEventModifier: function(event) {
+    // 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
+    // *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
       let hasShowAll = event
-        .map(ev => (ev ? ev[1].toLowerCase().includes("show all") : false))
+        .map((ev) => (ev ? ev[1].toLowerCase().includes("show all") : false))
         .includes(true);
       // remove all selected options below the show all if checked
       if (hasShowAll) {
@@ -260,63 +251,78 @@ export default {
             } else {
               return 0;
             }
-          } else
-            return 0;
+          } else return 0;
         });
       }
       return event;
     },
-    cascadeExpandChange: function(event) {
+    cascadeExpandChange: function (event) {
       //work around as the expand item may change on modifying the cascade props
       this.__expandItem__ = event;
       this.makeCascadeLabelsClickable();
     },
-    numberShownChanged: function(event) {
+    numberShownChanged: function (event) {
       this.$emit("numberPerPage", parseInt(event));
     },
-    callSciCrunch: function(apiLocation, endpoint, term) {
-      return new Promise(resolve => {
-        fetch(apiLocation + endpoint + term)
-          .then(response => response.json())
-          .then(data => {
-            resolve(data);
-          });
-      });
-    },
-    updatePreviousShowAllChecked: function(options) {
+    updatePreviousShowAllChecked: function (options) {
       //Reset the states
       for (const facet in this.previousShowAllChecked) {
         this.previousShowAllChecked[facet] = false;
       }
-      options.forEach(element => {
+      options.forEach((element) => {
         if (element[1].toLowerCase().includes("show all"))
           this.previousShowAllChecked[element[0]] = true;
       });
     },
-    setCascader: function(filterFacets) {
+    // setCascader: Clears previous selections and takes in an array of facets to select: filterFacets
+    // facets are in the form:
+    //    {
+    //      facetPropPath: 'anatomy.organ.name',
+    //      term: 'Sex',
+    //      facet: 'Male'
+    //    }
+    setCascader: function (filterFacets) {
       //Do not set the value unless it is ready
-      if (this.cascaderIsReady) {
-        this.cascadeSelected = [];
-        filterFacets.forEach(e => {
-          this.cascadeSelected.push([
-            e.term.toLowerCase(),
-            this.createCascaderItemValue(
-              e.term.toLowerCase(),
-              e.facet.toLowerCase()
-            )
-          ]);
+      if (this.cascaderIsReady && filterFacets && filterFacets.length != 0) {
+        this.cascadeSelected = filterFacets.map(e => {
+          return [
+            e.facetPropPath,
+            this.createCascaderItemValue(capitalise(e.term), e.facet),
+          ]
         });
         this.updatePreviousShowAllChecked(this.cascadeSelected);
       }
     },
-    makeCascadeLabelsClickable: function() {
+    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)])
+      }
+    },
+    initiateSearch: function() {
+      this.cascadeEvent(this.cascadeSelected)
+    },
+    // checkShowAllBoxes: Checks each 'Show all' cascade option by using the setCascader function
+    checkShowAllBoxes: function(){
+      this.setCascader(
+        this.options.map(option => {
+          return {
+            facetPropPath: option.value,
+            term: option.label,
+            facet: 'Show all'
+          }
+        })
+      )
+    },
+    makeCascadeLabelsClickable: function () {
       // Next tick allows the cascader menu to change
       this.$nextTick(() => {
         this.$refs.cascader.$el
           .querySelectorAll(".el-cascader-node__label")
-          .forEach(el => {
+          .forEach((el) => {
             // step through each cascade label
-            el.onclick = function() {
+            el.onclick = function () {
               const checkbox = this.previousElementSibling;
               if (checkbox) {
                 if (!checkbox.parentElement.attributes["aria-owns"]) {
@@ -327,19 +333,18 @@ export default {
             };
           });
       });
-    }
-  },
-  created: function() {
-    //Create non-reactive local variables
-    this.facetEndpoint = "get-facets/";
+    },
   },
-  mounted: function() {
+  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.setCascader(this.entry.filterFacets);
       this.makeCascadeLabelsClickable();
     });
-  }
+  },
 };
 </script>
 
@@ -375,6 +380,10 @@ export default {
   padding-bottom: 6px;
 }
 
+.cascader >>> .el-cascder-panel {
+  max-height: 500px;
+}
+
 .cascader >>> .el-scrollbar__wrap {
   overflow-x: hidden;
   margin-bottom: 2px !important;

package/src/components/SideBar.vue

@@ -24,7 +24,7 @@
           <template v-for="tab in tabs">
             <sidebar-content class="sidebar-content-container"
             v-show="tab.id===activeId" :contextCardEntry="tab.contextCard"
-            :firstSearch="tab.title" :apiLocation="apiLocation"
+            :envVars="envVars"
             v-bind:key="tab.id" :ref="tab.id"
             @search-changed="searchChanged(tab.id, $event)"/>
           </template>
@@ -81,9 +81,9 @@ export default {
       type: Object,
       default: () => (initial_state)
     },
-    apiLocation: {
-      type: String,
-      default: ""
+    envVars: {
+      type: Object,
+      default: () => {}
     },
     tabs: {
       type: Array,
@@ -113,10 +113,15 @@ export default {
     toggleDrawer: function () {
       this.drawerOpen = !this.drawerOpen;
     },
-    openSearch: function(term, facets){
+    openSearch: function(facets, query){
+      this.drawerOpen = true;
+      // Because refs are in v-for, nextTick is needed here
+      Vue.nextTick(()=>{this.$refs[this.activeId][0].openSearch(facets, query)})
+    },
+    addFilter: function(filter){
       this.drawerOpen = true;
       // Because refs are in v-for, nextTick is needed here
-      Vue.nextTick(()=>{this.$refs[this.activeId][0].openSearch(term, facets)})
+      Vue.nextTick(()=>{this.$refs[this.activeId][0].addFilter(filter)})
     },
     openNeuronSearch: function(neuron){
       this.drawerOpen = true;

package/src/components/SidebarContent.vue

@@ -16,9 +16,10 @@
       class="filters"
       ref="filtersRef"
       :entry="filterEntry"
-      :apiLocation="apiLocation"
+      :envVars="envVars"
       @filterResults="filterUpdate"
       @numberPerPage="numberPerPageUpdate"
+      @loading="filtersLoading"
     ></SearchFilters>
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
       <div
@@ -27,7 +28,7 @@
       >No results found - Please change your search / filter criteria.</div>
       <div class="error-feedback" v-if="sciCrunchError">{{sciCrunchError}}</div>
       <div v-for="o in results" :key="o.id" class="step-item">
-        <DatasetCard :entry="o" :apiLocation="apiLocation"></DatasetCard>
+        <DatasetCard :entry="o" :envVars="envVars"></DatasetCard>
       </div>
       <el-pagination
         class="pagination"
@@ -62,6 +63,9 @@ import SearchFilters from "./SearchFilters";
 import DatasetCard from "./DatasetCard";
 import ContextCard from "./ContextCard.vue";
 
+import {AlgoliaClient} from "../algolia/algolia.js";
+import {getFilters} from "../algolia/utils.js"
+
 locale.use(lang);
 Vue.use(Button);
 Vue.use(Card);
@@ -120,9 +124,9 @@ export default {
       type: Object,
       default: undefined
     },
-    apiLocation: {
-      type: String,
-      default: ""
+    envVars: {
+      type: Object,
+      default: () => {}
     },
     firstSearch: {
       type: String,
@@ -149,54 +153,69 @@ export default {
     }
   },
   methods: {
-    openSearch: function(search, filter = undefined,
-      endpoint = undefined, params = undefined) {
+    openSearch: function(filter, search='') {
       this.searchInput = search;
       this.resetPageNavigation();
-      this.searchSciCrunch(search, filter, endpoint, params);
+      this.searchAlgolia(filter, search);
       if (filter) {
         this.filter = [...filter];
         this.$refs.filtersRef.setCascader(this.filter);
       }
     },
+    addFilter: function(filter) {
+      this.resetPageNavigation();
+      if (filter) {
+        this.$refs.filtersRef.addFilter(filter);
+        this.$refs.filtersRef.initiateSearch()
+      }
+    },
     clearSearchClicked: function() {
       this.searchInput = "";
       this.resetPageNavigation();
-      this.searchSciCrunch(this.searchInput);
+      this.searchAlgolia(this.filters, this.searchInput);
     },
     searchEvent: function(event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
         this.resetPageNavigation();
-        this.searchSciCrunch(this.searchInput);
+        this.searchAlgolia(this.filters, this.searchInput);
       }
     },
-    filterUpdate: function(filter) {
-      this.resetPageNavigation();
-      this.searchSciCrunch(this.searchInput, filter);
-      this.filter = [...filter];
+    filterUpdate: function(filters) {
+      this.filters = [...filters]
+      this.resetPageNavigation()
+      this.searchAlgolia(filters, this.searchInput)
       this.$emit("search-changed", {
         value: this.filter,
         type: "filter-update"
       });
     },
+    searchAlgolia(filters, query=''){
+      // Algolia search
+      this.algoliaClient.search(getFilters(filters), query, this.numberPerPage, this.page).then(searchData => {
+        this.numberOfHits = searchData.total
+        this.discoverIds = searchData.discoverIds
+        this.results = searchData.items
+        this.searchSciCrunch({'discoverIds':this.discoverIds})
+      })
+    },
+    filtersLoading: function (val) {
+      this.loadingCards = val;
+    },
     numberPerPageUpdate: function(val) {
       this.numberPerPage = val;
       this.pageChange(1);
     },
     pageChange: function(page) {
       this.start = (page - 1) * this.numberPerPage;
-      this.searchSciCrunch(this.searchInput);
+      this.page = page
+      this.searchAlgolia(this.filters, this.searchInput, this.numberPerPage, this.page)
     },
-    searchSciCrunch: function(search, filter = undefined,
-      searchEndpoint = undefined, params = undefined) {
+    searchSciCrunch: function(params) {
       this.loadingCards = true;
       this.results = [];
       this.disableCards();
-      if (!searchEndpoint) searchEndpoint = this.searchEndpoint;
-      if (!params)
-        params = this.createParams(filter, this.start, this.numberPerPage);
-      this.$emit("search-changed", { value: search, type: "query-update" });
-      this.callSciCrunch(this.apiLocation, searchEndpoint, search, params)
+      this.$emit("search-changed", { value: this.searchInput, type: "query-update" });
+      this.callSciCrunch(this.envVars.API_LOCATION, params)
         .then(result => {
           //Only process if the search term is the same as the last search term.
           //This avoid old search being displayed.
@@ -222,32 +241,6 @@ export default {
       this.start = 0;
       this.page = 1;
     },
-    createParams: function(filter, start, size) {
-      //Deconstruct list of fitlers to list of term
-      //and facet.
-      let params = {};
-      let term = [];
-      let facet = [];
-      let f = undefined;
-      if (filter !== undefined) {
-        f = filter;
-      } else {
-        f = this.filter;
-      }
-      if (f)
-        f.forEach(e => {
-          //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;
-      params.start = start;
-      params.size = size;
-      return params;
-    },
     resultsProcessing: function(data) {
       this.lastSearch = this.searchInput;
       this.results = [];
@@ -261,9 +254,12 @@ export default {
           name: element.name,
           description: element.description,
           contributors: element.contributors,
-          numberSamples: Array.isArray(element.samples)
-            ? element.samples.length
-            : 1,
+          numberSamples: element.sampleSize
+            ? parseInt(element.sampleSize)
+            : 0,
+          numberSubjects: element.subjectSize
+            ? parseInt(element.subjectSize)
+            : 0,
           updated: element.updated[0].timestamp.split("T")[0],
           url: element.uri[0],
           datasetId: element.dataset_identifier,
@@ -305,21 +301,16 @@ export default {
       }
       return p.toString();
     },
-    callSciCrunch: function(apiLocation, searchEndpoint, search, params = {}) {
+    callSciCrunch: function(apiLocation, params = {}) {
       return new Promise((resolve, reject) => {
         // the following controller will abort current search
         // if a new one has been started
         if (this._controller) this._controller.abort();
         this._controller = new AbortController();
         let signal = this._controller.signal;
-        var endpoint = apiLocation + searchEndpoint;
         // Add parameters if we are sent them
-        if (search !== "" && Object.entries(params).length !== 0) {
-          endpoint = endpoint + search + "/?" + this.createfilterParams(params);
-        } else {
-          endpoint = endpoint + "?" + this.createfilterParams(params);
-        }
-        fetch(endpoint, { signal })
+        let fullEndpoint = this.envVars.API_LOCATION + this.searchEndpoint + "?" + this.createfilterParams(params);
+        fetch(fullEndpoint, { signal })
           .then(handleErrors)
           .then(response => response.json())
           .then(data => resolve(data))
@@ -328,24 +319,21 @@ export default {
     },
   },
   mounted: function() {
+    // initialise algolia
+    this.algoliaClient = new AlgoliaClient(this.envVars.ALGOLIA_ID, this.envVars.ALGOLIA_KEY, this.envVars.PENNSIEVE_API_LOCATION);
+    this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);
+    console.log('Algolia initialised in sidebar')
+
     // temporarily disable flatmap search since there are no datasets
     if (this.firstSearch === "Flatmap" || this.firstSearch === "flatmap") {
-      this.openSearch('', [
-        {facet: "show all", term:'species'},
-        {facet: "show all", term:'gender'},
-        {facet: "show all", term:'organ'},
-        {facet: "show all", term:'datasets'}]);
+      this.openSearch(undefined, '')
     } else {
-      this.openSearch(this.firstSearch,  [
-        {facet: "show all", term:'species'},
-        {facet: "show all", term:'gender'},
-        {facet: "show all", term:'organ'},
-        {facet: "show all", term:'datasets'}]);
+      this.openSearch(undefined, '');
     }
   },
   created: function() {
     //Create non-reactive local variables
-    this.searchEndpoint = "filter-search/";
+    this.searchEndpoint = "dataset_info/using_multiple_discoverIds/";
   }
 };
 </script>