@abi-software/map-side-bar 2.3.1 → 2.3.2-beta.1

package/package.json

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

package/src/components/ConnectivityInfo.vue

@@ -174,6 +174,11 @@
         Search for data on components
       </el-button>
     </div>
+
+    <!-- Copy to clipboard button container -->
+    <div class="float-button-container">
+      <CopyToClipboard :content="updatedCopyContent" />
+    </div>
   </div>
 </template>
 
@@ -191,6 +196,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 +220,7 @@ export default {
     ElIconArrowDown,
     ElIconWarning,
     ExternalResourceCard,
+    CopyToClipboard,
   },
   props: {
     entry: {
@@ -260,6 +268,9 @@ export default {
     },
   },
   computed: {
+    updatedCopyContent: function () {
+      return this.getUpdateCopyContent();
+    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -347,6 +358,74 @@ export default {
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
+    getUpdateCopyContent: function () {
+      if (!this.entry) {
+        return '';
+      }
+
+      const contentArray = [];
+
+      // Title
+      if (this.entry.title) {
+        contentArray.push(capitalise(this.entry.title));
+      } else {
+        contentArray.push(this.entry.featureId);
+      }
+
+      // Description
+      if (this.entry.provenanceTaxonomyLabel?.length) {
+        contentArray.push(this.provSpeciesDescription);
+      }
+
+      // PubMed URL
+      if (this.resources?.length) {
+        const pubmedContents = [];
+        this.resources.forEach((resource) => {
+          let pubmedContent = '';
+          if (resource.id === 'pubmed') {
+            pubmedContent += 'PubMed URL:';
+            pubmedContent += '\n';
+            pubmedContent += resource.url;
+          }
+          pubmedContents.push(pubmedContent);
+        });
+        contentArray.push(pubmedContents.join('\n\n'));
+      }
+
+      // entry.paths
+      if (this.entry.paths) {
+        contentArray.push(this.entry.paths);
+      }
+
+      // Origins
+      if (this.entry.origins?.length) {
+        contentArray.push('Origin');
+        const origins = this.entry.origins
+          .map((item) => capitalise(item))
+          .join('\n');
+        contentArray.push(origins);
+      }
+
+      // Components
+      if (this.entry.components?.length) {
+        contentArray.push('Components');
+        const components = this.entry.components
+          .map((item) => capitalise(item))
+          .join('\n');
+        contentArray.push(components);
+      }
+
+      // Destination
+      if (this.entry.destinations?.length) {
+        contentArray.push('Destination');
+        const destinations = this.entry.destinations
+          .map((item) => capitalise(item))
+          .join('\n');
+        contentArray.push(destinations);
+      }
+
+      return contentArray.join('\n\n');
+    },
   },
 }
 </script>
@@ -616,4 +695,17 @@ export default {
 .tooltip-container::after {
   top: 99.4%;
 }
+
+.float-button-container {
+  position: absolute;
+  bottom: 8px;
+  right: 16px;
+  opacity: 0;
+  visibility: hidden;
+
+  .main:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
 </style>

package/src/components/DatasetCard.vue

@@ -46,6 +46,11 @@
               @categoryChanged="categoryChanged"
             />
           </div>
+
+          <!-- Copy to clipboard button container -->
+          <div class="float-button-container">
+            <CopyToClipboard :content="copyContent" />
+          </div>
         </div>
       </div>
     </div>
@@ -64,6 +69,8 @@ import EventBus from './EventBus.js'
 import speciesMap from './species-map.js'
 import ImageGallery from './ImageGallery.vue'
 import MissingImage from '@/../assets/missing-image.svg'
+import { CopyToClipboard } from '@abi-software/map-utilities';
+import '@abi-software/map-utilities/dist/style.css';
 
 export default {
   data() {
@@ -76,7 +83,8 @@ export default {
     BadgesGroup,
     ImageGallery,
     Button,
-    Icon
+    Icon,
+    CopyToClipboard,
   },
   props: {
     /**
@@ -102,6 +110,7 @@ export default {
       lastDoi: undefined,
       biolucidaData: undefined,
       currentCategory: 'All',
+      copyContent: '',
     }
   },
   computed: {
@@ -154,6 +163,9 @@ export default {
       return this.entry.publishDate.split('-')[0]
     },
   },
+  mounted: function () {
+    this.updateCopyContent();
+  },
   methods: {
     cardClicked: function () {
       this.openDataset()
@@ -226,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
@@ -248,6 +261,51 @@ export default {
           if (data.status == 'success') this.biolucidaData = data
         })
     },
+    updateCopyContent: function () {
+      const contentArray = [];
+
+      // Title
+      if (this.entry.name) {
+        contentArray.push(this.entry.name);
+      }
+
+      // Contributors and Publish Date
+      if (this.contributors) {
+        let details = this.contributors;
+
+        if (this.entry.publishDate) {
+          details += ` (${this.publishYear})`;
+        }
+        contentArray.push(details);
+      }
+
+      // samples
+      if (this.samples) {
+        contentArray.push(this.samples);
+      }
+
+      // DOI
+      if (this.entry.doi) {
+        contentArray.push('DOI: ' + this.entry.doi);
+      }
+
+      // Dataset ID
+      if (this.entry.datasetId) {
+        contentArray.push('Dataset ID: ' + this.entry.datasetId);
+      }
+
+      // Dataset URL
+      if (this.dataLocation) {
+        contentArray.push('Dataset URL: ' + this.dataLocation);
+      }
+
+      // Dataset version
+      if (this.version) {
+        contentArray.push('Dataset version: ' + this.version);
+      }
+
+      this.copyContent = contentArray.join('\n\n');
+    },
   },
   created: function () {
     this.getBanner()
@@ -354,4 +412,17 @@ export default {
 .loading-icon :deep(.el-loading-spinner .path) {
   stroke: $app-primary-color;
 }
+
+.float-button-container {
+  position: absolute;
+  bottom: 8px;
+  right: 16px;
+  opacity: 0;
+  visibility: hidden;
+
+  .card:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
 </style>

package/src/components/SearchFilters.vue

@@ -156,6 +156,7 @@ export default {
   },
   data: function () {
     return {
+      algoliaClient: undefined,
       cascaderIsReady: false,
       previousShowAllChecked: {
         species: false,
@@ -776,11 +777,11 @@ export default {
     },
   },
   mounted: function () {
-    this.algoliaClient = new AlgoliaClient(
+    this.algoliaClient = markRaw(new AlgoliaClient(
       this.envVars.ALGOLIA_ID,
       this.envVars.ALGOLIA_KEY,
       this.envVars.PENNSIEVE_API_LOCATION
-    )
+    ))
     this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX)
     this.populateCascader().then(() => {
       this.cascaderIsReady = true

package/src/components/SidebarContent.vue

@@ -78,6 +78,7 @@ import EventBus from './EventBus.js'
 
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { getFilters, facetPropPathMapping } from '../algolia/utils.js'
+import { markRaw } from 'vue'
 
 // handleErrors: A custom fetch error handler to recieve messages from the server
 //    even when an error is found
@@ -142,6 +143,7 @@ export default {
   data: function () {
     return {
       ...this.entry,
+      algoliaClient: undefined,
       bodyStyle: {
         flex: '1 1 auto',
         'flex-flow': 'column',
@@ -248,7 +250,7 @@ export default {
     },
     searchAlgolia(filters, query = '') {
       // Algolia search
-      
+
       this.loadingCards = true
       this.algoliaClient
         .anatomyInSearch(getFilters(filters), query)
@@ -442,11 +444,11 @@ export default {
   },
   mounted: function () {
     // initialise algolia
-    this.algoliaClient = new AlgoliaClient(
+    this.algoliaClient = markRaw(new AlgoliaClient(
       this.envVars.ALGOLIA_ID,
       this.envVars.ALGOLIA_KEY,
       this.envVars.PENNSIEVE_API_LOCATION
-    )
+    ))
     this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX)
     this.openSearch(this.filter, this.searchInput)
   },