Merge pull request #98 from akhuoa/feature/display-of-evidence

Refactor the display of evidence for SCKAN connectivity

package.json

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

src/components.d.ts

@@ -29,7 +29,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']

src/components/ConnectivityInfo.vue

@@ -2,7 +2,7 @@
   <div v-if="entry" class="main" v-loading="loading">
     <!-- Connectivity Info Title -->
     <div class="connectivity-info-title">
-      <div>
+      <div class="title-content">
         <div class="block" v-if="entry.title">
           <div class="title">
             {{ capitalise(entry.title) }}
@@ -35,9 +35,6 @@
         <div class="block" v-else>
           <div class="title">{{ entry.featureId }}</div>
         </div>
-        <div class="block" v-if="resources.length">
-          <external-resource-card :resources="resources"></external-resource-card>
-        </div>
       </div>
       <div class="title-buttons">
         <el-popover
@@ -199,8 +196,8 @@
         </el-button>
       </div>
 
-      <div v-if="connectivityError" class="connectivity-error-container">
-        <div class="connectivity-error">
+      <div class="connectivity-error-container">
+        <div class="connectivity-error" v-if="connectivityError">
           <strong v-if="connectivityError.errorConnectivities">
             {{ connectivityError.errorConnectivities }}
           </strong>
@@ -219,6 +216,10 @@
         />
       </template>
     </div>
+
+    <div class="content-container content-container-references" v-if="resources.length">
+      <external-resource-card :resources="resources" @references-loaded="onReferencesLoaded"></external-resource-card>
+    </div>
   </div>
 </template>
 
@@ -234,9 +235,13 @@ import {
   ElContainer as Container,
   ElIcon as Icon,
 } from 'element-plus'
-import ExternalResourceCard from './ExternalResourceCard.vue'
+
 import EventBus from './EventBus.js'
-import { CopyToClipboard, ConnectivityGraph } from '@abi-software/map-utilities';
+import {
+  CopyToClipboard,
+  ConnectivityGraph,
+  ExternalResourceCard,
+} from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
 const titleCase = (str) => {
@@ -307,6 +312,7 @@ export default {
       connectivityError: null,
       timeoutID: undefined,
       graphViewLoaded: false,
+      updatedCopyContent: '',
     }
   },
   watch: {
@@ -319,9 +325,6 @@ export default {
     },
   },
   computed: {
-    updatedCopyContent: function () {
-      return this.getUpdateCopyContent();
-    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -421,7 +424,10 @@ export default {
       const name = data.map(t => t.label).join(', ');
       this.toggleConnectivityTooltip(name, {show: true});
     },
-    getUpdateCopyContent: function () {
+    onReferencesLoaded: function (references) {
+      this.updatedCopyContent = this.getUpdateCopyContent(references);
+    },
+    getUpdateCopyContent: function (references) {
       if (!this.entry) {
         return '';
       }
@@ -443,21 +449,6 @@ export default {
         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>`);
@@ -513,6 +504,17 @@ export default {
         contentArray.push(transformedDestinations);
       }
 
+      // References
+      if (references) {
+        let contentString = `<div><strong>References</strong></div>`;
+        contentString += '\n';
+        const contentList = references.list
+          .map((item) => `<li>${item}</li>`)
+          .join('\n');
+        contentString += `<ul>${contentList}</ul>`;
+        contentArray.push(contentString);
+      }
+
       return contentArray.join('\n\n<br>');
     },
     toggleConnectivityTooltip: function (name, option) {
@@ -597,6 +599,7 @@ export default {
     },
   },
   mounted: function () {
+    this.updatedCopyContent = this.getUpdateCopyContent();
     EventBus.on('connectivity-graph-error', (errorInfo) => {
       this.pushConnectivityError(errorInfo);
     });
@@ -617,6 +620,11 @@ export default {
   flex-direction: row;
   justify-content: space-between;
   gap: 1rem;
+
+  .title-content {
+    flex: 1 0 0%;
+    max-width: 85%;
+  }
 }
 
 .title {
@@ -922,7 +930,10 @@ export default {
 
 .title-buttons {
   display: flex;
+  flex: 1 0 0%;
+  max-width: 15%;
   flex-direction: row;
+  justify-content: end;
   gap: 0.5rem;
 
   :deep(.copy-clipboard-button) {
@@ -954,12 +965,18 @@ export default {
 
 .content-container-connectivity {
   position: relative;
+
+  &:not([style*="display: none"]) ~ .content-container-references {
+    margin-top: -1.25rem;
+  }
 }
 
 .connectivity-error-container {
   position: sticky;
   bottom: 0.5rem;
   width: 100%;
+  min-height: 31px; // placeholder
+  margin-top: -10px !important;
   display: flex;
   flex-direction: row;
   align-items: center;

src/exampleConnectivityInput.js

@@ -274,10 +274,7 @@ export default {
         "ilxtr:neuron-type-aacar-5"
     ],
     "hyperlinks": [
-        {
-            "url": "https://pubmed.ncbi.nlm.nih.gov/?term=%2F%2Fwww.ncbi.nlm.nih.gov%2Fpubmed%2F27783854",
-            "id": "pubmed"
-        }
+        "https://doi.org/10.1002/cphy.c150046"
     ],
     "provenanceTaxonomy": [
         "NCBITaxon:9606",