Cytoscape edges aren't displayed on selection

Dash Python
1

Is it possible to preload edges into the Cytoscape elements, but highlight them and only those when an accoring node is selected?

Currently, i handle the tanNodeData input and return the edges of a selected node, but it’s quite long and component responsivity looks bad. Would be good to preload those edges to avoid requests to backend.

2

You could give them a classes on creation and only update the stylesheet.

3

Interesting, have you tried it? Or may be you saw an example and could share a link?

At the moment, i’m sending a patch with appended edges patch.append({'data': {'source': source, 'target': target}}) to elements which i would like to highliht. It doesn’t work well actually. i don’t know why, but Cytoscape doesn’t render all of them.

4

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)
5

So, this way allows us to load all the data at startup time and display only what we need at a time on selection by simply assigning a style to a selector?

Looks like what i’m lookig for.