PyVis Graph shows some nodes colour as green and some as yellow even though the nodes are assigned with colour green

Question

I have generated a PyVis graph but the graph output has just one problem and seems i can't find the reason and lost to no ideas anymore, i am not sure if it is a bug in PyVis drawing or I have made an error in generating the graph. Please advise, i am keen to know the cause here.

The PyVis graph I have generated contains 196 nodes and 367 edges exactly. Of those 196 nodes, certain group of nodes are assigned with specific colours. About 42 nodes are assigned with colour "green" (using hex colour code #00ff00) and their shape has been changed to be a Square here for easy visual in an attempt to show my problem. Of those 42 nodes, 13 of them are not showing green but instead show yellow as their colour, even though the source code still have those nodes colour as green (in hex code), however the visual shows yellow.

Below one line code is me trying to point to the source code line of one node and its color is set to #00ff00.

{"color": "#00ff00", "font": {"color": "white", "face": "Verdana", "size": 90}, "group": "gp_b", "id": "node__120", "label": "node__120", "level": 3, "shape": "square", "size": 500} ,

The graph's full html code example is provided here linked to jsfiddle, please see if you can help me locate the problem and a fix. Thanks in advance.

https://jsfiddle.net/shashi12345/2pf781ba/1/

Additional info:-

Basically, the graph is first created using Python. I used NetworkX version 2.8.5, added nodes and edges and their attributes, and then imported that into PyVis all within Python. PyVis version i am using is 0.2.1. And the graph is generated/saved as html file from PyVis.

Answer 1

The vis.js vis-network library requires groups to be defined in the options as descibred in the documentation here. All square nodes are added to a group named gp_b however this isn't present in the vis-network options. It is odd that this results in the behaviour being seen, but it could be resolved in a number of ways described below.

As per the PyVis documentation here the options passed to vis.js can be configured which as is needed for some options below.

Adding Group to Options

Adding the group gp_b to the options without any styling defined fixes the issue, for example:

var options = {
  groups:{
    useDefaultGroups: true,
    gp_b:{ }
  },
  // Other options
}

Adding Group to Options With Styles

Alternatively the styling could be removed from the nodes and instead placed on the group, for example:

var options = {
  groups:{
    useDefaultGroups: true,
    gp_b:{
      color: '#00ff00'
    }
  },
  // Other options
}

Removing Group from Nodes

The group could also be removed from the nodes, this way they are not expecing style information from the group and will just the color they have defined.