@abi-software/flatmapvuer 0.3.11 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "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,18 @@ 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";
+        //This now handle the uses of uuid when resuming states
+        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 +693,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 +782,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 +899,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;
 
@@ -949,13 +989,15 @@ export default {
 .svg-legends-container {
   width:70%;
   height:auto;
+  position:relative;
+  max-height:140px;
 }
 
 .pathway-container {
   float: left;
   padding-left: 16px;
   padding-right: 18px;
-  max-height: calc(100% - 184px);
+  max-height: calc(100% - 140px);
   text-align: left;
   overflow: auto;
   border: 1px solid rgb(220, 223, 230);

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",
@@ -85,39 +94,45 @@ export default {
   methods: {
     initialise: function() {
       return new Promise(resolve => {
-        fetch(this.flatmapAPI)
-        .then(response => response.json())
-        .then(data => {
-          this.speciesList= {};
-          Object.keys(this.availableSpecies).forEach(key => {
-            for (let i = 0; i < data.length; i++) {
-              if (this.availableSpecies[key].taxo === data[i].taxon) {
-                if (this.availableSpecies[key].biologicalSex) {
-                  if (data[i].biologicalSex && 
-                    data[i].biologicalSex === this.availableSpecies[key].biologicalSex) {
-                      this.speciesList[key] = this.availableSpecies[key];
-                      break;
-                    }
-                } else {
-                  this.speciesList[key] = this.availableSpecies[key];
-                  break;
+        if (this.requireInitialisation) {
+          //It has not been initialised yet
+          this.requireInitialisation = false;
+          fetch(this.flatmapAPI)
+          .then(response => response.json())
+          .then(data => {
+            //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) {
+                  if (this.availableSpecies[key].biologicalSex) {
+                    if (data[i].biologicalSex && 
+                      data[i].biologicalSex === this.availableSpecies[key].biologicalSex) {
+                        this.$set(this.speciesList, key, this.availableSpecies[key]);
+                        break;
+                      }
+                  } else {
+                    this.$set(this.speciesList, key, this.availableSpecies[key]);
+                    break;
+                  }
                 }
               }
+            });
+            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 {
+                this.activeSpecies = Object.keys(this.speciesList)[0];
+              }
+              Vue.nextTick(() => {
+                if (this.$refs[this.activeSpecies])
+                  this.$refs[this.activeSpecies][0].createFlatmap();
+              });
             }
           });
-          if (!this.state) {
-            if (this.initial && this.speciesList[this.initial] !== undefined) {
-              this.activeSpecies = this.initial;
-            } else {
-              this.activeSpecies = Object.keys(this.speciesList)[0];
-            }
-            Vue.nextTick(() => {
-              if (this.$refs[this.activeSpecies])
-                this.$refs[this.activeSpecies][0].createFlatmap();
-            });
-          }
-          resolve();
-        });
+        }
+        resolve();
       })
     },
     FlatmapSelected: function(resource) {
@@ -147,13 +162,104 @@ 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;
+        }
+      }
+    },
+    /**
+     * Create a legacy entry with the provided information
+     * 
+     * @private
+     */
+    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.$set(
+          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 +283,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 +353,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.
      */
@@ -266,7 +389,8 @@ export default {
     return {
       activeSpecies: undefined,
       appendToBody: false,
-      speciesList: {}
+      speciesList: {},
+      requireInitialisation: true,
     };
   },
   watch: {

package/src/components/legends/Legends.vue

@@ -29,7 +29,7 @@ export default {
 <style scoped lang="scss">
 .legends-container {
   pointer-events: none;
-  transform: translate(0px, -20px);
+  transform: translate(0px, -35px);
 }
 
 .st0-translate {