All nodes are accumulated in one position.

When creating a path using dagre, the whole nodes accumulate in one position. How can we set default positions for nodes ( Cytoscape js without react works fine) instead of setting position separately using position attribute for nodes.

const layout = { name: “dagre”, rankDir: “LR” } pageData = < CytoscapeComponent elements = { CytoscapeComponent.normalizeElements({ nodes: nodess, edges: edgess, layout: layout, }) } pan = { { x: 200, y: 200 } } autounselectify = { true } userZoomingEnabled = { false } boxSelectionEnabled = { false } style = { { width: “1200px”, height: “1000px” } } /> return ( < div

{ pageData } < /div> );

/------------------------------/ Expected Result

Current Result

[TheDahv]

I encountered something similar. I found a workaround but I don’t know if it’s a bandaid because I’m doing it wrong or not.

Effectively, I used the graph event hooks to call the layout function as nodes were added. Try this and see what works for you. Maybe it will uncover or yield insight into how it’s meant to be done:

<CytoscapeComponent
  cy={cy =>
    cy.on('add', 'node', _evt => {
      cy.layout(layoutOptions).run()
      cy.fit()
    })
  } 
/>

[EdwinSmulders]

What worked really well for me is this:

                    cy.on('resize', _evt => {
                        cy.layout(layoutOptions).run()
                        cy.fit()
                    })

This will run the layout the first time it configures the size, which is apparently after the nodes have been added. This is way more performance friendly than running it on every node add.