@abi-software/map-side-bar 2.4.0-isan-2 → 2.4.1

package/package.json

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

package/src/App.vue

@@ -6,7 +6,6 @@
     />
     <div class="options-container">
       <div>Click arrow to open sidebar</div>
-      <el-button @click="openPMRSearch">PMR Search</el-button>
       <el-button @click="openSearch">search Uberon from refs</el-button>
       <el-button @click="singleFacets">Add heart to Filter</el-button>
       <el-button @click="addStomach">Add stomach to Filter</el-button>
@@ -113,7 +112,6 @@ export default {
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         NL_LINK_PREFIX: import.meta.env.VITE_APP_NL_LINK_PREFIX,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
-        FLATMAP_API_LOCATION: import.meta.env.VITE_APP_FLATMAP_API_LOCATION,
       },
       connectivityInput: exampleConnectivityInput,
       activeId: 1,
@@ -121,7 +119,7 @@ export default {
   },
   methods: {
     hoverChanged: function (data) {
-      // console.log('hoverChanged', data)
+      console.log('hoverChanged', data)
     },
     searchChanged: function (data) {
       console.log(data)
@@ -133,31 +131,17 @@ export default {
     action: function (action) {
       console.log('action fired: ', action)
       let facets = [];
-      if (action.labels) {
-        facets.push(
-          ...action.labels.map(val => ({
-            facet: capitalise(val),
-            term: "Anatomical structure",
-            facetPropPath: "anatomy.organ.category.name",
-          }))
-        );
-        if (this.$refs.sideBar) {
-          console.log('openSearch', facets)
-          this.$refs.sideBar.openSearch(facets, "");
-        }
-      }
-    },
-    openPMRSearch: function () {
-      this.$refs.sideBar.openSearch(
-        [
-          {
-            facet: "PMR",
-            term: "Data type",
-            facetPropPath: "item.types.name",
-          }
-        ],
-        'cardiovascular multiscale model'
+      facets.push(
+        ...action.labels.map(val => ({
+          facet: capitalise(val),
+          term: "Anatomical structure",
+          facetPropPath: "anatomy.organ.category.name",
+        }))
       );
+      if (this.$refs.sideBar) {
+        console.log('openSearch', facets)
+        this.$refs.sideBar.openSearch(facets, "");
+      }
     },
     openSearch: function () {
       this.$refs.sideBar.openSearch(

package/src/algolia/algolia.js

@@ -100,7 +100,6 @@ export class AlgoliaClient {
     for (let res of results) {
       newResult = { ...res }
       newResult = {
-        dataSource: 'SPARC',
         anatomy: res.anatomy ? res.anatomy.organ.map((organ => organ.curie)) : undefined,
         doi: res.item.curie.split(':')[1],
         name: res.item.name,
@@ -153,48 +152,35 @@ export class AlgoliaClient {
    * Get Search results
    * This is using fetch from the Algolia API
    */
-  search(filter, query = '', offset = 0, length = 8) {
-    console.log('searching', filter, query, offset, length)
-    // If the length is 0, return an empty result
-    if (length === 0) {
-      return new Promise(resolve => {
-        resolve({
-          items: [],
-          total: 0,
-          discoverIds: [],
-          dois: []
+  search(filter, query = '', hitsperPage = 10, page = 1) {
+    return new Promise(resolve => {
+      this.index
+        .search(query, {
+          facets: ['*'],
+          hitsPerPage: hitsperPage,
+          page: page - 1,
+          filters: filter,
+          attributesToHighlight: [],
+          attributesToRetrieve: [
+            'pennsieve.publishDate',
+            'pennsieve.updatedAt',
+            'item.curie',
+            'item.name',
+            'item.description',
+            'objectID',
+            'anatomy.organ.curie'
+          ],
         })
-      })
-    } else {
-      return new Promise(resolve => {
-        this.index
-          .search(query, {
-            facets: ['*'],
-            offset: offset,
-            length: length,
-            filters: filter,
-            attributesToHighlight: [],
-            attributesToRetrieve: [
-              'pennsieve.publishDate',
-              'pennsieve.updatedAt',
-              'item.curie',
-              'item.name',
-              'item.description',
-              'objectID',
-              'anatomy.organ.curie'
-            ],
-          })
-          .then(response => {
-            let searchData = {
-              items: this._processResultsForCards(response.hits),
-              total: response.nbHits,
-              discoverIds: response.hits.map(r => r.pennsieve ? r.pennsieve.identifier : r.objectID),
-              dois: response.hits.map(r => r.item.curie.split(':')[1])
-            }
-            resolve(searchData)
-          })
-      })
-    }
+        .then(response => {
+          let searchData = {
+            items: this._processResultsForCards(response.hits),
+            total: response.nbHits,
+            discoverIds: response.hits.map(r => r.pennsieve ? r.pennsieve.identifier : r.objectID),
+            dois: response.hits.map(r => r.item.curie.split(':')[1])
+          }
+          resolve(searchData)
+        })
+    })
   }
 
   /**

package/src/algolia/utils.js

@@ -60,13 +60,8 @@ export function getFilters(selectedFacetArray=undefined) {
     return 'NOT item.published.status:embargo'
   }
 
-  // Switch the 'term' attribute to 'label' if 'label' does not exist. Use facet2 if available
-  selectedFacetArray.forEach(f=>{
-    f.label=f.facet
-    if (f.facet2) {
-      f.label = f.facet2
-    }
-  })
+  // Switch the 'term' attribute to 'label' if 'label' does not exist 
+  selectedFacetArray.forEach(f=>f.label=f.facet)
   
 
   let facets = removeShowAllFacets(selectedFacetArray)

package/src/components/ConnectivityInfo.vue

@@ -4,7 +4,24 @@
     <div class="connectivity-info-title">
       <div>
         <div class="block" v-if="entry.title">
-          <div class="title">{{ capitalise(entry.title) }}</div>
+          <div class="title">
+            {{ capitalise(entry.title) }}
+            <template v-if="entry.featuresAlert">
+              <el-popover
+                width="250"
+                trigger="hover"
+                :teleported="false"
+                popper-class="popover-origin-help"
+              >
+                <template #reference>
+                  <el-icon class="alert"><el-icon-warn-triangle-filled /></el-icon>
+                </template>
+                <span style="word-break: keep-all">
+                  {{ entry.featuresAlert }}
+                </span>
+              </el-popover>
+            </template>
+          </div>
           <div
             v-if="
               entry.provenanceTaxonomyLabel &&
@@ -20,12 +37,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,24 +55,9 @@
             Show connectivity on map
           </span>
         </el-popover>
+        <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
-    <div v-if="featuresAlert" class="attribute-title-container">
-      <span class="attribute-title">Alert</span>
-      <el-popover
-        width="250"
-        trigger="hover"
-        :teleported="false"
-        popper-class="popover-origin-help"
-      >
-        <template #reference>
-          <el-icon class="info"><el-icon-warning /></el-icon>
-        </template>
-        <span style="word-break: keep-all">
-          {{ featuresAlert }}
-        </span>
-      </el-popover>
-    </div>
     <div class="content-container scrollbar">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
@@ -191,6 +193,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 +217,7 @@ export default {
     ElIconArrowDown,
     ElIconWarning,
     ExternalResourceCard,
+    CopyToClipboard,
   },
   props: {
     entry: {
@@ -225,6 +230,7 @@ export default {
         originsWithDatasets: [],
         componentsWithDatasets: [],
         resource: undefined,
+        featuresAlert: undefined,
       }),
     },
     availableAnatomyFacets: {
@@ -232,7 +238,6 @@ export default {
       default: () => [],
     },
   },
-  // inject: ['getFeaturesAlert'],
   data: function () {
     return {
       controller: undefined,
@@ -260,6 +265,9 @@ export default {
     },
   },
   computed: {
+    updatedCopyContent: function () {
+      return this.getUpdateCopyContent();
+    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -267,9 +275,6 @@ export default {
       }
       return resources;
     },
-    featuresAlert() {
-      // return this.getFeaturesAlert()
-    },
     originDescription: function () {
       if (
         this.entry &&
@@ -347,6 +352,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 +489,7 @@ export default {
 }
 
 .button-circle {
+  margin: 0;
   width: 24px !important;
   height: 24px !important;
 
@@ -415,6 +515,9 @@ export default {
 :deep(.popover-origin-help.el-popover) {
   text-transform: none !important; // need to overide the tooltip text transform
   border: 1px solid $app-primary-color;
+  font-weight: 400;
+  font-family: Asap, sans-serif, Helvetica;
+
   .el-popper__arrow {
     &:before {
       border-color: $app-primary-color;
@@ -423,12 +526,27 @@ export default {
   }
 }
 
+.info,
+.alert {
+  color: #8300bf;
+}
+
 .info {
   transform: rotate(180deg);
-  color: #8300bf;
   margin-left: 8px;
 }
 
+.alert {
+  margin-left: 5px;
+  vertical-align: text-bottom;
+
+  &,
+  > svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
 .seperator {
   width: 90%;
   height: 1px;
@@ -616,4 +734,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>

package/src/components/DatasetCard.vue

@@ -19,7 +19,6 @@
           />
         </span>
         <div class="card-right">
-          <el-tag type="primary" class="source-tag">SPARC Dataset</el-tag>
           <div class="title" @click="cardClicked">{{ entry.name }}</div>
           <div class="details">
             {{ contributors }} {{ entry.publishDate ? `(${publishYear})` : '' }}
@@ -47,6 +46,11 @@
               @categoryChanged="categoryChanged"
             />
           </div>
+
+          <!-- Copy to clipboard button container -->
+          <div class="float-button-container">
+            <CopyToClipboard :content="copyContent" />
+          </div>
         </div>
       </div>
     </div>
@@ -65,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() {
@@ -77,7 +83,8 @@ export default {
     BadgesGroup,
     ImageGallery,
     Button,
-    Icon
+    Icon,
+    CopyToClipboard,
   },
   props: {
     /**
@@ -103,6 +110,7 @@ export default {
       lastDoi: undefined,
       biolucidaData: undefined,
       currentCategory: 'All',
+      copyContent: '',
     }
   },
   computed: {
@@ -155,6 +163,9 @@ export default {
       return this.entry.publishDate.split('-')[0]
     },
   },
+  mounted: function () {
+    this.updateCopyContent();
+  },
   methods: {
     cardClicked: function () {
       this.openDataset()
@@ -227,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
@@ -249,6 +261,66 @@ export default {
           if (data.status == 'success') this.biolucidaData = data
         })
     },
+    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(`<div><strong>${this.entry.name}</strong></div>`);
+      }
+
+      // Contributors and Publish Date
+      if (this.contributors) {
+        let details = this.contributors;
+
+        if (this.entry.publishDate) {
+          details += ` (${this.publishYear})`;
+        }
+        contentArray.push(`<div>${details}</div>`);
+      }
+
+      // samples
+      if (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<br>');
+    },
   },
   created: function () {
     this.getBanner()
@@ -283,15 +355,6 @@ export default {
   color: #484848;
   cursor: pointer;
 }
-
-.source-tag {
-  margin-bottom: 0.75rem;
-  margin-right: 2rem;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
 .card {
   padding-top: 18px;
   position: relative;
@@ -364,4 +427,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>