@abi-software/map-utilities 1.2.2-beta.3 → 1.2.2-beta.5

package/src/components/Tooltip/ExternalResourceCard.vue

@@ -1,27 +1,67 @@
 <template>
   <div class="resource-container">
-    <template v-for="resource in resources" :key="resource.id">
-      <div class="resource">
-        <el-button
-          v-if="resource.id === 'pubmed'"
-          class="button"
-          id="open-pubmed-button"
-          :icon="ElIconNotebook"
-          @click="openUrl(resource.url)"
-        >
-          Open publications in PubMed
-        </el-button>
-      </div>
-    </template>
+    <div class="attribute-title-container">
+      <div class="attribute-title">References</div>
+    </div>
+    <div class="citation-tabs" v-if="referencesWithDOI">
+      <el-button
+        link
+        v-for="citationOption of citationOptions"
+        :key="citationOption.value"
+        :type="citationType === citationOption.value ? 'primary' : ''"
+        @click="onCitationFormatChange(citationOption.value)"
+      >
+        {{ citationOption.label }}
+      </el-button>
+    </div>
+    <ul class="citation-list">
+      <li
+        v-for="reference of pubMedReferences"
+        :key="reference.id"
+        :class="{'loading': reference.citation && reference.citation[citationType] === ''}"
+      >
+        <template v-if="reference.citation && reference.citation[citationType]">
+          <span v-html="reference.citation[citationType]"></span>
+          <CopyToClipboard :content="reference.citation[citationType]" />
+        </template>
+      </li>
+
+      <li v-for="reference of openLibReferences">
+        <div v-html="formatCopyReference(reference)"></div>
+        <CopyToClipboard :content="formatCopyReference(reference)" />
+      </li>
+
+      <li v-for="reference of isbnDBReferences">
+        <a :href="reference.url" target="_blank">{{ reference.url }}</a>
+        <CopyToClipboard :content="reference.url" />
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import { shallowRef } from "vue";
-import { Notebook as ElIconNotebook } from "@element-plus/icons-vue";
+import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
 
-import EventBus from "../EventBus.js";
+const CROSSCITE_API_HOST = 'https://citation.crosscite.org';
+const CITATION_OPTIONS = [
+  {
+    label: 'APA',
+    value: 'apa',
+  },
+  {
+    label: 'Chicago',
+    value: 'chicago-note-bibliography',
+  },
+  {
+    label: 'IEEE',
+    value: 'ieee',
+  },
+  {
+    label: 'Bibtex',
+    value: 'bibtex',
+  },
+];
+const CITATION_DEFAULT = 'apa';
 
 export default {
   name: "ExternalResourceCard",
@@ -33,26 +73,373 @@ export default {
   },
   data: function () {
     return {
-      pubmeds: [],
-      pubmedIds: [],
-      ElIconNotebook: shallowRef(ElIconNotebook),
-    };
+      pubMedReferences: [],
+      openLibReferences: [],
+      isbnDBReferences: [],
+      citationOptions: CITATION_OPTIONS,
+      citationType: CITATION_DEFAULT,
+    }
+  },
+  watch: {
+    resources: function (_resources) {
+      this.formatReferences([..._resources]);
+    },
+  },
+  computed: {
+    referencesWithDOI: function () {
+      const withDOI = this.pubMedReferences.filter((reference) => reference.type === 'doi' || reference.doi);
+      return withDOI.length;
+    },
+  },
+  mounted: function () {
+    this.formatReferences([...this.resources]);
+    this.getCitationText(CITATION_DEFAULT);
   },
   methods: {
-    capitalise: function (string) {
-      return string.charAt(0).toUpperCase() + string.slice(1);
+    formatReferences: function (references) {
+      const nonPubMedReferences = this.extractNonPubMedReferences(references);
+      const pubMedReferences = references.filter((reference) => !nonPubMedReferences.includes(reference));
+
+      this.pubMedReferences = pubMedReferences.map((reference) =>
+        (typeof reference === 'object') ?
+        this.extractPublicationIdFromURLString(reference[0]) :
+        this.extractPublicationIdFromURLString(reference)
+      );
+
+      // pmc to pmid
+      this.pubMedReferences.forEach((reference) => {
+        if (reference.type === 'pmc') {
+          const pmcId = reference.id;
+          this.searchPMID(pmcId).then((data) => {
+            if (data && data.esearchresult) {
+              const idList = data.esearchresult.idlist || [];
+              reference.id = idList[0];
+              reference.type = 'pmid';
+            }
+          });
+        }
+      });
+
+      this.formatNonPubMedReferences(nonPubMedReferences).then((responses) => {
+        this.openLibReferences = responses.filter((response) => response.type === 'openlib');
+        this.isbnDBReferences = responses.filter((response) => response.type === 'isbndb');
+
+        this.formatOpenLibReferences();
+      });
+    },
+    extractNonPubMedReferences: function (references) {
+      const extractedReferences = [];
+      const pubmedDomains = this.getPubMedDomains();
+
+      references.forEach((reference) => {
+        let count = 0;
+        pubmedDomains.forEach((name) => {
+          if (reference.includes(name)) {
+            count++;
+          }
+        });
+        if (!count) {
+          extractedReferences.push(reference);
+        }
+      });
+
+      return extractedReferences;
+    },
+    formatNonPubMedReferences: async function (references) {
+      const transformedReferences = [];
+      const filteredReferences = references.filter((referenceURL) => referenceURL.indexOf('isbn') !== -1);
+      const isbnIDs = filteredReferences.map((url) => {
+        const isbnId = url.split('/').pop();
+        return 'ISBN:' + isbnId;
+      });
+      const isbnIDsKey = isbnIDs.join(',');
+      const failedIDs = isbnIDs.slice();
+
+      const openlibAPI = `https://openlibrary.org/api/books?bibkeys=${isbnIDsKey}&format=json`;
+      const data = await this.fetchData(openlibAPI);
+
+      for (const key in data) {
+        const successKeyIndex = failedIDs.indexOf(key);
+        failedIDs.splice(successKeyIndex, 1);
+
+        const url = data[key].info_url;
+        const urlSegments = url.split('/');
+        const endpointIndex = urlSegments.indexOf('books');
+        const bookId = urlSegments[endpointIndex + 1];
+
+        transformedReferences.push({
+          id: key.split(':')[1], // Key => "ISBN:1234"
+          type: 'openlib',
+          url: url,
+          bookId: bookId,
+        });
+      }
+
+      failedIDs.forEach((failedID) => {
+        const id = failedID.split(':')[1];
+        // Data does not exist in OpenLibrary
+        // Provide ISBNDB link for reference
+        const url = `https://isbndb.com/book/${id}`;
+        transformedReferences.push({
+          id: id,
+          url: url,
+          type: 'isbndb'
+        });
+      });
+
+      return transformedReferences;
+    },
+    extractPublicationIdFromURLString: function (urlStr) {
+      if (!urlStr) return
+
+      const str = decodeURIComponent(urlStr)
+
+      let term = {id: '', type: '', citation: {}}
+
+      const names = this.getPubMedDomains()
+
+      names.forEach((name) => {
+        const lastIndex = str.lastIndexOf(name)
+        if (lastIndex !== -1) {
+          term.id = str.slice(lastIndex + name.length)
+          if (name === 'doi.org/') {
+            term.type = "doi"
+          } else if (name === 'pmc/articles/') {
+            term.type = "pmc"
+          } else {
+            term.type = "pmid"
+          }
+        }
+      })
+
+      //Backward compatability with doi: and PMID:
+      if (term.id === '') {
+        if (urlStr.includes("doi:")) {
+          term.id = this.stripPMIDPrefix(urlStr)
+          term.type = "doi"
+        } else if (urlStr.includes("PMID:")) {
+          term.id = this.stripPMIDPrefix(urlStr)
+          term.type = "pmid"
+        }
+      }
+
+      if (term.id.endsWith('/')) {
+        term.id = term.id.slice(0, -1)
+      }
+
+      return term
     },
-    openUrl: function (url) {
-      EventBus.emit("open-pubmed-url", url);
-      window.open(url, "_blank");
+    getPubMedDomains: function () {
+      const names = [
+        'doi.org/',
+        'nih.gov/pubmed/',
+        'pmc/articles/',
+        'pubmed.ncbi.nlm.nih.gov/',
+      ]
+
+      return names;
+    },
+    stripPMIDPrefix: function (pubmedId) {
+      return pubmedId.split(':')[1]
+    },
+    onCitationFormatChange: function(citationType) {
+      this.citationType = citationType;
+      this.getCitationText(citationType);
+    },
+    getCitationText: function(citationType) {
+      this.pubMedReferences.forEach((reference) => {
+        const { id, type, doi } = reference;
+
+        if (
+          !(reference.citation && reference.citation[citationType])
+          && id
+        ) {
+          reference.citation[citationType] = ''; // loading
+
+          if (type === 'doi' || doi) {
+            const doiID = type === 'doi' ? id : doi;
+            this.getCitationTextByDOI(doiID).then((text) => {
+              const formattedText = this.replaceLinkInText(text);
+              reference.citation[citationType] = formattedText;
+              this.updateCopyContents();
+            });
+          } else if (type === 'pmid') {
+            this.getDOIFromPubMedID(id).then((data) => {
+              if (data?.result) {
+                const resultObj = data.result[id];
+                const articleIDs = resultObj?.articleids || [];
+                const doiObj = articleIDs.find((item) => item.idtype === 'doi');
+                const doiID = doiObj?.value;
+
+                if (doiID) {
+                  reference['doi'] = doiID;
+                  this.getCitationTextByDOI(doiID).then((text) => {
+                    const formattedText = this.replaceLinkInText(text);
+                    reference.citation[citationType] = formattedText;
+                    this.updateCopyContents();
+                  });
+                } else {
+                  // If there has no doi in PubMed
+                  const { title, pubdate, authors } = resultObj;
+                  const authorNames = authors ? authors.map((author) => author.name) : [];
+                  const formattedText = this.formatCopyReference({
+                    title: title || '',
+                    date: pubdate || '',
+                    authors: authorNames,
+                    url: `https://pubmed.ncbi.nlm.nih.gov/${id}`,
+                  });
+                  reference.citation[citationType] = formattedText;
+                  this.updateCopyContents();
+                }
+              }
+            });
+          }
+        }
+      });
+    },
+    updateCopyContents: function () {
+      const citationTypeObj = this.citationOptions.find((item) => item.value === this.citationType);
+      let citationFormatStyle = '';
+      const values = [];
+
+      if (this.referencesWithDOI) {
+        citationFormatStyle = citationTypeObj?.label;
+      }
+
+      this.pubMedReferences.forEach((reference) => {
+        values.push(reference.citation[this.citationType]);
+      });
+
+      this.openLibReferences.forEach((reference) => {
+        values.push(this.formatCopyReference(reference));
+      });
+
+      this.isbnDBReferences.forEach((reference) => {
+        values.push(reference.url);
+      });
+
+      this.$emit('references-loaded', {
+        style: citationFormatStyle,
+        list: values
+      });
+    },
+    replaceLinkInText: function (text) {
+      const protocol = 'https://';
+      let linkBody = text.split(protocol)[1];
+
+      if (linkBody) {
+        linkBody = linkBody.split(' ')[0];
+        linkBody = linkBody.trim();
+
+        if (linkBody.endsWith('.')) {
+          linkBody = linkBody.substring(0, linkBody.length - 1);
+        }
+
+        const fullLink = protocol + linkBody;
+        const htmlLink = `<a href="${fullLink}" target="_blank">${fullLink}</a>`;
+
+        return text.replace(fullLink, htmlLink);
+      }
+
+      return text;
+    },
+    searchPMID: async function (term) {
+      const esearchAPI = `https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi?db=pubmed&term=${term}&format=json`;
+      return await this.fetchData(esearchAPI);
+    },
+    getCitationTextByDOI: async function (id) {
+      const citationAPI = `${CROSSCITE_API_HOST}/format?doi=${id}&style=${this.citationType}&lang=en-US`;
+      return await this.fetchData(citationAPI, 'text');
+    },
+    getDOIFromPubMedID: async function (pubmedId) {
+      const summaryAPI = `https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&id=${pubmedId}&format=json`;
+      return await this.fetchData(summaryAPI);
+    },
+    formatOpenLibReferences: function () {
+      this.openLibReferences.forEach((reference) => {
+        const { bookId } = reference;
+        this.getBookData(bookId).then((data) => {
+          const { title, authors, publish_date } = data;
+          if (title) {
+            reference['title'] = title;
+          }
+
+          if (publish_date) {
+            reference['date'] = publish_date;
+          }
+
+          if (authors) {
+            reference['authors'] = [];
+
+            authors.forEach((author) => {
+              this.getBookAuthor(author.key).then((data) => {
+                const { name } = data;
+                if (name) {
+                  reference['authors'].push(name);
+                  this.updateCopyContents();
+                }
+              });
+            });
+          }
+          this.updateCopyContents();
+        });
+      });
+    },
+    getBookData: async function (bookId) {
+      const apiURL = `https://openlibrary.org/books/${bookId}.json`;
+      return await this.fetchData(apiURL);
+    },
+    getBookAuthor: async function (key) {
+      const apiURL = `https://openlibrary.org${key}.json`;
+      return await this.fetchData(apiURL);
+    },
+    formatCopyReference: function (reference) {
+      const copyContents = [];
+      const { title, date, authors, url } = reference;
+
+      if (title) {
+        copyContents.push(title);
+      }
+
+      if (date) {
+        copyContents.push(`(${date})`);
+      }
+
+      if (authors) {
+        copyContents.push(`- ${authors.join(', ')}`);
+      }
+
+      copyContents.push(`<div><a href="${url}" target="_blank">${url}</a></div>`);
+
+      return copyContents.join(' ');
+    },
+    fetchData: async function (apiURL, format) {
+      try {
+        const response = await fetch(apiURL);
+        if (!response.ok) {
+          throw new Error(`Response status: ${response.status}`);
+        }
+
+        if (format === 'text') {
+          return await response.text();
+        } else {
+          return await response.json();
+        }
+      } catch (error) {
+        console.error(`Fetch data error: ${error}`);
+      }
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
 .resource-container {
-  margin-top: 0.5em;
+  margin-top: 1em;
+}
+
+.attribute-title-container {
+  margin-bottom: 0.5rem;
 }
 
 .attribute-title {
@@ -62,47 +449,89 @@ export default {
   text-transform: uppercase;
 }
 
-.attribute-content {
-  font-size: 14px;
-  font-weight: 400;
-}
+.citation-list {
+  margin: 0;
+  margin-top: 0.5rem;
+  padding: 0;
+  list-style: none;
+  line-height: 1.3;
+
+  li {
+    margin: 0;
+    padding: 0.5rem 1.5rem 0.5rem 0.75rem;
+    border-radius: var(--el-border-radius-base);
+    background-color: var(--el-bg-color-page);
+    position: relative;
+
+    :deep(a) {
+      word-wrap: break-word;
+    }
+
+    + li {
+      margin-top: 0.5rem;
+    }
+
+    &.loading {
+      padding: 1rem;
 
-.el-link {
-  color: $app-primary-color;
-  text-decoration: none;
-  word-wrap: break-word;
-  &:hover,
-  &:focus {
-    color: $app-primary-color;
+      &::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        animation-duration: 3s;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-name: loadingAnimation;
+        animation-timing-function: linear;
+        background: linear-gradient(to right,
+          var(--el-bg-color-page) 5%,
+          var(--el-color-info-light-8) 15%,
+          var(--el-bg-color-page) 30%
+        );
+      }
+    }
+
+    :deep(.copy-clipboard-button) {
+      position: absolute;
+      bottom: 0.25rem;
+      right: 0.25rem;
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    &:hover {
+      :deep(.copy-clipboard-button) {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
   }
 }
 
-:deep(.el-carousel__button) {
-  background-color: $app-primary-color;
-}
+.citation-tabs {
+  .el-button {
+    &:hover,
+    &:focus,
+    &:active {
+      color: $app-primary-color;
+    }
+  }
 
-.attribute-title {
-  font-size: 16px;
-  font-weight: 600;
-  /* font-weight: bold; */
-  text-transform: uppercase;
+  .el-button + .el-button {
+    margin-left: 0.25rem;
+  }
 }
 
-.button {
-  margin-left: 0px !important;
-  margin-top: 0px !important;
-  font-size: 14px !important;
-  background-color: $app-primary-color;
-  color: #fff;
-  &:hover {
-    color: #fff !important;
-    background: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
+@keyframes loadingAnimation {
+  0% {
+    background-position: -30vw 0;
   }
-  & + .button {
-    margin-top: 10px !important;
-    background-color: $app-primary-color;
-    color: #fff;
+  100% {
+    background-position: 70vw 0;
   }
 }
 </style>

package/src/components/Tooltip/ProvenancePopup.vue

@@ -164,7 +164,7 @@
           Search for data on components
         </el-button>
 
-        <external-resource-card :resources="resources"></external-resource-card>
+        <external-resource-card :resources="resources" v-if="resources.length"></external-resource-card>
       </div>
     </transition>
   </div>

package/src/components/index.js

@@ -6,6 +6,7 @@ import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
 import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
 import Tooltip from "./Tooltip/Tooltip.vue";
 import TreeControls from "./TreeControls/TreeControls.vue";
+import ExternalResourceCard from "./Tooltip/ExternalResourceCard.vue";
 
 export {
   AnnotationPopup,
@@ -16,4 +17,5 @@ export {
   HelpModeDialog,
   Tooltip,
   TreeControls,
+  ExternalResourceCard,
 };

package/src/components/utilities.js

@@ -4,6 +4,47 @@ const capitalise = term => {
   return term;
 };
 
+const convertNodeToObject = (node) => {
+  const obj = {};
+
+  if (node.attributes) {
+    for (let i = 0; i < node.attributes.length; i++) {
+      const attr = node.attributes[i];
+      obj[`@${attr.nodeName}`] = attr.nodeValue;
+    }
+  }
+
+  for (let i = 0; i < node.childNodes.length; i++) {
+    const child = node.childNodes[i];
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const childResult = convertNodeToObject(child);
+      if (obj[child.nodeName]) {
+        if (!Array.isArray(obj[child.nodeName])) {
+          obj[child.nodeName] = [obj[child.nodeName]];
+        }
+        obj[child.nodeName].push(childResult);
+      } else {
+        obj[child.nodeName] = childResult;
+      }
+    } else if (child.nodeType === Node.TEXT_NODE && child.nodeValue.trim() !== '') {
+      return child.nodeValue.trim();
+    }
+  }
+
+  return obj;
+};
+
+const xmlToJSON = (xmlText) => {
+  const parser = new DOMParser();
+  const xmlDoc = parser.parseFromString(xmlText, "text/xml");
+
+  const result = {};
+  result[xmlDoc.documentElement.nodeName] = convertNodeToObject(xmlDoc.documentElement);
+
+  return result;
+};
+
 export {
   capitalise,
+  xmlToJSON,
 };

package/src/components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     CreateTooltipContent: typeof import('./components/Tooltip/CreateTooltipContent.vue')['default']
     DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']