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

[rabalasubramani3]

Thank you. Is it possible to push a fix sooner? I am pulling together a demo early this week and without the fix, it will be hard to make a good impression. :-)

[thebestnom]

Ill try my best, though if you have the time trying to fix it yourself would be way faster, it should be 2 line fixes, and I don't have a lot of time due to having work and a baby 😅

[thebestnom]

That's weird, it looks like I do try to handle this case, probably the driver decides to auto int it for some reason? This is data that comes from the server or straight from the neo4j?

[NeoZ666]

@darylfung96 So, this error persists for me as well when I used AuraDB Free version. I believe the data transfer isn't being done properly. However, I do get the expected resulted when I use Neo4j Desktop version.

In some other issue, it was also mentioned that Neovis works better with bolt:// schema than neo4j+s:// schema which might also be the reason. Use the same database on Neo4j desktop, remote/local connection and this shouldn't give any problems.

[thebestnom]

I wish I had time to look at it, somthing about the driver just works wrong, it doesn't comes as Neo4j Int, for some reason it's number which is broken for those ids as they are big number

[Sriram-84]

@thebestnom, has this issue got resolved. I am encountering the similar problem. The size of relationship ID generated seems to in the order of 263 (Neo4j Aura). I suppose max integer size of JS seems to be 253. Due to this I guess the relationship ID match is not happening and links/relationship between nodes are not shown correctly. Example: in Neo4J Aura is generated as follows "1155173304420550670".

[Liuz233]

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

How to use the fix？ I only quote. /static/neovis.js file

[darylfung96]

https://github.com/darylfung96/neovis.js

Try importing "dist/neovis.js" in the forked repo instead of "../static/neovis/js"

[thebestnom]

Hii @darylfung96 want to open a PR with that?

[darylfung96]

Hii @darylfung96 want to open a PR with that?

For sure, https://github.com/neo4j-contrib/neovis.js/pull/389

[Liuz233]

I tried this repo in AuraDB and it still fails due to infinity id. However, I try to use my local neo4j and it works with no infinity id.

[workerOn9]

https://github.com/darylfung96/neovis.js

Try importing "dist/neovis.js" in the forked repo instead of "../static/neovis/js"

hi, when i try to build your code, i got this

...neovis.ts: Private name #dataInfo is not defined. (628:7)

626 | 627 | const dataInfoLength = this.#dataInfo.length;

628 | this.#dataInfo.push(record); | ^ 629 | 630 | const dataPromises = record.map(async (v: object) => { 631 | this.#consoleLog('Constructor:');

missing dataInfo? what it use for?

[darylfung96]

https://github.com/darylfung96/neovis.js

Try importing "dist/neovis.js" in the forked repo instead of "../static/neovis/js"

hi, when i try to build your code, i got this

...neovis.ts: Private name #dataInfo is not defined. (628:7)

626 | 627 | const dataInfoLength = this.#dataInfo.length;

628 | this.#dataInfo.push(record); | ^ 629 | 630 | const dataPromises = record.map(async (v: object) => { 631 | this.#consoleLog('Constructor:');

missing dataInfo? what it use for?

I missed declaring that. The code has been updated. When I was using neovis, I needed to get the record information, dataInfo were used to store the information to tinker it further at the other end.