@abi-software/flatmapvuer 0.3.6-upstream-downstream → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.6-upstream-downstream",
+  "version": "0.3.7",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",
@@ -17,7 +17,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.2.1-beta.8",
+    "@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/App.vue

@@ -91,8 +91,8 @@ export default {
       displayCloseButton: false,
       initial: "Rat",
       helpMode: false,
-      //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
-      flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
+      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/"
     }

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,9 +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 class="seperator"></div>
+            <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
@@ -36,9 +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 class="seperator"></div>
+            <div v-if="i != components.length - 1" class="seperator"></div>
           </div>
         </div>
         <div v-if="this.destinations" class="block">
@@ -56,9 +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 class="seperator"></div>
+            <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
@@ -76,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>
@@ -118,6 +118,11 @@ const inArray = function(ar1, 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)
@@ -232,7 +237,7 @@ export default {
     },
     findComponents: function(connectivity){
       let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
-      let nodes = [...new Set(dnodes)] // remove duplicates
+      let nodes = removeDuplicates(dnodes)
 
       let found = []
       let terminal = false
@@ -345,14 +350,13 @@ 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)
 
         // process the nodes for finding datasets
         let componentsFlat = this.flattenConntectivity(components)
-        let axons = connectivity.axons
-        let dendrites = connectivity.dendrites
+        let axons = removeDuplicates(connectivity.axons)
+        let dendrites = removeDuplicates(connectivity.dendrites)
         let axonsFlat = this.flattenConntectivity(axons)
         let dendritesFlat = this.flattenConntectivity(dendrites)
 

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>