OnNodePositionChange fires unreliably.

[azraeiden]

Describe the bug
When creating a graph with OnNodePositionChange set to a function, upon manually moving a node, the OnNodPositionChange function only fires sometimes.

To Reproduce
Steps to reproduce the behavior:

The most basic graph i can create, where I copy the 3 node example into a create-react-app, exhibits this behavior

Code:
App.js:
/////////////////////////////////////////////////////////////////////////////////////////////////////
import React from 'react';
import logo from './logo.svg';
// @ts-ignore
import './App.css';
import Thegraph from './components/Thegraph.js'
// import About from './About'

function App() {
return (

);
}

export default App;

//////////////////////////////////////////////////////////////////////////////////////////////

Thegraph.js:

/////////////////////////////////////////////////////////////////////////////////////////////////////
import React from 'react';
import { Graph } from 'react-d3-graph';

// graph payload (with minimalist structure)
const data = {
nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
links: [{ source: "Harry", target: "Sally" }, { source: "Harry", target: "Alice" }],
};

// the graph configuration, you only need to pass down properties
// that you want to override, otherwise default ones will be used

function Thegraph() {

const myConfig = {
nodeHighlightBehavior: true,
node: {
color: "lightgreen",
size: 120,
highlightStrokeColor: "blue",
},
link: {
highlightColor: "lightblue",
},
directed: true
};

// graph event callbacks
const onClickGraph = function() {
console.log(Clicked the graph background);
};

const onClickNode = function(nodeId) {
console.log(Clicked node ${nodeId});
};

// eslint-disable-next-line
const onDoubleClickNode = function(nodeId) {
console.log(Double clicked node ${nodeId});
};

const onRightClickNode = function(event, nodeId) {
console.log(Right clicked node ${nodeId});
};

// eslint-disable-next-line
const onMouseOverNode = function(nodeId) {
console.log(Mouse over node ${nodeId});
};

// eslint-disable-next-line
const onMouseOutNode = function(nodeId) {
console.log(Mouse out node ${nodeId});
};

const onClickLink = function(source, target) {
console.log(Clicked link between ${source} and ${target});
};

const onRightClickLink = function(event, source, target) {
console.log(Right clicked link between ${source} and ${target});
};

// eslint-disable-next-line
const onMouseOverLink = function(source, target) {
console.log(Mouse over in link between ${source} and ${target});
};

// eslint-disable-next-line
const onMouseOutLink = function(source, target) {
console.log(Mouse out link between ${source} and ${target});
};

const onNodePositionChange = function(nodeId, x, y) {
console.log(Node ${nodeId} is moved to new position. New position is x= ${x} y= ${y});
};

return <Graph
id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
data={data}
config={myConfig}
onClickNode={onClickNode}
onRightClickNode={onRightClickNode}
onClickGraph={onClickGraph}
onClickLink={onClickLink}
onRightClickLink={onRightClickLink}
onNodePositionChange={onNodePositionChange}
/>
}

export default Thegraph
///////////////////////////////////////////////////////////////////////////////////////////

Expected behavior
OnNodePositionChange should fire the function every time a node is moved.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment:

• OS: iOS
• Browser Chrome
• Version 78.0.3904.70
• Node version Unsure
• react-d3-graph version 2.3.0
• d3 version 5.14.2
• react version 16.12.0

Additional context
OnNodePositionChange fires its function much more often with short, very fast movements. It reaches near 100% firing rate under such conditions. With long, slow, movements, the firing rate is more like 50%.

[danielcaldas]

Hello @azraeiden thanks for the detailed report. Are you able to reproduce the same issue in the live sandbox example? Also, there is pretty easy to detect onNodePositionChange calls since we log it at every time a node position changes.

I tested it myself and I could not find so far any anomaly in the calls to onNodePositionChange. Would you be able to provide more context into this? Thanks in advance!

[azraeiden]

Thanks for the response @danielcaldas. Yes I was able to reproduce the issue. In the screenshot I have shown below I moved nodes Guardian and Broodmhome a total of four times, and as you can see onNodePositionChange only was called twice. I tested it a few more times, and maintained an onNodePositionChange fire rate of about 60%. Also I'm using the high contrast plugin, which is why the screen may look different, but I disabled the plugin and was still able to reproduce the issue.

Edit: Someone else I work with was also able to reproduce the issue. Still greater than 50% fire rate, but unreliable.

[Kav91]

@danielcaldas @azraeiden pretty sure this is the same thing I fixed awhile back in #264
Fixed it in this PR thats been merged already #266
Would be worth creating a new release, so people can get the latest fixes like this.
I'm still using a personal release because of this.

[danielcaldas]

I'll try to have a release out asap @Kav91

[danielcaldas]

Closing as a duplicate of #266

[azraeiden]

Hey, just wanted to say thank you for fixing this. It works perfectly.