@abi-software/map-utilities 1.4.2-beta.0 → 1.4.3-beta.0

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"
@@ -102,7 +102,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 = [
@@ -128,11 +128,18 @@ const LOADING_DELAY = 600;
 
 export default {
   name: "ExternalResourceCard",
+  components: {
+    CopyToClipboard,
+  },
   props: {
     resources: {
       type: Array,
       default: () => [],
     },
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    }
   },
   data: function () {
     return {
@@ -338,7 +345,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();
@@ -349,45 +363,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',
+              };
+            });
+          }
         }
       }
     },

package/src/components/Tooltip/ProvenancePopup.vue

@@ -51,118 +51,18 @@
     </div>
     <transition name="slide-fade">
       <div v-show="showDetails" class="content-container scrollbar">
-        {{ tooltipEntry.paths }}
-        <div v-if="tooltipEntry.origins && tooltipEntry.origins.length > 0" class="block">
-          <div class="attribute-title-container">
-            <span class="attribute-title">Origin</span>
-            <el-popover
-              width="250"
-              trigger="hover"
-              :teleported="false"
-              popper-class="popover-origin-help"
-            >
-              <template #reference>
-                <el-icon class="info"><el-icon-warning /></el-icon>
-              </template>
-              <span style="word-break: keep-all">
-                <i>Origin</i> {{ originDescription }}
-              </span>
-            </el-popover>
-          </div>
-          <div
-            v-for="(origin, i) in tooltipEntry.origins"
-            class="attribute-content"
-            :origin-item-label="origin"
-            :key="origin"
-          >
-            {{ capitalise(origin) }}
-            <div v-if="i != tooltipEntry.origins.length - 1" class="separator"></div>
-          </div>
-          <el-button
-            v-show="
-              tooltipEntry.originsWithDatasets && tooltipEntry.originsWithDatasets.length > 0
-            "
-            class="button"
-            id="open-dendrites-button"
-            @click="openDendrites"
-          >
-            Explore origin data
-          </el-button>
-        </div>
-        <div
-          v-if="tooltipEntry.components && tooltipEntry.components.length > 0"
-          class="block"
-        >
-          <div class="attribute-title-container">
-            <div class="attribute-title">Components</div>
-          </div>
-          <div
-            v-for="(component, i) in tooltipEntry.components"
-            class="attribute-content"
-            :component-item-label="component"
-            :key="component"
-          >
-            {{ capitalise(component) }}
-            <div
-              v-if="i != tooltipEntry.components.length - 1"
-              class="separator"
-            ></div>
-          </div>
-        </div>
-        <div
-          v-if="tooltipEntry.destinations && tooltipEntry.destinations.length > 0"
-          class="block"
-        >
-          <div class="attribute-title-container">
-            <span class="attribute-title">Destination</span>
-            <el-popover
-              width="250"
-              trigger="hover"
-              :teleported="false"
-              popper-class="popover-origin-help"
-            >
-              <template #reference>
-                <el-icon class="info"><el-icon-warning /></el-icon>
-              </template>
-              <span style="word-break: keep-all">
-                <i>Destination</i> is where the axons terminate
-              </span>
-            </el-popover>
-          </div>
-          <div
-            v-for="(destination, i) in tooltipEntry.destinations"
-            class="attribute-content"
-            :destination-item-label="destination"
-            :key="destination"
-          >
-            {{ capitalise(destination) }}
-            <div
-              v-if="i != tooltipEntry.destinations.length - 1"
-              class="separator"
-            ></div>
-          </div>
-          <el-button
-            v-show="
-              tooltipEntry.destinationsWithDatasets &&
-              tooltipEntry.destinationsWithDatasets.length > 0
-            "
-            class="button"
-            @click="openAxons"
-          >
-            Explore destination data
-          </el-button>
-        </div>
-
-        <el-button
-          v-show="
-            tooltipEntry.componentsWithDatasets &&
-            tooltipEntry.componentsWithDatasets.length > 0
-          "
-          class="button"
-          @click="openAll"
-        >
-          Search for data on components
-        </el-button>
+        <connectivity-list
+          :key="tooltipEntry.featureId[0]"
+          :entry="tooltipEntry"
+          :origins="origins"
+          :components="components"
+          :destinations="destinations"
+          :originsWithDatasets="originsWithDatasets"
+          :componentsWithDatasets="componentsWithDatasets"
+          :destinationsWithDatasets="destinationsWithDatasets"
+          :availableAnatomyFacets="availableAnatomyFacets"
+          @connectivity-action-click="onConnectivityActionClick"
+        ></connectivity-list>
 
         <external-resource-card :resources="resources" v-if="resources.length"></external-resource-card>
       </div>
@@ -171,21 +71,25 @@
 </template>
 
 <script>
+import {
+  ArrowUp as ElIconArrowUp,
+  ArrowDown as ElIconArrowDown,
+  Warning as ElIconWarning,
+} from '@element-plus/icons-vue'
 import EventBus from "../EventBus.js";
-
-const titleCase = (str) => {
-  return str.replace(/\w\S*/g, (t) => {
-    return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();
-  });
-};
-
-const capitalise = function (str) {
-  if (str) return str.charAt(0).toUpperCase() + str.slice(1);
-  return "";
-};
+import ConnectivityList from '../ConnectivityList/ConnectivityList.vue';
+import ExternalResourceCard from './ExternalResourceCard.vue';
+import { capitalise, titleCase } from '../utilities.js';
 
 export default {
   name: "ProvenancePopup",
+  components: {
+    ElIconArrowUp,
+    ElIconArrowDown,
+    ElIconWarning,
+    ConnectivityList,
+    ExternalResourceCard,
+  },
   props: {
     tooltipEntry: {
       type: Object,
@@ -203,20 +107,30 @@ export default {
   inject: ["getFeaturesAlert"],
   data: function () {
     return {
-      controller: undefined,
-      activeSpecies: undefined,
-      pubmedSearchUrl: "",
       loading: false,
-      showToolip: false,
       showDetails: false,
       originDescriptions: {
         motor: "is the location of the initial cell body of the circuit",
         sensory: "is the location of the initial cell body in the PNS circuit",
       },
+      origins: [],
+      components: [],
+      destinations: [],
+      originsWithDatasets: [],
       componentsWithDatasets: [],
-      uberons: [{ id: undefined, name: undefined }],
+      destinationsWithDatasets: [],
+      availableAnatomyFacets: [],
     };
   },
+  watch: {
+    tooltipEntry: {
+      handler: function (val) {
+        this.updateConnectionsData(val);
+      },
+      immediate: true,
+      deep: true,
+    }
+  },
   computed: {
     featuresAlert() {
       return this.getFeaturesAlert();
@@ -249,6 +163,10 @@ export default {
       return text;
     },
   },
+  mounted: function () {
+    this.loadAvailableAnatomyFacets();
+    this.updateConnectionsData(this.tooltipEntry);
+  },
   methods: {
     titleCase: function (title) {
       return titleCase(title);
@@ -256,29 +174,25 @@ export default {
     capitalise: function (text) {
       return capitalise(text);
     },
-    openUrl: function (url) {
-      window.open(url, "_blank");
+    onConnectivityActionClick: function (data) {
+      EventBus.emit('onActionClick', data);
     },
-    openAll: function () {
-      EventBus.emit("onActionClick", {
-        type: "Facets",
-        labels: this.tooltipEntry.componentsWithDatasets.map((a) => a.name),
-      });
-    },
-    openAxons: function () {
-      EventBus.emit("onActionClick", {
-        type: "Facets",
-        labels: this.tooltipEntry.destinationsWithDatasets.map((a) => a.name),
-      });
-    },
-    openDendrites: function () {
-      EventBus.emit("onActionClick", {
-        type: "Facets",
-        labels: this.tooltipEntry.originsWithDatasets.map((a) => a.name),
-      });
+    // Load available anatomy facets from the local storage if available.
+    // The data is from Algolia in Sidebar.
+    loadAvailableAnatomyFacets: function () {
+      const availableAnatomyFacets = localStorage.getItem('available-anatomy-facets');
+
+      if (availableAnatomyFacets) {
+        this.availableAnatomyFacets = JSON.parse(availableAnatomyFacets);
+      }
     },
-    pubmedSearchUrlUpdate: function (val) {
-      this.pubmedSearchUrl = val;
+    updateConnectionsData: function (source) {
+      this.origins = source.origins;
+      this.components = source.components;
+      this.destinations = source.destinations;
+      this.originsWithDatasets = source.originsWithDatasets;
+      this.componentsWithDatasets = source.componentsWithDatasets;
+      this.destinationsWithDatasets = source.destinationsWithDatasets;
     },
   },
 };
@@ -491,6 +405,10 @@ export default {
   .block {
     padding-top: 0.5em;
   }
+
+  .connectivity-list {
+    padding-top: 1rem;
+  }
 }
 
 .scrollbar::-webkit-scrollbar-track {

package/src/components/index.js

@@ -1,6 +1,7 @@
 import AnnotationPopup from "./Tooltip/AnnotationPopup.vue";
 import CreateTooltipContent from "./Tooltip/CreateTooltipContent.vue";
 import ConnectivityGraph from "./ConnectivityGraph/ConnectivityGraph.vue";
+import ConnectivityList from "./ConnectivityList/ConnectivityList.vue";
 import CopyToClipboard from "./CopyToClipboard/CopyToClipboard.vue";
 import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
 import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
@@ -12,6 +13,7 @@ export {
   AnnotationPopup,
   CreateTooltipContent,
   ConnectivityGraph,
+  ConnectivityList,
   CopyToClipboard,
   DrawToolbar,
   HelpModeDialog,

package/src/components/utilities.js

@@ -1,9 +1,21 @@
+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);
   return term;
 };
 
+const titleCase = (str) => {
+  return str.replace(/\w\S*/g, (t) => {
+    return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();
+  });
+};
+
 const convertNodeToObject = (node) => {
   const obj = {};
 
@@ -48,8 +60,43 @@ 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,
+  titleCase,
   xmlToJSON,
   delay,
+  getCitationById,
 };

package/src/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     AnnotationPopup: typeof import('./components/Tooltip/AnnotationPopup.vue')['default']
     ConnectionDialog: typeof import('./components/DrawToolbar/ConnectionDialog.vue')['default']
     ConnectivityGraph: typeof import('./components/ConnectivityGraph/ConnectivityGraph.vue')['default']
+    ConnectivityList: typeof import('./components/ConnectivityList/ConnectivityList.vue')['default']
     CopyToClipboard: typeof import('./components/CopyToClipboard/CopyToClipboard.vue')['default']
     CreateTooltipContent: typeof import('./components/Tooltip/CreateTooltipContent.vue')['default']
     DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']