Merge pull request ABI-Software#183 from ddjnw1yu/map-annotation-shor…

…tcut

Map annotation shortcut

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.3.2",
+  "version": "1.3.2-beta.2",
   "license": "Apache-2.0",
   "files": [
     "dist/*",

src/App.vue

@@ -150,6 +150,7 @@ export default {
       //component.showPathwaysDrawer(false);
       if (this.consoleOn) console.log(taxon, id)
       //component.searchAndShowResult("heart");
+      // component.changeViewingMode('Annotation')
     },
     panZoomcallback: function (payload) {
       this.payload = payload

src/components/FlatmapVuer.vue

@@ -437,19 +437,19 @@ Please use `const` to assign meaningful names to them...
           <el-row class="backgroundControl">
             <div style="margin-bottom: 2px;">
               <template
-                  v-for="(item, i) in viewingModes"
-                  :key="item + i"
+                  v-for="(value, key, index) in viewingModes"
+                  :key="key"
                 >
-                  <template v-if="item.name === viewingMode">
-                    <span class="viewing-mode-title"><b >{{ item.name }}</b></span>
+                  <template v-if="key === viewingMode">
+                    <span class="viewing-mode-title"><b >{{ key }}</b></span>
                   </template>
                   <template v-else>
-                    <span class="viewing-mode-unselected" @click="changeViewingMode(i)">{{ item.name }}</span>
+                    <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
                   </template>
               </template>
             </div>
             <el-row class="viewing-mode-description">
-              {{ viewingModes[viewingModeIndex].description}}
+              {{ viewingModes[viewingMode] }}
             </el-row>
           </el-row>
           <template v-if="viewingMode === 'Annotation' && userInformation">
@@ -1689,13 +1689,10 @@ export default {
      * Function triggered by viewing mode change.
      * (e.g., from 'Exploration' to 'Annotation')
      * All tooltips and popups currently showing on map will be closed
-     * when this function is triggered. Optional index can be provided, this will
-     * switch the provided view mode to the first index.
      */
-     changeViewingMode: function (newModeIndex=null) {
-      if (newModeIndex !== null) {
-        //this.viewingMode = this.viewingModes[newModeIndex].name
-        this.viewingModeIndex = newModeIndex
+    changeViewingMode: function (modeName) {
+      if (modeName) {
+        this.viewingMode = modeName
       }
       this.closeTooltip()
     },
@@ -2693,20 +2690,11 @@ export default {
       currentActive: '',
       selectedDrawnFeature: undefined, // Clicked drawn annotation
       currentHover: '',
-      viewingModeIndex: 0,
+      viewingMode: 'Exploration',
       viewingModes: {
-        0: {
-          name: 'Exploration',
-          description:'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources'
-        },
-        1: {
-          name: 'Neuron Connection',
-          description: 'Discover Neuron connections by selecting a neuron and viewing its associated network connections'
-        },
-        2: {
-          name: 'Annotation',
-          description: 'View internal identifiers of features'
-        }
+        'Exploration': 'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources',
+        'Neuron Connection': 'Discover Neuron connections by selecting a neuron and viewing its associated network connections',
+        'Annotation': 'View internal identifiers of features'
       },
       drawnType: 'All tools',
       drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
@@ -2757,9 +2745,6 @@ export default {
     isValidDrawnCreated: function () {
       return Object.keys(this.drawnCreatedEvent).length > 0
     },
-    viewingMode: function() {
-      return this.viewingModes[this.viewingModeIndex].name
-    },
   },
   watch: {
     entry: function () {

src/components/MultiFlatmapVuer.vue

@@ -511,6 +511,14 @@ export default {
        */
       this.$emit('shown-map-tooltip');
     },
+    /**
+     * @vuese
+     * Function to change the view mode of the map.
+     */
+    changeViewingMode: function (modeName) {
+      let map = this.getCurrentFlatmap()
+      map.changeViewingMode(modeName)
+    },
   },
   props: {
     /**