Many layout algorithms are not centered

[shadiakiki1986]

Bug report

Bug summary

Using several layout algorithms result in a graph that is not centered. Below code snippet contains list of which ones yield centered graphs and which don't.

Code for reproduction

ex_json = {
    "nodes": [
        {"data": {"id": 0, "name": "A"}},
        {"data": {"id": 1, "name": "B"}},
        {"data": {"id": 2, "name": "C"}}
    ],
    "edges": [
        {"data": {"id": 3, "source": 0, "target": 1}},
        {"data": {"id": 4, "source": 0, "target": 2}},
    ]
}

import ipycytoscape
cyto = ipycytoscape.CytoscapeWidget()
cyto.graph.add_graph_from_json(ex_json)

# https://js.cytoscape.org/#layouts
#layout_name = "cola" # is centered <<<<<<<<<
#layout_name = "asvdf" # not centered
#layout_name = "cise" # not centered
#layout_name = "cose-bilkent" # not centered
#layout_name = "cosep" # not centered
#layout_name = "d3-force" # not centered
layout_name = "dagre" # is centered <<<<<<<<<
#layout_name = "elk" # not centered
#layout_name = "euler" # not centered
#layout_name = "fcose" # not centered
#layout_name = "klay" # is centered <<<<<<<<<
#layout_name = "ngraph.forcelayout" # not centered
#layout_name = "polywas" # not centered
#layout_name = "spread" # not centered
#layout_name = "springy" # not centered

cyto.set_layout(name=layout_name)
cyto

Actual outcome

COLA (centered):

ASVDF (not centered):

Expected outcome

Centered graph

Update: initially I filed this for ASVDF, but it turns out many algos have this issue

[marimeireles]

Wow, great issue! Thank you for testing with all of these @shadiakiki1986 :)

Ok, I think of two things when I read your issue:

1. All of the layouts who are centered were included in ipycytoscape deps. They're both on the package.json + imported on the typescript side. So, I'd say a good thing to try would be adding one of these other packages to the packagejson and importing it on the widget.ts file, like we do with ipycytoscape-cola for example.
2. If this is not it, my next step would look into the repositories of these layouts and see what kind of magical CSS they're setting so we can set on the others too. We either write code with specific selectors for each layout(not sure if this is possible) or a code that will be applied in the whole library. We have a css/widget.css file where these changes can be made. Or maybe we have to create a new file to make it cleaner? If this approach is taken we should check what other bigger more complex widgets (like bqplot for example) are doing and copy them.

For now I can't really tackle this, but I'm always around to answer questions and help any other way I can, both here and on gitter: https://gitter.im/QuantStack/Lobby

[salomonMuriel]

It is not that they are not centered, but that since they are not part of the package the graph breaks and all nodes are set in the upper-left corner of the canvas. They are all on top of each other.

The real issue here is that we should add more layouts to the Python package.