@abi-software/flatmapvuer 1.9.0-beta.0 → 1.9.0-beta.2

package/src/components/FlatmapVuer.vue

@@ -592,6 +592,7 @@ Please use `const` to assign meaningful names to them...
         :tooltipEntry="tooltipEntry"
         :annotationDisplay="viewingMode === 'Annotation'"
         @annotation="commitAnnotationEvent"
+        @onActionClick="onActionClick"
       />
     </div>
   </div>
@@ -641,6 +642,7 @@ import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
 import { DrawToolbar, Tooltip, TreeControls } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
+import EventBus from './EventBus.js'
 
 const ERROR_MESSAGE = 'cannot be found on the map.';
 
@@ -696,18 +698,6 @@ const processFTUs = (parent, key) => {
   return ftus
 }
 
-const createUnfilledTooltipData = function () {
-  return {
-    destinations: [],
-    origins: [],
-    components: [],
-    destinationsWithDatasets: [],
-    originsWithDatasets: [],
-    componentsWithDatasets: [],
-    resource: undefined,
-  }
-}
-
 /**
  * A vue component of the flatmap viewer.
  */
@@ -777,10 +767,10 @@ export default {
       if (this.isValidDrawnCreated) {
         if (this.annotationSidebar) this.$emit("annotation-close")
         this.closeTooltip()
-        this.annotationEntry = {
+        this.annotationEntry = [{
           ...this.drawnCreatedEvent.feature,
           resourceId: this.serverURL,
-        }
+        }]
         this.rollbackAnnotationEvent()
         this.initialiseDrawing()
       }
@@ -798,7 +788,7 @@ export default {
             ? this.mapImp.featureProperties(numericId)
             : { feature: this.existDrawnFeatures.find(feature => feature.id === value.trim()) };
           let payload = { feature: featureObject }
-          this.checkAndCreatePopups(payload)
+          this.checkAndCreatePopups([payload])
         } else {
           this.closeTooltip()
         }
@@ -810,12 +800,12 @@ export default {
      */
     confirmDrawnFeature: function () {
       if (this.isValidDrawnCreated) {
-        this.checkAndCreatePopups(this.drawnCreatedEvent)
+        this.checkAndCreatePopups([this.drawnCreatedEvent])
         // Add connection if exist to annotationEntry
         // Connection will only be added in creating new drawn feature annotation
         // And will not be updated if move drawn features
         if (Object.keys(this.connectionEntry).length > 0) {
-          this.annotationEntry.feature.connection = this.connectionEntry
+          this.annotationEntry[0].feature.connection = this.connectionEntry
         }
         this.initialiseDrawing()
       }
@@ -882,7 +872,7 @@ export default {
           target: features[features.length - 1],
           intermediates: features.filter((f, index) => index !== 0 && index !== features.length - 1),
         }
-        this.annotationEntry.body = body
+        this.annotationEntry[0].body = body
       }
     },
     /**
@@ -925,10 +915,11 @@ export default {
       // For 'updated' and 'deleted' callback
       if (
         this.mapImp &&
-        ['created', 'updated', 'deleted'].includes(this.annotationEntry.type)
+        this.annotationEntry.length > 0 &&
+        ['created', 'updated', 'deleted'].includes(this.annotationEntry[0].type)
       ) {
-        this.mapImp.rollbackAnnotationEvent(this.annotationEntry)
-        this.annotationEntry = {}
+        this.mapImp.rollbackAnnotationEvent(this.annotationEntry[0])
+        this.annotationEntry = []
       }
     },
     /**
@@ -941,23 +932,23 @@ export default {
         if (this.offlineAnnotationEnabled) {
           this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || []
           this.offlineAnnotations.push(annotation)
-          if (this.annotationEntry.type === 'deleted') {
+          if (this.annotationEntry[0].type === 'deleted') {
             this.offlineAnnotations = this.offlineAnnotations.filter((offline) => {
               return offline.resource !== this.serverURL || offline.item.id !== annotation.item.id
             })
           }
           sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations))
         }
-        if (['created', 'updated', 'deleted'].includes(this.annotationEntry.type)) {
+        if (['created', 'updated', 'deleted'].includes(this.annotationEntry[0].type)) {
           this.featureAnnotationSubmitted = true
-          this.mapImp.commitAnnotationEvent(this.annotationEntry)
+          this.mapImp.commitAnnotationEvent(this.annotationEntry[0])
           if (annotation.body.comment === "Position Updated") {
-            this.annotationEntry.positionUpdated = false
-          } else if (this.annotationEntry.type === 'deleted') {
+            this.annotationEntry[0].positionUpdated = false
+          } else if (this.annotationEntry[0].type === 'deleted') {
             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()
         }
@@ -1190,7 +1181,7 @@ export default {
     },
     setInitMapState: function () {
       if (this.mapImp) {
-        const map = this.mapImp._map;
+        const map = this.mapImp.map;
         const bounds = this.mapImp.options.bounds;
         const initBounds = [
           [bounds[0], bounds[1]],
@@ -1212,7 +1203,7 @@ export default {
     resetView: function () {
       if (this.mapImp) {
         // fit to window
-        const map = this.mapImp._map;
+        const map = this.mapImp.map;
         const { initBounds } = this.initMapState;
         // reset rotation
         map.resetNorthPitch({
@@ -1284,52 +1275,72 @@ export default {
         )
       }
     },
+    /**
+     * Function to highlight paths and features
+     * @param data 
+     */
+    zoomToFeatures: function (data) {
+      if (this.mapImp) {
+        this.mapImp.zoomToFeatures(data)
+      }
+    },
     /**
      * @public
      * Function to highlight the connected paths
-     * by providing path model identifier, ``pathId``.
-     * @arg {String} `pathId`
+     * by providing path model identifier, ``pathId`` or ``anatomicalId``.
+     * @arg {string} `pathId` or `anatomicalId`
      */
-    highlightConnectedPaths: async function (payload) {
+    retrieveConnectedPaths: async function (payload, options = {}) {
       if (this.mapImp) {
-        let paths = [...this.mapImp.pathModelNodes(payload)]
-
+        let connectedPaths = [];
+        let connectedTarget = options.target?.length ? options.target : [];
         // The line below is to get the path features from the geojson ids
-        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.queryForConnectivityNew(this.mapImp, payload)
-
-        // Check and flatten the origins node graph
-        let originsFlat = connectivity?.ids?.dendrites?.flat().flat()
-
-        let toHighlight = []
-        let highlight = false
-
-        // Loop through the path features and check if we have origin nodes
-        pathFeatures.forEach((p) => {
-
-          // Get the nodes from each path feature
-          this.mapImp.nodePathModels(p.featureId).forEach((f) => {
-            highlight = true
-            // s2 here is the second level paths
-            let s2 = this.mapImp.pathModelNodes(f)
-            s2.forEach((s) => {
-              let s2Feature = this.mapImp.featureProperties([s]) // get the feature properties for s2
-              if (originsFlat.includes(s2Feature.models)) {
-                highlight = false // if we have an origin node, we don't want to highlight the path
-                return
-              }
-            })
-
-            if (highlight) {
-              toHighlight.push(f)
-            }
-          })
-        })
-
-        // display connected paths
-        this.mapImp.zoomToFeatures(toHighlight, { noZoomIn: true })
+        const nodeFeatureIds = [...this.mapImp.pathModelNodes(payload)];
+        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 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);
+            connectedTarget = [...new Set(connected)];
+          }
+          // Loop through the node features and check if we have certain nodes
+          nodeFeatureIds.forEach((featureId) => {
+            // Get the paths from each node feature
+            const pathsL2 = this.mapImp.nodePathModels(featureId);
+            pathsL2.forEach((path) => {
+              // nodes of the second level path
+              const nodeFeatureIdsL2 = this.mapImp.pathModelNodes(path);
+              const nodeModelsL2 = nodeFeatureIdsL2.map((featureIdL2) => {
+                return this.mapImp.featureProperties(featureIdL2).models;
+              });
+              const intersection = connectedTarget.filter(element => nodeModelsL2.includes(element));
+              if (intersection.length && !connectedPaths.includes(path)) connectedPaths.push(path);
+            });
+          });
+        } else if (pathsOfEntities.length) {
+          if (connectedTarget.length) {
+            pathsOfEntities.forEach((path) => {
+              const nodeFeatureIds = this.mapImp.pathModelNodes(path);
+              const nodeModels = nodeFeatureIds.map((featureId) => {
+                return this.mapImp.featureProperties(featureId).models;
+              });
+              const intersection = connectedTarget.filter(element => nodeModels.includes(element));
+              if (intersection.length && !connectedPaths.includes(path)) connectedPaths.push(path);
+            });
+          } else {
+            connectedPaths = pathsOfEntities;
+          }
+        }
+        connectedPaths = [...new Set([...connectedPaths, ...payload])];
+        return connectedPaths;
       }
     },
     resetMapFilter: function() {
@@ -1567,7 +1578,7 @@ export default {
         // Rollback drawing when no new annotation submitted
         if (!this.featureAnnotationSubmitted) this.rollbackAnnotationEvent()
         else this.featureAnnotationSubmitted = false
-        this.annotationEntry = {}
+        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') {
@@ -1590,10 +1601,10 @@ export default {
             this.annotationDrawModeEvent(payload)
           } else {
             if (this.annotationSidebar && this.previousEditEvent.type === 'updated') {
-              this.annotationEntry = {
+              this.annotationEntry = [{
                 ...this.previousEditEvent,
                 resourceId: this.serverURL
-              }
+              }]
               this.annotationEventCallback({}, { type: 'aborted' })
             }
             this.previousEditEvent = {}
@@ -1612,7 +1623,7 @@ export default {
         // 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)
+        else this.checkAndCreatePopups([payload])
       }
       if (data.type === 'updated') this.previousEditEvent = data
       if (data.type === 'deleted') this.previousDeletedEvent = data
@@ -1639,6 +1650,7 @@ export default {
             const resource = [data.models]
             const taxonomy = this.entry
             const biologicalSex = this.biologicalSex
+            const featuresAlert = data.alert
             let taxons = undefined
             if (data.taxons) {
               // check if data.taxons is string or array
@@ -1648,7 +1660,7 @@ export default {
                 taxons = data.taxons
               }
             }
-            const payload = {
+            let payload = [{
               dataset: data.dataset,
               biologicalSex: biologicalSex,
               taxonomy: taxonomy,
@@ -1658,31 +1670,64 @@ export default {
               userData: args,
               eventType: eventType,
               provenanceTaxonomy: taxons,
-            }
+              alert: featuresAlert
+            }]
             if (eventType === 'click') {
-              this.setConnectivityDataSource(this.viewingMode, data);
-              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
+              const singleSelection = Object.keys(data).includes('id')
+              if (!singleSelection) {
+                payload = []
+                const mapuuid = data.mapUUID
+                for (let [key, value] of Object.entries(data)) {
+                  if (key !== 'mapUUID') {
+                    const label = value.label
+                    const resource = [value.models]
+                    let taxons = undefined
+                    if (value.taxons) {
+                      // check if data.taxons is string or array
+                      if (typeof value.taxons !== 'object') {
+                        taxons = JSON.parse(value.taxons)
+                      } else {
+                        taxons = value.taxons
+                      }
+                    }
+                    payload.push({
+                      dataset: value.dataset,
+                      biologicalSex: biologicalSex,
+                      taxonomy: taxonomy,
+                      resource: resource,
+                      label: label,
+                      feature: value,
+                      userData: args,
+                      eventType: eventType,
+                      provenanceTaxonomy: taxons,
+                      alert: value.alert,
+                      mapUUID: mapuuid
+                    })
+                  }
+                }
+              }
+              const clickedItem = singleSelection ? data : data[0]
               if (this.viewingMode === 'Neuron Connection') {
-                this.highlightConnectedPaths([data.models])
+                this.retrieveConnectedPaths([clickedItem.models]).then((paths) => {
+                  this.zoomToFeatures(paths)
+                })
               } else {
-                this.currentActive = data.models ? data.models : ''
-                // Drawing connectivity between features
+                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 = data.featureId || this.existDrawnFeatures.find(
-                    (feature) => feature.id === data.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 = data.featureId ? data.featureId : data.id
-                    const nodeLabel = data.label ? data.label : `Feature ${data.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 },
+                    this.connectionEntry[` ${key}`] = Object.assign(
+                      { label: nodeLabel },
                       Object.fromEntries(
-                        Object.entries(data)
+                        Object.entries(clickedItem)
                           .filter(([key]) => ['featureId', 'models'].includes(key))
                           .map(([key, value]) => [(key === 'featureId') ? 'id' : key, value])))
                   }
@@ -1711,23 +1756,6 @@ export default {
         }
       }
     },
-    /**
-     * The data for connectivity data source is just a placeholder data
-     * to check which part of the map is clicked, e.g., path or feture or empty area,
-     * based on the viewing mode.
-     * The "connectivity-info-close" event will be emitted based on this data
-     * when there has a click event on map.
-     * @param viewingMode
-     * @param data
-     */
-    setConnectivityDataSource: function (viewingMode, data) {
-      // for Exploration mode, only path click will be used as data source
-      this.connectivityDataSource = data.source;
-      // for other modes, it can be feature or path
-      if (viewingMode === 'Neuron Connection' || viewingMode === 'Annotation') {
-        this.connectivityDataSource = data.featureId;
-      }
-    },
     /**
      * @public
      * Function triggered by viewing mode change.
@@ -1899,6 +1927,25 @@ export default {
         }
       });
     },
+    checkConnectivityTooltipEntry: function(tooltipEntry) {
+      if (tooltipEntry?.length) {
+        return undefined !== (tooltipEntry.find(entry => entry?.destinations?.length || entry?.components?.length))
+      }
+      return false
+    },
+    changeConnectivitySource: async function (payload) {
+      const { featureId, connectivitySource } = payload;
+      await this.flatmapQueries.queryForConnectivityNew(this.mapImp, featureId[0], connectivitySource);
+      this.tooltipEntry = this.tooltipEntry.map((tooltip) => {
+        if (tooltip.featureId[0] === featureId[0]) {
+          return this.flatmapQueries.updateTooltipData(tooltip);
+        }
+        return tooltip;
+      })
+      if (this.checkConnectivityTooltipEntry(this.tooltipEntry)) {
+        this.$emit('connectivity-info-open', this.tooltipEntry);
+      }
+    },
     /**
      * @public
      * Function to create/display tooltips from the provided ``data``.
@@ -1908,23 +1955,26 @@ export default {
     checkAndCreatePopups: async function (data) {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
-        if (data.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.annotationEntry = [{
               ...this.previousDeletedEvent,
               resourceId: this.serverURL
-            }
+            }]
             this.annotationEventCallback({}, { type: 'aborted' })
           }
-          this.annotationEntry = {
-            ...data.feature,
-            resourceId: this.serverURL,
-            offline: this.offlineAnnotationEnabled
-          }
-          if (data.feature.featureId && data.feature.models) {
-            this.displayTooltip(data.feature.models)
-          } else if (data.feature.feature) {
-            this.annotationEntry.featureId = data.feature.feature.id
+          this.annotationEntry = []
+          features.forEach(feature => {
+            this.annotationEntry.push({
+              ...feature,
+              resourceId: this.serverURL,
+              featureId: feature.featureId ? feature.featureId : feature.feature?.id,
+              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
@@ -1932,32 +1982,100 @@ export default {
                 this.createConnectivityBody()
               }
               this.displayTooltip(
-                data.feature.feature.id,
-                centroid(data.feature.feature.geometry)
+                features[0].feature.id,
+                centroid(features[0].feature.geometry)
               )
             } else {
               this.rollbackAnnotationEvent()
             }
+          } else {
+            const featureIds = this.annotationEntry
+              .filter(annotation => annotation.featureId && annotation.models)
+              .map(annotation => annotation.models)
+            if (featureIds.length > 0) {
+              this.displayTooltip(featureIds)
+            }
           }
         } else {
           this.annotation = {}
         }
       } else {
-        //require data.resource && data.feature.source
-        let results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
         // load and store knowledge
         loadAndStoreKnowledge(this.mapImp, this.flatmapQueries);
-        // 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)
-        ) {
-          this.resourceForTooltip = data.resource[0]
-          data.resourceForTooltip = this.resourceForTooltip
-          this.createTooltipFromNeuronCuration(data)
+        let prom1 = []
+        // When there are multiple paths, emit placeholders first.
+        // This may contain invalid connectivity.
+        if (data.length > 1) {
+          this.tooltipEntry = data.map((tooltip) => {
+            return { title: tooltip.label, featureId: tooltip.resource, ready: false }
+          })
+          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]))
+        }
+        this.tooltipEntry = await Promise.all(prom1)
+        const featureIds = this.tooltipEntry.map(tooltip => tooltip.featureId[0])
+        if (featureIds.length > 0) {
+          this.displayTooltip(featureIds)
+        }
+      }
+    },
+    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)
+      // 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)) {
+        tooltip['featuresAlert'] = data.alert;
+        tooltip['knowledgeSource'] = getKnowledgeSource(this.mapImp);
+        // Map id and uuid to load connectivity information from the map
+        tooltip['mapId'] = this.mapImp.provenance.id;
+        tooltip['mapuuid'] = this.mapImp.provenance.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 (!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 (!tooltip.destinations.includes(feature.label)) {
+              tooltip.destinations.push(feature.label)
+              tooltip.destinationsWithDatasets.push({ id: feature.models, name: feature.label })
+            }
+          })
         }
       }
+      tooltip['ready'] = true;
+      return tooltip;
     },
     /**
      * A hack to remove flatmap tooltips while popup is open
@@ -1990,15 +2108,6 @@ export default {
         item.style.display = 'none'
       })
     },
-    /**
-     * @public
-     * Function to create tooltip from Neuron Curation ``data``.
-     * @arg {Object} `data`
-     */
-    createTooltipFromNeuronCuration: async function (data) {
-      this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
-      this.displayTooltip(data.resource[0])
-    },
     /**
      * @public
      * Function to show popup on map.
@@ -2203,26 +2312,21 @@ export default {
         featureId = feature
         options.annotationFeatureGeometry = geometry
       } else {
-        featureId = this.mapImp.modelFeatureIds(feature)[0]
+        const entry = Array.isArray(feature) ? feature[0] : feature
+        featureId = this.mapImp.modelFeatureIds(entry)[0]
         if (!this.activeDrawTool) {
           options.positionAtLastClick = true
         }
       }
       // If connectivityInfoSidebar is set to `true`
       // Connectivity info will show in sidebar
-      if ((this.connectivityInfoSidebar && this.hasTooltipEntry()) && this.viewingMode !== 'Annotation') {
-        // move the map center to highlighted area
-        // this method is moved to sidebar connectivity info
-        // const featureIds = [feature];
-        // this.moveMap(featureIds);
-        if (this.featuresAlert) {
-          this.tooltipEntry['featuresAlert'] = this.featuresAlert;
-        }
-        // Get connectivity knowledge source | SCKAN release
-        if (this.mapImp.provenance?.connectivity) {
-          this.tooltipEntry['knowledge-source'] = getKnowledgeSource(this.mapImp);
+      if (
+        (this.connectivityInfoSidebar && this.tooltipEntry.length) &&
+        this.viewingMode !== 'Annotation'
+      ) {
+        if (this.checkConnectivityTooltipEntry(this.tooltipEntry)) {
+          this.$emit('connectivity-info-open', this.tooltipEntry);
         }
-        this.$emit('connectivity-info-open', this.tooltipEntry);
       }
       if (this.annotationSidebar && this.viewingMode === 'Annotation') {
         this.$emit('annotation-open', {annotationEntry: this.annotationEntry, commitCallback: this.commitAnnotationEvent});
@@ -2232,16 +2336,10 @@ export default {
       // Provenance popup will be shown on map
       // Tooltip will be shown for Annotation view
       if (
-        !this.disableUI && (
-          (
-            this.viewingMode === 'Annotation' &&
-            !this.annotationSidebar
-          ) ||
-          (
-            this.viewingMode === 'Exploration' &&
-            !this.connectivityInfoSidebar &&
-            this.hasTooltipEntry()
-          )
+        !this.disableUI &&
+        (
+          (this.viewingMode === 'Annotation' && !this.annotationSidebar) ||
+          (this.viewingMode === 'Exploration' && !this.connectivityInfoSidebar)
         )
       ) {
         this.tooltipDisplay = true;
@@ -2251,23 +2349,6 @@ export default {
         });
       }
     },
-    hasTooltipEntry: function () {
-      const {
-        components,
-        destinations,
-        origins,
-        provenanceTaxonomy,
-        provenanceTaxonomyLabel
-      } = this.tooltipEntry;
-
-      return Boolean(
-        components?.length ||
-        destinations?.length ||
-        origins?.length ||
-        provenanceTaxonomy?.length ||
-        provenanceTaxonomyLabel?.length
-      );
-    },
     /**
      * Move the map to the left side
      * to the visible area of the feature IDs
@@ -2277,8 +2358,8 @@ export default {
      moveMap: function (featureIds, options = {}) {
       if (this.mapImp) {
         const { offsetX = 0, offsetY = 0, zoom = 4 } = options;
-        const Map = this.mapImp._map;
-        const bbox = this.mapImp._bounds.toArray();
+        const Map = this.mapImp.map;
+        const bbox = this.mapImp.bounds.toArray();
 
         // Zoom the map to features first
         this.mapImp.zoomToFeatures(featureIds, { noZoomIn: true });
@@ -2403,10 +2484,10 @@ export default {
           state['biologicalSex'] = identifier.biologicalSex
         if (identifier && identifier.uuid) state['uuid'] = identifier.uuid
         state['viewingMode'] = this.viewingMode
-        state['searchTerm'] = this.statesTracking.activeTerm
+        state['searchTerm'] = this.searchTerm
         state['flightPath3D'] = this.flightPath3DRadio
         state['colour'] = this.colourRadio
-        state['outlinesRadio'] = this.outlinesRadio
+        state['outlines'] = this.outlinesRadio
         state['background'] = this.currentBackground
         if (this.offlineAnnotationEnabled) {
           state['offlineAnnotations'] = sessionStorage.getItem('anonymous-annotation')
@@ -2456,11 +2537,7 @@ export default {
         if (state.background) this.backgroundChangeCallback(state.background)
         if (state.searchTerm) {
           const searchTerm = state.searchTerm
-          if (state.viewingMode === "Neuron Connection") {
-            this.highlightConnectedPaths([searchTerm])
-          } else {
-            this.searchAndShowResult(searchTerm, true)
-          }
+          this.searchAndShowResult(searchTerm, true)
         }
         this.setVisibilityState(state)
       }
@@ -2538,7 +2615,6 @@ export default {
 
         let promise1 = this.mapManagerRef.loadMap(
           identifier,
-          this.$refs.display,
           this.eventCallback(),
           {
             //fullscreenControl: false,
@@ -2547,6 +2623,7 @@ export default {
             minZoom: this.minZoom,
             tooltips: this.tooltips,
             minimap: minimap,
+            container: this.$refs.display,
             // tooltipDelay: 15, // new feature to delay tooltips showing
           }
         )
@@ -2592,9 +2669,6 @@ export default {
         if (this.mapImp) {
           this.mapImp.resize()
           this.showMinimap(this.displayMinimap)
-          if (this.mapImp._minimap) {
-            this.mapImp._minimap._miniMap.resize()
-          }
         }
       } catch {
         console.error('Map resize error')
@@ -2610,7 +2684,6 @@ export default {
       if (this.mapImp.options?.style === 'functional') {
         this.isFC = true
       }
-      console.log(this.mapImp)
       this.mapImp.setBackgroundOpacity(1)
       this.backgroundChangeCallback(this.currentBackground)
       this.pathways = this.mapImp.pathTypes()
@@ -2624,7 +2697,6 @@ export default {
       this.loading = false
       this.computePathControlsMaximumHeight()
       this.mapResize()
-      this.handleMapClick();
       this.setInitMapState();
       /**
        * This is ``onFlatmapReady`` event.
@@ -2632,29 +2704,6 @@ export default {
        */
       this.$emit('ready', this)
     },
-    /**
-     * @public
-     * Function to handle mouse click on map area
-     * after the map is loaded.
-     */
-    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.connectivityDataSource) {
-            this.$emit('connectivity-info-close');
-          }
-          this.connectivityDataSource = ''; // reset
-        });
-      }
-    },
     /**
      * @public
      * Function to show or hide the minimap
@@ -2689,12 +2738,11 @@ export default {
           } else if (this.viewingMode === "Annotation") {
             this.manualAbortedOnClose()
           }
-          this.statesTracking.activeTerm = ""
+          this.searchTerm = ""
           return true
         } else {
           const searchResults = this.mapImp.search(term)
           if (searchResults?.results?.length) {
-            this.statesTracking.activeTerm = term
             this.mapImp.showSearchResults(searchResults)
             if (displayInfo) {
               let featureId = undefined;
@@ -2706,18 +2754,18 @@ export default {
               if (featureId) {
                 const feature = this.mapImp.featureProperties(featureId)
                 const data = {
-                  resource: [feature.source],
-                  feature: {...feature, models: feature.models || feature.source},
+                  resource: [feature.models],
+                  feature: feature,
                   label: feature.label,
                   provenanceTaxonomy: feature.taxons,
+                  alert: feature.alert,
                 }
                 if (this.viewingMode === "Exploration" || this.viewingMode === "Annotation") {
-                  this.featuresAlert = feature.alert
-                  this.checkAndCreatePopups(data)
+                  this.checkAndCreatePopups([data])
                 } else if (this.viewingMode === 'Neuron Connection') {
-                  setTimeout(() => {
-                    this.highlightConnectedPaths(data.resource)
-                  }, 1000)
+                  this.retrieveConnectedPaths(data.resource).then((paths) => {
+                    this.zoomToFeatures(paths)
+                  })
                 }
                 this.mapImp.showPopup(featureId, capitalise(feature.label), {
                   className: 'custom-popup',
@@ -2726,6 +2774,7 @@ export default {
                 })
               }
             }
+            this.searchTerm = term
             return true
           } else this.mapImp.clearSearchResults()
         }
@@ -2742,6 +2791,9 @@ export default {
       if (this.mapImp) return this.mapImp.search(term)
       return []
     },
+    onActionClick: function (data) {
+      EventBus.emit('onActionClick', data)
+    },
   },
   props: {
     /**
@@ -2947,7 +2999,6 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
-      getFeaturesAlert: () => this.featuresAlert,
       userApiKey: this.userToken,
     }
   },
@@ -2956,7 +3007,7 @@ export default {
       sensor: null,
       mapManagerRef: undefined,
       flatmapQueries: undefined,
-      annotationEntry: {},
+      annotationEntry: [],
       //tooltip display has to be set to false until it is rendered
       //for the first time, otherwise it may display an arrow at a
       //undesired location.
@@ -3001,11 +3052,10 @@ export default {
       availableBackground: ['white', 'lightskyblue', 'black'],
       loading: false,
       flatmapMarker: flatmapMarker,
-      tooltipEntry: createUnfilledTooltipData(),
+      tooltipEntry: [],
       connectivityDataSource: '',
       connectivityTooltipVisible: false,
       drawerOpen: false,
-      featuresAlert: undefined,
       flightPath3DRadio: false,
       displayFlightPathOption: false,
       colourRadio: true,
@@ -3065,10 +3115,7 @@ export default {
           without: true,
         }
       }),
-      statesTracking: markRaw({
-        activeClick: false,
-        activeTerm: "",
-      }),
+      searchTerm: "",
       taxonLeaveDelay: undefined,
     }
   },
@@ -3206,7 +3253,7 @@ export default {
     if (this.mapManager) {
       this.mapManagerRef = this.mapManager;
     } else {
-      this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
+      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.