Something like this:
from dash import Dash, Patch, Input, Output
import dash_cytoscape as cyto
import dash_html_components as html
app = Dash(__name__)
app.layout = html.Div([
cyto.Cytoscape(
stylesheet = [
{
'selector': 'node',
'style': {
'label': 'data(label)',
'font-size': '50px',
'text-valign': 'center',
'text-halign': 'right',
'color': 'white',
'text-outline-width': '2px',
"text-wrap": "wrap",
'background-color': '#121212',
'border-width': '5px',
'border-color': '#000000',
'width': '200px',
'height': '200px',
"text-wrap": "wrap"
}}
],
id='cytoscape',
elements=[
{'data': {'id': 'A'}},
{'data': {'id': 'B'}},
{'data': {'id': 'C'}},
{'data': {'id': 'AB', 'source': 'A', 'target': 'B'}},
{'data': {'id': 'BC', 'source': 'B', 'target': 'C'}}
],
layout={'name': 'grid'}
)
])
@app.callback(
Output('cytoscape', 'stylesheet'),
Input('cytoscape', 'tapNodeData')
)
def update_stylesheet(tap_node_data):
if tap_node_data is not None:
selected_node_id = tap_node_data['id']
new_stylesheet = Patch()
new_stylesheet.append({
'selector': f'edge[target="{selected_node_id}"]',
'style': {'line-color': 'red'}
})
return new_stylesheet
return Patch()
if __name__ == '__main__':
app.run_server(debug=True)