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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.11",
+  "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) {
@@ -620,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
@@ -669,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) {
@@ -755,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,
@@ -868,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.
      */