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