Network options ignored

[JeannedArk]

Hi, I really like your project. I have already one working HTML+JavaScript+vis.js solution and would like to use the same for my Dash app. However, I am running into trouble setting the options:

OPTIONS = dict(
    autoResize=True,
    height='600px',
    width='100%',
    locale='en',
    nodes=dict(
        shapeProperties=dict(useBorderWithImage=True),
        borderWidth=0,
        borderWidthSelected=5,
        color=dict(
            border='#FFFFFF',
            background='#FFFFFF',
            highlight=dict(border='#0000FF', background='#0000FF')
        ),
        font=dict(size=12, color='#000')
    ),
    edges=dict(
        color='black',
        length=200,
        arrows=dict(
            to=dict(enabled=True, scaleFactor=0.5)
        ),
        font=dict(size=12, color='#000')
    )
)

It works for the height, width, nodes.color. But it does not work for the nodes.shapeProperties and edges.color properties and I really don't have any clue why.

Maybe you can give a hint. Thanks.

[jimmybow]

the nodes and edges in options prop. mean default value for everyone, you can try set your edges.color in data prop. the attribute of data prop for each node and edge applied with priority if it is set.

[JeannedArk]

I hope I understood you correctly. I tried the following:

edge = {'color': 'red',
              'id': f"{source_state_o.unique_id} -> {resulting_state_o.unique_id}",
               'from': f"{source_state_o.unique_id}",
               'to': f"{resulting_state_o.unique_id}"}
node = {'id': f"{state.unique_id}",
                 'label': f"{state.unique_id}",
                 # 'color': 'black',
                 'shapeProperties': {'useBorderWithImage': True},
                 'image': 'Default.png'}

However, the very same properties mentioned above don't have any effect on the visualization as well when adding them to the individual node or edge. So setting node.color takes effect, but doing the same for edge.color has no effect. The same options work for my HTML+JavaScript+vis.js setup.

[jimmybow]

the color attribute need a format of dictionary as follows

    data ={
'nodes':[{'id': 1, 'label': 'Node 1', 'color': 'blue'},
                    {'id': 2, 'label': 'Node 2', 'color': 'red'},
                    {'id': 4, 'label': 'Node 4', 'color': 'blue'},
                    {'id': 5, 'label': 'Node 5', 'color': 'red'},
                    {'id': 6, 'label': 'Node 6', 'color': 'blue'}                    ],
'edges':[{'id':'1-2', 'from': 1, 'to': 2, 'color': {'color':'#00ff00'}} ]
           }

see the doc of vis.js

[JeannedArk]

Great! Though, the documents states "Object or String". Adding shape='image' also solved my image problem. Thanks!