@abi-software/flatmapvuer 0.5.9-beta.0 → 0.5.9-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.9-beta.0",
+  "version": "0.5.9-beta.2",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
@@ -27,7 +27,8 @@
     "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.4.2-b.3",
+    "@abi-software/flatmap-viewer": "^2.4.2-b.4",
+    "@abi-software/sparc-annotation": "0.0.5",
     "@abi-software/svg-sprite": "^0.3.0",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/App.vue

@@ -119,6 +119,7 @@ export default {
         "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
         "Human Male":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass:"mapicon-icon_human", displayWarning:true},
         "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayWarning:true, displayLatestChanges:true},
+        "Rat (NPO)":{taxo: "NCBITaxon:10116", iconClass:"mapicon-icon_rat", displayWarning:true, displayLatestChanges:true},
         "Mouse":{taxo: "NCBITaxon:10090", iconClass:"mapicon-icon_mouse", displayWarning:true},
         "Kember":{taxo: "ABI:1000001", displayWarning:true},
         "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning:true}, 
@@ -133,7 +134,7 @@ export default {
         position: "absolute"
       },
       displayCloseButton: false,
-      initial: "Rat",
+      initial: "Rat (NPO)",
       helpMode: false,
       mapSettings: [],
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"

package/src/components/AnnotationTool.vue

@@ -19,7 +19,7 @@
             <i class="el-icon-arrow-up"></i>
           </div>
           <div v-show="!showSubmissions" class="hide" @click="showSubmissions = true">
-            Show previous submissions
+            Show previous {{ prevSubs.length }} submission(s)
             <i class="el-icon-arrow-down"></i>
           </div>
           <template v-if="showSubmissions">
@@ -29,10 +29,13 @@
             </el-row>
             <div class="entry" v-for="(sub, index) in prevSubs" :key="index">
               <el-row class="dialog-text">
-                <strong>{{ sub.timestamp }}</strong> Anonoymous
+                <strong>{{ formatTime(sub.created) }}</strong> {{ sub.creator.name }}
               </el-row>
               <el-row class="dialog-text">
-                <strong>Evidence: </strong> {{ sub.evidence.join(', ') }}
+                <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 }}
@@ -40,76 +43,83 @@
             </div>
           </template>
         </template>
-        <el-row class="dialog-spacer"></el-row>
-        <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">
+        <template v-if="authenticated">
+          <template v-if="isEditable">
+            <el-row class="dialog-spacer"></el-row>
+            <el-row v-if="!editing">
               <i
-                class="el-icon-close standard-icon"
-                @click="removeEvidence(index)"
+                class="el-icon-edit standard-icon"
+                @click="editing = true"
               />
-            </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>
+            </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>
+            <el-row class="dialog-text" v-if="errorMessage">
+              <strong class="sub-title"> {{ errorMessage }}
+              </strong>
+            </el-row>
+          </template>
         </template>
       </template>
     </div>
@@ -121,9 +131,11 @@
 /* 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);
@@ -139,14 +151,15 @@ export default {
       type: Object,
     },
   },
+  inject: ['flatmapAPI'],
   data: function() {
     return {
       displayPair: {
-        "Feature": "id",
+        "Feature ID": "featureId",
         "Tooltip": "label",
         "Models": "models",
         "Name": "name",
-        "Map layer": "layer",
+        "Resource": "resourceId"
       },
       editing: false,
       evidencePrefixes:  [
@@ -155,24 +168,18 @@ export default {
       ],
       evidencePrefix: "DOI:", 
       evidence: [ ],
+      authenticated: false,
       newEvidence: '',
       comment: '',
-      submissions: [ ],
-      showSubmissions: true
+      prevSubs: [ ],
+      showSubmissions: true,
+      errorMessage: "",
     }
   },
   computed: {
-    prevSubs: function() {
-      return this.submissions.filter(sub => {
-        if (this.annotationEntry) {
-          if (sub.id === this.annotationEntry.id && 
-            sub.layer === this.annotationEntry.layer) {
-              return true;
-            }
-        }
-        return false;
-      });
-    }
+    isEditable: function() {
+      return this.annotationEntry['resourceId'] && this.annotationEntry['featureId'];
+    },
   },
   methods: {
     evidenceEntered: function(value) {
@@ -181,17 +188,54 @@ export default {
         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 && this.authenticated) {
+        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() {
-      const now = new Date();
       if ((this.evidence.length > 0) || this.comment) {
-        this.submissions.push( {
-          id: this.annotationEntry['id'],
-          layer: this.annotationEntry['layer'],
-          evidence: this.evidence,
-          comment: this.comment,
-          timestamp: now.toLocaleString(),
-        });
-        this.resetSubmission();
+        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) {
@@ -208,10 +252,25 @@ export default {
     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;
+        this.updatePrevSubmissions();
+      } else {
+        this.errorMessage = "";
+      }
+    })
   }
 };
 </script>