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

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.1",
+  "version": "1.5.2",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",

package/src/components/SearchFilters.vue

@@ -506,7 +506,6 @@ export default {
   position: relative;
   float: left;
   padding-right: 15px;
-  padding-bottom: 12px;
 }
 
 .number-shown-select {

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

package/del.json

@@ -1,27 +0,0 @@
-{
-    "description": "Mean luminal pressure (represented by a color field with red as high pressure and blue as low pressure) recorded from the proximal, transverse and distal sections of the pig colon are mapped on the scaffold. \n\nBaseline data was collected for 30min, followed by 15min of stimulation and 30min of post-stimulation.",
-    "heading": "Direct proximal colon stimulation",
-    "id": "sparc.science.context_data",
-    "samples": [
-        {
-            "annotation": "",
-            "description": "Manometry data recorded from pigs under direct proximal colon stimulation.",
-            "doi": "https://doi.org/10.26275/up27-ibcr",
-            "heading": "Proximal direct stimulation samples",
-            "id": "Sample 1",
-            "path": "derivative\\stim_proximal-colon_manometry.csv",
-            "view": "View 1"
-        }
-    ],
-    "version": "0.1.0",
-    "views": [
-        {
-            "annotation": "--",
-            "description": "Sections of pig colon scaffold with mapped manometry data where the data are collected from. ",
-            "id": "View 1",
-            "path": "colon_Layout1_view.json",
-            "sample": "Sample 1",
-            "thumbnail": "derivative\\pig_colon_main_thumbnail.jpeg"
-        }
-    ]
-}

package/scaffold_context_info.json

@@ -1,31 +0,0 @@
-{
-    "description": "This dataset contains single cell scale anatomical map of the rat intrinsic cardiac nervous system (ICNS) across four male and three female hearts. These cell clusters can be seen by the yellow data points on the image as well as spherical markers on the 3D heart scaffold. The dataset provides an integrative framework to visualise the spatial distribution of ICNS across different hearts.",
-    "heading": "Mapped ICN samples",
-    "id": "sparc.science.context_data",
-    "views": [],
-    "samples": [
-        {
-            "annotation": "",
-            "description": "Spatial location of isolated ICNS mapped onto a generic heart scaffold",
-            "doi": "",
-            "heading": "ICNS from subject M54-8",
-            "id": "Sample 1",
-            "path": "",
-            "view": "View 1",
-            "color": "#FFFF00",
-            "thumbnail": "https://raw.githubusercontent.com/ABI-Software/map-sidebar/main/assets/temp-pics/orange.png"
-        },
-        {
-            "annotation": "",
-            "description": "Spatial location of isolated ICNS mapped onto a generic heart scaffold",
-            "doi": "",
-            "heading": "ICNS from subject M54-5",
-            "id": "Sample 2",
-            "path": "",
-            "view": "View 2",
-            "color": "#FFA500",
-            "thumbnail": "https://raw.githubusercontent.com/ABI-Software/map-sidebar/main/assets/temp-pics/teal.png"
-        }
-    ],
-    "version": "0.1.0"
-}

package/src/components/FlatmapDatasetCard.vue

@@ -1,172 +0,0 @@
-<template>
-  <div class="dataset-card-container"  ref="container">
-    <div class="dataset-card"  ref="card">
-      <div class="seperator-path"></div>
-      <div v-loading="loading" class="card" >
-        <span class="card-left">
-          <img class="banner-img" :src="thumbnail" @click="openDataset" />
-        </span>
-        <div class="card-right" @click="openDataset">
-          {{entry[0]}}
-          {{entry [1]}}
-          <el-button class="button">View on flatmap</el-button>
-          <el-button class="button">View connectivity</el-button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-
-
-<script>
-/* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Button, Icon } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-
-locale.use(lang);
-Vue.use(Button);
-Vue.use(Icon);
-
-export default {
-  name: "PMRDatasetCard",
-  props: {
-    /**
-     * Object containing information for
-     * the required viewing.
-     */
-    entry: {
-      type: Array,
-      default: () => []
-    },
-    envVars: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data: function () {
-    return {
-      thumbnail: require('@/../assets/missing-image.svg'),
-      dataLocation: this.entry.doi,
-      discoverId: undefined,
-      loading: false,
-      version: 1,
-      lastDoi: undefined,
-      biolucidaData: undefined,
-      currentCategory: "All"
-    };
-  },
-  methods: {
-    openDataset() {
-      window.open(this.entry.model, "_blank");
-    },
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/col";
-@import "~element-ui/packages/theme-chalk/src/loading";
-
-.dataset-card {
-  padding-left: 16px;
-  position: relative;
-  min-height:17rem;
-}
-
-.title {
-  padding-bottom: 0.75rem;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: bold;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 1.05px;
-  color: #484848;
-  cursor: pointer;
-}
-.card {
-  padding-top: 18px;
-  position: relative;
-  display: flex;
-}
-
-.card-left{
-  flex: 1
-}
-
-.card-right {
-  flex: 1.3;
-  padding-left: 6px;
-}
-
-.button{
-  z-index: 10;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-  cursor: pointer;
-  margin-top: 8px;
-}
-
-.button:hover {
-  background-color: $app-primary-color;
-  color: white;
-}
-
-.banner-img {
-  width: 128px;
-  height: 128px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffffff;
-  cursor: pointer;
-}
-.details{
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 1.05px;
-  color: #484848;
-}
-
-.badges-container {
-  margin-top:0.75rem;
-}
-
-.loading-icon {
-  z-index: 20;
-  width: 40px;
-  height: 40px;
-  left: 80px;
-}
-
-.loading-icon ::v-deep .el-loading-mask {
-  background-color: rgba(117, 190, 218, 0.0) !important;
-}
-
-.loading-icon ::v-deep .el-loading-spinner .path {
-  stroke: $app-primary-color;
-}
-
-.button {
-  width: 150px;
-  height: 40px;
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-}
-</style>

package/src/components/PMRDatasetCard.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="dataset-card-container"  ref="container">
-    <div class="dataset-card"  ref="card">
-      <div class="seperator-path"></div>
-      <div v-loading="loading" class="card" >
-        <span class="card-left">
-          <img class="banner-img" :src="thumbnail" @click="openDataset" />
-        </span>
-        <div class="card-right" @click="openDataset">
-          {{entry.model}}
-          <el-button class="button">Download file</el-button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-
-
-<script>
-/* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Button, Icon } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-
-locale.use(lang);
-Vue.use(Button);
-Vue.use(Icon);
-
-export default {
-  name: "PMRDatasetCard",
-  props: {
-    /**
-     * Object containing information for
-     * the required viewing.
-     */
-    entry: {
-      type: Object,
-      default: () => {}
-    },
-    envVars: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data: function () {
-    return {
-      thumbnail: require('@/../assets/missing-image.svg'),
-      dataLocation: this.entry.doi,
-      discoverId: undefined,
-      loading: false,
-      version: 1,
-      lastDoi: undefined,
-      biolucidaData: undefined,
-      currentCategory: "All"
-    };
-  },
-  methods: {
-    openDataset() {
-      window.open(this.entry.model, "_blank");
-    },
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/col";
-@import "~element-ui/packages/theme-chalk/src/loading";
-
-.dataset-card {
-  padding-left: 16px;
-  position: relative;
-  min-height:17rem;
-}
-
-.title {
-  padding-bottom: 0.75rem;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: bold;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 1.05px;
-  color: #484848;
-  cursor: pointer;
-}
-.card {
-  padding-top: 18px;
-  position: relative;
-  display: flex;
-}
-
-.card-left{
-  flex: 1
-}
-
-.card-right {
-  flex: 1.3;
-  padding-left: 6px;
-}
-
-.button{
-  z-index: 10;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-  cursor: pointer;
-  margin-top: 8px;
-}
-
-.button:hover {
-  background-color: $app-primary-color;
-  color: white;
-}
-
-.banner-img {
-  width: 128px;
-  height: 128px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffffff;
-  cursor: pointer;
-}
-.details{
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 1.05px;
-  color: #484848;
-}
-
-.badges-container {
-  margin-top:0.75rem;
-}
-
-.loading-icon {
-  z-index: 20;
-  width: 40px;
-  height: 40px;
-  left: 80px;
-}
-
-.loading-icon ::v-deep .el-loading-mask {
-  background-color: rgba(117, 190, 218, 0.0) !important;
-}
-
-.loading-icon ::v-deep .el-loading-spinner .path {
-  stroke: $app-primary-color;
-}
-</style>