@abi-software/flatmapvuer 1.7.2 → 1.7.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.7.2",
+  "version": "1.7.3-beta.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,7 +43,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "3.2.10",
+    "@abi-software/flatmap-viewer": "3.2.12",
     "@abi-software/map-utilities": "^1.3.1",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",

package/src/components/FlatmapVuer.vue

@@ -644,7 +644,7 @@ const centroid = (geometry) => {
   } else {
     coordinates = geometry.coordinates
   }
-  if (coordinates) {    
+  if (coordinates) {
     if (!(geometry.type === 'Point')) {
       coordinates.map((coor) => {
         featureGeometry.lng += parseFloat(coor[0])
@@ -1703,6 +1703,12 @@ export default {
      * Function to remove active tooltips on map.
      */
     removeActiveTooltips: function () {
+      // Remove active tooltip/popup on map
+      if (this.mapImp) {
+        this.mapImp.removePopup();
+      }
+
+      // Fallback: remove any existing toolitp on DOM
       const tooltips = this.$el.querySelectorAll('.flatmap-tooltip-popup');
       tooltips.forEach((tooltip) => tooltip.remove());
     },
@@ -1710,7 +1716,7 @@ export default {
      * Function to create tooltip for the provided connectivity data.
      * @arg {Array} `connectivityData`
      */
-    createTooltipForConnectivity: function (connectivityData) {
+    createTooltipForConnectivity: function (connectivityData, geojsonId) {
       // combine all labels to show together
       // content type must be DOM object to use HTML
       const labelsContainer = document.createElement('div');
@@ -1727,7 +1733,7 @@ export default {
       });
 
       this.mapImp.showPopup(
-        connectivityData[0].featureId,
+        geojsonId,
         labelsContainer,
         {
           className: 'custom-popup flatmap-tooltip-popup',
@@ -1744,6 +1750,7 @@ export default {
     showConnectivityTooltips: function (payload) {
       const { connectivityInfo, data } = payload;
       const featuresToHighlight = [];
+      const geojsonHighlights = [];
       const connectivityData = [];
       const filteredConnectivityData = [];
       const errorData = [];
@@ -1779,16 +1786,31 @@ export default {
               id,
               label,
             });
-            featuresToHighlight.push(id);
           } else {
             errorData.push(connectivity);
           }
         });
 
         if (filteredConnectivityData.length) {
-          // show tooltip of the first item
-          // with all labels
-          this.createTooltipForConnectivity(filteredConnectivityData);
+          let geojsonId = filteredConnectivityData[0].featureId;
+
+          this.mapImp.annotations.forEach((annotation) => {
+            const anatomicalNodes = annotation['anatomical-nodes'];
+
+            if (anatomicalNodes) {
+              const anatomicalNodesString = anatomicalNodes.join('');
+              const foundItem = filteredConnectivityData.every((item) =>
+                anatomicalNodesString.indexOf(item.id) !== -1
+              );
+
+              if (foundItem) {
+                geojsonId = annotation.featureId;
+                geojsonHighlights.push(geojsonId);
+              }
+            }
+          });
+
+          this.createTooltipForConnectivity(filteredConnectivityData, geojsonId);
         } else {
           errorData.push(...connectivityData);
           // Close all tooltips on the current flatmap element
@@ -1802,6 +1824,10 @@ export default {
 
         // highlight all available features
         this.mapImp.selectFeatures(featuresToHighlight);
+
+        if (geojsonHighlights.length) {
+          this.mapImp.selectGeoJSONFeatures(geojsonHighlights);
+        }
       }
     },
     emitConnectivityGraphError: function (errorData) {
@@ -3405,6 +3431,12 @@ export default {
       border-style: solid;
       flex-shrink: 0;
     }
+
+    hr {
+      margin: 0.5rem 0;
+      border: 0;
+      border-top: 1px solid var(--el-border-color);
+    }
   }
   .maplibregl-popup-tip {
     display: none;