@abi-software/flatmapvuer 1.1.0-beta.3 → 1.1.1

package/src/components/FlatmapVuer.vue

@@ -27,15 +27,15 @@ Please use `const` to assign meaningful names to them...
  -->
             <p
               v-if="isLegacy"
-              @mouseover="showToolitip(6)"
-              @mouseout="hideToolitip(6)"
+              @mouseover="showTooltip(6)"
+              @mouseout="hideTooltip(6)"
             >
               This is a legacy map, you may view the latest map instead.
             </p>
             <p
               v-else-if="isFC"
-              @mouseover="showToolitip(6)"
-              @mouseout="hideToolitip(6)"
+              @mouseover="showTooltip(6)"
+              @mouseout="hideTooltip(6)"
             >
               This map displays the connectivity of individual neurons.
               Specifically, those which align with (parts of) the neuron
@@ -54,7 +54,7 @@ Please use `const` to assign meaningful names to them...
                 SCKAN </a
               >.
             </p>
-            <p v-else @mouseover="showToolitip(6)" @mouseout="hideToolitip(6)">
+            <p v-else @mouseover="showTooltip(6)" @mouseout="hideTooltip(6)">
               This map displays the connectivity of neuron populations.
               Specifically, those from the primarily rat-based
               <a
@@ -76,8 +76,8 @@ Please use `const` to assign meaningful names to them...
               <div
                 class="warning-icon"
                 v-if="displayWarning"
-                @mouseover="showToolitip(6)"
-                @mouseout="hideToolitip(6)"
+                @mouseover="showTooltip(6)"
+                @mouseout="hideTooltip(6)"
               >
                 <el-icon><el-icon-warning-filled /></el-icon>
                 <template v-if="isLegacy">
@@ -100,13 +100,14 @@ Please use `const` to assign meaningful names to them...
           trigger="manual"
           popper-class="warning-popper flatmap-popper"
           :visible="hoverVisibilities[7].value"
+          ref="whatsNewPopover"
         >
           <template #reference>
             <div
               class="latest-changesicon"
               v-if="displayLatestChanges"
-              @mouseover="showToolitip(7)"
-              @mouseout="hideToolitip(7)"
+              @mouseover="showTooltip(7)"
+              @mouseout="hideTooltip(7)"
             >
               <el-icon><el-icon-warning-filled /></el-icon>
               <span class="warning-text">What's new?</span>
@@ -144,22 +145,20 @@ Please use `const` to assign meaningful names to them...
       <DrawTool
         v-if="viewingMode === 'Annotation' && userInformation && !disableUI"
         :helpMode="helpMode"
+        :hoverVisibilities=hoverVisibilities
         :flatmapCanvas="this.$el"
-        :inDrawing="inDrawing"
-        :activeDrawTool="activeDrawTool"
         :drawnType="drawnType"
-        :drawnTypes="drawnTypes"
+        :activeDrawTool="activeDrawTool"
         :activeDrawMode="activeDrawMode"
-        :drawModes="drawModes"
-        :connectionDisplay="connectionDisplay"
+        :drawnCreatedEvent="drawnCreatedEvent"
         :connectionEntry="connectionEntry"
         @drawToolbarEvent="drawToolbarEvent"
-        @dialogDisplay="connectionDialogDisplay"
         @confirmDrawn="confirmDrawnFeature"
         @cancelDrawn="cancelDrawnFeature"
-        @showFeatureTooltip="showConnectedFeatureTooltip"
-        @hideFeatureTooltip="hideConnectedFeatureTooltip"
-        @connection="(display) => connectionDisplay = display"
+        @featureTooltip="connectedFeatureTooltip"
+        @showTooltip="showTooltip"
+        @hideTooltip="hideTooltip"
+        ref="drawToolPopover"
       />
 
       <div class="bottom-right-control" v-show="!disableUI">
@@ -171,14 +170,15 @@ Please use `const` to assign meaningful names to them...
           width="70"
           popper-class="flatmap-popper"
           :visible="hoverVisibilities[0].value"
+          ref="zoomInPopover"
         >
           <template #reference>
             <map-svg-icon
               icon="zoomIn"
               class="icon-button zoomIn"
               @click="zoomIn()"
-              @mouseover="showToolitip(0)"
-              @mouseout="hideToolitip(0)"
+              @mouseover="showTooltip(0)"
+              @mouseout="hideTooltip(0)"
             />
           </template>
         </el-popover>
@@ -190,14 +190,15 @@ Please use `const` to assign meaningful names to them...
           width="70"
           popper-class="flatmap-popper"
           :visible="hoverVisibilities[1].value"
+          ref="zoomOutPopover"
         >
           <template #reference>
             <map-svg-icon
               icon="zoomOut"
               class="icon-button zoomOut"
               @click="zoomOut()"
-              @mouseover="showToolitip(1)"
-              @mouseout="hideToolitip(1)"
+              @mouseover="showTooltip(1)"
+              @mouseout="hideTooltip(1)"
             />
           </template>
         </el-popover>
@@ -209,6 +210,7 @@ Please use `const` to assign meaningful names to them...
           width="70"
           popper-class="flatmap-popper"
           :visible="hoverVisibilities[2].value"
+          ref="zoomFitPopover"
         >
           <div>
             Fit to
@@ -220,8 +222,8 @@ Please use `const` to assign meaningful names to them...
               icon="fitWindow"
               class="icon-button fitWindow"
               @click="resetView()"
-              @mouseover="showToolitip(2)"
-              @mouseout="hideToolitip(2)"
+              @mouseover="showTooltip(2)"
+              @mouseout="hideTooltip(2)"
             />
           </template>
         </el-popover>
@@ -249,6 +251,7 @@ Please use `const` to assign meaningful names to them...
               v-popover:checkBoxPopover
             >
               <svg-legends v-if="!isFC" class="svg-legends-container" />
+              <template v-if="showStarInLegend">
               <el-popover
                 content="Location of the featured dataset"
                 placement="right"
@@ -257,20 +260,20 @@ Please use `const` to assign meaningful names to them...
                 width="max-content"
                 :offset="-10"
                 popper-class="flatmap-popper flatmap-teleport-popper"
-                :visible="hoverVisibilities[9].value && showStarInLegend"
+                :visible="hoverVisibilities[9].value"
                 ref="featuredMarkerPopover"
               >
                 <template #reference>
                   <div
-                    v-show="showStarInLegend"
                     v-popover:featuredMarkerPopover
                     class="yellow-star-legend"
                     v-html="yellowstar"
-                    @mouseover="showToolitip(9)"
-                    @mouseout="hideToolitip(9)"
+                    @mouseover="showTooltip(9)"
+                    @mouseout="hideTooltip(9)"
                   ></div>
                 </template>
               </el-popover>
+              </template>
               <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
               <el-popover
                 content="Find these markers for data"
@@ -310,6 +313,7 @@ Please use `const` to assign meaningful names to them...
                 @changed="alertSelected"
                 @checkboxMouseEnter="alertMouseEnterEmitted"
                 @selections-data-changed="onSelectionsDataChanged"
+                @checkAll="checkAllAlerts"
                 ref="alertSelection"
                 key="alertSelection"
               />
@@ -357,6 +361,7 @@ Please use `const` to assign meaningful names to them...
                 title="Studied in"
                 labelKey="label"
                 identifierKey="taxon"
+                helpMessage="Evidence exists that this set of neuron populations have been studied in the given species."
                 :selections="taxonConnectivity"
                 @changed="taxonsSelected"
                 @checkboxMouseEnter="taxonMouseEnterEmitted"
@@ -554,6 +559,7 @@ Please use `const` to assign meaningful names to them...
             placement="right"
             :teleported="false"
             popper-class="flatmap-popper"
+            ref="openMapPopover"
           >
             <template #reference>
               <map-svg-icon
@@ -561,8 +567,8 @@ Please use `const` to assign meaningful names to them...
                 ref="openMapRef"
                 icon="openMap"
                 class="icon-button open-map-button"
-                @mouseover="showToolitip(8)"
-                @mouseout="hideToolitip(8)"
+                @mouseover="showTooltip(8)"
+                @mouseout="hideTooltip(8)"
               />
             </template>
           </el-popover>
@@ -575,14 +581,15 @@ Please use `const` to assign meaningful names to them...
             :teleported="false"
             trigger="manual"
             popper-class="flatmap-popper"
+            ref="settingsPopover"
           >
             <template #reference>
               <map-svg-icon
                 ref="backgroundIconRef"
                 icon="changeBckgd"
                 class="icon-button"
-                @mouseover="showToolitip(3)"
-                @mouseout="hideToolitip(3)"
+                @mouseover="showTooltip(3)"
+                @mouseout="hideTooltip(3)"
               />
             </template>
           </el-popover>
@@ -763,9 +770,9 @@ export default {
      * Function to initialise drawing.
      */
     initialiseDrawing: function () {
-      this.inDrawing = false
-      this.initialiseDialog()
+      this.connectionEntry = {}
       this.activeDrawTool = undefined
+      this.activeDrawMode = undefined
       this.drawnCreatedEvent = undefined
     },
     /**
@@ -785,19 +792,21 @@ export default {
     },
     /**
      * @vuese
-     * Function to show connected features' tooltip for drawn connectivity.
+     * Function to display connected features' tooltip for drawn connectivity.
      * @arg id
      */
-    showConnectedFeatureTooltip: function (id) {
+    connectedFeatureTooltip: function (value) {
       if (this.mapImp) {
-        if (id) {
-          const numericId = Number(id)
+        if (value) {
+          const numericId = Number(value)
           let payload = { feature: {} }
           if (numericId) {
             const data = this.mapImp.featureProperties(numericId)
             payload.feature = data
           } else {
-            const drawnFeature = this.allDrawnFeatures.filter((feature) => feature.id === id.replace(' ', ''))[0]
+            const drawnFeature = this.existDrawnFeatures.find(
+              (feature) => feature.id === value.replace(' ', '')
+            )
             payload.feature.feature = drawnFeature
           }
           this.checkAndCreatePopups(payload)
@@ -806,17 +815,6 @@ export default {
         }
       }
     },
-    /**
-     * @vuese
-     * Function to hide connected features' tooltip for drawn connectivity.
-     * @arg id
-     */
-    hideConnectedFeatureTooltip: function (id) {
-      if (this.mapImp) {
-        // const numericId = Number(id)
-        this.closeTooltip()
-      }
-    },
     /**
      * @vuese
      * Function to confirm a newly drawn feature.
@@ -833,26 +831,6 @@ export default {
         this.initialiseDrawing()
       }
     },
-    /**
-     * @vuese
-     * Function to initialise connection dialog.
-     */
-    initialiseDialog: function () {
-      this.connectionDisplay = false
-      this.connectionEntry = {}
-    },
-    /**
-     * @vuese
-     * Function to display the connection dialog after finalising a drawing.
-     */
-    connectionDialogDisplay: function () {
-      const inactive = this.$el.querySelector('.drawConnection').classList.contains('inactive')
-      // disable click popup if icon inactive or in drawing
-      if (!inactive && !this.inDrawing) { 
-        this.closeTooltip()
-        this.connectionDisplay = !this.connectionDisplay
-      }
-    },
     /**
      * @vuese
      * Function to process the annotation toolbar click events.
@@ -860,29 +838,58 @@ export default {
      */
     drawToolbarEvent: function (type) {
       this.closeTooltip()
-      if (this.drawnTypes.includes(type) && !this.activeDrawMode && !this.connectionDisplay) {
+      this.doubleClickedFeature = false
+      if (type === 'Delete') {
+        this.activeDrawMode = this.activeDrawMode === 'Delete' ? undefined : 'Delete'
+      } else if (type === 'Edit') {
+        this.activeDrawMode = this.activeDrawMode === 'Edit' ? undefined : 'Edit'
+      } else {
         this.activeDrawTool = type
-      } else if (this.drawModes.includes(type) && !this.activeDrawTool) {
-        if (type === 'Delete') {
-          if (
-            this.selectedDrawnFeature &&
-            // For either no mode is on or edit is on
-            (!this.activeDrawMode || this.activeDrawMode === 'Edit')
-          ) {
-            // Force simple_select a feature for delete event
-            this.doubleClickedFeature = false
+      }
+      if (Object.keys(this.annotationEntry).length > 0 && !this.featureAnnotationSubmitted) {
+        this.rollbackAnnotationEvent()
+      }
+    },
+        /**
+     * @vuese
+     * Function to fire annotation event based on the provided ``data``.
+     * Either edit or delete event.
+     * @arg data
+     */
+    drawModeEvent: function (data) {
+      if (this.activeDrawMode === 'Edit') {
+        if (this.doubleClickedFeature) {
+          if (data.feature.feature.geometry.type !== 'Point') {
             this.changeAnnotationDrawMode({
-              mode: 'simple_select',
-              options: { featureIds: [this.selectedDrawnFeature.id] }
+              mode: 'direct_select',
+              options: { featureId: data.feature.feature.id }
             })
             this.modifyAnnotationFeature()
           }
-          this.activeDrawMode = this.activeDrawMode === 'Delete' ? undefined : 'Delete'
-          // clear selectedDrawnFeature when quit delete mode
-          if (!this.activeDrawMode) this.selectedDrawnFeature = undefined
-        } else if (type === 'Edit') {
-          this.activeDrawMode = this.activeDrawMode === 'Edit' ? undefined : 'Edit'
+          this.doubleClickedFeature = false
+        }
+      }
+      if (this.activeDrawMode === 'Delete') {
+        this.changeAnnotationDrawMode({
+          mode: 'simple_select',
+          options: { featureIds: [data.feature.feature.id] }
+        })
+        this.modifyAnnotationFeature()
+      }
+    },
+    /**
+     * Function to create connectivity body from existing entries.
+     */
+    createConnectivityBody: function () {
+      if (Object.keys(this.connectionEntry).length > 0) {
+        const features = Object.values(this.connectionEntry)
+        const body = {
+          type: 'connectivity',
+          source: features[0],
+          target: features[features.length - 1],
+          intermediates: features.filter((f, index) => index !== 0 && index !== features.length - 1),
         }
+        this.annotationEntry.body = body
       }
     },
     /**
@@ -902,8 +909,7 @@ export default {
     clearAnnotationFeature: function () {
       if (
         this.mapImp &&
-        this.allDrawnFeatures &&
-        this.allDrawnFeatures.length > 0
+        this.existDrawnFeatures.length > 0
       ) {
         this.mapImp.clearAnnotationFeature()
       }
@@ -929,9 +935,10 @@ export default {
       // For 'updated' and 'deleted' callback
       if (
         this.mapImp &&
-        this.drawnAnnotationEvent.includes(this.annotationEntry.type)
+        ['created', 'updated', 'deleted'].includes(this.annotationEntry.type)
       ) {
         this.mapImp.rollbackAnnotationEvent(this.annotationEntry)
+        this.annotationEntry = {}
       }
     },
     /**
@@ -942,14 +949,14 @@ export default {
     commitAnnotationEvent: function (annotation) {
       if (
         this.mapImp &&
-        this.drawnAnnotationEvent.includes(this.annotationEntry.type) &&
+        ['created', 'updated', 'deleted'].includes(this.annotationEntry.type) &&
         // Only when annotation comments stored successfully
         annotation
       ) {
         this.featureAnnotationSubmitted = true
         this.mapImp.commitAnnotationEvent(this.annotationEntry)
         if (this.annotationEntry.type === 'deleted') this.closeTooltip()
-        else this.addAnnotationFeature() // Update 'allDrawnFeatures' when created or updated event
+        else this.addAnnotationFeature() // Update 'existDrawnFeatures' when created or updated event
       }
     },
     /**
@@ -1005,11 +1012,13 @@ export default {
         if (this.drawnType !== 'None') {
           if (!this.featureAnnotationSubmitted) this.loading = true
           const userId = this.annotatedType === 'Anyone' ?
-            undefined : this.userInformation.orcid ? this.userInformation.orcid : '0000-0000-0000-0000'
+            undefined : this.userInformation.orcid ?
+              this.userInformation.orcid : '0000-0000-0000-0000'
           const participated = this.annotatedType === 'Anyone' ?
-            undefined : this.annotatedType === 'Me' ? true : false
+            undefined : this.annotatedType === 'Me' ?
+              true : false
           const drawnFeatures = await this.fetchDrawnFeatures(userId, participated)
-          this.allDrawnFeatures = drawnFeatures
+          this.existDrawnFeatures = drawnFeatures
           this.loading = false
           if (!this.featureAnnotationSubmitted) {
             for (const feature of drawnFeatures) {
@@ -1041,6 +1050,7 @@ export default {
       this.drawnType = flag
       if (this.mapImp) {
         this.addAnnotationFeature()
+        this.initialiseDrawing()
       }
     },
     /**
@@ -1270,9 +1280,6 @@ export default {
         // Check and flatten the origins node graph
         let originsFlat = connectivity?.ids?.dendrites?.flat().flat()
 
-        // Remove the origin nodes from the path features so that we only see downstream nodes
-        pathFeatures = pathFeatures.filter((p) => !originsFlat.includes(p.models))
-
         let toHighlight = []
         let highlight = false
 
@@ -1302,6 +1309,32 @@ export default {
         this.mapImp.zoomToFeatures(toHighlight, { noZoomIn: true })
       }
     },
+    resetMapFilter: function() {
+      const alert = this.mapFilters.alert;
+      let filter = undefined;
+      if (alert.with) {
+        if (!alert.without) {
+          filter = {
+            HAS: 'alert',
+          };
+        }
+      } else {
+        if (alert.without) {
+          filter = {
+            NOT: { HAS: 'alert'},
+          };
+        } else {
+          filter = {
+            AND: [ {NOT: { HAS: 'alert'}}, { HAS: 'alert'}]
+          }
+        }
+      }
+      if (filter) {
+        this.mapImp.setVisibilityFilter(filter)
+      } else {
+        this.mapImp.clearVisibilityFilter()
+      }
+    },
     /**
      * @vuese
      * Function to enable/disable mouse enter and leave event for
@@ -1311,15 +1344,19 @@ export default {
     alertMouseEnterEmitted: function (payload) {
       if (this.mapImp) {
         if (payload.value) {
-          const ALERT_FILTER = {
-            HAS: 'alert',
+          let filter = undefined;
+          if (payload.key === "alert") {
+            filter = {
+              HAS: 'alert',
+            }
+          } else if (payload.key === "withoutAlert") {
+            filter = {
+              NOT: {HAS: 'alert'},
+            }
           }
-          this.mapImp.setVisibilityFilter(ALERT_FILTER)
+          this.mapImp.setVisibilityFilter(filter)
         } else {
-          this.mapImp.clearVisibilityFilter()
-          this.alertSelected({
-            value: (payload.checked.length > 0),
-          });
+          this.resetMapFilter()
         }
       }
     },
@@ -1330,15 +1367,39 @@ export default {
      * @arg payload
      */
      alertSelected: function (payload) {
+      if (this.mapImp) {
+        if (payload.key === "alert") {
+          if (payload.value) {
+            this.mapFilters.alert.with = true
+          } else {
+            this.mapFilters.alert.with = false
+          }
+        } else if (payload.key === "withoutAlert") {
+          if (payload.value) {
+            this.mapFilters.alert.without = true
+          } else {
+            this.mapFilters.alert.without = false
+          }
+        }
+        this.resetMapFilter()
+      }
+    },
+    /**
+     * @vuese
+     * Function to enable/disable (show/hide) all alerts
+     * option by providing ``flag`` (true/false).
+     * @arg flag
+     */
+     checkAllAlerts: function (payload) {
       if (this.mapImp) {
         if (payload.value) {
-          this.mapImp.clearVisibilityFilter()
+          this.mapFilters.alert.without = true
+          this.mapFilters.alert.with = true
         } else {
-          const ALERT_FILTER = {
-            NOT: {HAS: 'alert'}
-          }
-          this.mapImp.setVisibilityFilter(ALERT_FILTER)
+          this.mapFilters.alert.without = false
+          this.mapFilters.alert.with = false
         }
+        this.resetMapFilter()
       }
     },
     /**
@@ -1483,28 +1544,25 @@ export default {
         if (!this.featureAnnotationSubmitted) this.rollbackAnnotationEvent()
         else this.featureAnnotationSubmitted = false
       } else if (data.type === 'modeChanged') {
-        // 'modeChanged' event is before 'created' event
-        if (data.feature.mode.startsWith('draw_')) {
-          // Reset data entry for every draw
-          this.initialiseDialog()
-          this.inDrawing = true
-        } else if (data.feature.mode === 'simple_select' && this.inDrawing) {
-          if (this.drawnCreatedEvent) this.connectionDisplay = true
-          else this.initialiseDrawing() // Reset if invalid linestring or polygon
+        if (data.feature.mode === 'simple_select' && this.activeDrawTool) {
+          if (!this.drawnCreatedEvent) this.initialiseDrawing() // Reset if invalid linestring or polygon
         } else if (data.feature.mode === 'direct_select') {
           this.doubleClickedFeature = true
         }
       } else if (data.type === 'selectionChanged') {
-        this.selectedDrawnFeature =
-          data.feature.features.length === 0 ? undefined :  data.feature.features[0]
+        this.selectedDrawnFeature = data.feature.features.length === 0 ?
+          undefined : data.feature.features[0]
         payload.feature.feature = this.selectedDrawnFeature
-        if (!this.inDrawing) { // Make sure dialog content doesn't change
-          this.initialiseDialog()
+        if (!this.activeDrawTool) { // Make sure dialog content doesn't change
+          this.connectionEntry = {}
           // For exist drawn annotation features
           if (this.selectedDrawnFeature) {
-            let feature = this.allDrawnFeatures
-              .filter((feature) => feature.id === this.selectedDrawnFeature.id)[0]
-            if (feature && feature.connection) this.connectionEntry = feature.connection
+            const drawnFeature = this.existDrawnFeatures.find(
+              (feature) => feature.id === this.selectedDrawnFeature.id
+            )
+            if (drawnFeature && drawnFeature.connection) {
+              this.connectionEntry = drawnFeature.connection
+            }
             this.drawModeEvent(payload)
           }
         }
@@ -1541,7 +1599,6 @@ export default {
           this.annotationEventCallback(payload, data)
         } else {
           if (eventType !== 'pan-zoom') {
-            this.featuresAlert = data.alert
             const label = data.label
             const resource = [data.models]
             const taxonomy = this.entry
@@ -1567,20 +1624,22 @@ export default {
               provenanceTaxonomy: taxons,
             }
             if (eventType === 'click') {
+              this.featuresAlert = data.alert
               if (this.viewingMode === 'Network Discovery') {
                 this.highlightConnectedPaths([data.models])
               } else {
                 this.currentActive = data.models ? data.models : ''
-                // Stop adding features if dialog displayed
-                if (this.inDrawing && !this.connectionDisplay) {
-                  // Only clicked connection data will be added
-                  let nodeLabel = data.label ? data.label : `Feature ${data.id}`
-                  const validDrawnFeature = data.featureId ||
-                    this.allDrawnFeatures.find((feature) => feature.id === data.id)
-                  // only the linestring will have connection at the current stage
+                // Drawing connectivity between features
+                if (this.activeDrawTool && !this.drawnCreatedEvent) {
+                  // Check if flatmap features or existing drawn features
+                  const validDrawnFeature = data.featureId || this.existDrawnFeatures.find(
+                    (feature) => feature.id === data.id
+                  )
+                  // Only the linestring will have connection
                   if (this.activeDrawTool === 'LineString' && validDrawnFeature) {
                     const key = data.featureId ? data.featureId : data.id
-                    // add space before key to make sure properties follows adding order
+                    const nodeLabel = data.label ? data.label : `Feature ${data.id}`
+                    // Add space before key to make sure properties follows adding order
                     this.connectionEntry[` ${key}`] = Object.assign({ label: nodeLabel },
                       Object.fromEntries(
                         Object.entries(data)
@@ -1601,7 +1660,7 @@ export default {
               eventType === 'click' &&
               !(this.viewingMode === 'Network Discovery') &&
               // Disable popup when drawing
-              !this.inDrawing
+              !this.activeDrawTool
             ) {
               this.checkAndCreatePopups(payload)
             }
@@ -1612,50 +1671,6 @@ export default {
         }
       }
     },
-    /**
-     * @vuese
-     * Function to fire annotation event based on the provided ``data``.
-     * Either edit or delete event.
-     * @arg data
-     */
-    drawModeEvent: function (data) {
-      if (this.activeDrawMode) {
-        if (this.doubleClickedFeature) { // double click fires 'updated' callback
-          if (data.feature.feature.geometry.type !== 'Point') {
-            // show tooltip and enter edit mode
-            this.changeAnnotationDrawMode({
-              mode: 'direct_select',
-              options: { featureId: data.feature.feature.id }
-            })
-            this.modifyAnnotationFeature()
-          }
-          this.doubleClickedFeature = false
-        } else { // single click fires delete
-          if (this.activeDrawMode === 'Delete') {
-            this.changeAnnotationDrawMode({
-              mode: 'simple_select',
-              options: { featureIds: [data.feature.feature.id] }
-            })
-            this.modifyAnnotationFeature()
-          }
-        }
-      }
-    },
-    /**
-     * Function to create connectivity body from existing entries.
-     */
-    createConnectivityBody: function () {
-      if (Object.keys(this.connectionEntry).length > 0) {
-        const features = Object.values(this.connectionEntry)
-        const body = {
-          type: 'connectivity',
-          source: features[0],
-          target: features[features.length - 1],
-          intermediates: features.slice(1, -1),
-        }
-        this.annotationEntry.body = body
-      }
-    },
     /**
      * @vuese
      * Function triggered by viewing mode change.
@@ -1683,21 +1698,21 @@ export default {
           if (data.feature.featureId && data.feature.models) {
             this.displayTooltip(data.feature.models)
           } else if (data.feature.feature) {
-            if (this.inDrawing || this.activeDrawMode || this.connectionDisplay) {
+            // in drawing or edit/delete mode is on or has connectivity
+            if (
+              this.activeDrawTool ||
+              this.activeDrawMode ||
+              Object.keys(this.connectionEntry).length > 0
+            ) {
               this.featureAnnotationSubmitted = false
               this.annotationEntry.featureId = data.feature.feature.id
-              if (this.inDrawing) this.createConnectivityBody()
+              if (this.activeDrawTool) this.createConnectivityBody()
               this.displayTooltip(
                 data.feature.feature.id,
                 centroid(data.feature.feature.geometry)
               )
-              // Hide dialog when updated or deleted event is fired and tooltip is displayed
-              if (this.activeDrawMode) this.initialiseDialog()
             } else {
-              // Not allowed to update feature if not on edit mode
-              if (data.feature.type === 'updated') {
-                this.rollbackAnnotationEvent()
-              }
+              this.rollbackAnnotationEvent()
             }
           }
         } else {
@@ -1825,17 +1840,76 @@ export default {
      * @arg helpMode
      */
     setHelpMode: function (helpMode) {
-      if (helpMode) {
-        // because some tooltips are inside drawer
-        this.drawerOpen = true;
-        // wait for CSS transition
-        setTimeout(() => {
-          this.inHelp = true;
-          this.hoverVisibilities.forEach((item) => {
-            item.value = true;
-          });
+      const toolTipsLength = this.hoverVisibilities.length;
+      const lastIndex = toolTipsLength - 1;
+      const activePopoverObj = this.hoverVisibilities[this.helpModeActiveIndex];
+
+      if (activePopoverObj) {
+        const popoverRefsId = activePopoverObj?.refs;
+        const popoverRefId = activePopoverObj?.ref;
+        const popoverRef = this.$refs[popoverRefsId ? popoverRefsId : popoverRefId];
+
+        if (popoverRef) {
+          // Open pathway drawer if the tooltip is inside or beside
+          const { parentElement, nextElementSibling } = popoverRef.$el;
+          const isPathwayContainer = (element) => {
+            return element && (
+              element.classList.contains('pathway-container') ||
+              element.classList.contains('pathway-location')
+            );
+          };
+
+          if (
+            isPathwayContainer(parentElement) ||
+            isPathwayContainer(nextElementSibling)
+          ) {
+            this.drawerOpen = true;
+          }
+        } else {
+          // skip the unavailable tooltips
+          this.helpModeActiveIndex += 1;
+        }
+      }
+
+      if (!helpMode) {
+        // reset to iniital state
+        this.helpModeActiveIndex = this.helpModeInitialIndex;
+      }
+
+      if (this.viewingMode !== 'Annotation' && this.helpModeActiveIndex > 9) {
+        this.helpModeActiveIndex = lastIndex
+      }
+
+      if (helpMode && this.helpModeActiveIndex >= lastIndex) {
+        /**
+         * This event is emitted when the tooltips in help mode reach the last item.
+         */
+        this.$emit('help-mode-last-item', true);
+      }
+
+      if (helpMode && !this.helpModeDialog) {
+        this.inHelp = true;
+        this.hoverVisibilities.forEach((item) => {
+          item.value = true;
+        });
+      } else if (helpMode && this.helpModeDialog && toolTipsLength > this.helpModeActiveIndex) {
+
+        // Show the map tooltip as first item
+        if (this.helpModeActiveIndex > -1) {
+          this.closeFlatmapHelpPopup();
+
+          // wait for CSS transition
+          setTimeout(() => {
+            this.inHelp = false;
+            this.hoverVisibilities.forEach((item) => {
+              item.value = false;
+            });
+
+            this.showTooltip(this.helpModeActiveIndex, 200);
+          }, 300);
+        } else if (this.helpModeActiveIndex === -1) {
           this.openFlatmapHelpPopup();
-        }, 300);
+        }
       } else {
         this.inHelp = false
         this.hoverVisibilities.forEach((item) => {
@@ -1850,12 +1924,16 @@ export default {
      * by providing ``tooltipNumber``.
      * @arg tooltipNumber
      */
-    showToolitip: function (tooltipNumber) {
+    showTooltip: function (tooltipNumber, timeout = 500) {
       if (!this.inHelp) {
         clearTimeout(this.tooltipWait[tooltipNumber])
         this.tooltipWait[tooltipNumber] = setTimeout(() => {
           this.hoverVisibilities[tooltipNumber].value = true
-        }, 500)
+          /**
+           * This event is emitted after a tooltip in Flatmap is shown.
+           */
+          this.$emit('shown-tooltip');
+        }, timeout)
       }
     },
     /**
@@ -1864,12 +1942,12 @@ export default {
      * by providing ``tooltipNumber``.
      * @arg tooltipNumber
      */
-    hideToolitip: function (tooltipNumber) {
+    hideTooltip: function (tooltipNumber, timeout = 500) {
       if (!this.inHelp) {
         clearTimeout(this.tooltipWait[tooltipNumber])
         this.tooltipWait[tooltipNumber] = setTimeout(() => {
           this.hoverVisibilities[tooltipNumber].value = false
-        }, 500)
+        }, timeout)
       }
     },
     /**
@@ -1887,7 +1965,7 @@ export default {
         options.annotationFeatureGeometry = geometry
       } else {
         featureId = this.mapImp.modelFeatureIds(feature)[0]
-        if (!this.inDrawing) {
+        if (!this.activeDrawTool) {
           options.positionAtLastClick = true
         }
       }
@@ -1911,6 +1989,10 @@ export default {
             anchor: 'top',
             className: 'flatmap-popup-popper',
           })
+          /**
+           * This event is emitted after a tooltip on Flatmap's map is shown.
+           */
+          this.$emit('shown-map-tooltip');
         }
       }
     },
@@ -2275,6 +2357,37 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The active item index of help mode.
+     */
+    helpModeActiveItem: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * The option to use helpModeDialog.
+     * On default, `false`, clicking help will show all tooltips.
+     * If `true`, clicking help will show the help-mode-dialog.
+     */
+     helpModeDialog: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * The last item of help mode.
+     */
+    helpModeLastItem: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * The initial index number for help mode tooltips.
+     * Set negative (e.g. -2) if there are other tooltips outside of `hoverVisibilities`.
+     */
+    helpModeInitialIndex: {
+      type: Number,
+      default: 0,
+    },
     /**
      * The option to create map on component mounted.
      */
@@ -2310,22 +2423,6 @@ export default {
      */
     openMapOptions: {
       type: Array,
-      /**
-       * ```[
-          {
-            display: 'Open AC Map',
-            key: 'AC',
-          },
-          {
-            display: 'Open FC Map',
-            key: 'FC',
-          },
-          {
-            display: 'Open 3D Human Map',
-            key: '3D',
-          },
-        ]```
-       */
       default: function () {
         return [
           {
@@ -2399,8 +2496,8 @@ export default {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
       $annotator: this.annotator,
-      userApiKey: this.userToken,
       getFeaturesAlert: () => this.featuresAlert,
+      userApiKey: this.userToken,
     }
   },
   data: function () {
@@ -2430,17 +2527,24 @@ export default {
       taxonConnectivity: [],
       pathwaysMaxHeight: 1000,
       hoverVisibilities: [
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
+        { value: false, ref: 'zoomInPopover' }, // 0
+        { value: false, ref: 'zoomOutPopover' }, // 1
+        { value: false, ref: 'zoomFitPopover' }, // 2
+        { value: false, ref: 'settingsPopover' }, // 3
+        { value: false, ref: 'checkBoxPopover' }, // 4
+        { value: false, ref: 'markerPopover' }, // 5
+        { value: false, ref: 'warningPopover' }, // 6
+        { value: false, ref: 'whatsNewPopover' }, // 7
+        { value: false, ref: 'openMapPopover' }, // 8
+        { value: false, ref: 'featuredMarkerPopover' }, // 9
+        { value: false, refs: 'drawToolPopover', ref: 'connectionPopover' }, // 10
+        { value: false, refs: 'drawToolPopover', ref: 'drawPointPopover' }, // 11
+        { value: false, refs: 'drawToolPopover', ref: 'drawLinePopover' }, // 12
+        { value: false, refs: 'drawToolPopover', ref: 'drawPolygonPopover' }, // 13
+        { value: false, refs: 'drawToolPopover', ref: 'deletePopover' }, // 14
+        { value: false, refs: 'drawToolPopover', ref: 'editPopover' }, // 15
       ],
+      helpModeActiveIndex: this.helpModeInitialIndex,
       yellowstar: yellowstar,
       isFC: false,
       inHelp: false,
@@ -2472,13 +2576,10 @@ export default {
       annotator: undefined,
       userInformation: undefined,
       activeDrawTool: undefined,
-      drawnAnnotationEvent: ['created', 'updated', 'deleted'],
       drawnCreatedEvent: undefined,
       featureAnnotationSubmitted: false,
-      inDrawing: false,
-      connectionDisplay: false,
       connectionEntry: {},
-      allDrawnFeatures: undefined, // Store all exist drawn features
+      existDrawnFeatures: [], // Store all exist drawn features
       doubleClickedFeature: false,
       activeDrawMode: undefined,
       drawModes: ['Delete', 'Edit'],
@@ -2489,14 +2590,22 @@ export default {
           key: 'alert',
           enabled: true,
         },
+        {
+          label: 'Display Path Without Alerts',
+          key: 'withoutAlert',
+          enabled: true,
+        },
       ],
+      mapFilters: markRaw({
+        alert: {
+          with: true,
+          without: true,
+        }
+      })
     }
   },
   computed: {
-    ...mapState(useMainStore, ['userToken']),
-    connection: function () {
-      return Object.keys(this.connectionEntry).length > 0
-    }
+    ...mapState(useMainStore, ['userToken'])
   },
   watch: {
     entry: function () {
@@ -2507,6 +2616,14 @@ export default {
         this.setHelpMode(newVal)
       }
     },
+    helpModeActiveItem: function () {
+      // just take the action from helpModeActiveItem
+      // work with local value since the indexing is different
+      if (this.helpMode) {
+        this.helpModeActiveIndex += 1;
+        this.setHelpMode(this.helpMode);
+      }
+    },
     state: {
       handler: function (state, oldVal) {
         if (state !== oldVal) {
@@ -2529,7 +2646,7 @@ export default {
             this.showAnnotator(true)
             this.userInformation = userData
             this.setFeatureAnnotated()
-            if (!this.allDrawnFeatures) {
+            if (this.existDrawnFeatures.length === 0) {
               this.addAnnotationFeature()
             }
           }
@@ -2537,6 +2654,11 @@ export default {
         })
       } else this.showAnnotator(false)
     },
+    activeDrawMode: function () {
+      // Deselect any feature when draw mode is changed 
+      this.changeAnnotationDrawMode({ mode: 'simple_select' })
+      this.connectionEntry = {}
+    },
     disableUI: function (isUIDisabled) {
       if (isUIDisabled) {
         this.closeTooltip()
@@ -3076,7 +3198,21 @@ export default {
 
 :deep(.flatmap-popup-popper) {
   .maplibregl-popup-tip {
+    margin-bottom: -1px;
     border-bottom-color: $app-primary-color;
+    position: relative;
+
+    &::before {
+      content: "";
+      display: block;
+      width: 0;
+      height: 0;
+      border: 10px solid transparent;
+      border-bottom-color: #f3ecf6;
+      position: absolute;
+      top: -9px;
+      left: -10px;
+    }
   }
   .maplibregl-popup-content {
     padding: 6px 4px;