@abi-software/flatmapvuer 0.2.5 → 0.3.0-beta-0

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.2.5-beta-0",
+  "version": "0.3.0-beta-0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@abi-software/flatmap-viewer": {
-      "version": "2.2.0-beta.10",
-      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.0-beta.10.tgz",
-      "integrity": "sha512-tq0nOvGUgetK1s8w29bbRGcUvZDwM9Yn7LtGvGcjSViOW1DVSS0owSD0oIO0kN68RpW9w6NCfhIjsaqzYSF8pA==",
+      "version": "2.2.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.0-beta.12.tgz",
+      "integrity": "sha512-2bDHZ3DSp3AFsUHYmJ6MPYyj6BHQv0GHU6Q+NSuK8eFUQZwYKJvlw4vkx9x+rPEZwuZUmxv7RrQQdw5FgOU6qA==",
       "requires": {
         "@babel/runtime": "^7.10.4",
         "@turf/area": "^6.0.1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.2.5",
+  "version": "0.3.0-beta-0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",
@@ -16,7 +16,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "2.2.0-beta.10",
+    "@abi-software/flatmap-viewer": "^2.2.0-beta.12",
     "@abi-software/svg-sprite": "^0.1.14",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/App.vue

@@ -53,8 +53,8 @@ export default {
         this.$refs.multi.setState(this._mapSettings.pop());
     },
     FlatmapSelected: function(resource) {
-      if (resource.eventType != "hover")
-        console.log(resource);
+      if (resource.eventType === "click")
+        console.log('resource', resource);
     },
     FlatmapReady: function(component) {
       let taxon = component.mapImp.describes;
@@ -65,7 +65,7 @@ export default {
       component.searchAndShowResult("heart");
     },
     panZoomcallback: function(payload) {
-      console.log(payload);
+      this.payload = payload
     }
   },
   data: function(){
@@ -91,8 +91,10 @@ export default {
       displayCloseButton: false,
       initial: "Rat",
       helpMode: false,
-      //flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
-      flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
+      // flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
+      // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
+      flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
+      // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
     }
   },
   mounted: function() {

package/src/components/EventBus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+const EventBus = new Vue();
+export default EventBus;

package/src/components/FlatmapVuer.vue

@@ -216,7 +216,6 @@
         ref="tooltip"
         class="tooltip"
         :content="tooltipContent"
-        :flatmapAPI="flatmapAPI"
         @resource-selected="resourceSelected"
       />
     </div>
@@ -240,6 +239,7 @@ import {
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import flatmapMarker from "../icons/flatmap-marker";
+
 locale.use(lang);
 Vue.use(Checkbox);
 Vue.use(CheckboxGroup);
@@ -363,7 +363,7 @@ export default {
           };
           // Disable the nueron pop up for now.
           if (data && data.type !== "marker")
-            this.checkAndCreatePopups(data);
+            this.checkAndCreatePopups(payload);
           this.$emit("resource-selected", payload);
         } else {
           this.$emit("pan-zoom-callback", data);
@@ -412,15 +412,29 @@ export default {
       let foundAnnotations = false;
       this.tooltipVisible = false;
 
+      // nerve cuff check
+      if (data.feature.nodeId) {
+        let paths = this.mapImp.nodePathModels(data.feature.nodeId)
+        if (paths.size > 0){
+          foundAnnotations = true;
+          this.tooltipVisible = true;
+          this.tooltipContent = content;
+          this.tooltipContent.uberon = feature;
+          this.tooltipContent.title = data.label;
+          this.tooltipContent.featureIds = [...paths];
+        }
+        return true
+      }
+
       // neural data check
-      if (feature) {
-        if (feature.includes("ilxtr:neuron")) {
+      if (feature){
+        if (feature.includes('ilxtr:neuron')){
           foundAnnotations = true;
           this.tooltipVisible = true;
           this.tooltipContent = content;
           this.tooltipContent.uberon = feature;
           this.tooltipContent.title = data.label;
-          this.tooltipContent.featureId = feature;
+          this.tooltipContent.featureIds = [feature];
           this.tooltipContent.actions.push({
             title: "Search for dataset",
             label: "Neuron Datasets",
@@ -604,13 +618,18 @@ export default {
       if (this.mapImp) {
         if (term === undefined || term === "") {
           this.mapImp.clearSearchResults();
+          return true;
         } else {
           let searchResults = this.mapImp.search(term);
-          if (searchResults && searchResults.__featureIds.length > 0)
+          if (searchResults && searchResults.__featureIds.length > 0) {
             this.mapImp.showSearchResults(searchResults);
-          else this.mapImp.clearSearchResults();
+            return true;
+          }
+          else
+            this.mapImp.clearSearchResults();
         }
       }
+      return false;
     }
   },
   props: {
@@ -668,6 +687,16 @@ export default {
     flatmapAPI: {
       type: String,
       default: "https://mapcore-demo.org/flatmaps/"
+    },
+    sparcAPI: {
+      type: String,
+      default: "https://api.sparc.science/"
+    }
+  },
+  provide() {
+    return {
+      sparcAPI: this.sparcAPI,
+      flatmapAPI: this.flatmapAPI
     }
   },
   data: function() {
@@ -691,7 +720,7 @@ export default {
       loading: false,
       flatmapMarker: flatmapMarker,
       drawerOpen: true,
-      tooltipContent: {},
+      tooltipContent: { featureIds: []},
       colourRadio: true,
       outlinesRadio: true
     };

package/src/components/MultiFlatmapVuer.vue

@@ -46,6 +46,7 @@
       :displayMinimap="displayMinimap"
       style="height:100%"
       :flatmapAPI="flatmapAPI"
+      :sparcAPI="sparcAPI"
     />
   </div>
 </template>
@@ -53,6 +54,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import EventBus from './EventBus'
 import Vue from "vue";
 import FlatmapVuer from "./FlatmapVuer.vue";
 import { Col, Option, Select, Row, Popover } from "element-ui";  
@@ -73,6 +75,9 @@ export default {
   },
   mounted: function() {
     this.initialise();
+    EventBus.$on('onActionClick', (action) =>{
+      this.FlatmapSelected(action)
+    })
   },
   methods: {
     initialise: function() {
@@ -83,7 +88,7 @@ export default {
           this.speciesLis= {};
           Object.keys(this.availableSpecies).forEach(key => {
             for (let i = 0; i < data.length; i++) {
-              if (data[i].describes == this.availableSpecies[key].taxo) {
+              if (data[i].taxon === this.availableSpecies[key].taxo) {
                 this.speciesList[key] = this.availableSpecies[key];
                 break;
               }
@@ -241,6 +246,10 @@ export default {
       type: String,
       default: "https://mapcore-demo.org/flatmaps/"
     },
+    sparcAPI: {
+      type: String,
+      default: "https://api.sparc.science/"
+    } 
   },
   data: function() {
     return {

package/src/components/PubmedViewer.vue

@@ -26,7 +26,8 @@ import Vue from "vue";
 import {
   Link,
   Carousel,
-  CarouselItem
+  CarouselItem,
+  Button
 } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
@@ -34,40 +35,39 @@ locale.use(lang);
 Vue.use(Link);
 Vue.use(Carousel);
 Vue.use(CarouselItem);
+Vue.use(Button);
 
 
 export default {
   name: "Tooltip",
-  props: { 
-    featureId: {
-      type: String,
-      default: ''
+  props: {
+    entry: {
+      type: Object,
+      default: () => {}
     },
-    /**
-     * Specify the endpoint of the flatmap server.
-     */
-    flatmapAPI: {
-      type: String,
-      default: "https://mapcore-demo.org/flatmaps/"
-    }
   },
   watch: {
-    'featureId': function (val){
-      console.log('feature id watch triggered', val)
-      this.flatmapQuery(val)
+    'entry.featureId': function (val){
+      this.flatmapQuery(val).then(pb => this.pubmeds = pb)
+    },
+    'entry.featureIds': {
+      handler: function(ids) {
+        this.flatmapQuery(ids)
+      }
     }
   },
-  computed: {
-  },
+  inject: ['flatmapAPI'],
   data: function() {
     return {
+      data: {},
       pubmeds: [],
       pubmedIds: [],
       loading: {response: true, publications: true}
     };
   },
   mounted: function() {
-    this.flatmapQuery(this.featureId)
+    if (this.entry.featureIds)
+      this.flatmapQuery(this.entry.featureIds)
   },
   methods: {
     stripPMIDPrefix: function (pubmedId){
@@ -81,7 +81,7 @@ export default {
           resolve(data.apa.format)
         })
         .catch((error) => {
-          console.error('Error:', error);
+          console.error('Error:', error)
         });
       })
     },
@@ -89,12 +89,25 @@ export default {
       let split = bibliographyString.split('https')
       return [split[0], 'https' + split[1]]
     },
-    flatmapQuery: function(identifier){
+    buildPubmedSqlStatement: function(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
+    },
+    flatmapQuery: function(keastIds){
+      if(!keastIds || keastIds.length === 0) return
       this.pubmeds = []
       this.loading.response = true
-      let endpoint = this.flatmapAPI + 'knowledge/query/';
-      const data = { sql: 'select publication from publications where entity=?', "params": [identifier]};
-      fetch(endpoint, {
+
+      // fetch pubmed publications for the given ids
+      const data = { sql: this.buildPubmedSqlStatement(keastIds)};
+      fetch(`${this.flatmapAPI}knowledge/query/`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -105,19 +118,20 @@ export default {
       .then(data => {
         this.responseData = data
         this.loading.response = false
+
+        // create links for each pubmedId
         data.values.forEach(identifier => {
           let ids = this.stripPMIDPrefix(identifier[0])
           this.titleFromPubmed(ids).then( bib=>{
             let [html, link] = this.splitLink(bib)
             this.pubmeds.push({identifier: identifier[0] , html: html, url: link})
-            
           })
         });
         this.$emit('pubmedSearchUrl', this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0]))))
       })
       .catch((error) => {
-        console.error('Error:', error);
-      });
+        console.error('Error:', error)
+    })
     },
     pubmedSearchUrl: function(ids) {
       let url = 'https://pubmed.ncbi.nlm.nih.gov/?'

package/src/components/Tooltip.vue

@@ -1,26 +1,42 @@
 <template>
   <div class="tooltip-container">
-     <el-main v-if="content" class="main">
+     <el-main v-if="content" class="main" v-loading="loading">
       <div class="block" v-if="content.title">
-        <span class="title">{{titleCase(content.title)}}</span>
+        <span class="title">{{capitalise(content.title)}}</span>
       </div>
       <div class="block" v-else>
         <span class="title">{{content.featureId}}</span>
       </div>
-      
-
-      <pubmed-viewer v-if="content.featureId" class="block" :flatmapAPI=flatmapAPI :featureId="content.featureId" @pubmedSearchUrl="pubmedSearchUrlUpdate"/>
-      <div v-if="content.components" class="block">
+      <!-- Currently we don't show the pubmed viewer, will remove once we are certain it won't be used -->
+      <pubmed-viewer v-if="content.featureIds" v-show="false" class="block" :entry="content" @pubmedSearchUrl="pubmedSearchUrlUpdate"/>
+      {{content.paths}}
+      <div v-if="this.components" class="block">
         <div class="attribute-title">Components</div>
-        <span class="attribute-content">{{content.components}}</span>
+        <div v-for="component in components" class="attribute-content"  :key="component">
+          {{ capitalise(component) }}
+        </div>
+      </div>
+      <div v-if="this.dendrites" class="block">
+        <div class="attribute-title">Dendrites</div>
+        <div v-for="dendrite in dendrites" class="attribute-content"  :key="dendrite">
+          {{ capitalise(dendrite) }}
+        </div>
+        <el-button v-show="dendritesWithDatasets.length > 0" class="button" @click="openDendrites">
+          Explore dendrite data
+        </el-button>
       </div>
-      <div v-if="content.start" class="block">
-        <div class="attribute-title">Origin</div>
-        <span class="attribute-content">{{content.start}}</span>
+      <div v-if="this.axons" class="block">
+        <div class="attribute-title">Axons</div>
+        <div v-for="axon in axons" class="attribute-content"  :key="axon">
+          {{ capitalise(axon) }}
+        </div>
+        <el-button v-show="axonsWithDatasets.length > 0" class="button" @click="openAxons">
+          Explore axon data
+        </el-button>
       </div>
-      <div v-if="content.distribution" class="block">
-        <div class="attribute-title">Distribution</div>
-        <span class="attribute-content">{{content.distribution}}</span>
+      <div v-if="content.uberon" class="block">
+        <div class="attribute-title">Feature Id</div>
+        <span class="attribute-content">{{content.uberon}}</span>
       </div>
       <el-button v-for="action in content.actions" round :key="action.title"
         class="button" @click="resourceSelected(action)">
@@ -54,12 +70,18 @@ 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'
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => { return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase() });
 }
 
+const capitalise = function(str){
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
 export default {
   components: { PubmedViewer },
   name: "Tooltip",
@@ -72,21 +94,32 @@ export default {
       type: Object,
       default: undefined
     },
-        /**
-     * Specify the endpoint of the flatmap server.
-     */
-    flatmapAPI: {
-      type: String,
-      default: "https://mapcore-demo.org/flatmaps/"
-    }
   },
   data: function() {
     return {
       activeSpecies: undefined,
       appendToBody: false,
-      pubmedSearchUrl: ''
+      pubmedSearchUrl: '',
+      loading: false,
+      axons: [],
+      dendrites: [],
+      components: [],
+      axonsWithDatasets: [],
+      dendritesWithDatasets: [],
+      uberons: [{id: undefined, name: undefined}]
     };
   },
+  inject: ['sparcAPI', 'flatmapAPI'],
+  watch: {
+    'content.featureIds': {
+      handler: function(){
+        this.pathwayQuery(this.content.featureIds)
+      }
+    }
+  },
+  mounted: function(){
+    this.getOrganCuries()
+  },
   methods: {
     resourceSelected: function(action) {
       this.$emit("resource-selected", action); 
@@ -94,14 +127,136 @@ export default {
     titleCase: function(title){
       return titleCase(title)
     },
+    capitalise: function(text){
+      return capitalise(text)
+    },
     onClose: function() {
-      this.$emit("onClose");
+      this.$emit("onClose")
     },
     openUrl: function(url){
       window.open(url, '_blank')
     },
+    openAxons: function(){
+      EventBus.$emit('onActionClick', {type:'Facets', labels: this.axonsWithDatasets.map(a=>a.name)})
+    },
+    openDendrites: function(){
+      EventBus.$emit('onActionClick', {type:'Facets', labels: this.dendritesWithDatasets.map(a=>a.name)})
+    },
     pubmedSearchUrlUpdate: function (val){
       this.pubmedSearchUrl = val
+    },
+    findComponents: function(connectivity){
+      let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
+      let nodes = [...new Set(dnodes)] // remove duplicates
+
+      let found = []
+      let terminal = false
+      nodes.forEach(node=>{
+          let n = node.flat() // Find all terms on the node
+          terminal = false
+
+          // Check if the node is an axon or dendrite
+          n.forEach(s=>{
+              if(connectivity.axons.includes(s)){
+                  terminal = true
+              }
+              if(connectivity.dendrites.includes(s)){
+                  terminal = true
+              }
+          })
+          if (!terminal){
+            found.push(node)
+          }
+      })
+
+      // remove duplicates
+      let foundUnique = [...new Set(found.map(n=>n[0]))]
+      return foundUnique
+    },
+    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 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(data => {
+            uberons.forEach((el,i)=>{
+              uberonMap[el] = data.values[i][0]
+            })
+            resolve(uberonMap)
+          })
+      })
+    },
+    pathwayQuery: function(keastIds){
+      this.axons = []
+      this.dendrites = []
+      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])
+        let components = this.findComponents(connectivity)
+
+        // Create list of ids to get labels for
+        let conIds = connectivity.axons.concat(connectivity.dendrites.concat(components))
+        this.createLabelLookup(conIds).then(lookUp=>{
+          this.axons = connectivity.axons.map(a=>lookUp[a])
+          this.dendrites = connectivity.dendrites.map(d=>lookUp[d])
+          this.components = components.map(c=>lookUp[c])
+        })
+
+        // Filter for the anatomy which is annotated on datasets
+        this.axonsWithDatasets = this.uberons.filter(ub => connectivity.axons.indexOf(ub.id) !== -1)
+        this.dendritesWithDatasets = this.uberons.filter(ub => connectivity.dendrites.indexOf(ub.id) !== -1)
+        this.loading = false
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+      })
     }
   }
 };
@@ -171,6 +326,15 @@ export default {
   min-width: 16rem;
 }
 
+.title{
+  font-size: 18px;
+  font-weight: 500;
+  font-weight: bold;
+  padding-bottom: 8px;
+  color: rgb(131, 0, 191);
+
+}
+
 .attribute-title{
   font-size: 16px;
   font-weight: 600;
@@ -180,7 +344,7 @@ export default {
 
 .attribute-content{
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .popover-container {