@abi-software/map-side-bar 2.3.2-beta.0 → 2.3.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.3.2-beta.0",
+  "version": "2.3.2-beta.2",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.1",
-    "@abi-software/map-utilities": "^1.0.1-beta.0",
+    "@abi-software/map-utilities": "^1.0.1-beta.2",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/ConnectivityInfo.vue

@@ -177,7 +177,7 @@
 
     <!-- Copy to clipboard button container -->
     <div class="float-button-container">
-      <CopyToClipboard :content="copyContent" />
+      <CopyToClipboard :content="updatedCopyContent" />
     </div>
   </div>
 </template>
@@ -256,12 +256,8 @@ export default {
       },
       componentsWithDatasets: [],
       uberons: [{ id: undefined, name: undefined }],
-      copyContent: '',
     }
   },
-  mounted: function () {
-    this.updateCopyContent();
-  },
   watch: {
     availableAnatomyFacets: {
       handler: function (val) {
@@ -272,6 +268,9 @@ export default {
     },
   },
   computed: {
+    updatedCopyContent: function () {
+      return this.getUpdateCopyContent();
+    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -359,54 +358,83 @@ export default {
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
-    updateCopyContent: function () {
+    getUpdateCopyContent: function () {
+      if (!this.entry) {
+        return '';
+      }
+
       const contentArray = [];
 
+      // Use <div> instead of <h1>..<h6> or <p>
+      // to avoid default formatting on font size and margin
+
       // Title
       if (this.entry.title) {
-        contentArray.push(capitalise(this.entry.title));
+        contentArray.push(`<div><strong>${capitalise(this.entry.title)}</strong></div>`);
       } else {
-        contentArray.push(this.entry.featureId);
+        contentArray.push(`<div><strong>${this.entry.featureId}</strong></div>`);
       }
 
       // Description
       if (this.entry.provenanceTaxonomyLabel?.length) {
-        contentArray.push(this.provSpeciesDescription);
+        contentArray.push(`<div>${this.provSpeciesDescription}</div>`);
+      }
+
+      // PubMed URL
+      if (this.resources?.length) {
+        const pubmedContents = [];
+        this.resources.forEach((resource) => {
+          let pubmedContent = '';
+          if (resource.id === 'pubmed') {
+            pubmedContent += `<div><strong>PubMed URL:</strong></div>`;
+            pubmedContent += '\n';
+            pubmedContent += `<div><a href="${resource.url}">${resource.url}</a></div>`;
+          }
+          pubmedContents.push(pubmedContent);
+        });
+        contentArray.push(pubmedContents.join('\n\n<br>'));
       }
 
       // entry.paths
       if (this.entry.paths) {
-        contentArray.push(this.entry.paths);
+        contentArray.push(`<div>${this.entry.paths}</div>`);
       }
 
       // Origins
       if (this.entry.origins?.length) {
-        contentArray.push('Origin');
+        let originsContent = '<div><strong>Origin</strong></div>';
         const origins = this.entry.origins
-          .map((item) => capitalise(item))
+          .map((item) => `<li>${capitalise(item)}</li>`)
           .join('\n');
-        contentArray.push(origins);
+        originsContent += '\n';
+        originsContent += `<ul>${origins}</ul>`;
+        contentArray.push(originsContent);
       }
 
       // Components
       if (this.entry.components?.length) {
-        contentArray.push('Components');
+        contentArray.push();
+        let componentsContent = '<div><strong>Components</strong></div>';
         const components = this.entry.components
-          .map((item) => capitalise(item))
+          .map((item) => `<li>${capitalise(item)}</li>`)
           .join('\n');
-        contentArray.push(components);
+        componentsContent += '\n';
+        componentsContent += `<ul>${components}</ul>`;
+        contentArray.push(componentsContent);
       }
 
       // Destination
       if (this.entry.destinations?.length) {
-        contentArray.push('Destination');
+        let destinationsContent = '<div><strong>Destination</strong></div>';
         const destinations = this.entry.destinations
-          .map((item) => capitalise(item))
+          .map((item) => `<li>${capitalise(item)}</li>`)
           .join('\n');
-        contentArray.push(destinations);
+        destinationsContent += '\n';
+        destinationsContent += `<ul>${destinations}</ul>`;
+        contentArray.push(destinationsContent);
       }
 
-      this.copyContent = contentArray.join('\n\n');
+      return contentArray.join('\n\n<br>');
     },
   },
 }

package/src/components/DatasetCard.vue

@@ -238,6 +238,7 @@ export default {
             this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
             this.getBiolucidaInfo(this.discoverId)
             this.loading = false
+            this.updateCopyContent();
           })
           .catch(() => {
             //set defaults if we hit an error
@@ -263,9 +264,12 @@ export default {
     updateCopyContent: function () {
       const contentArray = [];
 
+      // Use <div> instead of <h1>..<h6> or <p>
+      // to avoid default formatting on font size and margin
+
       // Title
       if (this.entry.name) {
-        contentArray.push(this.entry.name);
+        contentArray.push(`<div><strong>${this.entry.name}</strong></div>`);
       }
 
       // Contributors and Publish Date
@@ -275,15 +279,47 @@ export default {
         if (this.entry.publishDate) {
           details += ` (${this.publishYear})`;
         }
-        contentArray.push(details);
+        contentArray.push(`<div>${details}</div>`);
       }
 
       // samples
       if (this.samples) {
-        contentArray.push(this.samples);
+        contentArray.push(`<div>${this.samples}</div>`);
+      }
+
+      // DOI
+      if (this.entry.doi) {
+        let doiContent = `<div><strong>DOI:</strong></div>`;
+        doiContent += `\n`;
+        doiContent += `<a href="${this.entry.doi}">${this.entry.doi}</a>`;
+        contentArray.push(`<div>${doiContent}</div>`);
+      }
+
+      // Dataset ID
+      if (this.entry.datasetId) {
+        let datasetIdContent = `<div><strong>Dataset ID:</strong></div>`;
+        datasetIdContent += `\n`;
+        datasetIdContent += `${this.entry.datasetId}`;
+        contentArray.push(`<div>${datasetIdContent}</div>`);
+      }
+
+      // Dataset URL
+      if (this.dataLocation) {
+        let dataLocationContent = `<div><strong>Dataset URL:</strong></div>`;
+        dataLocationContent += `\n`;
+        dataLocationContent += `<a href="${this.dataLocation}">${this.dataLocation}</a>`;
+        contentArray.push(`<div>${dataLocationContent}</div>`);
+      }
+
+      // Dataset version
+      if (this.version) {
+        let versionContent = `<div><strong>Dataset version:</strong></div>`;
+        versionContent += `\n`;
+        versionContent += `${this.version}`;
+        contentArray.push(`<div>${versionContent}</div>`);
       }
 
-      this.copyContent = contentArray.join('\n\n');
+      this.copyContent = contentArray.join('\n\n<br>');
     },
   },
   created: function () {