Cytoscape Compound node order of insertion

Question

I'm working with cytoscape (cola layout) and dynamic (insertion/removal) compound nodes and I was having an issue with parent nodes not displaying correctly. I realised that parent nodes needed to be inserted before child nodes but I'm wondering if there is an easier way to do this because everytime I insert a new node I need to go through my list of existing nodes and resort them to make sure parents are added before children.

Is there a way to set cytoscape to work in to passes so we don't have to sort nodes ? (1- node insertion, 2- draw layout) ?

Thanks for you help

Answer 1

this might help (colaConfig)

export default {
  boxSelectionEnabled: true,
  autounselectify: false,
  userZoomingEnabled: false,
  minZoom: 0.3,
  maxZoom: 1.5,
  wheelSensitivity: 0.1,

  layout: {
    name: 'cola',
    directed: false,
    fit: false, // on every layout reposition of nodes, fit the viewport
    animate: true, // whether to show the layout as it's running
    boundingBox: { x1:0, y1:0, w:0, h:0 },
    maxSimulationTime: 4000, // max length in ms to run the layout
    avoidOverlap: true, // if true, prevents overlap of node bounding boxes
    convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
    nodeDimensionsIncludeLabels: false,
//    nodeSpacing: 40,//function( edge ) { return edge.data('label').length * 5.5},
    infinite: false,
    refresh: 3, // number of ticks per frame; higher is faster but more jerky
  },

}

Answer 2

Ok so here's the code that update/load the data :

updateGraphData(data){
    if(data){
        this.cy.$('*').remove()
        this.cy.add(data)
//      this.cy.json({elements: data})
    }
    this.cy.makeLayout(ColaConfig.layout).run()
    this.cy.resize()
    this.cy.zoom(1)
    this.cy.center()
}

and here's what in data :

[  
   {  
      "data":{  
         "id":"b0489a7f-1794-3053-6bb5-f4fa5adcc129",
         "label":"Kid A",
         "conceptType":"Enfant",
         "parent":"415f5871-9312-5857-99bc-8a523283ebd9",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Enfant"
   },
   {  
      "data":{  
         "id":"415f5871-9312-5857-99bc-8a523283ebd9",
         "label":"I'm the parent",
         "conceptType":"Parent",
         "parent":"",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Parent"
   },
   {  
      "data":{  
         "id":"06e76ece-edee-5a55-1492-f4e22b5685d9",
         "label":"Kid B",
         "conceptType":"Enfant",
         "parent":"415f5871-9312-5857-99bc-8a523283ebd9",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Enfant"
   },
   {  
      "data":{  
         "id":"415f5871-9312-5857-99bc-8a523283ebd9",
         "label":"I'm the parent",
         "conceptType":"Parent",
         "parent":"",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Parent"
   },
   {  
      "data":{  
         "id":"6e65d053-a124-fc44-72b7-8563ee4ca63f",
         "label":"Kid C",
         "conceptType":"Enfant",
         "parent":"415f5871-9312-5857-99bc-8a523283ebd9",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Enfant"
   },
   {  
      "data":{  
         "id":"415f5871-9312-5857-99bc-8a523283ebd9",
         "label":"I'm the parent",
         "conceptType":"Parent",
         "parent":"",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Parent"
   },
   {  
      "data":{  
         "id":"415f5871-9312-5857-99bc-8a523283ebd9",
         "label":"I'm the parent",
         "conceptType":"Parent",
         "parent":"orphan",
         "hidden":false,
         "deprecated":false
      },
      "classes":"Parent"
   }
]

What I get :

What I get when I sort the nodes in my JSON (What I need)

Answer 3

Just add the elements in one operation rather than several operations.

cy.add(manyEles);

versus

cy.add(ele1);
cy.add(ele2);
// ...
cy.add(eleN);