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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.4.1-beta.0",
+  "version": "0.4.1-beta.1",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [

package/src/components/FlatmapVuer.vue

@@ -747,10 +747,18 @@ export default {
       }
     },
     mapResize: function() {
-      if (this.mapImp) {
-        this.mapImp.resize();
+      try {
+        if (this.mapImp) {
+          this.mapImp.resize();
+          this.showMinimap(this.displayMinimap);
+          if (this.mapImp._minimap) {
+              this.mapImp._minimap.resize();
+          }
+        }
+        this.computePathControlsMaximumHeight();
+      } catch {
+        console.error("Map resize error");
       }
-      this.computePathControlsMaximumHeight();
     },
     onFlatmapReady: function(){
       // onFlatmapReady is used for functions that need to run immediately after the flatmap is loaded
@@ -771,6 +779,7 @@ export default {
       this.loading = false;
       this.computePathControlsMaximumHeight();
       this.drawerOpen = true;
+      this.mapResize();
       this.$emit("ready", this);
     },
     showMinimap: function(flag) {

package/src/services/flatmapQueries.js

@@ -1,36 +1,28 @@
 /* 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 removeDuplicates = function (arrayOfAnything) {
+  return [...new Set(arrayOfAnything.map(e => JSON.stringify(e)))].map(e => JSON.parse(e))
 }
 
-const inArray = function(ar1, ar2){
+const inArray = function (ar1, ar2) {
   let as1 = JSON.stringify(ar1)
   let as2 = JSON.stringify(ar2)
   return as1.indexOf(as2) !== -1
 }
 
-export class FlatmapQueries {
-  constructor(sparcApi, flatmapApi) {
-    this.sparcApi = sparcApi
-    this.flatmapApi = flatmapApi
-    this.destinations = []
-    this.origins = []
-    this.components = []
-    this.uberons = []
-    this.urls = []
-    this.controller = undefined
-    this.getOrganCuries().then(uberons=>{
-      this.uberons = uberons
-      this.createLabelLookup(uberons).then(lookUp=>{
-        this.lookUp = lookUp
-      })
-    })
-  }
-
-  createTooltipData = function (eventData) {
+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, 
+      destinations: this.destinations,
       origins: this.origins,
       components: this.components,
       destinationsWithDatasets: this.destinationsWithDatasets,
@@ -38,43 +30,32 @@ export class FlatmapQueries {
       componentsWithDatasets: this.componentsWithDatasets,
       title: eventData.label,
       featureId: eventData.resource,
-      hyperlinks: eventData.feature.hyperlinks ? eventData.feature.hyperlinks : this.urls.map(url=>({url: url, id: "pubmed"})),
+      hyperlinks: eventData.feature.hyperlinks ? eventData.feature.hyperlinks : this.urls.map(url => ({ url: url, id: "pubmed" })),
     }
     return tooltipData
   }
 
-  getOrganCuries = function(){
-    return new Promise(resolve=> {
-    fetch(`${this.sparcAPI}get-organ-curies/`)
-      .then(response=>response.json())
-      .then(data=>{
-        resolve(data.uberon.array)
-      })
-    })
-  }
-
-  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)
-      }
+  const getOrganCuries = () => {
+    return new Promise(resolve => {
+      fetch(`${this.sparcAPI}get-organ-curies/`)
+        .then(response => response.json())
+        .then(data => {
+          resolve(data.uberon.array)
+        })
     })
-    return labelList
   }
 
-  createLabelLookup = function(uberons) {
-    return new Promise(resolve=> {
+  const createLabelLookup = (uberons) => {
+    return new Promise(resolve => {
       let uberonMap = {}
-      const data = { sql: this.buildLabelSqlStatement(uberons)}
+      const data = { sql: buildLabelSqlStatement(uberons) }
       fetch(`${this.flatmapApi}knowledge/query/`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(data),
-        })
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
         .then(response => response.json())
         .then(payload => {
           const entity = payload.keys.indexOf("entity");
@@ -84,12 +65,20 @@ export class FlatmapQueries {
               uberonMap[pair[entity]] = pair[label];
             });
           }
-        resolve(uberonMap)
+          resolve(uberonMap)
         })
     })
   }
 
-  buildConnectivitySqlStatement = function (keastIds) {
+
+  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]}')`
@@ -100,7 +89,8 @@ export class FlatmapQueries {
     }
     return sql
   }
-  buildLabelSqlStatement = function (uberons) {
+
+  const buildLabelSqlStatement = (uberons) => {
     let sql = 'select entity, label from labels where entity in ('
     if (uberons.length === 1) {
       sql += `'${uberons[0]}')`
@@ -112,7 +102,7 @@ export class FlatmapQueries {
     return sql
   }
 
-  findAllIdsFromConnectivity = function (connectivity) {
+  const findAllIdsFromConnectivity = (connectivity) => {
     let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
     let nodes = [...new Set(dnodes)] // remove duplicates
     let found = []
@@ -126,71 +116,34 @@ export class FlatmapQueries {
     return [... new Set(found.flat())]
   }
 
-  flattenConntectivity = function (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()
-  }
+  this.retrieveFlatmapKnowledgeForEvent = async (eventData) =>{
+    // check if there is an existing query
+    if (this.controller) this.controller.abort();
 
-  findComponents = function (connectivity) {
-    let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
-    let nodes = removeDuplicates(dnodes)
+    // set up the abort controller
+    this.controller = new AbortController();
+    const signal = this.controller.signal;
 
-    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
-  }
-
-  retrieveFlatmapKnowledgeForEvent = async function(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: this.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
-        })
+    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(this.connectivityExists(data)){
+          if (connectivityExists(data)) {
             let connectivity = JSON.parse(data.values[0][0])
-            this.processConnectivity(connectivity).then(()=>{
+            processConnectivity(connectivity).then(() => {
               resolve(true)
             })
           } else {
@@ -202,13 +155,13 @@ export class FlatmapQueries {
           console.error('Error:', error);
           resolve(false)
         })
-      })
-      let prom2 = this.pubmedQueryOnIds(eventData)
-      return await Promise.all([prom1, prom2])
-    
+    })
+    let prom2 = pubmedQueryOnIds(eventData)
+    return await Promise.all([prom1, prom2])
+
   }
 
-  connectivityExists = function(data){
+  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 {
@@ -216,12 +169,12 @@ export class FlatmapQueries {
     }
   }
 
-  createLabelFromNeuralNode = function(node, lookUp){
+  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}` 
+    if (node.length === 2 && node[1].length > 0) {
+      node[1].forEach(n => {
+        if (lookUp[n] == undefined) {
+          label += `, ${n}`
         } else {
           label += `, ${lookUp[n]}`
         }
@@ -230,12 +183,12 @@ export class FlatmapQueries {
     return label
   }
 
-  flattenAndFindDatasets(components, axons, dendrites){
-      
+  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 = this.flattenConntectivity(components)
-    let axonsFlat = this.flattenConntectivity(axons)
-    let dendritesFlat = this.flattenConntectivity(dendrites)
+    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)
@@ -243,36 +196,36 @@ export class FlatmapQueries {
     this.componentsWithDatasets = this.uberons.filter(ub => componentsFlat.indexOf(ub.id) !== -1)
   }
 
-  processConnectivity(connectivity){
-    return new Promise (resolve=>{
+  const processConnectivity = (connectivity) => {
+    return new Promise(resolve => {
 
       // Filter the origin and destinations from components
-      let components = this.findComponents(connectivity)
+      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 = this.findAllIdsFromConnectivity(connectivity)  
+      let conIds = 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)
+      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)
       })
     })
   }
 
-  flattenConntectivity(connectivity){
+  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)){
+    nodes.forEach(n => {
+      if (Array.isArray(n)) {
         found.push(n.flat())
       } else {
         found.push(n)
@@ -281,22 +234,22 @@ export class FlatmapQueries {
     return found.flat()
   }
 
-  findComponents = function(connectivity){
+  const findComponents = (connectivity) => {
     let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
     let nodes = removeDuplicates(dnodes)
 
     let found = []
     let terminal = false
-    nodes.forEach(node=>{
+    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)){
+      if (inArray(connectivity.axons, node)) {
         terminal = true
       }
-      if(inArray(connectivity.dendrites, node)){
+      if (inArray(connectivity.dendrites, node)) {
         terminal = true
       }
-      if (!terminal){
+      if (!terminal) {
         found.push(node)
       }
     })
@@ -304,11 +257,11 @@ export class FlatmapQueries {
     return found
   }
 
-  stripPMIDPrefix = function (pubmedId){
+  const stripPMIDPrefix = (pubmedId) => {
     return pubmedId.split(':')[1]
   }
 
-  buildPubmedSqlStatement = function(keastIds) {
+  const buildPubmedSqlStatement = (keastIds) => {
     let sql = 'select distinct publication from publications where entity in ('
     if (keastIds.length === 1) {
       sql += `'${keastIds[0]}')`
@@ -320,12 +273,12 @@ export class FlatmapQueries {
     return sql
   }
 
-  buildPubmedSqlStatementForModels = function(model) {
+  const buildPubmedSqlStatementForModels = (model) => {
     return `select distinct publication from publications where entity = '${model}'`
   }
 
-  flatmapQuery = function(sql){
-    const data = { sql: sql}
+  const flatmapQuery = (sql) => {
+    const data = { sql: sql }
     return fetch(`${this.flatmapApi}knowledge/query/`, {
       method: 'POST',
       headers: {
@@ -333,49 +286,43 @@ export class FlatmapQueries {
       },
       body: JSON.stringify(data),
     })
-    .then(response => response.json())
-    .catch((error) => {
-      console.error('Error:', error)
-    })
+      .then(response => response.json())
+      .catch((error) => {
+        console.error('Error:', error)
+      })
   }
 
-  pubmedQueryOnIds = function(eventData){
+  const pubmedQueryOnIds = (eventData) => {
     const keastIds = eventData.resource
     const source = eventData.feature.source
-    if(!keastIds || keastIds.length === 0) return
-    const sql = this.buildPubmedSqlStatement(keastIds)
-    return this.flatmapQuery(sql).then(data=>{
+    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 = [this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0])))]
+      if (data.values.length > 0) {
+        this.urls = [pubmedSearchUrl(data.values.map(id => stripPMIDPrefix(id[0])))]
         return true
       } else { // Create pubmed url on models
-        this.pubmedQueryOnModels(source).then(()=>{return true})
+        pubmedQueryOnModels(source).then(() => { return true })
       }
     })
   }
 
-  pubmedQueryOnModels = function(source){
-    return this.flatmapQuery(this.buildPubmedSqlStatementForModels(source)).then(data=>{
-      if (Array.isArray(data.values) && data.values.length > 0){
-        this.urls = [this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0])))]
+  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
     })
   }
 
-  pubmedSearchUrl = function(ids) {
+  const pubmedSearchUrl = (ids) => {
     let url = 'https://pubmed.ncbi.nlm.nih.gov/?'
     let params = new URLSearchParams()
     params.append('term', ids)
     return url + params.toString()
   }
 }
-
-
-
-
-
-export default FlatmapQueries