@abi-software/flatmapvuer 1.1.0-beta.2 → 1.1.0

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>
@@ -141,127 +142,24 @@ Please use `const` to assign meaningful names to them...
         <el-icon-arrow-down />
       </el-icon>
 
-      <div class="bottom-draw-control"
-        v-show="viewingMode === 'Annotation' && userInformation && !disableUI"
-      >
-        <el-popover
-          content="Draw Connection"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          :visible="hoverVisibilities[10].value"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="connection"
-              class="icon-button drawConnection inactive"
-              @click="connectionDialogPopup"
-              @mouseover="showToolitip(10)"
-              @mouseout="hideToolitip(10)"
-            />
-          </template>
-        </el-popover>
-        <el-popover
-          content="Draw Point"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          :visible="hoverVisibilities[11].value"
-          v-if="drawnType !== 'LineString' && drawnType !== 'Polygon'"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="drawPoint"
-              class="icon-button drawPoint"
-              @click="drawingEvent('Point')"
-              @mouseover="showToolitip(11)"
-              @mouseout="hideToolitip(11)"
-            />
-          </template>
-        </el-popover>
-        <el-popover
-          content="Draw Line"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          :visible="hoverVisibilities[12].value"
-          v-if="drawnType !== 'Point' && drawnType !== 'Polygon'"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="drawLine"
-              class="icon-button drawLineString"
-              @click="drawingEvent('LineString')"
-              @mouseover="showToolitip(12)"
-              @mouseout="hideToolitip(12)"
-            />
-          </template>
-        </el-popover>
-        <el-popover
-          content="Draw Polygon"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          :visible="hoverVisibilities[13].value"
-          v-if="drawnType !== 'Point' && drawnType !== 'LineString'"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="drawPolygon"
-              class="icon-button drawPolygon"
-              @click="drawingEvent('Polygon')"
-              @mouseover="showToolitip(13)"
-              @mouseout="hideToolitip(13)"
-            />
-          </template>
-        </el-popover>
-        <el-popover
-          content="Delete"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          :visible="hoverVisibilities[14].value"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="drawTrash"
-              class="icon-button drawDelete"
-              @click="drawingEvent('Delete')"
-              @mouseover="showToolitip(14)"
-              @mouseout="hideToolitip(14)"
-            />
-          </template>
-        </el-popover>
-        <el-popover
-          content="Edit"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          :visible="hoverVisibilities[15].value"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="comment"
-              class="icon-button drawEdit"
-              @click="drawingEvent('Edit')"
-              @mouseover="showToolitip(15)"
-              @mouseout="hideToolitip(15)"
-            />
-          </template>
-        </el-popover>
-      </div>
+      <DrawTool
+        v-if="viewingMode === 'Annotation' && userInformation && !disableUI"
+        :helpMode="helpMode"
+        :hoverVisibilities=hoverVisibilities
+        :flatmapCanvas="this.$el"
+        :drawnType="drawnType"
+        :activeDrawTool="activeDrawTool"
+        :activeDrawMode="activeDrawMode"
+        :drawnCreatedEvent="drawnCreatedEvent"
+        :connectionEntry="connectionEntry"
+        @drawToolbarEvent="drawToolbarEvent"
+        @confirmDrawn="confirmDrawnFeature"
+        @cancelDrawn="cancelDrawnFeature"
+        @featureTooltip="connectedFeatureTooltip"
+        @showTooltip="showTooltip"
+        @hideTooltip="hideTooltip"
+        ref="drawToolPopover"
+      />
 
       <div class="bottom-right-control" v-show="!disableUI">
         <el-popover
@@ -272,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>
@@ -291,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>
@@ -310,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
@@ -321,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>
@@ -332,6 +233,7 @@ Please use `const` to assign meaningful names to them...
         placement="right"
         :teleported="false"
         trigger="manual"
+        :offset="-18"
         popper-class="flatmap-popper"
         :visible="hoverVisibilities[4].value"
         ref="checkBoxPopover"
@@ -349,31 +251,37 @@ 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"
-                :teleported="false"
-                trigger="hover"
-                popper-class="flatmap-popper popper-bump-right"
+                :teleported="true"
+                trigger="manual"
+                width="max-content"
+                :offset="-10"
+                popper-class="flatmap-popper flatmap-teleport-popper"
                 :visible="hoverVisibilities[9].value"
                 ref="featuredMarkerPopover"
               >
                 <template #reference>
                   <div
-                    v-show="showStarInLegend"
                     v-popover:featuredMarkerPopover
                     class="yellow-star-legend"
                     v-html="yellowstar"
+                    @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"
                 placement="right"
                 :teleported="false"
+                width="max-content"
                 trigger="manual"
-                popper-class="flatmap-popper popper-bump-right"
+                popper-class="flatmap-popper"
                 :visible="hoverVisibilities[5].value"
                 ref="markerPopover"
               >
@@ -404,6 +312,8 @@ Please use `const` to assign meaningful names to them...
                 :selections="alertOptions"
                 @changed="alertSelected"
                 @checkboxMouseEnter="alertMouseEnterEmitted"
+                @selections-data-changed="onSelectionsDataChanged"
+                @checkAll="checkAllAlerts"
                 ref="alertSelection"
                 key="alertSelection"
               />
@@ -415,6 +325,7 @@ Please use `const` to assign meaningful names to them...
                   identifierKey="key"
                   :selections="sckanDisplay"
                   @changed="sckanSelected"
+                  @selections-data-changed="onSelectionsDataChanged"
                   @checkAll="checkAllSCKAN"
                   ref="skcanSelection"
                   key="skcanSelection"
@@ -426,6 +337,7 @@ Please use `const` to assign meaningful names to them...
                   identifierKey="id"
                   :selections="layers"
                   @changed="layersSelected"
+                  @selections-data-changed="onSelectionsDataChanged"
                   @checkAll="checkAllLayers"
                   ref="layersSelection"
                   key="layersSelection"
@@ -439,18 +351,21 @@ Please use `const` to assign meaningful names to them...
                 colourStyle="line"
                 :selections="pathways"
                 @changed="pathwaysSelected"
+                @selections-data-changed="onSelectionsDataChanged"
                 @checkAll="checkAllPathways"
                 ref="pathwaysSelection"
                 key="pathwaysSelection"
               />
               <selections-group
                 v-if="!isFC && taxonConnectivity && taxonConnectivity.length > 0"
-                title="Observed in"
+                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"
+                @selections-data-changed="onSelectionsDataChanged"
                 @checkAll="checkAllTaxons"
                 ref="taxonSelection"
                 key="taxonSelection"
@@ -462,6 +377,7 @@ Please use `const` to assign meaningful names to them...
                 identifierKey="key"
                 :selections="centreLines"
                 @changed="centreLinesSelected"
+                @selections-data-changed="onSelectionsDataChanged"
                 ref="centrelinesSelection"
                 key="centrelinesSelection"
               />
@@ -643,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
@@ -650,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>
@@ -664,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>
@@ -686,18 +604,6 @@ Please use `const` to assign meaningful names to them...
         :annotationDisplay="viewingMode === 'Annotation'"
         @annotation="commitAnnotationEvent"
       />
-      <ConnectionDialog
-        class="connection-dialog"
-        v-show="connectionDisplay"
-        :entry="connectionEntry"
-        :drawing="inDrawing"
-        :connection="connection"
-        @display="connectionDialogPopup"
-        @confirm="confirmDrawnFeature"
-        @cancel="cancelDrawnFeature"
-        @popup="closePopup"
-        @tooltip="displayConnectedFeatureTooltip"
-      />
     </div>
   </div>
 </template>
@@ -735,59 +641,9 @@ import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
 import * as flatmap from '@abi-software/flatmap-viewer'
 import { AnnotationService } from '@abi-software/sparc-annotation'
-import ConnectionDialog from './ConnectionDialog.vue'
 import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
-
-/**
- * @param scopeElement    Draggable scope area (Optional)
- * @param dragElement     Draggable element
- */
-const draggable = (scopeElement, dragElement) => {
-  let startX, startY, clickX, clickY, posX, posY
-  // reset position in case previous pupped up dialog is dragged
-  dragElement.style.left = ''
-  dragElement.style.top = ''
-  // const scopeRect = scopeElement.getBoundingClientRect()
-  // const dragRect = dragElement.getBoundingClientRect()
-
-  dragElement.addEventListener('mousedown', (e) => {
-    e.preventDefault();
-    startX = dragElement.offsetLeft
-    startY = dragElement.offsetTop
-    clickX = e.clientX
-    clickY = e.clientY
-
-    dragElement.addEventListener('mousemove', drag, false);
-    document.addEventListener('mouseup', () => {
-      dragElement.removeEventListener('mousemove', drag, false);
-    }, false);
-  }, false);
-
-  function drag(e) {
-    e.preventDefault();
-    posX = startX - (clickX - e.clientX)
-    posY = startY - (clickY - e.clientY)
-    // if (
-    //   (posX > scopeRect.left && ((posX + dragRect.width) < scopeRect.right)) &&
-    //   (posY > scopeRect.top && ((posY + dragRect.height) < scopeRect.bottom))
-    // ) {
-    dragElement.style.left = `${posX}px`;
-    dragElement.style.top = `${posY}px`;
-    // } else {
-    //   if (posX <= scopeRect.left) {
-    //     dragElement.style.left = '0px';
-    //   } else if (posX + dragRect.width >= scopeRect.right) {
-    //     dragElement.style.left = `${scopeRect.right - dragRect.width}px`;
-    //   }
-    //   if (posY <= scopeRect.top) {
-    //     dragElement.style.top = '0px';
-    //   } else if (posY + dragRect.height >= scopeRect.bottom) {
-    //     dragElement.style.top = `${scopeRect.bottom - dragRect.height}px`;
-    //   }
-    // }
-  }
-}
+import DrawTool from './DrawTool.vue'
 
 const centroid = (geometry) => {
   let featureGeometry = { lng: 0, lat: 0, }
@@ -894,6 +750,7 @@ export default {
     ElIconWarningFilled,
     ElIconArrowDown,
     ElIconArrowLeft,
+    DrawTool
   },
   beforeCreate: function () {
     this.mapManager = undefined
@@ -913,20 +770,20 @@ export default {
      * Function to initialise drawing.
      */
     initialiseDrawing: function () {
-      this.inDrawing = false
-      this.initialiseDialog()
+      this.connectionEntry = {}
       this.activeDrawTool = undefined
-      this.createdEvent = undefined
+      this.activeDrawMode = undefined
+      this.drawnCreatedEvent = undefined
     },
     /**
      * @vuese
      * Function to cancel a newly drawn feature.
      */
     cancelDrawnFeature: function () {
-      if (this.createdEvent) {
-        this.closePopup()
+      if (this.drawnCreatedEvent) {
+        this.closeTooltip()
         this.annotationEntry = {
-          ...this.createdEvent.feature,
+          ...this.drawnCreatedEvent.feature,
           resourceId: this.serverURL,
         }
         this.rollbackAnnotationEvent()
@@ -938,10 +795,24 @@ export default {
      * Function to display connected features' tooltip for drawn connectivity.
      * @arg id
      */
-    displayConnectedFeatureTooltip: function (id) {
+    connectedFeatureTooltip: function (value) {
       if (this.mapImp) {
-        const data = this.mapImp.featureProperties(id)
-        this.checkAndCreatePopups({ feature: data })
+        if (value) {
+          const numericId = Number(value)
+          let payload = { feature: {} }
+          if (numericId) {
+            const data = this.mapImp.featureProperties(numericId)
+            payload.feature = data
+          } else {
+            const drawnFeature = this.existDrawnFeatures.find(
+              (feature) => feature.id === value.replace(' ', '')
+            )
+            payload.feature.feature = drawnFeature
+          }
+          this.checkAndCreatePopups(payload)
+        } else {
+          this.closeTooltip()
+        }
       }
     },
     /**
@@ -949,8 +820,8 @@ export default {
      * Function to confirm a newly drawn feature.
      */
     confirmDrawnFeature: function () {
-      if (this.createdEvent) {
-        this.checkAndCreatePopups(this.createdEvent)
+      if (this.drawnCreatedEvent) {
+        this.checkAndCreatePopups(this.drawnCreatedEvent)
         // Add connection if exist to annotationEntry
         // Connection will only be added in creating new drawn feature annotation
         // And will not be updated if move drawn features
@@ -962,70 +833,63 @@ export default {
     },
     /**
      * @vuese
-     * Function to initialise connection dialog.
-     */
-    initialiseDialog: function () {
-      this.connectionDisplay = false
-      this.connectionEntry = {}
-    },
-    /**
-     * @vuese
-     * Function to display the connection dialog after finalising a drawing.
+     * Function to process the annotation toolbar click events.
+     * @arg type
      */
-    connectionDialogPopup: function () {
-      const inactive = this.$el.querySelector('.drawConnection').classList.contains('inactive')
-      // disable click popup if icon inactive or in drawing
-      if (!inactive && !this.inDrawing) { 
-        this.closePopup()
-        this.connectionDisplay = !this.connectionDisplay
+    drawToolbarEvent: function (type) {
+      this.closeTooltip()
+      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
+      }
+      if (Object.keys(this.annotationEntry).length > 0 && !this.featureAnnotationSubmitted) {
+        this.rollbackAnnotationEvent()
       }
     },
-    /**
+        /**
      * @vuese
-     * Function to process the annotation toolbar click events.
-     * @arg type
+     * Function to fire annotation event based on the provided ``data``.
+     * Either edit or delete event.
+     * @arg data
      */
-    drawingEvent: function (type) {
-      this.closePopup()
-      // disable mode icon click if any tool is active
-      if (this.drawnTypes.includes(type) && !this.activeDrawMode && !this.connectionDisplay) {
-        if (type === 'Point') {
-          const point = this.$el.querySelector('.mapbox-gl-draw_point')
-          this.$el.querySelector('.mapbox-gl-draw_point').click()
-          this.activeDrawTool = point.classList.contains('active') ? 'Point' : undefined
-        } else if (type === 'LineString') {
-          const line = this.$el.querySelector('.mapbox-gl-draw_line')
-          this.$el.querySelector('.mapbox-gl-draw_line').click()
-          this.activeDrawTool = line.classList.contains('active') ? 'LineString' : undefined
-        } else if (type === 'Polygon') {
-          const polygon = this.$el.querySelector('.mapbox-gl-draw_polygon')
-          this.$el.querySelector('.mapbox-gl-draw_polygon').click()
-          this.activeDrawTool = polygon.classList.contains('active') ? 'Polygon' : undefined
-        }
-        // disable tool icon click if any mode is on
-      } else if (this.drawModes.includes(type) && !this.activeDrawTool) {
-        if (type === 'Delete') {
-          if (
-            this.currentDrawnFeature &&
-            // 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
+    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.currentDrawnFeature.id] }
+              mode: 'direct_select',
+              options: { featureId: data.feature.feature.id }
             })
-            this.deleteOrEditAnnotationFeature()
-          }
-          this.activeDrawMode = this.activeDrawMode === 'Delete' ? undefined : 'Delete'
-          // clear currentDrawnFeature when quit delete mode
-          if (!this.activeDrawMode) {
-            this.currentDrawnFeature = undefined
+            this.modifyAnnotationFeature()
           }
-        } 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
       }
     },
     /**
@@ -1045,8 +909,7 @@ export default {
     clearAnnotationFeature: function () {
       if (
         this.mapImp &&
-        this.drawnAnnotationFeatures &&
-        this.drawnAnnotationFeatures.length > 0
+        this.existDrawnFeatures.length > 0
       ) {
         this.mapImp.clearAnnotationFeature()
       }
@@ -1056,7 +919,7 @@ export default {
      * Function to fire the ``trash`` action.
      * See https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/API.md#trash-draw for more details.
      */
-    deleteOrEditAnnotationFeature: function () {
+    modifyAnnotationFeature: function () {
       if (this.mapImp) {
         // Fire the 'trash' button
         // Not only use to remove features
@@ -1072,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 = {}
       }
     },
     /**
@@ -1085,90 +949,82 @@ 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.annotationSubmitted = true
+        this.featureAnnotationSubmitted = true
         this.mapImp.commitAnnotationEvent(this.annotationEntry)
-        if (this.annotationEntry.type === 'deleted') {
-          this.closePopup()
-        } else {
-          // Use to update 'this.drawnAnnotationFeatures' when created or updated
-          this.addAnnotationFeature()
-        }
+        if (this.annotationEntry.type === 'deleted') this.closeTooltip()
+        else this.addAnnotationFeature() // Update 'existDrawnFeatures' when created or updated event
       }
     },
+    /**
+     * @vuese
+     * Function to fetch annotated item id.
+     * @arg userId,
+     * @arg participated
+     */
+    fetchAnnotatedItemIds: async function (userId = undefined, participated = undefined) {
+      let annotatedItemIds = await this.annotator.annotatedItemIds(this.userToken, this.serverURL, userId, participated)
+      // The annotator has `resource` and `items` fields
+      if ('resource' in annotatedItemIds) annotatedItemIds = annotatedItemIds.itemIds
+      return annotatedItemIds
+    },
     /**
      * @vuese
      * Function to add existing drawn annotations to flatmap.
      */
-    setFeatureAnnotated: function () {
+    setFeatureAnnotated: async function () {
       if (this.mapImp) {
-        this.annotator.annotatedItemIds(this.userToken, this.serverURL)
-          .then((annotatedItemIds) => {
-              if ('resource' in annotatedItemIds) {
-                // The annotator has `resource` and `items` fields
-                annotatedItemIds = annotatedItemIds.itemIds
-              }
-            for (const id of annotatedItemIds) {
-              this.mapImp.setFeatureAnnotated(id)
-            }
-          })
-          .catch((reason) => {
-            console.log(reason) // Error!
-          })
+        const annotatedItemIds = await this.fetchAnnotatedItemIds()
+        for (const id of annotatedItemIds) {
+          this.mapImp.setFeatureAnnotated(id)
+        }
+      }
+    },
+    /**
+     * @vuese
+     * Function to fetch drawn features.
+     * @arg userId,
+     * @arg participated
+     */
+    fetchDrawnFeatures: async function (userId, participated) {
+      const annotatedItemIds = await this.fetchAnnotatedItemIds(userId, participated)
+      let drawnFeatures = await this.annotator.drawnFeatures(this.userToken, this.serverURL, annotatedItemIds)
+      // The annotator has `resource` and `features` fields
+      if ('resource' in drawnFeatures) drawnFeatures = drawnFeatures.features
+      // Use to switch the displayed feature type
+      if (this.drawnType !== 'All tools') {
+        drawnFeatures = drawnFeatures.filter((feature) => {
+          return feature.geometry.type === this.drawnType
+        })
       }
+      return drawnFeatures
     },
     /**
      * @vuese
      * Function to draw existing drawn annotations based on selector.
      */
-    addAnnotationFeature: function () {
+    addAnnotationFeature: async function () {
       if (this.mapImp) {
-        if (!this.annotationSubmitted) this.clearAnnotationFeature()
+        if (!this.featureAnnotationSubmitted) this.clearAnnotationFeature()
         if (this.drawnType !== 'None') {
-          if (!this.annotationSubmitted) this.loading = true
+          if (!this.featureAnnotationSubmitted) this.loading = true
           const userId = this.annotatedType === 'Anyone' ?
             undefined : this.userInformation.orcid ?
               this.userInformation.orcid : '0000-0000-0000-0000'
           const participated = this.annotatedType === 'Anyone' ?
             undefined : this.annotatedType === 'Me' ?
               true : false
-          this.annotator.annotatedItemIds(this.userToken, this.serverURL, userId, participated)
-            .then((annotatedItemIds) => {
-              if ('resource' in annotatedItemIds) {
-                // The annotator has `resource` and `items` fields
-                annotatedItemIds = annotatedItemIds.itemIds
-              }
-              this.annotator.drawnFeatures(this.userToken, this.serverURL, annotatedItemIds)
-                .then((drawnFeatures) => {
-                  if ('resource' in drawnFeatures) {
-                    // The annotator has `resource` and `features` fields
-                    drawnFeatures = drawnFeatures.features
-                  }
-                  // Use to switch the displayed feature type
-                  if (this.drawnType !== 'All tools') {
-                    drawnFeatures = drawnFeatures.filter((feature) => {
-                      return feature.geometry.type === this.drawnType
-                    })
-                  }
-                  this.drawnAnnotationFeatures = drawnFeatures
-                  this.loading = false
-                  // No need to call 'addAnnotationFeature' when a new feature created, as it is already on the map
-                  if (!this.annotationSubmitted) {
-                    for (const feature of drawnFeatures) {
-                      this.mapImp.addAnnotationFeature(feature)
-                    }
-                  }
-                })
-                .catch((reason) => {
-                  console.log(reason) // Error!
-                })
-            })
-            .catch((reason) => {
-              console.log(reason) // Error!
-            })
+          const drawnFeatures = await this.fetchDrawnFeatures(userId, participated)
+          this.existDrawnFeatures = drawnFeatures
+          this.loading = false
+          if (!this.featureAnnotationSubmitted) {
+            for (const feature of drawnFeatures) {
+              this.mapImp.addAnnotationFeature(feature)
+            }
+          }
         }
       }
     },
@@ -1194,6 +1050,7 @@ export default {
       this.drawnType = flag
       if (this.mapImp) {
         this.addAnnotationFeature()
+        this.initialiseDrawing()
       }
     },
     /**
@@ -1378,6 +1235,9 @@ export default {
         this.mapImp.enableCentrelines(payload.value)
       }
     },
+    onSelectionsDataChanged: function (data) {
+      this.$emit('pathway-selection-changed', data);
+    },
     /**
      * // Currently not in use
      * Function to show or hide paths valid in SCKAN
@@ -1420,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
 
@@ -1452,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
@@ -1461,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()
         }
       }
     },
@@ -1480,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()
       }
     },
     /**
@@ -1549,7 +1460,7 @@ export default {
     },
     /**
      * @vuese
-     * Function to show or hide connectivity features observed in particular species
+     * Function to show or hide connectivity features studied in particular species
      * by providing ``{taxonId, true/false}`` in ``payload.key, payload.value``.
      * @arg payload
      */
@@ -1576,7 +1487,7 @@ export default {
     },
     /**
      * @vuese
-     * Function to show or hide connectivity features observed in particular species
+     * Function to show or hide connectivity features studied in particular species
      * by providing ``payload`` with ``payload.keys`` array and ``payload.value`` flag.
      * @arg payload
      */
@@ -1627,41 +1538,30 @@ export default {
      * @arg data
      */
     annotationEventCallback: function (payload, data) {
-      // Popup closed will trigger aborted event
+      // Popup closed will trigger aborted event this is used to control the tooltip
       if (data.type === 'aborted') {
         // Rollback drawing when no new annotation submitted
-        if (!this.annotationSubmitted) this.rollbackAnnotationEvent()
-        else this.annotationSubmitted = false
+        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.createdEvent) {
-            this.connectionDisplay = true
-          } else {
-            // Reset if a invalid draw
-            this.initialiseDrawing()
-          }
+        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.currentDrawnFeature =
-          data.feature.features.length === 0 ?
-            undefined :
-            data.feature.features[0]
-        payload.feature.feature = this.currentDrawnFeature
-        if (!this.inDrawing) {
-          this.initialiseDialog()
+        this.selectedDrawnFeature = data.feature.features.length === 0 ?
+          undefined : data.feature.features[0]
+        payload.feature.feature = this.selectedDrawnFeature
+        if (!this.activeDrawTool) { // Make sure dialog content doesn't change
+          this.connectionEntry = {}
           // For exist drawn annotation features
-          if (this.currentDrawnFeature) {
-            let feature = this.drawnAnnotationFeatures
-              .filter((feature) => feature.id === this.currentDrawnFeature.id)[0]
-            if (feature && feature.connection) {
-              this.connectionEntry = feature.connection
+          if (this.selectedDrawnFeature) {
+            const drawnFeature = this.existDrawnFeatures.find(
+              (feature) => feature.id === this.selectedDrawnFeature.id
+            )
+            if (drawnFeature && drawnFeature.connection) {
+              this.connectionEntry = drawnFeature.connection
             }
             this.drawModeEvent(payload)
           }
@@ -1678,11 +1578,8 @@ export default {
         }
         // Once double click mouse to confirm drawing, 'aborted' event will be triggered.
         // Hence disable direct popup when 'created' event, dialog will be used instead.
-        if (data.type === 'created') {
-          this.createdEvent = payload
-        } else {
-          this.checkAndCreatePopups(payload)
-        }
+        if (data.type === 'created') this.drawnCreatedEvent = payload
+        else this.checkAndCreatePopups(payload)
       }
     },
     /**
@@ -1702,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
@@ -1728,21 +1624,27 @@ 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}`
-                  // only the linestring will have connection at the current stage
-                  if (this.activeDrawTool === 'LineString') {
-                    this.connectionEntry[data.featureId] = Object.assign({label: nodeLabel},
+                // 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
+                    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)
-                              .filter(([key]) => ['featureId', 'models'].includes(key))
-                              .map(([key, value]) => [(key === 'featureId') ? 'id' : key, value])))
+                          .filter(([key]) => ['featureId', 'models'].includes(key))
+                          .map(([key, value]) => [(key === 'featureId') ? 'id' : key, value])))
                   }
                 }
               }
@@ -1758,7 +1660,7 @@ export default {
               eventType === 'click' &&
               !(this.viewingMode === 'Network Discovery') &&
               // Disable popup when drawing
-              !this.inDrawing
+              !this.activeDrawTool
             ) {
               this.checkAndCreatePopups(payload)
             }
@@ -1769,111 +1671,6 @@ export default {
         }
       }
     },
-    /**
-     * A hack to implement connection dialog drag action and scope.
-     */
-    dialogCssHacks: function () {
-      this.$nextTick(() => {
-        const dialog = this.$el.querySelector('.connection-dialog')
-        draggable(this.$el, dialog)
-        // dialog popup at the click position
-        // slightly change x or y if close to boundary
-        let posX, posY
-        const containerRect = this.$el.getBoundingClientRect()
-        const dialogRect = dialog.getBoundingClientRect()
-        if (this.dialogPosition.x > containerRect.width / 2) {
-          posX = this.dialogPosition.x - dialogRect.width
-        } else {
-          posX = this.dialogPosition.x
-        }
-        if (this.dialogPosition.y > containerRect.height / 2) {
-          posY = this.dialogPosition.y - dialogRect.height
-        } else {
-          posY = this.dialogPosition.y
-        }
-        dialog.style.transform =
-          `translate(${posX - this.dialogPosition.offsetX}px, ${posY - this.dialogPosition.offsetY}px)`
-      })
-    },
-    /**
-     * A hack to handle the status of annotation tools.
-     */
-    drawIconCssHacks: function () {
-      // set tool/mode icon status
-      if (this.$el.querySelector('.iconSelected') || !this.connectionDisplay) {
-        this.drawnTypes.map((t) => {
-          const dtype = this.$el.querySelector(`.draw${t}`)
-          if (dtype) {
-            dtype.classList.remove('iconSelected');
-            dtype.classList.remove('inactive');
-          }
-        })
-        this.drawModes.map((m) => {
-          this.$el.querySelector(`.draw${m}`).classList.remove('iconSelected');
-          this.$el.querySelector(`.draw${m}`).classList.remove('inactive');
-        })
-      }
-      if (this.activeDrawTool) {
-        this.$el.querySelector(`.draw${this.activeDrawTool}`).classList.add('iconSelected');
-        this.drawModes.map((m) => {
-          this.$el.querySelector(`.draw${m}`).classList.add('inactive');
-        })
-      } else if (this.activeDrawMode || this.connectionDisplay) {
-        if (this.activeDrawMode) {
-          this.$el.querySelector(`.draw${this.activeDrawMode}`).classList.add('iconSelected');
-        }
-        this.drawnTypes.map((t) => {
-          const dtype = this.$el.querySelector(`.draw${t}`)
-          if (dtype) dtype.classList.add('inactive');
-        })
-      }
-    },
-    /**
-     * @vuese
-     * Function to fire annotation event based on the provided ``data``.
-     * Either edit or delete event.
-     * @arg data
-     */
-    drawModeEvent: function (data) {
-      if (this.activeDrawMode) {
-        // double click fires 'updated' callback
-        if (this.doubleClickedFeature) {
-          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.deleteOrEditAnnotationFeature()
-          }
-          this.doubleClickedFeature = false
-        } else {
-          // single click fires delete
-          if (this.activeDrawMode === 'Delete') {
-            this.changeAnnotationDrawMode({
-              mode: 'simple_select',
-              options: { featureIds: [data.feature.feature.id] }
-            })
-            this.deleteOrEditAnnotationFeature()
-          }
-        }
-      }
-    },
-    /**
-     * 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.
@@ -1901,23 +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.annotationSubmitted = false
+            // 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
-              this.createConnectivityBody()
+              if (this.activeDrawTool) this.createConnectivityBody()
               this.displayTooltip(
                 data.feature.feature.id,
                 centroid(data.feature.feature.geometry)
               )
             } else {
-              // Not allowed to update feature if not on edit mode
-              if (data.feature.type === 'updated') {
-                this.rollbackAnnotationEvent()
-              }
-            }
-            // Hide dialog when updated or deleted event is fired and tooltip is displayed
-            if (data.feature.type === 'updated' || data.feature.type === 'deleted') {
-              this.initialiseDialog()
+              this.rollbackAnnotationEvent()
             }
           }
         } else {
@@ -1953,14 +1748,6 @@ export default {
         if (ftooltip) ftooltip.style.display = 'block'
       }
     },
-    /**
-     * @vuese
-     * Function to close popup.
-     */
-    closePopup: function () {
-      let cbutton = document.querySelector('.maplibregl-popup-close-button')
-      if (cbutton) cbutton.click()
-    },
     /**
      * @vuese
      * Function to close tooltip.
@@ -2053,12 +1840,76 @@ export default {
      * @arg helpMode
      */
     setHelpMode: function (helpMode) {
-      if (helpMode) {
-        this.inHelp = 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
-        })
-        this.openFlatmapHelpPopup()
+          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();
+        }
       } else {
         this.inHelp = false
         this.hoverVisibilities.forEach((item) => {
@@ -2073,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)
       }
     },
     /**
@@ -2087,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)
       }
     },
     /**
@@ -2110,7 +1965,7 @@ export default {
         options.annotationFeatureGeometry = geometry
       } else {
         featureId = this.mapImp.modelFeatureIds(feature)[0]
-        if (!this.inDrawing) {
+        if (!this.activeDrawTool) {
           options.positionAtLastClick = true
         }
       }
@@ -2134,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');
         }
       }
     },
@@ -2498,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.
      */
@@ -2533,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 [
           {
@@ -2622,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 () {
@@ -2653,23 +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 },
-        { 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,
@@ -2688,7 +2563,7 @@ export default {
       minimapResizeShow: false,
       minimapSmall: false,
       currentActive: '',
-      currentDrawnFeature: undefined, // Clicked drawn annotation
+      selectedDrawnFeature: undefined, // Clicked drawn annotation
       currentHover: '',
       viewingMode: 'Exploration',
       viewingModes: ['Annotation', 'Exploration', 'Network Discovery'],
@@ -2701,22 +2576,13 @@ export default {
       annotator: undefined,
       userInformation: undefined,
       activeDrawTool: undefined,
-      drawnAnnotationEvent: ['created', 'updated', 'deleted'],
-      createdEvent: undefined,
-      annotationSubmitted: false,
-      inDrawing: false,
-      connectionDisplay: false,
+      drawnCreatedEvent: undefined,
+      featureAnnotationSubmitted: false,
       connectionEntry: {},
-      drawnAnnotationFeatures: undefined, // Store all exist drawn features
+      existDrawnFeatures: [], // Store all exist drawn features
       doubleClickedFeature: false,
       activeDrawMode: undefined,
       drawModes: ['Delete', 'Edit'],
-      dialogPosition: {
-        offsetX: 0,
-        offsetY: 0,
-        x: undefined,
-        y: undefined
-      },
       containsAlert: false,
       alertOptions: [
         {
@@ -2724,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 () {
@@ -2739,7 +2613,15 @@ export default {
     },
     helpMode: function (newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.setHelpMode(val)
+        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: {
@@ -2756,67 +2638,15 @@ export default {
       immediate: true,
       deep: true,
     },
-    activeDrawTool: function () {
-      this.drawIconCssHacks()
-    },
-    activeDrawMode: function () {
-      this.drawIconCssHacks()
-    },
-    /**
-     * hide dialog when connectionEntry is empty
-     */
-    connection: function (value) {
-      const connectionIcon = this.$el.querySelector('.drawConnection')
-      if (!value) {
-        this.connectionDisplay = false
-        connectionIcon.classList.add('inactive')
-      } else {
-        connectionIcon.classList.remove('inactive')
-      }
-    },
-    /**
-     * popup dialog via click icon
-     */
-    connectionDisplay: function (display) {
-      const connectionIcon = this.$el.querySelector('.drawConnection')
-      if (display) {
-        connectionIcon.classList.add('iconSelected')
-        this.dialogCssHacks()
-      } else {
-        connectionIcon.classList.remove('iconSelected')
-      }
-      this.drawIconCssHacks()
-    },
-    /**
-     * Set dialog offset when flatmap annotator used
-     */
-    dialogPosition: {
-      handler: function () {
-        const containerRect = this.$el.getBoundingClientRect()
-        this.dialogPosition.offsetX = containerRect.x
-        this.dialogPosition.offsetY = containerRect.y
-      },
-      deep: true,
-      once: true,
-    },
     viewingMode: function (mode) {
       if (mode === 'Annotation') {
-        this.$el.querySelector('.maplibregl-canvas').addEventListener('click', (e) => {
-          e.preventDefault();
-          this.dialogPosition.x = e.clientX
-          this.dialogPosition.y = e.clientY
-          // use to fix the draw point pop up position issue
-          if (this.activeDrawTool === 'Point') {
-            this.dialogCssHacks()
-          }
-        }, false)
         this.loading = true
         this.annotator.authenticate(this.userToken).then((userData) => {
           if (userData.name && userData.email) {
             this.showAnnotator(true)
             this.userInformation = userData
             this.setFeatureAnnotated()
-            if (!this.drawnAnnotationFeatures) {
+            if (this.existDrawnFeatures.length === 0) {
               this.addAnnotationFeature()
             }
           }
@@ -2824,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()
@@ -2860,6 +2695,14 @@ export default {
   font-size: 25px;
 }
 
+.warning-icon,
+.latest-changesicon {
+  display: flex;
+  width: max-content;
+  align-items: center;
+  gap: 5px;
+}
+
 .warning-icon {
   color: $warning;
 
@@ -2884,6 +2727,7 @@ export default {
 }
 
 .latest-changesicon {
+  margin-top: 5px;
   color: $success;
 
   &:hover {
@@ -2905,8 +2749,7 @@ export default {
 .pathway-location {
   position: absolute;
   bottom: 0px;
-  transition: all 1s ease;
-  z-index: 8;
+  transition: all var(--el-transition-duration);
   &.open {
     left: 0px;
   }
@@ -2933,8 +2776,7 @@ export default {
   background: #ffffff;
   overflow-x: hidden;
   scrollbar-width: thin;
-
-  transition: all 1s ease;
+  transition: all var(--el-transition-duration);
   &.open {
     opacity: 1;
     position: relative;
@@ -2955,11 +2797,15 @@ export default {
 }
 
 .flatmap-marker-help {
-  display: inline-block;
-}
+  display: block;
+  width: max-content;
+  margin: 0.5rem;
 
-:deep(.popper-bump-right) {
-  left: 30px;
+  :deep(.flatmap-marker svg) {
+    display: block;
+    width: 28px;
+    height: 28px;
+  }
 }
 
 .el-dropdown-link {
@@ -3154,31 +3000,24 @@ export default {
   }
 }
 
-.drawPoint, .drawLineString, .drawPolygon, 
-.drawDelete, .drawEdit, .drawConnection,
 .zoomIn, .zoomOut, .fitWindow {
   padding: 4px;
 }
 
-.iconSelected {
-  color: var(--el-color-primary-light-5) !important;
-}
-
-.inactive {
-  color: #DDDDDD !important;
-  cursor: not-allowed !important;
-}
-
 .yellow-star-legend {
-  width: 130px;
-  cursor: pointer;
+  display: block;
+  width: max-content;
+  cursor: default;
+
+  :deep(svg) {
+    display: block;
+  }
 }
 
 .settings-group {
   bottom: 16px;
   position: absolute;
-  transition: all 1s ease;
-  z-index: 10;
+  transition: all var(--el-transition-duration);
   &.open {
     left: 322px;
   }
@@ -3298,7 +3137,7 @@ export default {
       width: 300px !important;
     }
   }
-  transition: all 1s ease;
+  transition: all var(--el-transition-duration);
   &.shrink {
     transform: scale(0.5);
     transform: scale(0.5);
@@ -3315,7 +3154,7 @@ export default {
   width: 20px;
   height: 14px;
   z-index: 9;
-  transition: all 1s ease;
+  transition: all var(--el-transition-duration);
   &.shrink {
     transform: rotate(0deg);
   }
@@ -3359,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;
@@ -3379,18 +3232,6 @@ export default {
   padding: 0px;
 }
 
-.bottom-draw-control {
-  background-color: var(--el-color-primary-light-9);
-  padding: 4px 4px 2px 4px;
-  border-style: solid;
-  border-color: var(--el-color-primary-light-5);
-  border-radius: 1rem;
-  position: absolute;
-  right: calc(50vw - 100px);;
-  bottom: 16px;
-  z-index: 10;
-}
-
 .bottom-right-control {
   position: absolute;
   right: 16px;
@@ -3437,7 +3278,6 @@ export default {
     font-weight: 600;
     margin-top: 12px;
     color: $app-primary-color;
-    transition-delay: 0.9s;
   }
   &.open {
     i {
@@ -3581,12 +3421,6 @@ export default {
     }
   }
 }
-
-.connection-dialog {
-  position: absolute;
-  z-index: 10;
-  cursor: move;
-}
 </style>
 
 <style lang="scss">
@@ -3598,4 +3432,24 @@ export default {
   --el-color-primary-dark-2: var(--el-color-primary);
 }
 
-</style>
+.flatmap-teleport-popper {
+  &.flatmap-popper.el-popper {
+    padding: 6px 4px;
+    font-family: Asap, sans-serif;
+    font-size: 12px;
+    color: rgb(48, 49, 51);
+    background-color: #f3ecf6;
+    border: 1px solid $app-primary-color;
+    white-space: nowrap;
+    min-width: unset;
+
+    .el-popper__arrow {
+      &:before {
+        border-color: $app-primary-color;
+        background-color: #f3ecf6;
+      }
+    }
+  }
+}
+
+</style>