doMore = (cy) => {
console.log(cy.nodes());
// cy.contextMenus(options);
cy.on('tap', 'node', e => {
console.log('tap', e.target.id());
});
}
comp = () => {
if (!this.rrr.current)
return null;
let cw = this.rrr.current.clientWidth;
let ch = this.rrr.current.clientHeight;
return (
<CytoscapeComponent
elements={data.elements}
layout={{name:"preset"}}
cy={(cy) => { this.cy = cy; this.doMore(cy);}}
style={{width:`${cw}px`, height:`${ch}px`}}
stylesheet={[
{
selector: "edge",
style: {
width: 2,
"curve-style": "taxi",
"taxi-direction": "rightward",
},
},
{
selector: "node",
style: {
shape: "rectangle",
width: 50,
"border-width": 2,
"border-color": "blue",
"background-color": "white",
},
},
{
selector: "node#aEnd",
style: {
shape: "ellipse",
height: 4,
width: 4,
"border-color": "red",
},
},
]}
/>
);
}
render = () => {
return (
<Grid columns={2} style={{height:"100vh"}}>
<Grid.Column width={4} style={{height:"100vh"}}>
<p>Test</p>
</Grid.Column>
<Ref innerRef={this.rrr}>
<Grid.Column width={12} style={{height:"100vh"}}>
{this.comp()}
</Grid.Column>
</Ref>
</Grid>
);
}
i have code that gets data and refreshes this component
after every refresh the number of events per node increases by 1
who should handle the
componentDidUpdatecase here?