@abi-software/map-side-bar 2.0.0-response.1 → 2.0.0

package/src/components/SidebarContent.vue

@@ -1,21 +1,25 @@
 <template>
   <el-card :body-style="bodyStyle" class="content-card">
-    <div slot="header" class="header">
-      <context-card
-        v-if="contextCardEntry && contextCardEnabled"
-        :entry="contextCardEntry"
-        :envVars="envVars"
-      />
-      <el-input
-        class="search-input"
-        placeholder="Search"
-        v-model="searchInput"
-        @keyup.native="searchEvent"
-        clearable
-        @clear="clearSearchClicked"
-      ></el-input>
-      <el-button class="button" @click="searchEvent">Search</el-button>
-    </div>
+    <template #header>
+      <div class="header">
+        <el-input
+          class="search-input"
+          placeholder="Search"
+          v-model="searchInput"
+          @keyup="searchEvent"
+          clearable
+          @clear="clearSearchClicked"
+        ></el-input>
+        <el-button
+          type="primary"
+          class="button"
+          @click="searchEvent"
+          size="large"
+        >
+          Search
+        </el-button>
+      </div>
+    </template>
     <SearchFilters
       class="filters"
       ref="filtersRef"
@@ -26,20 +30,20 @@
       @loading="filtersLoading"
       @cascaderReady="cascaderReady"
     ></SearchFilters>
+    <SearchHistory
+      ref="searchHistory"
+      @search="searchHistorySearch"
+    ></SearchHistory>
     <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.
       </div>
       <div v-for="result in results" :key="result.doi" class="step-item">
-        <DatasetCard
-          :entry="result"
-          :envVars="envVars"
-          @contextUpdate="contextCardUpdate"
-        ></DatasetCard>
+        <DatasetCard :entry="result" :envVars="envVars"></DatasetCard>
       </div>
       <el-pagination
         class="pagination"
-        :current-page.sync="page"
+        v-model:current-page="page"
         hide-on-single-page
         large
         layout="prev, pager, next"
@@ -51,55 +55,41 @@
   </el-card>
 </template>
 
-
 <script>
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
 import {
-  Button,
-  Card,
-  Drawer,
-  Icon,
-  Input,
-  Loading,
-  Pagination,
-} from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-import SearchFilters from "./SearchFilters";
-import DatasetCard from "./DatasetCard";
-import ContextCard from "./ContextCard.vue";
-import EventBus from "./EventBus";
+  ElButton as Button,
+  ElCard as Card,
+  ElDrawer as Drawer,
+  ElIcon as Icon,
+  ElInput as Input,
+  ElPagination as Pagination,
+} from 'element-plus'
+import SearchFilters from './SearchFilters.vue'
+import SearchHistory from './SearchHistory.vue'
+import DatasetCard from './DatasetCard.vue'
+import EventBus from './EventBus.js'
 
-import { AlgoliaClient } from "../algolia/algolia.js";
-import { getFilters } from "../algolia/utils.js";
-
-locale.use(lang);
-Vue.use(Button);
-Vue.use(Card);
-Vue.use(Drawer);
-Vue.use(Icon);
-Vue.use(Input);
-Vue.use(Loading);
-Vue.use(Pagination);
+import { AlgoliaClient } from '../algolia/algolia.js'
+import { getFilters, facetPropPathMapping } from '../algolia/utils.js'
 
 // handleErrors: A custom fetch error handler to recieve messages from the server
 //    even when an error is found
 var handleErrors = async function (response) {
   if (!response.ok) {
-    let parse = await response.json();
+    let parse = await response.json()
     if (parse) {
-      throw new Error(parse.message);
+      throw new Error(parse.message)
     } else {
-      throw new Error(response);
+      throw new Error(response)
     }
   }
-  return response;
-};
+  return response
+}
 
-const initial_state = {
-  searchInput: "",
-  lastSearch: "",
+var initial_state = {
+  searchInput: '',
+  lastSearch: '',
   results: [],
   numberOfHits: 0,
   filter: [],
@@ -109,13 +99,22 @@ const initial_state = {
   pageModel: 1,
   start: 0,
   hasSearched: false,
-  contextCardEntry: undefined,
-  contextCardEnabled: true,
-};
+  contextCardEnabled: false,
+}
 
 export default {
-  components: { SearchFilters, DatasetCard, ContextCard },
-  name: "SideBarContent",
+  components: {
+    SearchFilters,
+    DatasetCard,
+    SearchHistory,
+    Button,
+    Card,
+    Drawer,
+    Icon,
+    Input,
+    Pagination
+  },
+  name: 'SideBarContent',
   props: {
     visible: {
       type: Boolean,
@@ -134,21 +133,16 @@ export default {
       default: () => {},
     },
   },
-  inject: {
-    'alternateSearch' : {
-      default: undefined,
-    },
-  },
-  data: function() {
+  data: function () {
     return {
       ...this.entry,
       bodyStyle: {
-        flex: "1 1 auto",
-        "flex-flow": "column",
-        display: "flex",
+        flex: '1 1 auto',
+        'flex-flow': 'column',
+        display: 'flex',
       },
       cascaderIsReady: false,
-    };
+    }
   },
   computed: {
     // This computed property populates filter data's entry object with $data from this sidebar
@@ -156,25 +150,24 @@ export default {
       return {
         numberOfHits: this.numberOfHits,
         filterFacets: this.filter,
-      };
+      }
     },
   },
   methods: {
-    contextCardUpdate: function (val) {
-      this.contextCardEntry = val;
-    },
-    resetSearch: function() {
+    resetSearch: function () {
       this.numberOfHits = 0
+      this.discoverIds = []
       this._dois = []
       this.results = []
       this.loadingCards = false
     },
-    openSearch: function (filter, search = "") {
-      this.searchInput = search;
-      this.resetPageNavigation();
+    openSearch: function (filter, search = '') {
+      this.searchInput = search
+      this.resetPageNavigation()
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
-        this.filter = this.$refs.filtersRef.getValidatedFilters(filter);
+        this.filter =
+          this.$refs.filtersRef.getHierarchicalValidatedFilters(filter)
         //Facets provided but cannot find at least one valid
         //facet. Tell the users the search is invalid and reset
         //facets check boxes.
@@ -184,174 +177,170 @@ export default {
           this.filter &&
           this.filter.length === 0
         ) {
-          this.$refs.filtersRef.checkShowAllBoxes();
-          this.resetSearch();
+          this.$refs.filtersRef.checkShowAllBoxes()
+          this.resetSearch()
         } else if (this.filter) {
-          this.performSearch(this.filter, search);
-          this.$refs.filtersRef.setCascader(this.filter);
+          this.searchAlgolia(this.filter, search)
+          this.$refs.filtersRef.setCascader(this.filter)
         }
       } else {
         //cascader is not ready, perform search if no filter is set,
         //otherwise waith for cascader to be ready
-        this.filter = filter;
+        this.filter = filter
         if (!filter || filter.length == 0) {
-          this.performSearch(this.filter, search);
+          this.searchAlgolia(this.filter, search)
         }
       }
     },
     addFilter: function (filter) {
       if (this.cascaderIsReady) {
-        this.resetPageNavigation();
+        this.resetPageNavigation()
         if (filter) {
           if (this.$refs.filtersRef.addFilter(filter))
-            this.$refs.filtersRef.initiateSearch();
+            this.$refs.filtersRef.initiateSearch()
         }
       } else {
         if (Array.isArray(this.filter)) {
-          this.filter.push(filter);
+          this.filter.push(filter)
         } else {
-          this.filter = [filter];
+          this.filter = [filter]
         }
       }
     },
     cascaderReady: function () {
-      this.cascaderIsReady = true;
-      this.openSearch(this.filter, this.searchInput);
+      this.cascaderIsReady = true
+      this.openSearch(this.filter, this.searchInput)
     },
     clearSearchClicked: function () {
-      this.searchInput = "";
-      this.resetPageNavigation();
-      this.performSearch(this.filters, this.searchInput);
+      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.performSearch(this.filters, this.searchInput);
+        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) {
+    filterUpdate: function (filters) {
       this.filters = [...filters]
       this.resetPageNavigation()
-      this.performSearch(filters, this.searchInput)
-      this.$emit("search-changed", {
+      this.searchAlgolia(filters, this.searchInput)
+      this.$emit('search-changed', {
         value: filters,
-        type: "filter-update",
-      });
-    },
-    processSearchData: function(searchData) {
-      this.numberOfHits = searchData.total
-      this._dois = searchData.dois
-      this.results = searchData.items
-      this.loadingCards = false
-      this.scrollToTop()
-      this.$emit("search-changed", { value: this.searchInput, type: "query-update" })
-    },
-    alternateSearchCB: function(payload) {
-      this.loadingCards = false;
-      this.processSearchData(payload)
-      //console.log(payload)
-    },
-    performSearch(filters, query='') {
-      if (this.alternateSearch) {
-        this.loadingCards = true;
-        const payload = {
-          requestType: 'Search',
-          filters,
-          query,
-          numberPerPage: this.numberPerPage,
-          page: this.page
-        };
-        this.alternateSearch(payload, this.alternateSearchCB);
-      }
-      else {
-        this.searchAlgolia(filters, query);
-      }
+        type: 'filter-update',
+      })
     },
-    searchAlgolia(filters, query=''){
+    searchAlgolia(filters, query = '') {
       // Algolia search
       this.loadingCards = true
-      this.algoliaClient.anatomyInSearch(getFilters(filters), query).then(anatomy => {
-        EventBus.$emit("anatomyFound", anatomy) 
-      })
-      this.algoliaClient.search(getFilters(filters), query, this.numberPerPage, this.page).then(searchData => {
-        this.processSearchData(searchData)
-        if (this._abortController)
-          this._abortController.abort()
-        this._abortController = new AbortController()
-        const signal = this._abortController.signal
-        //Search ongoing, let the current flow progress
-        this.perItemSearch(signal, { count: 0 })
-      })
+      this.algoliaClient
+        .anatomyInSearch(getFilters(filters), query)
+        .then((anatomy) => {
+          EventBus.emit('available-facets', {
+            uberons: anatomy,
+            labels: this.algoliaClient.anatomyFacetLabels,
+          })
+        })
+      this.algoliaClient
+        .search(getFilters(filters), query, this.numberPerPage, this.page)
+        .then((searchData) => {
+          this.numberOfHits = searchData.total
+          this.discoverIds = searchData.discoverIds
+          this._dois = searchData.dois
+          this.results = searchData.items
+          this.loadingCards = false
+          this.scrollToTop()
+          this.$emit('search-changed', {
+            value: this.searchInput,
+            type: 'query-update',
+          })
+          if (this._abortController) this._abortController.abort()
+          this._abortController = new AbortController()
+          const signal = this._abortController.signal
+          //Search ongoing, let the current flow progress
+          this.perItemSearch(signal, { count: 0 })
+        })
     },
     filtersLoading: function (val) {
-      this.loadingCards = val;
+      this.loadingCards = val
     },
     numberPerPageUpdate: function (val) {
-      this.numberPerPage = val;
-      this.pageChange(1);
+      this.numberPerPage = val
+      this.pageChange(1)
     },
     pageChange: function (page) {
-      this.start = (page - 1) * this.numberPerPage;
-      this.page = page;
-      this.performSearch(this.filters, this.searchInput);
+      this.start = (page - 1) * this.numberPerPage
+      this.page = page
+      this.searchAlgolia(
+        this.filters,
+        this.searchInput,
+        this.numberPerPage,
+        this.page
+      )
     },
     handleMissingData: function (doi) {
-      let i = this.results.findIndex((res) => res.doi === doi);
-      if (this.results[i]) this.results[i].detailsReady = true;
+      let i = this.results.findIndex((res) => res.doi === doi)
+      if (this.results[i]) this.results[i].detailsReady = true
     },
     perItemSearch: function (signal, data) {
       //Maximum 10 downloads at once to prevent long waiting time
       //between unfinished search and new search
-      const maxDownloads = 10;
+      const maxDownloads = 10
       if (maxDownloads > data.count) {
-        const doi = this._dois.shift();
+        const doi = this._dois.shift()
         if (doi) {
-          data.count++;
-          this.callSciCrunch(this.envVars.API_LOCATION, {'dois': [doi]}, signal)
-            .then(result => {
-              if (result.numberOfHits === 0)
-                this.handleMissingData(doi);
-              else
-                this.perItemProcessing(result);
-              this.$refs.content.style["overflow-y"] = "scroll";
-              data.count--;
+          data.count++
+          this.callSciCrunch(this.envVars.API_LOCATION, { dois: [doi] }, signal)
+            .then((result) => {
+              if (result.numberOfHits === 0) this.handleMissingData(doi)
+              else this.resultsProcessing(result)
+              this.$refs.content.style['overflow-y'] = 'scroll'
+              data.count--
               //Async::Download finished, get the next one
-              this.perItemSearch(signal, data);
+              this.perItemSearch(signal, data)
             })
             .catch((result) => {
-              if (result.name !== "AbortError") {
-                this.handleMissingData(doi);
-                data.count--;
+              if (result.name !== 'AbortError') {
+                this.handleMissingData(doi)
+                data.count--
                 //Async::Download not aborted, get the next one
-                this.perItemSearch(signal, data);
+                this.perItemSearch(signal, data)
               }
-            });
+            })
           //Check and make another request until it gets to max downloads
-          this.perItemSearch(signal, data);
+          this.perItemSearch(signal, data)
         }
       }
     },
     scrollToTop: function () {
       if (this.$refs.content) {
-        this.$refs.content.scroll({ top: 0, behavior: "smooth" });
+        this.$refs.content.scroll({ top: 0, behavior: 'smooth' })
       }
     },
     resetPageNavigation: function () {
-      this.start = 0;
-      this.page = 1;
+      this.start = 0
+      this.page = 1
     },
-    perItemProcessing: function(data) {
-      this.lastSearch = this.searchInput;
+    resultsProcessing: function (data) {
+      this.lastSearch = this.searchInput
+
       if (data.results.length === 0) {
-        return;
+        return
       }
       data.results.forEach((element) => {
         // match the scicrunch result with algolia result
         let i = this.results.findIndex((res) =>
           element.doi ? element.doi.includes(res.doi) : false
-        );
+        )
         // Assign scicrunch results to the object
-        Object.assign(this.results[i], element);
+        Object.assign(this.results[i], element)
         // Assign the attributes that need some processing
         Object.assign(this.results[i], {
           numberSamples: element.sampleSize ? parseInt(element.sampleSize) : 0,
@@ -360,8 +349,8 @@ export default {
             : 0,
           updated:
             (element.updated && element.updated.length) > 0
-              ? element.updated[0].timestamp.split("T")[0]
-              : "",
+              ? element.updated[0].timestamp.split('T')[0]
+              : '',
           url: element.uri[0],
           datasetId: element.dataset_identifier,
           datasetRevision: element.dataset_revision,
@@ -381,89 +370,91 @@ export default {
                 ]
               : undefined
             : undefined, // This processing only includes each gender once into 'sexes'
-          scaffolds: element["abi-scaffold-metadata-file"],
-          thumbnails: element["abi-thumbnail"]
-            ? element["abi-thumbnail"]
-            : element["abi-scaffold-thumbnail"],
-          scaffoldViews: element["abi-scaffold-view-file"],
+          scaffolds: element['abi-scaffold-metadata-file'],
+          thumbnails: element['abi-thumbnail']
+            ? element['abi-thumbnail']
+            : element['abi-scaffold-thumbnail'],
+          scaffoldViews: element['abi-scaffold-view-file'],
           videos: element.video,
-          plots: element["abi-plot"],
-          images: element["common-images"],
+          plots: element['abi-plot'],
+          images: element['common-images'],
           contextualInformation:
-            element["abi-contextual-information"].length > 0
-              ? element["abi-contextual-information"]
+            element['abi-contextual-information'].length > 0
+              ? element['abi-contextual-information']
               : undefined,
-          segmentation: element["mbf-segmentation"],
-          simulation: element["abi-simulation-file"],
+          segmentation: element['mbf-segmentation'],
+          simulation: element['abi-simulation-file'],
           additionalLinks: element.additionalLinks,
           detailsReady: true,
-        });
-        Vue.set(this.results, i, this.results[i]);
-      });
+        })
+        this.results[i] = this.results[i]
+      })
     },
     createfilterParams: function (params) {
-      let p = new URLSearchParams();
+      let p = new URLSearchParams()
       //Check if field is array or value
       for (const key in params) {
         if (Array.isArray(params[key])) {
           params[key].forEach((e) => {
-            p.append(key, e);
-          });
+            p.append(key, e)
+          })
         } else {
-          p.append(key, params[key]);
+          p.append(key, params[key])
         }
       }
-      return p.toString();
+      return p.toString()
     },
     callSciCrunch: function (apiLocation, params = {}, signal) {
       return new Promise((resolve, reject) => {
         // Add parameters if we are sent them
-        let fullEndpoint = apiLocation + this.searchEndpoint + "?" + this.createfilterParams(params);
+        let fullEndpoint =
+          this.envVars.API_LOCATION +
+          this.searchEndpoint +
+          '?' +
+          this.createfilterParams(params)
         fetch(fullEndpoint, { signal })
           .then(handleErrors)
           .then((response) => response.json())
           .then((data) => resolve(data))
-          .catch((data) => reject(data));
-      });
+          .catch((data) => reject(data))
+      })
+    },
+    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() {
-    if (!this.alternateSearch) {
-      // 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);
-    }
-    this.openSearch(this.filter, this.searchInput);
+  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)
+    this.openSearch(this.filter, this.searchInput)
   },
   created: function () {
     //Create non-reactive local variables
-    this.searchEndpoint = "dataset_info/using_multiple_dois/";
+    this.searchEndpoint = 'dataset_info/using_multiple_dois/'
   },
-};
+}
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/button";
-@import "~element-ui/packages/theme-chalk/src/card";
-@import "~element-ui/packages/theme-chalk/src/drawer";
-@import "~element-ui/packages/theme-chalk/src/icon";
-@import "~element-ui/packages/theme-chalk/src/input";
-@import "~element-ui/packages/theme-chalk/src/loading";
-@import "~element-ui/packages/theme-chalk/src/pagination";
-
+<style lang="scss" scoped>
 .content-card {
   height: 100%;
   flex-flow: column;
   display: flex;
 }
 
-.button {
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-}
-
 .step-item {
   font-size: 14px;
   margin-bottom: 18px;
@@ -486,16 +477,17 @@ export default {
 .pagination {
   padding-bottom: 16px;
   background-color: white;
-  text-align: center;
+  padding-left: 95px;
+  font-weight: bold;
 }
 
-.pagination ::v-deep button {
+.pagination :deep(button) {
   background-color: white !important;
 }
-.pagination ::v-deep li {
+.pagination :deep(li) {
   background-color: white !important;
 }
-.pagination ::v-deep li.active {
+.pagination :deep(li.is-active) {
   color: $app-primary-color;
 }
 
@@ -506,18 +498,18 @@ export default {
   padding-top: 15px;
 }
 
-.content-card ::v-deep .el-card__header {
+.content-card :deep(.el-card__header) {
   background-color: #292b66;
   border: solid 1px #292b66;
 }
 
-.content-card ::v-deep .el-card__body {
+.content-card :deep(.el-card__body) {
   background-color: #f7faff;
   overflow-y: hidden;
 }
 
 .content {
-  width: 518px;
+  width: 515px;
   flex: 1 1 auto;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
   border: solid 1px #e4e7ed;
@@ -526,15 +518,15 @@ export default {
   scrollbar-width: thin;
 }
 
-.content ::v-deep .el-loading-spinner .path {
+.content :deep(.el-loading-spinner .path) {
   stroke: $app-primary-color;
 }
 
-.content ::v-deep .step-item:first-child .seperator-path {
+.content :deep(.step-item:first-child .seperator-path) {
   display: none;
 }
 
-.content ::v-deep .step-item:not(:first-child) .seperator-path {
+.content :deep(.step-item:not(:first-child) .seperator-path) {
   width: 486px;
   height: 0px;
   border: solid 1px #e4e7ed;
@@ -558,11 +550,11 @@ export default {
   background-color: #979797;
 }
 
-::v-deep .el-input__suffix {
-  padding-right: 10px;
+:deep(.el-input__suffix) {
+  padding-right: 0px;
 }
 
-::v-deep .my-drawer {
+:deep(.my-drawer) {
   background: rgba(0, 0, 0, 0);
   box-shadow: none;
 }