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

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -12,7 +12,6 @@
         >
           <el-button
             class="control-button"
-            :class="theme"
             size="small"
             @click="reset"
           >
@@ -30,7 +29,6 @@
         >
           <el-button
             class="control-button"
-            :class="theme"
             size="small"
             @click="toggleZoom"
           >
@@ -53,7 +51,6 @@
         >
           <el-button
             class="control-button"
-            :class="theme"
             size="small"
             @click="zoomIn"
           >
@@ -71,7 +68,6 @@
         >
           <el-button
             class="control-button"
-            :class="theme"
             size="small"
             @click="zoomOut"
           >

package/src/components/DrawToolbar/ConnectionDialog.vue

@@ -4,18 +4,12 @@
       <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>
+          <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>
@@ -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="capitalise(value.label)"
+            >
+              <template #reference>
+                <span class="connection-label">{{
+                  capitalise(value.label)
+                }}</span>
+              </template>
+            </el-popover>
           </el-card>
         </el-row>
       </el-col>
@@ -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/Tooltip/AnnotationPopup.vue

@@ -3,6 +3,7 @@
     <div class="block">
       <el-row class="info-field">
         <div class="title">Feature Annotations</div>
+        <copy-to-clipboard :content="updatedCopyContent" />
       </el-row>
       <template v-if="annotationEntry">
         <el-row
@@ -11,7 +12,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
@@ -158,8 +161,8 @@ export default {
     return {
       displayPair: {
         "Feature ID": "featureId",
-        Tooltip: "label",
-        Models: "models",
+        Label: "label",
+        Ontology: "models",
         Name: "name",
         Resource: "resourceId",
       },
@@ -174,6 +177,7 @@ export default {
       showSubmissions: true,
       errorMessage: "",
       creator: undefined,
+      copyContent: '',
     };
   },
   computed: {
@@ -195,6 +199,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) {
@@ -316,6 +329,50 @@ 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>Contact:</strong>${sub.creator.email}</div>\n<br>`;
+          annotationContent += `<div><strong>Evidence:</strong>${sub.body.evidence.join(', ')}</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: {

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']