I try to create a network visualization using Dash-cytoscape, and add selectEdgeData option to it. When I click on edge, the corresponding data label will show up at the bottom box.
Here is how I define my edge data:
cy_edges.append({ # Add the Edge Node
‘data’: {‘source’: source, ‘target’: target, ‘label’: edge_label, “weight”: edge_weight},
‘classes’: src_color,“selected”: True, “selectable”: True
})
Here is how I define the layout and callback:
app.layout=html.Div(
className=‘eight columns’,
children=[
dcc.Markdown(d("""
Click Edge
Click on edges in the graph.
“”")),
html.Pre(id=‘cytoscape-selectedEdgeData-json’, style=styles[‘pre’])
],
style={‘height’: ‘100px’})
@app.callback(dash.dependencies.Output(‘cytoscape-selectedEdgeData-json’, ‘children’),
[dash.dependencies.Input(‘my-graph’, ‘selectedEdgeData’)])
def displaySelectedEdgeData(data):
return json.dumps(data, indent=2)
When I click on edge, it should show the source, target, label and weight, but it gives an extra one called “id”. Here is an example:
{
“source”: “111”,
“target”: “123”,
“label”: “From: 111 To: 123”,
“weight”: 2.1,
“id”: “4d1e20e1-67bb-43d3-a399-fa7d8f1f7ae6”
}
Does anyone know where the “id” comes from? How can I remove it? Thanks in advance!