invalidateDimensions and resize

[rhjmoore]

invalidateDimensions and resize

[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);