Dash-cytoscape: network incompletely displayed; key to set a directed graph

Dash Python
1

I worked on a few networks with dash-cytoscape following the user guide, and the info posted at
js.cytoscape.org.
I enjoyed learning and working with dash-cytoscape, but sometimes I’m puzzled by how it works.

I have a few questions related to my WIP:

img1_app
img1_app.png2652×1567 1.01 MB

The network in the first image doesn’t fit the plotting window, no matter how I set in style the width and height. A few labels are clipped.
.
Is there a method to enforce plotting the network such that to be completely visible?

The second image:

canadian-univs

is a directed multigraph, i.e. a graph that has multiple edges between pairs o nodes.
It’s for the first time I can plot a multigraph, because the Python graph libraries although allow definition and analysis of such a networks they cannot plot them properly.

Although I used the same method as above to locate the node labels, here all labels are placed following the
default cytoscape.js rule. I don’t understand why my settings don’t work.

Moreover I have a few unique edges between pairs of nodes with "curve-style" set on "haystack" (for example between Univ of Alberta and Univ of Montreal). These edges however don’t have arrows and I cannot figure out why they aren’t displayed.

What is the best method to inform the app/cytoscape.js that my graph is oriented?

Here [https://github.com/empet/Dash-cytoscape-networks] (https://github.com/empet/Dash-cytoscape-networks) are the app, the data and style files, for the multigraph.
At the moment the edge colors are not the very informative, but in the first step I was interested only in
styling edge types and node labels. I’m still working on both networks.

2

Thank you for sharing! This looks amazing :slight_smile:

It’s hard to say whether the problems are caused by react-cytoscapejs or by dash-cytoscape. Taking a quick look at your code, I believe it would be really easy to reproduce the same graph in react (without any of the callbacks). If you want to try this, I’d recommend you to take a look at this issue and use the method presented to create your app, and replace the stylesheet and the elements with your json files.

3

@xhlu Seaching further for styling edges in directed graphs I found out the following comment on stackoverflow:
https://stackoverflow.com/questions/47634974/cytoscape-js-redundant-edges?rq=1
" also noticed you have directed arrows turned on. These won’t work with the default 'haystack' curve style, so I would suggest you use 'bezier' if you want to visualize directed edges."

Setting 'curve-style' as 'bezier' for all edges worked, because a unique edge between two nodes is just the Bezier curve with three colinear control points, i. e. a segment.

Here is the notebook that creates the json files for elements and stylesheet if some dash-cytoscape users are interested in multigraphs.

3 Likes
4

Glad you were able to resolve this!

For your first issue, have you tried setting the zoom level? It’s a parameter of the Cytoscape object, which you can read more about in the reference: https://dash.plot.ly/cytoscape/reference