OnHover and OnClick not working after new data is passed to graph about react-force-graph HOT 5 CLOSED

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!

from react-force-graph.

@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);
      }
    );

from react-force-graph.

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?

from react-force-graph.

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.

from react-force-graph.

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.

from react-force-graph.