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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.3.0",
+  "version": "2.3.2-beta.0",
   "files": [
     "dist/*",
     "src/*",
@@ -38,7 +38,8 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/gallery": "^1.1.0",
+    "@abi-software/gallery": "^1.1.1",
+    "@abi-software/map-utilities": "^1.0.1-beta.0",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",
@@ -63,8 +64,8 @@
     "cypress-wait-until": "^3.0.1",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
-    "mochawesome": "^7.1.3",
     "file-loader": "^5.0.2",
+    "mochawesome": "^7.1.3",
     "raw-loader": "^0.5.1",
     "sass": "^1.70.0",
     "transform-loader": "^0.2.4",

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="copyContent" />
+    </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: {
@@ -248,8 +256,12 @@ export default {
       },
       componentsWithDatasets: [],
       uberons: [{ id: undefined, name: undefined }],
+      copyContent: '',
     }
   },
+  mounted: function () {
+    this.updateCopyContent();
+  },
   watch: {
     availableAnatomyFacets: {
       handler: function (val) {
@@ -347,6 +359,55 @@ export default {
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
+    updateCopyContent: function () {
+      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);
+      }
+
+      // 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);
+      }
+
+      this.copyContent = contentArray.join('\n\n');
+    },
   },
 }
 </script>
@@ -616,4 +677,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()
@@ -248,6 +260,31 @@ 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);
+      }
+
+      this.copyContent = contentArray.join('\n\n');
+    },
   },
   created: function () {
     this.getBanner()
@@ -354,4 +391,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)
   },

package/src/components/Tabs.vue

@@ -107,29 +107,29 @@ $tab-height: 30px;
 }
 
 .button-tab-close {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  padding: 0;
-  padding-right: 4px;
-  font-size: 24px;
-  color: $app-primary-color;
-  border: 0 none;
-  box-shadow: none;
-  outline: none;
-  background-color: transparent;
+  width: 20px !important;
+  height: 20px !important;
+  line-height: 20px !important;
+  padding: 0 !important;
+  padding-right: 4px !important;
+  font-size: 24px !important;
+  color: $app-primary-color !important;
+  border: 0 none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-color: transparent !important;
 
   :deep(> span) {
-    height: $tab-height - 2; // tab height minus border
-    font-family: Arial; // to fix font alignment on different browsers
+    height: $tab-height - 2 !important; // tab height minus border
+    font-family: Arial !important; // to fix font alignment on different browsers
   }
 
   &:hover,
   &:focus {
-    border: 0 none;
-    outline: none;
-    box-shadow: none;
-    background-color: transparent;
+    border: 0 none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background-color: transparent !important;
   }
 }