Some configuration seems superseded by certain global configuration

[XXPu6]

Expected Behavior (Mandatory)

Top level shape/color should be reflected on the graph. Even for static section in ADVANCED_CONFIG

                    labels: {

                            IP: {
                                    "label": "ipaddress",
                                    "shape": "square",  //not reflected
                                    [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                                            static: {
                                                    "shape": "square",    //not reflected
                                                    "color": "#FB7E81",  // not reflected
                                                    "font": {                    // not reflected
                                                            "size": 36,
                                                    },
                                            },
                                            cypher: {
                                                    value: "MATCH (n:IP) RETURN n"
                                            },
                                            function: {
                                                    title: NeoVis.objectToTitleHtml
                                            },
                                    },
                            },

                            visConfig: {   //Everything is reflected in the graph immediately but its only a subset of the nodes. ie only IP label, all others are ignored.
                                 nodes: {
                                    shape: 'circularImage',
                                    image: 'https://visjs.org/images/visjs_logo.png',
                                    color: '#ad74ce',
                               },
                              edges: {
                                      arrows: {
                                              to: {enabled: true}
                                      },
                                      font: { strokeWidth: 3, strokeColor: '#ffffff' },
                                      color: '#888'
                              },
                       },

Actual Behavior (Mandatory)

Shape and color should be reflected be configured in labels level. Only configuration in visConfig section within the config is reflected in the graph, but unable to achieve per label basis configuration.

How to Reproduce the Problem

Tested on v2.0.0-alpha and v2.02 Currently in running the graph in vue 3 and imported as component. All aspect of the graphing is running well except for label specific customization and physics.

[XXPu6]

Anyone able to help as I have issues for days on setting individual nodes styling properties like color/shape by label. Any suggestions or sample code appreciated.

Thank you so much.

[thebestnom]

Can you send example data and image of the output?

[thebestnom]

And how did you import NeoVis?

[XXPu6]

Thanks for helping @thebestnom appreciate your time.

/Subset of the code/ import { NeoVis } from 'neovis.js'

//Sample Label Section of config {}

                            IP: {
                                    label: 'ipaddress',
                                    group: 'ipaddress',
                                    [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                                            groups: {
                                                    ipaddress: {
                                                            "shape": "square",
                                                            "color": "#FB7E81",
                                                            "font": {
                                                                    "size": 36,
                                                            },
                                                    },
                                            },
                                            cypher: {
                                                    value: "MATCH (n) WHERE id(n) = $id RETURN n.size"
                                            },
                                            function: {
                                                    title: NeoVis.objectToTitleHtml
                                            },
                                    }
                            }

// Sample of visConfig within config {} visConfig: { nodes: { shape: 'circularImage', image: 'https://visjs.org/images/visjs_logo.png', color: '#ad74ce', }, groups: { ipaddress: { //shape: 'square', color: { background: 'red', border: 'white', } }, port1: { shape: 'circle', color: { background: 'green', border: 'white', } } },

Following are tested:

1. Label Section

   • shape/color per LabelName : {} Section //Not taking effect

2. NeoVis.NOEVIS_ADVANCED_CONFIG {} Section with:

   • Static {} section with spare and color //no effect globally and it does not support per Label customization

3. Group Level Settings and applying the group to the Label

   • Not working with the settings, however rainbow colors are assigned randomly when is applied as label name. ie 'ipaddress'

4. visConfig global config on node level is able to set the shape/color globally.

//Current Graph as per last config above

Will be great if you can share a working config that allows per label customization and physics.

[thebestnom]

Yeah, you also need to import NEOVIS_ADVANCED_CONFIG separatly ie import { NeoVis, NEOVIS_ADVANCED_CONFIG } from "neovis.js" and use it directly [NEOVIS_ADVANCED_CONFIG]: (I have to add that to the class, too many people have that problem 😅)

[XXPu6]

Hi @thebestnom I have imported as you mentioned but static settings under

LabelName: { NeoVis.NEOVIS_ADVANCED_CONFIG { static: { shape: 'square', color: { background: 'red', border: 'white' } } }

And config on label level still does not work. I was hopeful for a moment when you mentioned the import is wrong =)

Are you able to share a code snippet that has this working? Thank you so much.

[thebestnom]

You still use NeoVis.NEOVIS_ADVANCED_CONFIG, you need to use NEOVIS_ADVANCED_CONFIG directly as you imported it directly in order for it to work

[XXPu6]

Used [NEOVIS_ADVANCED_CONFIG]: but it hits a error and pointing to neovis-without-dependancies. Type Property field must be a function.

[thebestnom]

Can you put here full log of the error 😅

[XXPu6]

Error pointing to this section of code in "neovis-withoutdependancies" function $3(ie, ce) { if (typeof ie == "function") return ie(ce); throw new Error("Function type property field must be a function") }

Error on Browser Console:

Uncaught (in promise) Error: Function type property field must be a function
    at cb.$3 (neovis-without-dependencies.d7e23212.js:985:7910)
    at cb.pb (neovis-without-dependencies.d7e23212.js:985:8848)
    at pb.next (<anonymous>)
    at Function.all (<anonymous>)
    at cb.yb (neovis-without-dependencies.d7e23212.js:985:9514)
    at async cb.po (neovis-without-dependencies.d7e23212.js:985:10010)
    at async neovis-without-dependencies.d7e23212.js:985:2925
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Object.onCompleted (neovis-without-dependencies.d7e23212.js:985:4034)
$3 @ neovis-without-dependencies.d7e23212.js:985
pb @ neovis-without-dependencies.d7e23212.js:985
yb @ neovis-without-dependencies.d7e23212.js:985

Not sure if these are the logs you need. =)

[XXPu6]

Found the error, was testing random stuff and left it under ADVANCED_CONFIG. Thank you so much for helping and this is great stuff!

[thebestnom]

No problem 😄

[XXPu6]

RESOLVED

Have to import: import { NeoVis, NEOVIS_ADVANCED_CONFIG } from "neovis.js"

And apply: [NEOVIS_ADVANCED_CONFIG]:

instead of the usual: [NeoVis.NEOVIS_ADVANCED_CONFIG]: