@abi-software/map-side-bar 2.4.0-isan-1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.0-isan-1",
+  "version": "2.4.0",
   "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

@@ -112,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,
@@ -120,7 +119,7 @@ export default {
   },
   methods: {
     hoverChanged: function (data) {
-      // console.log('hoverChanged', data)
+      console.log('hoverChanged', data)
     },
     searchChanged: function (data) {
       console.log(data)
@@ -132,18 +131,16 @@ 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, "");
-        }
+      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 () {

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

@@ -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>

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>

package/src/components/SearchFilters.vue

@@ -156,6 +156,7 @@ export default {
   },
   data: function () {
     return {
+      algoliaClient: undefined,
       cascaderIsReady: false,
       previousShowAllChecked: {
         species: false,
@@ -261,29 +262,12 @@ export default {
                 }
               })
             })
-
-            this.populatePMRinCascader();
           })
           .finally(() => {
             resolve()
           })
       })
     },
-    /**
-     * Add PMR checkbox in filters (cascader)
-     */
-    populatePMRinCascader: function () {
-      for (let i = 0; i < this.options.length; i += 1) {
-        const option = this.options[i];
-        // match with "Data type"'s' key
-        if (option.key === 'item.types.name') {
-          option.children.push({
-            label: 'PMR',
-            value: this.createCascaderItemValue("Data type", "PMR"),
-          });
-        }
-      }
-    },
     /**
      * Create manual events when cascader tag is closed
      */
@@ -485,7 +469,7 @@ export default {
               facetSubPropPath: facetSubPropPath, // will be used for filters if we are at the third level of the cascader
             }
           })
-
+        
         this.$emit('loading', true) // let sidebarcontent wait for the requests
         this.$emit('filterResults', filters) // emit filters for apps above sidebar
         this.setCascader(filterKeys) //update our cascader v-model if we modified the event
@@ -647,7 +631,7 @@ export default {
           let filters = createFilter(e)
           return filters
         })
-
+        
         // Unforttunately the cascader is very particular about it's v-model
         //   to get around this we create a clone of it and use this clone for adding our boolean information
         this.cascadeSelectedWithBoolean = filterFacets.map((e) => {
@@ -793,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/SideBar.vue

@@ -46,7 +46,6 @@
               :contextCardEntry="tab.contextCard"
               :envVars="envVars"
               :ref="'searchTab_' + tab.id"
-              @pmr-action-click="onPmrActionClick"
               @search-changed="searchChanged(tab.id, $event)"
               @hover-changed="hoverChanged($event)"
             />
@@ -247,9 +246,6 @@ export default {
     setDrawerOpen: function (value = true) {
       this.drawerOpen = value
     },
-    onPmrActionClick: function (payload) {
-      this.$emit('actionClick', payload);
-    },
     /**
      * @vuese
      * The function to emit 'tabClicked' event with tab's `id` and tab's `type`