Merge pull request ABI-Software#36 from ddjnw1yu/multiple-neuron-selection

Multiple neuron selection

Author: akhuoa

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.4.2",
+  "version": "1.5.0-beta.0",
   "files": [
     "dist/*",
     "src/*",

package.json

@@ -45,6 +45,7 @@ declare module 'vue' {
     ExternalResourceCard: typeof import('./components/Tooltip/ExternalResourceCard.vue')['default']
     HelpModeDialog: typeof import('./components/HelpModeDialog/HelpModeDialog.vue')['default']
     ProvenancePopup: typeof import('./components/Tooltip/ProvenancePopup.vue')['default']
+    RelatedConnectivitiesButton: typeof import('./components/Tooltip/RelatedConnectivitiesButton.vue')['default']
     Tooltip: typeof import('./components/Tooltip/Tooltip.vue')['default']
     TreeControls: typeof import('./components/TreeControls/TreeControls.vue')['default']
   }

src/components.d.ts

@@ -67,7 +67,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 +91,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">
@@ -259,6 +259,12 @@ export default {
     updatedCopyContent: function () {
       return this.getUpdateCopyContent();
     },
+    offlineAnnotationEnabled: function () {
+      if (this.entry) {
+        return this.entry["offline"];
+      }
+      return false;
+    },
   },
   methods: {
     previous: function () {
@@ -314,7 +320,15 @@ 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.entry.resourceId &&
+            offline.item.id === this.entry.featureId
+          )
+        });
+      } else if (this.$annotator && this.authenticated) {
         if (
           this.entry["resourceId"] &&
           this.entry["featureId"]
@@ -394,7 +408,6 @@ export default {
           this.$annotator
             ?.addAnnotation(this.userApiKey, userAnnotation)
             .then(() => {
-              this.$emit("annotation", userAnnotation);
               this.errorMessage = "";
               this.resetSubmission();
               this.updatePrevSubmissions();
@@ -403,6 +416,7 @@ export default {
               this.errorMessage =
                 "There is a problem with the submission, please try again later";
             });
+          this.$emit("annotation", userAnnotation);
         }
       }
     },
@@ -448,9 +462,11 @@ export default {
       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) => {
@@ -494,10 +510,10 @@ 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();
     });
   },
 };

src/components/Tooltip/AnnotationPopup.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;

src/components/Tooltip/ExternalResourceCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="reference-button-container">
+    <el-button
+      class="reference-icon-button"
+      size="small"
+      @click="$emit('show-related-connectivities', resource)"
+    >
+      Show related connectivities
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RelatedConnectivitiesButton",
+  props: {
+    resource: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+  }
+}
+</style>