No relationships are shown with NeoVis

[darylfung96]

Expected Behavior (Mandatory)

Should have all the nodes connected with edges.

Actual Behavior (Mandatory)

Only one node is connected with another node.

How to Reproduce the Problem

 var config = {
                containerId: "viz",
                neo4j: {
                    serverUrl: "neo4j://<db>.databases.neo4j.io",
                    serverUser: "neo4j",
                    serverPassword: "password",
                    driverConfig: { 
                    encrypted: "ENCRYPTION_ON",
                    trust: "TRUST_SYSTEM_CA_SIGNED_CERTIFICATES"
                }				
                },
                visConfig: {
                            nodes: {
                                    shape: 'circle',
                                    // size: 20,
                                    font: {
                                        face: 'arial',
                                        size: 12, 
                                        strokeWidth: 0,

                                    },
                                    widthConstraint: 96,
                                    shadow: true,
                                },
                            edges: {
                                hoverWidth: 0,
                                selectionWidth: 0,
                                smooth: {
                                    type: 'continuous',
                                    roundness: 0.15
                                },
                                font: {
                                    size: 9,
                                    strokeWidth: 0,
                                    align: 'top'
                                },
                                color: {
                                    inherit: false
                                },
                                arrows: {
                                    to: {
                                        enabled: true,
                                        type: 'arrow',
                                        scaleFactor: 0.5
                                    }
                                }
                            }
            },
                labels: {
                    Site: {
                        label: "Site Name",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
							static: {
                                size: 250,
							},
                            cypher: {
                                value: "MATCH (n) RETURN (n)"
                            },
                            
                            function: {
                                title: function(node) {

                                    // split every 10th letter with new line
                                    var nameArray = node.properties['Site Name'].split(' ')
                                    var siteName = '';
                                    spaceCounter = 0
                                    for (const name of nameArray) {
                                        siteName += name + ' ';
                                        spaceCounter += name.length;
                                        if (spaceCounter > 10) {
                                            siteName += '\n'
                                            spaceCounter = 0;
                                        }
                                    }

                                    node.properties['Site Name'] = siteName;

                                    return node;
                                }
                            }
						}
                    },
                    Dataset: {
                        label: "Dataset Name"
                    }
                },
                relationships: {
                    CONTAINS: {
                        label: true,
                        value: 'weight',
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: {
								title: function(edge) {
                                    console.log(edge);
                                }
							}
                        }
                    }
                },
                initialCypher: cypherValue
            }

            var viz = new NeoVis.default(config);
            viz.render();

Screenshots (where it's possibile)

Specifications (Mandatory)

Currently used versions

Versions

• OS: Windows
• Library: JavaScript Web
• Neo4j: version 5

[thebestnom]

Are you checking that your cypher returns the relationships? Neo4j desktop auto adds relationships even if the cypher doesn't returns it

[darylfung96]

Are you checking that your cypher returns the relationships? Neo4j desktop auto adds relationships even if the cypher doesn't returns it

Yes I have checked and it is returning relationships using the cypher
MATCH (s:Site)-[r:CONTAINS]->(d:Dataset) RETURN s, r, d limit 3;

The results are:

[
  {
    "keys": [
      "s",
      "r",
      "d"
    ],
    "length": 3,
    "_fields": [
      {
        "identity": {
          "low": 0,
          "high": 0
        },
        "labels": [
          "Site"
        ],
        "properties": {
          "Site ID": "1",
          "Site Name": "Alberta SPOR SUPPORT Unit"
        },
        "elementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:0"
      },
      {
        "identity": {
          "low": 0,
          "high": 268435456
        },
        "start": {
          "low": 0,
          "high": 0
        },
        "end": {
          "low": 10,
          "high": 0
        },
        "type": "CONTAINS",
        "properties": {},
        "elementId": "5:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:1152921504606846976",
        "startNodeElementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:0",
        "endNodeElementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:10"
      },
      {
        "identity": {
          "low": 10,
          "high": 0
        },
        "labels": [
          "Dataset"
        ],
        "properties": {
          "Dataset Name": "Admission Discharge Transfer (ADT)",
          "Dataset ID": "1"
        },
        "elementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:10"
      }
    ],
    "_fieldLookup": {
      "s": 0,
      "r": 1,
      "d": 2
    }
  },
  {
    "keys": [
      "s",
      "r",
      "d"
    ],
    "length": 3,
    "_fields": [
      {
        "identity": {
          "low": 0,
          "high": 0
        },
        "labels": [
          "Site"
        ],
        "properties": {
          "Site ID": "1",
          "Site Name": "Alberta SPOR SUPPORT Unit"
        },
        "elementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:0"
      },
      {
        "identity": {
          "low": 0,
          "high": 268959744
        },
        "start": {
          "low": 0,
          "high": 0
        },
        "end": {
          "low": 12,
          "high": 0
        },
        "type": "CONTAINS",
        "properties": {},
        "elementId": "5:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:1155173304420532224",
        "startNodeElementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:0",
        "endNodeElementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:12"
      },
      {
        "identity": {
          "low": 12,
          "high": 0
        },
        "labels": [
          "Dataset"
        ],
        "properties": {
          "Dataset Name": "Alberta Ambulatory Care Reporting System (AACRS)",
          "Dataset ID": "3"
        },
        "elementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:12"
      }
    ],
    "_fieldLookup": {
      "s": 0,
      "r": 1,
      "d": 2
    }
  },
  {
    "keys": [
      "s",
      "r",
      "d"
    ],
    "length": 3,
    "_fields": [
      {
        "identity": {
          "low": 0,
          "high": 0
        },
        "labels": [
          "Site"
        ],
        "properties": {
          "Site ID": "1",
          "Site Name": "Alberta SPOR SUPPORT Unit"
        },
        "elementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:0"
      },
      {
        "identity": {
          "low": 0,
          "high": 269484032
        },
        "start": {
          "low": 0,
          "high": 0
        },
        "end": {
          "low": 13,
          "high": 0
        },
        "type": "CONTAINS",
        "properties": {},
        "elementId": "5:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:1157425104234217472",
        "startNodeElementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:0",
        "endNodeElementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:13"
      },
      {
        "identity": {
          "low": 13,
          "high": 0
        },
        "labels": [
          "Dataset"
        ],
        "properties": {
          "Dataset Name": "Alberta Cancer Registry",
          "Dataset ID": "4"
        },
        "elementId": "4:d1ea92e8-91b6-4bd0-a06b-8cb94c9d20a5:13"
      }
    ],
    "_fieldLookup": {
      "s": 0,
      "r": 1,
      "d": 2
    }
  }
]

[darylfung96]

After looking into it, I realised the reason why my graph is only showing one edge is because in https://github.com/neo4j-contrib/neovis.js/blob/master/src/neovis.ts#L640

const edge = await this.#buildEdgeVisObject(v);
this.#data.edges.update(edge);

All the edge returned has the id: Infinity, and this causes the graph to only render one edge. I am not sure if this happens for others

[thebestnom]

How... Are your ids are infinity??

[darylfung96]

I am not sure why it is infinity. I don't have id declared on relationships and I don't think we need to provide ids to relationships? My nodes do have ids.

I attached a screenshot, as you can see the record contains the nodes and the relationships and the relationship id is Infinity which is very odd.

[thebestnom]

Those ids should be generated bt neo4j, I don't think you can even disable it

[thebestnom]

Maybe mismatch of neo4j and js neo4j driver?

[darylfung96]

I am using neovis 2.1.0 and I am connecting directly to neo4j, maybe that could be the reason?
I am just assigning incremental id as as quick fix for the edges.

[oibafs]

Hi @darylfung96,

I'm facing exactly the same problem. How did you manage to reassign the edge ids?

[darylfung96]

Hi @darylfung96,

I'm facing exactly the same problem. How did you manage to reassign the edge ids?

@oibafs Hello Fabio, I added the length of the edge as the id to fix it. You can see the forked repo https://github.com/darylfung96/neovis.js

at line
https://github.com/darylfung96/neovis.js/blob/master/src/neovis.ts#L650

[rabalasubramani3]

Is there an update to it? Will this problem go away, if I downgrade to an earlier version. If so which version should I download to?

[thebestnom]

I didn't had time to investigate, but it's a problem on neo4j side (though probably intended) need to check for a better id generation for the relationships

[thebestnom]

Maybe by doing that the id is <from>_<to>

[rabalasubramani3]

@thebestnom Not clear what you mean by _. How about the solution @darylfung96 proposed? Displaying one edge doesn't look well for rendering the graph. Is there an alternate solution? Or any hacks I could do to get this going.

[thebestnom]

Ohhhh I read everything wrong, I fully understand the bug now my bad, I accidentally did toNumber on nimbers that are too big, for some reason I thought the bug was relationships without ids and I just misread, should be an easy fix, hope it will happen thus week