ipycytoscape, draw subgraph

Question

I'm noob in ipycytoscape and Jupyter and seems need help. I'm trying to find a sutable way to show/draw subgraph after I click by node.

For example.

I have graph with node1---node2---node3 . I click by node1 and want to show

node1 --- node2.1 - node2.2 node2.3 --- node3.

Don't know how to make this. Tried to find in Google but coudn't find any suitable approach.

This is my simplest code for this. I no idea how to show and aftger hide (expand and collapse) subgraph. This code don't have this part.

I heard something about layouts but couldn't find sutable example for ipycytoscape.

Any ideas are welcome.

import ipycytoscape
import ipywidgets as widgets
import networkx as nx

counter = 0 # need to make new nodes with uniq id

data = {
    'nodes': [
        { 'data': { 'id': 'desktop', 'name': 'Cytoscape', 'href': 'http://cytoscape.org' } },
        { 'data': { 'id': 'a',       'name': 'Grid', 'href': 'http://cytoscape.org',   'parent': 'Cola'  } },
        { 'data': { 'id': 'c',       'name': 'Popper', 'href': 'http://cytoscape.org', 'parent': 'Cola' } },
        { 'data': { 'id': 'b',       'name': 'Cola', 'href': 'http://cytoscape.org' } },
        { 'data': { 'id': 'js',      'name': 'Cytoscape.js', 'href': 'http://js.cytoscape.org' } }
    ],
    'edges': [
        {'data': { 'source': 'desktop', 'target': 'js' }},
        {'data': { 'source': 'a', 'target': 'b' }},
        {'data': { 'source': 'a', 'target': 'c' }},
        {'data': { 'source': 'b', 'target': 'c' }},
        {'data': { 'source': 'js', 'target': 'b' }}
    ]
}

custom_inherited = ipycytoscape.CytoscapeWidget()
custom_inherited.graph.add_graph_from_json(data)

custom_inherited.set_style([{
                        'selector': 'node',
                        'css': {
                            'content': 'data(name)',
                            'text-valign': 'center',
                            'color': 'white',
                            'text-outline-width': 2,
                            'text-outline-color': 'green',
                            'background-color': 'green'
                        }
                        },
                        {
                         'selector': 'node[classes = "collapsed-childS"]',
                         'css': {
                            'background-color': 'red',
                            'line-color': 'blue',
                            'target-arrow-color': 'red',
                            'source-arrow-color': 'red',
                            'text-outline-color': 'red'
                          },
                        }
                        ])

# When I click to node by mouse I add some nodes. I made this because don't know how to show and hide subgraph. The question in this place.

def paint_blue(event):
    global counter
    
    for node in cytoscapeobj.graph.nodes:
        if node.data['id'] == event['data']['id']:
            auxNode = node
    
    auxNode.data['classes'] = "collapsed-childS"
    station_NUR = ipycytoscape.Node()
    station_NUR.data['id'] = "NUR" + str(counter) 
    station_NUR.data['name'] = station_NUR.data['id']
    station_NUR.data['classes'] = "collapsed-childS"

    station_FRA = ipycytoscape.Node()
    station_FRA.data['id'] = "FRA" + str(counter)
    station_FRA.data['name'] = station_FRA.data['id']
    station_FRA.data['classes'] = "collapsed-childS"
    
    new_edge1 = ipycytoscape.Edge()
    new_edge1.data['id'] = "line6" + str(counter)
    new_edge1.data['source'] = station_NUR.data['id']
    new_edge1.data['target'] = station_FRA.data['id']

    new_edge2 = ipycytoscape.Edge()
    new_edge2.data['id'] = "line7" + str(counter)
    new_edge2.data['source'] = station_NUR.data['id']
    new_edge2.data['target'] = auxNode.data['id']

  
    custom_inherited.graph.add_node(station_NUR)
    custom_inherited.graph.add_node(station_FRA)
    custom_inherited.graph.add_edges([new_edge1,new_edge2])

    counter = counter + 1   

custom_inherited.on('node', 'click', paint_blue)
custom_inherited