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