@abi-software/map-utilities 1.2.2-beta.2 → 1.2.2-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.2.2-beta.2",
+  "version": "1.2.2-beta.3",
   "files": [
     "dist/*",
     "src/*",

package/src/components/ConnectivityGraph/graph.js

@@ -337,7 +337,7 @@ class CytoscapeGraph extends EventTarget
             },
             directed: true,
             style: GRAPH_STYLE,
-            minZoom: 0.1,
+            minZoom: 0.5,
             maxZoom: 10,
             wheelSensitivity: 0.4,
         }).on('mouseover', 'node', this.overNode.bind(this))

package/src/components/DrawToolbar/ConnectionDialog.vue

@@ -3,22 +3,16 @@
     <el-row>
       <el-col>
         <el-row v-if="inDrawing">
-          <span class="dialog-title">Finalise drawing</span>
-          <el-button-group>
-            <el-button
-              type="primary"
-              plain
-              @click="$emit('confirmDrawn', true)"
-            >
-              Confirm
-            </el-button>
-            <el-button type="primary" plain @click="$emit('cancelDrawn', true)">
-              Cancel
-            </el-button>
-          </el-button-group>
+          <span class="dialog-title">Finalize drawing</span>
+          <el-button type="primary" plain @click="$emit('confirmDrawn', true)">
+            Confirm
+          </el-button>
+          <el-button type="primary" plain @click="$emit('cancelDrawn', true)">
+            Cancel
+          </el-button>
         </el-row>
         <el-row v-else>
-          <span class="dialog-title">Visualise connection</span>
+          <span class="dialog-title">Visualize connection</span>
           <el-button
             type="primary"
             plain
@@ -34,7 +28,18 @@
         <b><span>Related Features</span></b>
         <el-row v-for="(value, key) in connectionEntry" :key="key">
           <el-card :shadow="shadowDisplay(key)" @click="handleTooltip(key)">
-            <span>{{ capitalise(value.label) }}</span>
+            <el-popover
+              trigger="hover"
+              :disabled="value.label.length < 20"
+              :width="200"
+              :content="capitalize(value.label)"
+            >
+              <template #reference>
+                <span class="connection-label">
+                  {{ capitalize(value.label) }}
+                </span>
+              </template>
+            </el-popover>
           </el-card>
         </el-row>
       </el-col>
@@ -43,7 +48,7 @@
 </template>
 
 <script>
-const capitalise = function (str) {
+const capitalize = function (str) {
   if (str) return str.charAt(0).toUpperCase() + str.slice(1);
   return "";
 };
@@ -73,8 +78,8 @@ export default {
     shadowDisplay: function (value) {
       return this.tooltipId === value ? "always" : "hover";
     },
-    capitalise: function (label) {
-      return capitalise(label);
+    capitalize: function (label) {
+      return capitalize(label);
     },
     handleTooltip: function (value) {
       this.tooltipId = this.tooltipId === value ? undefined : value;
@@ -100,13 +105,13 @@ export default {
 }
 
 .dialog-title {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: bold;
   color: rgb(131, 0, 191);
 }
 
 .el-button {
-  margin: 5px 0px;
+  margin: 5px 5px 5px 0;
 }
 
 :deep(.el-card) {
@@ -115,4 +120,13 @@ export default {
   border: 0;
   cursor: pointer;
 }
+
+.connection-label {
+  white-space: nowrap;
+  display: block;
+  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
 </style>

package/src/components/DrawToolbar/DrawToolbar.vue

@@ -308,12 +308,12 @@ export default {
   data: function () {
     return {
       toolbarIcons: [
-        { name: "Edit", active: false, disabled: false },
-        { name: "Delete", active: false, disabled: false },
-        { name: "Point", active: false, disabled: false },
-        { name: "LineString", active: false, disabled: false },
-        { name: "Polygon", active: false, disabled: false },
-        { name: "Connection", active: false, disabled: true },
+        { name: "Edit", active: false, disabled: false, type: "mode" },
+        { name: "Delete", active: false, disabled: false, type: "mode" },
+        { name: "Point", active: false, disabled: false, type: "tool" },
+        { name: "LineString", active: false, disabled: false, type: "tool" },
+        { name: "Polygon", active: false, disabled: false, type: "tool" },
+        { name: "Connection", active: false, disabled: true, type: "conn" },
       ],
       connectionDisplay: false,
       dialogPosition: {
@@ -374,13 +374,13 @@ export default {
       this.disabledToolbarConnectionIcon(true);
     },
     activeDrawMode: function (value) {
-      this.updateToolbarIcons(value);
+      this.updateToolbarIcons(value, "mode");
       if (value === "Delete") {
         this.connectionDisplay = false;
       }
     },
     activeDrawTool: function (value) {
-      this.updateToolbarIcons(value);
+      this.updateToolbarIcons(value, "tool");
       if (!value) {
         this.connectionDisplay = false;
       }
@@ -435,7 +435,7 @@ export default {
         this.connectionDisplay = !this.connectionDisplay;
       }
     },
-    updateToolbarIcons: function (value) {
+    updateToolbarIcons: function (value, type) {
       this.toolbarIcons.map((icon) => {
         if (icon.name === value) {
           icon.active = true;
@@ -444,7 +444,8 @@ export default {
         }
       });
       this.toolbarIcons
-        .filter((icon) => icon.name !== "Connection" && icon.name !== value)
+        .filter((icon) => icon.type !== "conn")
+        .filter((icon) => icon.type !== type)
         .map((icon) => {
           if (value) {
             icon.disabled = true;
@@ -456,7 +457,7 @@ export default {
     },
     disabledToolbarConnectionIcon: function (value) {
       this.toolbarIcons
-        .filter((icon) => icon.name === "Connection")
+        .filter((icon) => icon.type === "conn")
         .map((icon) => {
           if (value) {
             icon.disabled = true;
@@ -472,7 +473,7 @@ export default {
     },
     activeToolbarConnectionIcon: function (value) {
       this.toolbarIcons
-        .filter((icon) => icon.name === "Connection")
+        .filter((icon) => icon.type === "conn")
         .map((icon) => {
           if (value) {
             icon.active = true;

package/src/components/Tooltip/AnnotationPopup.vue

@@ -3,6 +3,9 @@
     <div class="block">
       <el-row class="info-field">
         <div class="title">Feature Annotations</div>
+        <div class="title-buttons">
+          <copy-to-clipboard :content="updatedCopyContent" />
+        </div>
       </el-row>
       <template v-if="annotationEntry">
         <el-row
@@ -11,7 +14,9 @@
           class="dialog-text"
           :key="key"
         >
-          <strong>{{ label }}: </strong>&nbsp;{{ annotationEntry[key] }}
+          <strong>{{ label }}: </strong>&nbsp;
+          <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
@@ -43,11 +48,15 @@
               <el-row class="dialog-text">
                 <strong>Evidence: </strong>
                 <el-row
-                  v-for="evidence in sub.body.evidence"
+                  v-for="(evidence, index) in sub.body.evidence"
                   :key="evidence"
                   class="dialog-text"
-                >
-                  <a :href="evidence" target="_blank"> {{ evidence }}</a>
+                > 
+                  <a v-if="typeof evidence === 'object' ":href="Object.values(evidence)[0]" target="_blank"> 
+                    {{ Object.keys(evidence)[0] }}
+                  </a>
+                  <span v-else> {{ evidence }}</span>
+                  <span v-if="index !== sub.body.evidence.length - 1">, </span>
                 </el-row>
               </el-row>
               <el-row class="dialog-text">
@@ -99,18 +108,17 @@
                       <el-select
                         :teleported="false"
                         v-model="evidencePrefix"
-                        placeholder="No Prefix"
+                        placeholder="Other:"
                         class="select-box"
                         popper-class="flatmap_dropdown"
                       >
                         <el-option
                           v-for="item in evidencePrefixes"
-                          :key="item"
-                          :label="item"
-                          :value="item"
+                          :key="item.label"
+                          :value="item.value"
                         >
                           <el-row>
-                            <el-col :span="12">{{ item }}</el-col>
+                            <el-col :span="12">{{ item.label }}</el-col>
                           </el-row>
                         </el-option>
                       </el-select>
@@ -158,14 +166,18 @@ export default {
     return {
       displayPair: {
         "Feature ID": "featureId",
-        Tooltip: "label",
-        Models: "models",
+        Label: "label",
+        Ontology: "models",
         Name: "name",
         Resource: "resourceId",
       },
       editing: false,
-      evidencePrefixes: ["", "DOI:", "PMID:"],
-      evidencePrefix: "",
+      evidencePrefixes: [
+        { value: "DOI:", label: "DOI:" },
+        { value: "PMID:", label: "PMID:" },
+        { value: "", label: "Other:" },
+      ],
+      evidencePrefix: "DOI:",
       evidence: [],
       authenticated: false,
       newEvidence: "",
@@ -174,6 +186,7 @@ export default {
       showSubmissions: true,
       errorMessage: "",
       creator: undefined,
+      copyContent: '',
     };
   },
   computed: {
@@ -195,6 +208,15 @@ export default {
         this.annotationEntry["type"] === "deleted"
       );
     },
+    ontologyLink: function () {
+      const models = this.annotationEntry['models'];
+      if (models && models.startsWith("UBERON")) {
+        return `http://purl.obolibrary.org/obo/${this.annotationEntry.models.replace(":", "_")}`;
+      }
+    },
+    updatedCopyContent: function () {
+      return this.getUpdateCopyContent();
+    },
   },
   methods: {
     evidenceEntered: function (value) {
@@ -257,18 +279,20 @@ export default {
           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(
+          this.evidence.forEach((evi) => {
+            let eviObject = {}
+            if (evi.includes("DOI:")) {
+              eviObject[evi] = evi.replace("DOI:", "https://doi.org/");
+            } else if (evi.includes("PMID:")) {
+              eviObject[evi] = evi.replace(
                 "PMID:",
                 "https://pubmed.ncbi.nlm.nih.gov/"
               );
-              evidenceURLs.push(new URL(link));
+            }
+            if (evi in eviObject) {
+              evidenceURLs.push(eviObject);
             } else {
-              evidenceURLs.push(evidence);
+              evidenceURLs.push(evi);
             }
           });
           const userAnnotation = {
@@ -316,6 +340,57 @@ export default {
       this.newFeature = "";
       this.comment = "";
     },
+    getUpdateCopyContent: function () {
+      if (!this.annotationEntry) {
+        return '';
+      }
+
+      const contentArray = [];
+
+      // featureId
+      if (this.annotationEntry.featureId) {
+        contentArray.push(`<div><strong>Feature ID:</strong>${this.annotationEntry.featureId}</div>`);
+      }
+
+      // label
+      if (this.annotationEntry.label) {
+        contentArray.push(`<div><strong>Label:</strong>${this.annotationEntry.label}</div>`);
+      }
+
+      // models
+      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.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.body.evidence.length) {
+            let evidenceContent = '';
+            sub.body.evidence.forEach((evi, index) => {
+              evidenceContent += `${typeof evi === 'object' ? Object.values(evi)[0] : evi}`;
+              if (index !== sub.body.evidence.length - 1) evidenceContent += ', ';
+            })
+            annotationContent += `<div><strong>Evidence:</strong>${evidenceContent}</div>\n<br>`;
+          }
+          annotationContent += `<div><strong>Comment:</strong>${sub.body.comment}</div>\n<br>`;
+        })
+        contentArray.push(`<div>${annotationContent}</div>`);
+      }
+
+      return contentArray.join('\n\n<br>');
+    },
   },
   watch: {
     annotationEntry: {
@@ -346,7 +421,11 @@ export default {
 
 <style lang="scss" scoped>
 .info-field {
+  padding: 0;
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
 .block {
@@ -405,7 +484,22 @@ export default {
   font-weight: 500;
   font-weight: bold;
   padding-bottom: 8px;
-  color: rgb(131, 0, 191);
+  color: $app-primary-color;
+}
+
+.title-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+
+  :deep(.copy-clipboard-button) {
+    &,
+    &:hover,
+    &:focus {
+      border-color: $app-primary-color !important;
+      border-radius: 50%;
+    }
+  }
 }
 
 .sub-title {

package/src/components.d.ts

@@ -14,7 +14,6 @@ declare module 'vue' {
     CreateTooltipContent: typeof import('./components/Tooltip/CreateTooltipContent.vue')['default']
     DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']