@abi-software/map-utilities 1.4.3-isan.1 → 1.5.0-beta.0

package/src/components/Tooltip/AnnotationPopup.vue

@@ -1,31 +1,5 @@
 <template>
   <el-main class="main">
-    <div v-if="annotationEntry.length > 1" class="toggle-button">
-      <el-popover width="auto" trigger="hover" :teleported="false">
-        <template #reference>
-          <el-button
-            class="button"
-            @click="previous"
-            :disabled="this.entryIndex === 0"
-          >
-            Previous
-          </el-button>
-        </template>
-        <span>{{ previousLabel }}</span>
-      </el-popover>
-      <el-popover width="auto" trigger="hover" :teleported="false">
-        <template #reference>
-          <el-button
-            class="button"
-            @click="next"
-            :disabled="this.entryIndex === this.annotationEntry.length - 1"
-          >
-            Next
-          </el-button>
-        </template>
-        <span>{{ nextLabel }}</span>
-      </el-popover>
-    </div>
     <div class="block">
       <el-row class="info-field">
         <div class="title">Feature Annotations</div>
@@ -33,16 +7,16 @@
           <copy-to-clipboard :content="updatedCopyContent" />
         </div>
       </el-row>
-      <template v-if="entry">
+      <template v-if="annotationEntry">
         <el-row
           v-for="(key, label) in displayPair"
-          v-show="entry[key]"
+          v-show="annotationEntry[key]"
           class="dialog-text"
           :key="key"
         >
           <strong>{{ label }}: </strong>&nbsp;
-          <span v-if="label !== 'Ontology'">{{ entry[key] }}</span>
-          <a v-else :href="ontologyLink" target="_blank">{{ entry[key] }}</a>
+          <span v-if="label !== 'Ontology'">{{ annotationEntry[key] }}</span>
+          <a v-else :href="ontologyLink" target="_blank">{{ annotationEntry[key] }}</a>
         </el-row>
         <template v-if="prevSubs.length > 0">
           <div
@@ -67,7 +41,7 @@
               <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">
+              <el-row class="dialog-text" v-if="sub.creator">
                 <strong>{{ formatTime(sub.created) }}</strong>
                 {{ sub.creator.name }}
               </el-row>
@@ -91,7 +65,7 @@
             </div>
           </template>
         </template>
-        <template v-if="authenticated">
+        <template v-if="authenticated || offlineAnnotationEnabled">
           <template v-if="isEditable">
             <el-row class="dialog-spacer"></el-row>
             <el-row v-if="!editing">
@@ -184,7 +158,7 @@ export default {
   name: "AnnotationPopup",
   props: {
     annotationEntry: {
-      type: Array,
+      type: Object,
     },
   },
   inject: ["$annotator", "userApiKey"],
@@ -213,64 +187,41 @@ export default {
       errorMessage: "",
       creator: undefined,
       copyContent: '',
-      entryIndex: 0,
     };
   },
   computed: {
-    entry: function () {
-      return this.annotationEntry[this.entryIndex];
-    },
-    previousLabel: function () {
-      if (this.entryIndex === 0) {
-        return "This is the first item. Click 'Next' to see more information.";
-      }
-      return this.annotationEntry[this.entryIndex - 1]?.label;
-    },
-    nextLabel: function () {
-      if (this.entryIndex === this.annotationEntry.length - 1) {
-        return "This is the last item. Click 'Previous' to see more information.";
-      }
-      return this.annotationEntry[this.entryIndex + 1]?.label;
-    },
     isEditable: function () {
       return (
-        this.entry["resourceId"] && this.entry["featureId"]
+        this.annotationEntry["resourceId"] && this.annotationEntry["featureId"]
       );
     },
     isPositionUpdated: function () {
       return (
-        this.entry["resourceId"] &&
-        this.entry["type"] === "updated" &&
-        this.entry["positionUpdated"]
+        this.annotationEntry["resourceId"] &&
+        this.annotationEntry["type"] === "updated" &&
+        this.annotationEntry["positionUpdated"]
       );
     },
     isDeleted: function () {
       return (
-        this.entry["resourceId"] &&
-        this.entry["type"] === "deleted"
+        this.annotationEntry["resourceId"] &&
+        this.annotationEntry["type"] === "deleted"
       );
     },
     ontologyLink: function () {
-      const models = this.entry['models'];
+      const models = this.annotationEntry['models'];
       if (models && models.startsWith("UBERON")) {
-        return `http://purl.obolibrary.org/obo/${this.entry.models.replace(":", "_")}`;
+        return `http://purl.obolibrary.org/obo/${this.annotationEntry.models.replace(":", "_")}`;
       }
     },
     updatedCopyContent: function () {
       return this.getUpdateCopyContent();
     },
+    offlineAnnotationEnabled: function () {
+      return this.annotationEntry["offline"];
+    },
   },
   methods: {
-    previous: function () {
-      if (this.entryIndex !== 0) {
-        this.entryIndex = this.entryIndex - 1;
-      }
-    },
-    next: function () {
-      if (this.entryIndex !== this.annotationEntry.length - 1) {
-        this.entryIndex = this.entryIndex + 1;
-      }
-    },
     processEvidences: function(sub) {
       const evidences = [];
       if (sub?.body?.evidence) {
@@ -314,16 +265,24 @@ export default {
       return new Date(dateString).toLocaleDateString(undefined, options);
     },
     updatePrevSubmissions: function () {
-      if (this.$annotator && this.authenticated) {
+      if (this.offlineAnnotationEnabled) {
+        const offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
+        this.prevSubs = offlineAnnotations.filter((offline) => {
+          return (
+            offline.resource === this.annotationEntry.resourceId &&
+            offline.item.id === this.annotationEntry.featureId
+          )
+        });
+      } else if (this.$annotator && this.authenticated) {
         if (
-          this.entry["resourceId"] &&
-          this.entry["featureId"]
+          this.annotationEntry["resourceId"] &&
+          this.annotationEntry["featureId"]
         ) {
           this.$annotator
             ?.itemAnnotations(
               this.userApiKey,
-              this.entry["resourceId"],
-              this.entry["featureId"]
+              this.annotationEntry["resourceId"],
+              this.annotationEntry["featureId"]
             )
             .then((value) => {
               this.prevSubs = value;
@@ -338,13 +297,13 @@ export default {
       // User can either update/delete annotation directly
       // or provide extra comments for update/delete action
       if (
-        this.entry["type"] === "updated" &&
-        this.entry["positionUpdated"]
+        this.annotationEntry["type"] === "updated" &&
+        this.annotationEntry["positionUpdated"]
       ) {
         this.comment = this.comment
           ? `Position Updated: ${this.comment}`
           : "Position Updated";
-      } else if (this.entry["type"] === "deleted") {
+      } else if (this.annotationEntry["type"] === "deleted") {
         this.comment = this.comment
           ? `Feature Deleted: ${this.comment}`
           : "Feature Deleted";
@@ -352,8 +311,8 @@ export default {
 
       if (this.evidence.length > 0 || this.comment) {
         if (
-          this.entry["resourceId"] &&
-          this.entry["featureId"]
+          this.annotationEntry["resourceId"] &&
+          this.annotationEntry["featureId"]
         ) {
           const evidenceURLs = [];
           this.evidence.forEach((evidence) => {
@@ -371,11 +330,11 @@ export default {
             }
           });
           const userAnnotation = {
-            resource: this.entry["resourceId"],
+            resource: this.annotationEntry["resourceId"],
             item: Object.assign(
-              { id: this.entry["featureId"] },
+              { id: this.annotationEntry["featureId"] },
               Object.fromEntries(
-                Object.entries(this.entry).filter(([key]) =>
+                Object.entries(this.annotationEntry).filter(([key]) =>
                   ["label", "models"].includes(key)
                 )
               )
@@ -384,17 +343,16 @@ export default {
               evidence: evidenceURLs,
               comment: this.comment,
             },
-            feature: this.entry["feature"],
+            feature: this.annotationEntry["feature"],
           };
-          Object.assign(userAnnotation.body, this.entry["body"]);
-          if (this.entry["type"] === "deleted") {
+          Object.assign(userAnnotation.body, this.annotationEntry["body"]);
+          if (this.annotationEntry["type"] === "deleted") {
             userAnnotation.feature = undefined;
           }
           if (this.creator) userAnnotation.creator = this.creator;
           this.$annotator
             ?.addAnnotation(this.userApiKey, userAnnotation)
             .then(() => {
-              this.$emit("annotation", userAnnotation);
               this.errorMessage = "";
               this.resetSubmission();
               this.updatePrevSubmissions();
@@ -403,6 +361,7 @@ export default {
               this.errorMessage =
                 "There is a problem with the submission, please try again later";
             });
+          this.$emit("annotation", userAnnotation);
         }
       }
     },
@@ -416,41 +375,43 @@ export default {
       this.comment = "";
     },
     getUpdateCopyContent: function () {
-      if (!this.entry) {
+      if (!this.annotationEntry) {
         return '';
       }
 
       const contentArray = [];
 
       // featureId
-      if (this.entry.featureId) {
-        contentArray.push(`<div><strong>Feature ID:</strong>${this.entry.featureId}</div>`);
+      if (this.annotationEntry.featureId) {
+        contentArray.push(`<div><strong>Feature ID:</strong>${this.annotationEntry.featureId}</div>`);
       }
 
       // label
-      if (this.entry.label) {
-        contentArray.push(`<div><strong>Label:</strong>${this.entry.label}</div>`);
+      if (this.annotationEntry.label) {
+        contentArray.push(`<div><strong>Label:</strong>${this.annotationEntry.label}</div>`);
       }
 
       // models
-      if (this.entry.models) {
-        contentArray.push(`<div><strong>Ontology:</strong>${this.entry.models}</div>`);
+      if (this.annotationEntry.models) {
+        contentArray.push(`<div><strong>Ontology:</strong>${this.annotationEntry.models}</div>`);
         if (this.ontologyLink) {
           contentArray.push(`<div><strong>Ontology Link:</strong>${this.ontologyLink}</div>`);
         }
       }
 
       // resourceId
-      if (this.entry.resourceId) {
-        contentArray.push(`<div><strong>Resource:</strong>${this.entry.resourceId}</div>`);
+      if (this.annotationEntry.resourceId) {
+        contentArray.push(`<div><strong>Resource:</strong>${this.annotationEntry.resourceId}</div>`);
       }
 
       if (this.prevSubs.length) {
         let annotationContent = '<div><strong>Annotations:</strong></div>\n<br>';
         this.prevSubs.map((sub, index) => {
-          annotationContent += `<div><strong>Created:</strong>${this.formatTime(sub.created)}</div>\n<br>`;
-          annotationContent += `<div><strong>Creator:</strong>${sub.creator.name}</div>\n<br>`;
-          annotationContent += `<div><strong>Email:</strong>${sub.creator.email}</div>\n<br>`;
+          if (sub.creator) {
+            annotationContent += `<div><strong>Created:</strong>${this.formatTime(sub.created)}</div>\n<br>`;
+            annotationContent += `<div><strong>Creator:</strong>${sub.creator.name}</div>\n<br>`;
+            annotationContent += `<div><strong>Email:</strong>${sub.creator.email}</div>\n<br>`;
+          }
           if (sub.body.evidence.length) {
             let evidenceContent = '';
             sub.body.evidence.forEach((evi, index) => {
@@ -468,15 +429,15 @@ export default {
     },
   },
   watch: {
-    entry: {
-      deep: true,
-      immediate: true,
+    annotationEntry: {
       handler: function (newVal, oldVal) {
         if (newVal !== oldVal) {
           this.resetSubmission();
           this.updatePrevSubmissions();
         }
       },
+      immediate: false,
+      deep: false,
     },
   },
   mounted: function () {
@@ -485,46 +446,16 @@ export default {
         this.creator = userData;
         if (!userData.orcid) this.creator.orcid = "0000-0000-0000-0000";
         this.authenticated = true;
-        this.updatePrevSubmissions();
       } else {
         this.errorMessage = "";
       }
+      this.updatePrevSubmissions();
     });
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.toggle-button {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 30px;
-
-  .is-disabled {
-    color: #fff !important;
-    background-color: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
-  }
-
-  .button {
-    margin-left: 0px !important;
-    margin-top: 0px !important;
-    font-size: 14px !important;
-    background-color: $app-primary-color;
-    color: #fff;
-
-    & + .button {
-      margin-top: 10px !important;
-    }
-
-    &:hover {
-      color: #fff !important;
-      background: #ac76c5 !important;
-      border: 1px solid #ac76c5 !important;
-    }
-  }
-}
-
 .info-field {
   padding: 0;
   display: flex;

package/src/components/Tooltip/ExternalResourceCard.vue

@@ -22,8 +22,8 @@
         v-for="reference of pubMedReferences"
         :key="reference.id"
         :class="{
-          'loading': reference.citation && !reference.citation.error && reference.citation[citationType] === '',
-          'error': reference.citation && reference.citation.error
+          'loading': isCitationLoading(reference.citation),
+          'error': isCitationError(reference.citation),
         }"
       >
         <template v-if="reference.citation">
@@ -50,49 +50,34 @@
           <template v-else>
             <span v-html="reference.citation[citationType]"></span>
 
-            <div class="reference-button-container">
-              <el-button
-                class="reference-icon-button"
-                size="small"
-                @click="showRelatedConnectivities(reference.resource)"
-              >
-                Show related connectivities
-              </el-button>
-            </div>
+            <RelatedConnectivitiesButton
+              :resource="reference.resource"
+              @show-related-connectivities="showRelatedConnectivities"
+            />
 
             <CopyToClipboard :content="reference.citation[citationType]" />
           </template>
         </template>
       </li>
 
-      <li v-for="reference of openLibReferences">
+      <li v-for="reference of openLibReferences" :key="reference.id">
         <div v-html="formatCopyReference(reference)"></div>
 
-        <div class="reference-button-container">
-          <el-button
-            class="reference-icon-button"
-            size="small"
-            @click="showRelatedConnectivities(reference.resource)"
-          >
-            Show related connectivities
-          </el-button>
-        </div>
+        <RelatedConnectivitiesButton
+          :resource="reference.resource"
+          @show-related-connectivities="showRelatedConnectivities"
+        />
 
         <CopyToClipboard :content="formatCopyReference(reference)" />
       </li>
 
-      <li v-for="reference of isbnDBReferences">
+      <li v-for="reference of isbnDBReferences" :key="reference.id">
         <a :href="reference.url" target="_blank">{{ reference.url }}</a>
 
-        <div class="reference-button-container">
-          <el-button
-            class="reference-icon-button"
-            size="small"
-            @click="showRelatedConnectivities(reference.resource)"
-          >
-            Show related connectivities
-          </el-button>
-        </div>
+        <RelatedConnectivitiesButton
+          :resource="reference.resource"
+          @show-related-connectivities="showRelatedConnectivities"
+        />
 
         <CopyToClipboard :content="reference.url" />
       </li>
@@ -103,6 +88,7 @@
 <script>
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
 import { delay } from '../utilities';
+import RelatedConnectivitiesButton from './RelatedConnectivitiesButton.vue';
 
 const CROSSCITE_API_HOST = 'https://citation.doi.org';
 const CITATION_OPTIONS = [
@@ -128,6 +114,10 @@ const LOADING_DELAY = 600;
 
 export default {
   name: "ExternalResourceCard",
+  components: {
+    CopyToClipboard,
+    RelatedConnectivitiesButton,
+  },
   props: {
     resources: {
       type: Array,
@@ -411,6 +401,12 @@ export default {
     reloadCitation: function (reference) {
       this.generateCitationText(reference, this.citationType);
     },
+    isCitationLoading: function (citation) {
+      return citation && !citation[this.citationType] && !citation.error;
+    },
+    isCitationError: function (citation) {
+      return citation && citation.error;
+    },
     updateCopyContents: function () {
       const citationTypeObj = this.citationOptions.find((item) => item.value === this.citationType);
       let citationFormatStyle = '';
@@ -611,7 +607,7 @@ export default {
     &.loading {
       padding: 1rem;
 
-      &::before {
+      &::after {
         content: "";
         display: block;
         width: 100%;
@@ -691,20 +687,6 @@ export default {
   cursor: pointer;
 }
 
-.reference-button-container {
-  margin-top: 0.5rem;
-}
-
-.reference-icon-button {
-  color: $app-primary-color !important;
-  background-color: #f9f2fc !important;
-  border-color: $app-primary-color !important;
-
-  &:hover {
-    background-color: transparent !important;
-  }
-}
-
 @keyframes loadingAnimation {
   0% {
     background-position: -30vw 0;