Enable adding click handlers to pathway nodes

Author: eweitz

src/js/ideogram.js

@@ -359,21 +359,23 @@ export default class Ideogram {
    * @param {String} outerSelector DOM selector of container, e.g. "#my-diagram"
    * @param {Object} dimensions Height and width of pathway diagram
    * @param {Boolean} showClose Whether to show close button
-   * @param {Function} nodeHoverFn Function to call upon hovering diagram node
+   * @param {Function} geneNodeHoverFn Function to call upon hovering diagram node
   */
   static drawPathway(
     pwId, sourceGene, destGene,
     outerSelector,
     dimensions={height: 440, width: 900},
     showClose=true,
-    nodeHoverFn=undefined
+    geneNodeHoverFn=undefined,
+    pathwayNodeClickFn=undefined
   ) {
     _drawPathway(
       pwId, sourceGene, destGene,
       outerSelector,
       dimensions=dimensions,
       showClose=showClose,
-      nodeHoverFn=nodeHoverFn
+      geneNodeHoverFn=geneNodeHoverFn,
+      pathwayNodeClickFn=pathwayNodeClickFn
     );
   }
 

src/js/kit/pathway-viewer.js

@@ -300,7 +300,8 @@ export async function drawPathway(
   outerSelector='#_ideogramOuterWrap',
   dimensions={height: 440, width: 900},
   showClose=true,
-  nodeHoverFn,
+  geneNodeHoverFn,
+  pathwayNodeClickFn,
   retryAttempt=0
 ) {
   const pvjsScript = document.querySelector(`script[src="${PVJS_URL}"]`);
@@ -321,7 +322,8 @@ export async function drawPathway(
       setTimeout(() => {
         drawPathway(
           pwId, sourceGene, destGene,
-          outerSelector, dimensions, showClose, nodeHoverFn,
+          outerSelector, dimensions, showClose,
+          geneNodeHoverFn, pathwayNodeClickFn,
           retryAttempt++
         );
       }, 250);
@@ -401,20 +403,41 @@ export async function drawPathway(
   const ideogramPathwayEvent = new CustomEvent('ideogramDrawPathway', {detail});
   document.dispatchEvent(ideogramPathwayEvent);
 
-  pathwayContainer.querySelectorAll('g.GeneProduct').forEach(g => {
-    const geneName = g.getAttribute('name');
+  // Add mouseover handler to gene nodes in this pathway diagram
+  pathwayContainer.querySelectorAll('g.GeneProduct').forEach(geneNode => {
+    const geneName = geneNode.getAttribute('name');
     let tooltipContent = geneName;
-    g.addEventListener('mouseover', (event) => {
-      if (nodeHoverFn) {
-        tooltipContent = nodeHoverFn(event, geneName);
-        g.setAttribute('data-tippy-content', tooltipContent);
-        tippy('g.GeneProduct[data-tippy-content]', tippyConfig);
+    geneNode.addEventListener('mouseover', (event) => {
+      if (geneNodeHoverFn) {
+        tooltipContent = geneNodeHoverFn(event, geneName);
+        geneNode.setAttribute('data-tippy-content', tooltipContent);
       }
     });
 
-    g.setAttribute(`data-tippy-content`, tooltipContent);
+    geneNode.setAttribute(`data-tippy-content`, tooltipContent);
   });
-
   const tippyConfig = getTippyConfig();
   tippy('g.GeneProduct[data-tippy-content]', tippyConfig);
+
+  // Add click handler to pathway nodes in this pathway diagram
+  if (pathwayNodeClickFn) {
+    pathwayContainer.querySelectorAll('g.Pathway').forEach(pathwayNode => {
+
+      // Add customizable click handler
+      pathwayNode.addEventListener('click', (event) => {
+        const domClasses = Array.from(pathwayNode.classList);
+        const pathwayId = domClasses
+          .find(c => c.startsWith('WikiPathways_'))
+          .split('WikiPathways_')[1]; // e.g. WikiPathways_WP2815 -> WP2815
+
+        pathwayNodeClickFn(event, pathwayId);
+      });
+
+      // Indicate this new pathway can be rendered on click
+      const tooltipContent = 'Click to show pathway';
+      pathwayNode.setAttribute('data-tippy-content', tooltipContent);
+    });
+
+    tippy('g.Pathway[data-tippy-content]', tippyConfig);
+  }
 }

src/js/kit/related-genes.js

@@ -1657,12 +1657,20 @@ function addPathwayListeners(ideo) {
         // const pathwayName = target.getAttribute('data-pathway-name');
         // const pathway = {id: pathwayId, name: pathwayName};
         // plotPathwayGenes(searchedGene, pathway, ideo);
-        function nodeHoverFn(event, geneName) {
-          console.log('in nodeHoverFn')
+        function geneNodeHoverFn(event, geneName) {
+          console.log('in geneNodeHoverFn')
           return '<div>ok ' + geneName + '</div><div>1234</div>';
         }
+
+        function pathwayNodeClickFn(event, pathwayId) {
+          const pathwayNode = event.target;
+          console.log('in pathwayNodeClickFn, pathwayNode', pathwayNode);
+          console.log('in pathwayNodeClickFn, pathwayId', pathwayId);
+        }
+
         drawPathway(pathwayId, searchedGene, interactingGene,
-          undefined, undefined, undefined, nodeHoverFn);
+          undefined, undefined, undefined,
+          geneNodeHoverFn, pathwayNodeClickFn);
         event.stopPropagation();
       });
     });