@abi-software/map-side-bar 1.3.37 → 1.3.38

package/src/components/SidebarContent.vue

@@ -1,7 +1,11 @@
 <template>
   <el-card :body-style="bodyStyle" class="content-card">
     <div slot="header" class="header">
-      <context-card v-if="contextCardEntry && contextCardEnabled" :entry="contextCardEntry" :envVars="envVars"/>
+      <context-card
+        v-if="contextCardEntry && contextCardEnabled"
+        :entry="contextCardEntry"
+        :envVars="envVars"
+      />
       <el-input
         class="search-input"
         placeholder="Search"
@@ -23,12 +27,15 @@
       @cascaderReady="cascaderReady"
     ></SearchFilters>
     <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 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"
+          @contextUpdate="contextCardUpdate"
+        ></DatasetCard>
       </div>
       <el-pagination
         class="pagination"
@@ -55,17 +62,17 @@ import {
   Icon,
   Input,
   Loading,
-  Pagination
+  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"
+import EventBus from "./EventBus";
 
-import {AlgoliaClient} from "../algolia/algolia.js";
-import {getFilters} from "../algolia/utils.js"
+import { AlgoliaClient } from "../algolia/algolia.js";
+import { getFilters } from "../algolia/utils.js";
 
 locale.use(lang);
 Vue.use(Button);
@@ -78,7 +85,7 @@ Vue.use(Pagination);
 
 // handleErrors: A custom fetch error handler to recieve messages from the server
 //    even when an error is found
-var handleErrors = async function(response) {
+var handleErrors = async function (response) {
   if (!response.ok) {
     let parse = await response.json();
     if (parse) {
@@ -112,53 +119,53 @@ export default {
   props: {
     visible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isDrawer: {
       type: Boolean,
-      default: true
+      default: true,
     },
     entry: {
       type: Object,
-      default: () => initial_state
+      default: () => initial_state,
     },
     envVars: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
   },
-  data: function() {
+  data: function () {
     return {
       ...this.entry,
       bodyStyle: {
         flex: "1 1 auto",
         "flex-flow": "column",
-        display: "flex"
+        display: "flex",
       },
       cascaderIsReady: false,
     };
   },
   computed: {
     // This computed property populates filter data's entry object with $data from this sidebar
-    filterEntry: function() {
+    filterEntry: function () {
       return {
         numberOfHits: this.numberOfHits,
-        filterFacets: this.filter
+        filterFacets: this.filter,
       };
-    }
+    },
   },
   methods: {
-    contextCardUpdate: function(val){
-        this.contextCardEntry = val
+    contextCardUpdate: function (val) {
+      this.contextCardEntry = val;
     },
-    resetSearch: function() {
-      this.numberOfHits = 0
-      this.discoverIds = []
-      this._dois = []
-      this.results = []
-      this.loadingCards = false
+    resetSearch: function () {
+      this.numberOfHits = 0;
+      this.discoverIds = [];
+      this._dois = [];
+      this.results = [];
+      this.loadingCards = false;
     },
-    openSearch: function(filter, search='') {
+    openSearch: function (filter, search = "") {
       this.searchInput = search;
       this.resetPageNavigation();
       //Proceed normally if cascader is ready
@@ -167,8 +174,12 @@ export default {
         //Facets provided but cannot find at least one valid
         //facet. Tell the users the search is invalid and reset
         //facets check boxes.
-        if ((filter && filter.length > 0) && 
-          (this.filter && this.filter.length === 0)) {
+        if (
+          filter &&
+          filter.length > 0 &&
+          this.filter &&
+          this.filter.length === 0
+        ) {
           this.$refs.filtersRef.checkShowAllBoxes();
           this.resetSearch();
         } else if (this.filter) {
@@ -184,7 +195,7 @@ export default {
         }
       }
     },
-    addFilter: function(filter) {
+    addFilter: function (filter) {
       if (this.cascaderIsReady) {
         this.resetPageNavigation();
         if (filter) {
@@ -199,70 +210,80 @@ export default {
         }
       }
     },
-    cascaderReady: function() {
+    cascaderReady: function () {
       this.cascaderIsReady = true;
       this.openSearch(this.filter, this.searchInput);
     },
-    clearSearchClicked: function() {
+    clearSearchClicked: function () {
       this.searchInput = "";
       this.resetPageNavigation();
       this.searchAlgolia(this.filters, this.searchInput);
     },
-    searchEvent: function(event = false) {
+    searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
         this.resetPageNavigation();
         this.searchAlgolia(this.filters, this.searchInput);
       }
     },
-    filterUpdate: function(filters) {
-      this.filters = [...filters]
-      this.resetPageNavigation()
-      this.searchAlgolia(filters, this.searchInput)
+    filterUpdate: function (filters) {
+      this.filters = [...filters];
+      this.resetPageNavigation();
+      this.searchAlgolia(filters, this.searchInput);
       this.$emit("search-changed", {
         value: filters,
-        type: "filter-update"
+        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.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 })
-      })
+      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.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;
     },
-    numberPerPageUpdate: function(val) {
+    numberPerPageUpdate: function (val) {
       this.numberPerPage = val;
       this.pageChange(1);
     },
-    pageChange: function(page) {
+    pageChange: function (page) {
       this.start = (page - 1) * this.numberPerPage;
-      this.page = page
-      this.searchAlgolia(this.filters, this.searchInput, this.numberPerPage, this.page)
+      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;
+    handleMissingData: function (doi) {
+      let i = this.results.findIndex((res) => res.doi === doi);
+      if (this.results[i]) this.results[i].detailsReady = true;
     },
-    perItemSearch: function(signal, data) {
+    perItemSearch: function (signal, data) {
       //Maximum 10 downloads at once to prevent long waiting time
       //between unfinished search and new search
       const maxDownloads = 10;
@@ -270,92 +291,105 @@ export default {
         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.resultsProcessing(result);
+          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);
             })
-            .catch(result => {
-              if (result.name !== 'AbortError') {
+            .catch((result) => {
+              if (result.name !== "AbortError") {
                 this.handleMissingData(doi);
                 data.count--;
                 //Async::Download not aborted, get the next one
                 this.perItemSearch(signal, data);
               }
             });
-            //Check and make another request until it gets to max downloads
-            this.perItemSearch(signal, data);
+          //Check and make another request until it gets to max downloads
+          this.perItemSearch(signal, data);
         }
       }
     },
-    scrollToTop: function() {
+    scrollToTop: function () {
       if (this.$refs.content) {
         this.$refs.content.scroll({ top: 0, behavior: "smooth" });
       }
     },
-    resetPageNavigation: function() {
+    resetPageNavigation: function () {
       this.start = 0;
       this.page = 1;
     },
-    resultsProcessing: function(data) {
+    resultsProcessing: function (data) {
       this.lastSearch = this.searchInput;
 
       if (data.results.length === 0) {
         return;
       }
-      data.results.forEach(element => {
+      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 )
+        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,
+        Object.assign(this.results[i], {
+          numberSamples: element.sampleSize ? parseInt(element.sampleSize) : 0,
           numberSubjects: element.subjectSize
             ? parseInt(element.subjectSize)
             : 0,
-          updated: (element.updated && element.updated.length) > 0 ? element.updated[0].timestamp.split("T")[0] : "",
+          updated:
+            (element.updated && element.updated.length) > 0
+              ? element.updated[0].timestamp.split("T")[0]
+              : "",
           url: element.uri[0],
           datasetId: element.dataset_identifier,
           datasetRevision: element.dataset_revision,
           datasetVersion: element.dataset_version,
-          organs: (element.organs && element.organs.length > 0)
-              ? [...new Set(element.organs.map(v => v.name))]
+          organs:
+            element.organs && element.organs.length > 0
+              ? [...new Set(element.organs.map((v) => v.name))]
               : undefined,
           species: element.organisms
             ? element.organisms[0].species
-              ? [...new Set(element.organisms.map((v) =>v.species ? v.species.name : null))]
+              ? [
+                  ...new Set(
+                    element.organisms.map((v) =>
+                      v.species ? v.species.name : null
+                    )
+                  ),
+                ]
               : 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'],
-          contextualInformation: element['abi-contextual-information'].length > 0 ? element['abi-contextual-information'] : undefined,
-          segmentation: element['mbf-segmentation'],
-          simulation: element['abi-simulation-file'],
+          plots: element["abi-plot"],
+          images: element["common-images"],
+          contextualInformation:
+            element["abi-contextual-information"].length > 0
+              ? element["abi-contextual-information"]
+              : undefined,
+          segmentation: element["mbf-segmentation"],
+          simulation: element["abi-simulation-file"],
           additionalLinks: element.additionalLinks,
           detailsReady: true,
-        })
-        Vue.set(this.results, i, this.results[i])
+        });
+        Vue.set(this.results, i, this.results[i]);
       });
     },
-    createfilterParams: function(params) {
+    createfilterParams: function (params) {
       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 => {
+          params[key].forEach((e) => {
             p.append(key, e);
           });
         } else {
@@ -364,33 +398,49 @@ export default {
       }
       return p.toString();
     },
-    callSciCrunch: function(apiLocation, params = {}, signal) {
+    callSciCrunch: function (apiLocation, params = {}, signal) {
       return new Promise((resolve, reject) => {
         // Add parameters if we are sent them
-        let fullEndpoint = this.envVars.API_LOCATION + this.searchEndpoint + "?" + this.createfilterParams(params);
-        fetch(fullEndpoint, {signal})
+        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));
+          .then((response) => response.json())
+          .then((data) => resolve(data))
+          .catch((data) => reject(data));
       });
     },
   },
-  mounted: function() {
+  mounted: function () {
     // initialise algolia
-    this.algoliaClient = new AlgoliaClient(this.envVars.ALGOLIA_ID, this.envVars.ALGOLIA_KEY, this.envVars.PENNSIEVE_API_LOCATION);
+    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() {
+  created: function () {
     //Create non-reactive local variables
     this.searchEndpoint = "dataset_info/using_multiple_dois/";
-  }
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<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";
+
 .content-card {
   height: 100%;
   flex-flow: column;
@@ -398,8 +448,8 @@ export default {
 }
 
 .button {
-  background-color: #8300bf;
-  border: #8300bf;
+  background-color: $app-primary-color;
+  border: $app-primary-color;
   color: white;
 }
 
@@ -428,14 +478,14 @@ export default {
   text-align: center;
 }
 
-.pagination >>> button {
+.pagination ::v-deep button {
   background-color: white !important;
 }
-.pagination >>> li {
+.pagination ::v-deep li {
   background-color: white !important;
 }
-.pagination >>> li.active {
-  color: #8300bf;
+.pagination ::v-deep li.active {
+  color: $app-primary-color;
 }
 
 .error-feedback {
@@ -445,12 +495,12 @@ export default {
   padding-top: 15px;
 }
 
-.content-card >>> .el-card__header {
+.content-card ::v-deep .el-card__header {
   background-color: #292b66;
   border: solid 1px #292b66;
 }
 
-.content-card >>> .el-card__body {
+.content-card ::v-deep .el-card__body {
   background-color: #f7faff;
   overflow-y: hidden;
 }
@@ -465,15 +515,15 @@ export default {
   scrollbar-width: thin;
 }
 
-.content >>> .el-loading-spinner .path {
-  stroke: #8300bf;
+.content ::v-deep .el-loading-spinner .path {
+  stroke: $app-primary-color;
 }
 
-.content >>> .step-item:first-child .seperator-path{
-   display: none;
+.content ::v-deep .step-item:first-child .seperator-path {
+  display: none;
 }
 
-.content >>> .step-item:not(:first-child) .seperator-path{
+.content ::v-deep .step-item:not(:first-child) .seperator-path {
   width: 486px;
   height: 0px;
   border: solid 1px #e4e7ed;
@@ -497,11 +547,11 @@ export default {
   background-color: #979797;
 }
 
->>> .el-input__suffix {
+::v-deep .el-input__suffix {
   padding-right: 10px;
 }
 
->>> .my-drawer {
+::v-deep .my-drawer {
   background: rgba(0, 0, 0, 0);
   box-shadow: none;
 }

package/src/components/Tabs.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
 
 .tab-container{
   height: 28px;
@@ -44,7 +44,7 @@ export default {
 .title {
   width: 101px;
   height: 28px;
-  border: solid 1px #dcdfe6;
+  border: solid 1px $lineColor1;
   border-bottom: none;
   background-color: white;
   display:inline-block;
@@ -68,11 +68,11 @@ export default {
 }
 
 .parent-dialog:hover .title-text {
-  color:#8300bf;
+  color:$app-primary-color;
 }
 
 .highlightText {
-  color:#8300bf;
+  color:$app-primary-color;
 }
 
 </style>

package/vue.config.js

@@ -8,4 +8,14 @@ module.exports = {
       config.externals =   [ nodeExternals({allowlist: [/^marked/]}) ];
     }
   },
+  css: {
+    sourceMap: process.env.NODE_ENV === 'wc',
+    extract: process.env.NODE_ENV !== 'wc',
+    //Import variables into all stylesheets.
+    loaderOptions: {
+      sass: {
+        prependData: `@import '@/assets/styles';`
+      }
+    }
+  }
 }