@abi-software/flatmapvuer 0.5.9-alpha-connected-paths.2 → 0.5.9-beta.1

package/src/assets/_variables.scss

@@ -1,43 +1,43 @@
-// Primary colors
-$purple: #8300BF;
-$darkBlue: #24245B;
-$grey: #303133;
-
-// Secondary colors
-$lightPurple: #BC00FC;
-$blue: #0026FF;
-
-// Status colors
-$success: #5e9f69;
-$warning: #FF8400;
-$danger: #b51d09;
-
-// Text colors
-$neutralGrey: #616161;
-$mediumGrey: #606266;
-$lightGrey: #909399;
-
-// Line colors
-$lineColor1: #DCDFE6;
-$lineColor2: #E4E7ED;
-
-// Background colors
-$background: #F5F7FA;
-$cochlear: #FFFFFF;
-
-//Search box colors
-$darkGrey: #606266;
-
-$app-primary-color: $purple !default;
-$app-secondary-color: $darkBlue !default;
-$text-color: $grey !default;
-$input-text: $grey !default;
-
-$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
-$font-family: 'Asap', sans-serif;
-
-// Viewport Sizes
-$viewport-sm: 20rem;
-$viewport-md: 47rem;
-$viewport-lg: 64rem;
-$viewport-xlg: 120rem;
+// Primary colors
+$purple: #8300BF;
+$darkBlue: #24245B;
+$grey: #303133;
+
+// Secondary colors
+$lightPurple: #BC00FC;
+$blue: #0026FF;
+
+// Status colors
+$success: #5e9f69;
+$warning: #FF8400;
+$danger: #b51d09;
+
+// Text colors
+$neutralGrey: #616161;
+$mediumGrey: #606266;
+$lightGrey: #909399;
+
+// Line colors
+$lineColor1: #DCDFE6;
+$lineColor2: #E4E7ED;
+
+// Background colors
+$background: #F5F7FA;
+$cochlear: #FFFFFF;
+
+//Search box colors
+$darkGrey: #606266;
+
+$app-primary-color: $purple !default;
+$app-secondary-color: $darkBlue !default;
+$text-color: $grey !default;
+$input-text: $grey !default;
+
+$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$font-family: 'Asap', sans-serif;
+
+// Viewport Sizes
+$viewport-sm: 20rem;
+$viewport-md: 47rem;
+$viewport-lg: 64rem;
+$viewport-xlg: 120rem;

package/src/assets/styles.scss

@@ -1,7 +1,7 @@
-@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
-
-@import '_variables';
-
-/* icon font path, required */
-$--color-primary: $app-primary-color !default;
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+
+@import '_variables';
+
+/* icon font path, required */
+$--color-primary: $app-primary-color !default;
+$--font-path: '~element-ui/lib/theme-chalk/fonts';

package/src/components/AnnotationTool.vue

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

package/src/components/EventBus.js

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