Search code examples
javascriptcytoscape.jscytoscapecytoscape-web

Select just the child nodes of a parent node, and eliminate (temporarily) from the graph all other nodes in cytoscape.js

I just modified a sample from the cytoscape.js ("Animated BFS") and added some nodes:

$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
  .css({
    'content': 'data(id)',
    'background-color': 'data(myColor)'
  })
.selector('edge')
  .css({
    'target-arrow-shape': 'triangle',
    'width': 2,
    'line-color': '#ddd',
    'target-arrow-color': '#ddd'
  }),


elements: {
  nodes: [
    { data: { id: 'a', myColor: '#035530', addinf: 'sometext' } },
    { data: { id: 'b' } },
    { data: { id: 'c' } },
    { data: { id: 'd' } },
    { data: { id: 'e' } },
    { data: { id: 'ABC', myColor: '#CBB089' } },
    { data: { id: 'DEF', myColor: '#C0E234' } },
    { data: { id: 'GHI', myColor: '#C0E234' } },
    { data: { id: 'JKL', myColor: '#C0E234' } },
    { data: { id: 'MNO', myColor: '#C0E234' } },
    { data: { id: 'PQR', myColor: '#C0E234' } },
    { data: { id: 'STR', myColor: '#C0E234' } },
    { data: { id: 'ZXY', myColor: '#C0E234' } }

  ], 

  edges: [
    { data: { id: 'a"e', weight: 2, source: 'a', target: 'e' } },
    { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
    { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
    { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
    { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
    { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
    { data: { id: 'de', weight: 7, source: 'd', target: 'e' } },
    { data: { id: 'S', source:'a', target: 'ABC'}},
    { data: { id: '1', source:'a', target: 'DEF'}},
    { data: { id: '2', source:'b', target: 'GHI'}},
    { data: { id: '3', source:'e', target: 'JKL'}},   
    { data: { id: '4', source:'c', target: 'MNO'}},   
    { data: { id: '5', source:'d', target: 'PQR'}},   
    { data: { id: '6', source:'a', target: 'STR'}},   
    { data: { id: '7', source:'ABC', target: 'ZXY'}}
  ]
},

layout: {
name: 'breadthfirst',
directed: true,
fit: true,
maximalAdjustments: 10,
nodeRepulsion       : 1000,
nodeOverlap         : 10,
roots: '#a',
padding: 10
},

hideEdgesOnViewport: true,


ready: function(){
window.cy = this;

}

});


}); // on dom ready

And this is the resulting graph that I obtained (manually curated): resulting graph) So I just want to select for example the node 'a' ( by clicking it or by user input and save it in a variable) and all of the childs should remain displayed, but all the others should temporarily dissapear. Remaining with a photo like this: the result after I select a node

In Cytoscape.js how could I do that:

  1. Select the node 'a' and get all the childs to remain displayed, while the others dissapear.
  2. And if I would want the child + the grandchild of 'a' the commands will be different?
  3. Also, my last question: in node 'a' I have some additional information about the node "addinf: 'sometext'", how could it be also be displayed when the node is clicked?

Thanks in advance!

Solution

  • If you use directed eles.bfs(), you can build an array of visited elements -- perhaps limiting list based on depth.