@abi-software/flatmapvuer 0.4.0 → 0.4.1-beta.1

package/src/components/Tooltip.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="tooltip-container">
-     <el-main v-if="content" class="main" v-loading="loading">
-      <div class="block" v-if="content.title">
-        <span class="title">{{capitalise(content.title)}}</span>
+     <el-main v-if="entry" class="main" v-loading="loading">
+      <div class="block" v-if="entry.title">
+        <span class="title">{{capitalise(entry.title)}}</span>
       </div>
       <div class="block" v-else>
-        <span class="title">{{content.featureId}}</span>
+        <span class="title">{{entry.featureId}}</span>
       </div>
       <div class="content-container scrollbar">
-        {{content.paths}}
-        <div v-if="origins && origins.length > 0" class="block">
+        {{entry.paths}}
+        <div v-if="entry.origins && entry.origins.length > 0" class="block">
           <div>
             <span class="attribute-title">Origin</span>
             <el-popover
@@ -24,22 +24,22 @@
             </span>
             </el-popover>
           </div>
-          <div v-for="(origin, i) in origins" class="attribute-content"  :key="origin">
+          <div v-for="(origin, i) in entry.origins" class="attribute-content"  :key="origin">
             {{ capitalise(origin) }}
-            <div v-if="i != origins.length - 1" class="seperator"></div>
+            <div v-if="i != entry.origins.length - 1" class="seperator"></div>
           </div>
-          <el-button v-show="originsWithDatasets.length > 0" class="button" @click="openDendrites">
+          <el-button v-show="entry.originsWithDatasets && entry.originsWithDatasets.length > 0" class="button" @click="openDendrites">
             Explore origin data
           </el-button>
         </div>
-        <div v-if="components && components.length > 0" class="block">
+        <div v-if="entry.components && entry.components.length > 0" class="block">
           <div class="attribute-title">Components</div>
-          <div v-for="(component, i) in components" class="attribute-content"  :key="component">
+          <div v-for="(component, i) in entry.components" class="attribute-content"  :key="component">
             {{ capitalise(component) }}
-            <div v-if="i != components.length - 1" class="seperator"></div>
+            <div v-if="i != entry.components.length - 1" class="seperator"></div>
           </div>
         </div>
-        <div v-if="destinations && destinations.length > 0" class="block">
+        <div v-if="entry.destinations && entry.destinations.length > 0" class="block">
           <div>
             <span class="attribute-title">Destination</span>
             <el-popover
@@ -54,24 +54,21 @@
             </span>
             </el-popover>
           </div>
-          <div v-for="(destination, i) in destinations" class="attribute-content"  :key="destination">
+          <div v-for="(destination, i) in entry.destinations" class="attribute-content"  :key="destination">
             {{ capitalise(destination) }}
-            <div v-if="i != destinations.length - 1" class="seperator"></div>
+            <div v-if="i != entry.destinations.length - 1" class="seperator"></div>
           </div>
-          <el-button v-show="destinationsWithDatasets.length > 0" class="button" @click="openAxons">
+          <el-button v-show="entry.destinationsWithDatasets && entry.destinationsWithDatasets.length > 0" class="button" @click="openAxons">
             Explore destination data
           </el-button>
         </div>
 
-        <el-button v-show="componentsWithDatasets.length > 0" class="button" @click="openAll">
+        <el-button v-show="entry.componentsWithDatasets && entry.componentsWithDatasets.length > 0" class="button" @click="openAll">
           Search for data on components
         </el-button>
 
-        <!-- pubmed-viewer is just used for processing pubmed requests (no display) -->
-        <pubmed-viewer v-if="content.featureIds" v-show="false" :entry="content" @pubmedSearchUrl="pubmedSearchUrlUpdate"/>
-        <el-button  v-if="pubmedSearchUrl != ''" class="button" icon="el-icon-notebook-2" @click="openUrl(pubmedSearchUrl)">
-          Open publications in pubmed
-        </el-button>
+        <external-resource-card :resources="resources"></external-resource-card>
+
       </div>
     </el-main>
   </div>
@@ -97,25 +94,13 @@ Vue.use(Header);
 Vue.use(Icon);
 Vue.use(Main);
 
-// pubmedviewer is currently not in use, but still under review so not ready to delete yet
-import PubmedViewer from './PubmedViewer.vue'
 import EventBus from './EventBus'
+import ExternalResourceCard from './ExternalResourceCard.vue';
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => { return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase() });
 }
 
-const inArray = function(ar1, ar2){
-    let as1 = JSON.stringify(ar1)
-    let as2 = JSON.stringify(ar2)
-    return as1.indexOf(as2) !== -1
-}
-
-// remove duplicates by stringifying the objects
-const removeDuplicates = function(arrayOfAnything){
-  return [...new Set(arrayOfAnything.map(e => JSON.stringify(e)))].map(e => JSON.parse(e)) 
-}
-
 const capitalise = function(str){
   if (str)
     return str.charAt(0).toUpperCase() + str.slice(1)
@@ -123,24 +108,34 @@ const capitalise = function(str){
 }
 
 export default {
-  components: { PubmedViewer },
+  components: { ExternalResourceCard },
   name: "Tooltip",
   props: { 
     visible: {
       type: Boolean,
       default: false
     },
-    content: {
+    entry: {
       type: Object,
-      default: undefined
+      default: () => ({
+        destinations: [], 
+        origins: [],
+        components: [],
+        destinationsWithDatasets: [],
+        originsWithDatasets: [],
+        componentsWithDatasets: [],
+        resource: undefined
+      })
     },
   },
   data: function() {
     return {
+      controller: undefined,
       activeSpecies: undefined,
       appendToBody: false,
       pubmedSearchUrl: '',
       loading: false,
+      showToolip: false,
       destinations: [],
       origins: [],
       components: [],
@@ -154,20 +149,16 @@ export default {
       uberons: [{id: undefined, name: undefined}]
     };
   },
-  inject: ['sparcAPI', 'flatmapAPI'],
-  watch: {
-    'content.featureIds': {
-      handler: function(){
-        this.pathwayQuery(this.content.featureIds)
-      }
-    }
-  },
-  mounted: function(){
-    this.getOrganCuries()
-  },
   computed: {
+    resources: function(){
+      let resources = []
+      if(this.entry && this.entry.hyperlinks){
+        resources = this.entry.hyperlinks
+      }
+      return resources
+    },
     originDescription: function(){
-      if(this.content && this.content.title && this.content.title.toLowerCase().includes('motor')){
+      if(this.entry && this.entry.title && this.entry.title.toLowerCase().includes('motor')){
         return this.originDescriptions.motor
       } else {
         return this.originDescriptions.sensory
@@ -202,186 +193,6 @@ export default {
     pubmedSearchUrlUpdate: function (val){
       this.pubmedSearchUrl = val
     },
-    findAllIdsFromConnectivity(connectivity){
-      let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
-      let nodes = [...new Set(dnodes)] // remove duplicates
-      let found = []
-      nodes.forEach(n=>{
-        if (Array.isArray(n)){
-          found.push(n.flat())
-        } else {
-          found.push(n)
-        }
-      })
-      return [... new Set(found.flat())]
-    },
-    flattenConntectivity(connectivity){
-      let dnodes = connectivity.flat() // get nodes from edgelist
-      let nodes = [...new Set(dnodes)] // remove duplicates
-      let found = []
-      nodes.forEach(n=>{
-        if (Array.isArray(n)){
-          found.push(n.flat())
-        } else {
-          found.push(n)
-        }
-      })
-      return found.flat()
-    },
-    findComponents: function(connectivity){
-      let dnodes = connectivity.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(connectivity.axons,node)){
-          terminal = true
-        }
-        if(inArray(connectivity.dendrites, node)){
-          terminal = true
-        }
-        if (!terminal){
-          found.push(node)
-        }
-      })
-
-      return found
-    },
-    getOrganCuries: function(){
-      fetch(`${this.sparcAPI}get-organ-curies/`)
-        .then(response=>response.json())
-        .then(data=>{
-          this.uberons = data.uberon.array
-        })
-    },
-    buildConnectivitySqlStatement: function(keastIds) {
-      let sql = 'select knowledge from knowledge where entity in ('
-      if (keastIds.length === 1) {
-        sql += `'${keastIds[0]}')`
-      } else if (keastIds.length > 1) {
-        for (let i in keastIds) {
-          sql += `'${keastIds[i]}'${i >= keastIds.length - 1 ? ')' : ','} `
-        }
-      }
-      return sql
-    },
-    buildLabelSqlStatement: function(uberons) {
-      let sql = 'select entity, label from labels where entity in ('
-      if (uberons.length === 1) {
-        sql += `'${uberons[0]}')`
-      } else if (uberons.length > 1) {
-        for (let i in uberons) {
-          sql += `'${uberons[i]}'${i >= uberons.length - 1 ? ')' : ','} `
-        }
-      }
-      return sql
-    },
-    createLabelLookup: function(uberons) {
-      return new Promise(resolve=> {
-        let uberonMap = {}
-        const data = { sql: this.buildLabelSqlStatement(uberons)}
-        fetch(`${this.flatmapAPI}knowledge/query/`, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(data),
-          })
-          .then(response => response.json())
-          .then(payload => {
-            const entity = payload.keys.indexOf("entity");
-            const label = payload.keys.indexOf("label");
-            if (entity > -1 && label > -1) {
-              payload.values.forEach(pair => {
-                uberonMap[pair[entity]] = pair[label];
-              });
-            }
-            resolve(uberonMap)
-          })
-      })
-    },
-    createComponentsLabelList: function(components, lookUp){
-      let labelList = []
-      components.forEach(n=>{
-        labelList.push(this.createLabelFromNeuralNode(n[0]), lookUp)
-        if (n.length === 2){
-          labelList.push(this.createLabelFromNeuralNode(n[1]), lookUp)
-        }
-      })
-      return labelList
-    },
-    createLabelFromNeuralNode: function(node, lookUp){
-      let label = lookUp[node[0]]
-      if (node.length === 2 && node[1].length > 0){
-        node[1].forEach(n=>{
-          if (lookUp[n] == undefined){
-            label += `, ${n}` 
-          } else {
-            label += `, ${lookUp[n]}`
-          }
-        })
-      }
-      return label
-    },
-    processConnectivity(connectivity){
-      // Filter the origin and destinations from components
-      let components = this.findComponents(connectivity)
-
-      // Remove duplicates
-      let axons = removeDuplicates(connectivity.axons)
-      let dendrites = removeDuplicates(connectivity.dendrites)
-
-      // Create list of ids to get labels for
-      let conIds = this.findAllIdsFromConnectivity(connectivity)  
-
-      // Create readable labels from the nodes. Setting this to 'this.origins' updates the display
-      this.createLabelLookup(conIds).then(lookUp=>{
-        this.destinations = axons.map(a=>this.createLabelFromNeuralNode(a,lookUp))
-        this.origins = dendrites.map(d=>this.createLabelFromNeuralNode(d,lookUp))
-        this.components = components.map(c=>this.createLabelFromNeuralNode(c, lookUp))
-      })
-
-      this.flattenAndFindDatasets(components, axons, dendrites)
-    },
-    flattenAndFindDatasets(components, axons, dendrites){
-      
-      // process the nodes for finding datasets (Note this is not critical to the tooltip, only for the 'search on components' button)
-      let componentsFlat = this.flattenConntectivity(components)
-      let axonsFlat = this.flattenConntectivity(axons)
-      let dendritesFlat = this.flattenConntectivity(dendrites)
-
-      // Filter for the anatomy which is annotated on datasets
-      this.destinationsWithDatasets = this.uberons.filter(ub => axonsFlat.indexOf(ub.id) !== -1)
-      this.originsWithDatasets = this.uberons.filter(ub => dendritesFlat.indexOf(ub.id) !== -1)
-      this.componentsWithDatasets = this.uberons.filter(ub => componentsFlat.indexOf(ub.id) !== -1)
-    },
-    pathwayQuery: function(keastIds){
-      this.destinations = []
-      this.origins = []
-      this.components = []
-      this.loading = true
-      if (!keastIds || keastIds.length == 0) return
-      const data = { sql: this.buildConnectivitySqlStatement(keastIds)};
-      fetch(`${this.flatmapAPI}knowledge/query/`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-      })
-      .then(response => response.json())
-      .then(data => {
-        let connectivity = JSON.parse(data.values[0][0])
-        this.processConnectivity(connectivity)
-        this.loading = false
-      })
-      .catch((error) => {
-        console.error('Error:', error);
-      })
-    }
   }
 };
 </script>
@@ -566,7 +377,7 @@ export default {
 .content-container {
   overflow-y: scroll;
   scrollbar-width: thin !important;
-  height: 200px;
+  max-height: 240px;
 }
 
 .scrollbar::-webkit-scrollbar-track {

package/src/services/flatmapQueries.js

@@ -0,0 +1,328 @@
+/* eslint-disable no-alert, no-console */
+// remove duplicates by stringifying the objects
+const removeDuplicates = function (arrayOfAnything) {
+  return [...new Set(arrayOfAnything.map(e => JSON.stringify(e)))].map(e => JSON.parse(e))
+}
+
+const inArray = function (ar1, ar2) {
+  let as1 = JSON.stringify(ar1)
+  let as2 = JSON.stringify(ar2)
+  return as1.indexOf(as2) !== -1
+}
+
+exports.FlatmapQueries = function(sparcApi, flatmapApi) {
+  this.sparcApi = sparcApi
+  this.flatmapApi = flatmapApi
+  this.destinations = []
+  this.origins = []
+  this.components = []
+  this.uberons = []
+  this.urls = []
+  this.controller = undefined
+
+  this.createTooltipData = (eventData) => {
+    let tooltipData = {
+      destinations: this.destinations,
+      origins: this.origins,
+      components: this.components,
+      destinationsWithDatasets: this.destinationsWithDatasets,
+      originsWithDatasets: this.originsWithDatasets,
+      componentsWithDatasets: this.componentsWithDatasets,
+      title: eventData.label,
+      featureId: eventData.resource,
+      hyperlinks: eventData.feature.hyperlinks ? eventData.feature.hyperlinks : this.urls.map(url => ({ url: url, id: "pubmed" })),
+    }
+    return tooltipData
+  }
+
+  const getOrganCuries = () => {
+    return new Promise(resolve => {
+      fetch(`${this.sparcAPI}get-organ-curies/`)
+        .then(response => response.json())
+        .then(data => {
+          resolve(data.uberon.array)
+        })
+    })
+  }
+
+  const createLabelLookup = (uberons) => {
+    return new Promise(resolve => {
+      let uberonMap = {}
+      const data = { sql: buildLabelSqlStatement(uberons) }
+      fetch(`${this.flatmapApi}knowledge/query/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+        .then(response => response.json())
+        .then(payload => {
+          const entity = payload.keys.indexOf("entity");
+          const label = payload.keys.indexOf("label");
+          if (entity > -1 && label > -1) {
+            payload.values.forEach(pair => {
+              uberonMap[pair[entity]] = pair[label];
+            });
+          }
+          resolve(uberonMap)
+        })
+    })
+  }
+
+
+  getOrganCuries().then(uberons => {
+    this.uberons = uberons
+    createLabelLookup(uberons).then(lookUp => {
+      this.lookUp = lookUp
+    })
+  })
+
+  const buildConnectivitySqlStatement = (keastIds) =>{
+    let sql = 'select knowledge from knowledge where entity in ('
+    if (keastIds.length === 1) {
+      sql += `'${keastIds[0]}')`
+    } else if (keastIds.length > 1) {
+      for (let i in keastIds) {
+        sql += `'${keastIds[i]}'${i >= keastIds.length - 1 ? ')' : ','} `
+      }
+    }
+    return sql
+  }
+
+  const buildLabelSqlStatement = (uberons) => {
+    let sql = 'select entity, label from labels where entity in ('
+    if (uberons.length === 1) {
+      sql += `'${uberons[0]}')`
+    } else if (uberons.length > 1) {
+      for (let i in uberons) {
+        sql += `'${uberons[i]}'${i >= uberons.length - 1 ? ')' : ','} `
+      }
+    }
+    return sql
+  }
+
+  const findAllIdsFromConnectivity = (connectivity) => {
+    let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
+    let nodes = [...new Set(dnodes)] // remove duplicates
+    let found = []
+    nodes.forEach(n => {
+      if (Array.isArray(n)) {
+        found.push(n.flat())
+      } else {
+        found.push(n)
+      }
+    })
+    return [... new Set(found.flat())]
+  }
+
+  this.retrieveFlatmapKnowledgeForEvent = async (eventData) =>{
+    // check if there is an existing query
+    if (this.controller) this.controller.abort();
+
+    // set up the abort controller
+    this.controller = new AbortController();
+    const signal = this.controller.signal;
+
+    const keastIds = eventData.resource
+    this.destinations = []
+    this.origins = []
+    this.components = []
+    if (!keastIds || keastIds.length == 0) return
+    const data = { sql: buildConnectivitySqlStatement(keastIds) };
+    let prom1 = new Promise(resolve => {
+      fetch(`${this.flatmapApi}knowledge/query/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+        signal: signal
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (connectivityExists(data)) {
+            let connectivity = JSON.parse(data.values[0][0])
+            processConnectivity(connectivity).then(() => {
+              resolve(true)
+            })
+          } else {
+            console.log('No connectivity data found')
+            resolve(true)
+          }
+        })
+        .catch((error) => {
+          console.error('Error:', error);
+          resolve(false)
+        })
+    })
+    let prom2 = pubmedQueryOnIds(eventData)
+    return await Promise.all([prom1, prom2])
+
+  }
+
+  const connectivityExists = (data) => {
+    if (data.values && data.values.length > 0 && JSON.parse(data.values[0][0]).connectivity && JSON.parse(data.values[0][0]).connectivity.length > 0) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  const createLabelFromNeuralNode = (node, lookUp) => {
+    let label = lookUp[node[0]]
+    if (node.length === 2 && node[1].length > 0) {
+      node[1].forEach(n => {
+        if (lookUp[n] == undefined) {
+          label += `, ${n}`
+        } else {
+          label += `, ${lookUp[n]}`
+        }
+      })
+    }
+    return label
+  }
+
+  const flattenAndFindDatasets = (components, axons, dendrites) => {
+
+    // process the nodes for finding datasets (Note this is not critical to the tooltip, only for the 'search on components' button)
+    let componentsFlat = flattenConntectivity(components)
+    let axonsFlat = flattenConntectivity(axons)
+    let dendritesFlat = flattenConntectivity(dendrites)
+
+    // Filter for the anatomy which is annotated on datasets
+    this.destinationsWithDatasets = this.uberons.filter(ub => axonsFlat.indexOf(ub.id) !== -1)
+    this.originsWithDatasets = this.uberons.filter(ub => dendritesFlat.indexOf(ub.id) !== -1)
+    this.componentsWithDatasets = this.uberons.filter(ub => componentsFlat.indexOf(ub.id) !== -1)
+  }
+
+  const processConnectivity = (connectivity) => {
+    return new Promise(resolve => {
+
+      // Filter the origin and destinations from components
+      let components = findComponents(connectivity)
+
+      // Remove duplicates
+      let axons = removeDuplicates(connectivity.axons)
+      let dendrites = removeDuplicates(connectivity.dendrites)
+
+      // Create list of ids to get labels for
+      let conIds = findAllIdsFromConnectivity(connectivity)
+
+      // Create readable labels from the nodes. Setting this to 'this.origins' updates the display
+      createLabelLookup(conIds).then(lookUp => {
+        this.destinations = axons.map(a => createLabelFromNeuralNode(a, lookUp))
+        this.origins = dendrites.map(d => createLabelFromNeuralNode(d, lookUp))
+        this.components = components.map(c => createLabelFromNeuralNode(c, lookUp))
+        flattenAndFindDatasets(components, axons, dendrites)
+        resolve(true)
+      })
+    })
+  }
+
+  const flattenConntectivity = (connectivity) => {
+    let dnodes = connectivity.flat() // get nodes from edgelist
+    let nodes = [...new Set(dnodes)] // remove duplicates
+    let found = []
+    nodes.forEach(n => {
+      if (Array.isArray(n)) {
+        found.push(n.flat())
+      } else {
+        found.push(n)
+      }
+    })
+    return found.flat()
+  }
+
+  const findComponents = (connectivity) => {
+    let dnodes = connectivity.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(connectivity.axons, node)) {
+        terminal = true
+      }
+      if (inArray(connectivity.dendrites, node)) {
+        terminal = true
+      }
+      if (!terminal) {
+        found.push(node)
+      }
+    })
+
+    return found
+  }
+
+  const stripPMIDPrefix = (pubmedId) => {
+    return pubmedId.split(':')[1]
+  }
+
+  const buildPubmedSqlStatement = (keastIds) => {
+    let sql = 'select distinct publication from publications where entity in ('
+    if (keastIds.length === 1) {
+      sql += `'${keastIds[0]}')`
+    } else if (keastIds.length > 1) {
+      for (let i in keastIds) {
+        sql += `'${keastIds[i]}'${i >= keastIds.length - 1 ? ')' : ','} `
+      }
+    }
+    return sql
+  }
+
+  const buildPubmedSqlStatementForModels = (model) => {
+    return `select distinct publication from publications where entity = '${model}'`
+  }
+
+  const flatmapQuery = (sql) => {
+    const data = { sql: sql }
+    return fetch(`${this.flatmapApi}knowledge/query/`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+      .then(response => response.json())
+      .catch((error) => {
+        console.error('Error:', error)
+      })
+  }
+
+  const pubmedQueryOnIds = (eventData) => {
+    const keastIds = eventData.resource
+    const source = eventData.feature.source
+    if (!keastIds || keastIds.length === 0) return
+    const sql = buildPubmedSqlStatement(keastIds)
+    return flatmapQuery(sql).then(data => {
+      // Create pubmed url on paths if we have them
+      if (data.values.length > 0) {
+        this.urls = [pubmedSearchUrl(data.values.map(id => stripPMIDPrefix(id[0])))]
+        return true
+      } else { // Create pubmed url on models
+        pubmedQueryOnModels(source).then(() => { return true })
+      }
+    })
+  }
+
+  const pubmedQueryOnModels = (source) => {
+    return flatmapQuery(buildPubmedSqlStatementForModels(source)).then(data => {
+      if (Array.isArray(data.values) && data.values.length > 0) {
+        this.urls = [pubmedSearchUrl(data.values.map(id => stripPMIDPrefix(id[0])))]
+      } else {
+        this.urls = [] // Clears the pubmed search button 
+      }
+      return
+    })
+  }
+
+  const pubmedSearchUrl = (ids) => {
+    let url = 'https://pubmed.ncbi.nlm.nih.gov/?'
+    let params = new URLSearchParams()
+    params.append('term', ids)
+    return url + params.toString()
+  }
+}