OnHover and OnClick not working after new data is passed to graph

[patsta32]

Hello

I am trying to pass new data into the graph with

this.setState({graph: this.state.graph.concat(newGraph)})

and the graph ist bound to

graphData={this.state.graph}

It renders correctly but onhover and onclick are not working anymore, but only after i passed in new Data.
The nodeCanvasObject function is called, i logged it to the console.
I can pan and zoom on the canvas .

I hope i gave you enough information so that

Thank you in advance

Best regards,

PatStadler

[GeoffGodwin]

Is this still an issue? I can't reproduce this as my state changes the graphData and it reflects in each render just fine. Can you post your onHover and onClick code as a example?

[GeoffGodwin]

So new finding on this front. If I take the entire graphData object and replace it in state, the graph no longer has accurate hovering logic. Hovering over nodes causes the onLinkHover code to fire and links to highlight instead of the nodes. Nodes become unclickable and unhoverable.

[GeoffGodwin]

So, I found the issue was being caused not by this application but by React. I was saving nodes into local storage then trying to pull them back out and reference them. I'm guessing because React keeps track of keys for the virtual DOM, by bringing them back out with now conflicting references I was getting this weird behavior.

I used Object.assign({}, node) to solve my issue after pulling the data back out of local storage. All good!

[WillFardell]

I think I have encountered the same problem when using the ForceGraph2D with React and Redux. I am not sure it is an issue with React. Inside the Redux Store I can see the graph data has been updated:

Orginal:

{
  "nodes" : [ {
    "id" : 756,
    "type" : "name",
    "xconst" : "nm0000199",
    "name" : "Al Pacino"
  }, 
  ...
  ],
  "links" : [ {
    "source" : 755,
    "target" : 756,
    "type" : "actor"
  },
  ... 
  ]
}

Modified:

{
  "nodes": [
    {
      "id": 756,
      "type": "name",
      "xconst": "nm0000199",
      "name": "Al Pacino",
      "__indexColor": "#ec0001",
      "index": 0,
      "x": -11.978053627029244,
      "y": 10.996428026516487,
      "vx": -3.861316660588826,
      "vy": 1.1660054263690713
    },
    ...
  ],
  "links": [
    {
      "source": {
        "id": 755,
        "type": "title",
        "xconst": "tt0099674",
        "name": "The Godfather: Part III",
        "__indexColor": "#d80002",
        "index": 1,
        "x": -13.541899642507312,
        "y": -34.95916334181548,
        "vx": -0.49469138005269053,
        "vy": -5.479749075717602
      },
      "target": {
        "id": 756,
        "type": "name",
        "xconst": "nm0000199",
        "name": "Al Pacino",
        "__indexColor": "#ec0001",
        "index": 0,
        "x": -11.978053627029244,
        "y": 10.996428026516487,
        "vx": -3.861316660588826,
        "vy": 1.1660054263690713
      },
      "type": "actor",
      "__indexColor": "#480096",
      "index": 0,
      "__controlPoints": null
    },
    ...
  ]
}

When I try and resuse the modified data the nodes and links are drawn correctly but the hover and clicks no longer work.

Adding the shallow copy (Object.assign) did not resolve my issue. I added a deep copy (in the Container) before passing the data from the store to the graph. This leaves the store version untouched and in a state that it can be reused.

[varqasim]

@GeoffGodwin Your suggestion worked for me using the Object.assign({}, data). Whenever the data (nodes and links) change, I use setState to update my data, and referenced this.state.data the graph. Thanks!

this.setState(
      {
        cooldownTicks: 1500,
        data: Object.assign({}, data),
      },
      () => {
        setTimeout(() => {
          this.setState({
            cooldownTicks: 0,
          });
        }, 1500);
      }
    );