@abi-software/map-side-bar 1.5.0 → 1.5.2

package/src/components/SearchHistory.vue

@@ -0,0 +1,146 @@
+<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
+      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;
+}
+</style>

package/src/components/SideBar.vue

@@ -1,232 +1,235 @@
-<template>
-  <div ref="container">
-    <div v-if="!drawerOpen" @click="toggleDrawer" class="open-tab">
-      <i class="el-icon-arrow-left"></i>
-    </div>
-    <el-drawer
-      custom-class="my-drawer"
-      class="side-bar"
-      :visible.sync="drawerOpen"
-      :appendToBody="false"
-      :modal-append-to-body="false"
-      size=550
-      :with-header="false"
-      :wrapperClosable="false"
-      :modal="false"
-    >
-      <div class="box-card">
-        <div v-if="drawerOpen" @click="close" class="close-tab">
-          <i class="el-icon-arrow-right"></i>
-        </div>
-        <div class="sidebar-container">
-          <tabs v-if="tabs.length > 1" :tabTitles="tabs" :activeId="activeId"
-            @titleClicked="tabClicked"/>
-          <template v-for="tab in tabs">
-            <sidebar-content class="sidebar-content-container"
-            v-show="tab.id===activeId" :contextCardEntry="tab.contextCard"
-            :envVars="envVars"
-            v-bind:key="tab.id" :ref="tab.id"
-            @search-changed="searchChanged(tab.id, $event)"/>
-          </template>
-        </div>
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-
-<script>
-/* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import {
-  Drawer,
-  Icon,
-} from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-import SidebarContent from './SidebarContent.vue';
-import EventBus from './EventBus';
-import Tabs from './Tabs'
-
-locale.use(lang);
-Vue.use(Drawer);
-Vue.use(Icon);
-
-export default {
-  components: {SidebarContent, Tabs },
-  name: "SideBar",
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    envVars: {
-      type: Object,
-      default: () => {}
-    },
-    tabs: {
-      type: Array,
-      default: () => [{title:'flatmap', id:1}]
-    },
-    activeId: {
-      type: Number,
-      default: 1
-    },
-    openAtStart: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data: function () {
-    return {
-      drawerOpen: false,
-    }
-  },
-  methods: {
-    searchChanged: function (id, data) {
-      this.$emit("search-changed", {...data, id: id});
-    },
-    close: function () {
-      this.drawerOpen = false;
-    },
-    toggleDrawer: function () {
-      this.drawerOpen = !this.drawerOpen;
-    },
-    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;
-      filter.AND = true // When we add a filter external, it is currently only with an AND boolean
-
-      // Because refs are in v-for, nextTick is needed here
-      Vue.nextTick(()=>{this.$refs[this.activeId][0].addFilter(filter)})
-    },
-    openNeuronSearch: function(neuron){
-      this.drawerOpen = true;
-      // Because refs are in v-for, nextTick is needed here
-      Vue.nextTick(()=>{this.$refs[this.activeId][0].openSearch('', undefined, 'scicrunch-query-string/', {'field': '*organ.curie', 'curie':neuron})})
-    },
-    getAlgoliaFacets: async function(){
-      return await this.$refs[this.activeId][0].getAlgoliaFacets()
-    },
-    tabClicked: function(id) {
-      this.$emit("tabClicked", id);
-    },
-  },
-  created:function() {
-    this.drawerOpen = this.openAtStart;
-  },
-  mounted: function(){
-    EventBus.$on("PopoverActionClick", (payLoad) => {
-      this.$emit("actionClick", payLoad);
-    })
-    EventBus.$on('available-facets', (payLoad)=> {
-      this.$emit('search-changed', {
-        type: 'available-facets',
-        value: payLoad
-      })
-    })
-    EventBus.$on('contextUpdate', (payLoad)=> {
-      this.$emit('contextUpdate', payLoad)
-    })
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/drawer";
-@import "~element-ui/packages/theme-chalk/src/icon";
-
-.box-card {
-  flex: 3;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: auto;
-}
-
-.side-bar{
-  position: relative;
-  height: 100%;
-  pointer-events: none;
-}
-
-.side-bar ::v-deep .el-drawer:focus{
-  outline:none;
-}
-
-.sidebar-container {
-  height: 100%;
-  flex-flow: column;
-  display: flex;
-}
-
-.open-tab{
-  width: 20px;
-  height: 40px;
-  z-index: 8;
-  position: absolute;
-  top: calc(50vh - 80px);
-  right: 0px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px $app-primary-color;
-  background-color: #f9f2fc;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  pointer-events: auto;
-}
-
-.el-icon-arrow-left,
-.el-icon-arrow-right
-{
-  font-weight: 600;
-  margin-top: 12px;
-  color: $app-primary-color;
-  cursor: pointer;
-  pointer-events: auto;
-  transform: scaleY(2.0);
-  text-align: center;
-  vertical-align: middle;
-}
-
-.close-tab{
-  float: left;
-  flex: 1;
-  width: 20px;
-  height: 40px;
-  z-index: 8;
-  margin-top: calc(50vh - 80px);
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px $app-primary-color; 
-  background-color: #f9f2fc;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  pointer-events: auto;
-}
-
-.box-card {
-  flex: 3;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: auto;
-}
-
-::v-deep .my-drawer {
-  background: rgba(0,0,0,0);
-  box-shadow: none;
-}
-
-::v-deep .my-drawer .el-drawer__body {
-  height: 100%;
-}
-
-.sidebar-content-container {
-   flex: 1 1 auto;
-}
-
-</style>
+<template>
+  <div ref="container">
+    <div v-if="!drawerOpen" @click="toggleDrawer" class="open-tab">
+      <i class="el-icon-arrow-left"></i>
+    </div>
+    <el-drawer
+      custom-class="my-drawer"
+      class="side-bar"
+      :visible.sync="drawerOpen"
+      :appendToBody="false"
+      :modal-append-to-body="false"
+      size=550
+      :with-header="false"
+      :wrapperClosable="false"
+      :modal="false"
+    >
+      <div class="box-card">
+        <div v-if="drawerOpen" @click="close" class="close-tab">
+          <i class="el-icon-arrow-right"></i>
+        </div>
+        <div class="sidebar-container">
+          <tabs v-if="tabs.length > 1" :tabTitles="tabs" :activeId="activeId"
+            @titleClicked="tabClicked"/>
+          <template v-for="tab in tabs">
+            <sidebar-content class="sidebar-content-container"
+            v-show="tab.id===activeId" :contextCardEntry="tab.contextCard"
+            :envVars="envVars"
+            v-bind:key="tab.id" :ref="tab.id"
+            @search-changed="searchChanged(tab.id, $event)"/>
+          </template>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import {
+  Drawer,
+  Icon,
+} from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+import SidebarContent from './SidebarContent.vue';
+import EventBus from './EventBus';
+import Tabs from './Tabs'
+
+locale.use(lang);
+Vue.use(Drawer);
+Vue.use(Icon);
+
+export default {
+  components: {SidebarContent, Tabs },
+  name: "SideBar",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    envVars: {
+      type: Object,
+      default: () => {}
+    },
+    tabs: {
+      type: Array,
+      default: () => [{title:'flatmap', id:1}]
+    },
+    activeId: {
+      type: Number,
+      default: 1
+    },
+    openAtStart: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function () {
+    return {
+      drawerOpen: false,
+    }
+  },
+  methods: {
+    searchChanged: function (id, data) {
+      this.$emit("search-changed", {...data, id: id});
+    },
+    close: function () {
+      this.drawerOpen = false;
+    },
+    toggleDrawer: function () {
+      this.drawerOpen = !this.drawerOpen;
+    },
+    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;
+      filter.AND = true // When we add a filter external, it is currently only with an AND boolean
+
+      // Because refs are in v-for, nextTick is needed here
+      Vue.nextTick(()=>{this.$refs[this.activeId][0].addFilter(filter)})
+    },
+    openNeuronSearch: function(neuron){
+      this.drawerOpen = true;
+      // Because refs are in v-for, nextTick is needed here
+      Vue.nextTick(()=>{this.$refs[this.activeId][0].openSearch('', undefined, 'scicrunch-query-string/', {'field': '*organ.curie', 'curie':neuron})})
+    },
+    getAlgoliaFacets: async function(){
+      return await this.$refs[this.activeId][0].getAlgoliaFacets()
+    },
+    setDrawerOpen: function(value=true){
+      this.drawerOpen = value;
+    },
+    tabClicked: function(id) {
+      this.$emit("tabClicked", id);
+    },
+  },
+  created:function() {
+    this.drawerOpen = this.openAtStart;
+  },
+  mounted: function(){
+    EventBus.$on("PopoverActionClick", (payLoad) => {
+      this.$emit("actionClick", payLoad);
+    })
+    EventBus.$on('available-facets', (payLoad)=> {
+      this.$emit('search-changed', {
+        type: 'available-facets',
+        value: payLoad
+      })
+    })
+    EventBus.$on('contextUpdate', (payLoad)=> {
+      this.$emit('contextUpdate', payLoad)
+    })
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/drawer";
+@import "~element-ui/packages/theme-chalk/src/icon";
+
+.box-card {
+  flex: 3;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.side-bar{
+  position: relative;
+  height: 100%;
+  pointer-events: none;
+}
+
+.side-bar ::v-deep .el-drawer:focus{
+  outline:none;
+}
+
+.sidebar-container {
+  height: 100%;
+  flex-flow: column;
+  display: flex;
+}
+
+.open-tab{
+  width: 20px;
+  height: 40px;
+  z-index: 8;
+  position: absolute;
+  top: calc(50vh - 80px);
+  right: 0px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px $app-primary-color;
+  background-color: #f9f2fc;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.el-icon-arrow-left,
+.el-icon-arrow-right
+{
+  font-weight: 600;
+  margin-top: 12px;
+  color: $app-primary-color;
+  cursor: pointer;
+  pointer-events: auto;
+  transform: scaleY(2.0);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.close-tab{
+  float: left;
+  flex: 1;
+  width: 20px;
+  height: 40px;
+  z-index: 8;
+  margin-top: calc(50vh - 80px);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px $app-primary-color; 
+  background-color: #f9f2fc;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.box-card {
+  flex: 3;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+::v-deep .my-drawer {
+  background: rgba(0,0,0,0);
+  box-shadow: none;
+}
+
+::v-deep .my-drawer .el-drawer__body {
+  height: 100%;
+}
+
+.sidebar-content-container {
+   flex: 1 1 auto;
+}
+
+</style>