Error when attempting to drag custom nodes

[terahn]

When using custom nodes, attempting to drag any node results in an error.

This seems to happen because the nodeList contains 2 entries for each node (one containing the actual node information and another blank node), and the wrong one is being selected. This results in the state lookup for the specific node returning undefined.

My graph configuration:

{
  automaticRearrangeAfterDropNode: false,
  collapsible: false,
  directed: false,
  focusAnimationDuration: 0.75,
  focusZoom: 1,
  height: graphHeight,
  highlightDegree: 1,
  highlightOpacity: 0.2,
  linkHighlightBehavior: false,
  maxZoom: 8,
  minZoom: 0.1,
  nodeHighlightBehavior: true,
  panAndZoom: false,
  staticGraph: false,
  staticGraphWithDragAndDrop: false,
  width: graphWidth,
  d3: {
    alphaTarget: 0.05,
    gravity: -800,
    linkLength: 300,
    linkStrength: 1,
    disableLinkForce: false,
  },
  node: {
    color: '#d3d3d3',
    fontColor: 'black',
    fontSize: 16,
    fontWeight: 'normal',
    highlightColor: '#00e676',
    highlightFontSize: 16,
    highlightFontWeight: 'bold',
    highlightStrokeColor: 'SAME',
    highlightStrokeWidth: 1.5,
    labelProperty: 'name',
    mouseCursor: 'pointer',
    opacity: 1,
    renderLabel: true,
    size: 350,
    strokeColor: 'none',
    strokeWidth: 1.5,
    svg: '',
    symbolType: 'circle',
    viewGenerator: (node) => <CustomNode artist={node} />,
  },
  link: {
    color: '#d3d3d3',
    fontColor: 'red',
    fontSize: 10,
    fontWeight: 'normal',
    highlightColor: '#00e676',
    highlightFontSize: 8,
    highlightFontWeight: 'bold',
    mouseCursor: 'auto',
    opacity: 1,
    renderLabel: false,
    semanticStrokeWidth: false,
    strokeWidth: 4,
    markerHeight: 6,
    markerWidth: 6,
  },
}

[danielcaldas]

Hi @terahn are you able to provide a step by step where you replicate the issue in the official library live playground? I also have a custom node integration there and it does not break while drag&dropping? Maybe something specific to your implementation? Would it be a possibility for you to share a repo with the code? Cheers!

[terahn]

After more investigation I finally figured out what was causing the problem. My CustomNode component's outer div had a className of 'node' and I guess this was confusing d3 into thinking there was an additional node for each real node (since the outermost <g> also has a class of 'node').

<div className="node">
    <div
        className="node-img"
        style={{ backgroundImage: `url(${artist.img})` }}
    />
    <div className="node-tooltip">
        <div className="tooltip-arrow" />
        <div className="node-label">{artist.id}</div>
    </div>
</div>

Simply changing my CustomNode's class name to something other than 'node' solved this problem. I feel like this mistake could easily be made by others, so maybe it would be worth trying to find a way to prevent this from happening.

[danielcaldas]

I think from the library perspective I can try and make the class name more specific, it's a design mistake on my end. But removing it now it would be a breaking change.

On the client (developer) side, you can take the same precautions when writing your components and use something like CSS modules to make your CSS atomic and avoid clash naming with the vendor libs or other parts of your application.

[terahn]

Good suggestion! I'll have to look into that 👍