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

package/src/components/DatasetCard.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="dataset-card-container"  ref="container">
-    <div class="dataset-card"  ref="card">
+  <div class="dataset-card-container" ref="container">
+    <div class="dataset-card" ref="card">
       <div class="seperator-path"></div>
-      <div v-loading="loading" class="card" >
+      <div v-loading="loading" class="card">
         <span class="card-left">
-          <image-gallery v-if="!loading && datasetId" 
-            :datasetId="datasetId"
+          <ImageGallery
+            v-if="!loading && discoverId"
+            :datasetId="discoverId"
             :datasetVersion="version"
-            :dataLocation="dataLocation"
             :entry="entry"
             :envVars="envVars"
             :label="label"
@@ -15,19 +15,31 @@
             :dataset-biolucida="biolucidaData"
             :category="currentCategory"
             @card-clicked="galleryClicked"
-            :key="datasetId"
           />
         </span>
-        <div class="card-right" >
-          <div class="title" @click="cardClicked">{{entry.name}}</div>
-          <div class="details">{{contributors}} {{entry.publishDate ? `(${publishYear})` : ''}}</div>
-          <div class="details">{{samples}}</div>
-          <div v-if="!entry.detailsReady" class="details loading-icon" v-loading="!entry.detailsReady"></div>
+        <div class="card-right">
+          <div class="title" @click="cardClicked">{{ entry.name }}</div>
+          <div class="details">
+            {{ contributors }} {{ entry.publishDate ? `(${publishYear})` : '' }}
+          </div>
+          <div class="details">{{ samples }}</div>
+          <div
+            v-if="!entry.detailsReady"
+            class="details loading-icon"
+            v-loading="!entry.detailsReady"
+          ></div>
           <div>
-            <el-button v-if="entry.simulation"  @click="openRepository" size="mini" class="button" icon="el-icon-view">View repository</el-button>
+            <el-button
+              v-if="entry.simulation"
+              @click="openRepository"
+              size="small"
+              class="button"
+              :icon="ElIconView"
+              >View repository</el-button
+            >
           </div>
           <div class="badges-container">
-            <badges-group
+            <BadgesGroup
               :entry="entry"
               :dataset-biolucida="biolucidaData"
               @categoryChanged="categoryChanged"
@@ -39,29 +51,31 @@
   </div>
 </template>
 
-
 <script>
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import BadgesGroup from "./BadgesGroup.vue";
-import { Button, Icon } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-import EventBus from "./EventBus"
-import speciesMap from "./species-map";
-import ImageGallery from "./ImageGallery.vue";
-
-locale.use(lang);
-Vue.use(Button);
-Vue.use(Icon);
+import { View as ElIconView } from '@element-plus/icons-vue'
+import BadgesGroup from './BadgesGroup.vue'
+import {
+  ElButton as Button,
+  ElIcon as Icon
+} from 'element-plus'
+import EventBus from './EventBus.js'
+import speciesMap from './species-map.js'
+import ImageGallery from './ImageGallery.vue'
+import MissingImage from '@/../assets/missing-image.svg'
 
 export default {
-  name: "DatasetCard",
-  components: { BadgesGroup, ImageGallery },
-  inject: {
-    'alternateSearch' : {
-      default: undefined,
-    },
+  data() {
+    return {
+      ElIconView,
+    }
+  },
+  name: 'DatasetCard',
+  components: {
+    BadgesGroup,
+    ImageGallery,
+    Button,
+    Icon
   },
   props: {
     /**
@@ -70,115 +84,120 @@ export default {
      */
     entry: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     envVars: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
   },
   data: function () {
     return {
-      thumbnail: require('@/../assets/missing-image.svg'),
+      thumbnail: MissingImage,
       dataLocation: this.entry.doi,
-      datasetId: undefined,
+      discoverId: undefined,
       loading: true,
       version: 1,
       lastDoi: undefined,
       biolucidaData: undefined,
-      currentCategory: "All"
-    };
+      currentCategory: 'All',
+    }
   },
   computed: {
-    contributors: function() {
-      let text = "";
+    contributors: function () {
+      let text = ''
       if (this.entry.contributors) {
         if (this.entry.contributors.length === 1) {
-          text = this.lastName(this.entry.contributors[0].name);
+          text = this.lastName(this.entry.contributors[0].name)
         } else if (this.entry.contributors.length === 2) {
-          text = this.lastName(this.entry.contributors[0].name) + " & " + this.lastName(this.entry.contributors[1].name);
+          text =
+            this.lastName(this.entry.contributors[0].name) +
+            ' & ' +
+            this.lastName(this.entry.contributors[1].name)
         } else if (this.entry.contributors.length > 2) {
-          text = this.lastName(this.entry.contributors[0].name) + " et al.";
+          text = this.lastName(this.entry.contributors[0].name) + ' et al.'
         }
       }
-      return text;
+      return text
     },
-    samples: function() {
-      let text = "";
+    samples: function () {
+      let text = ''
       if (this.entry.species) {
-        if (this.entry.species.length > 0 &&
-          speciesMap[this.entry.species[0].toLowerCase()]) {
-          text = `${speciesMap[this.entry.species[0].toLowerCase()]}`;
+        if (speciesMap[this.entry.species[0].toLowerCase()]) {
+          text = `${speciesMap[this.entry.species[0].toLowerCase()]}`
         } else {
-          text = `${this.entry.species}`;
+          text = `${this.entry.species}`
         }
       }
       if (this.entry.numberSamples > 0) {
-        text += " (";
+        text += ' ('
         if (this.entry.numberSamples === 1) {
-          text += `${this.entry.numberSamples} sample`;
+          text += `${this.entry.numberSamples} sample`
         } else if (this.entry.numberSamples > 1) {
-          text += `${this.entry.numberSamples} samples`;
+          text += `${this.entry.numberSamples} samples`
         }
         if (this.entry.numberSubjects === 1) {
-          text += ` from ${this.entry.numberSubjects} subject`;
+          text += ` from ${this.entry.numberSubjects} subject`
         } else if (this.entry.numberSamples > 1) {
-          text += ` from ${this.entry.numberSubjects} subjects`;
+          text += ` from ${this.entry.numberSubjects} subjects`
         }
-        text += ")";
+        text += ')'
       }
 
-      return text;
+      return text
     },
-    label: function(){
+    label: function () {
       return this.entry.organs ? this.entry.organs[0] : this.entry.name
     },
-    publishYear: function() {
+    publishYear: function () {
       return this.entry.publishDate.split('-')[0]
-    }
+    },
   },
   methods: {
-    cardClicked: function(){
+    cardClicked: function () {
       this.openDataset()
     },
-    categoryChanged: function(name) {
-      this.currentCategory = name;
+    categoryChanged: function (name) {
+      this.currentCategory = name
     },
-    galleryClicked: function(payload) {
+    galleryClicked: function (payload) {
       this.propogateCardAction(payload)
     },
-    openDataset: function(){
-      window.open(this.dataLocation,'_blank');
+    openDataset: function () {
+      window.open(this.dataLocation, '_blank')
     },
-    openRepository: function() {
-      let apiLocation = this.envVars.API_LOCATION;
-      this.entry.additionalLinks.forEach(function(el) {
-        if (el.description == "Repository") {
-          let xmlhttp = new XMLHttpRequest();
-          xmlhttp.open("POST", apiLocation + "/pmr_latest_exposure", true);
-          xmlhttp.setRequestHeader("Content-type", "application/json");
+    openRepository: function () {
+      let apiLocation = this.envVars.API_LOCATION
+      this.entry.additionalLinks.forEach(function (el) {
+        if (el.description == 'Repository') {
+          let xmlhttp = new XMLHttpRequest()
+          xmlhttp.open('POST', apiLocation + '/pmr_latest_exposure', true)
+          xmlhttp.setRequestHeader('Content-type', 'application/json')
           xmlhttp.onreadystatechange = () => {
             if (xmlhttp.readyState === 4) {
-              let url = "";
+              let url = ''
               if (xmlhttp.status === 200) {
-                url = JSON.parse(xmlhttp.responseText)["url"];
+                url = JSON.parse(xmlhttp.responseText)['url']
               }
-              if (url === "") {
-                url = el.uri;
+              if (url === '') {
+                url = el.uri
               }
-              window.open(url,'_blank');
+              window.open(url, '_blank')
             }
-          };
-          xmlhttp.send(JSON.stringify({workspace_url: el.uri}));
+          }
+          xmlhttp.send(JSON.stringify({ workspace_url: el.uri }))
         }
-      });
+      })
     },
-    propogateCardAction: function(action){
-      EventBus.$emit("PopoverActionClick", action)
-      this.$emit('contextUpdate', action)
+    propogateCardAction: function (action) {
+      EventBus.emit('PopoverActionClick', action)
+      EventBus.emit('contextUpdate', action) // Pass to mapintegratedvuer
     },
-    splitDOI: function(doi){
-      return [doi.split('/')[doi.split('/').length-2], doi.split('/')[doi.split('/').length-1]]
+    splitDOI: function (doi) {
+      return [
+        doi.split('/')[doi.split('/').length - 2],
+        doi.split('/')[doi.split('/').length - 1],
+      ]
     },
     getBanner: function () {
       // Only load banner if card has changed
@@ -186,9 +205,11 @@ export default {
         this.lastDoi = this.entry.doi
         this.loading = true
         let doi = this.splitDOI(this.entry.doi)
-        fetch(`${this.envVars.PENNSIEVE_API_LOCATION}/discover/datasets/doi/${doi[0]}/${doi[1]}`)
-          .then((response) =>{
-            if (!response.ok){
+        fetch(
+          `${this.envVars.PENNSIEVE_API_LOCATION}/discover/datasets/doi/${doi[0]}/${doi[1]}`
+        )
+          .then((response) => {
+            if (!response.ok) {
               throw Error(response.statusText)
             } else {
               return response.json()
@@ -196,73 +217,52 @@ export default {
           })
           .then((data) => {
             this.thumbnail = data.banner
-            this.datasetId = data.id
+            this.discoverId = data.id
             this.version = data.version
-            this.dataLocation = `${this.envVars.ROOT_URL}/datasets/${data.id}?type=dataset`
-            this.getBiolucidaInfo(this.datasetId)
+            this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
+            this.getBiolucidaInfo(this.discoverId)
             this.loading = false
           })
           .catch(() => {
             //set defaults if we hit an error
-            this.thumbnail = require('@/../assets/missing-image.svg')
-            this.datasetId = Number(this.entry.datasetId)
+            this.thumbnail = MissingImage
+            this.discoverId = Number(this.entry.datasetId)
             this.loading = false
-          });
-      }
-
-    },
-    initialise: function() {
-      if (!this.alternateSearch) {
-        this.getBanner();
-      } else {
-        this.dataLocation = this.entry.data_url;
-        this.datasetId = this.entry.datasetId;
-        if (this.entry.scaffoldViews.length > 0) {
-          this.thumbnail = this.entry.scaffoldViews[0].image_url;
-        } else if (this.entry.thumbnails.length > 0) {
-          this.thumbnail = this.entry.thumbnails[0].image_url;
-        } else {
-          this.thumbnail = require("@/../assets/missing-image.svg");
-        }
-        this.loading = false;
+          })
       }
     },
-    lastName: function(fullName){
+    lastName: function (fullName) {
       return fullName.split(',')[0]
     },
-    getBiolucidaInfo: function(id) {
-      let apiLocation = this.envVars.API_LOCATION;
-      let endpoint = apiLocation + "image_search/" + id;
+    getBiolucidaInfo: function (id) {
+      let apiLocation = this.envVars.API_LOCATION
+      let endpoint = apiLocation + 'image_search/' + id
       // Add parameters if we are sent them
       fetch(endpoint)
-        .then(response => response.json())
-        .then(data => {
-          if (data.status == "success")
-            this.biolucidaData = data;
-        });
-    }
+        .then((response) => response.json())
+        .then((data) => {
+          if (data.status == 'success') this.biolucidaData = data
+        })
+    },
   },
-  created: function() {
-    this.initialise();
+  created: function () {
+    this.getBanner()
   },
   watch: {
     // currently not using card overflow
-    'entry.datasetId': function() { // watch it
-      this.initialise();
-    }
+    'entry.description': function () {
+      // watch it
+      this.getBanner()
+    },
   },
-};
+}
 </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";
-
+<style lang="scss" scoped>
 .dataset-card {
-  padding-left: 16px;
+  padding-left: 15px;
   position: relative;
-  min-height:17rem;
+  min-height: 17rem;
 }
 
 .title {
@@ -283,7 +283,7 @@ export default {
   display: flex;
 }
 
-.card-left{
+.card-left {
   flex: 1;
 }
 
@@ -292,7 +292,7 @@ export default {
   padding-left: 6px;
 }
 
-.button{
+.button {
   z-index: 10;
   font-family: Asap;
   font-size: 14px;
@@ -320,7 +320,7 @@ export default {
   background-color: #ffffff;
   cursor: pointer;
 }
-.details{
+.details {
   font-family: Asap;
   font-size: 14px;
   font-weight: normal;
@@ -332,7 +332,7 @@ export default {
 }
 
 .badges-container {
-  margin-top:0.75rem;
+  margin-top: 0.75rem;
 }
 
 .loading-icon {
@@ -342,11 +342,11 @@ export default {
   left: 80px;
 }
 
-.loading-icon ::v-deep .el-loading-mask {
-  background-color: rgba(117, 190, 218, 0.0) !important;
+.loading-icon :deep(.el-loading-mask) {
+  background-color: rgba(117, 190, 218, 0) !important;
 }
 
-.loading-icon ::v-deep .el-loading-spinner .path {
+.loading-icon :deep(.el-loading-spinner .path) {
   stroke: $app-primary-color;
 }
 </style>

package/src/components/EventBus.js

@@ -1,3 +1,3 @@
-import Vue from 'vue';
-const EventBus = new Vue();
+import mitt from 'mitt';
+const EventBus = new mitt();
 export default EventBus;