@abi-software/flatmapvuer 0.3.12 → 0.3.13-beta-1

package/package.json

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

package/src/components/FlatmapVuer.vue

@@ -516,9 +516,9 @@ export default {
       let myOptions = options;
       if (this.mapImp) {
         if (myOptions) {
-          if (!myOptions.className) myOptions.className = "flatmapvuer-popover";
+          if (!myOptions.className) myOptions.className = "custom-popup";
         } else {
-          myOptions = { className: "flatmapvuer-popover", positionAtLastClick: true };
+          myOptions = { className: "custom-popup", positionAtLastClick: true };
         }
         this.mapImp.showPopup(featureId, node, myOptions);
       }
@@ -614,6 +614,14 @@ export default {
         }
       }
     },
+    restoreMapState: function(state) {
+      if (state) {
+        if (state.viewport)
+          this.mapImp.setState(state.viewport);
+        if (state.searchTerm)
+          this.searchAndShowResult(state.searchTerm, true);
+      }
+    },
     createFlatmap: function(state) {
       if (!this.mapImp && !this.loading) {
         this.loading = true;
@@ -687,16 +695,17 @@ export default {
           this.pathways = this.mapImp.pathTypes();
           this.$emit("ready", this);
           this.loading = false;
-          if (this._viewportToBeSet)
-            this.mapImp.setState(this._viewportToBeSet);
-          else if (state && state.viewport)
-            this.mapImp.setState(state.viewport);
+          if (this._stateToBeSet)
+            this.restoreMapState(this._viewportToBeSet);
+          else {
+            this.restoreMapState(state);
+          }
         });
       } else if (state) {
         if (this.entry == state.entry) {
-          this._viewportToBeSet = state.viewport;
+          this._stateToBeSet = { viewport: state.viewport, searchTerm: searchTerm };
           if (this.mapImp && !this.loading)
-            this.mapImp.setState(this._viewportToBeSet);
+            this.restoreMapState(this._stateToBeSet);
         }
       }
     },
@@ -708,17 +717,28 @@ export default {
       this.drawerOpen = flag;
     },
     /**
-     * Function to display features with annotation matching the provided term.
+     * Function to display features with annotation matching the provided term,
+     * with the option to display the label using displayLabel flag. 
      */
-    searchAndShowResult: function(term) {
+    searchAndShowResult: function(term, displayLabel) {
       if (this.mapImp) {
         if (term === undefined || term === "") {
           this.mapImp.clearSearchResults();
           return true;
         } else {
-          let searchResults = this.mapImp.search(term);
-          if (searchResults && searchResults.__featureIds.length > 0) {
+          const searchResults = this.mapImp.search(term);
+          if (searchResults && searchResults.results &&
+            searchResults.results.length > 0) {
             this.mapImp.showSearchResults(searchResults);
+            if (displayLabel && 
+              searchResults.results[0].featureId && 
+              searchResults.results[0].text) {
+              this.mapImp.showPopup(
+                searchResults.results[0].featureId,
+                searchResults.results[0].text,
+                {className: "custom-popup", positionAtLastClick: false }
+              )
+            }
             return true;
           }
           else
@@ -1461,5 +1481,81 @@ export default {
     }
   }
 }
+
+::v-deep .custom-popup {
+  .mapboxgl-popup-tip {
+    display: none;
+  }
+  .mapboxgl-popup-content {
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    pointer-events: none;
+    display: none;
+    background: #fff;
+    font-family: "Asap",sans-serif;
+    font-size: 12pt;
+    color: $app-primary-color;
+    border: 1px solid $app-primary-color;
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::after,
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      flex-shrink: 0;
+    }
+    .mapboxgl-popup-close-button {
+      display: none;
+    }
+  }
+  &.mapboxgl-popup-anchor-bottom {
+    .mapboxgl-popup-content {
+      margin-bottom: 12px;
+      &::after,
+      &::before {
+        top: 100%;
+        border-width: 12px;
+      }
+      /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
+      &::after {
+        margin-top: -1px;
+        border-color: rgb(255, 255, 255) transparent transparent transparent;
+      }
+      /* this border color controlls the outside, thin border */
+      &::before {
+        margin: 0 auto;
+        border-color: $app-primary-color transparent transparent transparent;
+      }
+    }
+  }
+  &.mapboxgl-popup-anchor-top {
+    .mapboxgl-popup-content {
+      margin-top: 18px;
+      &::after,
+      &::before {
+        top: calc(-100% + 6px);
+        border-width: 12px;
+      }
+      /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
+      &::after {
+        margin-top: 1px;
+        border-color: transparent transparent rgb(255, 255, 255) transparent;
+      }
+      &::before {
+        margin: 0 auto;
+        border-color: transparent transparent $app-primary-color transparent;
+      }
+    }
+  }
+}
 </style>
 

package/src/components/MultiFlatmapVuer.vue

@@ -14,7 +14,7 @@
         placeholder="Select"
         class="select-box"
         popper-class="flatmap_dropdown"
-        @change="flatmapChanged"
+        @change="setSpecies"
         v-popover:selectPopover
       >
         <el-option v-for="(item, key) in speciesList" :key="key" :label="key" :value="key">
@@ -85,6 +85,10 @@ export default {
   components: {
     FlatmapVuer
   },
+  beforeMount() {
+    this._resolveList = [];
+    this._initialised = false;
+  },
   mounted: function() {
     this.initialise();
     EventBus.$on('onActionClick', (action) =>{
@@ -100,6 +104,7 @@ export default {
           fetch(this.flatmapAPI)
           .then(response => response.json())
           .then(data => {
+            this._initialised = true;
             //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 => {
@@ -118,21 +123,34 @@ export default {
                 }
               }
             });
-            if (!this.state) {
+            //Use the state species if it does not have any other species information 
+            let species = this.initial;
+            if (this.state) {
+              const mapState = this.state.state;
+              if ((!mapState || ( !mapState.uuid && !mapState.entry )) && this.state.species)
+                species = this.state.species;
+              else
+                species = undefined;
+            }
+            if (species) {
               //No state resuming, set the current flatmap to {this.initial}
-              if (this.initial && this.speciesList[this.initial] !== undefined) {
-                this.activeSpecies = this.initial;
+              if (species && this.speciesList[species] !== undefined) {
+                this.activeSpecies = species;
               } else {
                 this.activeSpecies = Object.keys(this.speciesList)[0];
               }
-              Vue.nextTick(() => {
-                if (this.$refs[this.activeSpecies])
-                  this.$refs[this.activeSpecies][0].createFlatmap();
-              });
+              this.setSpecies(this.activeSpecies, this.state ? this.state.state : undefined, 5);
             }
+            resolve();
+            this._resolveList.forEach(other => { other(); });
           });
+        } else if (this._initialised) {
+          //resolve as it has been initialised
+          resolve();
+        } else {
+          //resolve when the list request has been resolved
+          this._resolveList.push(resolve);
         }
-        resolve();
       })
     },
     FlatmapSelected: function(resource) {
@@ -162,11 +180,19 @@ export default {
       let map = this.getCurrentFlatmap();
       map.showMarkerPopup(featureId, node, options);
     },
-    flatmapChanged: function(species, viewport){
-      if (this.activeSpecies != species) 
+    setSpecies: function(species, state, numberOfRetry) {
+      if (this.$refs && species in this.$refs) {
         this.activeSpecies = species;
-      this.$refs[this.activeSpecies][0].createFlatmap(viewport);
-      this.$emit('flatmapChanged', this.activeSpecies);
+        this.$refs[this.activeSpecies][0].createFlatmap(state);
+        this.$emit('flatmapChanged', this.activeSpecies);
+      } else if (numberOfRetry) {
+        const retry = numberOfRetry - 1;
+        if (retry >= 0) {
+          Vue.nextTick(() => {
+            this.setSpecies(species, state, retry);
+          });
+        }
+      }
     },
     /**
      * Function to switch to the latest existing map from 
@@ -181,7 +207,7 @@ export default {
         if (!species.isLegacy &&
           (species.taxo === state.entry) && 
          (species.biologicalSex === state.biologicalSex)) {
-           this.flatmapChanged(keys[i], state);
+           this.setSpecies(keys[i], state, 0);
            return;
         }
       }
@@ -215,6 +241,7 @@ export default {
             entry: taxo,
             uuid: uuid,
             viewport: state.state.viewport,
+            searchTerm: state.state.searchTerm
           },
         }
       }
@@ -242,7 +269,10 @@ export default {
             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 => {
+              const identifier = { taxon: mapState.entry };
+              if (mapState.biologicalSex)
+                identifier['biologicalSex'] = mapState.biologicalSex;
+              mapManager.findMap_(identifier).then(map => {
                 if (map.uuid !== mapState.uuid) {
                   return this.createLegacyEntry(state, mapState.entry, mapState.uuid);
                 }
@@ -282,26 +312,17 @@ export default {
      */
     setState: function(state) {
       if (state) {
-        this.initialise().then(() => {
           //Update state if required
-          this.updateState(state).then(currentState => {
+        this.updateState(state).then(currentState => {
+          this.initialise().then(() => {
             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);
-                  }
-                })
-              }
+              this.setSpecies(currentState.species, currentState.state, 5);
             } else if (currentState.state) {
               let map = this.getCurrentFlatmap();
               map.setState(currentState.state);
             }
           });
-        })
+        });
       }
     },
     resourceSelected: function(action) {

package/dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>flatmapvuer demo</title>
-<script src="./flatmapvuer.umd.js"></script>
-
-<link rel="stylesheet" href="./flatmapvuer.css">
-
-
-<script>
-console.log(flatmapvuer)
-</script>