@abi-software/map-utilities 1.3.2 → 1.3.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.3.2",
+  "version": "1.3.3-beta.1",
   "files": [
     "dist/*",
     "src/*",
@@ -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",

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="connectivity-graph" v-loading="loading" ref="connectivityGraphRef">
 
+    <div class="sckan-version">
+      SCKAN Release: {{ this.selectedSource }}
+    </div>
+
     <div ref="graphCanvas" class="graph-canvas"></div>
 
     <div class="control-panel control-panel-tools">
@@ -149,6 +153,10 @@ export default {
       type: String,
       default: '',
     },
+    sckanVersion: {
+      type: String,
+      default: '',
+    },
     selectedConnectivityData: {
       type: Array,
       default: [],
@@ -196,6 +204,12 @@ export default {
       if (selectedSource) {
         this.selectedSource = selectedSource;
       }
+      // Update knowledge source if SCKAN version is provided
+      if (this.sckanVersion) {
+        this.selectedSource = this.sckanVersion;
+        sessionStorage.setItem('connectivity-graph-source', this.selectedSource);
+        this.updateCacheExpiry();
+      }
       if (pathList) {
         this.pathList = JSON.parse(pathList);
       }
@@ -207,6 +221,13 @@ export default {
         this.schemaVersion = schemaVersion;
       }
     },
+    isValidKnowledgeSource: function () {
+      const selectedSource = sessionStorage.getItem('connectivity-graph-source');
+      if (this.sckanVersion && (this.sckanVersion !== selectedSource)) {
+        return false;
+      }
+      return true;
+    },
     removeAllCacheData: function () {
       const keys = [
         'connectivity-graph-expiry',
@@ -222,8 +243,9 @@ export default {
     refreshCache: function () {
       const expiry = sessionStorage.getItem('connectivity-graph-expiry');
       const now = new Date();
+      const validKnowledgeSource = this.isValidKnowledgeSource();
 
-      if (now.getTime() > expiry) {
+      if (now.getTime() > expiry || !validKnowledgeSource) {
         this.removeAllCacheData();
       }
     },
@@ -641,6 +663,16 @@ export default {
   white-space: nowrap;
   width: 1px;
 }
+
+.sckan-version {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin-bottom: -22px;
+  font-size: 12px;
+  font-style: italic;
+  color: gray;
+}
 </style>
 
 <style lang="scss">

package/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="useDOIFormatter ? referencesWithDOI : pubMedReferences.length">
       <el-button
         link
         v-for="citationOption of citationOptions"
@@ -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">
 
@@ -66,7 +69,7 @@
 
 <script>
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
-import { delay } from '../utilities';
+import { delay, getCitationById } from '../utilities';
 
 const CROSSCITE_API_HOST = 'https://citation.doi.org';
 const CITATION_OPTIONS = [
@@ -92,11 +95,18 @@ const LOADING_DELAY = 600;
 
 export default {
   name: "ExternalResourceCard",
+  components: {
+    CopyToClipboard,
+  },
   props: {
     resources: {
       type: Array,
       default: () => [],
     },
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    }
   },
   data: function () {
     return {
@@ -288,7 +298,14 @@ export default {
 
         if (type === 'doi' || doi) {
           const doiID = type === 'doi' ? id : doi;
-          this.getCitationTextByDOI(doiID).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();
@@ -299,45 +316,61 @@ 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);
+          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: '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',
-            };
-          });
+            }).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',
+              };
+            });
+          }
         }
       }
     },
@@ -582,6 +615,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;

package/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 {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 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`;
+    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,
+  getCitationById,
 };

package/src/components.d.ts

@@ -14,9 +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']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -30,7 +28,6 @@ declare module 'vue' {
     ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
     ElIconLock: typeof import('@element-plus/icons-vue')['Lock']
     ElIconUnlock: typeof import('@element-plus/icons-vue')['Unlock']
-    ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconZoomIn: typeof import('@element-plus/icons-vue')['ZoomIn']
     ElIconZoomOut: typeof import('@element-plus/icons-vue')['ZoomOut']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -40,7 +37,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ExternalResourceCard: typeof import('./components/Tooltip/ExternalResourceCard.vue')['default']
     HelpModeDialog: typeof import('./components/HelpModeDialog/HelpModeDialog.vue')['default']
     ProvenancePopup: typeof import('./components/Tooltip/ProvenancePopup.vue')['default']