Make node.renderLabel available at node level

[henzesberger]

Describe the bug
I'd like to show the label information only when the user hovers over the nodes.
Since there is already a renderLabel property on the nodes, I tried to change it in combination with onMouseOverNode and onMouseOutNode but unfortunately, the labels are not shown.

To Reproduce
Steps to reproduce the behavior:

1. Create a graph
2. Add some node data, set renderLabel in the global node config to false
3. Implement onMouseOverNode and onMouseOutNode (size is changed for reference)

  onMouseOverNode = function(nodeId) {
    const data = this.state.data;
    data.nodes = data.nodes.map(node => {
      if (node.id === nodeId) {
        node.renderLabel = true;
        node.size = 1000;
      }
      return node;
    });
    this.setState({ data });
  };

  onMouseOutNode = function(nodeId) {
    const data = this.state.data;
    data.nodes = data.nodes.map(node => {
      if (node.id === nodeId) {
        node.renderLabel = false;
        node.size = 400;
      }
      return node;
    });
    this.setState({ data });
  };

4. See that the size is changed on hovering but the labels are not shown

Expected behavior
The labels of the currently hovered node should be visible and the node size should be changed

Screenshots

Environment:

• OS: Win10 1803
• Browser: Chrome
• Version: 73.0.3683
• Node version: 11.13
• react-d3-graph version 2.0.1
• d3 version: d3-force 2.0.1
• react version: 16.4.1

[danielcaldas]

Hi @henzesberger,

node.renderLabel boolean (default true) | when set to false no labels will appear along side nodes in the graph.

This is not possible to achieve as you can see in the documentation node.renderLabel does not have the symbol 🔍🔍🔍. This symbol indicates that the config is granular at node level, meaning that you can pass it within the node as you have in your code node.renderLabel = true. If you look at the size you can see that it has the 🔍🔍🔍 symbol, meaning that you can actually have different sizes per node, that's why your assignment node.size = 400 works.

I'll tag this as a feature request and enhancement since it already exists in the global scope of the config.

[henzesberger]

Thank you very much, looking forward to have this feature.
It would be also great to have the same behavior for links.

[danielcaldas]

This issue is very similar to #234 and the others linked under the same issue.

[ashish10677]

Is this issue still open? I am a newbie and would like to contribute. Please let me know.

[danielcaldas]

Hey, @ashish10677 this issue is up for grabs, I'll assign it to you.

[gopherine]

if this is not yet done i will take it up also if possible can i get the list of all these local global changes i will implement them at once i see similar issues in here regarding the same

[ashish-param]

@gopherine you can take up the issue. I'm travelling this week and won't be able to do anything. @danielcaldas can you assign it to @gopherine

[danielcaldas]

Hey @gopherine go ahead I'll assign this to you 🙂

[gopherine]

sorry for the delay i got busy with university :) i will dive back into it today or tommorow

[danielcaldas]

np @gopherine! Thanks a lot for following up on this issue!

[danielcaldas]

Implemented in #267