Pushing new nodes to a graph/updating graph data

[RogerTangos]

Sorry if this is a noob react question. I'm trying to add and delete nodes and edges from an existing Sigma component. Currently, my component is set up as so:

<Sigma graph={{nodes:[{id:"n1", label:"Alice"}, {id:"n2", label:"Rabbit"}], edges:[{id:"e1",source:"n1",target:"n2",label:"SEES"}]}} settings={{drawEdges:true}}>
   <RelativeSize initialSize={15}/>
   <RandomizeNodePositions/>
</Sigma>

I can reach into the component and change Sigma.props.graph, but have trouble forcing the graph to re-render. How would you recommend doing this?

[RogerTangos]

@dunnock I'm at arcarter@csail.mit.edu if you'd like to correspond. (I did a quick search, but couldn't find your email.)

[dunnock]

Hi @RogerTangos, good spot! It was not possible in the previous version via props update, just fixed so with version 1.2.17 it should be possible.

I suggest to try to update graph data explicitly in JSX or using React.cloneElement, because React.Components.props is readonly from within react component. React reconciles component when rendering, making sure it does not create new component, rather calling componenDidUpdate, where refresh is handled now.

<Sigma graph={updatedGraphData} settings={{drawEdges:true}}>
   <RelativeSize initialSize={15}/>
   <RandomizeNodePositions/>
</Sigma>

Hope this helps!

[dunnock]

Should be fixed with 5d12186

[cecampos]

I still have the same problem. When new graph data comes, the old graph goes away but the new one is not rendered. No error is shown in console.

Any insights? I'm running react-sigma version 1.2.17.

[dunnock]

Hi @cecampos , I had to rollback the fix, since there is no graph merge function in sigma.js library. Therefore any update to the props was cleaning whole graph and setting up new without coordinates. Approach which @RogerTangos has taken appeared to be better - he is making it manageable via adding graph nodes as react components.

[jkolbe]

@dunnock, @RogerTangos could you possible share an example of how you managed to get the re-rendering to work?

[RogerTangos]

Hey @jkolbe and @cecampos, It's been a while since I worked on the project that was using this, so my information may be out of date.

In my graph's render function, I iterate over current nodes and then display them.

When the graph receives new properties, it reinitializes..

The nodes of a graph exist as their own components.

It's not an especially elegant solution, but it did work for our purposes (which were to demo).

A tip: when working with React-Sigma, I found that some combinations of sigma settings caused the graph to not render, or to behave in very strange and unintuitive ways. I'd encourage you to find a few sigmaSettings that work for you, and not change them until everything else with your graph is working.

[yonahforst]

Having the same issue with nodes not updating, and trying to implement @RogerTangos solution. I add the nodes+edges to the graph as react components, but they still dont update when i make changes. Specifically, I'm trying to change the label text. Do I need a hook in the componentWillReceiveProps of the node to call sigma.refresh() or remove+add the node?

[dunnock]

@yonahforst I also would suggest you to try <Sigma settings={{clone: false}} ...>, then each Node to keep a reference to its object, that it has put to sigma.addNode(nodeRef) from within you Node's componentDidMount(). Later in the Node's componentDidUpdate() if you update the nodeRef properties, it should update in the sigma graph. sigma.refresh() might be required though, I would suggest to try without it initially.

[yonahforst]

@dunnock - thanks! this seemed to work:

class SigmaNode extends Component {
  constructor(props){
    super(props);
    this.embedProps = this.embedProps.bind(this);
    this.node = { ...props }
    props.sigma.graph.addNode(this.node)
  }

  componentWillReceiveProps({  label }) {
    Object.assign(this.node, { label })
  }

[yonahforst]

I found a different way that seems to be more performant

class UpdateNodeProps extends React.Component {
  componentWillReceiveProps({ sigma, nodes }) {
    sigma.graph.nodes().forEach(n => {
      var updated = nodes.find(e => e.id == n.id)
      Object.assign(n, updated)
    })
  }

  render = () => null
}

....
<Sigma 
  graph={{ nodes, edges }}
  style={{ flex: 1 }}
  renderer='canvas'
  settings={settings}
  onClickNode={this.onClickNode.bind(this)}
  onClickStage={this.onClickStage.bind(this)}>

  <UpdateNodeProps nodes={nodes}/>

</Sigma>
...

[dunnock]

@yonahforst Great! Would you mind adding pull request with this component in /src and new small section in Readme.md?
Mutable graph nodes