iVis-at-Bilkent / cytoscape.js-expand-collapse

A Cytoscape.js extension to expand/collapse nodes for better management of complexity of compound graphs
MIT License
126 stars 37 forks source link

CollapsedChildren method on event's target object returns null even though elements are present inside #142

Open poornima-taranath opened 1 year ago

poornima-taranath commented 1 year ago

Environment info

Cytoscape.js version : 3.23 cytoscape-expand-collapse: "^4.1.0", Browser/Node.js & version : Chrome , 110.0.5481.180 Current (buggy) behaviour

What does the bug do? I am trying to use the collapsedChildren method to expand and collapse on double click event. Ideally, it should return a collection of all collapsed children but sometimes even with values present it returns null. Another related bug is, when children are returned by collapsedChildren() , inside the target object it shows as null, whereas it should have shown children elements in both cases.

Desired behaviour

What do you expect Cytoscape.js to do instead? It should return the collection whenever any children is present. If the target.data() object is opened, we can see that collapsedChildren has values inside of it but when called , it's returning null.

Reproduce the issue :

Initialize cytoscape

Attach any event handler( dbl click in my case)

let targetData = event.target; console.log(targetData.data() , targetData.data().collapsedChildren) The 2nd print results in null sometimes, during that you can open the targetData.data() and check for collapsedChildren.

Download and Initialize cytoscape-expand-Collapse (optional)

Entire event handler:

var api = cy.expandCollapse('get') //expand collapse get object to run it's methods.

 cy.on("dblclick", "node",function(event){
    let targetData = event.target;
    console.log(targetData.data() )
    console.log( 'collapsedchildren' , targetData.data().collapsedChildren)
    let collapsedChildrenArray = targetData.data()?.collapsedChildren
    console.log(collapsedChildrenArray?.size())
    if( collapsedChildrenArray !== undefined && collapsedChildrenArray !== null && collapsedChildrenArray.size() > 0)
      api.expand(targetData)
    else if( collapsedChildrenArray === undefined )
       return null 
    else {
      api.collapse(targetData)
    }

  })

The bug is captured in the below screenshot. collapsedChildren under the target object which is showing as null is when I have called the latter part of this code- console.log(targetData.data() , targetData.data().collapsedChildren) image

Bug screenshot where collapseChildren() returns elements but shows as null inside target image

From what the method's name indicates, it should provide the collapsedChildren when tried to access but the output is behaving exactly in the reverse expected fashion. Any comments and updates if I have misunderstood this method, is much appreciated. Thanks for taking your time to read so far.