@abi-software/flatmapvuer 0.6.1-auth.1 → 0.6.1-auth.2

package/src/components/FlatmapVuer.vue

@@ -136,128 +136,6 @@
         <el-icon-arrow-down />
       </el-icon>
 
-      <div class="bottom-draw-control"
-        v-if="viewingMode === 'Annotation' && userInformation" 
-        v-show="!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"
@@ -284,7 +162,7 @@
           :teleported="false"
           trigger="manual"
           width="70"
-          popper-class="flatmap-popper"
+          popper-class="flatmap-popper popper-zoomout"
           :visible="hoverVisibilities[1].value"
         >
           <template #reference>
@@ -516,52 +394,6 @@
               </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">
@@ -667,37 +499,23 @@
         :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="checkAndCreatePopups"
       />
     </div>
   </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import { shallowRef, markRaw } from 'vue'
+import { shallowRef } 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,
@@ -707,7 +525,6 @@ import {
   ElRadioGroup as RadioGroup,
   ElRow as Row,
   ElSelect as Select,
-  ElDialog as Dialog,
 } from 'element-plus'
 import flatmapMarker from '../icons/flatmap-marker'
 import {
@@ -717,80 +534,7 @@ 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'
 
-/**
- * @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 = []
@@ -865,7 +609,6 @@ export default {
     RadioGroup,
     Row,
     Select,
-    Dialog,
     MapSvgIcon,
     MapSvgSpriteColor,
     Tooltip,
@@ -884,221 +627,7 @@ 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.serverUUID,
-        }
-        this.rollbackAnnotationEvent()
-        this.initialiseDrawing()
-      }
-    },
-    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.trashAnnotationFeature()
-          }
-          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()
-      }
-    },
-    trashAnnotationFeature: function () {
-      if (this.mapImp) {
-        this.mapImp.trashAnnotationFeature()
-      }
-    },
-    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.userApiKey, this.serverUUID)
-          .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') {
-          this.annotator.drawnFeatures(this.userApiKey, this.serverUUID)
-            .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
-              // No need to call 'addAnnotationFeature' when a new feature created
-              if (!this.annotationSubmitted) {
-                for (const feature of drawnFeatures) {
-                  if (this.annotatedType !== 'Everyone') {
-                    this.annotator
-                      .itemAnnotations(this.userApiKey, 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.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
@@ -1436,229 +965,67 @@ export default {
      */
     eventCallback: function () {
       return (eventType, data, ...args) => {
-        if (eventType === 'annotation') {
+        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,
           }
-          // 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) {
-                this.processRelevance()
-                this.checkAndCreateDrawnFeaturePopups(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
+          if (eventType === 'click') {
+            if (this.viewingMode === 'Network Discovery') {
+              this.highlightConnectedPaths([data.models])
             } else {
-              this.checkAndCreatePopups(payload)
+              this.currentActive = data.models ? data.models : ''
             }
+          } else if (
+            eventType === 'mouseenter' &&
+            !(this.viewingMode === 'Network Discovery')
+          ) {
+            this.currentHover = data.models ? data.models : ''
           }
-        } 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 ) {
-                  this.processRelevance(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') &&
-              // 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')
-        if (this.$el && 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');
-        })
-      }
-    },
-    processRelevance: function (data = undefined) {
-      // process while drawing new features
-      if (data && data.feature) {
-        // Only clicked relevance data will be added 
-        let relevant = data.feature.models ? data.feature.models : data.feature.featureId
-        // only the linestring will have relevance at the current stage
-        if (relevant && this.activeDrawTool === 'LineString') {
-          this.relevanceEntry[relevant] = data
-        }
-      } else {
-        // process while checking exist features
-        if (this.currentDrawnFeature && this.drawnAnnotationFeatures) {
-          let feature = this.drawnAnnotationFeatures
-            .filter((feature) => {
-              return feature.id === this.currentDrawnFeature.id
-            })[0]
-          if (feature && feature.relevance) {
-            this.relevanceEntry = feature.relevance
-          }
-        }
-      }
-    },
-    // This is used only when either edit or delete mode is on
-    checkAndCreateDrawnFeaturePopups: 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.trashAnnotationFeature()
+          if (
+            data &&
+            data.type !== 'marker' &&
+            eventType === 'click' &&
+            !(this.viewingMode === 'Network Discovery')
+          ) {
+            this.checkAndCreatePopups(payload)
           }
-          this.doubleClickedFeature = false
+          /**
+           * The event emitted from the mouse event callbacks that come from flatmap-viewer. The payload
+           * argument provides an object with information on the feature where the mouse event takes place.
+           * @arg payload
+           */
+          this.$emit('resource-selected', payload)
         } else {
-          // single click fires delete
-          if (this.activeDrawMode === 'Delete') {
-            this.changeAnnotationDrawMode({
-              mode: 'simple_select',
-              options: { featureIds: [data.feature.feature.id] }
-            })
-            this.trashAnnotationFeature()
-          }
+          /**
+           * The event emitted in ``callback`` function from ``MapManager.loadMap()``
+           * if ``eventType`` is ``pan-zoom``.
+           * @arg data
+           */
+          this.$emit('pan-zoom-callback', data)
         }
       }
     },
-    // checkNeuronClicked shows a neuron path pop up if a path was recently clicked
     /**
      * @vuese
      * Function to create/display tooltips from the provided ``data``.
@@ -1668,32 +1035,12 @@ export default {
     checkAndCreatePopups: async function (data) {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
-        if (data.feature) {
+        if (data.feature && data.feature.featureId && data.feature.models) {
           this.annotationEntry = {
             ...data.feature,
             resourceId: this.serverUUID,
           }
-          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.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 = {}
         }
@@ -1724,13 +1071,9 @@ export default {
         'block'
       this.$refs.tooltip.$el.style.display = 'flex'
       document.querySelector('.maplibregl-popup-close-button').onclick = () => {
-        if (ftooltip) ftooltip.style.display = 'block'
+        document.querySelector('.flatmap-tooltip-popup').style.display = 'block'
       }
     },
-    closePopup: function () {
-      let cbutton = document.querySelector('.maplibregl-popup-close-button')
-      if (cbutton) cbutton.click()
-    },
     /**
      * @vuese
      * Function to close tooltip.
@@ -1871,26 +1214,28 @@ export default {
      * by providing featureId (``feature``).
      * @arg feature
      */
-    displayTooltip: function (feature, geometry = undefined) {
+    displayTooltip: function (feature) {
       this.tooltipDisplay = true
-      let featureId = undefined
-      let options = { className: 'flatmapvuer-popover' }
-      if (geometry) {
-        featureId = feature
-        options.annotationFeatureGeometry = geometry
-      } else {
-        featureId = this.mapImp.modelFeatureIds(feature)[0]
-        if (!this.inDrawing) {
-          options.positionAtLastClick = true
-        }
-      }
       if (!this.disableUI) {
         this.$nextTick(() => {
-          this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options)
-          this.popUpCssHacks()
-        })
+          this.displayPopup(feature)
+        });
       }
     },
+    /**
+     * @vuese
+     * Function to display popup
+     * by providing featureId (``feature``).
+     * @arg feature
+     */
+    displayPopup: function (feature) {
+      this.mapImp.showPopup(
+        this.mapImp.modelFeatureIds(feature)[0],
+        this.$refs.tooltip.$el,
+        { className: 'flatmapvuer-popover', positionAtLastClick: true }
+      )
+      this.popUpCssHacks()
+    },
     /**
      * @vuese
      * Function to open Flatmap Help Popup.
@@ -2394,8 +1739,7 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
-      userApiKey: this.userApiKey,
-      $annotator: this.annotator
+      userApiKey: this.userApiKey
     }
   },
   data: function () {
@@ -2404,7 +1748,7 @@ 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,
+      tooltipDisplay: false,
       serverUUID: undefined,
       layers: [],
       pathways: [],
@@ -2435,12 +1779,6 @@ export default {
         { value: false },
         { value: false },
         { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
       ],
       yellowstar: yellowstar,
       isFC: false,
@@ -2452,6 +1790,7 @@ export default {
       tooltipEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
       drawerOpen: false,
+      annotationRadio: false,
       flightPath3DRadio: false,
       displayFlightPathOption: false,
       colourRadio: true,
@@ -2459,40 +1798,11 @@ export default {
       minimapResizeShow: false,
       minimapSmall: false,
       currentActive: '',
-      currentDrawnFeature: undefined, // Clicked drawn annotation
       currentHover: '',
       viewingMode: 'Exploration',
       viewingModes: ['Annotation', 'Exploration', 'Network Discovery'],
-      drawnType: 'All tools',
-      drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
-      annotatedType: 'Everyone',
-      annotatedTypes: ['Everyone', '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: {
-    relevance: function () {
-      return Object.keys(this.relevanceEntry).length > 0
     }
   },
   watch: {
@@ -2518,80 +1828,11 @@ export default {
       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 () {
-        if (this.$el) {
-          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') {
-        console.log(this.userApiKey)
-        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.showAnnotator(true)
-        this.annotator.authenticate(this.userApiKey).then((userData) => {
-          if (userData.name && userData.email) {
-            this.userInformation = userData
-            this.setFeatureAnnotated()
-            if (!this.drawnAnnotationFeatures) {
-              this.addAnnotationFeature()
-            }
-          }
-        })
-      } else this.showAnnotator(false)
-    },
     disableUI: function (isUIDisabled) {
       if (isUIDisabled) {
         this.closeTooltip()
       }
-    },
+    }
   },
   created: function () {
 
@@ -2747,7 +1988,6 @@ export default {
 }
 
 :deep(.maplibregl-popup) {
-  z-index: 10;
   max-width: 300px !important;
 }
 
@@ -2862,19 +2102,12 @@ export default {
   }
 }
 
-.drawPoint, .drawLineString, .drawPolygon, 
-.drawDelete, .drawEdit, .drawRelevance,
-.zoomIn, .zoomOut, .fitWindow {
-  padding: 4px;
+.zoomOut {
+  padding-left: 8px;
 }
 
-.iconSelected {
-  color: var(--el-color-primary-light-5) !important;
-}
-
-.inactive {
-  color: #DDDDDD !important;
-  cursor: not-allowed !important;
+.fitWindow {
+  padding-left: 8px;
 }
 
 .yellow-star-legend {
@@ -2899,7 +2132,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: fit-content;
+  height: 290px;
   min-width: 200px;
   .el-popper__arrow {
     &:before {
@@ -3082,19 +2315,19 @@ export default {
   }
 }
 
-:deep(.maplibregl-popup-content) {
-  padding: 0px;
+:deep(.popper-zoomout) {
+  padding-right: 13px !important;
+  left: -21px !important;
 }
 
-.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;
+:deep(.popper-zoomout) {
+  .popper__arrow {
+    left: 53px !important;
+  }
+}
+
+:deep(.maplibregl-popup-content) {
+  padding: 0px;
 }
 
 .bottom-right-control {
@@ -3286,21 +2519,12 @@ 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>