@abi-software/map-utilities 1.4.1-beta.1 → 1.4.2

package/package.json

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

@@ -160,10 +160,6 @@ export default {
       type: Array,
       default: [],
     },
-    connectivityFromMap: {
-      type: Object,
-      default: () => null,
-    },
   },
   data: function () {
     return {
@@ -188,19 +184,26 @@ export default {
       connectivityGraphContainer: null,
     };
   },
-  watch: {
-    connectivityFromMap: function (oldVal, newVal) {
-      if (oldVal != newVal) {
-        this.start();
-      }
-    }
-  },
   mounted() {
     this.showSpinner();
     this.updateTooltipContainer();
     this.refreshCache();
     this.loadCacheData();
-    this.start();
+    this.run()
+      .then((res) => {
+        if (res?.success) {
+          this.showGraph(this.entry);
+        } else if (res?.error) {
+          this.loadingError = res.error;
+        } else {
+          this.loadingError = 'Loading error!';
+        }
+        this.hideSpinner();
+      })
+      .catch((error) => {
+        this.loadingError = 'Loading error!';
+        this.hideSpinner();
+      });
   },
   methods: {
     updateTooltipContainer: function () {
@@ -272,23 +275,6 @@ export default {
 
       sessionStorage.setItem('connectivity-graph-expiry', expiry);
     },
-    start: function () {
-      this.run()
-        .then((res) => {
-          if (res?.success) {
-            this.showGraph(this.entry);
-          } else if (res?.error) {
-            this.loadingError = res.error;
-          } else {
-            this.loadingError = 'Loading error!';
-          }
-          this.hideSpinner();
-        })
-        .catch((error) => {
-          this.loadingError = 'Loading error!';
-          this.hideSpinner();
-        });
-    },
     run: async function () {
       if (!this.schemaVersion) {
         this.schemaVersion = await this.getSchemaVersion();
@@ -319,24 +305,8 @@ export default {
     showGraph: async function (neuronPath) {
       const graphCanvas = this.$refs.graphCanvas;
 
-      // Update label data
-      if (this.connectivityFromMap) {
-        this.cacheLabels(this.connectivityFromMap);
-        await this.getCachedTermLabels();
-      }
-
       this.connectivityGraph = new ConnectivityGraph(this.labelCache, graphCanvas);
-      const connectivityInfo = this.knowledgeByPath.get(neuronPath);
-
-      // Update connectivity
-      if (this.connectivityFromMap) {
-        connectivityInfo.axons = this.connectivityFromMap.axons;
-        connectivityInfo.connectivity = this.connectivityFromMap.connectivity;
-        connectivityInfo.dendrites = this.connectivityFromMap.dendrites;
-        connectivityInfo.somas = this.connectivityFromMap.somas;
-      }
-
-      await this.connectivityGraph.addConnectivity(connectivityInfo);
+      await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(neuronPath));
 
       this.connectivityGraph.showConnectivity(graphCanvas);
 

package/src/components/ConnectivityGraph/graph.js

@@ -25,6 +25,43 @@ import cytoscape from 'cytoscape'
 
 //==============================================================================
 
+const inArray = function (ar1, ar2) {
+    if (!ar1 || !ar2) return false
+    let as1 = JSON.stringify(ar1)
+    let as2 = JSON.stringify(ar2)
+    return as1.indexOf(as2) !== -1
+}
+
+const removeDuplicates = function (arrayOfAnything) {
+    if (!arrayOfAnything) return []
+    return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
+      JSON.parse(e)
+    )
+}
+
+const findComponents = function (knowledge, axons, dendrites) {
+    let dnodes = knowledge.connectivity.flat() // get nodes from edgelist
+    let nodes = removeDuplicates(dnodes)
+
+    let found = []
+    let terminal = false
+    nodes.forEach((node) => {
+      terminal = false
+      // Check if the node is an destination or origin (note that they are labelled dendrite and axon as opposed to origin and destination)
+      if (inArray(axons, node)) {
+        terminal = true
+      }
+      if (inArray(dendrites, node)) {
+        terminal = true
+      }
+      if (!terminal) {
+        found.push(node)
+      }
+    })
+
+    return found
+  }
+
 export class ConnectivityGraph extends EventTarget
 {
     cyg = null
@@ -35,6 +72,7 @@ export class ConnectivityGraph extends EventTarget
     somas = []
     labelCache = new Map()
     graphCanvas = null
+    hasPhenotypes = false
 
     constructor(labelCache, graphCanvas)
     {
@@ -46,10 +84,32 @@ export class ConnectivityGraph extends EventTarget
     async addConnectivity(knowledge)
     //=====================================================
     {
-        this.axons = knowledge.axons.map(node => JSON.stringify(node))
-        this.dendrites = knowledge.dendrites.map(node => JSON.stringify(node))
-        if (knowledge.somas?.length) {
-            this.somas = knowledge.somas.map(node => JSON.stringify(node))
+        if (knowledge && knowledge["node-phenotypes"]) {
+            const sourceKey = ["ilxtr:hasSomaLocatedIn"]
+            const destinationKey = ["ilxtr:hasAxonPresynapticElementIn", "ilxtr:hasAxonSensorySubcellularElementIn"]
+
+            const source = []
+            const destination = []
+            sourceKey.forEach((key)=>{
+            source.push(...knowledge["node-phenotypes"][key])
+            })
+            destinationKey.forEach((key)=>{
+            destination.push(...knowledge["node-phenotypes"][key])
+            })
+            const via = findComponents(knowledge, source, destination)
+            this.dendrites = source.map(node => JSON.stringify(node))
+            this.axons = destination.map(node => JSON.stringify(node))
+            if (via?.length) {
+                this.somas = via.map(node => JSON.stringify(node))
+            }
+            this.hasPhenotypes = true
+        } else {
+            this.axons = knowledge.axons.map(node => JSON.stringify(node))
+            this.dendrites = knowledge.dendrites.map(node => JSON.stringify(node))
+            if (knowledge.somas?.length) {
+                this.somas = knowledge.somas.map(node => JSON.stringify(node))
+            }
+            this.hasPhenotypes = false
         }
         if (knowledge.connectivity.length) {
             for (const edge of knowledge.connectivity) {
@@ -158,10 +218,17 @@ export class ConnectivityGraph extends EventTarget
     get roots()
     //===================
     {
-        return [
-            ...this.dendrites,
-            ...this.somas
-        ]
+        if (this.hasPhenotypes) {
+            return [
+                ...this.dendrites,
+            ]
+        } else {
+            return [
+                ...this.dendrites,
+                ...this.somas
+            ]
+        }
+
     }
 
     async graphNode(node)
@@ -180,15 +247,25 @@ export class ConnectivityGraph extends EventTarget
             id,
             label: label.join('\n')
         }
-        if (this.axons.includes(id)) {
-            if (this.dendrites.includes(id) || this.somas.includes(id)) {
-                result['both-a-d'] = true
-            } else {
+        if (this.hasPhenotypes) {
+            if (this.axons.includes(id)) {
                 result['axon'] = true
+            } else if (this.dendrites.includes(id)) {
+                result['dendrite'] = true
+            } else {
+                result['somas'] = true
+            }
+        } else {
+            if (this.axons.includes(id)) {
+                if (this.dendrites.includes(id) || this.somas.includes(id)) {
+                    result['somas'] = true
+                } else {
+                    result['axon'] = true
+                }
+            } else if (this.dendrites.includes(id) || this.somas.includes(id)) {
+                result['dendrite'] = true
+    
             }
-        } else if (this.dendrites.includes(id) || this.somas.includes(id)) {
-            result['dendrite'] = true
-
         }
         return result
     }
@@ -241,7 +318,7 @@ const GRAPH_STYLE = [
         }
     },
     {
-        'selector': 'node[both-a-d]',
+        'selector': 'node[somas]',
         'style': {
             // 'background-color': 'gray',
             'shape': 'round-rectangle',

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="useDOIFormatter ? referencesWithDOI : pubMedReferences.length">
+    <div class="citation-tabs" v-if="referencesWithDOI">
       <el-button
         link
         v-for="citationOption of citationOptions"
@@ -102,7 +102,7 @@
 
 <script>
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard.vue';
-import { delay, getCitationById } from '../utilities';
+import { delay } from '../utilities';
 
 const CROSSCITE_API_HOST = 'https://citation.doi.org';
 const CITATION_OPTIONS = [
@@ -128,18 +128,11 @@ const LOADING_DELAY = 600;
 
 export default {
   name: "ExternalResourceCard",
-  components: {
-    CopyToClipboard,
-  },
   props: {
     resources: {
       type: Array,
       default: () => [],
     },
-    useDOIFormatter: {
-      type: Boolean,
-      default: true,
-    }
   },
   data: function () {
     return {
@@ -345,14 +338,7 @@ export default {
 
         if (type === 'doi' || doi) {
           const doiID = type === 'doi' ? id : doi;
-          const fetchCitationFromAPI = this.useDOIFormatter ?
-            this.getCitationTextByDOI(doiID) :
-            getCitationById(doiID, {
-              type: 'doi',
-              format: citationType
-            });
-
-          fetchCitationFromAPI.then((text) => {
+          this.getCitationTextByDOI(doiID).then((text) => {
             const formattedText = this.replaceLinkInText(text);
             reference.citation[citationType] = formattedText;
             this.updateCopyContents();
@@ -363,61 +349,45 @@ export default {
             };
           });
         } else if (type === 'pmid') {
-          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}`,
-                  });
+          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',
-              };
-            });
-          }
+            }
+          }).catch((error) => {
+            reference.citation['error'] = {
+              type: citationType,
+              ref: 'pubmed',
+            };
+          });
         }
       }
     },

package/src/components/Tooltip/ProvenancePopup.vue

@@ -171,11 +171,6 @@
 </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) => {
@@ -191,11 +186,6 @@ const capitalise = function (str) {
 
 export default {
   name: "ProvenancePopup",
-  components: {
-    ElIconArrowUp,
-    ElIconArrowDown,
-    ElIconWarning,
-  },
   props: {
     tooltipEntry: {
       type: Object,

package/src/components/index.js

@@ -1,7 +1,6 @@
 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";
@@ -13,7 +12,6 @@ export {
   AnnotationPopup,
   CreateTooltipContent,
   ConnectivityGraph,
-  ConnectivityList,
   CopyToClipboard,
   DrawToolbar,
   HelpModeDialog,

package/src/components/utilities.js

@@ -1,9 +1,3 @@
-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);
@@ -54,42 +48,8 @@ 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

@@ -10,7 +10,6 @@ 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']