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

package/package.json

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

package/src/App.vue

@@ -130,7 +130,7 @@ function onActionClick(value) {
  * Tooltip
  */
 const tooltipDisplay = ref(false);
-const tooltipEntry = ref([]);
+const tooltipEntry = ref({});
 const featuresAlert = ref(undefined);
 const annotationDisplay = ref(false);
 const annotationEntry = ref({});
@@ -141,90 +141,33 @@ provide(/* key */ "userApiKey", /* value */ undefined);
 
 function addTooltipEntry() {
   tooltipDisplay.value = true;
-  tooltipEntry.value = [
-    {
-      destinations: ["eccrine sweat gland of the trunk"],
-      origins: [
-        "Sixth thoracic ganglion",
-        "Twelfth thoracic ganglion",
-        "Fifth thoracic ganglion",
-        "Ninth thoracic ganglion",
-        "Seventh thoracic ganglion",
-        "Eighth thoracic ganglion",
-        "Fourth thoracic ganglion",
-        "Tenth thoracic ganglion",
-        "Eleventh thoracic ganglion",
-      ],
-      components: ["nerve"],
-      destinationsWithDatasets: [
-        { id: "ILX:0795061", name: "eccrine sweat gland of the trunk" },
-      ],
-      originsWithDatasets: [
-        { id: "ILX:0784378", name: "Ninth thoracic ganglion" },
-        { id: "ILX:0784569", name: "Tenth thoracic ganglion" },
-        { id: "ILX:0784721", name: "Eighth thoracic ganglion" },
-        { id: "ILX:0786141", name: "Fifth thoracic ganglion" },
-        { id: "ILX:0786272", name: "Fourth thoracic ganglion" },
-        { id: "ILX:0787009", name: "Twelfth thoracic ganglion" },
-        { id: "ILX:0787015", name: "Eleventh thoracic ganglion" },
-        { id: "ILX:0789947", name: "Sixth thoracic ganglion" },
-        { id: "ILX:0790482", name: "Seventh thoracic ganglion" },
-      ],
-      componentsWithDatasets: [{ id: "UBERON:0001021", name: "nerve" }],
-      title: "neuron type swglnd 161",
-      featureId: ["ilxtr:sparc-nlp/swglnd/161"],
-      hyperlinks: [
-        "https://doi.org/10.1007/s10286-015-0282-1",
-        "https://doi.org/10.1111/bjd.15808",
-        "https://doi.org/10.1159/000060678",
-      ],
-      provenanceTaxonomy: ["NCBITaxon:9606"],
-      provenanceTaxonomyLabel: ["Homo sapiens"],
-      knowledgeSource: "sckan-2024-09-21-npo",
-      mapId: "rat-flatmap",
-      mapuuid: "b4ae1699-5690-5640-97b7-d711ae02dcb9",
-    },
-    {
-      destinations: ["intramural ganglion of the kidney"],
-      origins: ["dorsal motor nucleus of vagus nerve"],
-      components: [
-        "renal nerve plexus",
-        "aortic plexus",
-        "esophageal vagus trunk",
-        "vagus X nerve trunk",
-        "vagus nerve",
-      ],
-      destinationsWithDatasets: [
-        { id: "ILX:0795056", name: "intramural ganglion of the kidney" },
-      ],
-      originsWithDatasets: [
-        { id: "UBERON:0002870", name: "dorsal motor nucleus of vagus nerve" },
-      ],
-      componentsWithDatasets: [
-        { id: "ILX:0794853", name: "esophageal vagus trunk" },
-        { id: "UBERON:0001759", name: "vagus nerve" },
-        { id: "UBERON:0003535", name: "vagus X nerve trunk" },
-        { id: "UBERON:0018676", name: "renal nerve plexus" },
-        { id: "UBERON:0035772", name: "aortic plexus" },
-      ],
-      title:
-        "dorsal motor nucleus of vagus nerve to intramural ganglia of the kidney via vagus nerve via esophageal vagus trunk via vagal trunks via aortic plexus via renal plexus",
-      featureId: ["ilxtr:sparc-nlp/kidney/135"],
-      hyperlinks: [
-        "https://uilx.org/tgbugs/u/r/isbn-13/978-0323680424",
-        "https://doi.org/10.1016/j.aanat.2015.11.004",
-      ],
-      provenanceTaxonomy: ["NCBITaxon:9606"],
-      provenanceTaxonomyLabel: ["Homo sapiens"],
-      knowledgeSource: "sckan-2024-09-21-npo",
-      mapId: "rat-flatmap",
-      mapuuid: "b4ae1699-5690-5640-97b7-d711ae02dcb9",
-    },
-  ];
+  tooltipEntry.value = {
+    destinations: [null],
+    origins: [null],
+    components: ["pudendal nerve"],
+    destinationsWithDatasets: [
+      { id: "UBERON:0004917", name: "urethral sphincter" },
+    ],
+    originsWithDatasets: [
+      { id: "UBERON:0022278", name: "nucleus of pudendal nerve" },
+    ],
+    componentsWithDatasets: [{ id: "UBERON:0011390", name: "pudendal nerve" }],
+    title:
+      "Nucleus of the pudendal nerve to urethral sphincter via pudendal nerve",
+    featureId: ["ilxtr:sparc-nlp/mmset1/1"],
+    hyperlinks: [
+      {
+        url: "https://pubmed.ncbi.nlm.nih.gov/?term=%2F%2Fdoi.org%2F10.1155%252F2012%252F816274",
+        id: "pubmed",
+      },
+    ],
+    provenanceTaxonomy: ["NCBITaxon:9606"],
+    provenanceTaxonomyLabel: ["Homo sapiens"],
+  };
 }
 function removeTooltipEntry() {
   tooltipDisplay.value = false;
-  tooltipEntry.value = [];
+  tooltipEntry.value = {};
 }
 function addAnnotationEntry() {
   tooltipDisplay.value = true;
@@ -291,7 +234,7 @@ function setColourField(treeData, nodeData, activeColour) {
 function setColour(nodeData, value) {
   if (nodeData && nodeData.isPrimitives) {
     const activeColour = value ? value : nodeData.defaultColour;
-    setColourField(treeDataEntry.value, nodeData, activeColour);
+    setColourField(treeDataEntry.value, nodeData, activeColour)
   }
 }
 function checkAll(value) {
@@ -320,7 +263,7 @@ const createData = ref({
   editingIndex: -1,
   faceIndex: -1,
   toBeDeleted: false,
-});
+})
 function cancelCreate() {
   console.log("🚀 ~ CreateTooltipContent : cancelCreate");
 }
@@ -479,14 +422,14 @@ function confirmCreate(value) {
           Add Tooltip Entry
         </el-button>
         <el-button
-          v-show="tooltipEntry.length > 0"
+          v-show="Object.keys(tooltipEntry).length > 0"
           @click="removeTooltipEntry"
           size="small"
         >
           Remove Tooltip Entry
         </el-button>
         <el-button
-          v-show="tooltipEntry.length === 0"
+          v-show="!Object.keys(tooltipEntry).length > 0"
           @click="addAnnotationEntry"
           size="small"
         >
@@ -506,18 +449,10 @@ function confirmCreate(value) {
         <h3>TreeControls - {{ mapType }}</h3>
       </el-col>
       <el-col>
-        <el-button
-          v-show="mapType === 'scaffold'"
-          @click="switchTreeEntry('flatmap')"
-          size="small"
-        >
+        <el-button v-show="mapType==='scaffold'" @click="switchTreeEntry('flatmap')" size="small">
           Display Flatmap Tree
         </el-button>
-        <el-button
-          v-show="mapType === 'flatmap'"
-          @click="switchTreeEntry('scaffold')"
-          size="small"
-        >
+        <el-button v-show="mapType==='flatmap'" @click="switchTreeEntry('scaffold')" size="small">
           Display Scaffold Tree
         </el-button>
       </el-col>
@@ -527,10 +462,16 @@ function confirmCreate(value) {
         <h3>Connectivity Graph</h3>
       </el-col>
       <el-col>
-        <el-button @click="showConnectivityGraph = true" size="small">
+        <el-button
+          @click="showConnectivityGraph = true"
+          size="small"
+        >
           Show connectivity graph
         </el-button>
-        <el-button @click="showConnectivityGraph = false" size="small">
+        <el-button
+          @click="showConnectivityGraph = false"
+          size="small"
+        >
           Hide connectivity graph
         </el-button>
       </el-col>
@@ -627,9 +568,9 @@ function confirmCreate(value) {
   top: calc(50% - 100px);
   left: calc(50% - 200px);
 }
-.annotation-popup {
+.annotation-popup{
   margin-top: 8px;
-  width: 400px;
+  width:400px;
   border-style: solid;
   border-width: 1px;
   border-color: black;

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -160,10 +160,6 @@ export default {
       type: Array,
       default: [],
     },
-    connectivityFromMap: {
-      type: Object,
-      default: () => null,
-    },
   },
   data: function () {
     return {
@@ -188,20 +184,26 @@ export default {
       connectivityGraphContainer: null,
     };
   },
-  watch: {
-    connectivityFromMap: function (oldVal, newVal) {
-      if (oldVal != newVal) {
-        this.showSpinner();
-        this.start();
-      }
-    }
-  },
   mounted() {
     this.showSpinner();
     this.updateTooltipContainer();
     this.refreshCache();
     this.loadCacheData();
-    this.start();
+    this.run()
+      .then((res) => {
+        if (res?.success) {
+          this.showGraph(this.entry);
+        } else if (res?.error) {
+          this.loadingError = res.error;
+        } else {
+          this.loadingError = 'Loading error!';
+        }
+        this.hideSpinner();
+      })
+      .catch((error) => {
+        this.loadingError = 'Loading error!';
+        this.hideSpinner();
+      });
   },
   methods: {
     updateTooltipContainer: function () {
@@ -273,22 +275,6 @@ export default {
 
       sessionStorage.setItem('connectivity-graph-expiry', expiry);
     },
-    start: function () {
-      this.run()
-        .then((res) => {
-          if (res?.success) {
-            this.showGraph(this.entry);
-          } else if (res?.error) {
-            this.loadingError = res.error;
-          } else {
-            this.loadingError = 'Loading error!';
-          }
-        })
-        .catch((error) => {
-          this.loadingError = 'Loading error!';
-          this.hideSpinner();
-        });
-    },
     run: async function () {
       if (!this.schemaVersion) {
         this.schemaVersion = await this.getSchemaVersion();
@@ -319,24 +305,8 @@ export default {
     showGraph: async function (neuronPath) {
       const graphCanvas = this.$refs.graphCanvas;
 
-      // Update label data
-      if (this.connectivityFromMap) {
-        this.cacheLabels(this.connectivityFromMap);
-        await this.getCachedTermLabels();
-      }
-
       this.connectivityGraph = new ConnectivityGraph(this.labelCache, graphCanvas);
-      const connectivityInfo = this.knowledgeByPath.get(neuronPath);
-
-      // Update connectivity
-      if (this.connectivityFromMap) {
-        connectivityInfo.axons = this.connectivityFromMap.axons;
-        connectivityInfo.connectivity = this.connectivityFromMap.connectivity;
-        connectivityInfo.dendrites = this.connectivityFromMap.dendrites;
-        connectivityInfo.somas = this.connectivityFromMap.somas;
-      }
-
-      await this.connectivityGraph.addConnectivity(connectivityInfo);
+      await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(neuronPath));
 
       this.connectivityGraph.showConnectivity(graphCanvas);
 
@@ -352,8 +322,6 @@ export default {
          */
         this.$emit('tap-node', data);
       });
-
-      this.hideSpinner();
     },
     query: async function (sql, params) {
       const url = `${this.mapServer}knowledge/query/`;

package/src/components/Tooltip/AnnotationPopup.vue

@@ -41,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>
@@ -65,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">
@@ -217,6 +217,9 @@ export default {
     updatedCopyContent: function () {
       return this.getUpdateCopyContent();
     },
+    offlineAnnotationEnabled: function () {
+      return this.annotationEntry["offline"];
+    },
   },
   methods: {
     processEvidences: function(sub) {
@@ -262,7 +265,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.annotationEntry.resourceId &&
+            offline.item.id === this.annotationEntry.featureId
+          )
+        });
+      } else if (this.$annotator && this.authenticated) {
         if (
           this.annotationEntry["resourceId"] &&
           this.annotationEntry["featureId"]
@@ -342,7 +353,6 @@ export default {
           this.$annotator
             ?.addAnnotation(this.userApiKey, userAnnotation)
             .then(() => {
-              this.$emit("annotation", userAnnotation);
               this.errorMessage = "";
               this.resetSubmission();
               this.updatePrevSubmissions();
@@ -351,6 +361,7 @@ export default {
               this.errorMessage =
                 "There is a problem with the submission, please try again later";
             });
+          this.$emit("annotation", userAnnotation);
         }
       }
     },
@@ -396,9 +407,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) => {
@@ -433,10 +446,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();
     });
   },
 };

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;