@abi-software/flatmapvuer 0.3.10 → 0.3.11

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2001,6 +2001,7 @@
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
         "vue-loader": "^15.9.2",
+        "vue-loader-v16": "npm:vue-loader@^16.1.0",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
         "webpack-bundle-analyzer": "^3.8.0",
@@ -13191,6 +13192,94 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "json5": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",

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",

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) => {