{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/SidebarContent.vue?vue&type=style&index=0&id=d2b79498&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/SidebarContent.vue","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvYnV0dG9uIjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9jYXJkIjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9kcmF3ZXIiOw0KQGltcG9ydCAifmVsZW1lbnQtdWkvcGFja2FnZXMvdGhlbWUtY2hhbGsvc3JjL2ljb24iOw0KQGltcG9ydCAifmVsZW1lbnQtdWkvcGFja2FnZXMvdGhlbWUtY2hhbGsvc3JjL2lucHV0IjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9sb2FkaW5nIjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9wYWdpbmF0aW9uIjsNCg0KLmNvbnRlbnQtY2FyZCB7DQogIGhlaWdodDogMTAwJTsNCiAgZmxleC1mbG93OiBjb2x1bW47DQogIGRpc3BsYXk6IGZsZXg7DQp9DQoNCi5idXR0b24gew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7DQogIGJvcmRlcjogJGFwcC1wcmltYXJ5LWNvbG9yOw0KICBjb2xvcjogd2hpdGU7DQp9DQoNCi5zdGVwLWl0ZW0gew0KICBmb250LXNpemU6IDE0cHg7DQogIG1hcmdpbi1ib3R0b206IDE4cHg7DQogIHRleHQtYWxpZ246IGxlZnQ7DQp9DQoNCi5zZWFyY2gtaW5wdXQgew0KICB3aWR0aDogMjk4cHggIWltcG9ydGFudDsNCiAgaGVpZ2h0OiA0MHB4Ow0KICBwYWRkaW5nLXJpZ2h0OiAxNHB4Ow0KICBhbGlnbi1pdGVtczogbGVmdDsNCn0NCg0KLmhlYWRlciB7DQogIGJvcmRlcjogc29saWQgMXB4ICMyOTJiNjY7DQogIGJhY2tncm91bmQtY29sb3I6ICMyOTJiNjY7DQogIHRleHQtYWxpZ246IGxlZnQ7DQp9DQoNCi5wYWdpbmF0aW9uIHsNCiAgcGFkZGluZy1ib3R0b206IDE2cHg7DQogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOw0KICB0ZXh0LWFsaWduOiBjZW50ZXI7DQp9DQoNCi5wYWdpbmF0aW9uIDo6di1kZWVwIGJ1dHRvbiB7DQogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlICFpbXBvcnRhbnQ7DQp9DQoucGFnaW5hdGlvbiA6OnYtZGVlcCBsaSB7DQogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlICFpbXBvcnRhbnQ7DQp9DQoucGFnaW5hdGlvbiA6OnYtZGVlcCBsaS5hY3RpdmUgew0KICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOw0KfQ0KDQouZXJyb3ItZmVlZGJhY2sgew0KICBmb250LWZhbWlseTogQXNhcDsNCiAgZm9udC1zaXplOiAxNHB4Ow0KICBmb250LXN0eWxlOiBpdGFsaWM7DQogIHBhZGRpbmctdG9wOiAxNXB4Ow0KfQ0KDQouY29udGVudC1jYXJkIDo6di1kZWVwIC5lbC1jYXJkX19oZWFkZXIgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjkyYjY2Ow0KICBib3JkZXI6IHNvbGlkIDFweCAjMjkyYjY2Ow0KfQ0KDQouY29udGVudC1jYXJkIDo6di1kZWVwIC5lbC1jYXJkX19ib2R5IHsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2Y3ZmFmZjsNCiAgb3ZlcmZsb3cteTogaGlkZGVuOw0KfQ0KDQouY29udGVudCB7DQogIHdpZHRoOiA1MThweDsNCiAgZmxleDogMSAxIGF1dG87DQogIGJveC1zaGFkb3c6IDAgMnB4IDEycHggMCByZ2JhKDAsIDAsIDAsIDAuMDYpOw0KICBib3JkZXI6IHNvbGlkIDFweCAjZTRlN2VkOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOw0KICBvdmVyZmxvdy15OiBzY3JvbGw7DQogIHNjcm9sbGJhci13aWR0aDogdGhpbjsNCn0NCg0KLmNvbnRlbnQgOjp2LWRlZXAgLmVsLWxvYWRpbmctc3Bpbm5lciAucGF0aCB7DQogIHN0cm9rZTogJGFwcC1wcmltYXJ5LWNvbG9yOw0KfQ0KDQouY29udGVudCA6OnYtZGVlcCAuc3RlcC1pdGVtOmZpcnN0LWNoaWxkIC5zZXBlcmF0b3ItcGF0aCB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5jb250ZW50IDo6di1kZWVwIC5zdGVwLWl0ZW06bm90KDpmaXJzdC1jaGlsZCkgLnNlcGVyYXRvci1wYXRoIHsNCiAgd2lkdGg6IDQ4NnB4Ow0KICBoZWlnaHQ6IDBweDsNCiAgYm9yZGVyOiBzb2xpZCAxcHggI2U0ZTdlZDsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2U0ZTdlZDsNCn0NCg0KLnNjcm9sbGJhcjo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2sgew0KICBib3JkZXItcmFkaXVzOiAxMHB4Ow0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjVmNWY1Ow0KfQ0KDQouc2Nyb2xsYmFyOjotd2Via2l0LXNjcm9sbGJhciB7DQogIHdpZHRoOiAxMnB4Ow0KICByaWdodDogLTEycHg7DQogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7DQp9DQoNCi5zY3JvbGxiYXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHsNCiAgYm9yZGVyLXJhZGl1czogNHB4Ow0KICBib3gtc2hhZG93OiAwIDJweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuMDYpOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjOTc5Nzk3Ow0KfQ0KDQo6OnYtZGVlcCAuZWwtaW5wdXRfX3N1ZmZpeCB7DQogIHBhZGRpbmctcmlnaHQ6IDEwcHg7DQp9DQoNCjo6di1kZWVwIC5teS1kcmF3ZXIgew0KICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDApOw0KICBib3gtc2hhZG93OiBub25lOw0KfQ0K"},{"version":3,"sources":["SidebarContent.vue"],"names":[],"mappings":";AAybA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"SidebarContent.vue","sourceRoot":"node_modules/@abi-software/map-side-bar/src/components","sourcesContent":["<template>\r\n  <el-card :body-style=\"bodyStyle\" class=\"content-card\">\r\n    <div slot=\"header\" class=\"header\">\r\n      <el-input\r\n        class=\"search-input\"\r\n        placeholder=\"Search\"\r\n        v-model=\"searchInput\"\r\n        @keyup.native=\"searchEvent\"\r\n        clearable\r\n        @clear=\"clearSearchClicked\"\r\n      ></el-input>\r\n      <el-button class=\"button\" @click=\"searchEvent\">Search</el-button>\r\n    </div>\r\n    <SearchFilters\r\n      class=\"filters\"\r\n      ref=\"filtersRef\"\r\n      :entry=\"filterEntry\"\r\n      :envVars=\"envVars\"\r\n      @filterResults=\"filterUpdate\"\r\n      @numberPerPage=\"numberPerPageUpdate\"\r\n      @loading=\"filtersLoading\"\r\n      @cascaderReady=\"cascaderReady\"\r\n    ></SearchFilters>\r\n    <search-history ref=\"searchHistory\" @search=\"searchHistorySearch\"></search-history>\r\n    <div class=\"content scrollbar\" v-loading=\"loadingCards\" ref=\"content\">\r\n      <div class=\"error-feedback\" v-if=\"results.length === 0 && !loadingCards\">\r\n        No results found - Please change your search / filter criteria.\r\n      </div>\r\n      <div v-for=\"result in results\" :key=\"result.doi\" class=\"step-item\">\r\n        <DatasetCard\r\n          :entry=\"result\"\r\n          :envVars=\"envVars\"\r\n        ></DatasetCard>\r\n      </div>\r\n      <el-pagination\r\n        class=\"pagination\"\r\n        :current-page.sync=\"page\"\r\n        hide-on-single-page\r\n        large\r\n        layout=\"prev, pager, next\"\r\n        :page-size=\"numberPerPage\"\r\n        :total=\"numberOfHits\"\r\n        @current-change=\"pageChange\"\r\n      ></el-pagination>\r\n    </div>\r\n  </el-card>\r\n</template>\r\n\r\n\r\n<script>\r\n/* eslint-disable no-alert, no-console */\r\nimport Vue from \"vue\";\r\nimport {\r\n  Button,\r\n  Card,\r\n  Drawer,\r\n  Icon,\r\n  Input,\r\n  Loading,\r\n  Pagination,\r\n} from \"element-ui\";\r\nimport lang from \"element-ui/lib/locale/lang/en\";\r\nimport locale from \"element-ui/lib/locale\";\r\nimport SearchFilters from \"./SearchFilters\";\r\nimport SearchHistory from \"./SearchHistory\";\r\nimport DatasetCard from \"./DatasetCard\";\r\nimport EventBus from \"./EventBus\";\r\n\r\nimport { AlgoliaClient } from \"../algolia/algolia.js\";\r\nimport { getFilters, facetPropPathMapping } from \"../algolia/utils.js\";\r\n\r\nlocale.use(lang);\r\nVue.use(Button);\r\nVue.use(Card);\r\nVue.use(Drawer);\r\nVue.use(Icon);\r\nVue.use(Input);\r\nVue.use(Loading);\r\nVue.use(Pagination);\r\n\r\n// handleErrors: A custom fetch error handler to recieve messages from the server\r\n//    even when an error is found\r\nvar handleErrors = async function (response) {\r\n  if (!response.ok) {\r\n    let parse = await response.json();\r\n    if (parse) {\r\n      throw new Error(parse.message);\r\n    } else {\r\n      throw new Error(response);\r\n    }\r\n  }\r\n  return response;\r\n};\r\n\r\nvar initial_state = {\r\n  searchInput: \"\",\r\n  lastSearch: \"\",\r\n  results: [],\r\n  numberOfHits: 0,\r\n  filter: [],\r\n  loadingCards: false,\r\n  numberPerPage: 10,\r\n  page: 1,\r\n  pageModel: 1,\r\n  start: 0,\r\n  hasSearched: false,\r\n  contextCardEnabled: false,\r\n};\r\n\r\nexport default {\r\n  components: { SearchFilters, DatasetCard, SearchHistory },\r\n  name: \"SideBarContent\",\r\n  props: {\r\n    visible: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    isDrawer: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    entry: {\r\n      type: Object,\r\n      default: () => initial_state,\r\n    },\r\n    envVars: {\r\n      type: Object,\r\n      default: () => {},\r\n    },\r\n  },\r\n  data: function () {\r\n    return {\r\n      ...this.entry,\r\n      bodyStyle: {\r\n        flex: \"1 1 auto\",\r\n        \"flex-flow\": \"column\",\r\n        display: \"flex\",\r\n      },\r\n      cascaderIsReady: false,\r\n    };\r\n  },\r\n  computed: {\r\n    // This computed property populates filter data's entry object with $data from this sidebar\r\n    filterEntry: function () {\r\n      return {\r\n        numberOfHits: this.numberOfHits,\r\n        filterFacets: this.filter,\r\n      };\r\n    },\r\n  },\r\n  methods: {\r\n    resetSearch: function () {\r\n      this.numberOfHits = 0;\r\n      this.discoverIds = [];\r\n      this._dois = [];\r\n      this.results = [];\r\n      this.loadingCards = false;\r\n    },\r\n    openSearch: function (filter, search = \"\") {\r\n      this.searchInput = search;\r\n      this.resetPageNavigation();\r\n      //Proceed normally if cascader is ready\r\n      if (this.cascaderIsReady) {\r\n        this.filter = this.$refs.filtersRef.getHierarchicalValidatedFilters(filter)\r\n        //Facets provided but cannot find at least one valid\r\n        //facet. Tell the users the search is invalid and reset\r\n        //facets check boxes.\r\n        if (\r\n          filter &&\r\n          filter.length > 0 &&\r\n          this.filter &&\r\n          this.filter.length === 0\r\n        ) {\r\n          this.$refs.filtersRef.checkShowAllBoxes();\r\n          this.resetSearch();\r\n        } else if (this.filter) {\r\n          this.searchAlgolia(this.filter, search);\r\n          this.$refs.filtersRef.setCascader(this.filter);\r\n        }\r\n      } else {\r\n        //cascader is not ready, perform search if no filter is set,\r\n        //otherwise waith for cascader to be ready\r\n        this.filter = filter;\r\n        if (!filter || filter.length == 0) {\r\n          this.searchAlgolia(this.filter, search);\r\n        }\r\n      }\r\n    },\r\n    addFilter: function (filter) {\r\n      if (this.cascaderIsReady) {\r\n        this.resetPageNavigation();\r\n        if (filter) {\r\n          if (this.$refs.filtersRef.addFilter(filter))\r\n            this.$refs.filtersRef.initiateSearch();\r\n        }\r\n      } else {\r\n        if (Array.isArray(this.filter)) {\r\n          this.filter.push(filter);\r\n        } else {\r\n          this.filter = [filter];\r\n        }\r\n      }\r\n    },\r\n    cascaderReady: function () {\r\n      this.cascaderIsReady = true;\r\n      this.openSearch(this.filter, this.searchInput);\r\n    },\r\n    clearSearchClicked: function () {\r\n      this.searchInput = \"\";\r\n      this.resetPageNavigation();\r\n      this.searchAlgolia(this.filters, this.searchInput);\r\n      this.$refs.searchHistory.selectValue = 'Full search history'\r\n    },\r\n    searchEvent: function (event = false) {\r\n      if (event.keyCode === 13 || event instanceof MouseEvent) {\r\n        this.resetPageNavigation();\r\n        this.searchAlgolia(this.filters, this.searchInput);\r\n        this.$refs.searchHistory.selectValue = 'Full search history'\r\n        this.$refs.searchHistory.addSearchToHistory(this.filters, this.searchInput);\r\n      }\r\n    },\r\n    filterUpdate: function (filters) {\r\n      this.filters = [...filters];\r\n      this.resetPageNavigation();\r\n      this.searchAlgolia(filters, this.searchInput);\r\n      this.$emit(\"search-changed\", {\r\n        value: filters,\r\n        type: \"filter-update\",\r\n      });\r\n    },\r\n    searchAlgolia(filters, query = \"\") {\r\n      // Algolia search\r\n      this.loadingCards = true;\r\n      this.algoliaClient\r\n        .anatomyInSearch(getFilters(filters), query)\r\n        .then((anatomy) => {\r\n          EventBus.$emit(\"available-facets\", {\r\n            'uberons': anatomy,\r\n            'labels': this.algoliaClient.anatomyFacetLabels\r\n          });\r\n        });\r\n      this.algoliaClient\r\n        .search(getFilters(filters), query, this.numberPerPage, this.page)\r\n        .then((searchData) => {\r\n          this.numberOfHits = searchData.total;\r\n          this.discoverIds = searchData.discoverIds;\r\n          this._dois = searchData.dois;\r\n          this.results = searchData.items;\r\n          this.loadingCards = false;\r\n          this.scrollToTop();\r\n          this.$emit(\"search-changed\", {\r\n            value: this.searchInput,\r\n            type: \"query-update\",\r\n          });\r\n          if (this._abortController) this._abortController.abort();\r\n          this._abortController = new AbortController();\r\n          const signal = this._abortController.signal;\r\n          //Search ongoing, let the current flow progress\r\n          this.perItemSearch(signal, { count: 0 });\r\n        });\r\n    },\r\n    filtersLoading: function (val) {\r\n      this.loadingCards = val;\r\n    },\r\n    numberPerPageUpdate: function (val) {\r\n      this.numberPerPage = val;\r\n      this.pageChange(1);\r\n    },\r\n    pageChange: function (page) {\r\n      this.start = (page - 1) * this.numberPerPage;\r\n      this.page = page;\r\n      this.searchAlgolia(\r\n        this.filters,\r\n        this.searchInput,\r\n        this.numberPerPage,\r\n        this.page\r\n      );\r\n    },\r\n    handleMissingData: function (doi) {\r\n      let i = this.results.findIndex((res) => res.doi === doi);\r\n      if (this.results[i]) this.results[i].detailsReady = true;\r\n    },\r\n    perItemSearch: function (signal, data) {\r\n      //Maximum 10 downloads at once to prevent long waiting time\r\n      //between unfinished search and new search\r\n      const maxDownloads = 10;\r\n      if (maxDownloads > data.count) {\r\n        const doi = this._dois.shift();\r\n        if (doi) {\r\n          data.count++;\r\n          this.callSciCrunch(this.envVars.API_LOCATION, { dois: [doi] }, signal)\r\n            .then((result) => {\r\n              if (result.numberOfHits === 0) this.handleMissingData(doi);\r\n              else this.resultsProcessing(result);\r\n              this.$refs.content.style[\"overflow-y\"] = \"scroll\";\r\n              data.count--;\r\n              //Async::Download finished, get the next one\r\n              this.perItemSearch(signal, data);\r\n            })\r\n            .catch((result) => {\r\n              if (result.name !== \"AbortError\") {\r\n                this.handleMissingData(doi);\r\n                data.count--;\r\n                //Async::Download not aborted, get the next one\r\n                this.perItemSearch(signal, data);\r\n              }\r\n            });\r\n          //Check and make another request until it gets to max downloads\r\n          this.perItemSearch(signal, data);\r\n        }\r\n      }\r\n    },\r\n    scrollToTop: function () {\r\n      if (this.$refs.content) {\r\n        this.$refs.content.scroll({ top: 0, behavior: \"smooth\" });\r\n      }\r\n    },\r\n    resetPageNavigation: function () {\r\n      this.start = 0;\r\n      this.page = 1;\r\n    },\r\n    resultsProcessing: function (data) {\r\n      this.lastSearch = this.searchInput;\r\n\r\n      if (data.results.length === 0) {\r\n        return;\r\n      }\r\n      data.results.forEach((element) => {\r\n        // match the scicrunch result with algolia result\r\n        let i = this.results.findIndex((res) =>\r\n          element.doi ? element.doi.includes(res.doi) : false\r\n        );\r\n        // Assign scicrunch results to the object\r\n        Object.assign(this.results[i], element);\r\n        // Assign the attributes that need some processing\r\n        Object.assign(this.results[i], {\r\n          numberSamples: element.sampleSize ? parseInt(element.sampleSize) : 0,\r\n          numberSubjects: element.subjectSize\r\n            ? parseInt(element.subjectSize)\r\n            : 0,\r\n          updated:\r\n            (element.updated && element.updated.length) > 0\r\n              ? element.updated[0].timestamp.split(\"T\")[0]\r\n              : \"\",\r\n          url: element.uri[0],\r\n          datasetId: element.dataset_identifier,\r\n          datasetRevision: element.dataset_revision,\r\n          datasetVersion: element.dataset_version,\r\n          organs:\r\n            element.organs && element.organs.length > 0\r\n              ? [...new Set(element.organs.map((v) => v.name))]\r\n              : undefined,\r\n          species: element.organisms\r\n            ? element.organisms[0].species\r\n              ? [\r\n                  ...new Set(\r\n                    element.organisms.map((v) =>\r\n                      v.species ? v.species.name : null\r\n                    )\r\n                  ),\r\n                ]\r\n              : undefined\r\n            : undefined, // This processing only includes each gender once into 'sexes'\r\n          scaffolds: element[\"abi-scaffold-metadata-file\"],\r\n          thumbnails: element[\"abi-thumbnail\"]\r\n            ? element[\"abi-thumbnail\"]\r\n            : element[\"abi-scaffold-thumbnail\"],\r\n          scaffoldViews: element[\"abi-scaffold-view-file\"],\r\n          videos: element.video,\r\n          plots: element[\"abi-plot\"],\r\n          images: element[\"common-images\"],\r\n          contextualInformation:\r\n            element[\"abi-contextual-information\"].length > 0\r\n              ? element[\"abi-contextual-information\"]\r\n              : undefined,\r\n          segmentation: element[\"mbf-segmentation\"],\r\n          simulation: element[\"abi-simulation-file\"],\r\n          additionalLinks: element.additionalLinks,\r\n          detailsReady: true,\r\n        });\r\n        Vue.set(this.results, i, this.results[i]);\r\n      });\r\n    },\r\n    createfilterParams: function (params) {\r\n      let p = new URLSearchParams();\r\n      //Check if field is array or value\r\n      for (const key in params) {\r\n        if (Array.isArray(params[key])) {\r\n          params[key].forEach((e) => {\r\n            p.append(key, e);\r\n          });\r\n        } else {\r\n          p.append(key, params[key]);\r\n        }\r\n      }\r\n      return p.toString();\r\n    },\r\n    callSciCrunch: function (apiLocation, params = {}, signal) {\r\n      return new Promise((resolve, reject) => {\r\n        // Add parameters if we are sent them\r\n        let fullEndpoint =\r\n          this.envVars.API_LOCATION +\r\n          this.searchEndpoint +\r\n          \"?\" +\r\n          this.createfilterParams(params);\r\n        fetch(fullEndpoint, { signal })\r\n          .then(handleErrors)\r\n          .then((response) => response.json())\r\n          .then((data) => resolve(data))\r\n          .catch((data) => reject(data));\r\n      });\r\n    },\r\n    getAlgoliaFacets: async function(){\r\n      let facets = await this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)\r\n      return facets;\r\n    },\r\n    searchHistorySearch: function(item){\r\n      this.searchInput = item.search;\r\n      this.filters = item.filters;\r\n      this.openSearch(item.filters, item.search);\r\n    }\r\n  },\r\n  mounted: function () {\r\n    // initialise algolia\r\n    this.algoliaClient = new AlgoliaClient(\r\n      this.envVars.ALGOLIA_ID,\r\n      this.envVars.ALGOLIA_KEY,\r\n      this.envVars.PENNSIEVE_API_LOCATION\r\n    );\r\n    this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);\r\n    this.openSearch(this.filter, this.searchInput);\r\n  },\r\n  created: function () {\r\n    //Create non-reactive local variables\r\n    this.searchEndpoint = \"dataset_info/using_multiple_dois/\";\r\n  },\r\n};\r\n</script>\r\n\r\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\r\n<style scoped lang=\"scss\">\r\n@import \"~element-ui/packages/theme-chalk/src/button\";\r\n@import \"~element-ui/packages/theme-chalk/src/card\";\r\n@import \"~element-ui/packages/theme-chalk/src/drawer\";\r\n@import \"~element-ui/packages/theme-chalk/src/icon\";\r\n@import \"~element-ui/packages/theme-chalk/src/input\";\r\n@import \"~element-ui/packages/theme-chalk/src/loading\";\r\n@import \"~element-ui/packages/theme-chalk/src/pagination\";\r\n\r\n.content-card {\r\n  height: 100%;\r\n  flex-flow: column;\r\n  display: flex;\r\n}\r\n\r\n.button {\r\n  background-color: $app-primary-color;\r\n  border: $app-primary-color;\r\n  color: white;\r\n}\r\n\r\n.step-item {\r\n  font-size: 14px;\r\n  margin-bottom: 18px;\r\n  text-align: left;\r\n}\r\n\r\n.search-input {\r\n  width: 298px !important;\r\n  height: 40px;\r\n  padding-right: 14px;\r\n  align-items: left;\r\n}\r\n\r\n.header {\r\n  border: solid 1px #292b66;\r\n  background-color: #292b66;\r\n  text-align: left;\r\n}\r\n\r\n.pagination {\r\n  padding-bottom: 16px;\r\n  background-color: white;\r\n  text-align: center;\r\n}\r\n\r\n.pagination ::v-deep button {\r\n  background-color: white !important;\r\n}\r\n.pagination ::v-deep li {\r\n  background-color: white !important;\r\n}\r\n.pagination ::v-deep li.active {\r\n  color: $app-primary-color;\r\n}\r\n\r\n.error-feedback {\r\n  font-family: Asap;\r\n  font-size: 14px;\r\n  font-style: italic;\r\n  padding-top: 15px;\r\n}\r\n\r\n.content-card ::v-deep .el-card__header {\r\n  background-color: #292b66;\r\n  border: solid 1px #292b66;\r\n}\r\n\r\n.content-card ::v-deep .el-card__body {\r\n  background-color: #f7faff;\r\n  overflow-y: hidden;\r\n}\r\n\r\n.content {\r\n  width: 518px;\r\n  flex: 1 1 auto;\r\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);\r\n  border: solid 1px #e4e7ed;\r\n  background-color: #ffffff;\r\n  overflow-y: scroll;\r\n  scrollbar-width: thin;\r\n}\r\n\r\n.content ::v-deep .el-loading-spinner .path {\r\n  stroke: $app-primary-color;\r\n}\r\n\r\n.content ::v-deep .step-item:first-child .seperator-path {\r\n  display: none;\r\n}\r\n\r\n.content ::v-deep .step-item:not(:first-child) .seperator-path {\r\n  width: 486px;\r\n  height: 0px;\r\n  border: solid 1px #e4e7ed;\r\n  background-color: #e4e7ed;\r\n}\r\n\r\n.scrollbar::-webkit-scrollbar-track {\r\n  border-radius: 10px;\r\n  background-color: #f5f5f5;\r\n}\r\n\r\n.scrollbar::-webkit-scrollbar {\r\n  width: 12px;\r\n  right: -12px;\r\n  background-color: #f5f5f5;\r\n}\r\n\r\n.scrollbar::-webkit-scrollbar-thumb {\r\n  border-radius: 4px;\r\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);\r\n  background-color: #979797;\r\n}\r\n\r\n::v-deep .el-input__suffix {\r\n  padding-right: 10px;\r\n}\r\n\r\n::v-deep .my-drawer {\r\n  background: rgba(0, 0, 0, 0);\r\n  box-shadow: none;\r\n}\r\n</style>\r\n"]}]}