Nodes gather in the middle after using neoViz.renderWithCypher()

[XinyeYang]

Everything was fine during the first rendering.

When I use neoViz.renderWithCypher() to rerender the graph, nodes gather in the middle, it will take a long time to separate.

Is there any way to solve this problem?

[XinyeYang]

I set an event-listener on "CompletionEvent", it takes a long time to finish the "CompletionEvent" , once "CompletionEvent" finishes, the nodes separate in a short time.

[XinyeYang]

The problem seems to be in the render (query?: Cypher) function. I printed the records in the onNext function and found that dozens of pieces of data were printed each time when I call renderWithCypher (which takes a long time to complete), instead of printing them all like the first rendering.

[thebestnom]

I don't fully understand what you did to test that, render function us the main function so likely you'll find it slow there, but I don't understand what you mean by print

[thebestnom]

Also mind sending your configuration? A lot if cypher in the config may slow down the render

[XinyeYang]

Thank you for your reply!

I have about 5000 pieces of data, and in future use, I need to query based on keywords. Therefore, I used renderWithCypher, and the returned results may have up to 2000 pieces of data. I found that after execution, the query results were not all returned as they were when I first entered the page, but were divided into parts over a period of time(The number of nodes gradually increased and then separated after loading).

WhenrenderWithCypher returns a small amount of data, it runs quickly, but as the amount of data increases, it becomes time-consuming. So I looked at the source code and tried to figure out where it took a lot of time.

Here is my configuration

config = {
    containerId: "viz",
    neo4j: {
        serverUrl: "url",
        serverUser: "user",
        serverPassword: "password",
    },
    visConfig: {
        nodes: {
            shape: 'dot',
            size: 10
        },
        edges: {
            arrows: {
                to: { enabled: false }
            },
            selectionWidth: 3,
            color: {
                color: "#00ffff",
                highlight: "#ff0000",
            },
        },
        physics: {
            barnesHut: {
                theta: 2,
                springLength: 100,
                springConstant: 0.02,
                damping: 0.8,
                avoidOverlap: 0.2
            },
            solver: "barnesHut",
            timestep: 0.25,
            minVelocity: 0.1
        },
    },
    labels: {
        NEW_DCYD: {
            // label: ["CWE_ID"],
            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                static: {
                    color: {
                        border: "#ffffff",
                        background: "#ffffff",
                        highlight: {
                            border: "#ffffff",
                            background: "#000000"
                        }
                    },
                    shape: "dot",
                    size: 50,
                    borderWidth: "1",
                    font: {
                        "background": "none",
                        "strokeWidth": "0",
                        "size": 30,
                        "color": "#464646"
                    }
                },
                function: {
                    color: {
                        background: (node) => node.properties.CVE_ID ? "#bd6962" : node.properties.CWE_ID ? "#a4cbfa" : node.properties.PUBLISH_DATE ? "#f7ce46" : "#a4cb9d",
                    },
                    title: (node) => NeoVis.objectToTitleString(node, ["CVE_ID", "YEAR", "CWE_ID", "CAUSE", "LOCATION", "VERSION", "ATTACKER", "CONSEQUENCE", "OPERATION"])
                }
            }
        }
    },
    relationships: {
        CWE_NUMBER: {
            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                static: {
                    label: "CWE NUMBER",
                    color: "#ffffff",
                    font: {
                        "background": "none",
                        "strokeWidth": "0",
                        "size": edgeFontSize,
                        "color": "#f9dc73"
                    }
                }
            }
        },
        'LOCATION': {
            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                static: {
                    label: "LOCATION",
                    color: "#64b687",
                    font: {
                        "background": "none",
                        "strokeWidth": "0",
                        "size": edgeFontSize,
                        "color": "#437ce5"
                    }
                }
            }
        }
    },
    initialCypher: "MATCH (n:NEW_DCYD)-[r]->(m) WHERE n.YEAR >= '2022' RETURN *"
};

[XinyeYang]

I add a console.log in neovis.js like this, then check the browser console.

[thebestnom]

Most of the time is probably in the network, maybe try doing the same query in the neo4j console?

[XinyeYang]

Strangely, I am running on localhost, so maybe not the network problem. I just tried running in the neo4j console, it takes about 1 second.

It is worth mentioning that the results of renderWithCypher must be less than initialCypher.

[thebestnom]

Didn't mean network as in network speed, meant db speed 😅 Also that's really weird, there is no reason with your config that the time should be any different from the neo4j console... Trying to think what can make it... Can you run with debug on?

[XinyeYang]

I have no idea, even simply call neoViz.reload(); also take a lot of time.

[thebestnom]

They all just call render, try putting in your config debug: true it should print to console more data

[XinyeYang]

It seems like only my log.

[thebestnom]

My bad, consoleDebug: true

[XinyeYang]

When rendering for the first time, the log printed out all the data in an instant, and after reloading, it took several minutes to print, printing dozens at a time.

[thebestnom]

What do you mean by first time and second time?

[XinyeYang]

First time: enter the page. Second time: click 'query' button (call reload)

[thebestnom]

Does the query do somthing else? Like a different query? Did you test the same query in the neo4j console?

[XinyeYang]

It doesn't do something else, just a simple query. MATCH (n:NEW_DCYD)-[r]->(m) WHERE n.YEAR >= '2022' RETURN *

Yep, all the same.

[thebestnom]

That's doesn't make any sense to me 😅 Ill have to test that myself 😅 Reload just does the same thing again with the same query, there shouldn't be any difference

[thebestnom]

Maybe the clearNetwork is slow? Mind trying to call clearNetwork and the render (that's just what reload does) to check if maybe the clear takes time?

[XinyeYang]

I have tried clearNetwork before, it's very fast(maybe 1 ms).

If you need, I can send my code to your e-mail and install a neo4j on my server so that you can test my code.

[thebestnom]

Id love to, but I could only look at it in about few days

[XinyeYang]

That's OK, so can you tell me your e-mail?

[thebestnom]

Umm... Is there any place I can dm you?

[XinyeYang]

Maybe facebook or Wechat? Or something else?

[thebestnom]

Why github makes it hard 😅 I don't want to post it here but Im pretty sure I commited with my mail so you can check commit logs to get my mail

[XinyeYang]

Sorry about this 😵‍💫

Here is the download link: https://rissplat.dingdang.tech/DetectDataBunch/Neo4jDemo.zip

[thebestnom]

Downloaded to my phone, you can now delete if you want to

[XinyeYang]

Okay, look forward to your reply later.