@abi-software/flatmapvuer 0.3.6 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",
@@ -10,13 +10,14 @@
     "*.js"
   ],
   "scripts": {
+    "start": "vue-cli-service serve",
     "serve": "vue-cli-service serve --port 8082",
     "build": "vue-cli-service build --dest test_html --mode staging",
     "build-bundle": "vue-cli-service build --target lib --name flatmapvuer ./src/components/index.js",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.2.0-beta.16",
+    "@abi-software/flatmap-viewer": "^2.2.2-beta.4",
     "@abi-software/svg-sprite": "^0.1.14",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/components/FlatmapVuer.vue

@@ -124,6 +124,7 @@
           v-if="pathways.length > 0 && pathControls"
           v-popover:checkBoxPopover
         >
+          <svg-legends class= "svg-legends-container"/>
           <el-popover
             content="Find these markers for data"
             placement="right"
@@ -250,6 +251,7 @@
 import Vue from "vue";
 import Tooltip from "./Tooltip";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
+import SvgLegends from "./legends/Legends";
 import {
   Checkbox,
   CheckboxGroup,
@@ -284,7 +286,8 @@ export default {
   components: {
     MapSvgIcon,
     MapSvgSpriteColor,
-    Tooltip
+    Tooltip,
+    SvgLegends
   },
   beforeCreate: function() {
     this.mapManager = undefined;
@@ -650,7 +653,15 @@ export default {
         }
       }
       return false;
-    }
+    },
+    /**
+     * Get the list of suggested terms
+     */
+    searchSuggestions: function(term) {
+      if (this.mapImp)
+        return this.mapImp.search(term);
+      return [];
+    },
   },
   props: {
     entry: String,
@@ -785,7 +796,7 @@ export default {
 @import "~element-ui/packages/theme-chalk/src/loading";
 @import "~element-ui/packages/theme-chalk/src/row";
 
-.beta-popovers{
+.beta-popovers {
   position: absolute;
   top: 90px;
   left: 16px;
@@ -882,6 +893,11 @@ export default {
   }
 }
 
+.svg-legends-container {
+  width:70%;
+  height:auto;
+}
+
 .pathway-container {
   float: left;
   padding-left: 16px;
@@ -890,7 +906,6 @@ export default {
   text-align: left;
   overflow: auto;
   border: 1px solid rgb(220, 223, 230);
-  padding-top: 7px;
   padding-bottom: 16px;
   background: #ffffff;
 }
@@ -1163,7 +1178,7 @@ export default {
     background-color: black;
   }
   &.lightskyblue {
-    background-color: white;
+    background-color: lightskyblue;
   }
 }
 
@@ -1288,7 +1303,7 @@ export default {
   z-index: 8;
   width: 20px;
   height: 40px;
-  border: solid 1px #e4e7ed;
+  border: solid 1px $app-primary-color;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -1305,21 +1320,22 @@ export default {
 .drawer-button {
   float: left;
   margin-top: calc(50% - 36px);
-  border-left: 0;
-  background-color: #ffffff;
+  background-color: #F9F2FC;
+
   i {
+    font-weight: 600; 
     margin-top: 12px;
     color: $app-primary-color;
     transition-delay: 0.9s;
   }
   &.open {
     i {
-      transform: rotate(0deg) scaleY(2.5);
+      transform: rotate(0deg) scaleY(2);
     }
   }
   &.close {
     i {
-      transform: rotate(180deg) scaleY(2.5);
+      transform: rotate(180deg) scaleY(2);
     }
   }
 }

package/src/components/PubmedViewer.vue

@@ -120,14 +120,18 @@ export default {
         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]))))
+        if (data.values.length > 0){
+          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]))))
+        } else {
+           this.$emit('pubmedSearchUrl', '') // Clears the pubmed search button 
+        }
       })
       .catch((error) => {
         console.error('Error:', error)

package/src/components/Tooltip.vue

@@ -26,8 +26,9 @@
             </span>
             </el-popover>
           </div>
-          <div v-for="origin in origins" class="attribute-content"  :key="origin">
+          <div v-for="(origin, i) in origins" class="attribute-content"  :key="origin">
             {{ capitalise(origin) }}
+            <div v-if="i != origins.length - 1" class="seperator"></div>
           </div>
           <el-button v-show="originsWithDatasets.length > 0" class="button" @click="openDendrites">
             Explore origin data
@@ -35,8 +36,9 @@
         </div>
         <div v-if="this.components" class="block">
           <div class="attribute-title">Components</div>
-          <div v-for="component in components" class="attribute-content"  :key="component">
+          <div v-for="(component, i) in components" class="attribute-content"  :key="component">
             {{ capitalise(component) }}
+            <div v-if="i != components.length - 1" class="seperator"></div>
           </div>
         </div>
         <div v-if="this.destinations" class="block">
@@ -54,8 +56,9 @@
             </span>
             </el-popover>
           </div>
-          <div v-for="destination in destinations" class="attribute-content"  :key="destination">
+          <div v-for="(destination, i) in destinations" class="attribute-content"  :key="destination">
             {{ capitalise(destination) }}
+            <div v-if="i != destinations.length - 1" class="seperator"></div>
           </div>
           <el-button v-show="destinationsWithDatasets.length > 0" class="button" @click="openAxons">
             Explore destination data
@@ -73,7 +76,7 @@
           <i v-if="action.title === 'Search for datasets' || action.title === 'View Dataset' " class="el-icon-coin"></i>
           {{action.title}}
         </el-button> -->
-        <el-button  v-if="pubmedSearchUrl" class="button" icon="el-icon-notebook-2" @click="openUrl(pubmedSearchUrl)">
+        <el-button  v-if="pubmedSearchUrl != ''" class="button" icon="el-icon-notebook-2" @click="openUrl(pubmedSearchUrl)">
           Open publications in pubmed
         </el-button>
       </div>
@@ -109,6 +112,17 @@ 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)
@@ -195,33 +209,53 @@ export default {
     pubmedSearchUrlUpdate: function (val){
       this.pubmedSearchUrl = val
     },
-    findComponents: function(connectivity){
+    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=>{
-          let n = node.flat() // Find all terms on the 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)
-          n.forEach(s=>{
-              if(connectivity.axons.includes(s)){
-                  terminal = true
-              }
-              if(connectivity.dendrites.includes(s)){
-                  terminal = true
-              }
-          })
-          if (!terminal){
-            found.push(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)
+        }
       })
 
-      // remove duplicates
-      let foundUnique = [...new Set(found.map(n=>n[0]))]
-      return foundUnique
+      return found
     },
     getOrganCuries: function(){
       fetch(`${this.sparcAPI}get-organ-curies/`)
@@ -276,6 +310,29 @@ export default {
           })
       })
     },
+    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
+    },
     pathwayQuery: function(keastIds){
       this.destinations = []
       this.origins = []
@@ -293,20 +350,29 @@ export default {
       .then(response => response.json())
       .then(data => {
         let connectivity = JSON.parse(data.values[0][0])
+        // Filter the origin and destinations from components
         let components = this.findComponents(connectivity)
 
-        // Create list of ids to get labels for
-        let conIds = connectivity.axons.concat(connectivity.dendrites.concat(components))
+        // process the nodes for finding datasets
+        let componentsFlat = this.flattenConntectivity(components)
+        let axons = removeDuplicates(connectivity.axons)
+        let dendrites = removeDuplicates(connectivity.dendrites)
+        let axonsFlat = this.flattenConntectivity(axons)
+        let dendritesFlat = this.flattenConntectivity(dendrites)
+
+        let conIds = this.findAllIdsFromConnectivity(connectivity)  // Create list of ids to get labels for
+
+        // Create readable labels from the nodes. Setting this to 'this.origins' updates the display
         this.createLabelLookup(conIds).then(lookUp=>{
-          this.destinations = connectivity.axons.map(a=>lookUp[a])
-          this.origins = connectivity.dendrites.map(d=>lookUp[d])
-          this.components = components.map(c=>lookUp[c])
+          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))
         })
 
         // Filter for the anatomy which is annotated on datasets
-        this.destinationsWithDatasets = this.uberons.filter(ub => connectivity.axons.indexOf(ub.id) !== -1)
-        this.originsWithDatasets = this.uberons.filter(ub => connectivity.dendrites.indexOf(ub.id) !== -1)
-        this.componentsWithDatasets = this.uberons.filter(ub => connectivity.dendrites.indexOf(ub.id) !== -1)
+        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)
         this.loading = false
       })
       .catch((error) => {
@@ -379,6 +445,12 @@ export default {
   margin-left: 8px;
 }
 
+.seperator {
+  width:90%;
+  height:0.5px;
+  background-color:#bfbec2;
+}
+
 .main {
   font-size: 14px;
   text-align: left;

package/src/components/legends/Legends.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="legends-container">
+    <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+      <defs>
+        <bx:grid height="30.447" width="32.516" x="0" y="0"/>
+      </defs>
+      <path class="st0 st0-translate" d="M61.3,103.8c-15.9,0-28.8-12.3-28.8-27.3c0-15,13-27.3,28.8-27.3s28.8,12.3,28.8,27.3 C90.1,91.5,77.2,103.8,61.3,103.8z"/>
+      <path class="st1" d="M40.3,356.1C29.5,345,29.8,328,41.5,317.5c11.7-10.5,29.6-9.9,40.7,1.1c11.1,11,10.5,28.1-1.2,38.5 C69.3,367.4,51.1,366.9,40.3,356.1z"/>
+      <path class="st2" d="M61.2,396.9c-5.3,9.3-15.3,15.1-26.1,15.1l-0.4,0.6c5.1,9,5.1,20,0,29l0.4,0.6c10.7,0,20.8,5.8,26.1,15.1 c5.3-9.3,15.3-15.1,26.1-15.1c-5.3-9.3-5.3-20.9,0-30.4C76.6,412.1,66.7,406.3,61.2,396.9z"/>
+      <text transform="matrix(0.9908 0 0 1 118.0161 171.7975)" class="st3 st4 st5" style="white-space: pre;">Tissue region</text>
+      <path class="st6" d="M40.9,231.1c11.3-10.6,29.5-10.6,40.8,0c11.3,10.6,11.3,27.9,0,38.5c-11.3,10.6-29.5,10.6-40.8,0 C29.7,259,29.7,241.7,40.9,231.1z"/>
+      <text transform="matrix(0.9908 0 0 1 118.0161 257.675)" class="st3 st4 st5" style="white-space: pre;">Brain nuclei</text>
+      <!-- Hide this unti we can clarify the label
+      <path class="st7" d="M34.3,174c-6.2-13.9,0.6-29.9,15.3-35.7c14.7-5.9,31.6,0.6,37.8,14.4c1.5,3.5,2.3,7,2.3,10.6 c0,10.6-6.6,20.8-17.6,25.2C57.5,194.3,40.5,187.9,34.3,174z"/>
+      <text transform="matrix(0.9908 0 0 1 117.5474 171.7975)" class="st3 st4 st5" style="white-space: pre;">Specific anatomical structure</text>
+      -->
+      <text transform="matrix(0.9908 0 0 1 118.0903 345.5266)" class="st3 st4 st5" style="white-space: pre;">Ganglia</text>
+      <text transform="matrix(0.9908 0 0 1 118.0903 433.1613)" class="st3 st4 st5" style="white-space: pre;">Nerve plexus</text>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+   name: 'SvgLegends',
+}
+</script>
+
+<style scoped lang="scss">
+.legends-container {
+  pointer-events: none;
+  transform: translate(0px, -20px);
+}
+
+.st0-translate {
+  transform: translate(0px, 88px);
+}
+.st0 {
+  fill:#FF33CC;
+}
+.st1 {
+  fill:#B2F074;
+}
+.st2 {
+  opacity:0.64;
+  fill:#E4E417;
+  enable-background:new;
+}
+.st3 {
+  fill:#333333;
+}
+.st4 {
+  font-family:Asap, sans-serif;
+}
+.st5 {
+  font-size:32px;
+}
+.st6 {
+  fill:#F15A24;
+}
+.st7 {
+  fill:#66FFFF;
+  stroke:#000000;
+  stroke-width:3;
+}
+</style>