@abi-software/flatmapvuer 0.6.0-vue3.8 → 0.6.1-annotator.1

package/src/components/FlatmapVuer.vue

@@ -136,6 +136,128 @@
         <el-icon-arrow-down />
       </el-icon>
 
+      <div class="bottom-draw-control"
+        v-show="viewingMode === 'Annotation' && userInformation && !disableUI"
+      >
+        <el-popover
+          content="Relevance"
+          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 drawRelevance inactive"
+              @click="relevanceDialogPopup"
+              @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 +284,7 @@
           :teleported="false"
           trigger="manual"
           width="70"
-          popper-class="flatmap-popper popper-zoomout"
+          popper-class="flatmap-popper"
           :visible="hoverVisibilities[1].value"
         >
           <template #reference>
@@ -219,7 +341,6 @@
               class="pathway-container"
               :class="{ open: drawerOpen, close: !drawerOpen }"
               :style="{ 'max-height': pathwaysMaxHeight + 'px' }"
-              v-if="pathControls"
               v-popover:checkBoxPopover
             >
               <svg-legends v-if="!isFC" class="svg-legends-container" />
@@ -350,7 +471,14 @@
         virtual-triggering
       >
         <el-row v-for="item in openMapOptions" :key="item.key">
-          <el-button type="primary" plain @click="$emit('open-map', item.key)">
+          <el-button type="primary" plain
+            @click="/**
+             * This event is emitted when the user chooses a different map option
+             * from ``openMapOptions`` props.
+             * @arg mapOption.key
+            * */
+            $emit('open-map', item.key)"
+          >
             {{ item.display }}
           </el-button>
         </el-row>
@@ -362,7 +490,7 @@
         width="200"
         :teleported="false"
         trigger="click"
-        popper-class="background-popper"
+        popper-class="background-popper h-auto"
         virtual-triggering
       >
         <div>
@@ -376,8 +504,8 @@
               popper-class="flatmap_dropdown"
             >
               <el-option
-                v-for="item in viewingModes"
-                :key="item"
+                v-for="(item, i) in viewingModes"
+                :key="item + i"
                 :label="item"
                 :value="item"
               >
@@ -387,6 +515,64 @@
               </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">
+            <el-radio-group
+              v-model="flightPath3DRadio"
+              class="flatmap-radio"
+              @change="setFlightPath3D"
+            >
+            <el-radio :label="false">2D</el-radio>
+            <el-radio :label="true">3D</el-radio>
+            </el-radio-group>
+          </el-row>
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText">Organs display</el-row>
           <el-row class="backgroundControl">
@@ -480,23 +666,37 @@
         :annotationEntry="annotationEntry"
         :entry="tooltipEntry"
         :annotationDisplay="viewingMode === 'Annotation'"
+        @annotation="commitAnnotationEvent"
+      />
+      <RelevanceDialog
+        class="relevance-dialog"
+        v-show="relevanceDisplay"
+        :entry="relevanceEntry"
+        :drawing="inDrawing"
+        :relevance="relevance"
+        @display="relevanceDialogPopup"
+        @confirm="confirmDrawnFeature"
+        @cancel="cancelDrawnFeature"
+        @popup="closePopup"
+        @tooltip="displayRelevantFeatureTooltip"
       />
     </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,
@@ -506,6 +706,7 @@ import {
   ElRadioGroup as RadioGroup,
   ElRow as Row,
   ElSelect as Select,
+  ElDialog as Dialog,
 } from 'element-plus'
 import flatmapMarker from '../icons/flatmap-marker'
 import {
@@ -515,7 +716,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 RelevanceDialog from './RelevanceDialog.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 = []
@@ -577,6 +853,9 @@ const createUnfilledTooltipData = function () {
   }
 }
 
+/**
+ * A vue component of the flatmap viewer.
+ */
 export default {
   name: 'FlatmapVuer',
   components: {
@@ -587,6 +866,7 @@ export default {
     RadioGroup,
     Row,
     Select,
+    Dialog,
     MapSvgIcon,
     MapSvgSpriteColor,
     Tooltip,
@@ -605,7 +885,247 @@ export default {
     //resolve this issue.
     this.setStateRequired = false
   },
+  setup(props) {
+    const annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
+    return { annotator }
+  },
   methods: {
+    // This should be called when create is confirmed or cancelled
+    initialiseDrawing: function () {
+      this.inDrawing = false
+      this.initialiseDialog()
+      this.activeDrawTool = undefined
+      this.createdEvent = undefined
+    },
+    cancelDrawnFeature: function () {
+      if (this.createdEvent) {
+        this.closePopup()
+        this.annotationEntry = {
+          ...this.createdEvent.feature,
+          resourceId: this.serverURL,
+        }
+        this.rollbackAnnotationEvent()
+        this.initialiseDrawing()
+      }
+    },
+    displayRelevantFeatureTooltip: function (id) {
+      if (this.mapImp) {
+        const data = this.mapImp.featureProperties(id)
+        this.checkAndCreatePopups({ feature: data })
+      }
+    },
+    confirmDrawnFeature: function () {
+      if (this.createdEvent) {
+        this.checkAndCreatePopups(this.createdEvent)
+        // Add relevance if exist to annotationEntry
+        // Relevance will only be added in creating new drawn feature annotation
+        // And will not be updated if move drawn features
+        if (Object.keys(this.relevanceEntry).length > 0) {
+          this.annotationEntry.feature.relevance = this.relevanceEntry
+        }
+        this.initialiseDrawing()
+      }
+    },
+    initialiseDialog: function () {
+      this.relevanceDisplay = false
+      this.relevanceEntry = {}
+    },
+    relevanceDialogPopup: function () {
+      const inactive = this.$el.querySelector('.drawRelevance').classList.contains('inactive')
+      // disable click popup if icon inactive or in drawing
+      if (!inactive && !this.inDrawing) { 
+        this.closePopup()       
+        this.relevanceDisplay = !this.relevanceDisplay
+      }
+    },
+    drawingEvent: function (type) {
+      this.closePopup()
+      // disable mode icon click if any tool is active
+      if (this.drawnTypes.includes(type) && !this.activeDrawMode && !this.relevanceDisplay) {
+        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'
+        }
+      }
+    },
+    changeAnnotationDrawMode: function (mode) {
+      if (this.mapImp) {
+        this.mapImp.changeAnnotationDrawMode(mode)
+      }
+    },
+    // Remove all drawn annotations from annotation layer
+    clearAnnotationFeature: function () {
+      if (
+        this.mapImp &&
+        this.drawnAnnotationFeatures &&
+        this.drawnAnnotationFeatures.length > 0
+      ) {
+        this.mapImp.clearAnnotationFeature()
+      }
+    },
+    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()
+      }
+    },
+    rollbackAnnotationEvent: function () {
+      // For 'updated' and 'deleted' callback
+      if (
+        this.mapImp &&
+        this.drawnAnnotationEvent.includes(this.annotationEntry.type)
+      ) {
+        this.mapImp.rollbackAnnotationEvent(this.annotationEntry)
+      }
+    },
+    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()
+        }
+      }
+    },
+    setFeatureAnnotated: function () {
+      if (this.mapImp) {
+        this.annotator.annotatedItemIds(this.userToken, this.serverURL)
+          .then((annotatedItemIds) => {
+            for (const id of annotatedItemIds) {
+              this.mapImp.setFeatureAnnotated(id)
+            }
+          })
+          .catch((reason) => {
+            console.log(reason) // Error!
+          })
+      }
+    },
+    addAnnotationFeature: function () {
+      if (this.mapImp) {
+        if (!this.annotationSubmitted) this.clearAnnotationFeature()
+        if (this.drawnType !== 'None') {
+          if (!this.annotationSubmitted) this.loading = true
+          this.annotator.drawnFeatures(this.userToken, this.serverURL)
+            .then((drawnFeatures) => {
+              // 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
+              if (!this.annotationSubmitted) {
+                for (const feature of drawnFeatures) {
+                  if (this.annotatedType !== 'Anyone') {
+                    this.annotator
+                      .itemAnnotations(this.userToken, this.serverURL, feature.id)
+                      .then((value) => {
+                        let participated = value.filter((v) => {
+                          return (
+                            v.creator.name === this.userInformation.name &&
+                            v.creator.email === this.userInformation.email
+                          )
+                        }).length > 0
+                        if (
+                          (this.annotatedType === 'Me' && participated) ||
+                          (this.annotatedType === 'Others' && !participated)
+                        ) {
+                          this.mapImp.addAnnotationFeature(feature)
+                        }
+                      })
+                      .catch((reason) => {
+                        console.log(reason) // Error!
+                      })
+                  } else this.mapImp.addAnnotationFeature(feature)
+                }
+              }
+            })
+            .catch((reason) => {
+              console.log(reason) // Error!
+            })
+        }
+      }
+    },
+    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'
+      }
+    },
+    setDrawnType: function (flag) {
+      this.drawnType = flag
+      if (this.mapImp) {
+        this.addAnnotationFeature()
+      }
+    },
+    setAnnotatedType: function (flag) {
+      this.annotatedType = flag
+      if (this.mapImp) {
+        this.addAnnotationFeature()
+      }
+    },
+    /**
+     * @vuese
+     * Function to switch from 2D to 3D
+     * @arg flag
+     */
+    setFlightPath3D: function (flag) {
+      this.flightPath3DRadio = flag
+      if (this.mapImp) {
+        this.mapImp.enableFlightPaths(flag)
+      }
+    },
+    /**
+     * @vuese
+     * Function to view the latest map (example when you are on legacy map).
+     */
     viewLatestMap: function () {
       let biologicalSex = this.biologicalSex ? this.biologicalSex : undefined
       //Human requires special handling
@@ -617,14 +1137,28 @@ export default {
         biologicalSex,
         viewport: this.mapImp.getState(),
       }
+      /**
+       * The event emitted by ``viewLatestMap`` method.
+       */
       this.$emit('view-latest-map', state)
     },
+    /**
+     * @vuese
+     * Function to change the background colour of the map
+     * by providing the ``colour``.
+     * @arg colour
+     */
     backgroundChangeCallback: function (colour) {
       this.currentBackground = colour
       if (this.mapImp) {
         this.mapImp.setBackgroundColour(this.currentBackground, 1)
       }
     },
+    /**
+     * @vuese
+     * Function to process a list of a FC flatmap's systems.
+     * @arg systems
+     */
     processSystems: function (systems) {
       this.systems.length = 0
       if (systems && systems.length > 0) {
@@ -644,6 +1178,13 @@ export default {
         this.systems.push(data)
       }
     },
+    /**
+     * @vuese
+     * Function to add taxon identifiers into the taxon connectivity array,
+     * by retrieving their corresponding labels using the flatmap API.
+     * @arg flatmapAPI,
+     * @arg taxonIdentifiers
+     */
     processTaxon: function (flatmapAPI, taxonIdentifiers) {
       this.taxonConnectivity.length = 0
       taxonIdentifiers.forEach((taxon) => {
@@ -653,11 +1194,18 @@ export default {
         })
       })
     },
+    /**
+     * @vuese
+     * Function to show or hide the display of the bottom-left drawer container.
+     */
     toggleDrawer: function () {
       this.drawerOpen = !this.drawerOpen
     },
     /**
+     * @vuese
      * Function to toggle colour/greyscale of organs.
+     * The parameter ``flag`` is a boolean, ``true`` (colour) and ``false`` (greyscale).
+     * @arg flag
      */
     setColour: function (flag) {
       this.colourRadio = flag
@@ -666,7 +1214,10 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to toggle outlines f organs.
+     * The parameter ``flag`` is a boolean, ``true`` to show outlines, ``false`` to hide outlines.
+     * @arg flag
      */
     setOutlines: function (flag) {
       this.outlineRadio = flag
@@ -675,6 +1226,7 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to toggle paths to default.
      * Also called when the associated button is pressed.
      */
@@ -699,6 +1251,7 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to zoom in.
      * Also called when the associated button is pressed.
      */
@@ -708,6 +1261,7 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to zoom out.
      * Also called when the associated button is pressed.
      */
@@ -716,16 +1270,34 @@ export default {
         this.mapImp.zoomOut()
       }
     },
+    /**
+     * @vuese
+     * Function to show or hide centrelines and nodes.
+     * The parameter ``payload`` is an object with a boolean property, ``value``,
+     * ``payload.value = true/false``.
+     * @arg payload
+     */
     centreLinesSelected: function (payload) {
       if (this.mapImp) {
         this.mapImp.enableCentrelines(payload.value)
       }
     },
+    /**
+     * // Currently not in use
+     * Function to show or hide paths valid in SCKAN
+     * by providing ``{key, value}`` pair in ``payload``.
+     * @arg payload
+     */
     sckanSelected: function (payload) {
       if (this.mapImp) {
         this.mapImp.enableSckanPath(payload.key, payload.value)
       }
     },
+    /**
+     * // Currently not in use
+     * Function to show or hide all paths valid in SCKAN.
+     * @arg payload
+     */
     checkAllSCKAN: function (payload) {
       if (this.mapImp) {
         payload.keys.forEach((key) =>
@@ -733,6 +1305,12 @@ export default {
         )
       }
     },
+    /**
+     * @vuese
+     * Function to highlight the connected paths
+     * by providing path model identifier, ``pathId``.
+     * @arg pathId
+     */
     highlightConnectedPaths: function (payload) {
       if (this.mapImp) {
         let paths = [...this.mapImp.pathModelNodes(payload)]
@@ -749,11 +1327,23 @@ export default {
         this.mapImp.zoomToFeatures(toHighlight, { noZoomIn: true })
       }
     },
+    /**
+     * @vuese
+     * Function to enable/disable (show/hide) the system
+     * by providing ``kay, value`` ``payload`` object ``{systemId, true/false}``.
+     * @arg payload
+     */
     systemSelected: function (payload) {
       if (this.mapImp) {
         this.mapImp.enableSystem(payload.key, payload.value)
       }
     },
+    /**
+     * @vuese
+     * Function to enable/disable (show/hide) all systems
+     * by providing ``flag`` (true/false).
+     * @arg flag
+     */
     checkAllSystems: function (flag) {
       if (this.mapImp) {
         this.systems[0].children.forEach((key) =>
@@ -761,14 +1351,31 @@ export default {
         )
       }
     },
+    /**
+     * @vuese
+     * Function to display features with annotation matching the provided term.
+     * @arg models
+     */
     ftuSelected: function (models) {
       this.searchAndShowResult(models, true)
     },
+    /**
+     * @vuese
+     * Function to show or hide the layer
+     * by providing ``{layerId, true/false}`` in ``payload``.
+     * @arg payload
+     */
     layersSelected: function (payload) {
       if (this.mapImp) {
         this.mapImp.enableLayer(payload.key, payload.value)
       }
     },
+    /**
+     * @vuese
+     * Function to show or hide all layers
+     * by providing ``payload`` with ``payload.keys`` array and ``payload.value`` flag.
+     * @arg payload
+     */
     checkAllLayers: function (payload) {
       if (this.mapImp) {
         payload.keys.forEach((key) =>
@@ -776,11 +1383,23 @@ export default {
         )
       }
     },
+    /**
+     * @vuese
+     * Function to show or hide connectivity features observed in particular species
+     * by providing ``{taxonId, true/false}`` in ``payload.key, payload.value``.
+     * @arg payload
+     */
     taxonsSelected: function (payload) {
       if (this.mapImp) {
         this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value)
       }
     },
+    /**
+     * @vuese
+     * Function to show or hide connectivity features observed in particular species
+     * by providing ``payload`` with ``payload.keys`` array and ``payload.value`` flag.
+     * @arg payload
+     */
     checkAllTaxons: function (payload) {
       if (this.mapImp) {
         payload.keys.forEach((key) =>
@@ -788,11 +1407,23 @@ export default {
         )
       }
     },
+    /**
+     * @vuese
+     * Function to hide or show paths of a given type
+     * by providing ``{pathType, true/false}`` in ``payload.key, payload.value``.
+     * @arg payload
+     */
     pathwaysSelected: function (payload) {
       if (this.mapImp) {
         this.mapImp.enablePath(payload.key, payload.value)
       }
     },
+    /**
+     * @vuese
+     * Function to hide or show paths of a given type
+     * by providing ``payload`` with ``payload.keys`` array and ``payload.value`` flag.
+     * @arg payload
+     */
     checkAllPathways: function (payload) {
       if (this.mapImp) {
         payload.keys.forEach((key) =>
@@ -800,65 +1431,284 @@ export default {
         )
       }
     },
+    /**
+     * @vuese
+     * Function to generate callbacks as a result of panning/zooming the map.
+     * ``flag`` (boolean) - generate callbacks when ``true``, otherwise disable them.
+     * @arg flag
+     */
     enablePanZoomEvents: function (flag) {
       this.mapImp.enablePanZoomEvents(flag)
     },
+    /**
+     * @vuese
+     * A callback function, invoked when events occur with the map.
+     * The first parameter gives the type of event, the second provides details about the event.
+     * _(This is the ``callback`` function from ``MapManager.loadMap()``)_.
+     */
     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
+        if (eventType === 'annotation') {
           const payload = {
-            dataset: data.dataset,
-            biologicalSex: biologicalSex,
-            taxonomy: taxonomy,
-            resource: resource,
-            label: label,
             feature: data,
             userData: args,
             eventType: eventType,
-            provenanceTaxonomy: data.taxons
-              ? JSON.parse(data.taxons)
-              : undefined,
           }
-          if (eventType === 'click') {
-            if (this.viewingMode === 'Network Discovery') {
-              this.highlightConnectedPaths([data.models])
+          // 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.relevanceDisplay = 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.relevance) {
+                  this.relevanceEntry = feature.relevance
+                }
+                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.currentActive = data.models ? data.models : ''
+              this.checkAndCreatePopups(payload)
             }
-          } 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')
-          ) {
-            this.checkAndCreatePopups(payload)
+        } else {
+          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
+              }
+            }
+            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.relevanceDisplay) {
+                  // Only clicked relevance data will be added 
+                  let relevant = data.label ? data.label : `*${data.id}`
+                  // only the linestring will have relevance at the current stage
+                  if (relevant && this.activeDrawTool === 'LineString') {
+                    this.relevanceEntry[relevant] = data.featureId
+                  }
+                }
+              }
+            } 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)
+          }
+        }
+      }
+    },
+    // for dialog popup
+    dialogCssHacks: function () {
+      this.$nextTick(() => {
+        const dialog = this.$el.querySelector('.relevance-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)`
+      })
+    },
+    drawIconCssHacks: function () {
+      // set tool/mode icon status
+      if (this.$el.querySelector('.iconSelected') || !this.relevanceDisplay) {
+        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.relevanceDisplay) {
+        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');
+        })
+      }
+    },
+    // Fire either update or delete event
+    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.$emit('resource-selected', payload)
+          this.doubleClickedFeature = false
         } else {
-          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()
+          }
         }
       }
     },
     // checkNeuronClicked shows a neuron path pop up if a path was recently clicked
+    createConnectivityBody: function () {
+      if (Object.keys(this.relevanceEntry).length > 0) {        
+        const featureIds = Object.values(this.relevanceEntry)
+        const body = {
+          type: 'connectivity',
+          sourceId: featureIds[0],
+          targetId: featureIds[featureIds.length - 1],
+          intermediateIds: [],
+        }
+        if (featureIds.length > 2) {
+          featureIds.slice(1, -1).forEach((id) => {
+            body.intermediateIds.push(id)
+          });
+        }
+        this.annotationEntry.body = body
+      }
+    },
+    /**
+     * @vuese
+     * Function to create/display tooltips from the provided ``data``.
+     * _checkNeuronClicked shows a neuron path pop up if a path was recently clicked._
+     * @arg data
+     */
     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,
-            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 = {}
         }
@@ -878,6 +1728,9 @@ export default {
         }
       }
     },
+    /**
+     * A hack to remove flatmap tooltips while popup is open
+     */
     popUpCssHacks: function () {
       // Below is a hack to remove flatmap tooltips while popup is open
       let ftooltip = document.querySelector('.flatmap-tooltip-popup')
@@ -886,21 +1739,41 @@ export default {
         'block'
       this.$refs.tooltip.$el.style.display = 'flex'
       document.querySelector('.maplibregl-popup-close-button').onclick = () => {
-        document.querySelector('.flatmap-tooltip-popup').style.display = 'block'
+        if (ftooltip) ftooltip.style.display = 'block'
       }
     },
+    closePopup: function () {
+      let cbutton = document.querySelector('.maplibregl-popup-close-button')
+      if (cbutton) cbutton.click()
+    },
+    /**
+     * @vuese
+     * Function to close tooltip.
+     */
     closeTooltip: function () {
       this.$refs.tooltip.$el.style.display = 'none'
       document.querySelectorAll('.maplibregl-popup').forEach((item) => {
         item.style.display = 'none'
       })
     },
+    /**
+     * @vuese
+     * Function to create tooltip from Neuron Curation ``data``.
+     * @arg data
+     */
     createTooltipFromNeuronCuration: async function (data) {
       this.tooltipEntry = await this.flatmapQueries.createTooltipData(data)
       this.displayTooltip(data.resource[0])
     },
-    // Keeping this as an API
+    /**
+     * @vuese
+     * Function to show popup on map.
+     * @arg featureId,
+     * @arg node,
+     * @arg options
+     */
     showPopup: function (featureId, node, options) {
+      // Keeping this as an API
       let myOptions = options
       if (this.mapImp) {
         if (myOptions) {
@@ -911,11 +1784,22 @@ export default {
         this.mapImp.showPopup(featureId, node, myOptions)
       }
     },
+    /**
+     * @vuese
+     * Function to show marker popup.
+     * @arg featureId,
+     * @arg node,
+     * @arg options
+     */
     showMarkerPopup: function (featureId, node, options) {
       if (this.mapImp) {
         this.mapImp.showMarkerPopup(featureId, node, options)
       }
     },
+    /**
+     * @vuese
+     * Function to close minimap.
+     */
     closeMinimap: function () {
       let minimapEl = this.$refs.flatmapContainer.querySelector(
         '.maplibregl-ctrl-minimap'
@@ -930,6 +1814,9 @@ export default {
       }
       this.minimapSmall = !this.minimapSmall
     },
+    /**
+     * Function to add resize button to minimap.
+     */
     addResizeButtonToMinimap: function () {
       let minimapEl = this.$refs.flatmapContainer.querySelector(
         '.maplibregl-ctrl-minimap'
@@ -944,6 +1831,12 @@ export default {
         this.minimapResizeShow = true
       }
     },
+    /**
+     * @vuese
+     * Function to set help mode
+     * by providing flag ``helpMode`` (true/false).
+     * @arg helpMode
+     */
     setHelpMode: function (helpMode) {
       if (helpMode) {
         this.inHelp = true
@@ -959,6 +1852,12 @@ export default {
         this.closeFlatmapHelpPopup()
       }
     },
+    /**
+     * @vuese
+     * Function to show tooltip
+     * by providing ``tooltipNumber``.
+     * @arg tooltipNumber
+     */
     showToolitip: function (tooltipNumber) {
       if (!this.inHelp) {
         clearTimeout(this.tooltipWait[tooltipNumber])
@@ -967,6 +1866,12 @@ export default {
         }, 500)
       }
     },
+    /**
+     * @vuese
+     * Function to hide tooltip
+     * by providing ``tooltipNumber``.
+     * @arg tooltipNumber
+     */
     hideToolitip: function (tooltipNumber) {
       if (!this.inHelp) {
         clearTimeout(this.tooltipWait[tooltipNumber])
@@ -975,20 +1880,36 @@ export default {
         }, 500)
       }
     },
-    displayTooltip: function (feature) {
+    /**
+     * @vuese
+     * Function to display tooltip
+     * by providing featureId (``feature``).
+     * @arg 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.displayPopup(feature)
+        this.$nextTick(() => {
+          this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options)
+          this.popUpCssHacks()
+        })
       }
     },
-    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.
+     */
     openFlatmapHelpPopup: function () {
       if (this.mapImp) {
         let heartId = this.mapImp.modelFeatureIds('UBERON:0000948')
@@ -1001,6 +1922,10 @@ export default {
         }
       }
     },
+    /**
+     * @vuese
+     * Function to close Flatmap Help Popup.
+     */
     closeFlatmapHelpPopup: function () {
       this.$el
         .querySelectorAll('.maplibregl-popup-close-button')
@@ -1008,6 +1933,10 @@ export default {
           item.click()
         })
     },
+    /**
+     * @vuese
+     * Function to get annotation labels.
+     */
     getLabels: function () {
       let labels = []
       if (this.mapImp) {
@@ -1018,6 +1947,10 @@ export default {
         return Array.from(new Set(labels))
       }
     },
+    /**
+     * @vuese
+     * Function to get the state (object) of the map.
+     */
     getState: function () {
       if (this.mapImp) {
         let state = {
@@ -1033,6 +1966,11 @@ export default {
       }
       return undefined
     },
+    /**
+     * @vuese
+     * Function to set state (object) for the map.
+     * @arg state
+     */
     setState: function (state) {
       if (state) {
         if (
@@ -1050,12 +1988,40 @@ export default {
         this.setStateRequired = false
       }
     },
+    /**
+     * @vuese
+     * Function to restore map's state
+     * from the ``state`` provided.
+     * @arg state
+     */
     restoreMapState: function (state) {
       if (state) {
         if (state.viewport) this.mapImp.setState(state.viewport)
         if (state.searchTerm) this.searchAndShowResult(state.searchTerm, true)
       }
     },
+    /**
+     * @vuese
+     * Function to show flight path option
+     * (3D option)
+     * based on the map version (currently 1.6 and above).
+     * @arg mapVersion
+     */
+    setFlightPathInfo: function (mapVersion) {
+      const mapVersionForFlightPath = 1.6
+      if (mapVersion === mapVersionForFlightPath || mapVersion > mapVersionForFlightPath) {
+        // Show flight path option UI
+        this.displayFlightPathOption = true
+        // Show 2D as default on FC type
+        this.setFlightPath3D(false)
+      }
+    },
+    /**
+     * @vuese
+     * Function to create Flatmap
+     * by providing the ``state``.
+     * @arg state
+     */
     createFlatmap: function (state) {
       if (!this.mapImp && !this.loading) {
         this.loading = true
@@ -1113,18 +2079,16 @@ export default {
             //fullscreenControl: false,
             //annotatable: false,
             //debug: true,
-            featureInfo: this.featureInfo,
-            'min-zoom': this.minZoom,
-            layerControl: true,
-            pathControls: true,
-            searchable: this.searchable,
+            minZoom: this.minZoom,
             tooltips: this.tooltips,
             minimap: minimap,
           }
         )
         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)
           this.onFlatmapReady()
           if (this._stateToBeSet) this.restoreMapState(this._stateToBeSet)
           else {
@@ -1140,6 +2104,10 @@ export default {
           this.restoreMapState(this._stateToBeSet)
       }
     },
+    /**
+     * @vuese
+     * Function to compute path controls maximum height.
+     */
     computePathControlsMaximumHeight() {
       const elem = this.$refs.display
       if (elem) {
@@ -1150,6 +2118,10 @@ export default {
         this.pathwaysMaxHeight = height - 170
       }
     },
+    /**
+     * @vuese
+     * Function to resize the map.
+     */
     mapResize: function () {
       try {
         this.computePathControlsMaximumHeight()
@@ -1164,6 +2136,10 @@ export default {
         console.error('Map resize error')
       }
     },
+    /**
+     * @vuese
+     * This function is used for functions that need to run immediately after the flatmap is loaded.
+     */
     onFlatmapReady: function () {
       // onFlatmapReady is used for functions that need to run immediately after the flatmap is loaded
       this.sensor = new ResizeSensor(this.$refs.display, this.mapResize)
@@ -1183,17 +2159,36 @@ export default {
       this.computePathControlsMaximumHeight()
       this.drawerOpen = true
       this.mapResize()
+      /**
+       * This is ``onFlatmapReady`` event.
+       * @arg ``this`` (Component Vue Instance)
+       */
       this.$emit('ready', this)
     },
+    /**
+     * @vuese
+     * Function to show or hide the minimap
+     * by providing ``flag`` (boolean) value.
+     * @arg flag
+     */
     showMinimap: function (flag) {
       if (this.mapImp) this.mapImp.showMinimap(flag)
     },
+    /**
+     * @vuese
+     * Function to show or hide the pathways drawer
+     * by providing ``flag`` (boolean) value.
+     * @arg flag
+     */
     showPathwaysDrawer: function (flag) {
       this.drawerOpen = flag
     },
     /**
+     * @vuese
      * Function to display features with annotation matching the provided term,
      * with the option to display the label using displayLabel flag.
+     * @arg term,
+     * @arg displayLabel
      */
     searchAndShowResult: function (term, displayLabel) {
       if (this.mapImp) {
@@ -1233,7 +2228,10 @@ export default {
       return false
     },
     /**
-     * Get the list of suggested terms
+     * @vuese
+     * Function to show search suggestions
+     * from the ``term`` provided.
+     * @arg term
      */
     searchSuggestions: function (term) {
       if (this.mapImp) return this.mapImp.search(term)
@@ -1241,48 +2239,66 @@ export default {
     },
   },
   props: {
-    entry: String,
+    /**
+     * The taxon identifier of the species represented by the map.
+     */
+    entry: {
+      type: String,
+      required: true,
+    },
+    /**
+     * The unique ``uuid`` of the flatmap.
+     * If given then this exact map will be loaded,
+     * overriding ``taxon`` and ``biologicalSex``.
+     */
     uuid: String,
+    /**
+     * The biological sex of the species represented by the map.
+     * This is specified as metadata in the map's source file.
+     */
     biologicalSex: {
       type: String,
       default: '',
     },
-    featureInfo: {
-      type: Boolean,
-      default: false,
-    },
+    /**
+     * The minimum zoom level of the map.
+     */
     minZoom: {
       type: Number,
       default: 4,
     },
-    pathControls: {
-      type: Boolean,
-      default: false,
-    },
-    searchable: {
-      type: Boolean,
-      default: false,
-    },
-    layerControl: {
-      type: Boolean,
-      default: false,
-    },
+    /**
+     * The option to add another feature label _(`FeatureSmallSymbolLayer`)_
+     * when this `tooltips` is set to `false`.
+     */
     tooltips: {
       type: Boolean,
       default: true,
     },
+    /**
+     * The option to show tooltips for help mode.
+     */
     helpMode: {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to create map on component mounted.
+     */
     renderAtMounted: {
       type: Boolean,
       default: true,
     },
+    /**
+     * The option to display minimap at the top-right corner of the map.
+     */
     displayMinimap: {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to show warning. Example for legacy or beta maps.
+     */
     displayWarning: {
       type: Boolean,
       default: false,
@@ -1295,8 +2311,28 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The data to show different map options.
+     * Available at the bottom-left corner ("Open new map" tooltip).
+     */
     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 [
           {
@@ -1314,14 +2350,24 @@ export default {
         ]
       },
     },
+    /**
+     * The option to show star in legend area.
+     */
     showStarInLegend: {
       type: Boolean,
       default: false,
     },
+    /**
+     * Flag to determine whether this is legacy map or not.
+     * ``displayWarning`` should be shown for legacy map.
+     */
     isLegacy: {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to show the latest changes.
+     */
     displayLatestChanges: {
       type: Boolean,
       default: false,
@@ -1340,6 +2386,9 @@ export default {
       type: String,
       default: 'https://mapcore-demo.org/current/flatmap/v3/',
     },
+    /**
+     * Specify the endpoint of the SPARC API.
+     */
     sparcAPI: {
       type: String,
       default: 'https://api.sparc.science/',
@@ -1356,6 +2405,8 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
+      $annotator: this.annotator,
+      userApiKey: this.userToken
     }
   },
   data: function () {
@@ -1365,7 +2416,7 @@ export default {
       //for the first time, otherwise it may display an arrow at a
       //undesired location.
       tooltipDisplay: false,
-      serverUUID: undefined,
+      serverURL: undefined,
       layers: [],
       pathways: [],
       sckanDisplay: [
@@ -1395,6 +2446,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,
@@ -1406,38 +2463,141 @@ export default {
       tooltipEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
       drawerOpen: false,
-      annotationRadio: false,
+      flightPath3DRadio: false,
+      displayFlightPathOption: false,
       colourRadio: true,
       outlinesRadio: true,
       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,
+      relevanceDisplay: false,
+      relevanceEntry: {},
+      drawnAnnotationFeatures: undefined, // Store all exist drawn features
+      doubleClickedFeature: false,
+      activeDrawMode: undefined,
+      drawModes: ['Delete', 'Edit'],
+      dialogPosition: {
+        offsetX: 0,
+        offsetY: 0,
+        x: undefined,
+        y: undefined
+      }
+    }
+  },
+  computed: {
+    ...mapState(useMainStore, ['userToken']),
+    relevance: function () {
+      return Object.keys(this.relevanceEntry).length > 0
     }
   },
   watch: {
     entry: function () {
       if (!this.state) this.createFlatmap()
     },
-    helpMode: function (val) {
-      this.setHelpMode(val)
+    helpMode: function (newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.setHelpMode(val)
+      }
     },
     state: {
-      handler: function (state) {
-        if (this.mapManager) {
-          this.setState(state)
-        } else {
-          //this component has not been mounted yet
-          this.setStateRequired = true
+      handler: function (state, oldVal) {
+        if (state !== oldVal) {
+          if (this.mapManager) {
+            this.setState(state)
+          } else {
+            //this component has not been mounted yet
+            this.setStateRequired = true
+          }
         }
       },
       immediate: true,
       deep: true,
     },
+    activeDrawTool: function () {
+      this.drawIconCssHacks()
+    },
+    activeDrawMode: function () {
+      this.drawIconCssHacks()
+    },
+    /**
+     * hide dialog when relevanceEntry is empty
+     */
+    relevance: function (value) {
+      const relevanceIcon = this.$el.querySelector('.drawRelevance')
+      if (!value) {
+        this.relevanceDisplay = false
+        relevanceIcon.classList.add('inactive')
+      } else {
+        relevanceIcon.classList.remove('inactive')
+      }
+    },
+    /**
+     * popup dialog via click icon
+     */
+    relevanceDisplay: function (display) {
+      const relevanceIcon = this.$el.querySelector('.drawRelevance')
+      if (display) {
+        relevanceIcon.classList.add('iconSelected')
+        this.dialogCssHacks()
+      } else {
+        relevanceIcon.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()
@@ -1520,6 +2680,7 @@ export default {
   position: absolute;
   bottom: 0px;
   transition: all 1s ease;
+  z-index: 8;
   &.open {
     left: 0px;
   }
@@ -1550,6 +2711,8 @@ export default {
   transition: all 1s ease;
   &.open {
     opacity: 1;
+    position: relative;
+    z-index: 2;
   }
   &.close {
     opacity: 0;
@@ -1592,7 +2755,8 @@ export default {
 }
 
 :deep(.maplibregl-popup) {
-  max-width: 300px !important;
+  z-index: 10;
+  max-width: 330px !important;
 }
 
 :deep(.flatmap-tooltip-popup) {
@@ -1706,12 +2870,19 @@ export default {
   }
 }
 
-.zoomOut {
-  padding-left: 8px;
+.drawPoint, .drawLineString, .drawPolygon, 
+.drawDelete, .drawEdit, .drawRelevance,
+.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 {
@@ -1723,6 +2894,7 @@ export default {
   bottom: 16px;
   position: absolute;
   transition: all 1s ease;
+  z-index: 10;
   &.open {
     left: 322px;
   }
@@ -1736,7 +2908,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 {
@@ -1745,6 +2917,10 @@ export default {
   }
 }
 
+:deep(.background-popper.el-popover.el-popper.h-auto) {
+  height: auto !important;
+}
+
 :deep(.open-map-popper.el-popover.el-popper) {
   padding-top: 5px;
   padding-bottom: 5px;
@@ -1915,25 +3091,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) {
@@ -2119,12 +3297,21 @@ export default {
     }
   }
 }
+
+.relevance-dialog {
+  position: absolute;
+  z-index: 10;
+  cursor: move;
+}
 </style>
 
 <style lang="scss">
 
 .flatmap-container {
   --el-color-primary: #8300BF;
+  --el-color-primary-light-5: #CD99E5;
+  --el-color-primary-light-9: #F3E6F9;
+  --el-color-primary-dark-2: var(--el-color-primary);
 }
 
 </style>