Manually binding of mouseover/mouseout on cytoscape elements

Dash Python
1

Dash’s cytoscape supports callbacks on ‘mouseoverNodeData’ in order to receive ‘mouseover’ events on nodes.
I would like to further receive ‘mouseout’ events on nodes in a similar way (in the backend or at least client-side).

AFAICS this is not supported by dash, correct?

I tried to achieve this client-sided directly via “pure cytoscape”, that is, like the following (does not work):

  var cy = // how to get this reference? Creating a new instance would work like this: var cy = cytoscape({container: document.getElementById('cy')});
  cy.elements().unbind('mouseover');
  cy.elements().bind('mouseover', (event) => alert("SHOW "+event.target));
  cy.elements().unbind('mouseout');
  cy.elements().bind('mouseout', (event) => alert("HIDE "+event.target));

So, my two questions are:

  1. How can I get a reference in client-side JS to Dash’s cytoscape instance that is used for rendering?
  2. Is this a valid approach at all, or is there a better/easier solution to receive ‘mouseout’ events ?

(btw: since this is my first post, let me say thanks for the brilliant ploty-dash framework!!)

2 Likes
2

Hi,

Did you get any response or found an answer to this issue I am also facing at the moment?

Thanks