@abi-software/flatmapvuer 1.8.1-beta.2 → 1.8.1-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.8.1-beta.2",
+  "version": "1.8.1-beta.3",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/flatmap-viewer": "3.2.13",
-    "@abi-software/map-utilities": "^1.4.0",
+    "@abi-software/map-utilities": "^1.4.1-beta.1",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",

package/src/components/FlatmapVuer.vue

@@ -1267,72 +1267,52 @@ 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`` or ``anatomicalId``.
-     * @arg {string} `pathId` or `anatomicalId`
+     * by providing path model identifier, ``pathId``.
+     * @arg {String} `pathId`
      */
-    retrieveConnectedPaths: async function (payload, options = {}) {
+    highlightConnectedPaths: async function (payload) {
       if (this.mapImp) {
-        let connectedPaths = [];
-        let connectedTarget = options.target?.length ? options.target : [];
+        let paths = [...this.mapImp.pathModelNodes(payload)]
+
         // The line below is to get the path features from the geojson ids
-        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);
-            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;
+        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 })
       }
     },
     resetMapFilter: function() {
@@ -1663,11 +1643,13 @@ export default {
               provenanceTaxonomy: taxons,
             }
             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
               if (this.viewingMode === 'Neuron Connection') {
-                this.retrieveConnectedPaths([data.models]).then((paths) => {
-                  this.zoomToFeatures(paths)
-                })
+                this.highlightConnectedPaths([data.models])
               } else {
                 this.currentActive = data.models ? data.models : ''
                 // Drawing connectivity between features
@@ -1712,6 +1694,23 @@ 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.
@@ -1939,8 +1938,6 @@ export default {
           this.resourceForTooltip = data.resource[0]
           data.resourceForTooltip = this.resourceForTooltip
           this.createTooltipFromNeuronCuration(data)
-        } else {
-          this.createTooltipFromEntityCuration(data)
         }
       }
     },
@@ -1984,41 +1981,6 @@ export default {
       this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
       this.displayTooltip(data.resource[0])
     },
-    /**
-     * @public
-     * Function to create tooltip from Entity Curation ``data``.
-     * @arg {Object} `data`
-     */
-    createTooltipFromEntityCuration: async function (data) {
-      this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
-      let featureIds = []
-      let destinations = []
-      let destinationsWithDatasets = []
-      const pathsOfEntities = await this.mapImp.queryPathsForFeatures(data.resource)
-      if (pathsOfEntities.length) {
-        pathsOfEntities.forEach((path) => {
-          featureIds.push(...this.mapImp.pathModelNodes(path))
-        })
-        featureIds = [...new Set(featureIds)].filter(id => id !== data.feature.featureId)
-        featureIds.forEach((id) => {
-          const feature = this.mapImp.featureProperties(id)
-          if (!destinations.includes(feature.label)) {
-            destinations.push(feature.label)
-            destinationsWithDatasets.push({ id: feature.models, name: feature.label })
-          }
-        })
-        this.tooltipEntry = {
-          ...this.tooltipEntry,
-          origins: [data.label],
-          originsWithDatasets: [{ id: data.resource[0], name: data.label }],
-          components: [],
-          componentsWithDatasets: [],
-          destinations: destinations,
-          destinationsWithDatasets: destinationsWithDatasets,
-        }
-        this.displayTooltip(data.resource[0])
-      }
-    },
     /**
      * @public
      * Function to show popup on map.
@@ -2241,6 +2203,10 @@ export default {
         // Get connectivity knowledge source | SCKAN release
         if (this.mapImp.provenance?.connectivity) {
           this.tooltipEntry['knowledge-source'] = getKnowledgeSource(this.mapImp);
+
+          // Map id and uuid to load connectivity information from the map
+          this.tooltipEntry['mapId'] = this.mapImp.provenance.id;
+          this.tooltipEntry['mapuuid'] = this.mapImp.provenance.uuid;
         }
         this.$emit('connectivity-info-open', this.tooltipEntry);
       }
@@ -2423,10 +2389,10 @@ export default {
           state['biologicalSex'] = identifier.biologicalSex
         if (identifier && identifier.uuid) state['uuid'] = identifier.uuid
         state['viewingMode'] = this.viewingMode
-        state['searchTerm'] = this.searchTerm
+        state['searchTerm'] = this.statesTracking.activeTerm
         state['flightPath3D'] = this.flightPath3DRadio
         state['colour'] = this.colourRadio
-        state['outlines'] = this.outlinesRadio
+        state['outlinesRadio'] = this.outlinesRadio
         state['background'] = this.currentBackground
         this.getVisibilityState(state)
         return state
@@ -2471,9 +2437,7 @@ export default {
         if (state.searchTerm) {
           const searchTerm = state.searchTerm
           if (state.viewingMode === "Neuron Connection") {
-            this.retrieveConnectedPaths([searchTerm]).then((paths) => {
-              this.zoomToFeatures(paths)
-            })
+            this.highlightConnectedPaths([searchTerm])
           } else {
             this.searchAndShowResult(searchTerm, true)
           }
@@ -2626,6 +2590,7 @@ 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()
@@ -2639,6 +2604,7 @@ export default {
       this.loading = false
       this.computePathControlsMaximumHeight()
       this.mapResize()
+      this.handleMapClick();
       this.setInitMapState();
       /**
        * This is ``onFlatmapReady`` event.
@@ -2646,6 +2612,29 @@ 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
@@ -2680,11 +2669,12 @@ export default {
           } else if (this.viewingMode === "Annotation") {
             this.manualAbortedOnClose()
           }
-          this.searchTerm = ""
+          this.statesTracking.activeTerm = ""
           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;
@@ -2704,9 +2694,9 @@ export default {
                 if (this.viewingMode === "Exploration" || this.viewingMode === "Annotation") {
                   this.checkAndCreatePopups(data)
                 } else if (this.viewingMode === 'Neuron Connection') {
-                  this.retrieveConnectedPaths(data.resource).then((paths) => {
-                    this.zoomToFeatures(paths)
-                  })
+                  setTimeout(() => {
+                    this.highlightConnectedPaths(data.resource)
+                  }, 1000)
                 }
                 this.mapImp.showPopup(featureId, capitalise(feature.label), {
                   className: 'custom-popup',
@@ -2715,7 +2705,6 @@ export default {
                 })
               }
             }
-            this.searchTerm = term
             return true
           } else this.mapImp.clearSearchResults()
         }
@@ -3053,7 +3042,10 @@ export default {
           without: true,
         }
       }),
-      searchTerm: "",
+      statesTracking: markRaw({
+        activeClick: false,
+        activeTerm: "",
+      }),
       taxonLeaveDelay: undefined,
     }
   },

package/src/services/flatmapKnowledge.js

@@ -36,29 +36,25 @@ function getKnowledgeSource(mapImp) {
       mapKnowledgeSource = `${sckanProvenance.npo.release}-npo`;
     }
   }
+
   return mapKnowledgeSource;
 }
 
-async function loadAndStoreKnowledge(mapImp, flatmapQueries) {
+function loadAndStoreKnowledge(mapImp, flatmapQueries) {
   const knowledgeSource = getKnowledgeSource(mapImp);
   const sql = `select knowledge from knowledge
-  where source="${knowledgeSource}"
-  order by source desc`;
-
-  refreshFlatmapKnowledgeCache()
+    where source="${knowledgeSource}"
+    order by source desc`;
   const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
 
   if (!flatmapKnowledge) {
-    const response = await flatmapQueries.flatmapQuery(sql);
-    const mappedData = response.values.map(x => x[0]);
-    const parsedData = mappedData.map(x => JSON.parse(x));
-
-    sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
-    updateFlatmapKnowledgeCache();
-
-    return parsedData;
+    flatmapQueries.flatmapQuery(sql).then((response) => {
+      const mappedData = response.values.map(x => x[0]);
+      const parsedData = mappedData.map(x => JSON.parse(x));
+      sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
+      updateFlatmapKnowledgeCache();
+    });
   }
-  return JSON.parse(flatmapKnowledge);
 }
 
 function updateFlatmapKnowledgeCache() {
@@ -74,7 +70,6 @@ function removeFlatmapKnowledgeCache() {
     'flatmap-knowledge',
     'flatmap-knowledge-expiry',
   ];
-
   keys.forEach((key) => {
     sessionStorage.removeItem(key);
   });