@abi-software/flatmapvuer 0.3.10 → 0.3.12-beta-0

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.12-beta-0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",

package/src/components/FlatmapVuer.vue

@@ -12,7 +12,7 @@
       <div class="beta-popovers">
         <div>
           <el-popover
-            :content="warningMessage"
+            :content="isLegacy ? 'This is a legacy map, you may view the latest map instead.' : warningMessage"
             placement="right"
             :appendToBody="false"
             trigger="manual"
@@ -27,7 +27,13 @@
             @mouseout="hideToolitip(6)"
             v-popover:warningPopover
           >
-          <span class="warning-text">Beta</span>
+            <template v-if="isLegacy">
+              <span class="warning-text">Legacy Map</span>
+              <div class="latest-map-text" @click="viewLatestMap">Click here for the latest map</div>
+            </template>
+            <template v-else>
+              <span class="warning-text">Beta</span>
+            </template>
         </i>
         </div>
         <el-popover
@@ -294,6 +300,19 @@ export default {
     this.mapImp = undefined;
   },
   methods: {
+    viewLatestMap: function() {
+      let biologicalSex = this.biologicalSex ? this.biologicalSex : undefined;
+      //Human requires special handling
+      if (this.entry === "NCBITaxon:9606") {
+        biologicalSex = "PATO:0000384";
+      }
+      const state = {
+        entry: this.entry,
+        biologicalSex,
+        viewport: this.mapImp.getState()
+      };
+      this.$emit("view-latest-map", state);
+    },
     backgroundChangeCallback: function(colour) {
       this.currentBackground = colour;
       if (this.mapImp) {
@@ -463,6 +482,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 +500,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",
@@ -618,13 +639,17 @@ export default {
         //  be loaded, overriding ``taxon`` and ``biologicalSex``.
 
         let identifier = { taxon: this.entry };
-        if (state && state.entry) {
-          identifier.taxon = state.entry;
-          if (state.biologicalSex) {
-            identifier["biologicalSex"] = state.biologicalSex;
-          } else if (identifier.taxon === "NCBITaxon:9606") {
-            //For backward compatibility
-            identifier["biologicalSex"] ="PATO:0000384";
+        if (state) {
+          if (state.uuid) {
+            identifier = { uuid: state.uuid };
+          } else if (state.entry) {
+            identifier.taxon = state.entry;
+            if (state.biologicalSex) {
+              identifier["biologicalSex"] = state.biologicalSex;
+            } else if (identifier.taxon === "NCBITaxon:9606") {
+              //For backward compatibility
+              identifier["biologicalSex"] ="PATO:0000384";
+            }
           }
         } else {
           // Set the bioloicalSex now if map is not resumed from
@@ -667,8 +692,11 @@ export default {
             this.mapImp.setState(state.viewport);
         });
       } else if (state) {
-        if (this.entry == state.entry)
+        if (this.entry == state.entry) {
           this._viewportToBeSet = state.viewport;
+          if (this.mapImp && !this.loading)
+            this.mapImp.setState(this._viewportToBeSet);
+        }
       }
     },
     showMinimap: function(flag) {
@@ -753,6 +781,10 @@ export default {
       type: String,
       default: "Beta feature - This map is based on the connectivity of a rat. New connectivity and species specificity will be added as the SPARC program progress."
     },
+    isLegacy: {
+      type: Boolean,
+      default: false
+    },
     displayLatestChanges: {
       type: Boolean,
       default: false,
@@ -866,6 +898,15 @@ export default {
   vertical-align: 5px;
 }
 
+.latest-map-text {
+  color: $app-primary-color;;
+  font-family: Asap, sans-serif;
+  font-size: 12px;
+  margin-top: 5px;
+  vertical-align: 10px;
+  cursor: pointer;
+}
+
 .latest-changesicon {
   color: $success;
 

package/src/components/MultiFlatmapVuer.vue

@@ -36,7 +36,9 @@
       :warningMessage="warningMessage"
       :displayLatestChanges="item.displayLatestChanges"
       :latestChangesMessage="item.latestChangesMessage"
+      :isLegacy="item.isLegacy"
       :ref="key"
+      @view-latest-map="viewLatestMap"
       @resource-selected="FlatmapSelected"
       @ready="FlatmapReady"
       @pan-zoom-callback="panZoomCallback"
@@ -70,6 +72,13 @@ Vue.use(Option);
 Vue.use(Select);
 Vue.use(Popover)
 
+const TAXON_UUID = {
+  "NCBITaxon:10114": "01fedbf9-d783-509c-a10c-827941ab13da",
+  "NCBITaxon:9823": "a336ac04-24db-561f-a25f-1c994fe17410",
+  "NCBITaxon:9606": "42ed6323-f645-5fbe-bada-9581819cf689",
+  "NCBITaxon:10090": "25285fab-48a0-5620-a6a0-f9a0374837d5",
+  "NCBITaxon:9685": "73060497-46a6-52bf-b975-cac511c127cb"
+}
 
 export default {
   name: "MultiFlatmapVuer",
@@ -89,6 +98,8 @@ export default {
         .then(response => response.json())
         .then(data => {
           this.speciesList= {};
+          //Check each key in the provided availableSpecies against the one 
+          // on the server, add them to the Select if the key is found
           Object.keys(this.availableSpecies).forEach(key => {
             for (let i = 0; i < data.length; i++) {
               if (this.availableSpecies[key].taxo === data[i].taxon) {
@@ -106,6 +117,7 @@ export default {
             }
           });
           if (!this.state) {
+            //No state resuming, set the current flatmap to {this.initial}
             if (this.initial && this.speciesList[this.initial] !== undefined) {
               this.activeSpecies = this.initial;
             } else {
@@ -147,13 +159,95 @@ export default {
       let map = this.getCurrentFlatmap();
       map.showMarkerPopup(featureId, node, options);
     },
-    flatmapChanged: function(species){
+    flatmapChanged: function(species, viewport){
       if (this.activeSpecies != species) 
         this.activeSpecies = species;
-      this.$refs[this.activeSpecies][0].createFlatmap();
+      this.$refs[this.activeSpecies][0].createFlatmap(viewport);
       this.$emit('flatmapChanged', this.activeSpecies);
     },
-        /**
+    /**
+     * Function to switch to the latest existing map from 
+     * a legacy map of the same species. 
+     * 
+     * @private
+     */
+    viewLatestMap: function(state) {
+      const keys = Object.keys(this.speciesList);
+      for (let i = 0; i < keys.length; i++) {
+        const species = this.speciesList[keys[i]];
+        if (!species.isLegacy &&
+          (species.taxo === state.entry) && 
+         (species.biologicalSex === state.biologicalSex)) {
+           this.flatmapChanged(keys[i], state);
+           return;
+        }
+      }
+    },
+    createLegacyEntry: function(state, taxo, uuid) {
+      if (uuid && taxo) {
+        let name = "Legacy";
+        if (state.species) {
+          if (state.species.slice(0, 6) === "Legacy")
+            name = state.species;
+          else
+            name = name + ` ${state.species}`;
+        }
+        this.speciesList[name] = {
+          taxo: taxo,
+          isLegacy: true,
+          displayWarning: true
+        };
+        return {
+          species: name,
+          state: {
+            entry: taxo,
+            uuid: uuid
+          },
+          viewport: state.state.viewport,
+        }
+      }
+    },
+    /**
+     * Function used to translate the legacy map state to one that can be used in current
+     * flatmap if required. If it is a legacy, an Select entry will be added
+     * 
+     * @private
+     */
+    updateState: function(state) {
+      return new Promise((resolve) => {
+        if (state && state.state) {
+          const mapState = state.state;
+          //uuid is not in the state, this is a legacy map
+          if (!mapState.uuid) {
+            if (mapState.entry) {
+              const uuid = mapState.entry in TAXON_UUID ? TAXON_UUID[mapState.entry] : undefined;
+              const newState = this.createLegacyEntry(state, mapState.entry, uuid);
+              resolve(newState ? newState : state);
+            }
+          } else if (mapState.entry) {
+            //uuid is in the state but should be checked if it is the latest map
+            //for that taxon
+            return new Promise(() => {
+              const mapManager = new (require("@abi-software/flatmap-viewer")).MapManager(this.flatmapAPI);
+              //mapManager.findMap_ is an async function so we need to wrap this with a promise
+              mapManager.findMap_({taxon: mapState.entry}).then(map => {
+                if (map.uuid !== mapState.uuid) {
+                  return this.createLegacyEntry(state, mapState.entry, mapState.uuid);
+                }
+              }).then(newState => {
+                resolve(newState ? newState : state);
+              })
+              .catch(() => {
+                resolve(state);
+              });
+            });
+          }
+          //Create a new state and add the legacy map to the select
+        }
+        resolve(state);
+      });
+    },
+    /**
      * Function used for getting the current states of the scene. This exported states 
      * can be imported using the importStates method.
      * 
@@ -177,19 +271,24 @@ export default {
     setState: function(state) {
       if (state) {
         this.initialise().then(() => {
-          if (state.species && state.species !== this.activeSpecies) {
-            this.activeSpecies = state.species;
-            if (state.state) {
-              //Wait for next tick when the refs are ready for rendering
-              this.$nextTick(() => {
-                this.$refs[this.activeSpecies][0].createFlatmap(state.state);
-                this.$emit('flatmapChanged', this.activeSpecies);
-              })
+          //Update state if required
+          this.updateState(state).then(currentState => {
+            if (currentState.species && (currentState.species !== this.activeSpecies)) {
+              this.activeSpecies = currentState.species;
+              if (currentState.state) {
+                //Wait for next tick when the refs are ready for rendering
+                this.$nextTick(() => {
+                  if (this.activeSpecies in this.$refs) {
+                    this.$refs[this.activeSpecies][0].createFlatmap(currentState.state);
+                    this.$emit('flatmapChanged', this.activeSpecies);
+                  }
+                })
+              }
+            } else if (currentState.state) {
+              let map = this.getCurrentFlatmap();
+              map.setState(currentState.state);
             }
-          } else if (state.state) {
-            let map = this.getCurrentFlatmap();
-            map.setState(state.state);
-          }
+          });
         })
       }
     },
@@ -242,7 +341,19 @@ export default {
       type: String,
       default: "Beta feature - This map is based on the connectivity of a rat. New connectivity and species specificity will be added as the SPARC program progress."
     },
-    availableSpecies: {},
+    availableSpecies: {
+      type: Object,
+      default: function() {
+        return {
+          "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
+          "Human Male":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass:"mapicon-icon_human", displayWarning:true},
+          "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayLatestChanges: true},
+          "Mouse":{taxo: "NCBITaxon:10090", iconClass:"mapicon-icon_mouse", displayWarning: true},
+          "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning: true},
+          "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning: true},
+        }
+      }
+    },
     /**
      * State containing state of the flatmap.
      */

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/?'