2

I am trying to create a physics direct network graph using Dash Cytoscape. I have tried using Cose, Cose-Bilkent and now Cola, but my issue is that I cannot get the edge lengths to be cleary directly proportional to the weight.

In JS in Cola you can in the layout parameters for 'edgeLength' set to a function e.g. function(e){ return params.edgeLengthVal / e.data('weight'); }, but in Python I can't work out the alternative. Passing a defined function doesn't work, nor does passing a dict to layout, or specifying the EdgeLength for each element within the data dict.

If I could achieve something like this but in Python that would be ideal. I want to do it in Python as this is one of a series of Dash graphs which are part of a larger project entirely built in Python, and I am not familiar with JS.

import json

import dash
import dash_html_components as html

import dash_cytoscape as cyto
cyto.load_extra_layouts()
app = dash.Dash(__name__)
server = app.server

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

# Load Data
with open('data.json', 'r') as f:
    elements = json.loads(f.read())

nodes = [{"data":{"id":"1",'name':'1','score':1},"group": "nodes"},
         {"data":{"id":"2",'name':'2','score':0.1},"group": "nodes"},
         {"data":{"id":"3",'name':'3','score':0.1},"group": "nodes"},
         {"data":{"id":"4",'name':'4','score':0.1},"group": "nodes"}]

edges = [
    {"data":{"id":"1-2","source":"1","target":"2","weight":1},"group": "edges"},
    {"data":{"id":"1-3","source":"1","target":"3","weight":0.1},"group": "edges"},
    {"data":{"id":"1-4","source":"1","target":"4","weight":0.1},"group": "edges"},
    {"data":{"id":"2-3","source":"2","target":"3","weight":0.1},"group": "edges"},
    {"data":{"id":"2-4","source":"2","target":"4","weight":0.1},"group": "edges"},
    {"data":{"id":"3-4","source":"3","target":"4","weight":0.1,"edgeLength":20000},"group": "edges"}
]
elements = nodes + edges
print(elements)


with open('cy-style_2.json', 'r') as f:
    stylesheet = json.loads(f.read())

def length(edge):
    distance = 100/edge['data']['weight']
    return distance

# App
app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape',
        elements=elements,
        stylesheet=stylesheet,
        style={
            'width': '100%',
            'height': '100%',
            'position': 'absolute',
            'left': 0,
            'top': 0,
            'z-index': 999

        },
        layout={
            'name': 'cola',
            'EdgeLength': length,
            'maxSimulationTime': 8000,
            'convergenceThreshold': 0.001,
            'nodeOverlap': 20,
            'refresh': 20,
            'fit': True,
            'padding': 30,
            'randomize': True,
            'componentSpacing': 100,
            'nodeRepulsion': 400000,
            'edgeElasticity': 100000,
            'nestingFactor': 5,
            'gravity': 80,
            'numIter': 1000,
            'initialTemp': 200,
            'coolingFactor': 0.95,
            'minTemp': 1.0
        }
    )
])
print(app.layout)
if __name__ == '__main__':
    app.run_server(debug=True)
spike4848
  • 21
  • 1
  • 1
    This is an interesting issue. Consider opening an issue on the Github repo so we can discuss about it. Cheers, – Mariana Meireles Jul 26 '21 at 15:38
  • Any update on this? This is exactly what I am looking to do but cannot for the life of be figure out how to go about it short of having callbacks do it for me, which I would like to avoid. – jammertheprogrammer Jan 31 '23 at 03:16

1 Answers1

0

Maybe this could help: https://github.com/cytoscape/ipycytoscape/issues/82

Otherwise, this will fix your issue when clicking on the node (but not draging it)

nodes = [
     {"data":{"id":"1",'name':'1','score':1,'href':'www.mywebsite.com'},"group": "nodes"},
     {"data":{"id":"2",'name':'2','score':0.1,'href':'www.mywebsite.com'},"group": "nodes"},
     {"data":{"id":"3",'name':'3','score':0.1,'href':'www.mywebsite.com'},"group": "nodes"},
     {"data":{"id":"4",'name':'4','score':0.1,'href':'www.mywebsite.com'},"group": "nodes"}
]

and then add a callback

@app.callback(Output('cytoscape', 'layout'),
          [Input('cytoscape', 'tapNode')],
          [State('cytoscape', 'layout')])
def open_link_at_node_click(data, layout):
    """
        Open (default) web-browser
    """
    import sys
    import subprocess
    import webbrowser
    # Mac
    if sys.platform == 'darwin':
        subprocess.Popen(['open', data['data']['href']])
    # Linux & Windows
    else:
        webbrowser.open_new_tab(data['data']['href'])
    return {'name': layout}

Here the layout will be forced to refresh even if it's not the purpose. However, it does the trick. One way would be to find a better "output" such as an hidden div maybe.

g42l
  • 1