Proper visualization in Neo4j browser but improper using Neovis

[sucheta]

Hi,

I am facing an issue while using Neovis.js . I get improper visualization in my front-end which uses Neovis.js code. And when i run the same query in Neo4j Desktop version/browser , i get proper visualization.
I believe the issue is that the names and not the relationships need to be displayed.
Is there a cypher query for displaying the node names and not the relationship names.

Actual Proper Visualization in Neo4j Browser

Improper Visualization using Neovis.js

code

 var cypherQuery = "MATCH (n) OPTIONAL MATCH (n)-[r]-(m) RETURN n,r,m";

         var config = {
             container_id: "viz",
             server_url: "bolt://localhost:11001/",
             server_user: "neo4j",
             server_password: "llib1",
             labels: {
               
                 "Banking": {
                     "caption": "name",
                     "size": "pagerank",
                     "community": "community"
                    
                 }
             },
             relationships: {
                 "cc": {
                     "thickness": "weight",
                     "caption": false
                 }
             },
             
           initial_cypher:cypherQuery ,        
            arrows: true,
            hierarchical_layout:true,
            hierarchical_sort_method:"directed",
            
         };                 
         this.viz = new NeoVis.default(config);  
      
    
         this.viz.render();
         console.log(this.viz);

Also,
[2]
When my cypher query is this ->

 var cypherQuery = "MATCH (n)--(m) RETURN n,m;"

or

  var cypherQuery = "MATCH (n) RETURN n;"

in Neovis.js code, i get only the nodes and not the relationships unlike in Neo4j browser

Please help resolve.

[lyonwj (William Lyon)]

Hi Sucheta - could you please clarify what you mean by improper visualization? It sounds like you want to change the captions for the nodes and/or relationships? Could you please give an example of what you'd like the Neovis visualization to include?

Regarding only displaying nodes, Neovis will only show the nodes, relationships, and paths explicitly returned in the Cypher query. So if you run

MATCH (n)-->(m) RETURN n,m

only nodes will shown as the query is only returning nodes (n and m). If you'd like to include relationships in the visualization you'll need to explicitly return relationships (or paths):

MATCH (n)-[r]->(m) RETURN n,r,m

[sucheta]

Hi William,

I will let you have a closer look. Please check the images -

Neo4j Browser Picture -

Here i have all the nodes with proper relationship names as well as proper node names.

Image using Neovis.js in front-end

Here the relationship names are proper . But the node names as the same as relationship names, which is improper.

The issue is , i ran a code from NodeJS and uploaded the database in Neo4j application . So the visualization in Neo4j browser of that uploaded database is the same. But that using the Neovis.js is improper, as seen in the images above.

Please help to resolve this distinction. Because eventually i shall be displaying using Neovis.js

[lyonwj (William Lyon)]

So the node caption is not what you want. To change node caption you'll just need to add an entry in the labels object in the config to specify the property value that should be used for the caption for each node label. If no configuration is specified then the node label is used.

So you would add something like:

 ...
 labels: {
           
             "Banking": {
                 "caption": "name",
                 "size": "pagerank",
                 "community": "community"
             },
             "Parameter": {
               "caption": "name"
            }
...

[vanshtuli1994]

Hi @lyonwj,

I have been trying to visualize few graphs using Neovis js.
Although, I am not able to fetch all relationships between the nodes.

Here is how my graph looks in Neo4j browser:

This same cluster looks like this in my react application:

Here is my config:

        const config = {
            arrows: true,
            // hierarchical: true,
            // hierarchical_sort_method: 'directed',
            container_id: visRef.current.id,
            server_url: neo4jUri,
            server_user: neo4jUser,
            server_password: neo4jPassword,
            labels: {
                Client: {
                    caption: "name",
                    size: "pagerank",
                    community: "firsPartyFraudGroup",
                },
            },
            relationships: {
                SHARED_IDENTIFIERS: {
                    caption: true,
                    thickness: "count",
                },
                HAS_PHONE: {
                    caption: true,
                    thickness: "count",
                },
                HAS_EMAIL: {
                    caption: true,
                    thickness: "count",
                },
                HAS_SSN: {
                    caption: true,
                    thickness: "count",
                },
            },
            initial_cypher:
                cypher,
        };
        const vis = new Neovis(config);
        vis.render();
    }, [neo4jUri, neo4jUser, neo4jPassword, cypher]);

Please can you help me with this? I need to figure out how I can show these remaining relationships.

[akollegger1 (Andreas Kollegger)]

Hi @vanshtuli1994 ,

Neo4j Browser fetches extra relationships between nodes which were not part of the original query. When using neovis, you'll want to query the complete pattern that you want to display.

Something you could try is turning off the extra relationships in Browser, so that you can adjust your Cypher query to include precisely what you want to show.

In Neo4j Browser, turn off the setting called "Connect result nodes" under the "Graph Visualization" section...

Best,
ABK

[vanshtuli1994]

Hi @abk,

Thank you for your reply.

Is there any way to show these extra relationships over Neovis js?

Also, if we use popoto js or d3.js, do we get a graph similar to Neo4j browser?

[akollegger1 (Andreas Kollegger)]

Hi @vanshtuli1994 ,

You could show exactly the same graph as Neo4j Browser does. You just need to modify your cypher query to MATCH all the nodes and relationships in the RETURN.

I haven't used popoto in a while and have forgotten how it manages styling. You can definitely achieve similar styling in d3.js using css. The most unique aspects of the Browser rendering is the curvature of the arrows, which were artfully crafted by @alistair.jones . Unfortunately the code for the maths is buried in Neo4j Browser.

Best,
ABK