@abi-software/flatmapvuer 1.17.0 → 1.17.1-demo.1

package/src/components/FlatmapVuer.vue

@@ -7,9 +7,7 @@
     element-loading-background="rgba(0, 0, 0, 0.3)"
   >
     <map-svg-sprite-color />
-    <div
-      style="height: 100%; width: 100%; position: relative; overflow-y: none"
-    >
+    <div style="height: 100%; width: 100%; position: relative; overflow-y: none">
       <!-- flatmap-display -->
       <div style="height: 100%; width: 100%" ref="display" class="flatmap-display"></div>
       <!-- flatmap-error -->
@@ -25,67 +23,41 @@
             :visible="hoverVisibilities[7].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="showTooltip(7)"
-              @mouseout="hideTooltip(7)"
-            >
+            <p v-if="isLegacy" @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
               This is a legacy map, you may view the latest map instead.
             </p>
-            <p
-              v-else-if="isFC"
-              @mouseover="showTooltip(7)"
-              @mouseout="hideTooltip(7)"
-            >
-              This map displays the connectivity of individual neurons.
-              Specifically, those which align with (parts of) the neuron
-              populations from the
-              <a
-                href="https://sparc.science/resources/1ZUKXU2YmLcn2reCyXjlew"
-                target="_blank"
-              >
+            <p v-else-if="isFC" @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
+              This map displays the connectivity of individual neurons. Specifically, those which
+              align with (parts of) the neuron populations from the
+              <a href="https://sparc.science/resources/1ZUKXU2YmLcn2reCyXjlew" target="_blank">
                 ApiNATOMY
               </a>
               models available in
-              <a
-                href="https://sparc.science/resources/6eg3VpJbwQR4B84CjrvmyD"
-                target="_blank"
-              >
-                SCKAN </a
-              >.
+              <a href="https://sparc.science/resources/6eg3VpJbwQR4B84CjrvmyD" target="_blank">
+                SCKAN
+              </a>
+              .
             </p>
-            <p v-else
-              @mouseover="showTooltip(7)"
-              @mouseout="hideTooltip(7)"
-            >
-              This map displays the connectivity of neuron populations.
-              Specifically, those from the primarily rat-based
-              <a
-                href="https://sparc.science/resources/1ZUKXU2YmLcn2reCyXjlew"
-                target="_blank"
-              >
+            <p v-else @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
+              This map displays the connectivity of neuron populations. Specifically, those from the
+              primarily rat-based
+              <a href="https://sparc.science/resources/1ZUKXU2YmLcn2reCyXjlew" target="_blank">
                 ApiNATOMY
               </a>
               models available in
-              <a
-                href="https://sparc.science/resources/6eg3VpJbwQR4B84CjrvmyD"
-                target="_blank"
-              >
-                SCKAN </a
-              >. New connectivity and species specificity will be added as the
-              SPARC program progresses.
+              <a href="https://sparc.science/resources/6eg3VpJbwQR4B84CjrvmyD" target="_blank">
+                SCKAN
+              </a>
+              . New connectivity and species specificity will be added as the SPARC program
+              progresses.
             </p>
             <template #reference>
-              <div
-                class="warning-icon"
-                @mouseover="showTooltip(7)"
-                @mouseout="hideTooltip(7)"
-              >
+              <div class="warning-icon" @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
                 <el-icon v-if="displayWarning || isLegacy"><el-icon-warning-filled /></el-icon>
                 <template v-if="isLegacy">
                   <span class="warning-text">Legacy Map</span>
@@ -122,14 +94,10 @@ Please use `const` to assign meaningful names to them...
           </template>
           <template #default>
             <b>Connectivity References</b>
-            <p>
-              Connectivity references have been improved and available
-              in various formats.
-            </p>
+            <p>Connectivity references have been improved and available in various formats.</p>
             <b>Improved state storing</b>
             <p>
-              Current selection and visibility filters are now stored
-              when creating a permalink.
+              Current selection and visibility filters are now stored when creating a permalink.
             </p>
           </template>
         </el-popover>
@@ -147,7 +115,9 @@ Please use `const` to assign meaningful names to them...
       </el-icon>
 
       <DrawToolbar
-        v-if="viewingMode === 'Annotation' && (authorisedUser || offlineAnnotationEnabled) && !disableUI"
+        v-if="
+          viewingMode === 'Annotation' && (authorisedUser || offlineAnnotationEnabled) && !disableUI
+        "
         :mapCanvas="{
           containerHTML: this.$el,
           class: '.maplibregl-canvas',
@@ -185,10 +155,7 @@ Please use `const` to assign meaningful names to them...
               @mouseover="showTooltip(1)"
               @mouseout="hideTooltip(1)"
             >
-              <map-svg-icon
-                class="icon-button zoomIn"
-                icon="zoomIn"
-              />
+              <map-svg-icon class="icon-button zoomIn" icon="zoomIn" />
             </div>
           </template>
         </el-popover>
@@ -209,10 +176,7 @@ Please use `const` to assign meaningful names to them...
               @mouseover="showTooltip(2)"
               @mouseout="hideTooltip(2)"
             >
-              <map-svg-icon
-                class="icon-button zoomOut"
-                icon="zoomOut"
-              />
+              <map-svg-icon class="icon-button zoomOut" icon="zoomOut" />
             </div>
           </template>
         </el-popover>
@@ -238,10 +202,7 @@ Please use `const` to assign meaningful names to them...
               @mouseover="showTooltip(3)"
               @mouseout="hideTooltip(3)"
             >
-              <map-svg-icon
-                class="icon-button fitWindow"
-                icon="fitWindow"
-              />
+              <map-svg-icon class="icon-button fitWindow" icon="fitWindow" />
             </div>
           </template>
         </el-popover>
@@ -408,9 +369,7 @@ Please use `const` to assign meaningful names to them...
             @event open-map
             @arg {String} `mapOption.key`
           -->
-          <el-button type="primary" plain
-            @click="$emit('open-map', item.key)"
-          >
+          <el-button type="primary" plain @click="$emit('open-map', item.key)">
             {{ item.display }}
           </el-button>
         </el-row>
@@ -428,23 +387,27 @@ Please use `const` to assign meaningful names to them...
         <div>
           <el-row class="backgroundText">Viewing Mode</el-row>
           <el-row class="backgroundControl">
-            <div style="margin-bottom: 2px;">
-              <template
-                  v-for="(value, key, index) in viewingModes"
-                  :key="key"
-                >
-                  <template v-if="key === viewingMode">
-                    <span class="viewing-mode-title"><b >{{ key }}</b></span>
-                  </template>
-                  <template v-else>
-                    <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
-                  </template>
+            <div style="margin-bottom: 2px">
+              <template v-for="(value, key) in viewingModes" :key="key">
+                <template v-if="key === viewingMode">
+                  <span class="viewing-mode-title">
+                    <b>{{ key }}</b>
+                  </span>
+                </template>
+                <template v-else>
+                  <span class="viewing-mode-unselected" @click="changeViewingMode(key)">
+                    {{ key }}
+                  </span>
+                </template>
               </template>
             </div>
             <el-row class="viewing-mode-description">
               {{ modeDescription }}
             </el-row>
-            <el-row v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled" class="viewing-mode-description">
+            <el-row
+              v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled"
+              class="viewing-mode-description"
+            >
               (Anonymous annotate)
             </el-row>
           </el-row>
@@ -459,12 +422,7 @@ Please use `const` to assign meaningful names to them...
                 popper-class="flatmap_dropdown"
                 @change="setAnnotationFrom"
               >
-                <el-option
-                  v-for="item in annotatedSource"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                >
+                <el-option v-for="item in annotatedSource" :key="item" :label="item" :value="item">
                   <el-row>
                     <el-col :span="12">{{ item }}</el-col>
                   </el-row>
@@ -480,18 +438,14 @@ Please use `const` to assign meaningful names to them...
               class="flatmap-radio"
               @change="setFlightPath3D"
             >
-            <el-radio :value="false">2D</el-radio>
-            <el-radio :value="true">3D</el-radio>
+              <el-radio :value="false">2D</el-radio>
+              <el-radio :value="true">3D</el-radio>
             </el-radio-group>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText">Organs display</el-row>
           <el-row class="backgroundControl">
-            <el-radio-group
-              v-model="colourRadio"
-              class="flatmap-radio"
-              @change="setColour"
-            >
+            <el-radio-group v-model="colourRadio" class="flatmap-radio" @change="setColour">
               <el-radio :value="true">Colour</el-radio>
               <el-radio :value="false">Greyscale</el-radio>
             </el-radio-group>
@@ -499,11 +453,7 @@ Please use `const` to assign meaningful names to them...
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText">Outlines display</el-row>
           <el-row class="backgroundControl">
-            <el-radio-group
-              v-model="outlinesRadio"
-              class="flatmap-radio"
-              @change="setOutlines"
-            >
+            <el-radio-group v-model="outlinesRadio" class="flatmap-radio" @change="setOutlines">
               <el-radio :value="true">Show</el-radio>
               <el-radio :value="false">Hide</el-radio>
             </el-radio-group>
@@ -514,11 +464,7 @@ Please use `const` to assign meaningful names to them...
             <div
               v-for="item in availableBackground"
               :key="item"
-              :class="[
-                'backgroundChoice',
-                item,
-                item == currentBackground ? 'active' : '',
-              ]"
+              :class="['backgroundChoice', item, item == currentBackground ? 'active' : '']"
               @click="backgroundChangeCallback(item)"
             />
           </el-row>
@@ -546,10 +492,7 @@ Please use `const` to assign meaningful names to them...
                 @mouseover="showTooltip(4)"
                 @mouseout="hideTooltip(4)"
               >
-                <map-svg-icon
-                  icon="openMap"
-                  class="icon-button open-map-button"
-                />
+                <map-svg-icon icon="openMap" class="icon-button open-map-button" />
               </div>
             </template>
           </el-popover>
@@ -571,10 +514,7 @@ Please use `const` to assign meaningful names to them...
                 @mouseover="showTooltip(5)"
                 @mouseout="hideTooltip(5)"
               >
-                <map-svg-icon
-                  icon="changeBckgd"
-                  class="icon-button"
-                />
+                <map-svg-icon icon="changeBckgd" class="icon-button" />
               </div>
             </template>
           </el-popover>
@@ -595,112 +535,92 @@ Please use `const` to assign meaningful names to them...
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import { inject, provide, shallowRef, markRaw } from 'vue'
+import { inject, provide, shallowRef, markRaw } from 'vue';
 import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
   ArrowLeft as ElIconArrowLeft,
-} from '@element-plus/icons-vue'
-import SelectionsGroup from './SelectionsGroup.vue'
-import { MapSvgIcon, MapSvgSpriteColor } from '@abi-software/svg-sprite'
-import '@abi-software/svg-sprite/dist/style.css'
-import SvgLegends from './legends/SvgLegends.vue'
-import DynamicLegends from './legends/DynamicLegends.vue'
-import {
-  ElButton as Button,
-  ElCol as Col,
-  ElLoading as Loading,
-  ElRadio as Radio,
-  ElRadioGroup as RadioGroup,
-  ElRow as Row,
-  ElSelect as Select,
-  ElDialog as Dialog,
-  ElIcon as Icon,
-} from 'element-plus'
-import flatmapMarker from '../icons/flatmap-marker'
-import {
-  FlatmapQueries,
-  findTaxonomyLabels,
-} from '../services/flatmapQueries.js'
+} from '@element-plus/icons-vue';
+import SelectionsGroup from './SelectionsGroup.vue';
+import { MapSvgIcon, MapSvgSpriteColor } from '@abi-software/svg-sprite';
+import '@abi-software/svg-sprite/dist/style.css';
+import flatmapMarker from '../icons/flatmap-marker';
+import { FlatmapQueries, findTaxonomyLabels } from '../services/flatmapQueries.js';
 import {
   getReferenceConnectivitiesFromStorage,
   loadAndStoreKnowledge,
   refreshFlatmapKnowledgeCache,
   getKnowledgeSource,
   getReferenceConnectivitiesByAPI,
-} from '../services/flatmapKnowledge.js'
-import { capitalise, normaliseAlertToStringArray } from './utilities.js'
-import yellowstar from '../icons/yellowstar'
-import ResizeSensor from 'css-element-queries/src/ResizeSensor'
-import flatmap from '../services/flatmapLoader.js'
-import { AnnotationService } from '@abi-software/sparc-annotation'
-import { mapState } from 'pinia'
-import { useMainStore } from '@/store/index'
+} from '../services/flatmapKnowledge.js';
+import { capitalise, normaliseAlertToStringArray } from './utilities.js';
+import yellowstar from '../icons/yellowstar';
+import ResizeSensor from 'css-element-queries/src/ResizeSensor';
+import flatmap from '../services/flatmapLoader.js';
+import { AnnotationService } from '@abi-software/sparc-annotation';
+import { mapState } from 'pinia';
+import { useMainStore } from '@/store/index';
 import {
   fetchLabels,
   DrawToolbar,
   Tooltip,
   TreeControls,
-  getFlatmapFilterOptions
-} from '@abi-software/map-utilities'
-import '@abi-software/map-utilities/dist/style.css'
-import EventBus from './EventBus.js'
-import FlatmapError from './FlatmapError.vue'
+  getFlatmapFilterOptions,
+} from '@abi-software/map-utilities';
+import '@abi-software/map-utilities/dist/style.css';
+import EventBus from './EventBus.js';
+import FlatmapError from './FlatmapError.vue';
 
 const ERROR_MESSAGE = 'cannot be found on the map.';
 
 const centroid = (geometry) => {
-  let featureGeometry = { lng: 0, lat: 0, }
-  let coordinates
-  if (geometry.type === "Polygon") {
+  let featureGeometry = { lng: 0, lat: 0 };
+  let coordinates;
+  if (geometry.type === 'Polygon') {
     if (geometry.coordinates.length) {
-      coordinates = geometry.coordinates[0]
+      coordinates = geometry.coordinates[0];
     }
   } else {
-    coordinates = geometry.coordinates
+    coordinates = geometry.coordinates;
   }
   if (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
+        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])
+      featureGeometry.lng += parseFloat(coordinates[0]);
+      featureGeometry.lat += parseFloat(coordinates[1]);
     }
   }
-  return featureGeometry
-}
+  return featureGeometry;
+};
 
 const processFTUs = (parent, key) => {
-  const ftus = []
-  let items = parent.organs ? parent.organs : parent.ftus
+  const ftus = [];
+  let items = parent.organs ? parent.organs : parent.ftus;
   const children = items
-    ? items.filter(
-        (obj, index) =>
-          items.findIndex((item) => item.label === obj.label) === index
-      )
-    : undefined
+    ? items.filter((obj, index) => items.findIndex((item) => item.label === obj.label) === index)
+    : undefined;
   if (children) {
     children.forEach((child) => {
       const data = {
         label: child.label,
         models: child.models,
         key: `${key}.${child.label}`,
-      }
-      const grandChildren = processFTUs(child, data.key)
+      };
+      const grandChildren = processFTUs(child, data.key);
       if (grandChildren.length > 0) {
-        data.children = grandChildren
+        data.children = grandChildren;
       }
-      ftus.push(data)
-    })
+      ftus.push(data);
+    });
   }
-  return ftus
-}
+  return ftus;
+};
 
 /**
  * A vue component of the flatmap viewer.
@@ -708,21 +628,11 @@ const processFTUs = (parent, key) => {
 export default {
   name: 'FlatmapVuer',
   components: {
-    Button,
-    Col,
-    Loading,
-    Radio,
-    Icon,
-    RadioGroup,
-    Row,
-    Select,
-    Dialog,
     MapSvgIcon,
     MapSvgSpriteColor,
     Tooltip,
     TreeControls,
     SelectionsGroup,
-    SvgLegends,
     ElIconWarningFilled,
     ElIconArrowDown,
     ElIconArrowLeft,
@@ -733,20 +643,20 @@ export default {
     //The state watcher may triggered before
     //created causing issue, This flag will
     //resolve this issue.
-    this.setStateRequired = false
+    this.setStateRequired = false;
   },
   setup(props) {
-    let annotator = inject('$annotator')
+    let annotator = inject('$annotator');
     if (!annotator) {
       annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
-      provide('$annotator', annotator)
+      provide('$annotator', annotator);
     }
-    return { annotator }
+    return { annotator };
   },
   methods: {
     enableFeatureResetOnClick: function (enable) {
       if (this.mapImp) {
-        this.mapImp.enableFeatureResetOnClick(enable)
+        this.mapImp.enableFeatureResetOnClick(enable);
       }
     },
     /**
@@ -782,20 +692,20 @@ export default {
      * Function to manually send aborted signal when annotation tooltip popup or sidebar tab closed.
      */
     manualAbortedOnClose: function () {
-      if (this.annotationSidebar) this.$emit("annotation-close")
-      this.closeTooltip()
-      this.annotationEventCallback({}, { type: 'aborted' })
-      this.initialiseDrawing()
+      if (this.annotationSidebar) this.$emit('annotation-close');
+      this.closeTooltip();
+      this.annotationEventCallback({}, { type: 'aborted' });
+      this.initialiseDrawing();
     },
     /**
      * @public
      * Function to initialise drawing.
      */
     initialiseDrawing: function () {
-      this.connectionEntry = {}
-      this.activeDrawTool = undefined
-      this.activeDrawMode = undefined
-      this.drawnCreatedEvent = {}
+      this.connectionEntry = {};
+      this.activeDrawTool = undefined;
+      this.activeDrawMode = undefined;
+      this.drawnCreatedEvent = {};
     },
     /**
      * @public
@@ -803,14 +713,16 @@ export default {
      */
     cancelDrawnFeature: function () {
       if (this.isValidDrawnCreated) {
-        if (this.annotationSidebar) this.$emit("annotation-close")
-        this.closeTooltip()
-        this.annotationEntry = [{
-          ...this.drawnCreatedEvent.feature,
-          resourceId: this.serverURL,
-        }]
-        this.rollbackAnnotationEvent()
-        this.initialiseDrawing()
+        if (this.annotationSidebar) this.$emit('annotation-close');
+        this.closeTooltip();
+        this.annotationEntry = [
+          {
+            ...this.drawnCreatedEvent.feature,
+            resourceId: this.serverURL,
+          },
+        ];
+        this.rollbackAnnotationEvent();
+        this.initialiseDrawing();
       }
     },
     /**
@@ -821,14 +733,14 @@ export default {
     connectedFeatureTooltip: function (value) {
       if (this.mapImp) {
         if (value) {
-          const numericId = Number(value)
+          const numericId = Number(value);
           const featureObject = numericId
             ? this.mapImp.featureProperties(numericId)
-            : { feature: this.existDrawnFeatures.find(feature => feature.id === value.trim()) };
-          let payload = { feature: featureObject }
-          this.checkAndCreatePopups([payload], false)
+            : { feature: this.existDrawnFeatures.find((feature) => feature.id === value.trim()) };
+          let payload = { feature: featureObject };
+          this.checkAndCreatePopups([payload], false);
         } else {
-          this.closeTooltip()
+          this.closeTooltip();
         }
       }
     },
@@ -838,14 +750,14 @@ export default {
      */
     confirmDrawnFeature: function () {
       if (this.isValidDrawnCreated) {
-        this.checkAndCreatePopups([this.drawnCreatedEvent], false)
+        this.checkAndCreatePopups([this.drawnCreatedEvent], false);
         // 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[0].feature.connection = this.connectionEntry
+          this.annotationEntry[0].feature.connection = this.connectionEntry;
         }
-        this.initialiseDrawing()
+        this.initialiseDrawing();
       }
     },
     /**
@@ -856,20 +768,20 @@ export default {
      */
     toolbarEvent: function (type, name) {
       if (this.isValidDrawnCreated) return;
-      this.manualAbortedOnClose()
-      this.doubleClickedFeature = false
+      this.manualAbortedOnClose();
+      this.doubleClickedFeature = false;
       // Deselect any feature when draw mode/tool is changed
-      this.changeAnnotationDrawMode({ mode: 'simple_select' })
+      this.changeAnnotationDrawMode({ mode: 'simple_select' });
       if (type === 'mode') {
-        this.activeDrawMode = name
+        this.activeDrawMode = name;
       } else if (type === 'tool') {
         // Remove any unsubmitted drawn
-        this.cancelDrawnFeature()
+        this.cancelDrawnFeature();
         if (name) {
-          const tool = name.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
-          this.changeAnnotationDrawMode({ mode: `draw${tool}` })
+          const tool = name.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+          this.changeAnnotationDrawMode({ mode: `draw${tool}` });
         }
-        this.activeDrawTool = name
+        this.activeDrawTool = name;
       }
     },
     /**
@@ -884,18 +796,18 @@ export default {
           if (data.feature.feature.geometry.type !== 'Point') {
             this.changeAnnotationDrawMode({
               mode: 'direct_select',
-              options: { featureId: data.feature.feature.id }
-            })
-            this.modifyAnnotationFeature()
+              options: { featureId: data.feature.feature.id },
+            });
+            this.modifyAnnotationFeature();
           }
-          this.doubleClickedFeature = false
+          this.doubleClickedFeature = false;
         }
       } else if (this.activeDrawMode === 'Delete') {
         this.changeAnnotationDrawMode({
           mode: 'simple_select',
-          options: { featureIds: [data.feature.feature.id] }
-        })
-        this.modifyAnnotationFeature()
+          options: { featureIds: [data.feature.feature.id] },
+        });
+        this.modifyAnnotationFeature();
       }
     },
     /**
@@ -903,14 +815,16 @@ export default {
      */
     createConnectivityBody: function () {
       if (Object.keys(this.connectionEntry).length > 0) {
-        const features = Object.values(this.connectionEntry)
+        const features = Object.values(this.connectionEntry);
         const body = {
           type: 'connectivity',
           source: features[0],
           target: features[features.length - 1],
-          intermediates: features.filter((f, index) => index !== 0 && index !== features.length - 1),
-        }
-        this.annotationEntry[0].body = body
+          intermediates: features.filter(
+            (f, index) => index !== 0 && index !== features.length - 1,
+          ),
+        };
+        this.annotationEntry[0].body = body;
       }
     },
     /**
@@ -920,7 +834,7 @@ export default {
      */
     changeAnnotationDrawMode: function (mode) {
       if (this.mapImp) {
-        this.mapImp.changeAnnotationDrawMode(mode)
+        this.mapImp.changeAnnotationDrawMode(mode);
       }
     },
     /**
@@ -929,18 +843,18 @@ export default {
      */
     clearAnnotationFeature: function () {
       if (this.mapImp) {
-        this.mapImp.clearAnnotationFeature()
+        this.mapImp.clearAnnotationFeature();
       }
     },
-    forceContextLoss: function() {
+    forceContextLoss: function () {
       if (this.mapImp && !this.mapImp.contextLost && !this.loading) {
-        this.mapImp.forceContextLoss()
+        this.mapImp.forceContextLoss();
       }
     },
-    forceContextRestore: function() {
+    forceContextRestore: function () {
       if (this.mapImp) {
-        this.flatmapError = null
-        this.mapImp.forceContextRestore()
+        this.flatmapError = null;
+        this.mapImp.forceContextRestore();
       }
     },
     /**
@@ -953,7 +867,7 @@ export default {
         // Fire the 'trash' button
         // Not only use to remove features
         // 'simple_select' for DELETE and 'direct_select' for EDIT
-        this.mapImp.removeAnnotationFeature()
+        this.mapImp.removeAnnotationFeature();
       }
     },
     /**
@@ -967,8 +881,8 @@ export default {
         this.annotationEntry.length > 0 &&
         ['created', 'updated', 'deleted'].includes(this.annotationEntry[0].type)
       ) {
-        this.mapImp.rollbackAnnotationEvent(this.annotationEntry[0])
-        this.annotationEntry = []
+        this.mapImp.rollbackAnnotationEvent(this.annotationEntry[0]);
+        this.annotationEntry = [];
       }
     },
     /**
@@ -979,27 +893,28 @@ export default {
     commitAnnotationEvent: function (annotation) {
       if (this.mapImp) {
         if (this.offlineAnnotationEnabled) {
-          this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || []
-          this.offlineAnnotations.push(annotation)
+          this.offlineAnnotations =
+            JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
+          this.offlineAnnotations.push(annotation);
           if (this.annotationEntry[0].type === 'deleted') {
             this.offlineAnnotations = this.offlineAnnotations.filter((offline) => {
-              return offline.resource !== this.serverURL || offline.item.id !== annotation.item.id
-            })
+              return offline.resource !== this.serverURL || offline.item.id !== annotation.item.id;
+            });
           }
-          sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations))
+          sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
         }
         if (['created', 'updated', 'deleted'].includes(this.annotationEntry[0].type)) {
-          this.featureAnnotationSubmitted = true
-          this.mapImp.commitAnnotationEvent(this.annotationEntry[0])
-          if (annotation.body.comment === "Position Updated") {
-            this.annotationEntry[0].positionUpdated = false
+          this.featureAnnotationSubmitted = true;
+          this.mapImp.commitAnnotationEvent(this.annotationEntry[0]);
+          if (annotation.body.comment === 'Position Updated') {
+            this.annotationEntry[0].positionUpdated = false;
           } else if (this.annotationEntry[0].type === 'deleted') {
-            if (this.annotationSidebar) this.$emit("annotation-close")
-            this.closeTooltip()
+            if (this.annotationSidebar) this.$emit('annotation-close');
+            this.closeTooltip();
             // Only delete need, keep the annotation tooltip/sidebar open if created/updated
-            this.annotationEntry = []
+            this.annotationEntry = [];
           }
-          this.addAnnotationFeature()
+          this.addAnnotationFeature();
         }
       }
     },
@@ -1010,18 +925,25 @@ export default {
      * @arg {String} `participated`
      */
     fetchAnnotatedItemIds: async function (userId = undefined, participated = undefined) {
-      let annotatedItemIds
+      let annotatedItemIds;
       if (this.offlineAnnotationEnabled) {
-        this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || []
-        annotatedItemIds = this.offlineAnnotations.filter((offline) => {
-          return offline.resource === this.serverURL
-        }).map(offline => offline.item.id)
+        this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
+        annotatedItemIds = this.offlineAnnotations
+          .filter((offline) => {
+            return offline.resource === this.serverURL;
+          })
+          .map((offline) => offline.item.id);
       } else {
-        annotatedItemIds = await this.annotator.annotatedItemIds(this.userToken, this.serverURL, userId, participated)
+        annotatedItemIds = await this.annotator.annotatedItemIds(
+          this.userToken,
+          this.serverURL,
+          userId,
+          participated,
+        );
         // The annotator has `resource` and `items` fields
-        if ('resource' in annotatedItemIds) annotatedItemIds = annotatedItemIds.itemIds
+        if ('resource' in annotatedItemIds) annotatedItemIds = annotatedItemIds.itemIds;
       }
-      return annotatedItemIds
+      return annotatedItemIds;
     },
     /**
      * @public
@@ -1029,9 +951,9 @@ export default {
      */
     setFeatureAnnotated: async function () {
       if (this.mapImp) {
-        const annotatedItemIds = await this.fetchAnnotatedItemIds()
+        const annotatedItemIds = await this.fetchAnnotatedItemIds();
         for (const id of annotatedItemIds) {
-          this.mapImp.setFeatureAnnotated(id)
+          this.mapImp.setFeatureAnnotated(id);
         }
       }
     },
@@ -1042,19 +964,25 @@ export default {
      * @arg {String} `participated`
      */
     fetchDrawnFeatures: async function (userId, participated) {
-      let drawnFeatures
+      let drawnFeatures;
       if (this.offlineAnnotationEnabled) {
-        this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || []
-        drawnFeatures = this.offlineAnnotations.filter((offline) => {
-          return offline.feature && offline.resource === this.serverURL
-        }).map(offline => offline.feature)
+        this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
+        drawnFeatures = this.offlineAnnotations
+          .filter((offline) => {
+            return offline.feature && offline.resource === this.serverURL;
+          })
+          .map((offline) => offline.feature);
       } else {
-        const annotatedItemIds = await this.fetchAnnotatedItemIds(userId, participated)
-        drawnFeatures = await this.annotator.drawnFeatures(this.userToken, this.serverURL, annotatedItemIds)
+        const annotatedItemIds = await this.fetchAnnotatedItemIds(userId, participated);
+        drawnFeatures = await this.annotator.drawnFeatures(
+          this.userToken,
+          this.serverURL,
+          annotatedItemIds,
+        );
         // The annotator has `resource` and `features` fields
-        if ('resource' in drawnFeatures) drawnFeatures = drawnFeatures.features
+        if ('resource' in drawnFeatures) drawnFeatures = drawnFeatures.features;
       }
-      return drawnFeatures
+      return drawnFeatures;
     },
     /**
      * @public
@@ -1063,21 +991,27 @@ export default {
     addAnnotationFeature: async function () {
       if (this.mapImp) {
         if (!this.featureAnnotationSubmitted) {
-          this.clearAnnotationFeature()
-          this.loading = true
+          this.clearAnnotationFeature();
+          this.loading = true;
         }
-        const userId = this.annotationFrom === 'Anyone' ?
-          undefined : this.authorisedUser.orcid ?
-            this.authorisedUser.orcid : '0000-0000-0000-0000'
-        const participated = this.annotationFrom === 'Anyone' ?
-          undefined : this.annotationFrom === 'Me' ?
-            true : false
-        const drawnFeatures = await this.fetchDrawnFeatures(userId, participated)
-        this.existDrawnFeatures = drawnFeatures
-        this.loading = false
+        const userId =
+          this.annotationFrom === 'Anyone'
+            ? undefined
+            : this.authorisedUser.orcid
+              ? this.authorisedUser.orcid
+              : '0000-0000-0000-0000';
+        const participated =
+          this.annotationFrom === 'Anyone'
+            ? undefined
+            : this.annotationFrom === 'Me'
+              ? true
+              : false;
+        const drawnFeatures = await this.fetchDrawnFeatures(userId, participated);
+        this.existDrawnFeatures = drawnFeatures;
+        this.loading = false;
         if (!this.featureAnnotationSubmitted) {
           for (const feature of drawnFeatures) {
-            this.mapImp.addAnnotationFeature(feature)
+            this.mapImp.addAnnotationFeature(feature);
           }
         }
       }
@@ -1090,9 +1024,9 @@ export default {
     showAnnotator: function (flag) {
       if (this.mapImp) {
         // Control the show/hide of the drawn annotations
-        this.mapImp.showAnnotator(flag)
+        this.mapImp.showAnnotator(flag);
         // Hide default toolbar, we will use customised SVG icons instead
-        this.$el.querySelector('.maplibregl-ctrl-group').style.display = 'none'
+        this.$el.querySelector('.maplibregl-ctrl-group').style.display = 'none';
       }
     },
     /**
@@ -1101,10 +1035,10 @@ export default {
      * @arg {Boolean} `flag`
      */
     setAnnotationFrom: function (flag) {
-      this.annotationFrom = flag
+      this.annotationFrom = flag;
       if (this.mapImp) {
-        this.manualAbortedOnClose()
-        this.addAnnotationFeature()
+        this.manualAbortedOnClose();
+        this.addAnnotationFeature();
       }
     },
     /**
@@ -1119,9 +1053,9 @@ export default {
      * @arg {Boolean} `flag`
      */
     setFlightPath3D: function (flag) {
-      this.flightPath3DRadio = flag
+      this.flightPath3DRadio = flag;
       if (this.mapImp) {
-        this.mapImp.enableFlightPaths(flag)
+        this.mapImp.enableFlightPaths(flag);
       }
     },
     /**
@@ -1129,20 +1063,20 @@ export default {
      * Function to view the latest map (example when you are on legacy map).
      */
     viewLatestMap: function () {
-      let biologicalSex = this.biologicalSex ? this.biologicalSex : undefined
+      let biologicalSex = this.biologicalSex ? this.biologicalSex : undefined;
       //Human requires special handling
       if (this.entry === 'NCBITaxon:9606') {
-        biologicalSex = 'PATO:0000384'
+        biologicalSex = 'PATO:0000384';
       }
       const state = {
         entry: this.entry,
         biologicalSex,
         viewport: this.mapImp.getState(),
-      }
+      };
       /**
        * The event emitted by ``viewLatestMap`` method.
        */
-      this.$emit('view-latest-map', state)
+      this.$emit('view-latest-map', state);
     },
     /**
      * @public
@@ -1151,9 +1085,9 @@ export default {
      * @arg {String} `colour`
      */
     backgroundChangeCallback: function (colour) {
-      this.currentBackground = colour
+      this.currentBackground = colour;
       if (this.mapImp) {
-        this.mapImp.setBackgroundColour(this.currentBackground, 1)
+        this.mapImp.setBackgroundColour(this.currentBackground, 1);
       }
     },
     /**
@@ -1162,21 +1096,21 @@ export default {
      * @arg {Array} `systems`
      */
     processSystems: function (systems) {
-      this.systems.length = 0
+      this.systems.length = 0;
       if (systems && systems.length > 0) {
-        const data = { label: 'All', key: 'All', children: [] }
+        const data = { label: 'All', key: 'All', children: [] };
         systems.forEach((system) => {
           const child = {
             colour: system.colour,
             enabled: system.enabled,
             label: system.id,
             key: system.id,
-          }
-          const children = processFTUs(system, child.key)
-          if (children.length > 0) child.children = children
-          data.children.push(child)
-        })
-        this.systems.push(data)
+          };
+          const children = processFTUs(system, child.key);
+          if (children.length > 0) child.children = children;
+          data.children.push(child);
+        });
+        this.systems.push(data);
       }
     },
     /**
@@ -1187,17 +1121,17 @@ export default {
      * @arg {Array} `taxonIdentifiers`
      */
     processTaxon: function (taxonIdentifiers, state) {
-      this.taxonConnectivity.length = 0
+      this.taxonConnectivity.length = 0;
       findTaxonomyLabels(this.mapImp, taxonIdentifiers).then((entityLabels) => {
         if (entityLabels.length) {
           entityLabels.forEach((entityLabel) => {
-            let enabled = true
+            let enabled = true;
             if (state) {
-              enabled = state.checkAll ? true : state.checked.includes(entityLabel.taxon)
+              enabled = state.checkAll ? true : state.checked.includes(entityLabel.taxon);
             }
-            this.taxonConnectivity.push({...entityLabel, enabled});
+            this.taxonConnectivity.push({ ...entityLabel, enabled });
             if (this.mapImp) {
-              this.mapImp.enableConnectivityByTaxonIds(entityLabel.taxon, enabled)
+              this.mapImp.enableConnectivityByTaxonIds(entityLabel.taxon, enabled);
             }
           });
         }
@@ -1208,7 +1142,7 @@ export default {
      * Function to show or hide the display of the bottom-left drawer container.
      */
     toggleDrawer: function () {
-      this.drawerOpen = !this.drawerOpen
+      this.drawerOpen = !this.drawerOpen;
     },
     /**
      * @public
@@ -1217,9 +1151,9 @@ export default {
      * @arg {Boolean} `flag`
      */
     setColour: function (flag) {
-      this.colourRadio = flag
+      this.colourRadio = flag;
       if (this.mapImp) {
-        this.mapImp.setPaint({ coloured: flag, outlined: this.outlinesRadio })
+        this.mapImp.setPaint({ coloured: flag, outlined: this.outlinesRadio });
       }
     },
     /**
@@ -1229,9 +1163,9 @@ export default {
      * @arg {Boolean} `flag`
      */
     setOutlines: function (flag) {
-      this.outlinesRadio = flag
+      this.outlinesRadio = flag;
       if (this.mapImp) {
-        this.mapImp.setPaint({ coloured: this.colourRadio, outlined: flag })
+        this.mapImp.setPaint({ coloured: this.colourRadio, outlined: flag });
       }
     },
     setInitMapState: function () {
@@ -1240,7 +1174,7 @@ export default {
         const bounds = this.mapImp.options.bounds;
         const initBounds = [
           [bounds[0], bounds[1]],
-          [bounds[2], bounds[3]]
+          [bounds[2], bounds[3]],
         ];
 
         map.setMaxBounds(null); // override default
@@ -1268,20 +1202,20 @@ export default {
         if (initBounds) {
           // reset zoom and position
           map.fitBounds(initBounds, {
-            animate: false
+            animate: false,
           });
         }
         if (this.$refs.skcanSelection) {
-          this.$refs.skcanSelection.reset()
+          this.$refs.skcanSelection.reset();
         }
         if (this.$refs.layersSelection) {
-          this.$refs.layersSelection.reset()
+          this.$refs.layersSelection.reset();
         }
         if (this.$refs.systemsSelection) {
-          this.$refs.pathwaysSelection.reset()
+          this.$refs.pathwaysSelection.reset();
         }
         if (this.$refs.pathwaysSelection) {
-          this.$refs.pathwaysSelection.reset()
+          this.$refs.pathwaysSelection.reset();
         }
       }
     },
@@ -1292,7 +1226,7 @@ export default {
      */
     zoomIn: function () {
       if (this.mapImp) {
-        this.mapImp.zoomIn()
+        this.mapImp.zoomIn();
       }
     },
     /**
@@ -1302,7 +1236,7 @@ export default {
      */
     zoomOut: function () {
       if (this.mapImp) {
-        this.mapImp.zoomOut()
+        this.mapImp.zoomOut();
       }
     },
     onSelectionsDataChanged: function (data) {
@@ -1316,7 +1250,7 @@ export default {
      */
     sckanSelected: function (payload) {
       if (this.mapImp) {
-        this.mapImp.enableSckanPath(payload.key, payload.value)
+        this.mapImp.enableSckanPath(payload.key, payload.value);
       }
     },
     /**
@@ -1326,9 +1260,7 @@ export default {
      */
     checkAllSCKAN: function (payload) {
       if (this.mapImp) {
-        payload.keys.forEach((key) =>
-          this.mapImp.enableSckanPath(key, payload.value)
-        )
+        payload.keys.forEach((key) => this.mapImp.enableSckanPath(key, payload.value));
       }
     },
     /**
@@ -1337,7 +1269,7 @@ export default {
      */
     zoomToFeatures: function (data) {
       if (this.mapImp) {
-        this.mapImp.zoomToFeatures(data)
+        this.mapImp.zoomToFeatures(data);
       }
     },
     /**
@@ -1356,16 +1288,20 @@ export default {
         const pathsOfEntities = await this.mapImp.queryPathsForFeatures(payload);
         if (nodeFeatureIds.length) {
           if (!connectedTarget.length) {
-            const connectedType = options.type?.length ? options.type : ["all"];
-            const connectivity = await this.flatmapQueries.queryForConnectivityNew(this.mapImp, payload[0]);
+            const connectedType = options.type?.length ? options.type : ['all'];
+            const connectivity = await this.flatmapQueries.queryForConnectivityNew(
+              this.mapImp,
+              payload[0],
+            );
             const originsFlat = connectivity?.ids?.dendrites.flat(Infinity);
             const componentsFlat = connectivity?.ids?.components.flat(Infinity);
             const destinationsFlat = connectivity?.ids?.axons.flat(Infinity);
             let connected = [];
-            if (connectedType.includes("origins")) connected.push(...originsFlat);
-            if (connectedType.includes("components")) connected.push(...componentsFlat);
-            if (connectedType.includes("destinations")) connected.push(...destinationsFlat);
-            if (connectedType.includes("all")) connected.push(...originsFlat, ...componentsFlat, ...destinationsFlat);
+            if (connectedType.includes('origins')) connected.push(...originsFlat);
+            if (connectedType.includes('components')) connected.push(...componentsFlat);
+            if (connectedType.includes('destinations')) connected.push(...destinationsFlat);
+            if (connectedType.includes('all'))
+              connected.push(...originsFlat, ...componentsFlat, ...destinationsFlat);
             connectedTarget = [...new Set(connected)];
           }
           // Loop through the node features and check if we have certain nodes
@@ -1378,7 +1314,9 @@ export default {
               const nodeModelsL2 = nodeFeatureIdsL2.map((featureIdL2) => {
                 return this.mapImp.featureProperties(featureIdL2).models;
               });
-              const intersection = connectedTarget.filter(element => nodeModelsL2.includes(element));
+              const intersection = connectedTarget.filter((element) =>
+                nodeModelsL2.includes(element),
+              );
               if (intersection.length && !connectedPaths.includes(path)) connectedPaths.push(path);
             });
           });
@@ -1389,7 +1327,9 @@ export default {
               const nodeModels = nodeFeatureIds.map((featureId) => {
                 return this.mapImp.featureProperties(featureId).models;
               });
-              const intersection = connectedTarget.filter(element => nodeModels.includes(element));
+              const intersection = connectedTarget.filter((element) =>
+                nodeModels.includes(element),
+              );
               if (intersection.length && !connectedPaths.includes(path)) connectedPaths.push(path);
             });
           } else {
@@ -1400,7 +1340,7 @@ export default {
         return connectedPaths;
       }
     },
-    resetMapFilter: function() {
+    resetMapFilter: function () {
       const alert = this.mapFilters.alert;
       let filter;
       const isPathways = { 'tile-layer': 'pathways' };
@@ -1409,18 +1349,18 @@ export default {
       if (alert.with && !alert.without) {
         // Show pathways with alert
         filter = {
-          OR: [notPathways, { AND: [isPathways, { HAS: 'alert' }] }]
+          OR: [notPathways, { AND: [isPathways, { HAS: 'alert' }] }],
         };
       } else if (!alert.with && alert.without) {
         // Show pathways without alert
         filter = {
-          OR: [notPathways, { AND: [isPathways, { NOT: { HAS: 'alert' } }] }]
+          OR: [notPathways, { AND: [isPathways, { NOT: { HAS: 'alert' } }] }],
         };
       } else if (!alert.with && !alert.without) {
         // Hide all pathways
         filter = notPathways;
       }
-      this.setVisibilityFilter(filter)
+      this.setVisibilityFilter(filter);
     },
     /**
      * @public
@@ -1435,16 +1375,14 @@ export default {
           const isPathways = { 'tile-layer': 'pathways' };
           const notPathways = { NOT: isPathways };
 
-          if (payload.key === "alert" || payload.key === "withoutAlert") {
-            const hasAlert = payload.key === "alert" ?
-              { HAS: 'alert' } :
-              { NOT: { HAS: 'alert' } };
+          if (payload.key === 'alert' || payload.key === 'withoutAlert') {
+            const hasAlert = payload.key === 'alert' ? { HAS: 'alert' } : { NOT: { HAS: 'alert' } };
 
             filter = { OR: [notPathways, { AND: [isPathways, hasAlert] }] };
           }
-          this.setVisibilityFilter(filter)
+          this.setVisibilityFilter(filter);
         } else {
-          this.resetMapFilter()
+          this.resetMapFilter();
         }
       }
     },
@@ -1456,20 +1394,20 @@ export default {
      */
     alertSelected: function (payload) {
       if (this.mapImp) {
-        if (payload.key === "alert") {
+        if (payload.key === 'alert') {
           if (payload.value) {
-            this.mapFilters.alert.with = true
+            this.mapFilters.alert.with = true;
           } else {
-            this.mapFilters.alert.with = false
+            this.mapFilters.alert.with = false;
           }
-        } else if (payload.key === "withoutAlert") {
+        } else if (payload.key === 'withoutAlert') {
           if (payload.value) {
-            this.mapFilters.alert.without = true
+            this.mapFilters.alert.without = true;
           } else {
-            this.mapFilters.alert.without = false
+            this.mapFilters.alert.without = false;
           }
         }
-        this.resetMapFilter()
+        this.resetMapFilter();
       }
     },
     /**
@@ -1481,13 +1419,13 @@ export default {
     checkAllAlerts: function (payload) {
       if (this.mapImp) {
         if (payload.value) {
-          this.mapFilters.alert.without = true
-          this.mapFilters.alert.with = true
+          this.mapFilters.alert.without = true;
+          this.mapFilters.alert.with = true;
         } else {
-          this.mapFilters.alert.without = false
-          this.mapFilters.alert.with = false
+          this.mapFilters.alert.without = false;
+          this.mapFilters.alert.with = false;
         }
-        this.resetMapFilter()
+        this.resetMapFilter();
       }
     },
     /**
@@ -1498,7 +1436,7 @@ export default {
      */
     systemSelected: function (payload) {
       if (this.mapImp) {
-        this.mapImp.enableSystem(payload.key, payload.value)
+        this.mapImp.enableSystem(payload.key, payload.value);
       }
     },
     /**
@@ -1509,9 +1447,7 @@ export default {
      */
     checkAllSystems: function (flag) {
       if (this.mapImp) {
-        this.systems[0].children.forEach((key) =>
-          this.mapImp.enableSystem(key.label, flag)
-        )
+        this.systems[0].children.forEach((key) => this.mapImp.enableSystem(key.label, flag));
       }
     },
     /**
@@ -1520,7 +1456,7 @@ export default {
      * @arg {String} `models`
      */
     ftuSelected: function (models) {
-      this.searchAndShowResult(models, true, true)
+      this.searchAndShowResult(models, true, true);
     },
     /**
      * @public
@@ -1530,7 +1466,7 @@ export default {
      */
     layersSelected: function (payload) {
       if (this.mapImp) {
-        this.mapImp.enableLayer(payload.key, payload.value)
+        this.mapImp.enableLayer(payload.key, payload.value);
       }
     },
     /**
@@ -1541,9 +1477,7 @@ export default {
      */
     checkAllLayers: function (payload) {
       if (this.mapImp) {
-        payload.keys.forEach((key) =>
-          this.mapImp.enableLayer(key, payload.value)
-        )
+        payload.keys.forEach((key) => this.mapImp.enableLayer(key, payload.value));
       }
     },
     /**
@@ -1554,24 +1488,24 @@ export default {
      */
     taxonsSelected: function (payload) {
       if (this.mapImp) {
-        this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value)
+        this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value);
       }
     },
     taxonMouseEnterEmitted: function (payload) {
       if (this.mapImp) {
         if (payload.value) {
-          clearTimeout(this.taxonLeaveDelay)
-          let gid = this.mapImp.taxonFeatureIds(payload.key)
-          this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value) // make sure path is visible
-          this.mapImp.zoomToGeoJSONFeatures(gid, {noZoomIn: true})
+          clearTimeout(this.taxonLeaveDelay);
+          let gid = this.mapImp.taxonFeatureIds(payload.key);
+          this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value); // make sure path is visible
+          this.mapImp.zoomToGeoJSONFeatures(gid, { noZoomIn: true });
         } else {
           this.taxonLeaveDelay = setTimeout(() => {
             // reset visibility of paths
-            this.mapImp.unselectGeoJSONFeatures()
+            this.mapImp.unselectGeoJSONFeatures();
             payload.selections.forEach((item) => {
-              let show = payload.checked.includes(item.taxon)
-              this.mapImp.enableConnectivityByTaxonIds(item.taxon, show)
-            })
+              let show = payload.checked.includes(item.taxon);
+              this.mapImp.enableConnectivityByTaxonIds(item.taxon, show);
+            });
           }, 1000);
         }
       }
@@ -1584,7 +1518,7 @@ export default {
      */
     checkAllTaxons: function (payload) {
       if (this.mapImp) {
-        this.mapImp.enableConnectivityByTaxonIds(payload.keys, payload.value)
+        this.mapImp.enableConnectivityByTaxonIds(payload.keys, payload.value);
       }
     },
     /**
@@ -1595,7 +1529,7 @@ export default {
      */
     pathwaysSelected: function (payload) {
       if (this.mapImp) {
-        this.mapImp.enablePath(payload.key, payload.value)
+        this.mapImp.enablePath(payload.key, payload.value);
       }
     },
     /**
@@ -1606,9 +1540,7 @@ export default {
      */
     checkAllPathways: function (payload) {
       if (this.mapImp) {
-        payload.keys.forEach((key) =>
-          this.mapImp.enablePath(key, payload.value)
-        )
+        payload.keys.forEach((key) => this.mapImp.enablePath(key, payload.value));
       }
     },
     /**
@@ -1618,7 +1550,7 @@ export default {
      * @arg {Boolean} `flag`
      */
     enablePanZoomEvents: function (flag) {
-      this.mapImp.enablePanZoomEvents(flag)
+      this.mapImp.enablePanZoomEvents(flag);
     },
     /**
      * @public
@@ -1630,72 +1562,79 @@ export default {
       // Popup closed will trigger aborted event this is used to control the tooltip
       if (data.type === 'aborted') {
         // Rollback drawing when no new annotation submitted
-        if (!this.featureAnnotationSubmitted) this.rollbackAnnotationEvent()
-        else this.featureAnnotationSubmitted = false
-        this.annotationEntry = []
+        if (!this.featureAnnotationSubmitted) this.rollbackAnnotationEvent();
+        else this.featureAnnotationSubmitted = false;
+        this.annotationEntry = [];
       } else if (data.type === 'modeChanged') {
-        if (data.feature.mode === 'direct_select') this.doubleClickedFeature = true
-        if (this.annotationSidebar && data.feature.mode === 'simple_select' && this.activeDrawMode === 'Deleted') {
-          this.annotationEventCallback({}, { type: 'aborted' })
+        if (data.feature.mode === 'direct_select') this.doubleClickedFeature = true;
+        if (
+          this.annotationSidebar &&
+          data.feature.mode === 'simple_select' &&
+          this.activeDrawMode === 'Deleted'
+        ) {
+          this.annotationEventCallback({}, { type: 'aborted' });
         }
       } else if (data.type === 'selectionChanged') {
-        this.selectedDrawnFeature = data.feature.features.length === 0 ?
-          undefined : data.feature.features[0]
-        payload.feature.feature = this.selectedDrawnFeature
-        if (!this.activeDrawTool) { // Make sure dialog content doesn't change
-          this.connectionEntry = {}
+        this.selectedDrawnFeature =
+          data.feature.features.length === 0 ? undefined : data.feature.features[0];
+        payload.feature.feature = this.selectedDrawnFeature;
+        if (!this.activeDrawTool) {
+          // Make sure dialog content doesn't change
+          this.connectionEntry = {};
           // For exist drawn annotation features
           if (this.selectedDrawnFeature) {
             // The `id` here is GeoJSONId from AnnotatedFeature
             // Ref: flatmap-viewer/src/flatmap-types.ts
             const drawnFeature = this.existDrawnFeatures.find(
-              (feature) => feature.id === this.selectedDrawnFeature.id
-            )
+              (feature) => feature.id === this.selectedDrawnFeature.id,
+            );
             if (drawnFeature && drawnFeature.connection) {
-              this.connectionEntry = drawnFeature.connection
+              this.connectionEntry = drawnFeature.connection;
             }
-            this.annotationDrawModeEvent(payload)
+            this.annotationDrawModeEvent(payload);
           } else {
             if (this.annotationSidebar && this.previousEditEvent.type === 'updated') {
-              this.annotationEntry = [{
-                ...this.previousEditEvent,
-                resourceId: this.serverURL
-              }]
-              this.annotationEventCallback({}, { type: 'aborted' })
+              this.annotationEntry = [
+                {
+                  ...this.previousEditEvent,
+                  resourceId: this.serverURL,
+                },
+              ];
+              this.annotationEventCallback({}, { type: 'aborted' });
             }
-            this.previousEditEvent = {}
+            this.previousEditEvent = {};
           }
         }
       } else {
         if (data.type === 'created' || data.type === 'updated') {
           if (data.type === 'updated' && data.feature.action) {
-            data.positionUpdated = data.feature.action === 'move'
+            data.positionUpdated = data.feature.action === 'move';
           }
-          const feature = this.mapImp.refreshAnnotationFeatureGeometry(data.feature)
-          payload.feature.feature = feature
+          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.drawnCreatedEvent = payload
-        else this.checkAndCreatePopups([payload])
+        if (data.type === 'created') this.drawnCreatedEvent = payload;
+        else this.checkAndCreatePopups([payload]);
       }
-      if (data.type === 'updated') this.previousEditEvent = data
-      if (data.type === 'deleted') this.previousDeletedEvent = data
-      else this.previousDeletedEvent = {}
+      if (data.type === 'updated') this.previousEditEvent = data;
+      if (data.type === 'deleted') this.previousDeletedEvent = data;
+      else this.previousDeletedEvent = {};
     },
     getTaxons: function (data) {
-      let taxons = undefined
+      let taxons = undefined;
       if (data.taxons) {
         // check if data.taxons is string or array
         if (typeof data.taxons !== 'object') {
-          taxons = JSON.parse(data.taxons)
+          taxons = JSON.parse(data.taxons);
         } else {
-          taxons = data.taxons
+          taxons = data.taxons;
         }
       }
-      return taxons
+      return taxons;
     },
     /**
      * @public
@@ -1710,33 +1649,35 @@ export default {
             feature: data,
             userData: args,
             eventType: eventType,
-          }
-          this.annotationEventCallback(payload, data)
+          };
+          this.annotationEventCallback(payload, data);
         } else if (eventType === 'context-lost') {
-          this.onContextLost()
+          this.onContextLost();
         } else if (eventType === 'context-restored') {
-          this.onContextRestored()
+          this.onContextRestored();
         } else if (eventType === 'pan-zoom') {
-          this.$emit('pan-zoom-callback', data)
+          this.$emit('pan-zoom-callback', data);
         } else {
-          const label = data.label
-          const resource = [data.models]
-          const taxonomy = this.entry
-          const biologicalSex = this.biologicalSex
-          const featuresAlert = normaliseAlertToStringArray(data.alert)
-          const taxons = this.getTaxons(data)
-          let payload = [{
-            dataset: data.dataset,
-            biologicalSex: biologicalSex,
-            taxonomy: taxonomy,
-            resource: resource,
-            label: label,
-            feature: data,
-            userData: args,
-            eventType: eventType,
-            provenanceTaxonomy: taxons,
-            alert: featuresAlert
-          }]
+          const label = data.label;
+          const resource = [data.models];
+          const taxonomy = this.entry;
+          const biologicalSex = this.biologicalSex;
+          const featuresAlert = normaliseAlertToStringArray(data.alert);
+          const taxons = this.getTaxons(data);
+          let payload = [
+            {
+              dataset: data.dataset,
+              biologicalSex: biologicalSex,
+              taxonomy: taxonomy,
+              resource: resource,
+              label: label,
+              feature: data,
+              userData: args,
+              eventType: eventType,
+              provenanceTaxonomy: taxons,
+              alert: featuresAlert,
+            },
+          ];
           if (eventType === 'mouseenter') {
             this.lastHoveredFeature = data;
           }
@@ -1747,15 +1688,15 @@ export default {
             // `data` is a single object (e.g., {featureId: '...', mapUUID: '...'}).
             const singleSelection = !data[0];
             if (!singleSelection) {
-              payload = []
-              const mapuuid = data.mapUUID
+              payload = [];
+              const mapuuid = data.mapUUID;
               const seenIds = new Set();
               for (let [key, value] of Object.entries(data)) {
                 if (key !== 'mapUUID') {
-                  const id = value.featureId
-                  const label = value.label
-                  const resource = [value.models]
-                  const taxons = this.getTaxons(value)
+                  const id = value.featureId;
+                  const label = value.label;
+                  const resource = [value.models];
+                  const taxons = this.getTaxons(value);
                   if (seenIds.has(id)) continue;
                   seenIds.add(id);
                   payload.push({
@@ -1769,50 +1710,54 @@ export default {
                     eventType: eventType,
                     provenanceTaxonomy: taxons,
                     alert: normaliseAlertToStringArray(value.alert),
-                    mapUUID: mapuuid
-                  })
+                    mapUUID: mapuuid,
+                  });
                 }
               }
             }
-            const clickedItem = singleSelection ? data : data[0]
+            const clickedItem = singleSelection ? data : data[0];
             this.setConnectivityDataSource(this.viewingMode, clickedItem);
             if (this.viewingMode === 'Neuron Connection') {
               // do nothing here
               // the method to highlight paths is moved to checkAndCreatePopups function
             } else {
-              this.currentActive = clickedItem.models ? clickedItem.models : '' // This is for FC map
+              this.currentActive = clickedItem.models ? clickedItem.models : ''; // This is for FC map
               // This is for annotation mode - draw connectivity between features/paths
               if (this.activeDrawTool && !this.isValidDrawnCreated) {
                 // Check if flatmap features or existing drawn features
-                const validDrawnFeature = clickedItem.featureId || this.existDrawnFeatures.find(
-                  (feature) => feature.id === clickedItem.id
-                )
+                const validDrawnFeature =
+                  clickedItem.featureId ||
+                  this.existDrawnFeatures.find((feature) => feature.id === clickedItem.id);
                 // Only the linestring will have connection
                 if (this.activeDrawTool === 'LineString' && validDrawnFeature) {
-                  const key = clickedItem.featureId ? clickedItem.featureId : clickedItem.id
-                  const nodeLabel = clickedItem.label ? clickedItem.label : `Feature ${clickedItem.id}`
+                  const key = clickedItem.featureId ? clickedItem.featureId : clickedItem.id;
+                  const nodeLabel = clickedItem.label
+                    ? clickedItem.label
+                    : `Feature ${clickedItem.id}`;
                   // Add space before key to make sure properties follows adding order
                   this.connectionEntry[` ${key}`] = Object.assign(
                     { label: nodeLabel },
                     Object.fromEntries(
                       Object.entries(clickedItem)
                         .filter(([key]) => ['featureId', 'models'].includes(key))
-                        .map(([key, value]) => [(key === 'featureId') ? 'id' : key, value])))
+                        .map(([key, value]) => [key === 'featureId' ? 'id' : key, value]),
+                    ),
+                  );
                 }
               }
             }
 
             // Disable popup when drawing
             if (data && data.type !== 'marker' && !this.activeDrawTool) {
-              this.checkAndCreatePopups(payload)
+              this.checkAndCreatePopups(payload);
             }
           } else if (eventType === 'mouseenter' && this.viewingMode !== 'Neuron Connection') {
-            this.currentHover = data.models ? data.models : ''
+            this.currentHover = data.models ? data.models : '';
           }
 
-          this.$emit('resource-selected', payload)
+          this.$emit('resource-selected', payload);
         }
-      }
+      };
     },
     /**
      * The data for connectivity data source is just a placeholder data
@@ -1842,9 +1787,9 @@ export default {
      */
     changeViewingMode: function (modeName) {
       if (modeName) {
-        this.viewingMode = modeName
+        this.viewingMode = modeName;
       }
-      this.manualAbortedOnClose()
+      this.manualAbortedOnClose();
     },
     /**
      * @public
@@ -1875,21 +1820,17 @@ export default {
         const { label } = connectivity;
         labelsContainer.append(capitalise(label));
 
-        if ((i + 1) < connectivityData.length) {
+        if (i + 1 < connectivityData.length) {
           const hr = document.createElement('hr');
           labelsContainer.appendChild(hr);
         }
       });
 
-      this.mapImp.showPopup(
-        geojsonId,
-        labelsContainer,
-        {
-          className: 'custom-popup flatmap-tooltip-popup',
-          positionAtLastClick: false,
-          preserveSelection: true,
-        }
-      );
+      this.mapImp.showPopup(geojsonId, labelsContainer, {
+        className: 'custom-popup flatmap-tooltip-popup',
+        positionAtLastClick: false,
+        preserveSelection: true,
+      });
     },
     /**
      * Function to show connectivity tooltips on the map
@@ -1932,8 +1873,8 @@ export default {
 
             if (anatomicalNodes) {
               const anatomicalNodesString = anatomicalNodes.join('');
-              const foundItem = connectivityData.every((item) =>
-                anatomicalNodesString.indexOf(item.id) !== -1
+              const foundItem = connectivityData.every(
+                (item) => anatomicalNodesString.indexOf(item.id) !== -1,
               );
 
               if (foundItem) {
@@ -1967,10 +1908,7 @@ export default {
         const uniqueConnectivityFeatures = [...new Set(connectivityFeatures)];
         const combinedFeatures = [...featuresToHighlight, ...uniqueConnectivityFeatures];
         const featureIdsToHighlight = this.mapImp.modelFeatureIdList(combinedFeatures);
-        const allFeaturesToHighlight = [
-          ...featureIdsToHighlight,
-          ...geojsonHighlights
-        ];
+        const allFeaturesToHighlight = [...featureIdsToHighlight, ...geojsonHighlights];
 
         this.mapImp.selectGeoJSONFeatures(allFeaturesToHighlight);
       }
@@ -1982,12 +1920,16 @@ export default {
     },
     searchConnectivitiesByReference: async function (resource) {
       const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
-      let featureIds = [];
+      let featureIds;
 
       if (flatmapKnowledge) {
         featureIds = await getReferenceConnectivitiesFromStorage(resource);
       } else {
-        featureIds = await getReferenceConnectivitiesByAPI(this.mapImp, resource, this.flatmapQueries);
+        featureIds = await getReferenceConnectivitiesByAPI(
+          this.mapImp,
+          resource,
+          this.flatmapQueries,
+        );
       }
       return featureIds;
     },
@@ -2004,25 +1946,32 @@ export default {
         data: {
           errorData: errorData,
           errorMessage: ERROR_MESSAGE,
-        }
+        },
       });
     },
-    checkConnectivityTooltipEntry: function(tooltipEntry) {
+    checkConnectivityTooltipEntry: function (tooltipEntry) {
       if (tooltipEntry?.length) {
-        return undefined !== (tooltipEntry.find(entry => entry?.destinations?.length || entry?.components?.length))
+        return (
+          undefined !==
+          tooltipEntry.find((entry) => entry?.destinations?.length || entry?.components?.length)
+        );
       }
-      return false
+      return false;
     },
     changeConnectivitySource: async function (payload) {
       const { entry, connectivitySource } = payload;
       if (entry.mapId === this.mapImp.id) {
-        await this.flatmapQueries.queryForConnectivityNew(this.mapImp, entry.featureId[0], connectivitySource);
+        await this.flatmapQueries.queryForConnectivityNew(
+          this.mapImp,
+          entry.featureId[0],
+          connectivitySource,
+        );
         this.tooltipEntry = this.tooltipEntry.map((tooltip) => {
           if (tooltip.featureId[0] === entry.featureId[0]) {
             return this.flatmapQueries.updateTooltipData(tooltip);
           }
           return tooltip;
-        })
+        });
         if (this.checkConnectivityTooltipEntry(this.tooltipEntry)) {
           this.$emit('connectivity-info-open', this.tooltipEntry);
         }
@@ -2037,58 +1986,57 @@ export default {
     checkAndCreatePopups: async function (data, mapclick = true) {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
-        const features = data.filter(d => d.feature).map(d => d.feature)
+        const features = data.filter((d) => d.feature).map((d) => d.feature);
         if (features.length > 0) {
           if (this.annotationSidebar && this.previousDeletedEvent.type === 'deleted') {
-            this.annotationEntry = [{
-              ...this.previousDeletedEvent,
-              resourceId: this.serverURL
-            }]
-            this.annotationEventCallback({}, { type: 'aborted' })
+            this.annotationEntry = [
+              {
+                ...this.previousDeletedEvent,
+                resourceId: this.serverURL,
+              },
+            ];
+            this.annotationEventCallback({}, { type: 'aborted' });
           }
-          this.annotationEntry = []
-          features.forEach(feature => {
+          this.annotationEntry = [];
+          features.forEach((feature) => {
             this.annotationEntry.push({
               ...feature,
               resourceId: this.serverURL,
               featureId: feature.featureId ? feature.featureId : feature.feature?.id,
-              offline: this.offlineAnnotationEnabled
-            })
+              offline: this.offlineAnnotationEnabled,
+            });
           });
           // Drawn feature annotationEntry will always have length of 1
           if (features[0].feature) {
             // in drawing or edit/delete mode is on or valid drawn
             if (this.activeDrawTool || this.activeDrawMode || this.isValidDrawnCreated) {
-              this.featureAnnotationSubmitted = false
+              this.featureAnnotationSubmitted = false;
               if (this.activeDrawTool) {
-                this.createConnectivityBody()
+                this.createConnectivityBody();
               }
-              this.displayTooltip(
-                features[0].feature.id,
-                centroid(features[0].feature.geometry)
-              )
+              this.displayTooltip(features[0].feature.id, centroid(features[0].feature.geometry));
             } else {
-              this.rollbackAnnotationEvent()
+              this.rollbackAnnotationEvent();
             }
           } else {
             const featureIds = this.annotationEntry
-              .filter(annotation => annotation.featureId && annotation.models)
-              .map(annotation => annotation.models)
+              .filter((annotation) => annotation.featureId && annotation.models)
+              .map((annotation) => annotation.models);
             if (featureIds.length > 0) {
-              this.displayTooltip(featureIds)
+              this.displayTooltip(featureIds);
             }
           }
         } else {
-          this.annotation = {}
+          this.annotation = {};
         }
       }
       // clicking on a connectivity explorer card will be the same as exploration mode
       // the card should be opened without doing other functions
       else if (this.viewingMode === 'Neuron Connection' && mapclick) {
-        const resources = data.map(tooltip => tooltip.resource[0]);
+        const resources = data.map((tooltip) => tooltip.resource[0]);
 
         // filter out paths
-        const featureId = resources.find(resource => !resource.startsWith('ilxtr:'));
+        const featureId = resources.find((resource) => !resource.startsWith('ilxtr:'));
         if (featureId) {
           // fallback if it cannot find in anatomical nodes
           const transformResources = Array.isArray(resources) ? [...resources] : [resources];
@@ -2106,8 +2054,8 @@ export default {
           if (anatomicalNodes?.length) {
             // get the node which match the feature in a location
             // [feature, location]
-            anatomicalNode = anatomicalNodes.find((node) =>
-              JSON.parse(node)[0] === annotationModels
+            anatomicalNode = anatomicalNodes.find(
+              (node) => JSON.parse(node)[0] === annotationModels,
             );
           }
           if (anatomicalNode) {
@@ -2139,7 +2087,7 @@ export default {
 
           const labels = [];
           for (let i = 0; i < uniqueTerms.length; i++) {
-            const foundObj = objectResults.find((obj) => obj.id === uniqueTerms[i])
+            const foundObj = objectResults.find((obj) => obj.id === uniqueTerms[i]);
             if (foundObj) {
               labels.push(foundObj.label);
             }
@@ -2149,13 +2097,14 @@ export default {
             facet: JSON.stringify(uniqueResource),
             facetPropPath: `flatmap.connectivity.source.${this.connectionType.toLowerCase()}`,
             tagLabel: filterItemLabel, // used tagLabel here instead of label since the label and value are different
-            term: this.connectionType
+            term: this.connectionType,
           };
           // check for existing item
-          const isNewFilterItemExist = this.connectivityFilters.some((connectivityfilter) => (
-            connectivityfilter.facet === newConnectivityfilter.facet &&
-            connectivityfilter.facetPropPath === newConnectivityfilter.facetPropPath
-          ));
+          const isNewFilterItemExist = this.connectivityFilters.some(
+            (connectivityfilter) =>
+              connectivityfilter.facet === newConnectivityfilter.facet &&
+              connectivityfilter.facetPropPath === newConnectivityfilter.facetPropPath,
+          );
 
           if (!isNewFilterItemExist) {
             this.connectivityFilters.push(newConnectivityfilter);
@@ -2176,26 +2125,26 @@ export default {
     openConnectivityInfo: async function (data) {
       // load and store knowledge
       loadAndStoreKnowledge(this.mapImp, this.flatmapQueries);
-      let prom1 = []
+      let prom1 = [];
       // Emit placeholders first.
       // This may contain invalid connectivity.
       this.tooltipEntry = data
-        .filter(tooltip => tooltip.resource[0] in this.mapImp.pathways.paths)
+        .filter((tooltip) => tooltip.resource[0] in this.mapImp.pathways.paths)
         .map((tooltip) => {
-          return { title: tooltip.label, featureId: tooltip.resource, ready: false }
-        })
+          return { title: tooltip.label, featureId: tooltip.resource, ready: false };
+        });
       // this should only for flatmap paths not all features
       if (this.tooltipEntry.length) {
         this.$emit('connectivity-info-open', this.tooltipEntry);
 
         // While having placeholders displayed, get details for all paths and then replace.
         for (let index = 0; index < data.length; index++) {
-          prom1.push(await this.getKnowledgeTooltip(data[index]))
+          prom1.push(await this.getKnowledgeTooltip(data[index]));
         }
-        this.tooltipEntry = await Promise.all(prom1)
-        const featureIds = this.tooltipEntry.map(tooltip => tooltip.featureId[0])
+        this.tooltipEntry = await Promise.all(prom1);
+        const featureIds = this.tooltipEntry.map((tooltip) => tooltip.featureId[0]);
         if (featureIds.length > 0) {
-          this.displayTooltip(featureIds)
+          this.displayTooltip(featureIds);
         }
       }
     },
@@ -2206,19 +2155,20 @@ export default {
      */
     updateConnectivityFilters: function (payload) {
       if (!payload.length) return;
-      this.connectivityFilters = payload.filter((filterItem) => (
-        filterItem.facet.toLowerCase() !== 'show all'
-      ));
+      this.connectivityFilters = payload.filter(
+        (filterItem) => filterItem.facet.toLowerCase() !== 'show all',
+      );
     },
     resetConnectivityfilters: function (payload) {
       if (payload.length) {
         // remove not found items
         this.connectivityFilters = this.connectivityFilters.filter((connectivityfilter) =>
-          payload.some((notFoundItem) => (
-            notFoundItem.facetPropPath === connectivityfilter.facetPropPath &&
-            notFoundItem.facet !== connectivityfilter.facet
-          ))
-        )
+          payload.some(
+            (notFoundItem) =>
+              notFoundItem.facetPropPath === connectivityfilter.facetPropPath &&
+              notFoundItem.facet !== connectivityfilter.facet,
+          ),
+        );
       } else {
         // full reset
         this.connectivityFilters = [];
@@ -2226,55 +2176,58 @@ export default {
     },
     getKnowledgeTooltip: async function (data) {
       //require data.resource && data.feature.source
-      const results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
-      let tooltip = await this.flatmapQueries.createTooltipData(this.mapImp, data)
+      const results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data);
+      let tooltip = await this.flatmapQueries.createTooltipData(this.mapImp, data);
       // The line below only creates the tooltip if some data was found on the path
       // the pubmed URLs are in knowledge response.references
-      if ((results && results[0]) || (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)) {
+      if (
+        (results && results[0]) ||
+        (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)
+      ) {
         tooltip['featuresAlert'] = normaliseAlertToStringArray(data.alert);
         tooltip['knowledgeSource'] = getKnowledgeSource(this.mapImp);
         // Map id and uuid to load connectivity information from the map
         tooltip['mapId'] = this.mapImp.mapMetadata.id;
         tooltip['mapuuid'] = this.mapImp.mapMetadata.uuid;
-      // } else {
-      //   tooltip = {
-      //     ...tooltip,
-      //     origins: [data.label],
-      //     originsWithDatasets: [{ id: data.resource[0], name: data.label }],
-      //     components: [],
-      //     componentsWithDatasets: [],
-      //     destinations: [],
-      //     destinationsWithDatasets: [],
-      //   }
-      //   let featureIds = []
-      //   const pathsOfEntities = await this.mapImp.queryPathsForFeatures(data.resource)
-      //   if (pathsOfEntities.length) {
-      //     pathsOfEntities.forEach((path) => {
-      //       featureIds.push(...this.mapImp.pathModelNodes(path))
-      //       const searchResults = this.mapImp.search(path)
-      //       let featureId = undefined;
-      //       for (let i = 0; i < searchResults.results.length; i++) {
-      //         featureId = searchResults.results[i].featureId
-      //         const annotation = this.mapImp.annotation(featureId)
-      //         if (featureId && annotation?.label) break;
-      //       }
-      //       if (featureId) {
-      //         const feature = this.mapImp.featureProperties(featureId)
-      //         if (feature.label && !tooltip.components.includes(feature.label)) {
-      //           tooltip.components.push(feature.label)
-      //           tooltip.componentsWithDatasets.push({ id: feature.models, name: feature.label })
-      //         }
-      //       }
-      //     })
-      //     featureIds = [...new Set(featureIds)].filter(id => id !== data.feature.featureId)
-      //     featureIds.forEach((id) => {
-      //       const feature = this.mapImp.featureProperties(id)
-      //       if (feature.label && !tooltip.destinations.includes(feature.label)) {
-      //         tooltip.destinations.push(feature.label)
-      //         tooltip.destinationsWithDatasets.push({ id: feature.models, name: feature.label })
-      //       }
-      //     })
-      //   }
+        // } else {
+        //   tooltip = {
+        //     ...tooltip,
+        //     origins: [data.label],
+        //     originsWithDatasets: [{ id: data.resource[0], name: data.label }],
+        //     components: [],
+        //     componentsWithDatasets: [],
+        //     destinations: [],
+        //     destinationsWithDatasets: [],
+        //   }
+        //   let featureIds = []
+        //   const pathsOfEntities = await this.mapImp.queryPathsForFeatures(data.resource)
+        //   if (pathsOfEntities.length) {
+        //     pathsOfEntities.forEach((path) => {
+        //       featureIds.push(...this.mapImp.pathModelNodes(path))
+        //       const searchResults = this.mapImp.search(path)
+        //       let featureId = undefined;
+        //       for (let i = 0; i < searchResults.results.length; i++) {
+        //         featureId = searchResults.results[i].featureId
+        //         const annotation = this.mapImp.annotation(featureId)
+        //         if (featureId && annotation?.label) break;
+        //       }
+        //       if (featureId) {
+        //         const feature = this.mapImp.featureProperties(featureId)
+        //         if (feature.label && !tooltip.components.includes(feature.label)) {
+        //           tooltip.components.push(feature.label)
+        //           tooltip.componentsWithDatasets.push({ id: feature.models, name: feature.label })
+        //         }
+        //       }
+        //     })
+        //     featureIds = [...new Set(featureIds)].filter(id => id !== data.feature.featureId)
+        //     featureIds.forEach((id) => {
+        //       const feature = this.mapImp.featureProperties(id)
+        //       if (feature.label && !tooltip.destinations.includes(feature.label)) {
+        //         tooltip.destinations.push(feature.label)
+        //         tooltip.destinationsWithDatasets.push({ id: feature.models, name: feature.label })
+        //       }
+        //     })
+        //   }
       }
       tooltip['ready'] = true;
       return tooltip;
@@ -2284,19 +2237,19 @@ export default {
      */
     popUpCssHacks: function () {
       // Below is a hack to remove flatmap tooltips while popup is open
-      const ftooltip = document.querySelector('.flatmap-tooltip-popup')
-      const popupCloseButton = document.querySelector('.maplibregl-popup-close-button')
-      if (ftooltip) ftooltip.style.display = 'none'
-      popupCloseButton.style.display = 'block'
-      this.$refs.tooltip.$el.style.display = 'flex'
+      const ftooltip = document.querySelector('.flatmap-tooltip-popup');
+      const popupCloseButton = document.querySelector('.maplibregl-popup-close-button');
+      if (ftooltip) ftooltip.style.display = 'none';
+      popupCloseButton.style.display = 'block';
+      this.$refs.tooltip.$el.style.display = 'flex';
       popupCloseButton.onclick = () => {
         /**
          * This event is emitted
          * when a connectivity info (provenance popup) is closed.
          */
         this.$emit('connectivity-info-close');
-        if (ftooltip) ftooltip.style.display = 'block'
-      }
+        if (ftooltip) ftooltip.style.display = 'block';
+      };
     },
     /**
      * @public
@@ -2304,11 +2257,11 @@ export default {
      */
     closeTooltip: function () {
       if (this.$refs.tooltip) {
-        this.$refs.tooltip.$el.style.display = 'none'
+        this.$refs.tooltip.$el.style.display = 'none';
       }
       document.querySelectorAll('.maplibregl-popup').forEach((item) => {
-        item.style.display = 'none'
-      })
+        item.style.display = 'none';
+      });
       this.lastHoveredFeature = null;
     },
     /**
@@ -2320,14 +2273,14 @@ export default {
      */
     showPopup: function (featureId, node, options) {
       // Keeping this as an API
-      let myOptions = options
+      let myOptions = options;
       if (this.mapImp) {
         if (myOptions) {
-          if (!myOptions.className) myOptions.className = 'custom-popup'
+          if (!myOptions.className) myOptions.className = 'custom-popup';
         } else {
-          myOptions = { className: 'custom-popup', positionAtLastClick: true }
+          myOptions = { className: 'custom-popup', positionAtLastClick: true };
         }
-        this.mapImp.showPopup(featureId, node, myOptions)
+        this.mapImp.showPopup(featureId, node, myOptions);
       }
     },
     /**
@@ -2339,7 +2292,7 @@ export default {
      */
     showMarkerPopup: function (featureId, node, options) {
       if (this.mapImp) {
-        this.mapImp.showMarkerPopup(featureId, node, options)
+        this.mapImp.showMarkerPopup(featureId, node, options);
       }
     },
     /**
@@ -2347,34 +2300,28 @@ export default {
      * Function to close minimap.
      */
     closeMinimap: function () {
-      let minimapEl = this.$refs.flatmapContainer.querySelector(
-        '.maplibregl-ctrl-minimap'
-      ) // find minimap
+      let minimapEl = this.$refs.flatmapContainer.querySelector('.maplibregl-ctrl-minimap'); // find minimap
       if (this.minimapSmall) {
         //switch the classes on the minimap
-        minimapEl.classList.add('enlarge')
-        minimapEl.classList.remove('shrink')
+        minimapEl.classList.add('enlarge');
+        minimapEl.classList.remove('shrink');
       } else {
-        minimapEl.classList.add('shrink')
-        minimapEl.classList.remove('enlarge')
+        minimapEl.classList.add('shrink');
+        minimapEl.classList.remove('enlarge');
       }
-      this.minimapSmall = !this.minimapSmall
+      this.minimapSmall = !this.minimapSmall;
     },
     /**
      * Function to add resize button to minimap.
      */
     addResizeButtonToMinimap: function () {
-      let minimapEl = this.$refs.flatmapContainer.querySelector(
-        '.maplibregl-ctrl-minimap'
-      )
+      let minimapEl = this.$refs.flatmapContainer.querySelector('.maplibregl-ctrl-minimap');
       if (minimapEl) {
-        if (this.$refs.minimapResize &&
-        this.$refs.minimapResize.$el.parentNode) {
-          this.$refs.minimapResize.$el.parentNode.removeChild(
-            this.$refs.minimapResize.$el)
+        if (this.$refs.minimapResize && this.$refs.minimapResize.$el.parentNode) {
+          this.$refs.minimapResize.$el.parentNode.removeChild(this.$refs.minimapResize.$el);
         }
-        minimapEl.appendChild(this.$refs.minimapResize.$el)
-        this.minimapResizeShow = true
+        minimapEl.appendChild(this.$refs.minimapResize.$el);
+        this.minimapResizeShow = true;
       }
     },
     /**
@@ -2397,16 +2344,14 @@ export default {
           // Open pathway drawer if the tooltip is inside or beside
           const { parentElement, nextElementSibling } = popoverRef.$el;
           const isPathwayContainer = (element) => {
-            return element && (
-              element.classList.contains('pathway-container') ||
-              element.classList.contains('pathway-location')
+            return (
+              element &&
+              (element.classList.contains('pathway-container') ||
+                element.classList.contains('pathway-location'))
             );
           };
 
-          if (
-            isPathwayContainer(parentElement) ||
-            isPathwayContainer(nextElementSibling)
-          ) {
+          if (isPathwayContainer(parentElement) || isPathwayContainer(nextElementSibling)) {
             if (this.requiresDrawer) {
               this.drawerOpen = true;
             } else {
@@ -2433,7 +2378,7 @@ export default {
       }
 
       if (this.viewingMode !== 'Annotation' && this.helpModeActiveIndex > 9) {
-        this.helpModeActiveIndex = lastIndex
+        this.helpModeActiveIndex = lastIndex;
       }
 
       if (helpMode && this.helpModeActiveIndex >= lastIndex) {
@@ -2449,7 +2394,6 @@ export default {
           item.value = true;
         });
       } else if (helpMode && this.helpModeDialog && toolTipsLength > this.helpModeActiveIndex) {
-
         // Show the map tooltip as first item
         if (this.helpModeActiveIndex > -1) {
           this.closeFlatmapHelpPopup();
@@ -2467,11 +2411,11 @@ export default {
           this.openFlatmapHelpPopup();
         }
       } else {
-        this.inHelp = false
+        this.inHelp = false;
         this.hoverVisibilities.forEach((item) => {
-          item.value = false
-        })
-        this.closeFlatmapHelpPopup()
+          item.value = false;
+        });
+        this.closeFlatmapHelpPopup();
       }
     },
     /**
@@ -2483,14 +2427,14 @@ export default {
      */
     showTooltip: function (tooltipNumber, timeout = 500) {
       if (!this.inHelp) {
-        clearTimeout(this.tooltipWait[tooltipNumber])
+        clearTimeout(this.tooltipWait[tooltipNumber]);
         this.tooltipWait[tooltipNumber] = setTimeout(() => {
-          this.hoverVisibilities[tooltipNumber].value = true
+          this.hoverVisibilities[tooltipNumber].value = true;
           /**
            * This event is emitted after a tooltip in Flatmap is shown.
            */
           this.$emit('shown-tooltip');
-        }, timeout)
+        }, timeout);
       }
     },
 
@@ -2503,10 +2447,10 @@ export default {
      */
     hideTooltip: function (tooltipNumber, timeout = 500) {
       if (!this.inHelp) {
-        clearTimeout(this.tooltipWait[tooltipNumber])
+        clearTimeout(this.tooltipWait[tooltipNumber]);
         this.tooltipWait[tooltipNumber] = setTimeout(() => {
-          this.hoverVisibilities[tooltipNumber].value = false
-        }, timeout)
+          this.hoverVisibilities[tooltipNumber].value = false;
+        }, timeout);
       }
     },
     /**
@@ -2517,30 +2461,31 @@ export default {
      * @arg {String} `geometry` _(default: `undefined`)_
      */
     displayTooltip: function (feature, geometry = undefined) {
-      let featureId = undefined
-      let options = { className: 'flatmapvuer-popover' }
+      let featureId = undefined;
+      let options = { className: 'flatmapvuer-popover' };
       if (geometry) {
-        featureId = feature
-        options.annotationFeatureGeometry = geometry
+        featureId = feature;
+        options.annotationFeatureGeometry = geometry;
         if (this.annotationEntry.length) {
           options['annotationEvent'] = {
             type: this.annotationEntry[0].type,
-            feature: this.annotationEntry[0].feature
-          }
+            feature: this.annotationEntry[0].feature,
+          };
         }
       } else {
-        const entry = Array.isArray(feature) ? feature[0] : feature
+        const entry = Array.isArray(feature) ? feature[0] : feature;
         if (entry) {
-          featureId = this.mapImp.modelFeatureIds(entry)[0]
+          featureId = this.mapImp.modelFeatureIds(entry)[0];
         }
         if (!this.activeDrawTool) {
-          options.positionAtLastClick = true
+          options.positionAtLastClick = true;
         }
       }
       // If connectivityInfoSidebar is set to `true`
       // Connectivity info will show in sidebar
       if (
-        (this.connectivityInfoSidebar && this.tooltipEntry.length) &&
+        this.connectivityInfoSidebar &&
+        this.tooltipEntry.length &&
         this.viewingMode !== 'Annotation'
       ) {
         if (this.checkConnectivityTooltipEntry(this.tooltipEntry)) {
@@ -2548,7 +2493,10 @@ export default {
         }
       }
       if (this.annotationSidebar && this.viewingMode === 'Annotation') {
-        this.$emit('annotation-open', {annotationEntry: this.annotationEntry, commitCallback: this.commitAnnotationEvent});
+        this.$emit('annotation-open', {
+          annotationEntry: this.annotationEntry,
+          commitCallback: this.commitAnnotationEvent,
+        });
       }
       // If UI is not disabled,
       // And connectivityInfoSidebar is not set (default) or set to `false`
@@ -2557,10 +2505,8 @@ export default {
       if (
         featureId &&
         !this.disableUI &&
-        (
-          (this.viewingMode === 'Annotation' && !this.annotationSidebar) ||
-          (this.viewingMode === 'Exploration' && !this.connectivityInfoSidebar)
-        )
+        ((this.viewingMode === 'Annotation' && !this.annotationSidebar) ||
+          (this.viewingMode === 'Exploration' && !this.connectivityInfoSidebar))
       ) {
         this.tooltipDisplay = true;
         this.$nextTick(() => {
@@ -2575,7 +2521,7 @@ export default {
      * because the sidebar is opened
      * @arg featureIds
      */
-     moveMap: function (featureIds, options = {}) {
+    moveMap: function (featureIds, options = {}) {
       if (this.mapImp) {
         const { offsetX = 0, offsetY = 0, zoom = 4 } = options;
         const Map = this.mapImp.map;
@@ -2595,7 +2541,7 @@ export default {
             Map.fitBounds(bbox, {
               offset: [offsetX, offsetY],
               zoom: zoom,
-              animate: true
+              animate: true,
             });
           });
         }
@@ -2607,13 +2553,13 @@ export default {
      */
     openFlatmapHelpPopup: function () {
       if (this.mapImp) {
-        let heartId = this.mapImp.modelFeatureIds('UBERON:0000948')
+        let heartId = this.mapImp.modelFeatureIds('UBERON:0000948');
         if (heartId && heartId.length > 0) {
-          const elm = 'Click for more information'
+          const elm = 'Click for more information';
           this.mapImp.showPopup(heartId[0], elm, {
             anchor: 'top',
             className: 'flatmap-popup-popper',
-          })
+          });
           /**
            * This event is emitted after a tooltip on Flatmap's map is shown.
            */
@@ -2626,24 +2572,22 @@ export default {
      * Function to close Flatmap Help Popup.
      */
     closeFlatmapHelpPopup: function () {
-      this.$el
-        .querySelectorAll('.maplibregl-popup-close-button')
-        .forEach((item) => {
-          item.click()
-        })
+      this.$el.querySelectorAll('.maplibregl-popup-close-button').forEach((item) => {
+        item.click();
+      });
     },
     /**
      * @public
      * Function to get annotation labels.
      */
     getLabels: function () {
-      let labels = []
+      let labels = [];
       if (this.mapImp) {
-        let annotations = this.mapImp.annotations
+        let annotations = this.mapImp.annotations;
         for (let value of annotations.values()) {
-          if (value.label) labels.push(value.label)
+          if (value.label) labels.push(value.label);
         }
-        return Array.from(new Set(labels))
+        return Array.from(new Set(labels));
       }
     },
     /**
@@ -2651,17 +2595,17 @@ export default {
      * the provided argument
      */
     getVisibilityState: function (state) {
-      const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection']
-      refs.forEach(ref => {
-        let comp = this.$refs[ref]
+      const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection'];
+      refs.forEach((ref) => {
+        let comp = this.$refs[ref];
         if (comp) {
-          state[ref] = comp.getState()
+          state[ref] = comp.getState();
         }
-      })
+      });
       if (this.$refs.treeControls) {
         const checkedKeys = this.$refs.treeControls.$refs.regionTree.getCheckedKeys();
         //Only store first level systems (terms without .)
-        state['systemsSelection'] = checkedKeys.filter(term => !term.includes('.'))
+        state['systemsSelection'] = checkedKeys.filter((term) => !term.includes('.'));
       }
     },
     /**
@@ -2669,22 +2613,22 @@ export default {
      * the map with the provided argument
      */
     setVisibilityState: function (state) {
-      const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection']
-      refs.forEach(ref => {
-        const settings = state[ref]
+      const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection'];
+      refs.forEach((ref) => {
+        const settings = state[ref];
         if (settings) {
-          const comp = this.$refs[ref]
+          const comp = this.$refs[ref];
           if (comp) {
-            comp.setState(settings)
+            comp.setState(settings);
           }
         }
-      })
+      });
       if ('systemsSelection' in state) {
         if (this.$refs.treeControls) {
           this.$refs.treeControls.$refs.regionTree.setCheckedKeys(state['systemsSelection']);
           this.systems[0].children.forEach((item) => {
-            this.mapImp.enableSystem(item.key, state['systemsSelection'].includes(item.key))
-          })
+            this.mapImp.enableSystem(item.key, state['systemsSelection'].includes(item.key));
+          });
         }
       }
     },
@@ -2697,25 +2641,25 @@ export default {
         let state = {
           entry: this.entry,
           viewport: this.mapImp.getState(),
-        }
-        const identifier = this.mapImp.getIdentifier()
-        if (this.biologicalSex) state['biologicalSex'] = this.biologicalSex
+        };
+        const identifier = this.mapImp.getIdentifier();
+        if (this.biologicalSex) state['biologicalSex'] = this.biologicalSex;
         else if (identifier && identifier.biologicalSex)
-          state['biologicalSex'] = identifier.biologicalSex
-        if (identifier && identifier.uuid) state['uuid'] = identifier.uuid
-        state['viewingMode'] = this.viewingMode
-        state['searchTerm'] = this.searchTerm
-        state['flightPath3D'] = this.flightPath3DRadio
-        state['colour'] = this.colourRadio
-        state['outlines'] = this.outlinesRadio
-        state['background'] = this.currentBackground
+          state['biologicalSex'] = identifier.biologicalSex;
+        if (identifier && identifier.uuid) state['uuid'] = identifier.uuid;
+        state['viewingMode'] = this.viewingMode;
+        state['searchTerm'] = this.searchTerm;
+        state['flightPath3D'] = this.flightPath3DRadio;
+        state['colour'] = this.colourRadio;
+        state['outlines'] = this.outlinesRadio;
+        state['background'] = this.currentBackground;
         if (this.offlineAnnotationEnabled) {
-          state['offlineAnnotations'] = sessionStorage.getItem('anonymous-annotation')
+          state['offlineAnnotations'] = sessionStorage.getItem('anonymous-annotation');
         }
-        this.getVisibilityState(state)
-        return state
+        this.getVisibilityState(state);
+        return state;
       }
-      return undefined
+      return undefined;
     },
     /**
      * @public
@@ -2730,11 +2674,11 @@ export default {
           this.entry == state.entry &&
           (!state.biologicalSex || state.biologicalSex === this.biologicalSex)
         ) {
-          this.restoreMapState(state)
+          this.restoreMapState(state);
         } else {
-          this.createFlatmap(state)
+          this.createFlatmap(state);
         }
-        this.setStateRequired = false
+        this.setStateRequired = false;
       }
     },
     /**
@@ -2745,21 +2689,21 @@ export default {
      */
     restoreMapState: function (state) {
       if (state) {
-        if (state.viewport) this.mapImp.setState(state.viewport)
+        if (state.viewport) this.mapImp.setState(state.viewport);
         if (state.offlineAnnotations) {
-          sessionStorage.setItem('anonymous-annotation', state.offlineAnnotations)
+          sessionStorage.setItem('anonymous-annotation', state.offlineAnnotations);
         }
-        if (state.viewingMode) this.changeViewingMode(state.viewingMode)
+        if (state.viewingMode) this.changeViewingMode(state.viewingMode);
         //The following three are boolean
-        if ('flightPath3D' in state) this.setFlightPath3D(state.flightPath3D)
-        if ('colour' in state) this.setColour(state.colour)
-        if ('outlines' in state) this.setOutlines(state.outlines)
-        if (state.background) this.backgroundChangeCallback(state.background)
+        if ('flightPath3D' in state) this.setFlightPath3D(state.flightPath3D);
+        if ('colour' in state) this.setColour(state.colour);
+        if ('outlines' in state) this.setOutlines(state.outlines);
+        if (state.background) this.backgroundChangeCallback(state.background);
         if (state.searchTerm) {
-          const searchTerm = state.searchTerm
-          this.searchAndShowResult(searchTerm, true, true)
+          const searchTerm = state.searchTerm;
+          this.searchAndShowResult(searchTerm, true, true);
         }
-        this.setVisibilityState(state)
+        this.setVisibilityState(state);
       }
     },
     /**
@@ -2770,12 +2714,12 @@ export default {
      * @arg {String} `mapVersion`
      */
     setFlightPathInfo: function (mapVersion) {
-      const mapVersionForFlightPath = 1.6
+      const mapVersionForFlightPath = 1.6;
       if (mapVersion === mapVersionForFlightPath || mapVersion > mapVersionForFlightPath) {
         // Show flight path option UI
-        this.displayFlightPathOption = true
+        this.displayFlightPathOption = true;
         // Show 2D as default on FC type
-        this.setFlightPath3D(false)
+        this.setFlightPath3D(false);
       }
     },
     /**
@@ -2786,8 +2730,8 @@ export default {
      */
     createFlatmap: function (state) {
       if (!this.mapImp && !this.loading) {
-        this.loading = true
-        this.flatmapError = null
+        this.loading = true;
+        this.flatmapError = null;
 
         //As for flatmap-viewer@2.2.7, see below for the documentation
         //for the identifier:
@@ -2805,19 +2749,19 @@ export default {
         // @arg identifier.uuid {string} The unique uuid the flatmap. If given then this exact map will
         //  be loaded, overriding ``taxon`` and ``biologicalSex``.
 
-        let identifier = { taxon: this.entry }
+        let identifier = { taxon: this.entry };
         if (this.uuid) {
-          identifier.uuid = this.uuid
+          identifier.uuid = this.uuid;
         }
         //This now handle the uses of uuid when resuming states
         if (state) {
           if (state.uuid) {
-            identifier = { uuid: state.uuid }
+            identifier = { uuid: state.uuid };
           } else if (state.entry) {
-            identifier.taxon = state.entry
+            identifier.taxon = state.entry;
           }
           if (state.biologicalSex) {
-              identifier['biologicalSex'] = state.biologicalSex;
+            identifier['biologicalSex'] = state.biologicalSex;
           } else if (identifier.taxon === 'NCBITaxon:9606') {
             //For backward compatibility
             identifier['biologicalSex'] = 'PATO:0000384';
@@ -2826,69 +2770,67 @@ export default {
           // Set the bioloicalSex now if map is not resumed from
           // a saved state
           if (this.biologicalSex) {
-            identifier['biologicalSex'] = this.biologicalSex
+            identifier['biologicalSex'] = this.biologicalSex;
           }
         }
 
-        let promise1 = this.mapManagerRef.loadMap(
-          identifier,
-          this.eventCallback(),
-          {
-            //fullscreenControl: false,
-            //annotatable: false,
-            //debug: true,
-            minZoom: this.minZoom,
-            tooltips: this.tooltips,
-            minimap: false,
-            container: this.$refs.display,
-            tooltipDelay: 15, // new feature to delay tooltips showing
-          }
-        )
-        promise1.then((returnedObject) => {
-          this.mapImp = returnedObject
-          this.serverURL = this.mapImp.makeServerUrl('').slice(0, -1)
-          let mapVersion = this.mapImp.details.version
-          this.setFlightPathInfo(mapVersion)
-          const stateToSet = this._stateToBeSet ? this._stateToBeSet : state
-          this.onFlatmapReady(stateToSet)
-          this.$nextTick(() => this.restoreMapState(stateToSet))
-        }).catch((error) => {
-          console.error('Flatmap loading error:', error)
-          // prepare error object
-          this.flatmapError = {};
-          if (error.message && error.message.indexOf('Unknown map') !== -1) {
-            this.flatmapError['title'] = 'Unknown Map!';
-            this.flatmapError['messages'] = Object.keys(identifier).map(key => {
-              const keyName = key === 'uuid' ? 'UUID' : capitalise(key);
-              return `${keyName}: ${identifier[key]}`
-            });
-          } else {
-            this.flatmapError['title'] = 'Error Loading Map!';
-            this.flatmapError['messages'] = [
-              error.message ? error.message : error.toString(),
-              'Please try again later or contact support if the problem persists.'
-            ];
-          }
-          if (this.$parent?.$refs?.multiContainer) {
-            // if the flatmap is in a multiflatmapvuer
-            // show a button to load default map
-            const multiFlatmapVuer = this.$parent;
-            this.flatmapError['button'] = {
-              text: 'Load Default Map',
-              callback: () => {
-                const defaultSpecies = multiFlatmapVuer.initial;
-                multiFlatmapVuer.setSpecies(defaultSpecies, undefined, 3);
-              }
-            };
-          }
-          this.loading = false;
-        })
+        let promise1 = this.mapManagerRef.loadMap(identifier, this.eventCallback(), {
+          //fullscreenControl: false,
+          //annotatable: false,
+          //debug: true,
+          minZoom: this.minZoom,
+          tooltips: this.tooltips,
+          minimap: false,
+          container: this.$refs.display,
+          tooltipDelay: 15, // new feature to delay tooltips showing
+        });
+        promise1
+          .then((returnedObject) => {
+            this.mapImp = returnedObject;
+            this.serverURL = this.mapImp.makeServerUrl('').slice(0, -1);
+            let mapVersion = this.mapImp.details.version;
+            this.setFlightPathInfo(mapVersion);
+            const stateToSet = this._stateToBeSet ? this._stateToBeSet : state;
+            this.onFlatmapReady(stateToSet);
+            this.$nextTick(() => this.restoreMapState(stateToSet));
+          })
+          .catch((error) => {
+            console.error('Flatmap loading error:', error);
+            // prepare error object
+            this.flatmapError = {};
+            if (error.message && error.message.indexOf('Unknown map') !== -1) {
+              this.flatmapError['title'] = 'Unknown Map!';
+              this.flatmapError['messages'] = Object.keys(identifier).map((key) => {
+                const keyName = key === 'uuid' ? 'UUID' : capitalise(key);
+                return `${keyName}: ${identifier[key]}`;
+              });
+            } else {
+              this.flatmapError['title'] = 'Error Loading Map!';
+              this.flatmapError['messages'] = [
+                error.message ? error.message : error.toString(),
+                'Please try again later or contact support if the problem persists.',
+              ];
+            }
+            if (this.$parent?.$refs?.multiContainer) {
+              // if the flatmap is in a multiflatmapvuer
+              // show a button to load default map
+              const multiFlatmapVuer = this.$parent;
+              this.flatmapError['button'] = {
+                text: 'Load Default Map',
+                callback: () => {
+                  const defaultSpecies = multiFlatmapVuer.initial;
+                  multiFlatmapVuer.setSpecies(defaultSpecies, undefined, 3);
+                },
+              };
+            }
+            this.loading = false;
+          });
       } else if (state) {
         this._stateToBeSet = {
-          ...state
-        }
+          ...state,
+        };
         if (this.mapImp && !this.loading) {
-          this.restoreMapState(this._stateToBeSet)
+          this.restoreMapState(this._stateToBeSet);
         }
       }
     },
@@ -2897,13 +2839,12 @@ export default {
      * Function to compute path controls maximum height.
      */
     computePathControlsMaximumHeight() {
-      const elem = this.$refs.display
+      const elem = this.$refs.display;
       if (elem) {
-        const computed = getComputedStyle(elem)
-        const padding =
-          parseInt(computed.paddingTop) + parseInt(computed.paddingBottom)
-        const height = elem.clientHeight - padding
-        this.pathwaysMaxHeight = height - 170
+        const computed = getComputedStyle(elem);
+        const padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
+        const height = elem.clientHeight - padding;
+        this.pathwaysMaxHeight = height - 170;
       }
     },
     /**
@@ -2912,66 +2853,71 @@ export default {
      */
     mapResize: function () {
       try {
-        this.computePathControlsMaximumHeight()
+        this.computePathControlsMaximumHeight();
         if (this.mapImp) {
-          this.mapImp.resize()
+          this.mapImp.resize();
         }
       } catch {
-        console.error('Map resize error')
+        console.error('Map resize error');
       }
     },
     getFilterSources: function () {
-      const FILTER_PROPERTIES = ['kind', 'taxons']
-      let withAlert = new Set()
-      let withoutAlert = new Set()
-      let filterSourcesMap = new Map()
+      const FILTER_PROPERTIES = ['kind', 'taxons'];
+      let withAlert = new Set();
+      let withoutAlert = new Set();
+      let filterSourcesMap = new Map();
       for (const annotation of this.mapImp.annotations.values()) {
         if (annotation.source) {
-          if ("alert" in annotation) {
-            withAlert.add(annotation.source)
+          if ('alert' in annotation) {
+            withAlert.add(annotation.source);
           } else {
-            withoutAlert.add(annotation.source)
+            withoutAlert.add(annotation.source);
           }
           for (const [key, value] of Object.entries(annotation)) {
             if (FILTER_PROPERTIES.includes(key)) {
               if (!filterSourcesMap.has(key)) {
-                filterSourcesMap.set(key, new Map())
+                filterSourcesMap.set(key, new Map());
               }
-              const sourceMap = filterSourcesMap.get(key)
+              const sourceMap = filterSourcesMap.get(key);
               const addToSourceMap = (val) => {
-                const setKey = val
+                const setKey = val;
                 if (!sourceMap.has(setKey)) {
-                  sourceMap.set(setKey, new Set())
+                  sourceMap.set(setKey, new Set());
                 }
-                sourceMap.get(setKey).add(`${annotation.source}`)
+                sourceMap.get(setKey).add(`${annotation.source}`);
               };
               if (Array.isArray(value)) {
-                value.forEach(addToSourceMap)
+                value.forEach(addToSourceMap);
               } else {
-                addToSourceMap(value)
+                addToSourceMap(value);
               }
             }
           }
         }
       }
       let filterSources = {
-        'alert': {
-          'with': [...withAlert],
-          'without': [...withoutAlert]
-        }
-      }
+        alert: {
+          with: [...withAlert],
+          without: [...withoutAlert],
+        },
+      };
       for (const [key, value] of filterSourcesMap.entries()) {
-        filterSources[key] = {}
+        filterSources[key] = {};
         for (const [key1, value1] of value.entries()) {
-          filterSources[key][key1] = [...value1.values()]
+          filterSources[key][key1] = [...value1.values()];
         }
       }
-      return filterSources
+      return filterSources;
     },
     getFilterOptions: async function (mapImp, _providedKnowledge) {
       const providedKnowledge = _providedKnowledge || this.getFlatmapKnowledge();
       const providedPathways = this.pathways;
-      const flatmapFilterOptions = await getFlatmapFilterOptions(this.flatmapAPI, mapImp, providedKnowledge, providedPathways);
+      const flatmapFilterOptions = await getFlatmapFilterOptions(
+        this.flatmapAPI,
+        mapImp,
+        providedKnowledge,
+        providedPathways,
+      );
       return flatmapFilterOptions;
     },
     /**
@@ -2980,38 +2926,38 @@ export default {
      */
     onFlatmapReady: function (state) {
       // onFlatmapReady is used for functions that need to run immediately after the flatmap is loaded
-      this.sensor = markRaw(new ResizeSensor(this.$refs.display, this.mapResize))
+      this.sensor = markRaw(new ResizeSensor(this.$refs.display, this.mapResize));
       if (this.mapImp.options?.style === 'functional') {
-        this.isFC = true
-      }
-      this.mapImp.setBackgroundOpacity(1)
-      this.backgroundChangeCallback(this.currentBackground)
-      this.pathways = this.mapImp.pathTypes()
-      this.pathways = this.pathways.filter(path => {
-        return path.enabled && path.type !== 'other'
-      })
+        this.isFC = true;
+      }
+      this.mapImp.setBackgroundOpacity(1);
+      this.backgroundChangeCallback(this.currentBackground);
+      this.pathways = this.mapImp.pathTypes();
+      this.pathways = this.pathways.filter((path) => {
+        return path.enabled && path.type !== 'other';
+      });
       //Disable layers for now
       //this.layers = this.mapImp.getLayers();
-      this.processSystems(this.mapImp.getSystems())
+      this.processSystems(this.mapImp.getSystems());
       //Async, pass the state for checking
-      this.processTaxon(this.mapImp.taxonIdentifiers, state ? state['taxonSelection'] : undefined)
-      this.containsAlert = "alert" in this.mapImp.featureFilterRanges()
-      this.flatmapLegends = this.mapImp.flatmapLegend
-      this.loading = false
-      this.computePathControlsMaximumHeight()
-      this.mapResize()
+      this.processTaxon(this.mapImp.taxonIdentifiers, state ? state['taxonSelection'] : undefined);
+      this.containsAlert = 'alert' in this.mapImp.featureFilterRanges();
+      this.flatmapLegends = this.mapImp.flatmapLegend;
+      this.loading = false;
+      this.computePathControlsMaximumHeight();
+      this.mapResize();
       this.handleMapClick();
       this.setInitMapState();
       if (this.displayMinimap) {
         const minimapOptions = { position: 'top-right' };
         this.mapImp.createMinimap(minimapOptions);
-        this.addResizeButtonToMinimap()
+        this.addResizeButtonToMinimap();
       }
       /**
        * This is ``onFlatmapReady`` event.
        * @arg ``this`` (Component Vue Instance)
        */
-      this.$emit('ready', this)
+      this.$emit('ready', this);
     },
     /**
      * @public
@@ -3021,7 +2967,7 @@ export default {
     handleMapClick: function () {
       const _map = this.mapImp.map;
       if (_map) {
-        _map.on('click', (e) => {
+        _map.on('click', () => {
           if (!this.connectivityDataSource) {
             this.$emit('connectivity-info-close');
           }
@@ -3029,41 +2975,43 @@ export default {
         });
       }
     },
-    onContextLost: function() {
-      this.lastViewport = markRaw(this.mapImp.getState())
+    onContextLost: function () {
+      this.lastViewport = markRaw(this.mapImp.getState());
       this.flatmapError = {};
-      this.flatmapError['title'] = 'GL context lost!'
-      this.flatmapError['messages'] = [`A display issue has occurred due
+      this.flatmapError['title'] = 'GL context lost!';
+      this.flatmapError['messages'] = [
+        `A display issue has occurred due
       to a limit on available WebGL contexts. You can restore the display
       using the Restore Context button. Please see the
       <a href="https://docs.sparc.science/docs/integrated-maps-viewer-overview#limit-on-available-webgl-contexts" target='_blank'>documentation</a>
-      for more details.`]
+      for more details.`,
+      ];
       this.flatmapError['button'] = {
         text: 'Restore Context',
         callback: () => {
-          this.forceContextRestore()
-        }
+          this.forceContextRestore();
+        },
       };
     },
-    onContextRestored: function() {
+    onContextRestored: function () {
       if (this.mapImp) {
-        this.handleMapClick()
-        this.setInitMapState()
-        const lostState = this.getState()
+        this.handleMapClick();
+        this.setInitMapState();
+        const lostState = this.getState();
         if (lostState) {
-          lostState.viewport = this.lastViewport
+          lostState.viewport = this.lastViewport;
         }
-        this.restoreMapState(lostState)
+        this.restoreMapState(lostState);
         if (this.displayMinimap) {
           const minimapOptions = { position: 'top-right' };
           this.mapImp.createMinimap(minimapOptions);
-          this.addResizeButtonToMinimap()
+          this.addResizeButtonToMinimap();
         }
         if (this.filterToRestore) {
-          this.mapImp.setVisibilityFilter(this.filterToRestore)
-          this.filterToRestore = undefined
+          this.mapImp.setVisibilityFilter(this.filterToRestore);
+          this.filterToRestore = undefined;
         }
-        this.$emit('context-restored', this)
+        this.$emit('context-restored', this);
       }
     },
     /**
@@ -3073,7 +3021,7 @@ export default {
      * @arg {Boolean} `flag`
      */
     showPathwaysDrawer: function (flag) {
-      this.drawerOpen = flag
+      this.drawerOpen = flag;
     },
     /**
      * @public
@@ -3086,40 +3034,41 @@ export default {
     searchAndShowResult: function (term, displayInfo, mapclick = true) {
       if (this.mapImp) {
         if (term === undefined || term === '') {
-          this.mapImp.clearSearchResults()
-          if (this.viewingMode === "Exploration") {
+          this.mapImp.clearSearchResults();
+          if (this.viewingMode === 'Exploration') {
             this.$emit('connectivity-info-close');
-          } else if (this.viewingMode === "Annotation") {
-            this.manualAbortedOnClose()
+          } else if (this.viewingMode === 'Annotation') {
+            this.manualAbortedOnClose();
           }
-          this.searchTerm = ""
-          return true
+          this.searchTerm = '';
+          return true;
         } else {
-          const searchResults = this.mapImp.search(term)
+          const searchResults = this.mapImp.search(term);
           if (searchResults?.results?.length) {
-            this.mapImp.showSearchResults(searchResults)
+            this.mapImp.showSearchResults(searchResults);
             if (displayInfo) {
               let featureId = undefined;
               for (let i = 0; i < searchResults.results.length; i++) {
-                featureId = searchResults.results[i].featureId
-                const annotation = this.mapImp.annotation(featureId)
+                featureId = searchResults.results[i].featureId;
+                const annotation = this.mapImp.annotation(featureId);
                 if (featureId && annotation?.label) break;
               }
               if (featureId) {
-                const feature = this.mapImp.featureProperties(featureId)
+                const feature = this.mapImp.featureProperties(featureId);
                 const data = {
                   resource: [feature.models],
                   feature: feature,
                   label: feature.label,
                   provenanceTaxonomy: feature.taxons,
                   alert: normaliseAlertToStringArray(feature.alert),
-                }
+                };
 
                 // Show popup for all modes
-                this.checkAndCreatePopups([data], mapclick)
+                this.checkAndCreatePopups([data], mapclick);
 
                 // Check pathway fetures and set lastHoveredFeature for tooltip content replacement.
-                const isPathwayFeature = (feature.id.startsWith('ilxtr:') || feature.id.startsWith('ilx:'));
+                const isPathwayFeature =
+                  feature.id.startsWith('ilxtr:') || feature.id.startsWith('ilx:');
                 if (isPathwayFeature) {
                   this.lastHoveredFeature = feature;
                   this.lastHoveredFeature.mapUUID = this.mapImp.uuid;
@@ -3132,15 +3081,15 @@ export default {
                   className: isPathwayFeature ? 'flatmap-tooltip-popup' : 'custom-popup',
                   positionAtLastClick: false,
                   preserveSelection: true,
-                })
+                });
               }
             }
-            this.searchTerm = term
-            return true
-          } else this.mapImp.clearSearchResults()
+            this.searchTerm = term;
+            return true;
+          } else this.mapImp.clearSearchResults();
         }
       }
-      return false
+      return false;
     },
     /**
      * @public
@@ -3151,7 +3100,7 @@ export default {
     highlightConnectedPaths: function (paths) {
       if (paths.length) {
         // filter paths for this map
-        const filteredPaths = paths.filter(path => (path in this.mapImp.pathways.paths))
+        const filteredPaths = paths.filter((path) => path in this.mapImp.pathways.paths);
         // this.zoomToFeatures is replaced with selectGeoJSONFeatures to highlight paths
         const featureIdsToHighlight = this.mapImp.modelFeatureIdList(filteredPaths);
         this.mapImp.selectGeoJSONFeatures(featureIdsToHighlight);
@@ -3164,11 +3113,11 @@ export default {
      * @arg {String} `term`
      */
     searchSuggestions: function (term) {
-      if (this.mapImp) return this.mapImp.search(term)
-      return []
+      if (this.mapImp) return this.mapImp.search(term);
+      return [];
     },
     onActionClick: function (data) {
-      EventBus.emit('onActionClick', data)
+      EventBus.emit('onActionClick', data);
     },
     setConnectionType: function (type) {
       this.connectionType = type;
@@ -3286,7 +3235,7 @@ export default {
      * On default, `false`, clicking help will show all tooltips.
      * If `true`, clicking help will show the help-mode-dialog.
      */
-     helpModeDialog: {
+    helpModeDialog: {
       type: Boolean,
       default: false,
     },
@@ -3363,7 +3312,7 @@ export default {
             display: 'Open 3D Human Map',
             key: '3D',
           },
-        ]
+        ];
       },
     },
     /**
@@ -3420,7 +3369,7 @@ export default {
     /**
      * Flag to disable UIs on Map
      */
-     disableUI: {
+    disableUI: {
       type: Boolean,
       default: false,
     },
@@ -3466,7 +3415,7 @@ export default {
     externalLegends: {
       type: Array,
       default: function () {
-        return []
+        return [];
       },
     },
     /**
@@ -3486,7 +3435,7 @@ export default {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
       userApiKey: this.userToken,
-    }
+    };
   },
   data: function () {
     return {
@@ -3525,12 +3474,12 @@ export default {
         { value: false, ref: 'warningPopover' }, // 7
         { value: false, ref: 'whatsNewPopover' }, // 8
         { value: false, ref: 'featuredMarkerPopover' }, // 9
-        { value: false, refs: "toolbarPopover", ref: "editPopover" }, // 10
-        { value: false, refs: "toolbarPopover", ref: "deletePopover" }, // 11
-        { value: false, refs: "toolbarPopover", ref: "pointPopover" }, // 12
-        { value: false, refs: "toolbarPopover", ref: "lineStringPopover" }, // 13
-        { value: false, refs: "toolbarPopover", ref: "polygonPopover" }, // 14
-        { value: false, refs: "toolbarPopover", ref: "connectionPopover" }, // 15
+        { value: false, refs: 'toolbarPopover', ref: 'editPopover' }, // 10
+        { value: false, refs: 'toolbarPopover', ref: 'deletePopover' }, // 11
+        { value: false, refs: 'toolbarPopover', ref: 'pointPopover' }, // 12
+        { value: false, refs: 'toolbarPopover', ref: 'lineStringPopover' }, // 13
+        { value: false, refs: 'toolbarPopover', ref: 'polygonPopover' }, // 14
+        { value: false, refs: 'toolbarPopover', ref: 'connectionPopover' }, // 15
       ],
       helpModeActiveIndex: this.helpModeInitialIndex,
       yellowstar: yellowstar,
@@ -3555,9 +3504,11 @@ export default {
       currentHover: '',
       viewingMode: 'Exploration',
       viewingModes: {
-        'Exploration': 'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources',
-        'Neuron Connection': 'Discover Neuron connections by selecting a neuron and viewing its associated network connections',
-        'Annotation': ['View feature annotations', 'Add, comment on and view feature annotations']
+        Exploration:
+          'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources',
+        'Neuron Connection':
+          'Discover Neuron connections by selecting a neuron and viewing its associated network connections',
+        Annotation: ['View feature annotations', 'Add, comment on and view feature annotations'],
       },
       connectionType: 'All',
       offlineAnnotationEnabled: false,
@@ -3566,15 +3517,7 @@ export default {
       annotatedSource: ['Anyone', 'Me', 'Others'],
       openMapRef: undefined,
       backgroundIconRef: undefined,
-      toolbarOptions: [
-        "Edit",
-        "Delete",
-        "Point",
-        "LineString",
-        "Polygon",
-        "Connection",
-      ],
-      annotator: undefined,
+      toolbarOptions: ['Edit', 'Delete', 'Point', 'LineString', 'Polygon', 'Connection'],
       authorisedUser: undefined,
       activeDrawMode: undefined,
       activeDrawTool: undefined,
@@ -3604,49 +3547,44 @@ export default {
         alert: {
           with: true,
           without: true,
-        }
+        },
       }),
-      searchTerm: "",
+      searchTerm: '',
       taxonLeaveDelay: undefined,
       connectivityFilters: [],
       flatmapLegends: [],
       lastViewport: undefined,
-    }
+    };
   },
   computed: {
     ...mapState(useMainStore, ['userToken']),
     isValidDrawnCreated: function () {
-      return Object.keys(this.drawnCreatedEvent).length > 0
+      return Object.keys(this.drawnCreatedEvent).length > 0;
     },
-    requiresDrawer: function() {
+    requiresDrawer: function () {
       if (this.loading) {
-        this.drawerOpen = false
-        return false
+        return false;
       }
-      if ((this.systems?.length > 0) ||
+      return (
+        this.systems?.length > 0 ||
         (this.containsAlert && this.alertOptions) ||
-        (this.pathways?.length > 0) ||
-        (this.taxonConnectivity?.length > 0) ||
-        (this.legendEntry?.length > 0)
-      ) {
-        this.drawerOpen = true
-        return true
-      }
-      this.drawerOpen = false
-      return false
+        this.pathways?.length > 0 ||
+        this.taxonConnectivity?.length > 0 ||
+        this.legendEntry?.length > 0
+      );
     },
     modeDescription: function () {
-      let description = this.viewingModes[this.viewingMode]
+      let description = this.viewingModes[this.viewingMode];
       if (this.viewingMode === 'Annotation') {
         if (this.authorisedUser) {
-          return description[1]
+          return description[1];
         }
-        return description[0]
+        return description[0];
       }
-      return description
+      return description;
     },
     legendEntry: function () {
-      return [...this.flatmapLegends, ...this.externalLegends]
+      return [...this.flatmapLegends, ...this.externalLegends];
     },
     showDatasetMarkerTooltip: function () {
       return this.hoverVisibilities[9].value;
@@ -3654,11 +3592,17 @@ export default {
   },
   watch: {
     entry: function () {
-      if (!this.state) this.createFlatmap()
+      if (!this.state) this.createFlatmap();
+    },
+    requiresDrawer: {
+      handler: function (value) {
+        this.drawerOpen = value;
+      },
+      immediate: true,
     },
     helpMode: function (newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.setHelpMode(newVal)
+        this.setHelpMode(newVal);
       }
     },
     helpModeActiveItem: function () {
@@ -3669,12 +3613,12 @@ export default {
         this.setHelpMode(this.helpMode);
       }
     },
-    render: function(val) {
+    render: function (val) {
       if (val) {
         if (this.mapImp && this.mapImp.contextLost && !this.loading) {
           this.$nextTick(() => {
-            this.forceContextRestore()
-          })
+            this.forceContextRestore();
+          });
         }
       }
     },
@@ -3682,10 +3626,10 @@ export default {
       handler: function (state, oldVal) {
         if (state !== oldVal) {
           if (this.mapManagerRef) {
-            this.setState(state)
+            this.setState(state);
           } else {
             //this component has not been mounted yet
-            this.setStateRequired = true
+            this.setStateRequired = true;
           }
         }
       },
@@ -3693,27 +3637,27 @@ export default {
       deep: true,
     },
     viewingMode: function (mode) {
-      this.clearAnnotationFeature()
+      this.clearAnnotationFeature();
       if (mode === 'Annotation') {
-        this.loading = true
+        this.loading = true;
         this.annotator.authenticate(this.userToken).then((userData) => {
           if (userData.name && userData.email && userData.canUpdate) {
-            this.authorisedUser = userData
-            this.offlineAnnotationEnabled = false
+            this.authorisedUser = userData;
+            this.offlineAnnotationEnabled = false;
           } else {
-            this.authorisedUser = undefined
-            this.offlineAnnotationEnabled = true
+            this.authorisedUser = undefined;
+            this.offlineAnnotationEnabled = true;
           }
           this.emitOfflineAnnotationUpdate();
-          this.setFeatureAnnotated()
-          this.addAnnotationFeature()
-          this.loading = false
-        })
+          this.setFeatureAnnotated();
+          this.addAnnotationFeature();
+          this.loading = false;
+        });
       }
     },
     disableUI: function (isUIDisabled) {
       if (isUIDisabled) {
-        this.closeTooltip()
+        this.closeTooltip();
       }
     },
     activeDrawTool: function (tool) {
@@ -3753,13 +3697,15 @@ export default {
         canvas.addEventListener('keydown', handleKeyboardEvent);
         canvas.addEventListener('click', handleMouseEvent);
       }
-    }
+    },
   },
   created: function () {
     if (this.mapManager) {
       this.mapManagerRef = this.mapManager;
     } else {
-      this.mapManagerRef = markRaw(new flatmap.MapViewer(this.flatmapAPI, { container: undefined }));
+      this.mapManagerRef = markRaw(
+        new flatmap.MapViewer(this.flatmapAPI, { container: undefined }),
+      );
       /**
        * The event emitted after a new mapManager is loaded.
        * This mapManager can be used to create new flatmaps.
@@ -3768,18 +3714,18 @@ export default {
     }
   },
   mounted: function () {
-    this.openMapRef = shallowRef(this.$refs.openMapRef)
-    this.backgroundIconRef = shallowRef(this.$refs.backgroundIconRef)
-    this.tooltipWait.length = this.hoverVisibilities.length
-    this.flatmapQueries = markRaw(new FlatmapQueries())
-    this.flatmapQueries.initialise(this.flatmapAPI)
+    this.openMapRef = shallowRef(this.$refs.openMapRef);
+    this.backgroundIconRef = shallowRef(this.$refs.backgroundIconRef);
+    this.tooltipWait.length = this.hoverVisibilities.length;
+    this.flatmapQueries = markRaw(new FlatmapQueries());
+    this.flatmapQueries.initialise(this.flatmapAPI);
     if (this.state) {
       //State is set and require to set the state
       if (this.setStateRequired) {
-        this.setState(this.state)
+        this.setState(this.state);
       }
     } else if (this.renderAtMounted) {
-      this.createFlatmap()
+      this.createFlatmap();
     }
     refreshFlatmapKnowledgeCache();
 
@@ -3804,11 +3750,10 @@ export default {
       this.tooltipObserver = null;
     }
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-
 .beta-popovers {
   position: absolute;
   top: 90px;
@@ -4117,7 +4062,7 @@ export default {
   }
 }
 
-:deep(.flatmap-marker-popup){
+:deep(.flatmap-marker-popup) {
   .maplibregl-popup-content {
     padding: 0px;
   }
@@ -4142,7 +4087,9 @@ export default {
   }
 }
 
-.zoomIn, .zoomOut, .fitWindow {
+.zoomIn,
+.zoomOut,
+.fitWindow {
   padding: 4px;
 }
 
@@ -4257,7 +4204,7 @@ export default {
   color: $app-primary-color;
 
   &.open-map-button {
-    margin-bottom:4px;
+    margin-bottom: 4px;
   }
 
   &:hover {
@@ -4381,7 +4328,7 @@ export default {
     position: relative;
 
     &::before {
-      content: "";
+      content: '';
       display: block;
       width: 0;
       height: 0;
@@ -4510,7 +4457,7 @@ export default {
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
-  width: 150px!important;
+  width: 150px !important;
 }
 
 :deep(.flatmap_dropdown) {
@@ -4534,11 +4481,10 @@ export default {
 </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: #8300bf;
+  --el-color-primary-light-5: #cd99e5;
+  --el-color-primary-light-9: #f3e6f9;
   --el-color-primary-dark-2: var(--el-color-primary);
 }
 
@@ -4578,7 +4524,7 @@ export default {
   background: #e0e0e0;
   padding: 2px 4px;
   border-radius: 4px;
-  font-size: .75rem !important;
+  font-size: 0.75rem !important;
   letter-spacing: 1.05px;
 }
 </style>