Merge pull request ABI-Software#86 from akhuoa/feature/copy-to-clipboard

Feature/copy to clipboard
akhuoa · Aug 13, 2024 · 6f9b3d4 · 6f9b3d4
2 parents 1c55ba9 + 2071470
commit 6f9b3d4
Show file tree

Hide file tree

Showing 6 changed files with 298 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,49 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+## [v2.3.2-beta.4](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.3...v2.3.2-beta.4)
+
+### Commits
+
+- Update changelog [`566fd87`](https://github.com/akhuoa/map-sidebar/commit/566fd87dcf83e85f97173f2b28e857594e7bfcb1)
+- Refactor code for connectivity info copy to clipboard [`bf65cf5`](https://github.com/akhuoa/map-sidebar/commit/bf65cf5a33d34336f2e1a41a541d8d6fd26bba32)
+- Add uberon information in connectivity copy data [`03aa79e`](https://github.com/akhuoa/map-sidebar/commit/03aa79ed3056eabd864ad0b67e8b9f45a3d7c9e3)
+
+## [v2.3.2-beta.3](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.2...v2.3.2-beta.3) - 2024-08-09
+
+### Commits
+
+- Update changelog [`ef39a49`](https://github.com/akhuoa/map-sidebar/commit/ef39a49fb083988c87ac454ca9f11170e8d874a9)
+- Update connectivity info copy-to-clipboard button placement [`ac32abd`](https://github.com/akhuoa/map-sidebar/commit/ac32abd8894a7de5921d116b70682d61bc3f4014)
+
+## [v2.3.2-beta.2](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.1...v2.3.2-beta.2) - 2024-08-07
+
+### Commits
+
+- Update changelog [`e057338`](https://github.com/akhuoa/map-sidebar/commit/e05733805ae07d4541f266dd1e71d18d749ed0f6)
+- Update copy clipboard formatting [`2f265a1`](https://github.com/akhuoa/map-sidebar/commit/2f265a134665c5ab3897fba79623ea037d277930)
+- Update formatted copy-to-clipboard content for connectivity [`3162e3c`](https://github.com/akhuoa/map-sidebar/commit/3162e3c3c794192adc8bc73fa2cbe54cd7e8b3a0)
+
+## [v2.3.2-beta.1](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.0...v2.3.2-beta.1) - 2024-08-05
+
+### Commits
+
+- Update Changelog [`947446c`](https://github.com/akhuoa/map-sidebar/commit/947446c8fcbac98eb48204808f3c4a0a9a237938)
+- Update dataset card copy clipboard with dataset id and doi [`1716e8d`](https://github.com/akhuoa/map-sidebar/commit/1716e8d89e5360256f6f19baf2912c146a67b7f0)
+- Update copy to clipboard content with computed value [`72acd10`](https://github.com/akhuoa/map-sidebar/commit/72acd10b9361eb9b77f8b386694da34a08176f8a)
+
+## [v2.3.2-beta.0](https://github.com/akhuoa/map-sidebar/compare/v2.2.1-beta.0...v2.3.2-beta.0) - 2024-08-02
+
+### Merged
+
+- Replace global variable with markRaw [`#82`](https://github.com/akhuoa/map-sidebar/pull/82)
+- Fix connectivity tab close button style [`#78`](https://github.com/akhuoa/map-sidebar/pull/78)
+- Display connectivity info without obstructing current map view [`#74`](https://github.com/akhuoa/map-sidebar/pull/74)
+- Create cypress testing [`#4`](https://github.com/akhuoa/map-sidebar/pull/4)
+- Connectivity explore buttons now check available facets [`#3`](https://github.com/akhuoa/map-sidebar/pull/3)
+- UI updates [`#73`](https://github.com/akhuoa/map-sidebar/pull/73)
+- Anatomy markers [`#72`](https://github.com/akhuoa/map-sidebar/pull/72)
+
 ## [v2.3.1](https://github.com/alan-wu/map-sidebar/compare/v2.3.0...v2.3.1)
 
 ### Merged
@@ -30,8 +73,16 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 ### Commits
 
 - Install Cypress [`d329c74`](https://github.com/alan-wu/map-sidebar/commit/d329c7481de908fe85f9bed6c229bc86854c1d19)
-- Add provenance info in sidebar [`f65b2fe`](https://github.com/alan-wu/map-sidebar/commit/f65b2fecbadd4afb92a1212cafc545228bd14d31)
 - Requires more dev dependencies [`859e578`](https://github.com/alan-wu/map-sidebar/commit/859e578f498fde3e6e6c956f97738b078111380a)
+- Add testing for connectivity info [`9677c3c`](https://github.com/akhuoa/map-sidebar/commit/9677c3c1911121b2528d2cc637dc256c40b76462)
+
+## [v2.2.1-beta.0](https://github.com/akhuoa/map-sidebar/compare/v2.2.0...v2.2.1-beta.0) - 2024-06-26
+
+### Commits
+
+- Add provenance info in sidebar [`f65b2fe`](https://github.com/alan-wu/map-sidebar/commit/f65b2fecbadd4afb92a1212cafc545228bd14d31)
+- Move connectivity info tab to top with close button [`d77e018`](https://github.com/akhuoa/map-sidebar/commit/d77e0185283dae36ca851fe48117365b45bde174)
+- Move pubmed button of provenance info into title area [`a3f4ab2`](https://github.com/akhuoa/map-sidebar/commit/a3f4ab2ba9cf74d8fe644c5417f9ea867a17bd55)
 
 ## [v2.2.0](https://github.com/alan-wu/map-sidebar/compare/v2.1.0...v2.2.0) - 2024-05-17
 
@@ -284,4 +335,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Create map-sidebar repo [`ce887ae`](https://github.com/alan-wu/map-sidebar/commit/ce887aec6cef1cc7ee4786117624c8f143ee4411)
 - Change version to 1.0.0. [`a431eed`](https://github.com/alan-wu/map-sidebar/commit/a431eede106aa604be063ab3c71c8382d5b04757)
-- Clean up and small improvements. [`98d19cd`](https://github.com/alan-wu/map-sidebar/commit/98d19cdb59476b0d7ceb3e725ef14d18b61e67ca)
+- Clean up and small improvements. [`98d19cd`](https://github.com/alan-wu/map-sidebar/commit/98d19cdb59476b0d7ceb3e725ef14d18b61e67ca)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.3.1",
+  "version": "2.3.2-beta.4",
   "files": [
     "dist/*",
     "src/*",
@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.1",
+    "@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",

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
@@ -20,12 +20,12 @@
         </div>
         <external-resource-card :resources="resources"></external-resource-card>
       </div>
-      <div>
+      <div class="title-buttons">
         <el-popover
-          width="200"
+          width="auto"
           trigger="hover"
           :teleported="false"
-          popper-class="popover-origin-help"
+          popper-class="popover-map-pin"
         >
           <template #reference>
             <el-button class="button-circle" circle @click="showConnectivity(entry)">
@@ -38,6 +38,7 @@
             Show connectivity on map
           </span>
         </el-popover>
+        <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
     <div v-if="featuresAlert" class="attribute-title-container">
@@ -191,6 +192,8 @@ import {
 } from 'element-plus'
 import ExternalResourceCard from './ExternalResourceCard.vue'
 import EventBus from './EventBus.js'
+import { CopyToClipboard } from '@abi-software/map-utilities';
+import '@abi-software/map-utilities/dist/style.css';
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -213,6 +216,7 @@ export default {
     ElIconArrowDown,
     ElIconWarning,
     ExternalResourceCard,
+    CopyToClipboard,
   },
   props: {
     entry: {
@@ -260,6 +264,9 @@ export default {
     },
   },
   computed: {
+    updatedCopyContent: function () {
+      return this.getUpdateCopyContent();
+    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -347,6 +354,100 @@ export default {
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
+    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(`<div><strong>${capitalise(this.entry.title)}</strong></div>`);
+      } else {
+        contentArray.push(`<div><strong>${this.entry.featureId}</strong></div>`);
+      }
+
+      // Description
+      if (this.entry.provenanceTaxonomyLabel?.length) {
+        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(`<div>${this.entry.paths}</div>`);
+      }
+
+      function transformData(title, items, itemsWithDatasets = []) {
+        let contentString = `<div><strong>${title}</strong></div>`;
+        const transformedItems = [];
+        items.forEach((item) => {
+          let itemNames = [];
+          item.split(',').forEach((name) => {
+            const match = itemsWithDatasets.find((a) => a.name === name.trim());
+            if (match) {
+              itemNames.push(`${capitalise(name)} (${match.id})`);
+            } else {
+              itemNames.push(`${capitalise(name)}`);
+            }
+          });
+          transformedItems.push(itemNames.join(','));
+        });
+        const contentList = transformedItems
+          .map((item) => `<li>${item}</li>`)
+          .join('\n');
+        contentString += '\n';
+        contentString += `<ul>${contentList}</ul>`;
+        return contentString;
+      }
+
+      // Origins
+      if (this.entry.origins?.length) {
+        const title = 'Origin';
+        const origins = this.entry.origins;
+        const originsWithDatasets = this.entry.originsWithDatasets;
+        const transformedOrigins = transformData(title, origins, originsWithDatasets);
+        contentArray.push(transformedOrigins);
+      }
+
+      // Components
+      if (this.entry.components?.length) {
+        const title = 'Components';
+        const components = this.entry.components;
+        const componentsWithDatasets = this.entry.componentsWithDatasets;
+        const transformedComponents = transformData(title, components, componentsWithDatasets);
+        contentArray.push(transformedComponents);
+      }
+
+      // Destination
+      if (this.entry.destinations?.length) {
+        const title = 'Destination';
+        const destinations = this.entry.destinations;
+        const destinationsWithDatasets = this.entry.destinationsWithDatasets;
+        const transformedDestinations = transformData(title, destinations, destinationsWithDatasets);
+        contentArray.push(transformedDestinations);
+      }
+
+      return contentArray.join('\n\n<br>');
+    },
   },
 }
 </script>
@@ -390,6 +491,7 @@ export default {
 }
 
 .button-circle {
+  margin: 0;
   width: 24px !important;
   height: 24px !important;
 
@@ -616,4 +718,36 @@ export default {
 .tooltip-container::after {
   top: 99.4%;
 }
+
+.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%;
+    }
+  }
+}
+
+:deep(.el-popper.popover-map-pin) {
+  padding: 4px 10px;
+  min-width: max-content;
+  font-family: Asap;
+  font-size: 12px;
+  line-height: inherit;
+  color: inherit;
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color;
+
+  & .el-popper__arrow::before {
+    border: 1px solid;
+    border-color: $app-primary-color;
+    background: #f3ecf6;
+  }
+}
 </style>