@abi-software/flatmapvuer 1.0.1 → 1.1.0-beta.1

package/src/components/FlatmapVuer.vue

@@ -20,6 +20,11 @@
             :visible="hoverVisibilities[6].value"
             ref="warningPopover"
           >
+<!--
+What magic meaning do the numbers 6, 7, etc have?
+
+Please use `const` to assign meaningful names to them...
+ -->
             <p
               v-if="isLegacy"
               @mouseover="showToolitip(6)"
@@ -136,6 +141,128 @@
         <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>
+
       <div class="bottom-right-control" v-show="!disableUI">
         <el-popover
           content="Zoom in"
@@ -162,7 +289,7 @@
           :teleported="false"
           trigger="manual"
           width="70"
-          popper-class="flatmap-popper popper-zoomout"
+          popper-class="flatmap-popper"
           :visible="hoverVisibilities[1].value"
         >
           <template #reference>
@@ -270,14 +397,15 @@
                 @change-active="ftuSelected"
               />
               <selections-group
-                v-if="!isFC && centreLines && centreLines.length > 0"
-                title="Nerves"
+                v-if="containsAlert && alertOptions"
+                title="Alert"
                 labelKey="label"
                 identifierKey="key"
-                :selections="centreLines"
-                @changed="centreLinesSelected"
-                ref="centrelinesSelection"
-                key="centrelinesSelection"
+                :selections="alertOptions"
+                @changed="alertSelected"
+                @checkboxMouseEnter="alertMouseEnterEmitted"
+                ref="alertSelection"
+                key="alertSelection"
               />
               <!--
                 <selections-group
@@ -303,6 +431,18 @@
                   key="layersSelection"
                 />
               -->
+              <selections-group
+                v-if="pathways && pathways.length > 0"
+                title="Pathways"
+                labelKey="label"
+                identifierKey="type"
+                colourStyle="line"
+                :selections="pathways"
+                @changed="pathwaysSelected"
+                @checkAll="checkAllPathways"
+                ref="pathwaysSelection"
+                key="pathwaysSelection"
+              />
               <selections-group
                 v-if="!isFC && taxonConnectivity && taxonConnectivity.length > 0"
                 title="Observed in"
@@ -310,21 +450,20 @@
                 identifierKey="taxon"
                 :selections="taxonConnectivity"
                 @changed="taxonsSelected"
+                @checkboxMouseEnter="taxonMouseEnterEmitted"
                 @checkAll="checkAllTaxons"
                 ref="taxonSelection"
                 key="taxonSelection"
               />
               <selections-group
-                v-if="pathways && pathways.length > 0"
-                title="Pathways"
+                v-if="!isFC && centreLines && centreLines.length > 0"
+                title="Nerves"
                 labelKey="label"
-                identifierKey="type"
-                colourStyle="line"
-                :selections="pathways"
-                @changed="pathwaysSelected"
-                @checkAll="checkAllPathways"
-                ref="pathwaysSelection"
-                key="pathwaysSelection"
+                identifierKey="key"
+                :selections="centreLines"
+                @changed="centreLinesSelected"
+                ref="centrelinesSelection"
+                key="centrelinesSelection"
               />
             </div>
             <div
@@ -394,6 +533,52 @@
               </el-option>
             </el-select>
           </el-row>
+          <template v-if="viewingMode === 'Annotation' && userInformation">
+            <el-row class="backgroundText">Drawn By*</el-row>
+            <el-row class="backgroundControl">
+              <el-select
+                :teleported="false"
+                v-model="drawnType"
+                placeholder="Select"
+                class="select-box"
+                popper-class="flatmap_dropdown"
+                @change="setDrawnType"
+              >
+                <el-option
+                  v-for="item in drawnTypes"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                  <el-row>
+                    <el-col :span="12">{{ item }}</el-col>
+                  </el-row>
+                </el-option>
+              </el-select>
+            </el-row>
+            <el-row class="backgroundText">Annotated By*</el-row>
+            <el-row class="backgroundControl">
+              <el-select
+                :teleported="false"
+                v-model="annotatedType"
+                placeholder="Select"
+                class="select-box"
+                popper-class="flatmap_dropdown"
+                @change="setAnnotatedType"
+              >
+                <el-option
+                  v-for="item in annotatedTypes"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                  <el-row>
+                    <el-col :span="12">{{ item }}</el-col>
+                  </el-row>
+                </el-option>
+              </el-select>
+            </el-row>
+          </template>
           <el-row class="backgroundSpacer" v-if="displayFlightPathOption"></el-row>
           <el-row class="backgroundText" v-if="displayFlightPathOption">Flight path display</el-row>
           <el-row class="backgroundControl" v-if="displayFlightPathOption">
@@ -499,23 +684,37 @@
         :annotationEntry="annotationEntry"
         :entry="tooltipEntry"
         :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>
 
 <script>
-import { shallowRef } from 'vue'
+/* eslint-disable no-alert, no-console */
+import { shallowRef, markRaw } from 'vue'
 import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
   ArrowLeft as ElIconArrowLeft,
 } from '@element-plus/icons-vue'
-/* eslint-disable no-alert, no-console */
 import Tooltip from './Tooltip.vue'
 import SelectionsGroup from './SelectionsGroup.vue'
 import TreeControls from './TreeControls.vue'
 import { MapSvgIcon, MapSvgSpriteColor } from '@abi-software/svg-sprite'
+import '@abi-software/svg-sprite/dist/style.css'
 import SvgLegends from './legends/SvgLegends.vue'
 import {
   ElButton as Button,
@@ -525,6 +724,7 @@ import {
   ElRadioGroup as RadioGroup,
   ElRow as Row,
   ElSelect as Select,
+  ElDialog as Dialog,
 } from 'element-plus'
 import flatmapMarker from '../icons/flatmap-marker'
 import {
@@ -534,9 +734,82 @@ import {
 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`;
+    //   }
+    // }
+  }
+}
+
+const centroid = (geometry) => {
+  let featureGeometry = { lng: 0, lat: 0, }
+  let coordinates
+  if (geometry.type === "Polygon") {
+    coordinates = geometry.coordinates[0]
+  } else {
+    coordinates = geometry.coordinates
+  }
+  if (!(geometry.type === 'Point')) {
+    coordinates.map((coor) => {
+      featureGeometry.lng += parseFloat(coor[0])
+      featureGeometry.lat += parseFloat(coor[1])
+    })
+    featureGeometry.lng = featureGeometry.lng / coordinates.length
+    featureGeometry.lat = featureGeometry.lat / coordinates.length
+  } else {
+    featureGeometry.lng += parseFloat(coordinates[0])
+    featureGeometry.lat += parseFloat(coordinates[1])
+  }
+  return featureGeometry
+}
 
 const processFTUs = (parent, key) => {
   const ftus = []
@@ -611,6 +884,7 @@ export default {
     RadioGroup,
     Row,
     Select,
+    Dialog,
     MapSvgIcon,
     MapSvgSpriteColor,
     Tooltip,
@@ -629,7 +903,310 @@ export default {
     //resolve this issue.
     this.setStateRequired = false
   },
+  setup(props) {
+    const annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
+    return { annotator }
+  },
   methods: {
+    /**
+     * @vuese
+     * Function to initialise drawing.
+     */
+    initialiseDrawing: function () {
+      this.inDrawing = false
+      this.initialiseDialog()
+      this.activeDrawTool = undefined
+      this.createdEvent = undefined
+    },
+    /**
+     * @vuese
+     * Function to cancel a newly drawn feature.
+     */
+    cancelDrawnFeature: function () {
+      if (this.createdEvent) {
+        this.closePopup()
+        this.annotationEntry = {
+          ...this.createdEvent.feature,
+          resourceId: this.serverURL,
+        }
+        this.rollbackAnnotationEvent()
+        this.initialiseDrawing()
+      }
+    },
+    /**
+     * @vuese
+     * Function to display connected features' tooltip for drawn connectivity.
+     * @arg id
+     */
+    displayConnectedFeatureTooltip: function (id) {
+      if (this.mapImp) {
+        const data = this.mapImp.featureProperties(id)
+        this.checkAndCreatePopups({ feature: data })
+      }
+    },
+    /**
+     * @vuese
+     * Function to confirm a newly drawn feature.
+     */
+    confirmDrawnFeature: function () {
+      if (this.createdEvent) {
+        this.checkAndCreatePopups(this.createdEvent)
+        // 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
+        if (Object.keys(this.connectionEntry).length > 0) {
+          this.annotationEntry.feature.connection = this.connectionEntry
+        }
+        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.
+     */
+    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
+      }
+    },
+    /**
+     * @vuese
+     * Function to process the annotation toolbar click events.
+     * @arg type
+     */
+    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
+            this.changeAnnotationDrawMode({
+              mode: 'simple_select',
+              options: { featureIds: [this.currentDrawnFeature.id] }
+            })
+            this.deleteOrEditAnnotationFeature()
+          }
+          this.activeDrawMode = this.activeDrawMode === 'Delete' ? undefined : 'Delete'
+          // clear currentDrawnFeature when quit delete mode
+          if (!this.activeDrawMode) {
+            this.currentDrawnFeature = undefined
+          }
+        } else if (type === 'Edit') {
+          this.activeDrawMode = this.activeDrawMode === 'Edit' ? undefined : 'Edit'
+        }
+      }
+    },
+    /**
+     * @vuese
+     * Function to update the annotation draw mode.
+     * @arg mode
+     */
+    changeAnnotationDrawMode: function (mode) {
+      if (this.mapImp) {
+        this.mapImp.changeAnnotationDrawMode(mode)
+      }
+    },
+    /**
+     * @vuese
+     * Function to remove all drawn annotations from flatmap annotation layer.
+     */
+    clearAnnotationFeature: function () {
+      if (
+        this.mapImp &&
+        this.drawnAnnotationFeatures &&
+        this.drawnAnnotationFeatures.length > 0
+      ) {
+        this.mapImp.clearAnnotationFeature()
+      }
+    },
+    /**
+     * @vuese
+     * 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 () {
+      if (this.mapImp) {
+        // Fire the 'trash' button
+        // Not only use to remove features
+        // 'simple_select' for DELETE and 'direct_select' for EDIT
+        this.mapImp.removeAnnotationFeature()
+      }
+    },
+    /**
+     * @vuese
+     * Function to rollback the failure drawn from flatmap annotation layer.
+     */
+    rollbackAnnotationEvent: function () {
+      // For 'updated' and 'deleted' callback
+      if (
+        this.mapImp &&
+        this.drawnAnnotationEvent.includes(this.annotationEntry.type)
+      ) {
+        this.mapImp.rollbackAnnotationEvent(this.annotationEntry)
+      }
+    },
+    /**
+     * @vuese
+     * Function to commit the emitted ``annotation`` data from successful new drawn to flatmap annotation layer.
+     * @arg annotation
+     */
+    commitAnnotationEvent: function (annotation) {
+      if (
+        this.mapImp &&
+        this.drawnAnnotationEvent.includes(this.annotationEntry.type) &&
+        // Only when annotation comments stored successfully
+        annotation
+      ) {
+        this.annotationSubmitted = 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()
+        }
+      }
+    },
+    /**
+     * @vuese
+     * Function to add existing drawn annotations to flatmap.
+     */
+    setFeatureAnnotated: 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!
+          })
+      }
+    },
+    /**
+     * @vuese
+     * Function to draw existing drawn annotations based on selector.
+     */
+    addAnnotationFeature: function () {
+      if (this.mapImp) {
+        if (!this.annotationSubmitted) this.clearAnnotationFeature()
+        if (this.drawnType !== 'None') {
+          if (!this.annotationSubmitted) 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!
+            })
+        }
+      }
+    },
+    /**
+     * @vuese
+     * Function to display annotator toolbar.
+     * @arg flag
+     */
+    showAnnotator: function (flag) {
+      if (this.mapImp) {
+        // Control the show/hide of the drawn annotations
+        this.mapImp.showAnnotator(flag)
+        // Hide default toolbar, we will use customised SVG icons instead
+        this.$el.querySelector('.maplibregl-ctrl-group').style.display = 'none'
+      }
+    },
+    /**
+     * @vuese
+     * Function to switch the type of annotation.
+     * @arg flag
+     */
+    setDrawnType: function (flag) {
+      this.drawnType = flag
+      if (this.mapImp) {
+        this.addAnnotationFeature()
+      }
+    },
+    /**
+     * @vuese
+     * Function to switch the type of person who annotated.
+     * @arg flag
+     */
+    setAnnotatedType: function (flag) {
+      this.annotatedType = flag
+      if (this.mapImp) {
+        this.addAnnotationFeature()
+      }
+    },
     /**
      * @vuese
      * Function to switch from 2D to 3D
@@ -830,22 +1407,90 @@ export default {
      * by providing path model identifier, ``pathId``.
      * @arg pathId
      */
-    highlightConnectedPaths: function (payload) {
+    highlightConnectedPaths: async function (payload) {
       if (this.mapImp) {
         let paths = [...this.mapImp.pathModelNodes(payload)]
-        // The line below matches the paths to the annIdToFeatureId map to get the feature ids
 
+        // The line below is to get the path features from the geojson ids
         let pathFeatures = paths.map((p) => this.mapImp.featureProperties(p))
+
+        // Query the flatmap knowledge graph for connectivity, we use this to grab the origins
+        let connectivity = await this.flatmapQueries.queryForConnectivity(payload)
+
+        // 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
+
+        // Loop through the path features and check if we have origin nodes
         pathFeatures.forEach((p) => {
+        
+          // Get the nodes from each path feature 
           this.mapImp.nodePathModels(p.featureId).forEach((f) => {
-            toHighlight.push(f)
+            highlight = true
+            // s2 here is the second level paths
+            let s2 = this.mapImp.pathModelNodes(f)
+            s2.forEach((s) => {
+              let s2Feature = this.mapImp.featureProperties([s]) // get the feature properties for s2
+              if (originsFlat.includes(s2Feature.models)) {
+                highlight = false // if we have an origin node, we don't want to highlight the path
+                return
+              }
+            })
+            
+            if (highlight) {
+              toHighlight.push(f)
+            }
           })
         })
+
         // display connected paths
         this.mapImp.zoomToFeatures(toHighlight, { noZoomIn: true })
       }
     },
+    /**
+     * @vuese
+     * Function to enable/disable mouse enter and leave event for
+     * alert checkbox
+     * @arg payload
+     */
+    alertMouseEnterEmitted: function (payload) {
+      if (this.mapImp) {
+        if (payload.value) {
+          const ALERT_FILTER = {
+            HAS: 'alert',
+          }
+          this.mapImp.setVisibilityFilter(ALERT_FILTER)
+        } else {
+          this.mapImp.clearVisibilityFilter()
+          this.alertSelected({
+            value: (payload.checked.length > 0),
+          });
+        }
+      }
+    },
+    /**
+     * @vuese
+     * Function to enable/disable (show/hide) pathways with/without alert
+     * by providing ``kay, value`` ``payload`` object ``{alertKey, true/false}``.
+     * @arg payload
+     */
+     alertSelected: function (payload) {
+      if (this.mapImp) {
+        if (payload.value) {
+          this.mapImp.clearVisibilityFilter()
+        } else {
+          const ALERT_FILTER = {
+            NOT: {HAS: 'alert'}
+          }
+          this.mapImp.setVisibilityFilter(ALERT_FILTER)
+        }
+      }
+    },
     /**
      * @vuese
      * Function to enable/disable (show/hide) the system
@@ -913,6 +1558,22 @@ export default {
         this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value)
       }
     },
+    taxonMouseEnterEmitted: function (payload) {
+      if (this.mapImp) {
+        if (payload.value) {
+          let gid = this.mapImp.taxonFeatureIds(payload.key)  
+          this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value) // make sure path is visible
+          this.mapImp.zoomToGeoJSONFeatures(gid, {noZoomIn: true})
+        } else {
+          // reset visibility of paths 
+          this.mapImp.selectGeoJSONFeatures("-1")
+          payload.selections.forEach((item) => {
+            let show = payload.checked.includes(item.taxon)
+            this.mapImp.enableConnectivityByTaxonIds(item.taxon, show)
+          })
+        }
+      }
+    },
     /**
      * @vuese
      * Function to show or hide connectivity features observed in particular species
@@ -959,6 +1620,71 @@ export default {
     enablePanZoomEvents: function (flag) {
       this.mapImp.enablePanZoomEvents(flag)
     },
+    /**
+     * @vuese
+     * Function to process annotation callbacks, invoked when events occur with the map.
+     * @arg payload,
+     * @arg data
+     */
+    annotationEventCallback: function (payload, data) {
+      // Popup closed will trigger aborted event
+      if (data.type === 'aborted') {
+        // Rollback drawing when no new annotation submitted
+        if (!this.annotationSubmitted) this.rollbackAnnotationEvent()
+        else this.annotationSubmitted = 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()
+          }
+        } 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()
+          // 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
+            }
+            this.drawModeEvent(payload)
+          }
+        }
+      } else {
+        if (data.type === 'created' || data.type === 'updated') {
+          if (data.type === 'updated' && data.feature.action) {
+            data.positionUpdated = data.feature.action === 'move'
+          }
+          const feature = this.mapImp.refreshAnnotationFeatureGeometry(data.feature)
+          payload.feature.feature = feature
+          // NB. this might now be `null` if user has deleted it (before OK/Submit)
+          // so maybe then no `service.addAnnotation` ??
+        }
+        // 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)
+        }
+      }
+    },
     /**
      * @vuese
      * A callback function, invoked when events occur with the map.
@@ -967,67 +1693,187 @@ export default {
      */
     eventCallback: function () {
       return (eventType, data, ...args) => {
-        if (eventType !== 'pan-zoom') {
-          const label = data.label
-          const resource = [data.models]
-          const taxonomy = this.entry
-          const biologicalSex = this.biologicalSex
-          let taxons = undefined
-          if (data.taxons) {
-            // check if data.taxons is string or array
-            if (typeof data.taxons !== 'object') {
-              taxons = JSON.parse(data.taxons)
-            } else {
-              taxons = data.taxons
-            }
-          }
+        if (eventType === 'annotation') {
           const payload = {
-            dataset: data.dataset,
-            biologicalSex: biologicalSex,
-            taxonomy: taxonomy,
-            resource: resource,
-            label: label,
             feature: data,
             userData: args,
             eventType: eventType,
-            provenanceTaxonomy: taxons,
           }
-          if (eventType === 'click') {
-            if (this.viewingMode === 'Network Discovery') {
-              this.highlightConnectedPaths([data.models])
-            } else {
-              this.currentActive = data.models ? data.models : ''
+          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
+            const biologicalSex = this.biologicalSex
+            let taxons = undefined
+            if (data.taxons) {
+              // check if data.taxons is string or array
+              if (typeof data.taxons !== 'object') {
+                taxons = JSON.parse(data.taxons)
+              } else {
+                taxons = data.taxons
+              }
             }
-          } else if (
-            eventType === 'mouseenter' &&
-            !(this.viewingMode === 'Network Discovery')
-          ) {
-            this.currentHover = data.models ? data.models : ''
+            const payload = {
+              dataset: data.dataset,
+              biologicalSex: biologicalSex,
+              taxonomy: taxonomy,
+              resource: resource,
+              label: label,
+              feature: data,
+              userData: args,
+              eventType: eventType,
+              provenanceTaxonomy: taxons,
+            }
+            if (eventType === 'click') {
+              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},
+                      Object.fromEntries(
+                        Object.entries(data)
+                              .filter(([key]) => ['featureId', 'models'].includes(key))
+                              .map(([key, value]) => [(key === 'featureId') ? 'id' : key, value])))
+                  }
+                }
+              }
+            } else if (
+              eventType === 'mouseenter' &&
+              !(this.viewingMode === 'Network Discovery')
+            ) {
+              this.currentHover = data.models ? data.models : ''
+            }
+            if (
+              data &&
+              data.type !== 'marker' &&
+              eventType === 'click' &&
+              !(this.viewingMode === 'Network Discovery') &&
+              // Disable popup when drawing
+              !this.inDrawing
+            ) {
+              this.checkAndCreatePopups(payload)
+            }
+            this.$emit('resource-selected', payload)
+          } else {
+            this.$emit('pan-zoom-callback', data)
           }
-          if (
-            data &&
-            data.type !== 'marker' &&
-            eventType === 'click' &&
-            !(this.viewingMode === 'Network Discovery')
-          ) {
-            this.checkAndCreatePopups(payload)
+        }
+      }
+    },
+    /**
+     * 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');
           }
-          /**
-           * The event emitted from the mouse event callbacks that come from flatmap-viewer. The payload
-           * argument provides an object with information on the feature where the mouse event takes place.
-           * @arg payload
-           */
-          this.$emit('resource-selected', payload)
+        })
+        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 {
-          /**
-           * The event emitted in ``callback`` function from ``MapManager.loadMap()``
-           * if ``eventType`` is ``pan-zoom``.
-           * @arg data
-           */
-          this.$emit('pan-zoom-callback', data)
+          // 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.
@@ -1047,13 +1893,33 @@ export default {
     checkAndCreatePopups: async function (data) {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
-        if (data.feature && data.feature.featureId && data.feature.models) {
+        if (data.feature) {
           this.annotationEntry = {
             ...data.feature,
-            resource: this.serverURL,
-            resourceId: this.serverUUID,
+            resourceId: this.serverURL,
+          }
+          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
+              this.annotationEntry.featureId = data.feature.feature.id
+              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.displayTooltip(data.feature.models)
         } else {
           this.annotation = {}
         }
@@ -1087,6 +1953,14 @@ 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.
@@ -1227,28 +2101,26 @@ export default {
      * by providing featureId (``feature``).
      * @arg feature
      */
-    displayTooltip: function (feature) {
+    displayTooltip: function (feature, geometry = undefined) {
       this.tooltipDisplay = true
+      let featureId = undefined
+      let options = { className: 'flatmapvuer-popover' }
+      if (geometry) {
+        featureId = feature
+        options.annotationFeatureGeometry = geometry
+      } else {
+        featureId = this.mapImp.modelFeatureIds(feature)[0]
+        if (!this.inDrawing) {
+          options.positionAtLastClick = true
+        }
+      }
       if (!this.disableUI) {
         this.$nextTick(() => {
-          this.displayPopup(feature)
-        });
+          this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options)
+          this.popUpCssHacks()
+        })
       }
     },
-    /**
-     * @vuese
-     * Function to display popup
-     * by providing featureId (``feature``).
-     * @arg feature
-     */
-    displayPopup: function (feature) {
-      this.mapImp.showPopup(
-        this.mapImp.modelFeatureIds(feature)[0],
-        this.$refs.tooltip.$el,
-        { className: 'flatmapvuer-popover', positionAtLastClick: true }
-      )
-      this.popUpCssHacks()
-    },
     /**
      * @vuese
      * Function to open Flatmap Help Popup.
@@ -1429,7 +2301,6 @@ export default {
         )
         promise1.then((returnedObject) => {
           this.mapImp = returnedObject
-          this.serverUUID = this.mapImp.getIdentifier().uuid
           this.serverURL = this.mapImp.makeServerUrl('').slice(0, -1)
           let mapVersion = this.mapImp.details.version
           this.setFlightPathInfo(mapVersion)
@@ -1498,6 +2369,7 @@ export default {
       //this.layers = this.mapImp.getLayers();
       this.processSystems(this.mapImp.getSystems())
       this.processTaxon(this.flatmapAPI, this.mapImp.taxonIdentifiers)
+      this.containsAlert = "alert" in this.mapImp.featureFilterRanges()
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
@@ -1749,7 +2621,9 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
-      userApiKey: this.userToken
+      $annotator: this.annotator,
+      userApiKey: this.userToken,
+      getFeaturesAlert: () => this.featuresAlert,
     }
   },
   data: function () {
@@ -1759,7 +2633,6 @@ export default {
       //for the first time, otherwise it may display an arrow at a
       //undesired location.
       tooltipDisplay: false,
-      serverUUID: undefined,
       serverURL: undefined,
       layers: [],
       pathways: [],
@@ -1790,6 +2663,12 @@ export default {
         { value: false },
         { value: false },
         { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
       ],
       yellowstar: yellowstar,
       isFC: false,
@@ -1801,7 +2680,7 @@ export default {
       tooltipEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
       drawerOpen: false,
-      annotationRadio: false,
+      featuresAlert: undefined,
       flightPath3DRadio: false,
       displayFlightPathOption: false,
       colourRadio: true,
@@ -1809,15 +2688,50 @@ export default {
       minimapResizeShow: false,
       minimapSmall: false,
       currentActive: '',
+      currentDrawnFeature: undefined, // Clicked drawn annotation
       currentHover: '',
       viewingMode: 'Exploration',
       viewingModes: ['Annotation', 'Exploration', 'Network Discovery'],
+      drawnType: 'All tools',
+      drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
+      annotatedType: 'Anyone',
+      annotatedTypes: ['Anyone', 'Me', 'Others'],
       openMapRef: undefined,
       backgroundIconRef: undefined,
+      annotator: undefined,
+      userInformation: undefined,
+      activeDrawTool: undefined,
+      drawnAnnotationEvent: ['created', 'updated', 'deleted'],
+      createdEvent: undefined,
+      annotationSubmitted: false,
+      inDrawing: false,
+      connectionDisplay: false,
+      connectionEntry: {},
+      drawnAnnotationFeatures: undefined, // Store all exist drawn features
+      doubleClickedFeature: false,
+      activeDrawMode: undefined,
+      drawModes: ['Delete', 'Edit'],
+      dialogPosition: {
+        offsetX: 0,
+        offsetY: 0,
+        x: undefined,
+        y: undefined
+      },
+      containsAlert: false,
+      alertOptions: [
+        {
+          label: 'Display Path With Alerts',
+          key: 'alert',
+          enabled: true,
+        },
+      ],
     }
   },
   computed: {
     ...mapState(useMainStore, ['userToken']),
+    connection: function () {
+      return Object.keys(this.connectionEntry).length > 0
+    }
   },
   watch: {
     entry: function () {
@@ -1842,6 +2756,74 @@ 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) {
+              this.addAnnotationFeature()
+            }
+          }
+          this.loading = false
+        })
+      } else this.showAnnotator(false)
+    },
     disableUI: function (isUIDisabled) {
       if (isUIDisabled) {
         this.closeTooltip()
@@ -1924,6 +2906,7 @@ export default {
   position: absolute;
   bottom: 0px;
   transition: all 1s ease;
+  z-index: 8;
   &.open {
     left: 0px;
   }
@@ -1998,7 +2981,8 @@ export default {
 }
 
 :deep(.maplibregl-popup) {
-  max-width: 300px !important;
+  z-index: 10;
+  max-width: 330px !important;
 }
 
 :deep(.flatmap-tooltip-popup) {
@@ -2170,12 +3154,19 @@ export default {
   }
 }
 
-.zoomOut {
-  padding-left: 8px;
+.drawPoint, .drawLineString, .drawPolygon, 
+.drawDelete, .drawEdit, .drawConnection,
+.zoomIn, .zoomOut, .fitWindow {
+  padding: 4px;
+}
+
+.iconSelected {
+  color: var(--el-color-primary-light-5) !important;
 }
 
-.fitWindow {
-  padding-left: 8px;
+.inactive {
+  color: #DDDDDD !important;
+  cursor: not-allowed !important;
 }
 
 .yellow-star-legend {
@@ -2187,6 +3178,7 @@ export default {
   bottom: 16px;
   position: absolute;
   transition: all 1s ease;
+  z-index: 10;
   &.open {
     left: 322px;
   }
@@ -2200,7 +3192,7 @@ export default {
   background-color: #ffffff;
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-  height: 290px;
+  height: fit-content;
   min-width: 200px;
   .el-popper__arrow {
     &:before {
@@ -2383,25 +3375,27 @@ export default {
   }
 }
 
-:deep(.popper-zoomout) {
-  padding-right: 13px !important;
-  left: -21px !important;
-}
-
-:deep(.popper-zoomout) {
-  .popper__arrow {
-    left: 53px !important;
-  }
-}
-
 :deep(.maplibregl-popup-content) {
   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;
   bottom: 16px;
+  z-index: 10;
 }
 
 :deep(.my-drawer) {
@@ -2587,6 +3581,12 @@ export default {
     }
   }
 }
+
+.connection-dialog {
+  position: absolute;
+  z-index: 10;
+  cursor: move;
+}
 </style>
 
 <style lang="scss">