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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.4.3-beta.2",
+  "version": "1.4.3-isan.1",
   "files": [
     "dist/*",
     "src/*",
@@ -30,11 +30,6 @@
   },
   "dependencies": {
     "@abi-software/svg-sprite": "^1.0.1",
-    "@citation-js/core": "^0.7.14",
-    "@citation-js/plugin-bibtex": "^0.7.17",
-    "@citation-js/plugin-csl": "^0.7.14",
-    "@citation-js/plugin-doi": "^0.7.16",
-    "@citation-js/plugin-pubmed": "^0.3.0",
     "@element-plus/icons-vue": "^2.3.1",
     "cytoscape": "^3.30.2",
     "element-plus": "2.8.4",

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,33 +141,90 @@ provide(/* key */ "userApiKey", /* value */ undefined);
 
 function addTooltipEntry() {
   tooltipDisplay.value = true;
-  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"],
-  };
+  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",
+    },
+  ];
 }
 function removeTooltipEntry() {
   tooltipDisplay.value = false;
-  tooltipEntry.value = {};
+  tooltipEntry.value = [];
 }
 function addAnnotationEntry() {
   tooltipDisplay.value = true;
@@ -234,7 +291,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) {
@@ -263,7 +320,7 @@ const createData = ref({
   editingIndex: -1,
   faceIndex: -1,
   toBeDeleted: false,
-})
+});
 function cancelCreate() {
   console.log("🚀 ~ CreateTooltipContent : cancelCreate");
 }
@@ -422,14 +479,14 @@ function confirmCreate(value) {
           Add Tooltip Entry
         </el-button>
         <el-button
-          v-show="Object.keys(tooltipEntry).length > 0"
+          v-show="tooltipEntry.length > 0"
           @click="removeTooltipEntry"
           size="small"
         >
           Remove Tooltip Entry
         </el-button>
         <el-button
-          v-show="!Object.keys(tooltipEntry).length > 0"
+          v-show="tooltipEntry.length === 0"
           @click="addAnnotationEntry"
           size="small"
         >
@@ -449,10 +506,18 @@ 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>
@@ -462,16 +527,10 @@ 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>
@@ -568,9 +627,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/Tooltip/AnnotationPopup.vue

@@ -1,5 +1,31 @@
 <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>
@@ -7,16 +33,16 @@
           <copy-to-clipboard :content="updatedCopyContent" />
         </div>
       </el-row>
-      <template v-if="annotationEntry">
+      <template v-if="entry">
         <el-row
           v-for="(key, label) in displayPair"
-          v-show="annotationEntry[key]"
+          v-show="entry[key]"
           class="dialog-text"
           :key="key"
         >
           <strong>{{ label }}: </strong>&nbsp;
-          <span v-if="label !== 'Ontology'">{{ annotationEntry[key] }}</span>
-          <a v-else :href="ontologyLink" target="_blank">{{ annotationEntry[key] }}</a>
+          <span v-if="label !== 'Ontology'">{{ entry[key] }}</span>
+          <a v-else :href="ontologyLink" target="_blank">{{ entry[key] }}</a>
         </el-row>
         <template v-if="prevSubs.length > 0">
           <div
@@ -158,7 +184,7 @@ export default {
   name: "AnnotationPopup",
   props: {
     annotationEntry: {
-      type: Object,
+      type: Array,
     },
   },
   inject: ["$annotator", "userApiKey"],
@@ -187,31 +213,47 @@ 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.annotationEntry["resourceId"] && this.annotationEntry["featureId"]
+        this.entry["resourceId"] && this.entry["featureId"]
       );
     },
     isPositionUpdated: function () {
       return (
-        this.annotationEntry["resourceId"] &&
-        this.annotationEntry["type"] === "updated" &&
-        this.annotationEntry["positionUpdated"]
+        this.entry["resourceId"] &&
+        this.entry["type"] === "updated" &&
+        this.entry["positionUpdated"]
       );
     },
     isDeleted: function () {
       return (
-        this.annotationEntry["resourceId"] &&
-        this.annotationEntry["type"] === "deleted"
+        this.entry["resourceId"] &&
+        this.entry["type"] === "deleted"
       );
     },
     ontologyLink: function () {
-      const models = this.annotationEntry['models'];
+      const models = this.entry['models'];
       if (models && models.startsWith("UBERON")) {
-        return `http://purl.obolibrary.org/obo/${this.annotationEntry.models.replace(":", "_")}`;
+        return `http://purl.obolibrary.org/obo/${this.entry.models.replace(":", "_")}`;
       }
     },
     updatedCopyContent: function () {
@@ -219,6 +261,16 @@ export default {
     },
   },
   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) {
@@ -264,14 +316,14 @@ export default {
     updatePrevSubmissions: function () {
       if (this.$annotator && this.authenticated) {
         if (
-          this.annotationEntry["resourceId"] &&
-          this.annotationEntry["featureId"]
+          this.entry["resourceId"] &&
+          this.entry["featureId"]
         ) {
           this.$annotator
             ?.itemAnnotations(
               this.userApiKey,
-              this.annotationEntry["resourceId"],
-              this.annotationEntry["featureId"]
+              this.entry["resourceId"],
+              this.entry["featureId"]
             )
             .then((value) => {
               this.prevSubs = value;
@@ -286,13 +338,13 @@ export default {
       // User can either update/delete annotation directly
       // or provide extra comments for update/delete action
       if (
-        this.annotationEntry["type"] === "updated" &&
-        this.annotationEntry["positionUpdated"]
+        this.entry["type"] === "updated" &&
+        this.entry["positionUpdated"]
       ) {
         this.comment = this.comment
           ? `Position Updated: ${this.comment}`
           : "Position Updated";
-      } else if (this.annotationEntry["type"] === "deleted") {
+      } else if (this.entry["type"] === "deleted") {
         this.comment = this.comment
           ? `Feature Deleted: ${this.comment}`
           : "Feature Deleted";
@@ -300,8 +352,8 @@ export default {
 
       if (this.evidence.length > 0 || this.comment) {
         if (
-          this.annotationEntry["resourceId"] &&
-          this.annotationEntry["featureId"]
+          this.entry["resourceId"] &&
+          this.entry["featureId"]
         ) {
           const evidenceURLs = [];
           this.evidence.forEach((evidence) => {
@@ -319,11 +371,11 @@ export default {
             }
           });
           const userAnnotation = {
-            resource: this.annotationEntry["resourceId"],
+            resource: this.entry["resourceId"],
             item: Object.assign(
-              { id: this.annotationEntry["featureId"] },
+              { id: this.entry["featureId"] },
               Object.fromEntries(
-                Object.entries(this.annotationEntry).filter(([key]) =>
+                Object.entries(this.entry).filter(([key]) =>
                   ["label", "models"].includes(key)
                 )
               )
@@ -332,10 +384,10 @@ export default {
               evidence: evidenceURLs,
               comment: this.comment,
             },
-            feature: this.annotationEntry["feature"],
+            feature: this.entry["feature"],
           };
-          Object.assign(userAnnotation.body, this.annotationEntry["body"]);
-          if (this.annotationEntry["type"] === "deleted") {
+          Object.assign(userAnnotation.body, this.entry["body"]);
+          if (this.entry["type"] === "deleted") {
             userAnnotation.feature = undefined;
           }
           if (this.creator) userAnnotation.creator = this.creator;
@@ -364,33 +416,33 @@ export default {
       this.comment = "";
     },
     getUpdateCopyContent: function () {
-      if (!this.annotationEntry) {
+      if (!this.entry) {
         return '';
       }
 
       const contentArray = [];
 
       // featureId
-      if (this.annotationEntry.featureId) {
-        contentArray.push(`<div><strong>Feature ID:</strong>${this.annotationEntry.featureId}</div>`);
+      if (this.entry.featureId) {
+        contentArray.push(`<div><strong>Feature ID:</strong>${this.entry.featureId}</div>`);
       }
 
       // label
-      if (this.annotationEntry.label) {
-        contentArray.push(`<div><strong>Label:</strong>${this.annotationEntry.label}</div>`);
+      if (this.entry.label) {
+        contentArray.push(`<div><strong>Label:</strong>${this.entry.label}</div>`);
       }
 
       // models
-      if (this.annotationEntry.models) {
-        contentArray.push(`<div><strong>Ontology:</strong>${this.annotationEntry.models}</div>`);
+      if (this.entry.models) {
+        contentArray.push(`<div><strong>Ontology:</strong>${this.entry.models}</div>`);
         if (this.ontologyLink) {
           contentArray.push(`<div><strong>Ontology Link:</strong>${this.ontologyLink}</div>`);
         }
       }
 
       // resourceId
-      if (this.annotationEntry.resourceId) {
-        contentArray.push(`<div><strong>Resource:</strong>${this.annotationEntry.resourceId}</div>`);
+      if (this.entry.resourceId) {
+        contentArray.push(`<div><strong>Resource:</strong>${this.entry.resourceId}</div>`);
       }
 
       if (this.prevSubs.length) {
@@ -416,15 +468,15 @@ export default {
     },
   },
   watch: {
-    annotationEntry: {
+    entry: {
+      deep: true,
+      immediate: true,
       handler: function (newVal, oldVal) {
         if (newVal !== oldVal) {
           this.resetSubmission();
           this.updatePrevSubmissions();
         }
       },
-      immediate: false,
-      deep: false,
     },
   },
   mounted: function () {
@@ -443,6 +495,36 @@ export default {
 </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;