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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.7.2-beta.0",
+  "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

@@ -473,35 +473,18 @@ Please use `const` to assign meaningful names to them...
               </el-select>
             </el-row>
           </template>
-          <div v-if="viewingMode === 'Neuron Connection'">
-            <el-row class="backgroundSpacer"></el-row>
-            <el-row class="backgroundText">Connection path display</el-row>
-            <el-row class="backgroundControl">
-              <el-radio-group
-                v-model="connectionPathRadio"
-                class="flatmap-radio"
-                @change="setConnectionPath"
-              >
-              <el-radio value="origins">Origin</el-radio>
-              <el-radio value="components">Component</el-radio>
-              <el-radio value="destinations">Destination</el-radio>
-              </el-radio-group>
-            </el-row>
-          </div>
-          <div v-else>
-            <el-row class="backgroundSpacer" v-if="displayFlightPathOption"></el-row>
-            <el-row class="backgroundText" v-if="displayFlightPathOption">Flight path display</el-row>
-            <el-row class="backgroundControl" v-if="displayFlightPathOption">
-              <el-radio-group
-                v-model="flightPath3DRadio"
-                class="flatmap-radio"
-                @change="setFlightPath3D"
-              >
-              <el-radio :value="false">2D</el-radio>
-              <el-radio :value="true">3D</el-radio>
-              </el-radio-group>
-            </el-row>
-          </div>
+          <el-row class="backgroundSpacer" v-if="displayFlightPathOption"></el-row>
+          <el-row class="backgroundText" v-if="displayFlightPathOption">Flight path display</el-row>
+          <el-row class="backgroundControl" v-if="displayFlightPathOption">
+            <el-radio-group
+              v-model="flightPath3DRadio"
+              class="flatmap-radio"
+              @change="setFlightPath3D"
+            >
+            <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">
@@ -661,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])
@@ -1060,17 +1043,6 @@ export default {
         this.addAnnotationFeature()
       }
     },
-    /**
-     * @public
-     * Function to switch the type of connection path display
-     * @arg {Boolean} `flag`
-     */
-    setConnectionPath: function (flag) {
-      this.connectionPathRadio = flag
-      if (this.mapImp && this.currentActive) {
-        this.highlightConnectedPaths([this.currentActive])
-      }
-    },
     /**
      * @public
      * Function to switch from 2D to 3D
@@ -1291,60 +1263,47 @@ export default {
     /**
      * @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`
      */
-    highlightConnectedPaths: async function (payload, options = {}) {
+    highlightConnectedPaths: async function (payload) {
       if (this.mapImp) {
+        let paths = [...this.mapImp.pathModelNodes(payload)]
+
         // The line below is to get the path features from the geojson ids
-        const connectedType = options.type || this.connectionPathRadio
-        const nodeFeatureIds = [...this.mapImp.pathModelNodes(payload)]
-        const pathsOfEntities = await this.mapImp.queryPathsForFeatures(payload)
+        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
 
-        if (nodeFeatureIds.length) {
-          let target = options.target || []
-          if (!target.length) {
-            // Query the flatmap knowledge graph for connectivity, we use this to grab the origins
-            const connectivity = await this.flatmapQueries.queryForConnectivityNew(this.mapImp, payload)
-            // Check and flatten the origins node graph
-            const originsFlat = connectivity?.ids?.dendrites?.flat().flat()
-            const componentsFlat = connectivity?.ids?.components?.flat().flat()
-            const destinationsFlat = connectivity?.ids?.axons?.flat().flat()
-            target = connectedType === "origins" ?
-              originsFlat : connectedType === "components" ?
-                componentsFlat : connectedType === "destinations" ?
-                  destinationsFlat : []
-          }
-
-          // 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) => {
-              highlight = true
-              // 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 = target.filter(element => nodeModelsL2.includes(element))
-              if (!intersection.length) highlight = false
-              if (highlight && !toHighlight.includes(path)) toHighlight.push(path)
-            })
-          })
-          toHighlight = [...new Set([...toHighlight, ...payload])]
-        } else if (pathsOfEntities.length) {
-          pathsOfEntities.forEach((path) => {
-            const nodeFeatureIds = this.mapImp.pathModelNodes(path)
-            const nodeModels = nodeFeatureIds.map((featureId) => {
-              return this.mapImp.featureProperties(featureId).models
+        // 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 (nodeModels.includes(options.target[0])) toHighlight.push(path)
+
+            if (highlight) {
+              toHighlight.push(f)
+            }
           })
-          if (!toHighlight.length) toHighlight = options.target
-        }
+        })
+
         // display connected paths
         this.mapImp.zoomToFeatures(toHighlight, { noZoomIn: true })
       }
@@ -1680,10 +1639,10 @@ export default {
               //The following will be used to track either a feature is selected
               this.statesTracking.activeClick = true
               this.statesTracking.activeTerm = data?.models
-              this.currentActive = data.models ? data.models : ''
               if (this.viewingMode === 'Neuron Connection') {
                 this.highlightConnectedPaths([data.models])
               } else {
+                this.currentActive = data.models ? data.models : ''
                 // Drawing connectivity between features
                 if (this.activeDrawTool && !this.isValidDrawnCreated) {
                   // Check if flatmap features or existing drawn features
@@ -1744,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());
     },
@@ -1751,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');
@@ -1768,7 +1733,7 @@ export default {
       });
 
       this.mapImp.showPopup(
-        connectivityData[0].featureId,
+        geojsonId,
         labelsContainer,
         {
           className: 'custom-popup flatmap-tooltip-popup',
@@ -1785,6 +1750,7 @@ export default {
     showConnectivityTooltips: function (payload) {
       const { connectivityInfo, data } = payload;
       const featuresToHighlight = [];
+      const geojsonHighlights = [];
       const connectivityData = [];
       const filteredConnectivityData = [];
       const errorData = [];
@@ -1820,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
@@ -1843,6 +1824,10 @@ export default {
 
         // highlight all available features
         this.mapImp.selectFeatures(featuresToHighlight);
+
+        if (geojsonHighlights.length) {
+          this.mapImp.selectGeoJSONFeatures(geojsonHighlights);
+        }
       }
     },
     emitConnectivityGraphError: function (errorData) {
@@ -1897,7 +1882,8 @@ export default {
         }
       } else {
         //require data.resource && data.feature.source
-        const results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
+        let results =
+          await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(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 (
@@ -1907,8 +1893,6 @@ export default {
           this.resourceForTooltip = data.resource[0]
           data.resourceForTooltip = this.resourceForTooltip
           this.createTooltipFromNeuronCuration(data)
-        } else {
-          this.createTooltipFromEntityCuration(data)
         }
       }
     },
@@ -1950,43 +1934,8 @@ export default {
      */
     createTooltipFromNeuronCuration: async function (data) {
       this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
-      this.tooltipEntry.neuronCuration = true
       this.displayTooltip(data.resource[0])
     },
-    /**
-     * @public
-     * Function to create tooltip from Neuron Curation ``data``.
-     * @arg {Object} `data`
-     */
-    createTooltipFromEntityCuration: async function (data) {
-      this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
-      this.tooltipEntry.entityCuration = true
-      let labels = []
-      const pathsOfEntities = await this.mapImp.queryPathsForFeatures(data.resource)
-      if (pathsOfEntities.length) {
-        let componentsWithDatasets = []
-        pathsOfEntities.forEach((path) => {
-          const featureIds = this.mapImp.pathModelNodes(path)
-          featureIds.forEach((id) => {
-            const feature = this.mapImp.featureProperties(id)
-            if (!labels.includes(feature.label)) {
-              labels.push(feature.label)
-              componentsWithDatasets.push({ id: feature.models, name: feature.label })
-            }
-          })
-        })
-        this.tooltipEntry = {
-          ...this.tooltipEntry,
-          origins: [data.label],
-          originsWithDatasets: [{ id: data.resource[0], name: data.label }],
-          components: labels,
-          componentsWithDatasets: componentsWithDatasets,
-          destinations: [],
-          destinationsWithDatasets: [],
-        }
-        this.displayTooltip(data.resource[0])
-      }
-    },
     /**
      * @public
      * Function to show popup on map.
@@ -2388,7 +2337,6 @@ export default {
         if (identifier && identifier.uuid) state['uuid'] = identifier.uuid
         state['viewingMode'] = this.viewingMode
         state['searchTerm'] = this.statesTracking.activeTerm
-        state['connectionPath'] = this.connectionPathRadio
         state['flightPath3D'] = this.flightPath3DRadio
         state['colour'] = this.colourRadio
         state['outlinesRadio'] = this.outlinesRadio
@@ -2985,7 +2933,6 @@ export default {
       connectivityTooltipVisible: false,
       drawerOpen: false,
       featuresAlert: undefined,
-      connectionPathRadio: 'origins',
       flightPath3DRadio: false,
       displayFlightPathOption: false,
       colourRadio: true,
@@ -3484,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;