BUG: NO LINK GETS HIGHLIGHTED WHEN NODE ID IS NON-STIRNG

[iamhosseindhv]

Background: All nodes are identified by their id. In your SandBox example, a node's id is of type string. However, I'd like to use a unique number instead of string, since two nodes may have the same name, but it doesn't necessarily mean that they are the same. Currently, if I do use a number, this line causes mainNodeParticipates to be always false, because of the ===. As a result, no link gets highlighted when highlightDegree==1.

You should either replace === with == to allow integer ids, or you can add a property to nodes in the graph's config called identifierType (say). So that we can distinguish different id types and use a proper method to compare them. The latter seems to be cleaner.

react-d3-graph/src/components/graph/graph.helper.js

Line 217 in a8fd7d9

mainNodeParticipates = source === highlightedNode || target === highlightedNode;

[danielcaldas]

Hello @iamhosseindhv, you can use type Number as node identifiers, just make sure that source and target are also Number so that your graph data is consistent and cross-referring it within rd3g works as expected. Removing === is not a good practice as we would be allowing mixing data types where there's no need for it. Try this small data model on the Sandbox and try to compare it against what you're trying to achieve.

module.exports = {
    links: [
        {
            source: 1,
            target: 2
        },
        {
            source: 1,
            target: 3
        },
        {
            source: 1,
            target: 4
        }
    ],
    nodes: [
        {
            id: 1,
            name: 'Node 1'
        },
        {
            id: 2,
            name: 'Node 2'
        },
        {
            id: 3,
            name: 'Node 3'
        },
        {
            id: 4,
            name: 'Node 4'
        }
    ]
};

Also don't forget to set up properly the rd3g config for the highlight behavior, this includes: linkHighlightBehavior: true, nodeHighlightBehavior: true, highlightOpacity: 0.2 // or other, for more info please check official documentation.

[iamhosseindhv]

Thanks. But I was using a similar data model with target and source as Number. I tried loading the sample data you provided above but still no link gets highlighted.
Also, in function buildLinkProps in graph.helper.js, I tried logging the type of source, target and highlightedNode, and got string, string and number, respectively. So Again, mainNodeParticipates in this line would be always false.

[danielcaldas]

I see.. Do you have a sample code or repository that I can take a look at? It would be much easier to debug. EDIT: No need for it already spotted the error, a fix is on the way for this, thanks for that @iamhosseindhv nice catch!

[iamhosseindhv]

My pleasure. Thanks for the great work you put into this project ❤️

[danielcaldas]

Should now be fixed with release 1.2.2, closing this.