@abi-software/flatmapvuer 0.6.1-annotator.0 → 0.6.1-annotator.2

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)"
@@ -137,10 +142,10 @@
       </el-icon>
 
       <div class="bottom-draw-control"
-        v-if="viewingMode === 'Annotation' && userInformation" 
-        v-show="!disableUI">
+        v-show="viewingMode === 'Annotation' && userInformation && !disableUI"
+      >
         <el-popover
-          content="Relevance"
+          content="Draw Connection"
           placement="top"
           :teleported="false"
           trigger="manual"
@@ -151,11 +156,10 @@
           <template #reference>
             <map-svg-icon
               icon="connection"
-              class="icon-button connection"
-              @click="displayRelevanceDialog(true)"
+              class="icon-button drawConnection inactive"
+              @click="connectionDialogPopup"
               @mouseover="showToolitip(10)"
               @mouseout="hideToolitip(10)"
-              v-show="hasRelevance && !inDrawing"
             />
           </template>
         </el-popover>
@@ -167,13 +171,13 @@
           width="80"
           popper-class="flatmap-popper"
           :visible="hoverVisibilities[11].value"
-          v-if="drawingType !== 'LineString' && drawingType !== 'Polygon'"
+          v-if="drawnType !== 'LineString' && drawnType !== 'Polygon'"
         >
           <template #reference>
             <map-svg-icon
               icon="drawPoint"
               class="icon-button drawPoint"
-              @click="drawnEvent('Point')"
+              @click="drawingEvent('Point')"
               @mouseover="showToolitip(11)"
               @mouseout="hideToolitip(11)"
             />
@@ -187,13 +191,13 @@
           width="80"
           popper-class="flatmap-popper"
           :visible="hoverVisibilities[12].value"
-          v-if="drawingType !== 'Point' && drawingType !== 'Polygon'"
+          v-if="drawnType !== 'Point' && drawnType !== 'Polygon'"
         >
           <template #reference>
             <map-svg-icon
               icon="drawLine"
               class="icon-button drawLineString"
-              @click="drawnEvent('LineString')"
+              @click="drawingEvent('LineString')"
               @mouseover="showToolitip(12)"
               @mouseout="hideToolitip(12)"
             />
@@ -207,13 +211,13 @@
           width="80"
           popper-class="flatmap-popper"
           :visible="hoverVisibilities[13].value"
-          v-if="drawingType !== 'Point' && drawingType !== 'LineString'"
+          v-if="drawnType !== 'Point' && drawnType !== 'LineString'"
         >
           <template #reference>
             <map-svg-icon
               icon="drawPolygon"
               class="icon-button drawPolygon"
-              @click="drawnEvent('Polygon')"
+              @click="drawingEvent('Polygon')"
               @mouseover="showToolitip(13)"
               @mouseout="hideToolitip(13)"
             />
@@ -231,8 +235,8 @@
           <template #reference>
             <map-svg-icon
               icon="drawTrash"
-              class="icon-button drawTrash"
-              @click="drawnEvent('Delete')"
+              class="icon-button drawDelete"
+              @click="drawingEvent('Delete')"
               @mouseover="showToolitip(14)"
               @mouseout="hideToolitip(14)"
             />
@@ -250,8 +254,8 @@
           <template #reference>
             <map-svg-icon
               icon="comment"
-              class="icon-button comment"
-              @click="drawnEvent('Edit')"
+              class="icon-button drawEdit"
+              @click="drawingEvent('Edit')"
               @mouseover="showToolitip(15)"
               @mouseout="hideToolitip(15)"
             />
@@ -342,7 +346,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" />
@@ -473,7 +476,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>
@@ -485,7 +495,7 @@
         width="200"
         :teleported="false"
         trigger="click"
-        popper-class="background-popper"
+        popper-class="background-popper h-auto"
         virtual-triggering
       >
         <div>
@@ -499,8 +509,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"
               >
@@ -511,18 +521,18 @@
             </el-select>
           </el-row>
           <template v-if="viewingMode === 'Annotation' && userInformation">
-            <el-row class="backgroundText">Drawing Type*</el-row>
+            <el-row class="backgroundText">Drawn By*</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
-                v-model="drawingType"
+                v-model="drawnType"
                 placeholder="Select"
                 class="select-box"
                 popper-class="flatmap_dropdown"
-                @change="setDrawingType"
+                @change="setDrawnType"
               >
                 <el-option
-                  v-for="item in drawingTypes"
+                  v-for="item in drawnTypes"
                   :key="item"
                   :label="item"
                   :value="item"
@@ -533,18 +543,18 @@
                 </el-option>
               </el-select>
             </el-row>
-            <el-row class="backgroundText">Participation Type*</el-row>
+            <el-row class="backgroundText">Annotated By*</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
-                v-model="participationType"
+                v-model="annotatedType"
                 placeholder="Select"
                 class="select-box"
                 popper-class="flatmap_dropdown"
-                @change="setParticipationType"
+                @change="setAnnotatedType"
               >
                 <el-option
-                  v-for="item in participationTypes"
+                  v-for="item in annotatedTypes"
                   :key="item"
                   :label="item"
                   :value="item"
@@ -556,13 +566,13 @@
               </el-select>
             </el-row>
           </template>
-          <el-row class="backgroundSpacer"></el-row>
-          <el-row class="backgroundText">Dimension display</el-row>
-          <el-row class="backgroundControl">
+          <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="dimensionRadio"
+              v-model="flightPath3DRadio"
               class="flatmap-radio"
-              @change="setDimension"
+              @change="setFlightPath3D"
             >
             <el-radio :label="false">2D</el-radio>
             <el-radio :label="true">3D</el-radio>
@@ -663,53 +673,18 @@
         :annotationDisplay="viewingMode === 'Annotation'"
         @annotation="commitAnnotationEvent"
       />
-      <el-dialog
-        v-model="relevanceDisplay"
-        width="200"
-        :modal="false"
-        :show-close="false"
-        :lock-scroll="false"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        draggable
-      >
-        <template #header v-if="inDrawing">
-          <span class="dialog-title">Finalise drawing</span>
-        </template>
-        <template #header v-else>
-          <el-button type="primary" plain @click="displayRelevanceDialog(false)">
-            Close
-          </el-button>
-        </template>
-        <el-row v-if="inDrawing">
-          <el-col :span="13">
-            <el-button type="primary" plain @click="confirmDrawnFeature">
-              Confirm
-            </el-button>
-          </el-col>
-          <el-col :span="11">
-            <el-button type="primary" plain @click="cancelDrawnFeature">
-              Cancel
-            </el-button>
-          </el-col>
-        </el-row>
-        <el-row v-if="hasRelevance">
-          <el-col :span="20">
-            <b><span>Related Features</span></b>
-          </el-col>
-          <el-col :span="4">
-            <el-icon><el-icon-circle-close @click="closePopup()"/></el-icon>
-          </el-col>
-          <el-card
-            shadow="hover"
-            v-for="(value, key) in relevanceEntry" 
-            :key="key"
-            @click="displayRelevanceTooltip(value)"
-          >
-            <span>{{ key }}</span>
-          </el-card>
-        </el-row>
-      </el-dialog>
+      <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>
@@ -721,7 +696,6 @@ import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
   ArrowLeft as ElIconArrowLeft,
-  CircleClose as ElIconCircleClose,
 } from '@element-plus/icons-vue'
 import Tooltip from './Tooltip.vue'
 import SelectionsGroup from './SelectionsGroup.vue'
@@ -746,14 +720,64 @@ import {
 } from '../services/flatmapQueries.js'
 import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
-import * as flatmap from 'customised-viewer'
+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 featureGeometry = { lng: 0, lat: 0, }
   let coordinates
   if (geometry.type === "Polygon") {
     coordinates = geometry.coordinates[0]
@@ -834,6 +858,9 @@ const createUnfilledTooltipData = function () {
   }
 }
 
+/**
+ * A vue component of the flatmap viewer.
+ */
 export default {
   name: 'FlatmapVuer',
   components: {
@@ -868,125 +895,96 @@ export default {
     return { annotator }
   },
   methods: {
-    displayRelevanceTooltip: function (value) {
-      if (this.mapImp) {
-        this.checkAndCreatePopups(value)
-      }
-    },
     // This should be called when create is confirmed or cancelled
-    initialiseDraw: function () {
+    initialiseDrawing: function () {
       this.inDrawing = false
-      this.relevanceDisplay = false
-      this.relevanceEntry = {}
+      this.initialiseDialog()
       this.activeDrawTool = undefined
       this.createdEvent = undefined
-      this.setActiveDrawIcon()
     },
     cancelDrawnFeature: function () {
       if (this.createdEvent) {
-        // For 'created' callback
         this.closePopup()
         this.annotationEntry = {
           ...this.createdEvent.feature,
-          resourceId: this.serverUUID,
+          resourceId: this.serverURL,
         }
         this.rollbackAnnotationEvent()
-        this.initialiseDraw()
+        this.initialiseDrawing()
+      }
+    },
+    displayConnectedFeatureTooltip: 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 draw annotation
-        // And will not be updated if move drawn annotation
-        if (Object.keys(this.relevanceEntry).length > 0) {
-          this.annotationEntry.feature.relevance = this.relevanceEntry
+        // 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.initialiseDraw()
+        this.initialiseDrawing()
       }
     },
-    displayRelevanceDialog: function (display) {
-      // Change back to the initial window size
-      // For a better view of the relevance popup
-      if (display) this.resetView()
-      this.closePopup()
-      // Used when check exist drawn annotation relevance
-      if (
-        !this.createdEvent && !this.currentDrawnFeature &&
-        Object.keys(this.relevanceEntry).length === 0
-      ) {
-        // Reset drawn event
-        this.drawnEvent()
-      } else if (this.createdEvent || Object.keys(this.relevanceEntry).length > 0) {
-        this.relevanceDisplay = display
-        if (!display && this.activeDrawMode === 'Delete') this.relevanceEntry = {}
-      }
-    },
-    setActiveDrawIcon: function () {
-      let mclass
-      if (document.querySelector('.toolSelected')) {
-        this.drawingTypes.map((t) => {
-          if (t !== 'All' && t !== 'None') {
-            document.querySelector(`.draw${t}`).classList.remove('toolSelected');
-          }
-        })
-        this.drawModes.map((m) => {
-          if (m === 'Delete') mclass = '.drawTrash'
-          else if (m === 'Edit') mclass = '.comment'
-          document.querySelector(mclass).classList.remove('toolSelected');
-        })
-      }
-      if (this.activeDrawTool) {
-        document.querySelector(`.draw${this.activeDrawTool}`).classList.add('toolSelected');
-      } else if (this.activeDrawMode) {
-        if (this.activeDrawMode === 'Delete') mclass = '.drawTrash'
-        else if (this.activeDrawMode === 'Edit') mclass = '.comment'
-        document.querySelector(mclass).classList.add('toolSelected');
+    initialiseDialog: function () {
+      this.connectionDisplay = false
+      this.connectionEntry = {}
+    },
+    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
       }
     },
-    drawnEvent: function (type = undefined) {
+    drawingEvent: function (type) {
       this.closePopup()
-      if (!type) {
-        this.activeDrawTool = undefined
-        this.activeDrawMode = undefined
-        this.inDrawing = false
-      } else if (this.drawingTypes.includes(type)) {
-        if (this.activeDrawMode) {
-          document.querySelector('.mapbox-gl-draw_trash').click()
-          this.activeDrawMode = undefined
-        }
+      // disable mode icon click if any tool is active
+      if (this.drawnTypes.includes(type) && !this.activeDrawMode && !this.connectionDisplay) {
         if (type === 'Point') {
-          document.querySelector('.mapbox-gl-draw_point').click()
-          this.activeDrawTool = this.activeDrawTool === 'Point' ? undefined : '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') {
-          document.querySelector('.mapbox-gl-draw_line').click()
-          this.activeDrawTool = this.activeDrawTool === 'LineString' ? undefined : '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') {
-          document.querySelector('.mapbox-gl-draw_polygon').click()
-          this.activeDrawTool = this.activeDrawTool === 'Polygon' ? undefined : 'Polygon'
-        }
-      } else if (this.drawModes.includes(type)) {
-        if (this.activeDrawTool) {
-          document.querySelector('.mapbox-gl-draw_trash').click()
-          this.activeDrawTool = undefined
+          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 && !this.activeDrawMode) {
+          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.trashAnnotationFeature()
+            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'
         }
       }
-      this.setActiveDrawIcon()
     },
     changeAnnotationDrawMode: function (mode) {
       if (this.mapImp) {
@@ -1003,17 +1001,21 @@ export default {
         this.mapImp.clearAnnotationFeature()
       }
     },
-    trashAnnotationFeature: function () {
+    deleteOrEditAnnotationFeature: function () {
       if (this.mapImp) {
-        this.mapImp.trashAnnotationFeature()
+        // Fire the 'trash' button
+        // Not only use to remove features
+        // 'simple_select' for DELETE and 'direct_select' for EDIT
+        this.mapImp.removeAnnotationFeature()
       }
     },
     rollbackAnnotationEvent: function () {
-      if (this.mapImp) {
-        // For 'updated' and 'deleted' callback
-        if (this.drawnAnnotationEvent.includes(this.annotationEntry.type)) {
-          this.mapImp.rollbackAnnotationEvent(this.annotationEntry)
-        }
+      // For 'updated' and 'deleted' callback
+      if (
+        this.mapImp &&
+        this.drawnAnnotationEvent.includes(this.annotationEntry.type)
+      ) {
+        this.mapImp.rollbackAnnotationEvent(this.annotationEntry)
       }
     },
     commitAnnotationEvent: function (annotation) {
@@ -1024,14 +1026,23 @@ export default {
         annotation
       ) {
         this.annotationSubmitted = true
-        if (this.annotationEntry.type === 'deleted') this.closePopup()
         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.serverUUID)
+        this.annotator.annotatedItemIds(this.userToken, this.serverURL)
           .then((annotatedItemIds) => {
+              if ('resource' in annotatedItemIds) {
+                // The annotator has `resource` and `items` fields
+                annotatedItemIds = annotatedItemIds.items
+              }
             for (const id of annotatedItemIds) {
               this.mapImp.setFeatureAnnotated(id)
             }
@@ -1043,39 +1054,48 @@ export default {
     },
     addAnnotationFeature: function () {
       if (this.mapImp) {
-        this.clearAnnotationFeature()
-        if (this.drawingType !== 'None') {
-          this.annotator.drawnFeatures(this.serverUUID)
+        if (!this.annotationSubmitted) this.clearAnnotationFeature()
+        if (this.drawnType !== 'None') {
+          if (!this.annotationSubmitted) this.loading = true
+          this.annotator.drawnFeatures(this.userToken, this.serverURL)
             .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.drawingType !== 'All') {
+              if (this.drawnType !== 'All tools') {
                 drawnFeatures = drawnFeatures.filter((feature) => {
-                  return feature.geometry.type === this.drawingType
+                  return feature.geometry.type === this.drawnType
                 })
               }
               this.drawnAnnotationFeatures = drawnFeatures
-              for (const feature of drawnFeatures) {
-                if (this.participationType !== 'All') {
-                  this.annotator
-                    .itemAnnotations(this.serverUUID, 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.participationType === 'Participated' && participated) ||
-                        (this.participationType === 'Not participated' && !participated)
-                      ) {
-                        this.mapImp.addAnnotationFeature(feature)
-                      }
-                    })
-                    .catch((reason) => {
-                      console.log(reason) // Error!
-                    })
-                } else this.mapImp.addAnnotationFeature(feature)
+              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) => {
@@ -1089,27 +1109,36 @@ export default {
         // Control the show/hide of the drawn annotations
         this.mapImp.showAnnotator(flag)
         // Hide default toolbar, we will use customised SVG icons instead
-        document.querySelector('.maplibregl-ctrl-group').style.display = 'none'
+        this.$el.querySelector('.maplibregl-ctrl-group').style.display = 'none'
       }
     },
-    setDrawingType: function (flag) {
-      this.drawingType = flag
+    setDrawnType: function (flag) {
+      this.drawnType = flag
       if (this.mapImp) {
         this.addAnnotationFeature()
       }
     },
-    setParticipationType: function (flag) {
-      this.participationType = flag
+    setAnnotatedType: function (flag) {
+      this.annotatedType = flag
       if (this.mapImp) {
         this.addAnnotationFeature()
       }
     },
-    setDimension: function (flag) {
-      this.dimensionRadio = flag
+    /**
+     * @vuese
+     * Function to switch from 2D to 3D
+     * @arg flag
+     */
+    setFlightPath3D: function (flag) {
+      this.flightPath3DRadio = flag
       if (this.mapImp) {
-        this.mapImp.enable3dPaths(flag)
+        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
@@ -1121,14 +1150,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) {
@@ -1148,6 +1191,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) => {
@@ -1157,11 +1207,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
@@ -1170,7 +1227,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
@@ -1179,6 +1239,7 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to toggle paths to default.
      * Also called when the associated button is pressed.
      */
@@ -1203,6 +1264,7 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to zoom in.
      * Also called when the associated button is pressed.
      */
@@ -1212,6 +1274,7 @@ export default {
       }
     },
     /**
+     * @vuese
      * Function to zoom out.
      * Also called when the associated button is pressed.
      */
@@ -1220,16 +1283,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) =>
@@ -1237,6 +1318,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)]
@@ -1253,11 +1340,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) =>
@@ -1265,14 +1364,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) =>
@@ -1280,11 +1396,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) =>
@@ -1292,11 +1420,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) =>
@@ -1304,9 +1444,21 @@ 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 === 'annotation') {
@@ -1318,17 +1470,21 @@ export default {
           // Popup closed will trigger aborted event
           if (data.type === 'aborted') {
             // Rollback drawing when no new annotation submitted
-            if (!this.annotationSubmitted) {
-              this.rollbackAnnotationEvent()
-            }
+            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.relevanceEntry = {}
+              this.initialiseDialog()
               this.inDrawing = true
             } else if (data.feature.mode === 'simple_select' && this.inDrawing) {
-              this.displayRelevanceDialog(true)
+              if (this.createdEvent) {
+                this.connectionDisplay = true
+              } else {
+                // Reset if a invalid draw
+                this.initialiseDrawing()
+              }
             } else if (data.feature.mode === 'direct_select') {
               this.doubleClickedFeature = true
             }
@@ -1338,8 +1494,18 @@ export default {
                 undefined :
                 data.feature.features[0]
             payload.feature.feature = this.currentDrawnFeature
-            // For exist drawn annotation features
-            this.checkAndCreateDrawnFeaturePopups(payload)
+            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) {
@@ -1364,6 +1530,15 @@ export default {
             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,
@@ -1373,16 +1548,25 @@ export default {
               feature: data,
               userData: args,
               eventType: eventType,
-              provenanceTaxonomy: data.taxons
-                ? JSON.parse(data.taxons)
-                : undefined,
+              provenanceTaxonomy: taxons,
             }
             if (eventType === 'click') {
               if (this.viewingMode === 'Network Discovery') {
                 this.highlightConnectedPaths([data.models])
               } else {
                 this.currentActive = data.models ? data.models : ''
-                this.allocateRelevance(payload)
+                // 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 (nodeLabel && this.activeDrawTool === 'LineString') {
+                    this.connectionEntry[data.featureId] = Object.assign({label: nodeLabel},
+                      Object.fromEntries(
+                        Object.entries(data)
+                              .filter(([key]) => ['featureId', 'models'].includes(key))))
+                  }
+                }
               }
             } else if (
               eventType === 'mouseenter' &&
@@ -1407,67 +1591,112 @@ export default {
         }
       }
     },
-    allocateRelevance: function (data = undefined) {
-      if (data && data.feature) {
-        // Only clicked relevance data will be added 
-        let relevance = data.feature.models ?
-          data.feature.models :
-          data.feature.featureId
-        if (
-          relevance &&
-          this.inDrawing &&
-          // Currently only draw line will show relevance
-          this.activeDrawTool === 'LineString' &&
-          !(relevance in this.relevanceEntry)
-        ) {
-          this.relevanceEntry[relevance] = data
+    // for dialog popup
+    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
         }
-      } else if (this.currentDrawnFeature && this.drawnAnnotationFeatures) {
-        let relevance = this.drawnAnnotationFeatures
-          .filter((feature) => {
-            return feature.id === this.currentDrawnFeature.id
-          })[0].relevance
-        if (relevance) this.relevanceEntry = relevance
-      }
-    },
-    checkAndCreateDrawnFeaturePopups: function (data) {
-      if (!this.inDrawing) {
-        this.relevanceEntry = {}
-        if (this.currentDrawnFeature) {
-          this.allocateRelevance()
-          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.trashAnnotationFeature()
-              }
-              this.doubleClickedFeature = false
-            } else { // single click
-              if (this.activeDrawMode === 'Delete') {
-                this.changeAnnotationDrawMode({
-                  mode: 'simple_select',
-                  options: { featureIds: [data.feature.feature.id] }
-                })
-                this.trashAnnotationFeature()
-              }
-            }
+        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.connectionDisplay) {
+        this.drawnTypes.map((t) => {
+          const dtype = this.$el.querySelector(`.draw${t}`)
+          if (dtype) {
+            dtype.classList.remove('iconSelected');
+            dtype.classList.remove('inactive');
+          }
+        })
+        this.drawModes.map((m) => {
+          this.$el.querySelector(`.draw${m}`).classList.remove('iconSelected');
+          this.$el.querySelector(`.draw${m}`).classList.remove('inactive');
+        })
+      }
+      if (this.activeDrawTool) {
+        this.$el.querySelector(`.draw${this.activeDrawTool}`).classList.add('iconSelected');
+        this.drawModes.map((m) => {
+          this.$el.querySelector(`.draw${m}`).classList.add('inactive');
+        })
+      } else if (this.activeDrawMode || this.connectionDisplay) {
+        if (this.activeDrawMode) {
+          this.$el.querySelector(`.draw${this.activeDrawMode}`).classList.add('iconSelected');
+        }
+        this.drawnTypes.map((t) => {
+          const dtype = this.$el.querySelector(`.draw${t}`)
+          if (dtype) dtype.classList.add('inactive');
+        })
+      }
+    },
+    // 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.doubleClickedFeature = false
+        } else {
+          // 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.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 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) {
           this.annotationEntry = {
             ...data.feature,
-            resourceId: this.serverUUID,
+            resourceId: this.serverURL,
           }
           if (data.feature.featureId && data.feature.models) {
             this.displayTooltip(data.feature.models)
@@ -1475,14 +1704,21 @@ export default {
             if (this.inDrawing || this.activeDrawMode) {
               this.annotationSubmitted = false
               this.annotationEntry.featureId = data.feature.feature.id
-              let featureGeometry = centroid(data.feature.feature.geometry)
-              this.displayTooltip(data.feature.feature.id, featureGeometry)
+              this.createConnectivityBody()
+              this.displayTooltip(
+                data.feature.feature.id,
+                centroid(data.feature.feature.geometry)
+              )
             } else {
-              // Not allowed to update feature if edit mode not on
+              // 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()
+            }
           }
         } else {
           this.annotation = {}
@@ -1503,6 +1739,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')
@@ -1518,18 +1757,34 @@ export default {
       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) {
@@ -1540,11 +1795,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'
@@ -1559,6 +1825,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'
@@ -1573,6 +1842,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
@@ -1588,6 +1863,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])
@@ -1596,6 +1877,12 @@ export default {
         }, 500)
       }
     },
+    /**
+     * @vuese
+     * Function to hide tooltip
+     * by providing ``tooltipNumber``.
+     * @arg tooltipNumber
+     */
     hideToolitip: function (tooltipNumber) {
       if (!this.inHelp) {
         clearTimeout(this.tooltipWait[tooltipNumber])
@@ -1604,6 +1891,12 @@ export default {
         }, 500)
       }
     },
+    /**
+     * @vuese
+     * Function to display tooltip
+     * by providing featureId (``feature``).
+     * @arg feature
+     */
     displayTooltip: function (feature, geometry = undefined) {
       this.tooltipDisplay = true
       let featureId = undefined
@@ -1618,10 +1911,16 @@ export default {
         }
       }
       if (!this.disableUI) {
-        this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options)
+        this.$nextTick(() => {
+          this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options)
+          this.popUpCssHacks()
+        })
       }
-      this.popUpCssHacks()
     },
+    /**
+     * @vuese
+     * Function to open Flatmap Help Popup.
+     */
     openFlatmapHelpPopup: function () {
       if (this.mapImp) {
         let heartId = this.mapImp.modelFeatureIds('UBERON:0000948')
@@ -1634,6 +1933,10 @@ export default {
         }
       }
     },
+    /**
+     * @vuese
+     * Function to close Flatmap Help Popup.
+     */
     closeFlatmapHelpPopup: function () {
       this.$el
         .querySelectorAll('.maplibregl-popup-close-button')
@@ -1641,6 +1944,10 @@ export default {
           item.click()
         })
     },
+    /**
+     * @vuese
+     * Function to get annotation labels.
+     */
     getLabels: function () {
       let labels = []
       if (this.mapImp) {
@@ -1651,6 +1958,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 = {
@@ -1666,6 +1977,11 @@ export default {
       }
       return undefined
     },
+    /**
+     * @vuese
+     * Function to set state (object) for the map.
+     * @arg state
+     */
     setState: function (state) {
       if (state) {
         if (
@@ -1683,12 +1999,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
@@ -1746,18 +2090,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 {
@@ -1773,6 +2115,10 @@ export default {
           this.restoreMapState(this._stateToBeSet)
       }
     },
+    /**
+     * @vuese
+     * Function to compute path controls maximum height.
+     */
     computePathControlsMaximumHeight() {
       const elem = this.$refs.display
       if (elem) {
@@ -1783,6 +2129,10 @@ export default {
         this.pathwaysMaxHeight = height - 170
       }
     },
+    /**
+     * @vuese
+     * Function to resize the map.
+     */
     mapResize: function () {
       try {
         this.computePathControlsMaximumHeight()
@@ -1797,6 +2147,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)
@@ -1816,17 +2170,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) {
@@ -1866,7 +2239,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)
@@ -1874,48 +2250,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,
@@ -1928,8 +2322,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 [
           {
@@ -1947,14 +2361,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,
@@ -1973,6 +2397,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/',
@@ -1989,7 +2416,8 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
-      $annotator: this.annotator
+      $annotator: this.annotator,
+      userApiKey: this.userToken
     }
   },
   data: function () {
@@ -1998,8 +2426,8 @@ export default {
       //tooltip display has to be set to false until it is rendered
       //for the first time, otherwise it may display an arrow at a
       //undesired location.
-      tooltipDisplay: true,
-      serverUUID: undefined,
+      tooltipDisplay: false,
+      serverURL: undefined,
       layers: [],
       pathways: [],
       sckanDisplay: [
@@ -2046,7 +2474,8 @@ export default {
       tooltipEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
       drawerOpen: false,
-      dimensionRadio: false,
+      flightPath3DRadio: false,
+      displayFlightPathOption: false,
       colourRadio: true,
       outlinesRadio: true,
       minimapResizeShow: false,
@@ -2056,10 +2485,10 @@ export default {
       currentHover: '',
       viewingMode: 'Exploration',
       viewingModes: ['Annotation', 'Exploration', 'Network Discovery'],
-      drawingType: 'All',
-      drawingTypes: ['All', 'Point', 'LineString', 'Polygon', 'None'],
-      participationType: 'All',
-      participationTypes: ['All', 'Participated', 'Not participated'],
+      drawnType: 'All tools',
+      drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
+      annotatedType: 'Anyone',
+      annotatedTypes: ['Anyone', 'Me', 'Others'],
       openMapRef: undefined,
       backgroundIconRef: undefined,
       annotator: undefined,
@@ -2069,49 +2498,114 @@ export default {
       createdEvent: undefined,
       annotationSubmitted: false,
       inDrawing: false,
-      relevanceDisplay: false,
-      relevanceEntry: {},
-      drawnAnnotationFeatures: undefined, // Store all exist drawn annotations
+      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
+      }
     }
   },
   computed: {
-    hasRelevance: function () {
-      return Object.keys(this.relevanceEntry).length > 0
+    ...mapState(useMainStore, ['userToken']),
+    connection: function () {
+      return Object.keys(this.connectionEntry).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 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.showAnnotator(true)
-        this.annotator.authenticate().then((userData) => {
+        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)
     },
@@ -2197,6 +2691,7 @@ export default {
   position: absolute;
   bottom: 0px;
   transition: all 1s ease;
+  z-index: 8;
   &.open {
     left: 0px;
   }
@@ -2227,6 +2722,8 @@ export default {
   transition: all 1s ease;
   &.open {
     opacity: 1;
+    position: relative;
+    z-index: 2;
   }
   &.close {
     opacity: 0;
@@ -2269,7 +2766,8 @@ export default {
 }
 
 :deep(.maplibregl-popup) {
-  max-width: 300px !important;
+  z-index: 10;
+  max-width: 330px !important;
 }
 
 :deep(.flatmap-tooltip-popup) {
@@ -2383,15 +2881,21 @@ export default {
   }
 }
 
-.drawPoint, .drawLineString, .drawPolygon, .drawTrash, 
-.connection, .comment, .zoomIn, .zoomOut, .fitWindow {
-  padding-left: 8px;
+.drawPoint, .drawLineString, .drawPolygon, 
+.drawDelete, .drawEdit, .drawConnection,
+.zoomIn, .zoomOut, .fitWindow {
+  padding: 4px;
 }
 
-.toolSelected {
+.iconSelected {
   color: var(--el-color-primary-light-5) !important;
 }
 
+.inactive {
+  color: #DDDDDD !important;
+  cursor: not-allowed !important;
+}
+
 .yellow-star-legend {
   width: 130px;
   cursor: pointer;
@@ -2401,6 +2905,7 @@ export default {
   bottom: 16px;
   position: absolute;
   transition: all 1s ease;
+  z-index: 10;
   &.open {
     left: 322px;
   }
@@ -2423,6 +2928,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;
@@ -2598,15 +3107,22 @@ export default {
 }
 
 .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: 40%;
+  right: calc(50vw - 100px);;
   bottom: 16px;
+  z-index: 10;
 }
 
 .bottom-right-control {
   position: absolute;
   right: 16px;
   bottom: 16px;
+  z-index: 10;
 }
 
 :deep(.my-drawer) {
@@ -2793,34 +3309,10 @@ export default {
   }
 }
 
-:deep(.el-dialog) {
-  text-align: justify;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  pointer-events: auto;
-  background: #fff;
-  border: 1px solid $app-primary-color;
-  display: flex;
-  flex-direction: column;
+.connection-dialog {
   position: absolute;
-  left: 100px;
-  bottom: 0px;
-}
-
-:deep(.el-dialog__body, .el-dialog__header) {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.dialog-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: rgb(131, 0, 191);
-}
-
-:deep(.el-card) {
-  --el-card-padding: 12px;
-  border: 0;
+  z-index: 10;
+  cursor: move;
 }
 </style>