In my Next.js application, I'm using Cytoscape.js to produce data visualizations. I've enabled functionality using the Cytoscape Context Menus library to allow users to change the displayed label for a node using a dynamically generated list of options based on the respective node's properties. However, there are some instances when after modifying a node's label, it may overlap with another nearby node's label since it became a lot larger. I think I need to trigger a re-rendering of the layout whenever a user interacts with the visualization, so that the node with the modified label would be moved so that it wouldn't overlap with another node's label it would have otherwise.

I've tried the solution (i.e., setting infinite: true within the layout config object) from a similarly titled post on Stack Overflow, but unfortunately that didn't work for me. Is anyone aware of any other values I may need to add in the layout config object to make sure that the layout is re-rendered after each user interaction? Or is there something else I need to do? For context, we are using two layouts in our application: dagre & concentric. We use the dagre layout for general hierarchical left-right layout in our visualization and concentric layout to arrange placeholder nodes around their parent nodes. I'd really appreciate any help with this! I've included my code below:

Code:

const layoutConfig = {
    name: 'dagre',
    avoidOverlap: true,
    nodeDimensionsIncludeLabels: true,
    infinite: true,
    rankDir: 'LR',
    spacingFactor: 2,
    fit: false,
};

const circleLayoutConfig = {
    name: 'concentric',
    minNodeSpacing: 100,
    avoidOverlap: true,
    nodeDimensionsIncludeLabels: true,
    infinite: true,
    fit: false,
    padding: 100,
    boundingBox: {
        x1: x,
        y1: y,
        w: 10,
        h: 10,
    },
}

FWIW, I am using Cytoscape.js v3.21.1 & Cytoscape Context Menus v4.1.0.