@abi-software/flatmapvuer 0.5.8 → 0.5.9-alpha-connected-paths.2

package/src/components/FlatmapVuer.vue

@@ -279,7 +279,14 @@
         :appendToBody="false"
         trigger="click"
         popper-class="background-popper"
-      >
+      > 
+        <el-row class="backgroundText">HighlightTool</el-row>
+        <el-row class="backgroundControl">
+          <el-radio-group v-model="highlightToolOn" class="flatmap-radio" @change="setHighlightTool">
+            <el-radio :label="true">On</el-radio>
+            <el-radio :label="false">Off</el-radio>
+          </el-radio-group>
+        </el-row>
         <el-row class="backgroundText">Organs display</el-row>
         <el-row class="backgroundControl">
           <el-radio-group v-model="colourRadio" class="flatmap-radio" @change="setColour">
@@ -353,6 +360,8 @@
       <Tooltip
         ref="tooltip"
         class="tooltip"
+        @highlightConnectedPaths="highlightConnectedPaths"
+        @onClose="closeTooltip"
         :entry="tooltipEntry"
       />
     </div>
@@ -510,6 +519,9 @@ export default {
         this.mapImp.setColour({ colour: flag, outline: this.outlinesRadio });
       }
     },
+    setHighlightTool: function(flag) {
+      this.highlightToolOn = flag;
+    },
     /**
      * Function to toggle outlines f organs.
      */
@@ -576,6 +588,22 @@ export default {
         payload.keys.forEach(key => this.mapImp.enableSckanPath(key, payload.value));
       }
     },
+    highlightConnectedPaths: function(payload) {
+      if (this.mapImp) {
+        let paths = [...this.mapImp.pathModelNodes(payload)]
+        // The line below matches the paths to the annIdToFeatureId map to get the feature ids
+
+        let pathFeatures = paths.map(p=>this.mapImp.featureProperties(p))
+        let toHighlight = []
+        pathFeatures.forEach(p=>{
+          this.mapImp.nodePathModels(p.featureId).forEach(f=>{
+            toHighlight.push(f)
+          })
+        })
+        // display connected paths
+        this.mapImp.zoomToFeatures(toHighlight, {noZoomIn: true});
+      }
+    },
     systemSelected: function(payload) {
       if (this.mapImp) {
         this.mapImp.enableSystem(payload.key, payload.value);
@@ -641,11 +669,18 @@ export default {
             provenanceTaxonomy: data.taxons ? JSON.parse(data.taxons) : undefined
           };
           if (eventType === "click") {
-            this.currentActive = data.models ? data.models : "";
-          } else if (eventType === "mouseenter") {
+            
+            if (this.highlightToolOn) {
+              this.highlightConnectedPaths([data.models])
+            } else {
+              console.log('active changed')
+              this.currentActive = data.models ? data.models : "";
+            }
+          } else if (eventType === "mouseenter" && !this.highlightToolOn) {
+              console.log('active changed')
             this.currentHover = data.models ? data.models : "";
           }
-          if (data && data.type !== "marker" && eventType === "click"){
+          if (data && data.type !== "marker" && eventType === "click" && !this.highlightToolOn){
             this.checkAndCreatePopups(payload);
           }
           this.$emit("resource-selected", payload);
@@ -662,6 +697,7 @@ export default {
       // result 0 is the connection, result 1 is the pubmed results from flatmap
       if(results[0] || results[1] ||( data.feature.hyperlinks && data.feature.hyperlinks.length > 0)){
         this.resourceForTooltip =  data.resource[0];
+        data.resourceForTooltip = this.resourceForTooltip;
         this.createTooltipFromNeuronCuration(data);
       } 
     },
@@ -677,6 +713,12 @@ export default {
           "block";
       };
     },
+    closeTooltip: function() {
+      this.$refs.tooltip.$el.style.display = "none";
+      document.querySelectorAll('.maplibregl-popup').forEach(item => {
+        item.style.display = "none";
+      });
+    },
     createTooltipFromNeuronCuration: async function(data) {
       this.tooltipEntry = await this.flatmapQueries.createTooltipData(data);
       this.displayTooltip();
@@ -1146,6 +1188,7 @@ export default {
       currentBackground: "white",
       availableBackground: ["white", "lightskyblue", "black"],
       loading: false,
+      highlightToolOn: false,
       flatmapMarker: flatmapMarker,
       tooltipEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,

package/src/components/Tooltip.vue

@@ -6,6 +6,9 @@
         <div v-if="entry.provenanceTaxonomyLabel && entry.provenanceTaxonomyLabel.length > 0" class="subtitle">
           {{provSpeciesDescription}}
         </div>
+        <el-button @click="showConnectedPaths">
+          Show connected paths
+        </el-button>
       </div>
       <div class="block" v-else>
         <span class="title">{{entry.featureId}}</span>
@@ -187,6 +190,10 @@ export default {
     titleCase: function(title){
       return titleCase(title)
     },
+    showConnectedPaths(){
+      this.$emit('highlightConnectedPaths', this.entry.featureId)
+      this.$emit('onClose')
+    },
     capitalise: function(text){
       return capitalise(text)
     },