[bug?] Custom expand/collapse nodes

[marc-vdm]

Description

Hi Devs, awesome project! I'm working on code to show (parts of) graphs for our project Activity Browser.

What I want to make is a feature similar to #104, as this didn't yet exist, I thought I'd write it myself with a callback.
I had already written a Stackoverflow post, but after looking through the issues here, I'm getting a feeling there are bugs involved that are out of my control (e.g. #112), though I'm also experiencing the problem when using the Grid Layout.

Anyway, I will re-post most of the post from Stack Overflow as well:

---

I want to have an interactive graph, where I can click on a parent node, and the parent should 'collapse' (not show it's children anymore) or 'expand' (show it's children). This also means that the graph should replace the edges of it's children with edges to the parent.

As I'm still learning to use Dash-Cytoscape, I'm using a toy example. Each of the two graphs (with children and with children hidden) are separate variables. In my real project, I would dynamically re-generate the elements for the graph.

I can manage to write a callback function that happily feeds the graph a new set of elements when I click the right node (the special 'parent' nodes).

Note here, that I have both of the two example states showing what I want.

When I click the parent node, the elements should be replaced with the other state, making the graph show/hide the children of the parent.

See also the two states here:

What is going wrong:
What is instead happening is that the parent node is detached from the other nodes, it loses the edges connecting it to the rest of the graph.

See also the two broken states here:

What I tried:
So far, I loaded each of the states separately, this shows exactly what I want
I tried to make an MRE with fewer nodes and edges, but when I run that, there is no problem. I cannot see how my MRE differs from the 'real' code where it matters.

So to be clear: What I want is to be able to switch between the two top images, but this ends up breaking the network in some way I don't understand. If you want to see the other working graph in the main code, replace current_state = m_start_elements with current_state = start_elements.

Steps/Code to Reproduce

For reference, here's my MRE:

import dash
import dash_cytoscape as cyto
from dash import html
from dash.dependencies import Input, Output, State

import threading

n1 = {'data': {'id': 'n1', 
               'label': 'n1',
               'parent': 'p1'}}
n2 = {'data': {'id': 'n2', 
               'label': 'n2',
               'parent': 'p1'}}
n3 = {'data': {'id': 'n3', 
               'label': 'n3'}}

p1 = {'data': {'id': 'p1', 
               'label': 'p1'},
      'classes': 'parent_class'}
p2 = {'data': {'id': 'p2', 
               'label': 'p2'},
      'classes': 'parent_class'}

e1 = {'data': {'id': 'e1',
               'source': 'n1', 
               'target': 'n2', 
               'label': 'e1'}}
e2 = {'data': {'id': 'e2',
               'source': 'n2', 
               'target': 'n3', 
               'label': 'e2'}}

e3 = {'data': {'id': 'e3',
               'source': 'p2', 
               'target': 'n3', 
               'label': 'e3'}}

first_elems = [n1, n2, n3, p1, e1, e2]
other_elems = [n3, p2, e3]
current_state = first_elems

parent_names = ['p1', 'p2']


layout={'name': 'grid'}

stylesheet = [
    # Group selectors
    {'selector': 'node',
     'style': {'shape': 'round-rectangle',
               'content': 'data(label)'}},
    
    {'selector': 'edge',
     'style': {'content': 'data(label)',
               'curve-style': 'unbundled-bezier',
               'width': 1,
               'target-arrow-shape': 'triangle'}},

    # Class selectors
    {'selector': '.parent_class',
     'style': {'background-color': 'lightgreen',
               'border-color': 'black'}}]

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='test-cyto',
        layout=layout,
        style={'width': '100%', 'height': '600px'},
        stylesheet=stylesheet,
        elements=current_state,
        autounselectify=True
    )
])


@app.callback(Output('test-cyto', 'elements'),
              Input('test-cyto', 'tapNodeData'),
              State('test-cyto', 'elements'))
def actionTapNodeData(tap_data, elements):

    if tap_data == None:
        # no node was clicked
        current_state = elements
    elif tap_data['id'] not in parent_names:
        # no module was clicked
        current_state = elements
    else:
        # a module was clicked
        if elements == first_elems:
            current_state = other_elems
        else:
            current_state = first_elems
    
    return current_state


def run_dash():
    app.run_server(debug=False)

if __name__ == '__main__':
    
    server = threading.Thread(target=run_dash, daemon=True)
    server.start()

And here's my actual code:

import dash
import dash_cytoscape as cyto
from dash import html
from dash.dependencies import Input, Output, State

import threading
from math import pi

cyto.load_extra_layouts()


P1 = {'data': {'id': 'p1', 
               'label': 'Use Bulb'},
      'grabbable': False,
      'classes': 'process'}
P2 = {'data': {'id': 'p2', 
                'label': 'Prod. Bulb'}, 
      'grabbable': False,
      'classes': 'process'}
P3 = {'data': {'id': 'p3', 
               'label': 'Prod. Elec',
               'parent': 'm1'}, 
      'grabbable': False,
      'classes': 'process'}
P4 = {'data': {'id': 'p4', 
               'label': 'Incineration'}, 
      'grabbable': False,
      'classes': 'process'}
P5 = {'data': {'id': 'p5', 
               'label': 'Prod. Glass'}, 
      'grabbable': False,
      'classes': 'process'}
P6 = {'data': {'id': 'p6', 
               'label': 'Prod. Copper'}, 
      'grabbable': False,
      'classes': 'process'}
P7 = {'data': {'id': 'p7', 
               'label': 'Prod. Fuel',
               'parent': 'm1'}, 
      'grabbable': False,
      'classes': 'process'}

nodes = [P1, P2, P3, P4, P5, P6, P7]
part_of_nodes = [P1, P2, P4, P5, P6]

E1 = {'data': {'id': 'e1',
               'source': 'p7', 
               'target': 'p3', 
               'label': 'Fuel'}}
E2 = {'data': {'id': 'e2',
               'source': 'p3', 
               'target': 'p6', 
                'label': 'Elec.'}}
E3 = {'data': {'id': 'e3',
               'source': 'p3', 
               'target': 'p2', 
               'label': 'Elec.'}}
E4 = {'data': {'id': 'e4',
               'source': 'p3', 
               'target': 'p5', 
               'label': 'Elec.'}}
E5 = {'data': {'id': 'e5',
               'source': 'p3', 
               'target': 'p1', 
               'label': 'Elec.'}}
E6 = {'data': {'id': 'e6',
               'source': 'p6', 
               'target': 'p2', 
               'label': 'Copper'}}
E7 = {'data': {'id': 'e7',
               'source': 'p5', 
               'target': 'p2', 
               'label': 'Glass'}}
E8 = {'data': {'id': 'e8',
               'source': 'p2', 
               'target': 'p1', 
               'label': 'Bulb'}}
E9 = {'data': {'id': 'e9',
               'source': 'p4', 
               'target': 'p1', 
               'label': 'Waste Treatment'}}

E22 = {'data': {'id': 'e2',
                'source': 'm2', 
                'target': 'p6', 
                'label': 'Elec.'}}
E33 = {'data': {'id': 'e3',
                'source': 'm2', 
                'target': 'p2', 
                'label': 'Elec.'}}
E44 = {'data': {'id': 'e4',
                'source': 'm2', 
                'target': 'p5', 
                'label': 'Elec.'}}
E55 = {'data': {'id': 'e5',
                'source': 'm2', 
                'target': 'p1', 
                'label': 'Elec.'}}

edges = [E1, E2, E3, E4, E5, E6, E7, E8, E9]
part_of_edges = [E22, E33, E44, E55, E6, E7, E8, E9]

M1 = {'data': {'id': 'm1', 
                'label': 'Electricity prod'}, 
      'grabbable': False,
      'classes': 'module'}

M2 = {'data': {'id': 'm2', 
                'label': 'Electricity prod'}, 
      'grabbable': False,
      'classes': 'empty_mod'}


parents = [M1]
parent_names = [n['data']['id'] for n in parents + [M2]]

start_elements = nodes + parents + edges
m_start_elements = part_of_nodes + [M2] + part_of_edges
current_state = m_start_elements

layout={'name': 'dagre',
        'spacingFactor': 1.15}

# for more info on style: https://js.cytoscape.org/#style
#TODO maange to add location label in different color
stylesheet = [
    # Group selectors
    {'selector': 'node',
     'style': {'content': 'data(label)',
               'font-size': 8}},
    
    {'selector': 'edge',
     'style': {'content': 'data(label)',
               'curve-style': 'unbundled-bezier',
               'width': 1,
               'line-color': 'lightblue',
               'target-arrow-color': 'lightblue',
               'target-arrow-shape': 'triangle',
               'text-margin-x': 0,
               'font-size': 8}},

    # Class selectors
    {'selector': '.process',
     'style': {'shape': 'round-rectangle',
               'background-color': 'white',
               'border-color': 'black',
               'border-width': 1,
               'text-valign': 'center',
               'height': 40,
               'width': 75}},
    {'selector': '.module',
     'style': {'shape': 'rectangle',
               'background-color': 'lightgrey',
               'border-color': 'black',
               'border-width': 1,
               'text-valign': 'center',
               'text-halign': 'left',
               'text-margin-x': -2,
               'text-rotation': (pi*2*0.75)}},
    {'selector': '.empty_mod',
     'style': {'shape': 'rectangle',
               'background-color': 'lightgrey',
               'border-color': 'black',
               'border-width': 1,
               'text-valign': 'center',
               'height': 40,
               'width': 75}}]

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='test-cyto',
        # dagre layout: https://github.com/cytoscape/cytoscape.js-dagre
        layout=layout,
        style={'width': '100%', 'height': '600px'},
        stylesheet=stylesheet,
        elements=current_state,
        autounselectify=True
    ),
    html.Div(id='hidden-div', style={'display':'none'})
])


# interaction from: https://dash.plotly.com/cytoscape/events#simple-callback-construction
@app.callback(Output('test-cyto', 'elements'),
              Input('test-cyto', 'tapNodeData'),
              State('test-cyto', 'elements'))
def actionTapNodeData(tap_data, elements):

    if tap_data == None:
        # no node was clicked
        current_state = elements
    elif tap_data['id'] not in parent_names:
        # no module was clicked
        current_state = elements
    else:
        # a module was clicked
        if elements == start_elements:
            current_state = m_start_elements
        else:
            current_state = start_elements
    
    return current_state


def run_dash():
    app.run_server(debug=False)

if __name__ == '__main__':
    
    server = threading.Thread(target=run_dash, daemon=True)
    server.start()

Expected Results

See first two images above

Actual Results

See last two images

Versions

I'm using the Conda sources for the versions:

Dash 2.2.0
Dash Core Components 2.0.2
Dash HTML Components 2.2.0
Dash HTML Components 0.2.0

[gbernardino]

Oh, hi Mark,

it seems that the problem is that you are sharing the name of the edges E2 and E22, etc. Changing them makes it work as expected:

E22 = {'data': {'id': 'e22',
                'source': 'm2', 
                'target': 'p6', 
                'label': 'Elec.'}}
E33 = {'data': {'id': 'e33',
                'source': 'm2', 
                'target': 'p2', 
                'label': 'Elec.'}}
E44 = {'data': {'id': 'e44',
                'source': 'm2', 
                'target': 'p5', 
                'label': 'Elec.'}}
E55 = {'data': {'id': 'e55',
                'source': 'm2', 
                'target': 'p1', 
                'label': 'Elec.'}}

Unfortunately, I have no insights of why exactly it fails, and why it doesn't return an error