Set different color for different edge groups

[xixibaobei]

Hi team, to my knowledge, default colors of edges same to the end points. I try to set edge colors by edges' attritube, how to do this?

relationships: {
    "relation1": {
        value: 'Control_Weight_Scaled',
        color: 'Control_effectiveness_rating',   // one attribute of edge, does't work
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            function: {
                title: NeoVis.objectToTitleHtml
            },
        }
    }
},

[thebestnom]

That's weird, can you check what is the value of Control_effectiveness_rating? By the vis doc it should be rgb object or rgb string or hex color

[xixibaobei]

That's weird, can you check what is the value of Control_effectiveness_rating? By the vis doc it should be rgb object or rgb string or hex color Control_effectiveness_rating could be one of (Partially Mitigating,Mitigating,NULL,Optimized,Non-Mitigating), all are string. How Can I set parameters to put different colors on edges? BTW, I set color:'red', the color still is black.

relationships: {
"mapped": {
value: 'Control_Weight_Scaled',
// width:'Control_Weight_Scaled',
// color: 'Control_effectiveness_rating',
color: 'red',
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
function: {
title: NeoVis.objectToTitleHtml
},
}
}
},

<img width="328" alt="image" src="https://user-images.githubusercontent.com/101168060/198548536-6a94c06f-a174-4955-91ad-dc1e6da165aa.png">

[thebestnom]

If you need a static red value in color youd have to put it in static in advanced config 😅

[xixibaobei]

If you need a static red value in color youd have to put it in static in advanced config 😅

sorry, the 'red'--it's just an experiment. I just wanna know how to make color changed by edges' attribute.

[thebestnom]

Ahh, can you send an relationship example so I can see 😅 best way to check whats happening in the end is checking what values are in the edges getter DataSet and see what vis object is present on the network

[xixibaobei]

so sorry for enough information here.

this is one relationship example, I wanna set different color by Control_effectiveness_rating(objective, 5 possible string value)

[thebestnom]

Hmm naybe somthing like

function: {
   color: (rel) => `#0000${Math.floor(rel.Control_effectiveness_rating)}`
// label
}

or somthing in that way just to get a color 😅

[xixibaobei]

Hmm naybe somthing like

function: {
   color: (rel) => `#0000${Math.floor(rel.Control_effectiveness_rating)}`
// label
}

or somthing in that way just to get a color 😅

Thank you very much for this kind suggestion, I modified my code like this,

                relationships: {
                    "mapped": {
                        value: 'Control_Weight_Scaled',
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: {
                                title: NeoVis.objectToTitleHtml,
                                color: (rel) => `#0000${Math.floor(rel.Control_effectiveness_rating)}`,
                            },
                        }
                    }
                },

but all colors still are black like this:

[thebestnom]

So weird, I wonder how it looks in the vis edge, can you print viz.edges?

[xixibaobei]

So weird, I wonder how it looks in the vis edge, can you print viz.edges?

Look like this

[thebestnom]

Print after the render complete 😅 Also viz.edges.get(1) so I can check how a single edge looks like

[xixibaobei]

viz.edges.get(1)

sorry, I'm a beginer, it's null, something wrong？

[thebestnom]

After render ending meaning that you'll have to wait until the asynchronous render will complete 😅

viz.render()
viz.registerOnEvent("completed", () => console.log(viz.edges.get(1)))

[xixibaobei]

After render ending meaning that you'll have to wait until the asynchronous render will complete 😅

viz.render()
viz.registerOnEvent("completed", () => console.log(viz.edges.get(1)))

result is like this.....sorry, if I had wrong movement, please tell me

[thebestnom]

your breakpoint is in the incorrect place 😅 you should put the breakpoint inside the console.log event

it will be easier if you will write it like so

viz.render()
viz.registerOnEvent("completed", () => {
    console.log(viz.edges.get(1)) // breakpoint here
})

[xixibaobei]

your breakpoint is in the incorrect place 😅 you should put the breakpoint inside the console.log event

it will be easier if you will write it like so

viz.render()
viz.registerOnEvent("completed", () => {
    console.log(viz.edges.get(1)) // breakpoint here
})

it's still null. let me put my whole code..

<script type="text/javascript">
        // define config car
        // instantiate nodevis object
        // draw
        var viz;
        function draw() {
            var config = {
                containerId: "viz",
                visConfig: {
                    edges: {
                        arrows: {
                            to: {enabled: true}
                        },
                        color:{
                            inherit:false,
                        },
                    },
                },
                neo4j: {
                    serverUrl: "bolt://localhost:7687",
                    serverUser: "neo4j",
                    serverPassword: "123456",
                },

                relationships: {
                    "mapped": {
                        value: 'Control_Weight_Scaled',
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: {
                                title: NeoVis.objectToTitleHtml,
                                color: (rel) => `#0000${Math.floor(rel.Control_effectiveness_rating)}`,
                            },
                        }
                    }
                },

                labels: {
                    "risk":{
                        label: "Residual_Risk",
                        group: "Residual_Risk",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]:{
                            static: {
                                // color: "#97c2fc",
                                shape: "diamond",
                                // font: 5,
                            },
                            function: {
                                title: NeoVis.objectToTitleHtml
                            },
                        }
                    },

                    "control": {
                        // label: "Control_Tested",
                        value: "Control_Tested",
                        group: "Control_Tested",
                        // shape: 'diamond',
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]:{
                            static: {
                                shape: "circle",
                                // font: "40"
                            },
                            function: {
                                title: NeoVis.objectToTitleHtml
                            },
                        }
                    },

                },

                initialCypher: "MATCH (n)-[r]-(m)  where m.Control_Tested<>'NULL' RETURN n,m,r  limit 100;"
                // where m.Control_Tested<>'NULL'
            };

            viz = new NeoVis.default(config);
            viz.render();
            viz.render()
            viz.registerOnEvent("completed", () => {
                console.log(viz.edges.get(1)) // breakpoint here
            })
            console.log(viz);

        }
    </script>

[thebestnom]

Oh, you didn't wait and you have 2 console logs and I see only 1 null log,

Maybe change

color: (rel) => `#0000${Math.floor(rel.Control_effectiveness_rating)}`

To

color: (rel) =>  {
console.log(rel);
return `#0000${Math.floor(rel.Control_effectiveness_rating)}`
}

so you could also test what getting into the color function

[xixibaobei]

Oh, you didn't wait and you have 2 console logs and I see only 1 null log,

Maybe change

color: (rel) => `#0000${Math.floor(rel.Control_effectiveness_rating)}`

To

color: (rel) =>  {
console.log(rel);
return `#0000${Math.floor(rel.Control_effectiveness_rating)}`
}

so you could also test what getting into the color function Thanks, my version is latest. When I add 'properties' attribute here and it works for me..

color: (rel) => `#0000${Math.floor(rel.properties.Control_effectiveness_rating)}`

Thank you again, I wanna know more about neovis advanved config, could you please give me some tutorial or documents?

[thebestnom]

https://neo4j-contrib.github.io/neovis.js/interfaces/LabelConfig.html It's the same for relationship config