{"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/flatmapvuer/src/components/AnnotationTool.vue?vue&type=style&index=0&id=480ec58a&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/flatmapvuer/src/components/AnnotationTool.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:CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9idXR0b24iOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvY29sIjsKQGltcG9ydCAifmVsZW1lbnQtdWkvcGFja2FnZXMvdGhlbWUtY2hhbGsvc3JjL2lucHV0IjsKQGltcG9ydCAifmVsZW1lbnQtdWkvcGFja2FnZXMvdGhlbWUtY2hhbGsvc3JjL21haW4iOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvcm93IjsKQGltcG9ydCAifmVsZW1lbnQtdWkvcGFja2FnZXMvdGhlbWUtY2hhbGsvc3JjL3NlbGVjdCI7CgouaW5mby1maWVsZCB7CiAgZGlzcGxheTpmbGV4Owp9CgouYmxvY2sgewogIG1hcmdpbi1ib3R0b206IDAuNWVtOwp9CgouYnV0dG9uIHsKICBwYWRkaW5nLXRvcDo1cHg7CiAgcGFkZGluZy1ib3R0b206NXB4Owp9Cgouc3RhbmRhcmQtaWNvbiB7CiAgY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsKICAmOmhvdmVyIHsKICAgIGN1cnNvcjogcG9pbnRlcjsKICB9Cn0KCi5kaWFsb2ctdGV4dCB7CiAgY29sb3I6IHJnYig0OCwgNDksIDUxKTsKICBmb250LXNpemU6IDE0cHg7CiAgZm9udC13ZWlnaHQ6IG5vcm1hbDsKICBsaW5lLWhlaWdodDogMjBweDsKfQoKLm1haW4gewogIGZvbnQtc2l6ZTogMTRweDsKICB0ZXh0LWFsaWduOiBsZWZ0OwogIGxpbmUtaGVpZ2h0OiAxLjVlbTsKICBmb250LWZhbWlseTogQXNhcCwgc2Fucy1zZXJpZixIZWx2ZXRpY2E7CiAgZm9udC13ZWlnaHQ6IDQwMDsKICAvKiBvdXRsaW5lOiB0aGluIHJlZCBzb2xpZDsgKi8KICBwYWRkaW5nOiAxZW0gIWltcG9ydGFudDsKICBvdmVyZmxvdy14OiBoaWRkZW47CiAgb3ZlcmZsb3cteTogYXV0bzsKICBtaW4td2lkdGg6IDIwcmVtOwogIG1heC1oZWlnaHQ6IDQwMHB4OwogIHNjcm9sbGJhci13aWR0aDogdGhpbjsKCiAgJjo6LXdlYmtpdC1zY3JvbGxiYXIgewogICAgd2lkdGg6IDRweDsKICB9CgogICY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHsKICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgNnB4ICNjMGM0Y2M7CiAgfQp9CgoudGl0bGUgewogIGZvbnQtc2l6ZTogMThweDsKICBmb250LXdlaWdodDogNTAwOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIHBhZGRpbmctYm90dG9tOiA4cHg7CiAgY29sb3I6IHJnYigxMzEsIDAsIDE5MSk7Cn0KCi5zdWItdGl0bGUgewogIGZvbnQtc2l6ZTogMTZweDsKfQoKCi5kaWFsb2ctc3BhY2VyIHsKICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2U0ZTdlZDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9Cgouc3VibWl0IHsKICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOwogICY6aG92ZXIgewogICAgY3Vyc29yOiBwb2ludGVyOwogIH0KfQoKLmVudHJ5IH4gLmVudHJ5IHsKICBib3JkZXItdG9wOiAxcHggc29saWQgI2U0ZTdlZDsKICBtYXJnaW4tdG9wOiAxMHB4Owp9CgouaGlkZXsKICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOwogIGN1cnNvcjogcG9pbnRlcjsKICBtYXJnaW4tcmlnaHQ6IDZweDsKICBtYXJnaW4tdG9wOiAzcHg7Cn0KCjo6di1kZWVwIC5lbC1pbnB1dF9faW5uZXIsIDo6di1kZWVwIC5lbC10ZXh0YXJlYV9faW5uZXJ7CiAgZm9udC1mYW1pbHk6IEFzYXAsIHNhbnMtc2VyaWY7Cn0KCi5zZWxlY3QtYm94IHsKICB3aWR0aDo4MHB4OwogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXdoaXRlKTsKICBmb250LXdlaWdodDogNTAwOwogIGNvbG9yOnJnYig0OCwgNDksIDUxKTs7CiAgOjp2LWRlZXAgLmVsLWlucHV0X19pbm5lciB7CiAgICBoZWlnaHQ6MzBweDsKICAgIGNvbG9yOiByZ2IoNDgsIDQ5LCA1MSk7CiAgfQogIDo6di1kZWVwIC5lbC1pbnB1dF9faWNvbiB7CiAgICBsaW5lLWhlaWdodDozMHB4CiAgfQp9Cgo6OnYtZGVlcCAuZmxhdG1hcF9kcm9wZG93biB7CiAgbWluLXdpZHRoOiA4MHB4IWltcG9ydGFudDsKICAuZWwtc2VsZWN0LWRyb3Bkb3duX19pdGVtIHsKICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7CiAgICB0ZXh0LWFsaWduOiBsZWZ0OwogICAgJi5zZWxlY3RlZCB7CiAgICAgIGNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7CiAgICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7CiAgICB9CiAgfQp9Cg=="},{"version":3,"sources":["AnnotationTool.vue"],"names":[],"mappings":";AAsRA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"AnnotationTool.vue","sourceRoot":"node_modules/@abi-software/flatmapvuer/src/components","sourcesContent":["<template>\n  <el-main class=\"main\">\n    <div class=\"block\">\n      <el-row class=\"info-field\">\n        <span class=\"title\">Feature Annotations</span>\n      </el-row>\n      <template v-if=\"annotationEntry\">\n        <el-row\n          v-for=\"(key, label) in displayPair\"\n          v-show=\"annotationEntry[key]\"\n          class=\"dialog-text\"\n          :key=\"key\"\n        >\n            <strong>{{ label }}: </strong> {{ annotationEntry[key] }}\n        </el-row>\n        <template v-if=\"prevSubs.length > 0\">\n          <div v-show=\"showSubmissions\" class=\"hide\" @click=\"showSubmissions = false\">\n            Hide previous submissions\n            <i class=\"el-icon-arrow-up\"></i>\n          </div>\n          <div v-show=\"!showSubmissions\" class=\"hide\" @click=\"showSubmissions = true\">\n            Show previous {{ prevSubs.length }} submission(s)\n            <i class=\"el-icon-arrow-down\"></i>\n          </div>\n          <template v-if=\"showSubmissions\">\n            <el-row class=\"dialog-spacer\"></el-row>\n            <el-row class=\"dialog-text\">\n              <strong class=\"sub-title\">Previous submissions:</strong>\n            </el-row>\n            <div class=\"entry\" v-for=\"(sub, index) in prevSubs\" :key=\"index\">\n              <el-row class=\"dialog-text\">\n                <strong>{{ formatTime(sub.created) }}</strong> {{ sub.creator.name }}\n              </el-row>\n              <el-row class=\"dialog-text\">\n                <strong>Evidence: </strong> \n                <el-row v-for=\"(evidence) in sub.evidence\" :key=\"evidence\" class=\"dialog-text\">\n                  <a  :href=\"evidence\" target=\"_blank\"> {{ evidence }}</a>\n                </el-row>\n              </el-row>\n              <el-row class=\"dialog-text\">\n                <strong>Comment: </strong> {{ sub.comment }}\n              </el-row>\n            </div>\n          </template>\n        </template>\n        <template v-if=\"authenticated\">\n          <template v-if=\"isEditable\">\n            <el-row class=\"dialog-spacer\"></el-row>\n            <el-row v-if=\"!editing\">\n              <i\n                class=\"el-icon-edit standard-icon\"\n                @click=\"editing = true\"\n              />\n            </el-row>\n            <template v-else>\n              <el-row class=\"dialog-text\">\n                <strong class=\"sub-title\">Suggest changes:</strong>\n              </el-row>\n              <el-row class=\"dialog-text\">\n                <strong>Evidvence:</strong>\n              </el-row>\n              <el-row v-for=\"(value, index) in evidence\" :key=\"value\">\n                <el-col :span=\"20\">   \n                  {{ evidence[index] }}\n                </el-col>\n                <el-col :span=\"4\">\n                  <i\n                    class=\"el-icon-close standard-icon\"\n                    @click=\"removeEvidence(index)\"\n                  />\n                </el-col>\n              </el-row>\n              <el-row>\n                <el-input\n                  size=\"mini\"\n                  placeholder=\"Enter\"\n                  v-model=\"newEvidence\"\n                  @change=\"evidenceEntered($event)\"\n                >\n                  <el-select\n                    :popper-append-to-body=\"false\"\n                    v-model=\"evidencePrefix\"\n                    placeholder=\"Select\"\n                    class=\"select-box\"\n                    popper-class=\"flatmap_dropdown\"\n                    slot=\"prepend\"\n                  >\n                    <el-option v-for=\"item in evidencePrefixes\" :key=\"item\" :label=\"item\" :value=\"item\">\n                      <el-row>\n                        <el-col :span=\"12\">{{ item }}</el-col>\n                      </el-row>\n                    </el-option>\n                  </el-select>\n                </el-input>\n              </el-row>\n              <el-row>\n                <strong>Comment:</strong>\n              </el-row>\n              <el-row class=\"dialog-text\">\n                <el-input\n                  type=\"textarea\"\n                  :autosize=\"{ minRows: 2, maxRows: 4}\"\n                  placeholder=\"Enter\"\n                  v-model=\"comment\"\n                />\n              </el-row>\n                <el-row class=\"dialog-text\">\n                  <el-button\n                    class=\"button\"\n                    type=\"primary\"\n                    plain\n                    @click=\"submit\"\n                  >\n                    Submit\n                  </el-button>\n              </el-row>\n            </template>\n            <el-row class=\"dialog-text\" v-if=\"errorMessage\">\n              <strong class=\"sub-title\"> {{ errorMessage }}\n              </strong>\n            </el-row>\n          </template>\n        </template>\n      </template>\n    </div>\n  </el-main>\n</template>\n\n\n<script>\n/* eslint-disable no-alert, no-console */\n/* eslint-disable no-alert, no-console */\nimport Vue from \"vue\";\nimport { AnnotationService } from \"@abi-software/sparc-annotation\";\nimport { Button, Col, Input, Main, Row, Select } from \"element-ui\";\nimport lang from \"element-ui/lib/locale/lang/en\";\nimport locale from \"element-ui/lib/locale\";\n\nlocale.use(lang);\nVue.use(Button);\nVue.use(Col);\nVue.use(Input);\nVue.use(Main);\nVue.use(Row);\nVue.use(Select);\n\nexport default {\n  name: \"AnnotationTool\",\n  props: {\n    annotationEntry: {\n      type: Object,\n    },\n  },\n  inject: ['flatmapAPI'],\n  data: function() {\n    return {\n      displayPair: {\n        \"Feature ID\": \"featureId\",\n        \"Tooltip\": \"label\",\n        \"Models\": \"models\",\n        \"Name\": \"name\",\n        \"Resource\": \"resourceId\"\n      },\n      editing: false,\n      evidencePrefixes:  [\n        \"DOI:\",\n        \"PMID:\",\n      ],\n      evidencePrefix: \"DOI:\", \n      evidence: [ ],\n      authenticated: false,\n      newEvidence: '',\n      comment: '',\n      prevSubs: [ ],\n      showSubmissions: true,\n      errorMessage: \"\",\n    }\n  },\n  computed: {\n    isEditable: function() {\n      return this.annotationEntry['resourceId'] && this.annotationEntry['featureId'];\n    },\n  },\n  methods: {\n    evidenceEntered: function(value) {\n      if (value) {\n        this.evidence.push(this.evidencePrefix + value);\n        this.newEvidence = \"\";\n      }\n    },\n    formatTime: function(dateString) {\n      const options = { year: \"numeric\", month: \"long\", day: \"numeric\", \n        hour: \"numeric\", minute: \"numeric\", second: \"numeric\" };\n      return new Date(dateString).toLocaleDateString(undefined, options);\n    },\n    updatePrevSubmissions: function() {\n      if (this.$annotator && this.authenticated) {\n        if (this.annotationEntry['resourceId'] &&\n          this.annotationEntry['featureId']) {\n          this.$annotator.itemAnnotations(this.annotationEntry['resourceId'],\n          this.annotationEntry['featureId']).then((value) => {\n            this.prevSubs = value;\n          })\n          .catch((reason) => {\n            console.log(reason); // Error!\n          });\n        }\n      }\n    },\n    submit: function() {\n      if ((this.evidence.length > 0) || this.comment) {\n        if (this.annotationEntry['resourceId'] &&\n          this.annotationEntry['featureId']) {\n          const evidenceURLs = [];\n          this.evidence.forEach((evidence) => {\n            if (evidence.includes(\"DOI:\")) {\n              const link = evidence.replace(\"DOI:\", \"https://doi.org/\");\n              evidenceURLs.push(new URL(link));\n            } else if (evidence.includes(\"PMID:\")) {\n              const link = evidence.replace(\"PMID:\", \"https://pubmed.ncbi.nlm.nih.gov/\");\n              evidenceURLs.push(new URL(link));\n            }\n          });\n          const userAnnotation = {\n            resource: this.annotationEntry['resourceId'],\n            item: this.annotationEntry['featureId'],\n            evidence: evidenceURLs,\n            comment: this.comment,\n          }\n          this.$annotator.addAnnotation(userAnnotation).then(() => {\n            this.errorMessage = \"\";\n            this.resetSubmission();\n            this.updatePrevSubmissions();\n          })\n          .catch(() => {\n            this.errorMessage = \"There is a problem with the submission, please try again later\";\n          });\n        }\n      }\n    },\n    removeEvidence: function(index) {\n      this.evidence.splice(index, 1);\n    },\n    resetSubmission: function() {\n      this.editing = false;\n      this.evidence = [];\n      this.newFeature = '';\n      this.comment = '';\n    },\n  },\n  watch: {\n    annotationEntry: {\n      handler: function() {\n        this.resetSubmission();\n        this.updatePrevSubmissions();\n      },\n      immediate: false,\n      deep: false,\n    }\n  },\n  mounted: function() {\n    if (!this.$annotator) {\n      Vue.prototype.$annotator = new AnnotationService(\n        `${this.flatmapAPI}annotator`);\n    }\n    this.$annotator.authenticate().then((userData) => {\n      if (userData.name && userData.email) {\n        this.authenticated = true;\n        this.updatePrevSubmissions();\n      } else {\n        this.errorMessage = \"\";\n      }\n    })\n  }\n};\n</script>\n\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/button\";\n@import \"~element-ui/packages/theme-chalk/src/col\";\n@import \"~element-ui/packages/theme-chalk/src/input\";\n@import \"~element-ui/packages/theme-chalk/src/main\";\n@import \"~element-ui/packages/theme-chalk/src/row\";\n@import \"~element-ui/packages/theme-chalk/src/select\";\n\n.info-field {\n  display:flex;\n}\n\n.block {\n  margin-bottom: 0.5em;\n}\n\n.button {\n  padding-top:5px;\n  padding-bottom:5px;\n}\n\n.standard-icon {\n  color: $app-primary-color;\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.dialog-text {\n  color: rgb(48, 49, 51);\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n}\n\n.main {\n  font-size: 14px;\n  text-align: left;\n  line-height: 1.5em;\n  font-family: Asap, sans-serif,Helvetica;\n  font-weight: 400;\n  /* outline: thin red solid; */\n  padding: 1em !important;\n  overflow-x: hidden;\n  overflow-y: auto;\n  min-width: 20rem;\n  max-height: 400px;\n  scrollbar-width: thin;\n\n  &::-webkit-scrollbar {\n    width: 4px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    box-shadow: inset 0 0 6px #c0c4cc;\n  }\n}\n\n.title {\n  font-size: 18px;\n  font-weight: 500;\n  font-weight: bold;\n  padding-bottom: 8px;\n  color: rgb(131, 0, 191);\n}\n\n.sub-title {\n  font-size: 16px;\n}\n\n\n.dialog-spacer {\n  border-bottom: 1px solid #e4e7ed;\n  margin-bottom: 10px;\n}\n\n.submit {\n  color: $app-primary-color;\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.entry ~ .entry {\n  border-top: 1px solid #e4e7ed;\n  margin-top: 10px;\n}\n\n.hide{\n  color: $app-primary-color;\n  cursor: pointer;\n  margin-right: 6px;\n  margin-top: 3px;\n}\n\n::v-deep .el-input__inner, ::v-deep .el-textarea__inner{\n  font-family: Asap, sans-serif;\n}\n\n.select-box {\n  width:80px;\n  background-color: var(--white);\n  font-weight: 500;\n  color:rgb(48, 49, 51);;\n  ::v-deep .el-input__inner {\n    height:30px;\n    color: rgb(48, 49, 51);\n  }\n  ::v-deep .el-input__icon {\n    line-height:30px\n  }\n}\n\n::v-deep .flatmap_dropdown {\n  min-width: 80px!important;\n  .el-select-dropdown__item {\n    white-space: nowrap;\n    text-align: left;\n    &.selected {\n      color: $app-primary-color;\n      font-weight: normal;\n    }\n  }\n}\n</style>\n"]}]}