@abi-software/flatmapvuer 0.3.9 → 0.3.11

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.8",
+  "version": "0.3.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@abi-software/flatmap-viewer": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.7.tgz",
-      "integrity": "sha512-QR6HRxLLI0mMsSAGkPJgfJg13943ZM6BUPPjXFWtBTXeKH8sEHWTzAgwF2rLWsP9HnaJXVCOhH//R4LAXdU0fA==",
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.2.9.tgz",
+      "integrity": "sha512-UN7R84Xn2TeK9Fo/IEFSEKuauRroO5KMYKDUu4wfZQw0qzSC79OdJmHBOeIH4pkS+J4FRZfq+prS7cxiCNCyRw==",
       "requires": {
         "@babel/runtime": "^7.10.4",
         "@turf/area": "^6.0.1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",
@@ -21,7 +21,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.2.7",
+    "@abi-software/flatmap-viewer": "^2.2.9",
     "@abi-software/svg-sprite": "^0.1.14",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/App.vue

@@ -11,7 +11,7 @@
         <el-row :gutter="20">
           <el-button @click="helpMode = !helpMode" size="mini">Help Mode</el-button>
           <el-button @click="saveSettings()" size="mini">Save Settings</el-button>
-          <el-button @click="restoreSettings()" size="mini">Restore Settings</el-button>
+          <el-button :disabled="mapSettings.length === 0" @click="restoreSettings()" size="mini">Restore Settings</el-button>
         </el-row>
       </div>
       <el-button class="options-button" icon="el-icon-setting" slot="reference">Options</el-button>
@@ -46,11 +46,11 @@ export default {
   name: 'app',
   methods: {
     saveSettings: function() {
-      this._mapSettings.push(this.$refs.multi.getState());
+      this.mapSettings.push(this.$refs.multi.getState());
     },
     restoreSettings: function() {
-      if (this._mapSettings.length > 0)
-        this.$refs.multi.setState(this._mapSettings.pop());
+      if (this.mapSettings.length > 0)
+        this.$refs.multi.setState(this.mapSettings.pop());
     },
     FlatmapSelected: function(resource) {
       if (resource.eventType === "click")
@@ -94,15 +94,13 @@ export default {
       displayCloseButton: false,
       initial: "Rat",
       helpMode: false,
+      mapSettings: [],
       //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/current/flatmap/v3/"
       // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
     }
   },
-  mounted: function() {
-    this._mapSettings = [];
-  },
   components: {
     MultiFlatmapVuer,
   }

package/src/components/FlatmapVuer.vue

@@ -463,6 +463,7 @@ export default {
           this.tooltipVisible = true;
           this.tooltipContent = content;
           this.tooltipContent.uberon = feature;
+          this.tooltipContent.source = data.feature.source;
           this.tooltipContent.title = data.label;
           this.tooltipContent.featureIds = [feature];
           this.tooltipContent.actions.push({
@@ -480,6 +481,7 @@ export default {
         this.tooltipVisible = true;
         this.tooltipContent = content;
         this.tooltipContent.uberon = feature;
+        this.tooltipContent.source = data.feature.source;
         this.tooltipContent.title = data.label;
         this.tooltipContent.actions.push({
           title: "View dataset",
@@ -566,9 +568,15 @@ export default {
       if (this.mapImp) {
         let state = {
           entry: this.entry,
-          biologicalSex: this.biologicalSex,
           viewport: this.mapImp.getState()
         };
+        const identifier = this.mapImp.getIdentifier();
+        if (this.biologicalSex)
+          state['biologicalSex'] = this.biologicalSex;
+        else if (identifier && identifier.biologicalSex)
+          state['biologicalSex'] = identifier.biologicalSex;
+        if (identifier && identifier.uuid)
+          state['uuid'] = identifier.uuid;
         return state;
       }
       return undefined;
@@ -595,7 +603,7 @@ export default {
           minimap = { position: "top-right" };
         }
 
-        //As for flatmap-viewer@2.2.6, see belowf for the documentation 
+        //As for flatmap-viewer@2.2.7, see below for the documentation 
         //for the identifier:
 
         //@arg identifier {string|Object}
@@ -703,7 +711,10 @@ export default {
   },
   props: {
     entry: String,
-    biologicalSex: String,
+    biologicalSex: {
+      type: String,
+      default: ""
+    },
     featureInfo: {
       type: Boolean,
       default: false
@@ -913,6 +924,9 @@ export default {
       transparent 9px
     );
   }
+  &.other {
+    background: #888;
+  }
 }
 
 .flatmap-container {
@@ -1301,10 +1315,6 @@ export default {
   }
 }
 
-::v-deep .flatmap-popper {
-  
-}
-
 ::v-deep .popper-zoomout {
   padding-right: 13px !important;
   left: -21px !important;

package/src/components/PubmedViewer.vue

@@ -1,42 +1,12 @@
 <template>
   <div class="pubmed-container">
-      <div v-loading="loading.response" class="block">
-        <div class="attribute-title">Pubmed Resources</div>
-        <br/>
-        <el-carousel 
-          :autoplay="false" 
-          indicator-position="outside"
-          height="250px" width="200px"
-        >
-          <el-carousel-item v-for="(pub, i) in pubmeds" :key="i">
-            <div class="attribute-content">
-                <div v-html="pub.html"/>
-                <el-link :href="pub.url" :underline="false" class="el-link" target="_blank">{{pub.url}}</el-link>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
+    <!-- To view old pubmed display go to: https://github.com/Tehsurfer/flatmapvuer/commit/eca131f8d32cdcac4d136d1722d7fe4df25f6c3a -->
   </div>
 </template>
 
 
 <script>
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import {
-  Link,
-  Carousel,
-  CarouselItem,
-  Button
-} from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-locale.use(lang);
-Vue.use(Link);
-Vue.use(Carousel);
-Vue.use(CarouselItem);
-Vue.use(Button);
-
 
 export default {
   name: "Tooltip",
@@ -47,48 +17,27 @@ export default {
     },
   },
   watch: {
-    'entry.featureId': function (val){
-      this.flatmapQuery(val).then(pb => this.pubmeds = pb)
-    },
     'entry.featureIds': {
       handler: function(ids) {
-        this.flatmapQuery(ids)
+        this.pubmedQueryOnIds(ids)
       }
     }
   },
   inject: ['flatmapAPI'],
   data: function() {
     return {
-      data: {},
       pubmeds: [],
       pubmedIds: [],
-      loading: {response: true, publications: true}
     };
   },
   mounted: function() {
     if (this.entry.featureIds)
-      this.flatmapQuery(this.entry.featureIds)
+      this.pubmedQueryOnIds(this.entry.featureIds)
   },
   methods: {
     stripPMIDPrefix: function (pubmedId){
       return pubmedId.split(':')[1]
     },
-    titleFromPubmed: function (pubmedId){
-      return new Promise((resolve) => {
-        fetch(`https://api.ncbi.nlm.nih.gov/lit/ctxp/v1/pubmed/?format=citation&contenttype=json&id=${pubmedId}`)
-        .then(response => response.json())
-        .then(data => {
-          resolve(data.apa.format)
-        })
-        .catch((error) => {
-          console.error('Error:', error)
-        });
-      })
-    },
-    splitLink(bibliographyString){
-      let split = bibliographyString.split('https')
-      return [split[0], 'https' + split[1]]
-    },
     buildPubmedSqlStatement: function(keastIds) {
       let sql = 'select distinct publication from publications where entity in ('
       if (keastIds.length === 1) {
@@ -100,14 +49,12 @@ export default {
       }
       return sql
     },
-    flatmapQuery: function(keastIds){
-      if(!keastIds || keastIds.length === 0) return
-      this.pubmeds = []
-      this.loading.response = true
-
-      // fetch pubmed publications for the given ids
-      const data = { sql: this.buildPubmedSqlStatement(keastIds)};
-      fetch(`${this.flatmapAPI}knowledge/query/`, {
+    buildPubmedSqlStatementForModels: function(model) {
+      return `select distinct publication from publications where entity = '${model}'`
+    },
+    flatmapQuery: function(sql){
+      const data = { sql: sql}
+      return fetch(`${this.flatmapAPI}knowledge/query/`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -115,27 +62,31 @@ export default {
         body: JSON.stringify(data),
       })
       .then(response => response.json())
-      .then(data => {
+      .catch((error) => {
+        console.error('Error:', error)
+      })
+    },
+    pubmedQueryOnIds: function(keastIds){
+      if(!keastIds || keastIds.length === 0) return
+      const sql = this.buildPubmedSqlStatement(keastIds)
+      this.flatmapQuery(sql).then(data=>{
         this.responseData = data
-        this.loading.response = false
-
-        // create links for each pubmedId
+        // Create pubmed url on paths if we have them
         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 
+        } else { // Create pubmed url on models
+          this.pubmedQueryOnModels(this.entry.source)
         }
       })
-      .catch((error) => {
-        console.error('Error:', error)
-    })
+    },
+    pubmedQueryOnModels(source){
+      this.flatmapQuery(this.buildPubmedSqlStatementForModels(source)).then(data=>{
+        if (Array.isArray(data.values) && data.values.length > 0){
+          this.$emit('pubmedSearchUrl', this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0]))))
+        } else {
+          this.$emit('pubmedSearchUrl', '') // Clears the pubmed search button 
+        } 
+      })
     },
     pubmedSearchUrl: function(ids) {
       let url = 'https://pubmed.ncbi.nlm.nih.gov/?'

package/src/components/Tooltip.vue

@@ -8,8 +8,6 @@
         <span class="title">{{content.featureId}}</span>
       </div>
       <div class="content-container scrollbar">
-        <!-- 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.origins" class="block">
           <div>
@@ -65,17 +63,12 @@
           </el-button>
         </div>
 
-        <!-- We will serach on components until we can search on neurons -->
         <el-button v-show="components.length > 0" class="button" @click="openAll">
           Search for data on components
         </el-button>
 
-        <!-- Disable neuron search until it is ready -->
-        <!-- <el-button v-for="action in content.actions" round :key="action.title"
-          class="button" @click="resourceSelected(action)">
-          <i v-if="action.title === 'Search for datasets' || action.title === 'View Dataset' " class="el-icon-coin"></i>
-          {{action.title}}
-        </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>
@@ -333,6 +326,38 @@ export default {
       }
       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 = []
@@ -350,29 +375,7 @@ 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 = 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 = 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 => 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.processConnectivity(connectivity)
         this.loading = false
       })
       .catch((error) => {