From 1fd61d7350460b7a6ac2804e52977e7313be1c89 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jan 2025 12:55:33 +1300
Subject: [PATCH 1/9] Add citation.js

---
 package-lock.json | 220 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   5 ++
 2 files changed, 225 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 4735f6f..3991131 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,11 @@
       "version": "1.3.1",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
+        "@citation-js/core": "^0.7.14",
+        "@citation-js/plugin-bibtex": "^0.7.17",
+        "@citation-js/plugin-csl": "^0.7.14",
+        "@citation-js/plugin-doi": "^0.7.16",
+        "@citation-js/plugin-pubmed": "^0.3.0",
         "@element-plus/icons-vue": "^2.3.1",
         "cytoscape": "^3.30.2",
         "element-plus": "2.8.4",
@@ -50,6 +55,92 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@citation-js/core": {
+      "version": "0.7.14",
+      "resolved": "https://registry.npmjs.org/@citation-js/core/-/core-0.7.14.tgz",
+      "integrity": "sha512-dgeGqYDSQmn2MtnWZkwPGpJQPh43yr1lAAr9jl1NJ9pIY1RXUQxtlAUZVur0V9PHdbfQC+kkvB1KC3VpgVV3MA==",
+      "dependencies": {
+        "@citation-js/date": "^0.5.0",
+        "@citation-js/name": "^0.4.2",
+        "fetch-ponyfill": "^7.1.0",
+        "sync-fetch": "^0.4.1"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/@citation-js/date": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@citation-js/date/-/date-0.5.1.tgz",
+      "integrity": "sha512-1iDKAZ4ie48PVhovsOXQ+C6o55dWJloXqtznnnKy6CltJBQLIuLLuUqa8zlIvma0ZigjVjgDUhnVaNU1MErtZw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@citation-js/name": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@citation-js/name/-/name-0.4.2.tgz",
+      "integrity": "sha512-brSPsjs2fOVzSnARLKu0qncn6suWjHVQtrqSUrnqyaRH95r/Ad4wPF5EsoWr+Dx8HzkCGb/ogmoAzfCsqlTwTQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@citation-js/plugin-bibtex": {
+      "version": "0.7.17",
+      "resolved": "https://registry.npmjs.org/@citation-js/plugin-bibtex/-/plugin-bibtex-0.7.17.tgz",
+      "integrity": "sha512-pyMW6UR6iMPCk1mVwagNHabprajOCQO+TibxKI6ymdv5VOX3zoqeQF0utwjFnViquL/BZfM5SGUZCQdu+ZZYag==",
+      "dependencies": {
+        "@citation-js/date": "^0.5.0",
+        "@citation-js/name": "^0.4.2",
+        "moo": "^0.5.1"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "@citation-js/core": "^0.7.0"
+      }
+    },
+    "node_modules/@citation-js/plugin-csl": {
+      "version": "0.7.14",
+      "resolved": "https://registry.npmjs.org/@citation-js/plugin-csl/-/plugin-csl-0.7.14.tgz",
+      "integrity": "sha512-7AKB8lMz1IqdtoE33NnWIpteLYMuSl3xqT+Cax7sQKwAIJEoq2HBmb43Ja8xQQ36nREAupQJv1V6XksIAmYnCg==",
+      "dependencies": {
+        "@citation-js/date": "^0.5.0",
+        "citeproc": "^2.4.6"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "@citation-js/core": "^0.7.0"
+      }
+    },
+    "node_modules/@citation-js/plugin-doi": {
+      "version": "0.7.16",
+      "resolved": "https://registry.npmjs.org/@citation-js/plugin-doi/-/plugin-doi-0.7.16.tgz",
+      "integrity": "sha512-ghJ/ms5OnAsH4wmdSUPCroDoNXLbDHIvLVAczbLpEdB2pfCARCicUVWBGPuLpvG6pFPMt5ygRk9xEZXr2qIbSQ==",
+      "dependencies": {
+        "@citation-js/date": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "@citation-js/core": "^0.7.0"
+      }
+    },
+    "node_modules/@citation-js/plugin-pubmed": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@citation-js/plugin-pubmed/-/plugin-pubmed-0.3.0.tgz",
+      "integrity": "sha512-E3l83VP5UnTh6lLJaTaNBIkNgIx3U6IjDNf7j5l4geBOaOwDIhkl9X+Ss33/MMNEIMNDsBoodoMJTZ8Cq+C/ug==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@citation-js/core": ">=0.5.1 <=0.6"
+      }
+    },
     "node_modules/@ctrl/tinycolor": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -982,6 +1073,25 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1015,6 +1125,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1039,6 +1172,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/citeproc": {
+      "version": "2.4.63",
+      "resolved": "https://registry.npmjs.org/citeproc/-/citeproc-2.4.63.tgz",
+      "integrity": "sha512-68F95Bp4UbgZU/DBUGQn0qV3HDZLCdI9+Bb2ByrTaNJDL5VEm9LqaiNaxljsvoaExSLEXe1/r6n2Z06SCzW3/Q=="
+    },
     "node_modules/confbox": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
@@ -1189,6 +1327,14 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-ponyfill": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/fetch-ponyfill/-/fetch-ponyfill-7.1.0.tgz",
+      "integrity": "sha512-FhbbL55dj/qdVO3YNK7ZEkshvj3eQ7EuIGV2I6ic/2YiocvyWv+7jg2s4AyS0wdRU75s3tA8ZxI/xPigb0v5Aw==",
+      "dependencies": {
+        "node-fetch": "~2.6.1"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -1248,6 +1394,25 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
@@ -1411,6 +1576,11 @@
         "ufo": "^1.5.3"
       }
     },
+    "node_modules/moo": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1434,6 +1604,25 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.6.13",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.13.tgz",
+      "integrity": "sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -1669,6 +1858,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sync-fetch": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/sync-fetch/-/sync-fetch-0.4.5.tgz",
+      "integrity": "sha512-esiWJ7ixSKGpd9DJPBTC4ckChqdOjIwJfYhVHkcQ2Gnm41323p1TRmEI+esTQ9ppD+b5opps2OTEGTCGX5kF+g==",
+      "dependencies": {
+        "buffer": "^5.7.1",
+        "node-fetch": "^2.6.1"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1681,6 +1882,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "node_modules/ufo": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
@@ -1818,6 +2024,11 @@
         }
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -1832,6 +2043,15 @@
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
       "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
       "dev": true
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 41936d0..3065bfc 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,11 @@
   },
   "dependencies": {
     "@abi-software/svg-sprite": "^1.0.1",
+    "@citation-js/core": "^0.7.14",
+    "@citation-js/plugin-bibtex": "^0.7.17",
+    "@citation-js/plugin-csl": "^0.7.14",
+    "@citation-js/plugin-doi": "^0.7.16",
+    "@citation-js/plugin-pubmed": "^0.3.0",
     "@element-plus/icons-vue": "^2.3.1",
     "cytoscape": "^3.30.2",
     "element-plus": "2.8.4",

From d3cfbcb526e824e5709eae48a9bd0fb55f89a9bd Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jan 2025 13:24:41 +1300
Subject: [PATCH 2/9] Switch to citation.js for formatting PubMed IDs instead
 of converting to DOI

---
 .../Tooltip/ExternalResourceCard.vue          | 95 ++++++++++++-------
 1 file changed, 61 insertions(+), 34 deletions(-)

diff --git a/src/components/Tooltip/ExternalResourceCard.vue b/src/components/Tooltip/ExternalResourceCard.vue
index b3b7d09..6177462 100644
--- a/src/components/Tooltip/ExternalResourceCard.vue
+++ b/src/components/Tooltip/ExternalResourceCard.vue
@@ -6,7 +6,7 @@
         <CopyToClipboard label="Copy list to clipboard" :content="referecesListContent" />
       </div>
     </div>
-    <div class="citation-tabs" v-if="referencesWithDOI">
+    <div class="citation-tabs" v-if="pubMedReferences.length">
       <el-button
         link
         v-for="citationOption of citationOptions"
@@ -65,6 +65,12 @@
 </template>
 
 <script>
+import { Cite } from '@citation-js/core';
+import '@citation-js/plugin-doi';
+import '@citation-js/plugin-csl';
+import '@citation-js/plugin-bibtex';
+import '@citation-js/plugin-pubmed';
+
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
 import { delay } from '../utilities';
 
@@ -299,45 +305,55 @@ export default {
             };
           });
         } 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();
-                }).catch((error) => {
-                  reference.citation['error'] = {
-                    type: citationType,
-                    ref: 'doi',
-                  };
-                });
-              } 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();
-              }
-            }
+          this.getCitationTextByPMID(id).then((text) => {
+            const formattedText = this.replaceLinkInText(text);
+            reference.citation[citationType] = formattedText;
+            this.updateCopyContents();
           }).catch((error) => {
             reference.citation['error'] = {
               type: citationType,
               ref: 'pubmed',
             };
           });
+          // 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();
+          //       }).catch((error) => {
+          //         reference.citation['error'] = {
+          //           type: citationType,
+          //           ref: 'doi',
+          //         };
+          //       });
+          //     } 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();
+          //     }
+          //   }
+          // }).catch((error) => {
+          //   reference.citation['error'] = {
+          //     type: citationType,
+          //     ref: 'pubmed',
+          //   };
+          // });
         }
       }
     },
@@ -418,6 +434,17 @@ export default {
       const esearchAPI = `https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi?db=pubmed&term=${term}&format=json`;
       return await this.fetchData(esearchAPI);
     },
+    getCitationTextByPMID: async function (id) {
+      const cite = await Cite.async(id, {forceType: '@pubmed/id'});
+      const citation = (this.citationType === 'bibtex') ?
+        cite.format(this.citationType) :
+        cite.format('bibliography', {
+          format: 'html',
+          template: this.citationType,
+          lang: 'en-US'
+        })
+      return citation;
+    },
     getCitationTextByDOI: async function (id) {
       const citationAPI = `${this.crosscite_host}/format?doi=${id}&style=${this.citationType}&lang=en-US`;
       return await this.fetchData(citationAPI, 'text');

From aa1900790383c25a221933fb82158cc07f0e5078 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jan 2025 14:48:28 +1300
Subject: [PATCH 3/9] Add chicago and ieee styles in citation.js

---
 src/components/Tooltip/ExternalResourceCard.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/ExternalResourceCard.vue b/src/components/Tooltip/ExternalResourceCard.vue
index 6177462..72aa106 100644
--- a/src/components/Tooltip/ExternalResourceCard.vue
+++ b/src/components/Tooltip/ExternalResourceCard.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { Cite } from '@citation-js/core';
+import { Cite, plugins } from '@citation-js/core';
 import '@citation-js/plugin-doi';
 import '@citation-js/plugin-csl';
 import '@citation-js/plugin-bibtex';
@@ -435,6 +435,15 @@ export default {
       return await this.fetchData(esearchAPI);
     },
     getCitationTextByPMID: async function (id) {
+      // because 'chicago' and 'ieee' are not in citation.js default styles
+      if ((this.citationType !== 'bibtex') && (this.citationType !== 'apa')) {
+        const xml = `https://raw.githubusercontent.com/citation-style-language/styles/refs/heads/master/${this.citationType}.csl`;
+        const response = await fetch(xml);
+        const template = await response.text();
+        let config = plugins.config.get('@csl');
+        config.templates.add(this.citationType, template);
+      }
+
       const cite = await Cite.async(id, {forceType: '@pubmed/id'});
       const citation = (this.citationType === 'bibtex') ?
         cite.format(this.citationType) :

From 0a220b3d7effd698ae15a5c791622ad4f2ce86a5 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jan 2025 16:13:25 +1300
Subject: [PATCH 4/9] Format all citation with citation.js

---
 src/components/Tooltip/ExternalResourceCard.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Tooltip/ExternalResourceCard.vue b/src/components/Tooltip/ExternalResourceCard.vue
index 72aa106..80f4a8b 100644
--- a/src/components/Tooltip/ExternalResourceCard.vue
+++ b/src/components/Tooltip/ExternalResourceCard.vue
@@ -294,7 +294,7 @@ export default {
 
         if (type === 'doi' || doi) {
           const doiID = type === 'doi' ? id : doi;
-          this.getCitationTextByDOI(doiID).then((text) => {
+          this.getFormattedCitationText(doiID, 'doi').then((text) => {
             const formattedText = this.replaceLinkInText(text);
             reference.citation[citationType] = formattedText;
             this.updateCopyContents();
@@ -305,7 +305,7 @@ export default {
             };
           });
         } else if (type === 'pmid') {
-          this.getCitationTextByPMID(id).then((text) => {
+          this.getFormattedCitationText(id, 'pmid').then((text) => {
             const formattedText = this.replaceLinkInText(text);
             reference.citation[citationType] = formattedText;
             this.updateCopyContents();
@@ -434,7 +434,7 @@ export default {
       const esearchAPI = `https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi?db=pubmed&term=${term}&format=json`;
       return await this.fetchData(esearchAPI);
     },
-    getCitationTextByPMID: async function (id) {
+    getFormattedCitationText: async function (id, type) {
       // because 'chicago' and 'ieee' are not in citation.js default styles
       if ((this.citationType !== 'bibtex') && (this.citationType !== 'apa')) {
         const xml = `https://raw.githubusercontent.com/citation-style-language/styles/refs/heads/master/${this.citationType}.csl`;
@@ -444,7 +444,13 @@ export default {
         config.templates.add(this.citationType, template);
       }
 
-      const cite = await Cite.async(id, {forceType: '@pubmed/id'});
+      const option = {};
+
+      if (type === 'pmid') {
+        option['forceType'] = '@pubmed/id';
+      }
+
+      const cite = await Cite.async(id, option);
       const citation = (this.citationType === 'bibtex') ?
         cite.format(this.citationType) :
         cite.format('bibliography', {

From 33e9caee64796381fb1ff8b32762c0a953c568d4 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 20 Jan 2025 11:48:48 +1300
Subject: [PATCH 5/9] Style error reference

---
 src/components/Tooltip/ExternalResourceCard.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/ExternalResourceCard.vue b/src/components/Tooltip/ExternalResourceCard.vue
index 80f4a8b..7353a58 100644
--- a/src/components/Tooltip/ExternalResourceCard.vue
+++ b/src/components/Tooltip/ExternalResourceCard.vue
@@ -21,7 +21,10 @@
       <li
         v-for="reference of pubMedReferences"
         :key="reference.id"
-        :class="{'loading': reference.citation && !reference.citation.error && reference.citation[citationType] === ''}"
+        :class="{
+          'loading': reference.citation && !reference.citation.error && reference.citation[citationType] === '',
+          'error': reference.citation && reference.citation.error
+        }"
       >
         <template v-if="reference.citation">
 
@@ -624,6 +627,13 @@ export default {
       }
     }
 
+    &.error {
+      font-style: italic;
+      color: var(--el-color-info);
+      border: 1px dotted red;
+      background-color: transparent;
+    }
+
     :deep(.copy-clipboard-button) {
       position: absolute;
       bottom: 0.25rem;

From d2e391e100f26c55ea70df124ebef5184764e407 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 21 Jan 2025 11:13:45 +1300
Subject: [PATCH 6/9] Export getCitation method as utilities

---
 src/components/utilities.js | 40 +++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/components/utilities.js b/src/components/utilities.js
index 6266611..350c62b 100644
--- a/src/components/utilities.js
+++ b/src/components/utilities.js
@@ -1,3 +1,9 @@
+import { Cite, plugins } from '@citation-js/core';
+import '@citation-js/plugin-doi';
+import '@citation-js/plugin-csl';
+import '@citation-js/plugin-bibtex';
+import '@citation-js/plugin-pubmed';
+
 const capitalise = term => {
   if (term)
     return term.charAt(0).toUpperCase() + term.slice(1);
@@ -48,8 +54,42 @@ const delay = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms));
 };
 
+/**
+ * @param {id} id - DOI or PMID
+ * @param {type} type - type of the ID, e.g., 'pmid'
+ * @param {format} format - 'apa', 'bibtex', etc.
+ * @returns {citation} formatted citation text
+ */
+const getCitation = async ({id, type, format}) => {
+  // because 'chicago' and 'ieee' are not in citation.js default styles
+  if ((format !== 'bibtex') && (format !== 'apa')) {
+    const xml = `https://raw.githubusercontent.com/citation-style-language/styles/refs/heads/master/${format}.csl`;
+    const response = await fetch(xml);
+    const template = await response.text();
+    let config = plugins.config.get('@csl');
+    config.templates.add(format, template);
+  }
+
+  const option = {};
+
+  if (type === 'pmid') {
+    option['forceType'] = '@pubmed/id';
+  }
+
+  const cite = await Cite.async(id, option);
+  const citation = (format === 'bibtex') ?
+    cite.format(format) :
+    cite.format('bibliography', {
+      format: 'html',
+      template: format || 'apa', // default as 'apa' style
+      lang: 'en-US'
+    })
+  return citation;
+};
+
 export {
   capitalise,
   xmlToJSON,
   delay,
+  getCitation,
 };

From e79deb1a94214c4c44d0b4e2ad64b50f233c7cc1 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 21 Jan 2025 11:14:41 +1300
Subject: [PATCH 7/9] Replace getCitation method from utilities

---
 .../Tooltip/ExternalResourceCard.vue          | 49 ++++++-------------
 1 file changed, 14 insertions(+), 35 deletions(-)

diff --git a/src/components/Tooltip/ExternalResourceCard.vue b/src/components/Tooltip/ExternalResourceCard.vue
index 7353a58..4c032aa 100644
--- a/src/components/Tooltip/ExternalResourceCard.vue
+++ b/src/components/Tooltip/ExternalResourceCard.vue
@@ -68,14 +68,8 @@
 </template>
 
 <script>
-import { Cite, plugins } from '@citation-js/core';
-import '@citation-js/plugin-doi';
-import '@citation-js/plugin-csl';
-import '@citation-js/plugin-bibtex';
-import '@citation-js/plugin-pubmed';
-
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
-import { delay } from '../utilities';
+import { delay, getCitation as getFormattedCitationText } from '../utilities';
 
 const CROSSCITE_API_HOST = 'https://citation.doi.org';
 const CITATION_OPTIONS = [
@@ -101,6 +95,9 @@ const LOADING_DELAY = 600;
 
 export default {
   name: "ExternalResourceCard",
+  components: {
+    CopyToClipboard,
+  },
   props: {
     resources: {
       type: Array,
@@ -297,7 +294,11 @@ export default {
 
         if (type === 'doi' || doi) {
           const doiID = type === 'doi' ? id : doi;
-          this.getFormattedCitationText(doiID, 'doi').then((text) => {
+          getFormattedCitationText({
+            id: doiID,
+            type: 'doi',
+            format: citationType
+          }).then((text) => {
             const formattedText = this.replaceLinkInText(text);
             reference.citation[citationType] = formattedText;
             this.updateCopyContents();
@@ -308,7 +309,11 @@ export default {
             };
           });
         } else if (type === 'pmid') {
-          this.getFormattedCitationText(id, 'pmid').then((text) => {
+          getFormattedCitationText({
+            id: id,
+            type: 'pmid',
+            format: citationType
+          }).then((text) => {
             const formattedText = this.replaceLinkInText(text);
             reference.citation[citationType] = formattedText;
             this.updateCopyContents();
@@ -437,32 +442,6 @@ export default {
       const esearchAPI = `https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi?db=pubmed&term=${term}&format=json`;
       return await this.fetchData(esearchAPI);
     },
-    getFormattedCitationText: async function (id, type) {
-      // because 'chicago' and 'ieee' are not in citation.js default styles
-      if ((this.citationType !== 'bibtex') && (this.citationType !== 'apa')) {
-        const xml = `https://raw.githubusercontent.com/citation-style-language/styles/refs/heads/master/${this.citationType}.csl`;
-        const response = await fetch(xml);
-        const template = await response.text();
-        let config = plugins.config.get('@csl');
-        config.templates.add(this.citationType, template);
-      }
-
-      const option = {};
-
-      if (type === 'pmid') {
-        option['forceType'] = '@pubmed/id';
-      }
-
-      const cite = await Cite.async(id, option);
-      const citation = (this.citationType === 'bibtex') ?
-        cite.format(this.citationType) :
-        cite.format('bibliography', {
-          format: 'html',
-          template: this.citationType,
-          lang: 'en-US'
-        })
-      return citation;
-    },
     getCitationTextByDOI: async function (id) {
       const citationAPI = `${this.crosscite_host}/format?doi=${id}&style=${this.citationType}&lang=en-US`;
       return await this.fetchData(citationAPI, 'text');

From c9ff14f366dc1c50fa79d0155500e73a6bfcf782 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 21 Jan 2025 11:34:29 +1300
Subject: [PATCH 8/9] Reformat codes

---
 src/components/Tooltip/ExternalResourceCard.vue | 8 +++-----
 src/components/utilities.js                     | 8 ++++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Tooltip/ExternalResourceCard.vue b/src/components/Tooltip/ExternalResourceCard.vue
index 4c032aa..24a5094 100644
--- a/src/components/Tooltip/ExternalResourceCard.vue
+++ b/src/components/Tooltip/ExternalResourceCard.vue
@@ -69,7 +69,7 @@
 
 <script>
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
-import { delay, getCitation as getFormattedCitationText } from '../utilities';
+import { delay, getCitationById } from '../utilities';
 
 const CROSSCITE_API_HOST = 'https://citation.doi.org';
 const CITATION_OPTIONS = [
@@ -294,8 +294,7 @@ export default {
 
         if (type === 'doi' || doi) {
           const doiID = type === 'doi' ? id : doi;
-          getFormattedCitationText({
-            id: doiID,
+          getCitationById(doiID, {
             type: 'doi',
             format: citationType
           }).then((text) => {
@@ -309,8 +308,7 @@ export default {
             };
           });
         } else if (type === 'pmid') {
-          getFormattedCitationText({
-            id: id,
+          getCitationById(id, {
             type: 'pmid',
             format: citationType
           }).then((text) => {
diff --git a/src/components/utilities.js b/src/components/utilities.js
index 350c62b..342a008 100644
--- a/src/components/utilities.js
+++ b/src/components/utilities.js
@@ -56,11 +56,11 @@ const delay = (ms) => {
 
 /**
  * @param {id} id - DOI or PMID
- * @param {type} type - type of the ID, e.g., 'pmid'
- * @param {format} format - 'apa', 'bibtex', etc.
+ * @param {options:type} type - type of the ID, e.g., 'pmid'
+ * @param {options:format} format - 'apa' (default), 'chicago', 'ieee', 'bibtex', etc.
  * @returns {citation} formatted citation text
  */
-const getCitation = async ({id, type, format}) => {
+const getCitationById = async (id, { type, format }) => {
   // because 'chicago' and 'ieee' are not in citation.js default styles
   if ((format !== 'bibtex') && (format !== 'apa')) {
     const xml = `https://raw.githubusercontent.com/citation-style-language/styles/refs/heads/master/${format}.csl`;
@@ -91,5 +91,5 @@ export {
   capitalise,
   xmlToJSON,
   delay,
-  getCitation,
+  getCitationById,
 };

From 5a4f44b44df291f969559e7f198ddb25852efc86 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 21 Jan 2025 12:14:23 +1300
Subject: [PATCH 9/9] Add option to choose between doi.org and citaiton.js for
 citation

---
 .../Tooltip/ExternalResourceCard.vue          | 125 ++++++++++--------
 1 file changed, 68 insertions(+), 57 deletions(-)

diff --git a/src/components/Tooltip/ExternalResourceCard.vue b/src/components/Tooltip/ExternalResourceCard.vue
index 24a5094..58d8e80 100644
--- a/src/components/Tooltip/ExternalResourceCard.vue
+++ b/src/components/Tooltip/ExternalResourceCard.vue
@@ -6,7 +6,7 @@
         <CopyToClipboard label="Copy list to clipboard" :content="referecesListContent" />
       </div>
     </div>
-    <div class="citation-tabs" v-if="pubMedReferences.length">
+    <div class="citation-tabs" v-if="useDOIFormatter ? referencesWithDOI : pubMedReferences.length">
       <el-button
         link
         v-for="citationOption of citationOptions"
@@ -103,6 +103,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    }
   },
   data: function () {
     return {
@@ -294,10 +298,14 @@ export default {
 
         if (type === 'doi' || doi) {
           const doiID = type === 'doi' ? id : doi;
-          getCitationById(doiID, {
-            type: 'doi',
-            format: citationType
-          }).then((text) => {
+          const fetchCitationFromAPI = this.useDOIFormatter ?
+            this.getCitationTextByDOI(doiID) :
+            getCitationById(doiID, {
+              type: 'doi',
+              format: citationType
+            });
+
+          fetchCitationFromAPI.then((text) => {
             const formattedText = this.replaceLinkInText(text);
             reference.citation[citationType] = formattedText;
             this.updateCopyContents();
@@ -308,58 +316,61 @@ export default {
             };
           });
         } else if (type === 'pmid') {
-          getCitationById(id, {
-            type: 'pmid',
-            format: citationType
-          }).then((text) => {
-            const formattedText = this.replaceLinkInText(text);
-            reference.citation[citationType] = formattedText;
-            this.updateCopyContents();
-          }).catch((error) => {
-            reference.citation['error'] = {
-              type: citationType,
-              ref: 'pubmed',
-            };
-          });
-          // 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();
-          //       }).catch((error) => {
-          //         reference.citation['error'] = {
-          //           type: citationType,
-          //           ref: 'doi',
-          //         };
-          //       });
-          //     } 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();
-          //     }
-          //   }
-          // }).catch((error) => {
-          //   reference.citation['error'] = {
-          //     type: citationType,
-          //     ref: 'pubmed',
-          //   };
-          // });
+          if (this.useDOIFormatter) {
+            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();
+                  }).catch((error) => {
+                    reference.citation['error'] = {
+                      type: citationType,
+                      ref: 'doi',
+                    };
+                  });
+                } 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();
+                }
+              }
+            }).catch((error) => {
+              reference.citation['error'] = {
+                type: citationType,
+                ref: 'pubmed',
+              };
+            });
+          } else {
+            getCitationById(id, {
+              type: 'pmid',
+              format: citationType
+            }).then((text) => {
+              const formattedText = this.replaceLinkInText(text);
+              reference.citation[citationType] = formattedText;
+              this.updateCopyContents();
+            }).catch((error) => {
+              reference.citation['error'] = {
+                type: citationType,
+                ref: 'pubmed',
+              };
+            });
+          }
         }
       }
     },