@abi-software/map-utilities 1.2.2-beta.6 → 1.2.2-beta.8

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="connectivity-graph" v-loading="loading">
+  <div class="connectivity-graph" v-loading="loading" ref="connectivityGraphRef">
 
     <div ref="graphCanvas" class="graph-canvas"></div>
 
@@ -9,6 +9,8 @@
           :content="resetLabel"
           placement="top"
           effect="control-tooltip"
+          :teleported="true"
+          :append-to="connectivityGraphContainer"
         >
           <el-button
             class="control-button"
@@ -26,6 +28,8 @@
           :content="zoomLockLabel"
           placement="top"
           effect="control-tooltip"
+          :teleported="true"
+          :append-to="connectivityGraphContainer"
         >
           <el-button
             class="control-button"
@@ -48,6 +52,8 @@
           :content="zoomInLabel"
           placement="left"
           effect="control-tooltip"
+          :teleported="true"
+          :append-to="connectivityGraphContainer"
         >
           <el-button
             class="control-button"
@@ -65,6 +71,8 @@
           :content="zoomOutLabel"
           placement="left"
           effect="control-tooltip"
+          :teleported="true"
+          :append-to="connectivityGraphContainer"
         >
           <el-button
             class="control-button"
@@ -164,9 +172,11 @@ export default {
       zoomEnabled: false,
       connectivityError: null,
       timeoutID: undefined,
+      connectivityGraphContainer: null,
     };
   },
   mounted() {
+    this.updateTooltipContainer();
     this.refreshCache();
     this.loadCacheData();
     this.run().then((res) => {
@@ -174,6 +184,9 @@ export default {
     });
   },
   methods: {
+    updateTooltipContainer: function () {
+      this.connectivityGraphContainer = this.$refs.connectivityGraphRef;
+    },
     loadCacheData: function () {
       const selectedSource = sessionStorage.getItem('connectivity-graph-source');
       const labelCache = sessionStorage.getItem('connectivity-graph-labels');

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -5,6 +5,8 @@
     :hide-after="autoHideTimeout"
     effect="clipboard-tooltip"
     @hide="resetSettings"
+    :teleported="true"
+    :append-to="tooltipContainer"
   >
     <el-button
       class="copy-clipboard-button"
@@ -21,9 +23,9 @@
 </template>
 
 <script>
-const labelBefore = 'Copy to clipboard';
-const labelAfter = 'Copied!';
-const appPrimaryColor = '#8300bf';
+const LABEL_BEFORE = 'Copy to clipboard';
+const LABEL_AFTER = 'Copied!';
+const APP_PRIMARY_COLOR = '#8300bf';
 
 export default {
   name: 'CopyToClipboard',
@@ -32,6 +34,10 @@ export default {
       type: String,
       default: '',
     },
+    label: {
+      type: String,
+      default: LABEL_BEFORE,
+    },
     /**
      * `theme: light` will show white button,
      * to use when the button is over other readable text content.
@@ -44,11 +50,21 @@ export default {
   },
   data: function () {
     return {
-      textLabel: labelBefore,
+      textLabel: this.label,
       autoHideTimeout: 0,
-      iconColor: appPrimaryColor,
+      iconColor: APP_PRIMARY_COLOR,
+      tooltipContainer: null,
     };
   },
+  mounted() {
+    const fullscreenContainer = document.querySelector('.mapcontent');
+
+    if (fullscreenContainer) {
+      this.tooltipContainer = fullscreenContainer;
+    } else {
+      this.tooltipContainer = document.body;
+    }
+  },
   methods: {
     copyToClipboard: async function () {
       let copiedSuccessfully = true;
@@ -78,14 +94,14 @@ export default {
       }
 
       if (copiedSuccessfully) {
-        this.textLabel = labelAfter;
+        this.textLabel = LABEL_AFTER;
       } else {
         this.textLabel = 'Error trying to copy to clipboard!';
       }
     },
     resetSettings: function () {
       this.autoHideTimeout = 0;
-      this.textLabel = labelBefore;
+      this.textLabel = this.label;
     },
   }
 }

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 processEvidences(sub)"
                   :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,8 +208,42 @@ 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: {
+    processEvidences: function(sub) {
+      const evidences = [];
+      if (sub?.body?.evidence) {
+        sub.body.evidence.forEach((evidence) => {
+          if (typeof evidence === 'object') {
+            evidences.push(evidence);
+          } else {
+            const eviObject = {}
+            if (evidence.includes("https://doi.org/")) {
+              const key = evidence.replace("https://doi.org/", "DOI:");
+              eviObject[key] = evidence;
+            } else if (evidence.includes("https://pubmed.ncbi.nlm.nih.gov/")) {
+              const key = evidence.replace("https://pubmed.ncbi.nlm.nih.gov/", "PMID:");
+              eviObject[key] = evidence;
+            }
+            if (Object.keys(eviObject).length > 0) {
+              evidences.push(eviObject);
+            } else {
+              evidences.push(evidence);
+            }
+          }
+        });
+      }
+      return evidences;
+    },
     evidenceEntered: function (value) {
       if (value) {
         this.evidence.push(this.evidencePrefix + value);
@@ -316,6 +363,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 +444,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 +507,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/Tooltip/ExternalResourceCard.vue

@@ -2,6 +2,9 @@
   <div class="resource-container">
     <div class="attribute-title-container">
       <div class="attribute-title">References</div>
+      <div class="copy-button">
+        <CopyToClipboard label="Copy list to clipboard" :content="referecesListContent" />
+      </div>
     </div>
     <div class="citation-tabs" v-if="referencesWithDOI">
       <el-button
@@ -76,6 +79,7 @@ export default {
       pubMedReferences: [],
       openLibReferences: [],
       isbnDBReferences: [],
+      referecesListContent: '',
       citationOptions: CITATION_OPTIONS,
       citationType: CITATION_DEFAULT,
     }
@@ -319,6 +323,13 @@ export default {
         values.push(reference.url);
       });
 
+      if (values.length) {
+        const list = values.map((item) => `<li>${item}</li>`).join('\n');
+        const listContent = `<ul>${list}</ul>`;
+        const listTitle = `<div><strong>References</strong></div>`;
+        this.referecesListContent = listTitle + `\n` + listContent;
+      }
+
       this.$emit('references-loaded', {
         style: citationFormatStyle,
         list: values
@@ -437,10 +448,25 @@ export default {
 <style lang="scss" scoped>
 .resource-container {
   margin-top: 1em;
+
+  &:hover {
+    .attribute-title-container :deep(.copy-clipboard-button) {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
 }
 
 .attribute-title-container {
   margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  :deep(.copy-clipboard-button) {
+    opacity: 0;
+    visibility: hidden;
+  }
 }
 
 .attribute-title {
@@ -466,6 +492,7 @@ export default {
 
     :deep(a) {
       word-wrap: break-word;
+      color: $app-primary-color;
     }
 
     + li {

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