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

package/package.json

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

package/src/components/ConnectivityGraph/graph.js

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

package/src/components/DrawToolbar/ConnectionDialog.vue

@@ -3,16 +3,22 @@
     <el-row>
       <el-col>
         <el-row v-if="inDrawing">
-          <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>
+          <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-row>
         <el-row v-else>
-          <span class="dialog-title">Visualize connection</span>
+          <span class="dialog-title">Visualise connection</span>
           <el-button
             type="primary"
             plain
@@ -28,18 +34,7 @@
         <b><span>Related Features</span></b>
         <el-row v-for="(value, key) in connectionEntry" :key="key">
           <el-card :shadow="shadowDisplay(key)" @click="handleTooltip(key)">
-            <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>
+            <span>{{ capitalise(value.label) }}</span>
           </el-card>
         </el-row>
       </el-col>
@@ -48,7 +43,7 @@
 </template>
 
 <script>
-const capitalize = function (str) {
+const capitalise = function (str) {
   if (str) return str.charAt(0).toUpperCase() + str.slice(1);
   return "";
 };
@@ -78,8 +73,8 @@ export default {
     shadowDisplay: function (value) {
       return this.tooltipId === value ? "always" : "hover";
     },
-    capitalize: function (label) {
-      return capitalize(label);
+    capitalise: function (label) {
+      return capitalise(label);
     },
     handleTooltip: function (value) {
       this.tooltipId = this.tooltipId === value ? undefined : value;
@@ -105,13 +100,13 @@ export default {
 }
 
 .dialog-title {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: bold;
   color: rgb(131, 0, 191);
 }
 
 .el-button {
-  margin: 5px 5px 5px 0;
+  margin: 5px 0px;
 }
 
 :deep(.el-card) {
@@ -120,13 +115,4 @@ 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, 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" },
+        { 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 },
       ],
       connectionDisplay: false,
       dialogPosition: {
@@ -374,13 +374,13 @@ export default {
       this.disabledToolbarConnectionIcon(true);
     },
     activeDrawMode: function (value) {
-      this.updateToolbarIcons(value, "mode");
+      this.updateToolbarIcons(value);
       if (value === "Delete") {
         this.connectionDisplay = false;
       }
     },
     activeDrawTool: function (value) {
-      this.updateToolbarIcons(value, "tool");
+      this.updateToolbarIcons(value);
       if (!value) {
         this.connectionDisplay = false;
       }
@@ -435,7 +435,7 @@ export default {
         this.connectionDisplay = !this.connectionDisplay;
       }
     },
-    updateToolbarIcons: function (value, type) {
+    updateToolbarIcons: function (value) {
       this.toolbarIcons.map((icon) => {
         if (icon.name === value) {
           icon.active = true;
@@ -444,8 +444,7 @@ export default {
         }
       });
       this.toolbarIcons
-        .filter((icon) => icon.type !== "conn")
-        .filter((icon) => icon.type !== type)
+        .filter((icon) => icon.name !== "Connection" && icon.name !== value)
         .map((icon) => {
           if (value) {
             icon.disabled = true;
@@ -457,7 +456,7 @@ export default {
     },
     disabledToolbarConnectionIcon: function (value) {
       this.toolbarIcons
-        .filter((icon) => icon.type === "conn")
+        .filter((icon) => icon.name === "Connection")
         .map((icon) => {
           if (value) {
             icon.disabled = true;
@@ -473,7 +472,7 @@ export default {
     },
     activeToolbarConnectionIcon: function (value) {
       this.toolbarIcons
-        .filter((icon) => icon.type === "conn")
+        .filter((icon) => icon.name === "Connection")
         .map((icon) => {
           if (value) {
             icon.active = true;

package/src/components/Tooltip/AnnotationPopup.vue

@@ -3,9 +3,6 @@
     <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
@@ -14,9 +11,7 @@
           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>
+          <strong>{{ label }}: </strong>&nbsp;{{ annotationEntry[key] }}
         </el-row>
         <template v-if="prevSubs.length > 0">
           <div
@@ -48,15 +43,11 @@
               <el-row class="dialog-text">
                 <strong>Evidence: </strong>
                 <el-row
-                  v-for="(evidence, index) in sub.body.evidence"
+                  v-for="evidence in sub.body.evidence"
                   :key="evidence"
                   class="dialog-text"
-                > 
-                  <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>
+                >
+                  <a :href="evidence" target="_blank"> {{ evidence }}</a>
                 </el-row>
               </el-row>
               <el-row class="dialog-text">
@@ -108,17 +99,18 @@
                       <el-select
                         :teleported="false"
                         v-model="evidencePrefix"
-                        placeholder="Other:"
+                        placeholder="No Prefix"
                         class="select-box"
                         popper-class="flatmap_dropdown"
                       >
                         <el-option
                           v-for="item in evidencePrefixes"
-                          :key="item.label"
-                          :value="item.value"
+                          :key="item"
+                          :label="item"
+                          :value="item"
                         >
                           <el-row>
-                            <el-col :span="12">{{ item.label }}</el-col>
+                            <el-col :span="12">{{ item }}</el-col>
                           </el-row>
                         </el-option>
                       </el-select>
@@ -166,18 +158,14 @@ export default {
     return {
       displayPair: {
         "Feature ID": "featureId",
-        Label: "label",
-        Ontology: "models",
+        Tooltip: "label",
+        Models: "models",
         Name: "name",
         Resource: "resourceId",
       },
       editing: false,
-      evidencePrefixes: [
-        { value: "DOI:", label: "DOI:" },
-        { value: "PMID:", label: "PMID:" },
-        { value: "", label: "Other:" },
-      ],
-      evidencePrefix: "DOI:",
+      evidencePrefixes: ["", "DOI:", "PMID:"],
+      evidencePrefix: "",
       evidence: [],
       authenticated: false,
       newEvidence: "",
@@ -186,7 +174,6 @@ export default {
       showSubmissions: true,
       errorMessage: "",
       creator: undefined,
-      copyContent: '',
     };
   },
   computed: {
@@ -208,15 +195,6 @@ 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) {
@@ -279,20 +257,18 @@ export default {
           this.annotationEntry["featureId"]
         ) {
           const evidenceURLs = [];
-          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(
+          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(
                 "PMID:",
                 "https://pubmed.ncbi.nlm.nih.gov/"
               );
-            }
-            if (evi in eviObject) {
-              evidenceURLs.push(eviObject);
+              evidenceURLs.push(new URL(link));
             } else {
-              evidenceURLs.push(evi);
+              evidenceURLs.push(evidence);
             }
           });
           const userAnnotation = {
@@ -340,57 +316,6 @@ 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: {
@@ -421,11 +346,7 @@ export default {
 
 <style lang="scss" scoped>
 .info-field {
-  padding: 0;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 1rem;
 }
 
 .block {
@@ -484,22 +405,7 @@ export default {
   font-weight: 500;
   font-weight: bold;
   padding-bottom: 8px;
-  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%;
-    }
-  }
+  color: rgb(131, 0, 191);
 }
 
 .sub-title {