@abi-software/map-side-bar 1.5.4-beta.hierarchy.2 → 1.5.4-beta.hierarchy.3

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -12205,7 +12205,7 @@
     "simple-html-tokenizer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
-      "integrity": "sha512-Mc/gH3RvlKvB/gkp9XwgDKEWrSYyefIJPGG8Jk1suZms/rISdUuVEMx5O1WBnTWaScvxXDvGJrZQWblUmQHjkQ=="
+      "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4="
     },
     "simple-swizzle": {
       "version": "0.2.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.5.4-beta.hierarchy.2",
+  "version": "1.5.4-beta.hierarchy.3",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",

package/src/components/SearchFilters.vue

@@ -9,6 +9,7 @@
           v-model="cascadeSelected"
           placeholder
           :collapse-tags="true"
+          collapse-tags-tooltip
           :options="options"
           :props="props"
           @change="cascadeEvent($event)"
@@ -209,7 +210,6 @@ export default {
     },
     // cascadeEvent: initiate searches based off cascader changes
     cascadeEvent: function (event) {
-      console.log('cascadeEvent:',event)
       if (event) {
         // Check for show all in selected cascade options
         event = this.showAllEventModifier(event);
@@ -251,14 +251,13 @@ export default {
 
         this.$emit("filterResults", filters); // emit filters for apps above sidebar
         this.setCascader(filterKeys); //update our cascader v-model if we modified the event
-        this.makeCascadeLabelsClickable();
+        this.cssMods(); // update css for the cascader
       }
     },
     //this fucntion is needed as we previously stored booleans in the array of event that 
     //  are stored in the cascader
     findHierarachyStringAndBooleanString(cascadeEventItem){ 
       let hString, bString
-      console.log('cascadeEventItem:', cascadeEventItem)
       if (cascadeEventItem.length >= 3){
         if (cascadeEventItem[2] && cascadeEventItem[2].split('>').length > 2){
           hString = cascadeEventItem[2]
@@ -355,7 +354,7 @@ export default {
     cascadeExpandChange: function (event) {
       //work around as the expand item may change on modifying the cascade props
       this.__expandItem__ = event;
-      this.makeCascadeLabelsClickable();
+      this.cssMods();
     },
     numberShownChanged: function (event) {
       this.$emit("numberPerPage", parseInt(event));
@@ -407,7 +406,6 @@ export default {
       //Do not set the value unless it is ready
       if (this.cascaderIsReady && filter) {
         filter = this.validateAndConvertFilterToHierarchical(filter)
-        console.log('we got:', filter)
         if (filter) {
           this.cascadeSelected.filter(f=>f.term != filter.term)
           this.cascadeSelected.push([filter.facetPropPath,this.createCascaderItemValue(filter.term, filter.facet), this.createCascaderItemValue(filter.term, filter.facet, filter.facet2)])
@@ -435,8 +433,8 @@ export default {
     makeCascadeLabelsClickable: function () {
       // Next tick allows the cascader menu to change
       this.$nextTick(() => {
-        this.$refs.cascader.$el
-          .querySelectorAll(".el-cascader-node__label")
+        document
+          .querySelectorAll(".sidebar-cascader-popper .el-cascader-node__label")
           .forEach((el) => {
             // step through each cascade label
             el.onclick = function () {
@@ -452,11 +450,25 @@ export default {
       });
     },
 
+    cssMods: function (){
+      this.makeCascadeLabelsClickable();
+      this.removeTopLevelCascaderCheckboxes();
+    },
+
+    removeTopLevelCascaderCheckboxes: function () {
+      // Next tick allows the cascader menu to change
+      this.$nextTick(() => {
+        let cascadePanels = document.querySelectorAll(".sidebar-cascader-popper .el-cascader-menu__list");
+        // Hide the checkboxes on the first level of the cascader
+        cascadePanels[0].querySelectorAll('.el-checkbox__input').forEach(el=>el.style.display='none');
+      });
+    },
+
+
     /*
       * Given a filter, the function below returns the filter in the format of the cascader, returns false if facet is not found
       */
     validateAndConvertFilterToHierarchical: function (filter) {
-      console.log('validateAndConvertFilterToHierarchical:', filter)
       if (filter && filter.facet && filter.term) {
         if (filter.facet2) {
           return filter // if it has a second term we will assume it is hierarchical and return it as is
@@ -475,7 +487,6 @@ export default {
                         //   and populate facet1 with its parents label.
                         filter.facet2 = thirdLayer.label
                         filter.facet = secondLayer.label
-                        console.log('found it! returning:', filter)
                         return filter
                       }
                     }
@@ -513,7 +524,7 @@ export default {
       this.cascaderIsReady = true;
       this.checkShowAllBoxes();
       this.setCascader(this.entry.filterFacets);
-      this.makeCascadeLabelsClickable();
+      this.cssMods();
       this.$emit("cascaderReady");
     });
   },
@@ -583,7 +594,6 @@ export default {
   position: relative;
   float: left;
   padding-right: 15px;
-  padding-bottom: 12px;
 }
 
 .number-shown-select {
@@ -686,7 +696,8 @@ export default {
   margin-bottom: 2px !important;
 }
 
-.sidebar-cascader-popper li[aria-owns*="cascader"] > .el-checkbox {
-  display: none;
+.sidebar-cascader-popper .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+  background-color: $app-primary-color;
+  border-color: $app-primary-color;
 }
 </style>

package/src/components/SearchHistory.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="container">
+    <!-- <span v-if="reversedSearchHistory.length > 0" class="title"> Search History </span> -->
+    <template v-for="(item, i) in reversedSearchHistory">
+      <el-tag class="search-tag" v-if="i < 3" v-bind:key="i" @click="search(item)">{{ item.search }} </el-tag>
+    </template>
+    <el-select  
+      v-if="reversedSearchHistory.length > 0" 
+      :value="selectValue" 
+      class="m-2 search-select" 
+      placeholder="Full search History" 
+      size="small"
+      popper-class="sidebar-search-select-popper"
+      @change="selectChange"
+    >
+      <el-option
+        v-for="(item, i) in cascaderOptions"
+        :key="i"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import {
+  Tag,
+  Select,
+} from "element-ui";
+
+Vue.use(Tag);
+Vue.use(Select);
+import EventBus from './EventBus';
+
+// remove duplicates by stringifying the objects
+const removeDuplicates = function(arrayOfAnything){
+  return [...new Set(arrayOfAnything.map(e => JSON.stringify(e)))].map(e => JSON.parse(e)) 
+}
+
+export default {
+  name: 'SearchHistory',
+  data() {
+      return {
+        searchHistory: [],
+        selectValue: 'Full search history'
+      }
+
+  },
+  computed: {
+    reversedSearchHistory: function(){
+      return removeDuplicates(this.searchHistory.slice().reverse().filter(item => item.search !== ''))
+    },
+    cascaderOptions: function(){
+      return this.reversedSearchHistory.map(item => {
+        return {
+          value: item.search,
+          label: item.search
+        }
+      })
+    }
+  },
+  methods: {
+    getSearchHistory() {
+      if (localStorage.getItem('sparc.science-sidebar-search-history')) {
+        this.searchHistory = JSON.parse(localStorage.getItem('sparc.science-sidebar-search-history'));
+      } else {
+        this.searchHistory = [];
+      }
+    },
+    clearSearchHistory() {
+      localStorage.removeItem('sparc.science-sidebar-search-history');
+      this.searchHistory = [];
+    },
+    addSearchToHistory(filters, search) {
+      filters = [] // disable filters for now
+      search = search.trim() // remove whitespace
+      let searchHistory = JSON.parse(localStorage.getItem('sparc.science-sidebar-search-history'));
+      if (searchHistory) {
+        searchHistory.push({filters: filters, search: search});
+        this.searchHistory = removeDuplicates(searchHistory)
+        localStorage.setItem('sparc.science-sidebar-search-history', JSON.stringify(searchHistory));
+      } else {
+        localStorage.setItem('sparc.science-sidebar-search-history', JSON.stringify([{filters: filters, search: search}]));
+      }
+    },
+    search: function(item) {
+      this.$emit("search", item);
+    },
+    selectChange: function(value) {
+      this.selectValue = value;
+      this.search({search: value})
+    }
+  },
+  mounted: function () {
+    this.getSearchHistory();
+    EventBus.$on('search-changed', (data) => {
+      this.setSearchHistory(data);
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/tag";
+
+.container {
+}
+
+.search-tag {
+  margin: 0 5px 5px 0;
+  cursor: pointer;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-right: 5px;
+  // center text vertically
+  display: flex;
+  align-items: center;
+  
+}
+
+.search-select {
+  float: right;
+}
+</style>
+
+<style lang="scss">
+.sidebar-search-select-popper {
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #292b66;
+  max-width: 200px;
+}
+</style>

package/src/components/SidebarContent.vue

@@ -21,6 +21,7 @@
       @loading="filtersLoading"
       @cascaderReady="cascaderReady"
     ></SearchFilters>
+    <search-history ref="searchHistory" @search="searchHistorySearch"></search-history>
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
       <div class="error-feedback" v-if="results.length === 0 && !loadingCards">
         No results found - Please change your search / filter criteria.
@@ -61,6 +62,7 @@ import {
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import SearchFilters from "./SearchFilters";
+import SearchHistory from "./SearchHistory";
 import DatasetCard from "./DatasetCard";
 import EventBus from "./EventBus";
 
@@ -106,7 +108,7 @@ var initial_state = {
 };
 
 export default {
-  components: { SearchFilters, DatasetCard },
+  components: { SearchFilters, DatasetCard, SearchHistory },
   name: "SideBarContent",
   props: {
     visible: {
@@ -207,11 +209,14 @@ export default {
       this.searchInput = "";
       this.resetPageNavigation();
       this.searchAlgolia(this.filters, this.searchInput);
+      this.$refs.searchHistory.selectValue = 'Full search history'
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
         this.resetPageNavigation();
         this.searchAlgolia(this.filters, this.searchInput);
+        this.$refs.searchHistory.selectValue = 'Full search history'
+        this.$refs.searchHistory.addSearchToHistory(this.filters, this.searchInput);
       }
     },
     filterUpdate: function (filters) {
@@ -408,6 +413,11 @@ export default {
     getAlgoliaFacets: async function(){
       let facets = await this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)
       return facets;
+    },
+    searchHistorySearch: function(item){
+      this.searchInput = item.search;
+      this.filters = item.filters;
+      this.openSearch(item.filters, item.search);
     }
   },
   mounted: function () {