Edges not getting plotted in Network graph

[AjitPS]

Hi, is there a limit on the number of nodes and edges that can be plotted via CytoscapeJS ?

I have a network graph with 300+ nodes and 300+ edges in a JSON object (generated in Java) but only the 1st 50 edges are shown. The rest of the edges are strangely missing from the generated network with no error message being thrown either. I have tried changing the layout from "coLa" to springy to breadthfirst but the problem persists.

This is troubling for me as some of the graphs I wish to generate will have 500+ nodes and 1000+ edges.

[maxkfranz]

Graphs far larger than that work for many people, including myself. Perhaps you ought to check that your elements JSON is valid.

If you run into an issue with the library itself, please post a full example that reproduces the issue.

[AjitPS]

Hi Max, I have been working on reproducing the issue for datasets of varying sizes and am strangely also getting the same error (i.e., some edges between nodes aren't plotted) for smaller datasets as well (just 30 nodes). I will look into my elements JSON contents and get back with a full example as soon as possible.

[AjitPS]

For a network graph with just 31 nodes, only 8 have edges plotted correctly despite the elements JSON file having no errors and specifying the source node, target node, node shape, colour, etc. correctly. I can provide the elements json and javascript code, if needed.

[AjitPS]

ElementsJSON:

var networkJSON= { "edges": [ { "data": { "id": "1", "source": "1", "target": "2", "label": "enc"} , "group": "edges"} , { "data": { "id": "2", "source": "2", "target": "3", "label": "has_p"} , "group": "edges"} , { "data": { "id": "3", "source": "2", "target": "4", "label": "has_similar"} , "group": "edges"} , { "data": { "id": "4", "source": "2", "target": "6", "label": "has_similar"} , "group": "edges"} , { "data": { "id": "5", "source": "2", "target": "7", "label": "ortho"} , "group": "edges"} , { "data": { "id": "6", "source": "2", "target": "8", "label": "ortho"} , "group": "edges"} , { "data": { "id": "7", "source": "4", "target": "5", "label": "part_of"} , "group": "edges"} , { "data": { "id": "8", "source": "4", "target": "10", "label": "has_f"} , "group": "edges"} , { "data": { "id": "9", "source": "4", "target": "11", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "10", "source": "4", "target": "12", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "11", "source": "4", "target": "13", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "12", "source": "4", "target": "14", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "13", "source": "4", "target": "15", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "14", "source": "4", "target": "16", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "15", "source": "4", "target": "17", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "16", "source": "4", "target": "18", "label": "part_in"} , "group": "edges"} , { "data": { "id": "17", "source": "4", "target": "19", "label": "part_in"} , "group": "edges"} , { "data": { "id": "18", "source": "6", "target": "10", "label": "has_f"} , "group": "edges"} , { "data": { "id": "19", "source": "6", "target": "15", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "20", "source": "6", "target": "20", "label": "part_in"} , "group": "edges"} , { "data": { "id": "21", "source": "6", "target": "21", "label": "part_in"} , "group": "edges"} , { "data": { "id": "22", "source": "6", "target": "22", "label": "part_in"} , "group": "edges"} , { "data": { "id": "23", "source": "6", "target": "23", "label": "part_in"} , "group": "edges"} , { "data": { "id": "24", "source": "6", "target": "25", "label": "part_in"} , "group": "edges"} , { "data": { "id": "25", "source": "9", "target": "7", "label": "enc"} , "group": "edges"} , { "data": { "id": "26", "source": "9", "target": "10", "label": "has_f"} , "group": "edges"} , { "data": { "id": "27", "source": "9", "target": "24", "label": "loc_in"} , "group": "edges"} , { "data": { "id": "28", "source": "9", "target": "27", "label": "part_in"} , "group": "edges"} , { "data": { "id": "29", "source": "9", "target": "28", "label": "pub_in"} , "group": "edges"} , { "data": { "id": "30", "source": "26", "target": "31", "label": "enc"} , "group": "edges"}, { "data": { "id": "31", "source": "29", "target": "3", "label": "has_p"} , "group": "edges"} , { "data": { "id": "32", "source": "29", "target": "4", "label": "has_similar"} , "group": "edges"} , { "data": { "id": "33", "source": "29", "target": "6", "label": "has_similar"} , "group": "edges"} , { "data": { "id": "34", "source": "29", "target": "7", "label": "ortho"} , "group": "edges"} , { "data": { "id": "35", "source": "29", "target": "8", "label": "ortho"} , "group": "edges"} , { "data": { "id": "36", "source": "30", "target": "29", "label": "enc"} , "group": "edges"} , { "data": { "id": "37", "source": "31", "target": "3", "label": "has_p"} , "group": "edges"} , { "data": { "id": "38", "source": "31", "target": "4", "label": "has_similar"} , "group": "edges"} , { "data": { "id": "39", "source": "31", "target": "6", "label": "has_similar"} , "group": "edges"} , { "data": { "id": "40", "source": "31", "target": "7", "label": "ortho"} , "group": "edges"} , { "data": { "id": "41", "source": "31", "target": "8", "label": "ortho"} , "group": "edges"} ],

"nodes": [ { "data": { "id": "1", "value": "BS_3468DEF53", "conceptColor": "cyan", "conceptShape": "triangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "2", "value": "BS_3468DEF53.1", "conceptColor": "red", "conceptShape": "ellipse", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "3", "value": "PF126", "conceptColor": "grey", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "4", "value": "D14", "conceptColor": "red", "conceptShape": "ellipse", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "5", "value": "3.1.-", "conceptColor": "cyan", "conceptShape": "triangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "6", "value": "D14L", "conceptColor": "red", "conceptShape": "ellipse", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "7", "value": "AT3G244", "conceptColor": "red", "conceptShape": "ellipse", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "8", "value": "MLOC_688", "conceptColor": "red", "conceptShape": "ellipse", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "9", "value": "AT3G244", "conceptColor": "cyan", "conceptShape": "triangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "10", "value": "F420", "conceptColor": "purple", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "11", "value": "23301669", "conceptColor": "orange", "conceptShape": "rectangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "12", "value": "19542179", "conceptColor": "orange", "conceptShape": "rectangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "13", "value": "19603144", "conceptColor": "orange", "conceptShape": "rectangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "14", "value": "15659436", "conceptColor": "orange", "conceptShape": "rectangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "15", "value": "18089549", "conceptColor": "orange", "conceptShape": "rectangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "16", "value": "17655651", "conceptColor": "orange", "conceptShape": "rectangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "17", "value": "22713366", "conceptColor": "orange", "conceptShape": "rectangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "18", "value": "strig", "conceptColor": "teal", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "19", "value": "shoot", "conceptColor": "teal", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "20", "value": "flave", "conceptColor": "teal", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "21", "value": "light", "conceptColor": "teal", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "22", "value": "sucr", "conceptColor": "teal", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "23", "value": "karri", "conceptColor": "teal", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "24", "value": "cyto", "conceptColor": "lightGreen", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "25", "value": "de-etio", "conceptColor": "teal", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "26", "value": "AS_901EDBCC0", "conceptColor": "cyan", "conceptShape": "triangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "27", "value": "bio_proc", "conceptColor": "teal", "conceptShape": "pentagon", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "28", "value": "20736450", "conceptColor": "orange", "conceptShape": "rectangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "29", "value": "DS_2B7B6BBCA.1", "conceptColor": "red", "conceptShape": "ellipse", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "30", "value": "DS_2B7B6BBCA", "conceptColor": "cyan", "conceptShape": "triangle", "visibleDisplay": "element"} , "group": "nodes"} , { "data": { "id": "31", "value": "AS_901EDBCC0.1", "conceptColor": "red", "conceptShape": "ellipse", "visibleDisplay": "element"} , "group": "nodes"}]} ;

[maxkfranz]

I suspect you've set your style in such a way that it's causing your issue. Whether it's caused by a bug or not, I'm not sure without being able to see a full running example.

You may also consider using classes for style instead of so many mappers. Mappers add expense.

[AjitPS]

Hi Max, thanks for your reply. However, I tried another network graph with a similar elements JSON and that worked despite having individual style mappers for every element. A full running example showing this error can be seen at: http://jsbin.com/yikatiqela/1/edit?js,output

Kindly let me know what you think is causing this example to fail.

[maxkfranz]

Thanks for the example; it will definitely help to shed light on the issue. I'll take a look and let you know.

[bertomaniac]

AjitPS, your elements JSON is malformed. Your edge IDs and node IDs overlap. My guess is that only edges 32-41 are being rendered. I believe the IDs have to be unique regardless if the element is a node or an edge.

Recommend using an id convention like n1, n2, n3 for nodes and e1, e2, e3 for edges. Hope that helps.

[AjitPS]

@bertomaniac Hi, thanks for your response. I will try that out. However, using the current malformed elements JSON strangely only edges 36-41 are plotted despite edge ID's 32-35 also being unique and not conflicting with node ID's.

[AjitPS]

@bertomaniac Your suggestion (having unique edge and node ID's using "e" prefixes for edges) fixed the issue. Thanks.

[maxkfranz]

In future for people with the same issue: There should be error messages in the console if the IDs collide.

[AjitPS]

Thanks Max. However, I did not get any error messages in the Console in my case. The edges with conflicting ID's were just not plotted. Glad that the issue is resolved now.

[maxkfranz]

TODO confirm console error message

[maxkfranz]

Please check your debug console. I have confirmed there is indeed an error message.

[JSv4]

I just encountered this exact problem and did not see an error message? Thank God for this post though or I would have been pulling my hair out.

[ArshadMuhammadSharjeel]

@maxkfranz @bertomaniac I am having this problem while generating property graph using cytoscape.js in oracle apex. I am new to cytoscape.js and oracle apex so i need help with it, if you can suggest solutions? Also the nodes are printed on top of eachother at the moment, so how can i use dynamic positions on x and y-axis. I have attached the picture below.

[dkrasniqi-mhp]

I just encountered this exact problem and did not see an error message? Thank God for this post though or I would have been pulling my hair out.

Can only confirm: THANK GOD FOR THIS POST!