I am trying to learn Dash Cytoscape and wanted to perform the following:
generate a graph with networkx, apply a fruchterman-reingold algorithm to position the nodes, convert the data to the cytoscape format and display it in a Dash app. Here is the code:

``````""" from networkx
to Dash cytoscape
"""
import dash_cytoscape as cyto
from dash import Dash, html
import networkx as nx

SCALING_FACTOR = 100  # try using to scatter nodes

app = Dash(__name__)

# 1) generate a networkx graph
G = nx.les_miserables_graph()

# 2) apply a netowrkx layouting algorithm
pos = nx.fruchterman_reingold_layout(G, k=0.1, iterations=2000, threshold=1e-10)

# 3) convert networkx graph to cytoscape format
cy = nx.cytoscape_data(G)

# 4.) Add the dictionary key label to the nodes list of cy
for n in cy["elements"]["nodes"]:
for k, v in n.items():
v["label"] = v.pop("value")

# 5.) Add the coords you got from (2) as coordinates of nodes in cy
for n, p in zip(cy["elements"]["nodes"], pos.values()):
n["pos"] = {"x": int(p[0] * SCALING_FACTOR), "y": int(p[1] * SCALING_FACTOR)}

# 6.) Take the results of (3)-(5) and write them to a list, like elements_ls
elements = cy["elements"]["nodes"] + cy["elements"]["edges"]

app.layout = html.Div(
[
cyto.Cytoscape(
id="cytoscape-layout-6",
elements=elements,
style={"width": "100%", "height": "800px"},
layout={"name": "preset"},  # "preset" to use the pos coords
)
]
)

if __name__ == "__main__":
app.run_server(debug=True)
``````

I am not seeing the nodes appear where they should be. As a matter of fact they all seem to be at the same coordinate collapsing into a single node.

Hopefully the runnable code comments will help understanding what Iâ€™m trying to do. Thank you for any help.

PS Is there some good tutorial on how to use other layout algorithm directly from Dash Cytoscape? I often need Fruchterman-Rheingold and force-atlas.