invalidateDimensions and resize

[rhjmoore]

I have a Dash app displaying a cytoscape graph. When I update parts of the DOM and provide a new, server updated cytoscape app then frequently the mouse points will end up out of sync with its position in within the DOM. This is the same issue as this:
https://stackoverflow.com/questions/23461322/cytoscape-js-wrong-mouse-pointer-position-after-container-change

and which is fixed using this:
https://js.cytoscape.org/#core/viewport-manipulation/cy.resize

Can we make it possible to either automatically or manually call cy.resize() so that we can resolve this problem, please?

[ZenabKhan]

Sadly I am also facing the same issue. Not sure if there is any fix for it.
@rhjmoore did you find any solution yet ?

[bedard-valleea]

I've encountered the same issue, adding content above the cytoscape graph made it so all clicks within the graph were offset until the window was scrolled. Adding the following custom Javascript (following the instructions here) to the Dash app this figure was a part of fixed the issue.

Note that here, 'query-network-container' is the ID of the div that contained the Dash Cytoscape object.

const targetNode = document.getElementById("react-entry-point");
// Options for the observer (which mutations to observe)
const config = { attributes: false, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
        if (document.getElementById('query-network-container')) {
            cy.resize(); //If we don't do this, clicks in the cytoscape graph on manage-dataset are offset everytime something is added or removed from the page after the graph.
        }
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);