{"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/DatasetCard.vue?vue&type=style&index=0&id=4df63d08&prod&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/DatasetCard.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+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvY29sIjsNCkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9sb2FkaW5nIjsNCg0KLmRhdGFzZXQtY2FyZCB7DQogIHBhZGRpbmctbGVmdDogMTZweDsNCiAgcG9zaXRpb246IHJlbGF0aXZlOw0KICBtaW4taGVpZ2h0OjE3cmVtOw0KfQ0KDQoudGl0bGUgew0KICBwYWRkaW5nLWJvdHRvbTogMC43NXJlbTsNCiAgZm9udC1mYW1pbHk6IEFzYXA7DQogIGZvbnQtc2l6ZTogMTRweDsNCiAgZm9udC13ZWlnaHQ6IGJvbGQ7DQogIGZvbnQtc3RyZXRjaDogbm9ybWFsOw0KICBmb250LXN0eWxlOiBub3JtYWw7DQogIGxpbmUtaGVpZ2h0OiAxLjU7DQogIGxldHRlci1zcGFjaW5nOiAxLjA1cHg7DQogIGNvbG9yOiAjNDg0ODQ4Ow0KICBjdXJzb3I6IHBvaW50ZXI7DQp9DQouY2FyZCB7DQogIHBhZGRpbmctdG9wOiAxOHB4Ow0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIGRpc3BsYXk6IGZsZXg7DQp9DQoNCi5jYXJkLWxlZnR7DQogIGZsZXg6IDENCn0NCg0KLmNhcmQtcmlnaHQgew0KICBmbGV4OiAxLjM7DQogIHBhZGRpbmctbGVmdDogNnB4Ow0KfQ0KDQouYnV0dG9uew0KICB6LWluZGV4OiAxMDsNCiAgZm9udC1mYW1pbHk6IEFzYXA7DQogIGZvbnQtc2l6ZTogMTRweDsNCiAgZm9udC13ZWlnaHQ6IG5vcm1hbDsNCiAgZm9udC1zdHJldGNoOiBub3JtYWw7DQogIGZvbnQtc3R5bGU6IG5vcm1hbDsNCiAgbGluZS1oZWlnaHQ6IG5vcm1hbDsNCiAgbGV0dGVyLXNwYWNpbmc6IG5vcm1hbDsNCiAgYmFja2dyb3VuZC1jb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOw0KICBib3JkZXI6ICRhcHAtcHJpbWFyeS1jb2xvcjsNCiAgY29sb3I6IHdoaXRlOw0KICBjdXJzb3I6IHBvaW50ZXI7DQogIG1hcmdpbi10b3A6IDhweDsNCn0NCg0KLmJ1dHRvbjpob3ZlciB7DQogIGJhY2tncm91bmQtY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsNCiAgY29sb3I6IHdoaXRlOw0KfQ0KDQouYmFubmVyLWltZyB7DQogIHdpZHRoOiAxMjhweDsNCiAgaGVpZ2h0OiAxMjhweDsNCiAgYm94LXNoYWRvdzogMCAycHggNHB4IDAgcmdiYSgwLCAwLCAwLCAwLjI1KTsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsNCiAgY3Vyc29yOiBwb2ludGVyOw0KfQ0KLmRldGFpbHN7DQogIGZvbnQtZmFtaWx5OiBBc2FwOw0KICBmb250LXNpemU6IDE0cHg7DQogIGZvbnQtd2VpZ2h0OiBub3JtYWw7DQogIGZvbnQtc3RyZXRjaDogbm9ybWFsOw0KICBmb250LXN0eWxlOiBub3JtYWw7DQogIGxpbmUtaGVpZ2h0OiAxLjU7DQogIGxldHRlci1zcGFjaW5nOiAxLjA1cHg7DQogIGNvbG9yOiAjNDg0ODQ4Ow0KfQ0KDQouYmFkZ2VzLWNvbnRhaW5lciB7DQogIG1hcmdpbi10b3A6MC43NXJlbTsNCn0NCg0KLmxvYWRpbmctaWNvbiB7DQogIHotaW5kZXg6IDIwOw0KICB3aWR0aDogNDBweDsNCiAgaGVpZ2h0OiA0MHB4Ow0KICBsZWZ0OiA4MHB4Ow0KfQ0KDQoubG9hZGluZy1pY29uIDo6di1kZWVwIC5lbC1sb2FkaW5nLW1hc2sgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDExNywgMTkwLCAyMTgsIDAuMCkgIWltcG9ydGFudDsNCn0NCg0KLmxvYWRpbmctaWNvbiA6OnYtZGVlcCAuZWwtbG9hZGluZy1zcGlubmVyIC5wYXRoIHsNCiAgc3Ryb2tlOiAkYXBwLXByaW1hcnktY29sb3I7DQp9DQo="},{"version":3,"sources":["DatasetCard.vue"],"names":[],"mappings":";AA0OA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA","file":"DatasetCard.vue","sourceRoot":"node_modules/@abi-software/map-side-bar/src/components","sourcesContent":["<template>\r\n  <div class=\"dataset-card-container\"  ref=\"container\">\r\n    <div class=\"dataset-card\"  ref=\"card\">\r\n      <div class=\"seperator-path\"></div>\r\n      <div v-loading=\"loading\" class=\"card\" >\r\n        <span class=\"card-left\">\r\n          <image-gallery v-if=\"!loading && discoverId\" \r\n            :datasetId=\"discoverId\"\r\n            :datasetVersion=\"version\"\r\n            :entry=\"entry\"\r\n            :envVars=\"envVars\"\r\n            :label=\"label\"\r\n            :datasetThumbnail=\"thumbnail\"\r\n            :dataset-biolucida=\"biolucidaData\"\r\n            :category=\"currentCategory\"\r\n            @card-clicked=\"galleryClicked\"\r\n          />\r\n        </span>\r\n        <div class=\"card-right\" >\r\n          <div class=\"title\" @click=\"cardClicked\">{{entry.name}}</div>\r\n          <div class=\"details\">{{contributors}} {{entry.publishDate ? `(${publishYear})` : ''}}</div>\r\n          <div class=\"details\">{{samples}}</div>\r\n          <div v-if=\"!entry.detailsReady\" class=\"details loading-icon\" v-loading=\"!entry.detailsReady\"></div>\r\n          <div>\r\n            <el-button v-if=\"entry.simulation\"  @click=\"openRepository\" size=\"mini\" class=\"button\" icon=\"el-icon-view\">View repository</el-button>\r\n          </div>\r\n          <div class=\"badges-container\">\r\n            <badges-group\r\n              :entry=\"entry\"\r\n              :dataset-biolucida=\"biolucidaData\"\r\n              @categoryChanged=\"categoryChanged\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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 BadgesGroup from \"./BadgesGroup.vue\";\r\nimport { Button, Icon } from \"element-ui\";\r\nimport lang from \"element-ui/lib/locale/lang/en\";\r\nimport locale from \"element-ui/lib/locale\";\r\nimport EventBus from \"./EventBus\"\r\nimport speciesMap from \"./species-map\";\r\nimport ImageGallery from \"./ImageGallery.vue\";\r\n\r\nlocale.use(lang);\r\nVue.use(Button);\r\nVue.use(Icon);\r\n\r\nexport default {\r\n  name: \"DatasetCard\",\r\n  components: { BadgesGroup, ImageGallery },\r\n  props: {\r\n    /**\r\n     * Object containing information for\r\n     * the required viewing.\r\n     */\r\n    entry: {\r\n      type: Object,\r\n      default: () => {}\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      thumbnail: require('@/../assets/missing-image.svg'),\r\n      dataLocation: this.entry.doi,\r\n      discoverId: undefined,\r\n      loading: true,\r\n      version: 1,\r\n      lastDoi: undefined,\r\n      biolucidaData: undefined,\r\n      currentCategory: \"All\"\r\n    };\r\n  },\r\n  computed: {\r\n    contributors: function() {\r\n      let text = \"\";\r\n      if (this.entry.contributors) {\r\n        if (this.entry.contributors.length === 1) {\r\n          text = this.lastName(this.entry.contributors[0].name);\r\n        } else if (this.entry.contributors.length === 2) {\r\n          text = this.lastName(this.entry.contributors[0].name) + \" & \" + this.lastName(this.entry.contributors[1].name);\r\n        } else if (this.entry.contributors.length > 2) {\r\n          text = this.lastName(this.entry.contributors[0].name) + \" et al.\";\r\n        }\r\n      }\r\n      return text;\r\n    },\r\n    samples: function() {\r\n      let text = \"\";\r\n      if (this.entry.species) {\r\n        if (speciesMap[this.entry.species[0].toLowerCase()]){\r\n          text = `${speciesMap[this.entry.species[0].toLowerCase()]}`;\r\n        } else {\r\n          text = `${this.entry.species}`;\r\n        }\r\n      }\r\n      if (this.entry.numberSamples > 0) {\r\n        text += \" (\";\r\n        if (this.entry.numberSamples === 1) {\r\n          text += `${this.entry.numberSamples} sample`;\r\n        } else if (this.entry.numberSamples > 1) {\r\n          text += `${this.entry.numberSamples} samples`;\r\n        }\r\n        if (this.entry.numberSubjects === 1) {\r\n          text += ` from ${this.entry.numberSubjects} subject`;\r\n        } else if (this.entry.numberSamples > 1) {\r\n          text += ` from ${this.entry.numberSubjects} subjects`;\r\n        }\r\n        text += \")\";\r\n      }\r\n\r\n      return text;\r\n    },\r\n    label: function(){\r\n      return this.entry.organs ? this.entry.organs[0] : this.entry.name\r\n    },\r\n    publishYear: function() {\r\n      return this.entry.publishDate.split('-')[0]\r\n    }\r\n  },\r\n  methods: {\r\n    cardClicked: function(){\r\n      this.openDataset()\r\n    },\r\n    categoryChanged: function(name) {\r\n      this.currentCategory = name;\r\n    },\r\n    galleryClicked: function(payload) {\r\n      this.propogateCardAction(payload)\r\n    },\r\n    openDataset: function(){\r\n      window.open(this.dataLocation,'_blank');\r\n    },\r\n    openRepository: function() {\r\n      let apiLocation = this.envVars.API_LOCATION;\r\n      this.entry.additionalLinks.forEach(function(el) {\r\n        if (el.description == \"Repository\") {\r\n          let xmlhttp = new XMLHttpRequest();\r\n          xmlhttp.open(\"POST\", apiLocation + \"/pmr_latest_exposure\", true);\r\n          xmlhttp.setRequestHeader(\"Content-type\", \"application/json\");\r\n          xmlhttp.onreadystatechange = () => {\r\n            if (xmlhttp.readyState === 4) {\r\n              let url = \"\";\r\n              if (xmlhttp.status === 200) {\r\n                url = JSON.parse(xmlhttp.responseText)[\"url\"];\r\n              }\r\n              if (url === \"\") {\r\n                url = el.uri;\r\n              }\r\n              window.open(url,'_blank');\r\n            }\r\n          };\r\n          xmlhttp.send(JSON.stringify({workspace_url: el.uri}));\r\n        }\r\n      });\r\n    },\r\n    propogateCardAction: function(action){\r\n      EventBus.$emit(\"PopoverActionClick\", action)\r\n      EventBus.$emit(\"contextUpdate\", action) // Pass to mapintegratedvuer\r\n    },\r\n    splitDOI: function(doi){\r\n      return [doi.split('/')[doi.split('/').length-2], doi.split('/')[doi.split('/').length-1]]\r\n    },\r\n    getBanner: function () {\r\n      // Only load banner if card has changed\r\n      if (this.lastDoi !== this.entry.doi) {\r\n        this.lastDoi = this.entry.doi\r\n        this.loading = true\r\n        let doi = this.splitDOI(this.entry.doi)\r\n        fetch(`${this.envVars.PENNSIEVE_API_LOCATION}/discover/datasets/doi/${doi[0]}/${doi[1]}`)\r\n          .then((response) =>{\r\n            if (!response.ok){\r\n              throw Error(response.statusText)\r\n            } else {\r\n              return response.json()\r\n            }\r\n          })\r\n          .then((data) => {\r\n            this.thumbnail = data.banner\r\n            this.discoverId = data.id\r\n            this.version = data.version\r\n            this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`\r\n            this.getBiolucidaInfo(this.discoverId)\r\n            this.loading = false\r\n          })\r\n          .catch(() => {\r\n            //set defaults if we hit an error\r\n            this.thumbnail = require('@/../assets/missing-image.svg')\r\n            this.discoverId = Number(this.entry.datasetId)\r\n            this.loading = false\r\n          });\r\n      }\r\n\r\n    },\r\n    lastName: function(fullName){\r\n      return fullName.split(',')[0]\r\n    },\r\n    getBiolucidaInfo: function(id) {\r\n      let apiLocation = this.envVars.API_LOCATION;\r\n      let endpoint = apiLocation + \"image_search/\" + id;\r\n      // Add parameters if we are sent them\r\n      fetch(endpoint)\r\n        .then(response => response.json())\r\n        .then(data => {\r\n          if (data.status == \"success\")\r\n            this.biolucidaData = data;\r\n        });\r\n    }\r\n  },\r\n  created: function() {\r\n    this.getBanner()\r\n  },\r\n  watch: {\r\n    // currently not using card overflow\r\n    'entry.description': function() { // watch it\r\n      this.getBanner()\r\n    }\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/col\";\r\n@import \"~element-ui/packages/theme-chalk/src/loading\";\r\n\r\n.dataset-card {\r\n  padding-left: 16px;\r\n  position: relative;\r\n  min-height:17rem;\r\n}\r\n\r\n.title {\r\n  padding-bottom: 0.75rem;\r\n  font-family: Asap;\r\n  font-size: 14px;\r\n  font-weight: bold;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: 1.5;\r\n  letter-spacing: 1.05px;\r\n  color: #484848;\r\n  cursor: pointer;\r\n}\r\n.card {\r\n  padding-top: 18px;\r\n  position: relative;\r\n  display: flex;\r\n}\r\n\r\n.card-left{\r\n  flex: 1\r\n}\r\n\r\n.card-right {\r\n  flex: 1.3;\r\n  padding-left: 6px;\r\n}\r\n\r\n.button{\r\n  z-index: 10;\r\n  font-family: Asap;\r\n  font-size: 14px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  background-color: $app-primary-color;\r\n  border: $app-primary-color;\r\n  color: white;\r\n  cursor: pointer;\r\n  margin-top: 8px;\r\n}\r\n\r\n.button:hover {\r\n  background-color: $app-primary-color;\r\n  color: white;\r\n}\r\n\r\n.banner-img {\r\n  width: 128px;\r\n  height: 128px;\r\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: #ffffff;\r\n  cursor: pointer;\r\n}\r\n.details{\r\n  font-family: Asap;\r\n  font-size: 14px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: 1.5;\r\n  letter-spacing: 1.05px;\r\n  color: #484848;\r\n}\r\n\r\n.badges-container {\r\n  margin-top:0.75rem;\r\n}\r\n\r\n.loading-icon {\r\n  z-index: 20;\r\n  width: 40px;\r\n  height: 40px;\r\n  left: 80px;\r\n}\r\n\r\n.loading-icon ::v-deep .el-loading-mask {\r\n  background-color: rgba(117, 190, 218, 0.0) !important;\r\n}\r\n\r\n.loading-icon ::v-deep .el-loading-spinner .path {\r\n  stroke: $app-primary-color;\r\n}\r\n</style>\r\n"]}]}