@abi-software/flatmapvuer 1.5.6 → 1.6.0-beta.1

package/src/components/FlatmapVuer.vue

@@ -257,7 +257,7 @@ Please use `const` to assign meaningful names to them...
           <div
             class="pathway-location"
             :class="{ open: drawerOpen, close: !drawerOpen }"
-            v-show="!(disableUI || isCentreLine)"
+            v-show="!disableUI"
           >
             <div
               class="pathway-container"
@@ -388,17 +388,6 @@ Please use `const` to assign meaningful names to them...
                 ref="taxonSelection"
                 key="taxonSelection"
               />
-              <selections-group
-                v-if="!(isCentreLine || isFC)  && centreLines && centreLines.length > 0"
-                title="Nerves"
-                labelKey="label"
-                identifierKey="key"
-                :selections="centreLines"
-                @changed="centreLinesSelected"
-                @selections-data-changed="onSelectionsDataChanged"
-                ref="centrelinesSelection"
-                key="centrelinesSelection"
-              />
             </div>
             <div
               @click="toggleDrawer"
@@ -519,8 +508,8 @@ Please use `const` to assign meaningful names to them...
               class="flatmap-radio"
               @change="setFlightPath3D"
             >
-            <el-radio :label="false">2D</el-radio>
-            <el-radio :label="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>
@@ -531,8 +520,8 @@ Please use `const` to assign meaningful names to them...
               class="flatmap-radio"
               @change="setColour"
             >
-              <el-radio :label="true">Colour</el-radio>
-              <el-radio :label="false">Greyscale</el-radio>
+              <el-radio :value="true">Colour</el-radio>
+              <el-radio :value="false">Greyscale</el-radio>
             </el-radio-group>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
@@ -543,8 +532,8 @@ Please use `const` to assign meaningful names to them...
               class="flatmap-radio"
               @change="setOutlines"
             >
-              <el-radio :label="true">Show</el-radio>
-              <el-radio :label="false">Hide</el-radio>
+              <el-radio :value="true">Show</el-radio>
+              <el-radio :value="false">Hide</el-radio>
             </el-radio-group>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
@@ -634,7 +623,7 @@ Please use `const` to assign meaningful names to them...
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { shallowRef, markRaw } from 'vue'
+import { inject, provide, shallowRef, markRaw } from 'vue'
 import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
@@ -658,8 +647,9 @@ import {
 import flatmapMarker from '../icons/flatmap-marker'
 import {
   FlatmapQueries,
-  findTaxonomyLabel,
+  findTaxonomyLabels,
 } from '../services/flatmapQueries.js'
+import { capitalise } from './utilities.js'
 import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
 import * as flatmap from '@abi-software/flatmap-viewer'
@@ -717,28 +707,6 @@ const processFTUs = (parent, key) => {
   return ftus
 }
 
-const processSystems = (systems) => {
-  const allSystems = []
-  if (systems && systems.length > 0) {
-    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)
-    })
-
-    allSystems.push(data)
-  }
-
-  return allSystems
-}
-
 const createUnfilledTooltipData = function () {
   return {
     destinations: [],
@@ -784,10 +752,23 @@ export default {
     this.setStateRequired = false
   },
   setup(props) {
-    const annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
+    let annotator = inject('$annotator')
+    if (!annotator) {
+      annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
+      provide('$annotator', annotator)
+    }
     return { annotator }
   },
   methods: {
+    /**
+     * @public
+     * 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' })
+    },
     /**
      * @public
      * Function to initialise drawing.
@@ -804,6 +785,7 @@ export default {
      */
     cancelDrawnFeature: function () {
       if (this.isValidDrawnCreated) {
+        if (this.annotationSidebar) this.$emit("annotation-close")
         this.closeTooltip()
         this.annotationEntry = {
           ...this.drawnCreatedEvent.feature,
@@ -861,17 +843,13 @@ export default {
      * @arg {String} `name`
      */
     toolbarEvent: function (type, name) {
-      this.closeTooltip()
+      this.manualAbortedOnClose()
       this.doubleClickedFeature = false
       this.connectionEntry = {}
       if (type === 'mode') {
         // Deselect any feature when draw mode is changed
         this.changeAnnotationDrawMode({ mode: 'simple_select' })
         this.activeDrawMode = name
-        // rollback modified feature when exit edit/delete mode
-        if (Object.keys(this.annotationEntry).length > 0 && !this.featureAnnotationSubmitted) {
-          this.rollbackAnnotationEvent()
-        }
       } else if (type === 'tool') {
         if (name) {
           const tool = name.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
@@ -990,12 +968,11 @@ export default {
         this.featureAnnotationSubmitted = true
         this.mapImp.commitAnnotationEvent(this.annotationEntry)
         if (this.annotationEntry.type === 'deleted') {
+          if (this.annotationSidebar) this.$emit("annotation-close")
           this.closeTooltip()
           this.annotationEntry = {}
-        } else {
-          // Update 'existDrawnFeatures' when created or updated event
-          this.addAnnotationFeature()
         }
+        this.addAnnotationFeature()
       }
     },
     /**
@@ -1088,6 +1065,7 @@ export default {
     setDrawnType: function (flag) {
       this.drawnType = flag
       if (this.mapImp) {
+        this.manualAbortedOnClose()
         this.addAnnotationFeature()
         this.initialiseDrawing()
       }
@@ -1100,6 +1078,7 @@ export default {
     setAnnotatedType: function (flag) {
       this.annotatedType = flag
       if (this.mapImp) {
+        this.manualAbortedOnClose()
         this.addAnnotationFeature()
       }
     },
@@ -1166,7 +1145,6 @@ export default {
           if (children.length > 0) child.children = children
           data.children.push(child)
         })
-
         this.systems.push(data)
       }
     },
@@ -1177,14 +1155,22 @@ export default {
      * @arg {String} `flatmapAPI`,
      * @arg {Array} `taxonIdentifiers`
      */
-    processTaxon: function (flatmapAPI, taxonIdentifiers) {
+    processTaxon: function (taxonIdentifiers, state) {
       this.taxonConnectivity.length = 0
-      taxonIdentifiers.forEach((taxon) => {
-        findTaxonomyLabel(flatmapAPI, taxon).then((value) => {
-          const item = { taxon, label: value }
-          this.taxonConnectivity.push(item)
-        })
-      })
+      findTaxonomyLabels(this.mapImp, taxonIdentifiers).then((entityLabels) => {
+        if (entityLabels.length) {
+          entityLabels.forEach((entityLabel) => {
+            let enabled = true
+            if (state) {
+              enabled = state.checkAll ? true : state.checked.includes(entityLabel.taxon)
+            }
+            this.taxonConnectivity.push({...entityLabel, enabled});
+            if (this.mapImp) {
+              this.mapImp.enableConnectivityByTaxonIds(entityLabel.taxon, enabled)
+            }
+          });
+        }
+      });
     },
     /**
      * @public
@@ -1202,7 +1188,7 @@ export default {
     setColour: function (flag) {
       this.colourRadio = flag
       if (this.mapImp) {
-        this.mapImp.setColour({ colour: flag, outline: this.outlinesRadio })
+        this.mapImp.setPaint({ colour: flag, outline: this.outlinesRadio })
       }
     },
     /**
@@ -1212,9 +1198,25 @@ export default {
      * @arg {Boolean} `flag`
      */
     setOutlines: function (flag) {
-      this.outlineRadio = flag
+      this.outlinesRadio = flag
+      if (this.mapImp) {
+        this.mapImp.setPaint({ colour: this.colourRadio, outline: flag })
+      }
+    },
+    setInitMapState: function () {
       if (this.mapImp) {
-        this.mapImp.setColour({ colour: this.colourRadio, outline: flag })
+        const map = this.mapImp._map;
+        const bounds = this.mapImp.options.bounds;
+        const initBounds = [
+          [bounds[0], bounds[1]],
+          [bounds[2], bounds[3]]
+        ];
+
+        map.setMaxBounds(null); // override default
+
+        this.initMapState = {
+          initBounds,
+        };
       }
     },
     /**
@@ -1224,9 +1226,18 @@ export default {
      */
     resetView: function () {
       if (this.mapImp) {
-        this.mapImp.resetMap()
-        if (this.$refs.centrelinesSelection) {
-          this.$refs.centrelinesSelection.reset()
+        // fit to window
+        const map = this.mapImp._map;
+        const { initBounds } = this.initMapState;
+        // reset rotation
+        map.resetNorthPitch({
+          animate: false,
+        });
+        if (initBounds) {
+          // reset zoom and position
+          map.fitBounds(initBounds, {
+            animate: false
+          });
         }
         if (this.$refs.skcanSelection) {
           this.$refs.skcanSelection.reset()
@@ -1262,18 +1273,6 @@ export default {
         this.mapImp.zoomOut()
       }
     },
-    /**
-     * @public
-     * Function to show or hide centrelines and nodes.
-     * The parameter ``payload`` is an object with a boolean property, ``value``,
-     * ``payload.value = true/false``.
-     * @arg {Object} `payload`
-     */
-    centreLinesSelected: function (payload) {
-      if (this.mapImp) {
-        this.mapImp.enableCentrelines(payload.value)
-      }
-    },
     onSelectionsDataChanged: function (data) {
       this.$emit('pathway-selection-changed', data);
     },
@@ -1314,7 +1313,7 @@ export default {
         let pathFeatures = paths.map((p) => this.mapImp.featureProperties(p))
 
         // Query the flatmap knowledge graph for connectivity, we use this to grab the origins
-        let connectivity = await this.flatmapQueries.queryForConnectivity(payload)
+        let connectivity = await this.flatmapQueries.queryForConnectivityNew(this.mapImp, payload)
 
         // Check and flatten the origins node graph
         let originsFlat = connectivity?.ids?.dendrites?.flat().flat()
@@ -1582,8 +1581,12 @@ export default {
         // Rollback drawing when no new annotation submitted
         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.annotationEventCallback({}, { type: 'aborted' })
+        }
       } else if (data.type === 'selectionChanged') {
         this.selectedDrawnFeature = data.feature.features.length === 0 ?
           undefined : data.feature.features[0]
@@ -1616,6 +1619,8 @@ export default {
         if (data.type === 'created') this.drawnCreatedEvent = payload
         else this.checkAndCreatePopups(payload)
       }
+      if (data.type === 'deleted') this.previousDeletedEvent = data
+      else this.previousDeletedEvent = {}
     },
     /**
      * @public
@@ -1660,6 +1665,9 @@ export default {
             }
             if (eventType === 'click') {
               this.featuresAlert = data.alert
+              //The following will be used to track either a feature is selected
+              this.statesTracking.activeClick = true
+              this.statesTracking.activeTerm = data?.models
               if (this.viewingMode === 'Neuron Connection') {
                 this.highlightConnectedPaths([data.models])
               } else {
@@ -1717,7 +1725,123 @@ export default {
       if (modeName) {
         this.viewingMode = modeName
       }
-      this.closeTooltip()
+      this.manualAbortedOnClose()
+    },
+    /**
+     * @public
+     * Function to remove active tooltips on map.
+     */
+    removeActiveTooltips: function () {
+      const tooltips = this.$el.querySelectorAll('.flatmap-tooltip-popup');
+      tooltips.forEach((tooltip) => tooltip.remove());
+    },
+    /**
+     * Function to create tooltip for the provided connectivity data.
+     * @arg {Array} `connectivityData`
+     */
+    createTooltipForConnectivity: function (connectivityData) {
+      // combine all labels to show together
+      // content type must be DOM object to use HTML
+      const labelsContainer = document.createElement('div');
+      labelsContainer.classList.add('flatmap-feature-label');
+
+      connectivityData.forEach((connectivity, i) => {
+        const { label } = connectivity;
+        labelsContainer.append(capitalise(label));
+
+        if ((i + 1) < connectivityData.length) {
+          const hr = document.createElement('hr');
+          labelsContainer.appendChild(hr);
+        }
+      });
+
+      this.mapImp.showPopup(
+        connectivityData[0].featureId,
+        labelsContainer,
+        {
+          className: 'custom-popup flatmap-tooltip-popup',
+          positionAtLastClick: false,
+          preserveSelection: true,
+        }
+      );
+    },
+    /**
+     * Function to show connectivity tooltips on the map
+     * and highlight the nerve.
+     * @arg {Object} `payload`
+     */
+    showConnectivityTooltips: function (payload) {
+      const { connectivityInfo, data } = payload;
+      const featuresToHighlight = [];
+      const connectivityData = [];
+      const filteredConnectivityData = [];
+      const errorData = [];
+
+      if (!data.length) {
+        // Close all tooltips on the current flatmap element
+        this.removeActiveTooltips();
+      } else {
+        data.forEach((item) => {
+          connectivityData.push({
+            id: item.id,
+            label: item.label,
+          });
+        });
+      }
+
+      // to keep the highlighted path on map
+      if (connectivityInfo && connectivityInfo.featureId) {
+        featuresToHighlight.push(...connectivityInfo.featureId);
+      }
+
+      // search the features on the map first
+      if (this.mapImp) {
+        connectivityData.forEach((connectivity, i) => {
+          const {id, label} = connectivity;
+          const response = this.mapImp.search(id);
+
+          if (response?.results.length) {
+            const featureId = response?.results[0].featureId;
+
+            filteredConnectivityData.push({
+              featureId,
+              id,
+              label,
+            });
+            featuresToHighlight.push(id);
+          } else {
+            errorData.push(connectivity);
+          }
+        });
+
+        if (filteredConnectivityData.length) {
+          // show tooltip of the first item
+          // with all labels
+          this.createTooltipForConnectivity(filteredConnectivityData);
+        } else {
+          errorData.push(...connectivityData);
+          // Close all tooltips on the current flatmap element
+          this.removeActiveTooltips();
+        }
+
+        // Emit error message for connectivity graph
+        if (errorData.length) {
+          this.emitConnectivityGraphError(errorData);
+        }
+
+        // highlight all available features
+        this.mapImp.zoomToFeatures(featuresToHighlight, { noZoomIn: true });
+      }
+    },
+    emitConnectivityGraphError: function (errorData) {
+      const errorMessage = 'cannot be found on the map!';
+
+      this.$emit('connectivity-graph-error', {
+        data: {
+          errorData: errorData,
+          errorMessage: errorMessage,
+        }
+      });
     },
     /**
      * @public
@@ -1729,6 +1853,13 @@ export default {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
         if (data.feature) {
+          if (this.annotationSidebar && this.previousDeletedEvent.type === 'deleted') {
+            this.annotationEntry = {
+              ...this.previousDeletedEvent,
+              resourceId: this.serverURL
+            }
+            this.annotationEventCallback({}, { type: 'aborted' })
+          }
           this.annotationEntry = {
             ...data.feature,
             resourceId: this.serverURL,
@@ -1744,7 +1875,9 @@ export default {
             ) {
               this.featureAnnotationSubmitted = false
               this.annotationEntry.featureId = data.feature.feature.id
-              if (this.activeDrawTool) this.createConnectivityBody()
+              if (this.activeDrawTool) {
+                this.createConnectivityBody()
+              }
               this.displayTooltip(
                 data.feature.feature.id,
                 centroid(data.feature.feature.geometry)
@@ -1757,13 +1890,13 @@ export default {
           this.annotation = {}
         }
       } else {
+        //require data.resource && data.feature.source
         let results =
-          await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(data)
+          await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
         // The line below only creates the tooltip if some data was found on the path
-        // result 0 is the connection, result 1 is the pubmed results from flatmap
+        // the pubmed URLs are in knowledge response.references
         if (
-          results[0] ||
-          results[1] ||
+          (results && results[0]) ||
           (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)
         ) {
           this.resourceForTooltip = data.resource[0]
@@ -1807,7 +1940,7 @@ export default {
      * @arg {Object} `data`
      */
     createTooltipFromNeuronCuration: async function (data) {
-      this.tooltipEntry = await this.flatmapQueries.createTooltipData(data)
+      this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
       this.displayTooltip(data.resource[0])
     },
     /**
@@ -2027,6 +2160,9 @@ export default {
         }
         this.$emit('connectivity-info-open', this.tooltipEntry);
       }
+      if (this.annotationSidebar && this.viewingMode === 'Annotation') {
+        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`
       // Provenance popup will be shown on map
@@ -2035,6 +2171,7 @@ export default {
         !this.disableUI && (
           (
             this.viewingMode === 'Annotation' &&
+            !this.annotationSidebar &&
             this.userInformation
           ) ||
           (
@@ -2146,6 +2283,48 @@ export default {
         return Array.from(new Set(labels))
       }
     },
+    /**
+     * Function to get and store the state (object) of the map in
+     * the provided argument
+     */
+    getVisibilityState: function (state) {
+      const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection']
+      refs.forEach(ref => {
+        let comp = this.$refs[ref]
+        if (comp) {
+          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('.'))
+      }
+    },
+    /**
+     * Function to set and restore the visibility state (object) of
+     * the map with the provided argument
+     */
+    setVisibilityState: function (state) {
+      const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection']
+      refs.forEach(ref => {
+        const settings = state[ref]
+        if (settings) {
+          const comp = this.$refs[ref]
+          if (comp) {
+            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))
+          })
+        }
+      }
+    },
     /**
      * @public
      * Function to get the state (object) of the map.
@@ -2161,6 +2340,13 @@ export default {
         else if (identifier && identifier.biologicalSex)
           state['biologicalSex'] = identifier.biologicalSex
         if (identifier && identifier.uuid) state['uuid'] = identifier.uuid
+        state['viewingMode'] = this.viewingMode
+        state['searchTerm'] = this.statesTracking.activeTerm
+        state['flightPath3D'] = this.flightPath3DRadio
+        state['colour'] = this.colourRadio
+        state['outlinesRadio'] = this.outlinesRadio
+        state['background'] = this.currentBackground
+        this.getVisibilityState(state)
         return state
       }
       return undefined
@@ -2178,9 +2364,7 @@ export default {
           this.entry == state.entry &&
           (!state.biologicalSex || state.biologicalSex === this.biologicalSex)
         ) {
-          if (state.viewport) {
-            this.mapImp.setState(state.viewport)
-          }
+          this.restoreMapState(state)
         } else {
           this.createFlatmap(state)
         }
@@ -2196,7 +2380,33 @@ export default {
     restoreMapState: function (state) {
       if (state) {
         if (state.viewport) this.mapImp.setState(state.viewport)
-        if (state.searchTerm) this.searchAndShowResult(state.searchTerm, true)
+        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 (state.searchTerm) {
+          const searchTerm = state.searchTerm
+          this.searchAndShowResult(searchTerm, true)
+          if (state.viewingMode === "Neuron Connection") {
+            this.highlightConnectedPaths([searchTerm])
+          } else {
+            const geoID = this.mapImp.modelFeatureIds(searchTerm)
+            if (geoID.length > 0) {
+              const feature = this.mapImp.featureProperties(geoID[0])
+              this.searchAndShowResult(searchTerm, true)
+              const data = {
+                resource: [feature.source],
+                feature,
+                label: feature.label,
+                provenanceTaxonomy: feature.taxons
+              }
+              this.checkAndCreatePopups(data)
+            }
+          }
+        }
+        this.setVisibilityState(state)
       }
     },
     /**
@@ -2289,16 +2499,13 @@ export default {
           this.serverURL = this.mapImp.makeServerUrl('').slice(0, -1)
           let mapVersion = this.mapImp.details.version
           this.setFlightPathInfo(mapVersion)
-          this.onFlatmapReady()
-          if (this._stateToBeSet) this.restoreMapState(this._stateToBeSet)
-          else {
-            this.restoreMapState(state)
-          }
+          const stateToSet = this._stateToBeSet ? this._stateToBeSet : state
+          this.onFlatmapReady(stateToSet)
+          this.$nextTick(() => this.restoreMapState(stateToSet))
         })
       } else if (state) {
         this._stateToBeSet = {
-          viewport: state.viewport,
-          searchTerm: state.searchTerm,
+          ...state
         }
         if (this.mapImp && !this.loading)
           this.restoreMapState(this._stateToBeSet)
@@ -2340,32 +2547,28 @@ export default {
      * @public
      * This function is used for functions that need to run immediately after the flatmap is loaded.
      */
-    onFlatmapReady: function () {
+    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))
-      console.log(this.mapImp.options)
       if (this.mapImp.options?.style === 'functional') {
         this.isFC = true
-      } else if (this.mapImp.options?.style === 'centreline') {
-        this.isCentreLine = true
       }
       this.mapImp.setBackgroundOpacity(1)
       this.backgroundChangeCallback(this.currentBackground)
       this.pathways = this.mapImp.pathTypes()
-      if (!this.isCentreLine) {
-        this.mapImp.enableCentrelines(false)
-      }
       //Disable layers for now
       //this.layers = this.mapImp.getLayers();
       this.processSystems(this.mapImp.getSystems())
-      this.processTaxon(this.flatmapAPI, this.mapImp.taxonIdentifiers)
+      //Async, pass the state for checking
+      this.processTaxon(this.mapImp.taxonIdentifiers, state ? state['taxonSelection'] : undefined)
       this.containsAlert = "alert" in this.mapImp.featureFilterRanges()
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
-      this.drawerOpen = !this.isCentreLine
+      this.drawerOpen = true;
       this.mapResize()
       this.handleMapClick();
+      this.setInitMapState();
       /**
        * This is ``onFlatmapReady`` event.
        * @arg ``this`` (Component Vue Instance)
@@ -2379,9 +2582,15 @@ export default {
      */
     handleMapClick: function () {
       const _map = this.mapImp._map;
-
       if (_map) {
         _map.on('click', (e) => {
+          //A little logic to make sure we are keeping track
+          //of selected term
+          if (this.statesTracking.activeClick) {
+            this.statesTracking.activeClick = false
+          } else {
+            this.statesTracking.activeTerm = ""
+          }
           if (this.tooltipEntry.featureId) {
             this.$emit('connectivity-info-close');
           }
@@ -2417,6 +2626,7 @@ export default {
       if (this.mapImp) {
         if (term === undefined || term === '') {
           this.mapImp.clearSearchResults()
+          this.statesTracking.activeTerm = ""
           return true
         } else {
           const searchResults = this.mapImp.search(term)
@@ -2425,6 +2635,7 @@ export default {
             searchResults.results &&
             searchResults.results.length > 0
           ) {
+            this.statesTracking.activeTerm = term
             this.mapImp.showSearchResults(searchResults)
             if (
               displayLabel &&
@@ -2488,7 +2699,7 @@ export default {
      */
     minZoom: {
       type: Number,
-      default: 4,
+      default: 1,
     },
     /**
      * The option to add another feature label _(`FeatureSmallSymbolLayer`)_
@@ -2645,12 +2856,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to show annotation in sidebar
+     */
+    annotationSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     return {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
-      $annotator: this.annotator,
       getFeaturesAlert: () => this.featuresAlert,
       userApiKey: this.userToken,
     }
@@ -2668,19 +2885,13 @@ export default {
       serverURL: undefined,
       layers: [],
       pathways: [],
+      initMapState: {},
       sckanDisplay: [
         {
           label: 'Display Path with SCKAN',
           key: 'VALID',
         },
       ],
-      centreLines: [
-        {
-          label: 'Display Nerves',
-          key: 'centrelines',
-          enabled: false,
-        },
-      ],
       systems: [],
       taxonConnectivity: [],
       pathwaysMaxHeight: 1000,
@@ -2706,7 +2917,6 @@ export default {
       helpModeActiveIndex: this.helpModeInitialIndex,
       yellowstar: yellowstar,
       isFC: false,
-      isCentreLine: false,
       inHelp: false,
       currentBackground: 'white',
       availableBackground: ['white', 'lightskyblue', 'black'],
@@ -2751,6 +2961,7 @@ export default {
       activeDrawTool: undefined,
       featureAnnotationSubmitted: false,
       drawnCreatedEvent: {},
+      previousDeletedEvent: {},
       connectionEntry: {},
       existDrawnFeatures: [], // Store all exist drawn features
       doubleClickedFeature: false,
@@ -2772,7 +2983,11 @@ export default {
           with: true,
           without: true,
         }
-      })
+      }),
+      statesTracking: markRaw({
+        activeClick: false,
+        activeTerm: "",
+      }),
     }
   },
   computed: {
@@ -2820,9 +3035,7 @@ export default {
             this.showAnnotator(true)
             this.userInformation = userData
             this.setFeatureAnnotated()
-            if (this.existDrawnFeatures.length === 0) {
-              this.addAnnotationFeature()
-            }
+            this.addAnnotationFeature()
           }
           this.loading = false
         })
@@ -2920,6 +3133,11 @@ export default {
   left: 0px;
   transform: translateX(0);
   transition: all var(--el-transition-duration);
+  z-index: 99;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
   &.open {
     transform: translateX(0);
   }
@@ -3465,7 +3683,6 @@ export default {
   }
 }
 
-.open-drawer,
 .drawer-button {
   z-index: 8;
   width: 20px;
@@ -3475,18 +3692,6 @@ export default {
   vertical-align: middle;
   cursor: pointer;
   pointer-events: auto;
-}
-
-.open-drawer {
-  position: absolute;
-  left: 0px;
-  background-color: #f7faff;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-}
-
-.drawer-button {
-  float: left;
-  margin-top: calc(50% - 36px);
   background-color: #f9f2fc;
 
   i {