When using react, the group config failed.

[hantongyou]

When I tried render my own data in local neo4j in react, and I tried to set static group attribute according to the node's type in neo4j. And it seems not working, the colors of nodes are not as I expected.

Sorry that I can only show part of the nodes, but as you can see, the color of different nodes are same.

Here is my code of react:

[hantongyou]

import { Component } from "react";
import NeoVis from "neovis.js";
 var neoViz;
 class View extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    draw = async () =>{
        const config = {
            containerId: "viz",
            neo4j: {
                serverUrl: "bolt://localhost:7687",
                serverUser: "neo4j",
                serverPassword: "123456"
            },
            labels: {
                Company: {
                    label: "Company",         
                    [NeoVis.NEOVIS_ADVANCED_CONFIG]:{
                        static:{
                            group:"Company"
                        }
                    }
                },
                BusinessRange: {
                    label: "BusinessRange",   
                    [NeoVis.NEOVIS_ADVANCED_CONFIG]:{
                        static:{
                            group:"BusinessRange"
                        }
                    }
                }
            },
            relationships: {
                        businessRangeHas:{
                            [NeoVis.NEOVIS_ADVANCED_CONFIG]:{function:{
                            label:NeoVis.objectToTitleHtml}
                    }}
            },
            initialCypher: "MATCH (n)-[r:businessRangeHas]->(m) RETURN * LIMIT 50"
        };        
        neoViz = new NeoVis(config);
        neoViz.render();
    }
    componentDidMount() {
        this.draw()
    }
    render() {
        return (
            <div style={{height:"100%",width:"100%"}}>
            <h1>
                hello
            </h1>
            <button onClick={this.draw}>show</button>
            <div id="viz" style={{height:"100%"}}>
            </div>
            </div>
        );
    }
}

export default View;

[thebestnom]

This is wierd, are you sure that are the real labels? Also yeah, I forgot to use the group default as label and I need to fix that by adding config 😅

[hantongyou]

Yeah, they are real labels, and I am not sure how to change the node color in neovis(especially in react), I tried to add:

color:"#ff0000"

in label config, however it just can not work either.

[thebestnom]

Maybe they are multilabled?

[thebestnom]

Because it should work

[hantongyou]

Actually they only got one label, I am confused now.

[thebestnom]

Also the label doesn't get apply either O think (as it should take it from the property) are can you send a kinimal sample data?

[hantongyou]

OK, thanks for your patience Company_BusinessRange_Relation.csv .

[thebestnom]

Hmm, I can't fully understand how it looks as a graph, can you send me output from the neo4j browser?

[hantongyou]

As the picture shows, for your convenience, I change the relation"经营范围有" to "businessRangeHas", but it does not matter I think.

[thebestnom]

Hmm... ill try to replicate the data at home later today, because it should work

[hantongyou]

Got it, thanks for your patience again. I am looking forward your reply soon.

[hantongyou]

Finally, it seems like the way of importing dependencies is not right. When switching to import * as NeoVis from "neovis.js", and correspondingly new NeoVis.NeoVis(config). It could work perfectly.

[hantongyou]

Anyway it is so kind of you, thanks. @thebestnom

[thebestnom]

Ahh of course 😅 sorry for not noticed that 😅