Cytoscape.js: arbor/springy layouts and parent nodes

[roger.o...@irbbarcelona.org]

Hi all, 

First two questions about the arbor layout: 

- Why if you drag one node and drop it on another one, the entire network almost disappears except the edges? See attached image "possible-arbor-bug-1.jpg". This is the same error reported some days ago by Teresa Juan with subject "Arbor layout doesn't work properly with big networks (>150 nodes)".

- Also for the arbor layout, I've noticed that if "liveUpdate: false" and the zoom is modified at the "ready" function like this 

   ready: function() {

           window.cy = this;

              cy.zoom({

                  level: 0.1, // the zoom level

              renderedPosition: { x: 0, y: 0 }

              });

    }

the entire network resizes itself after some seconds. Please see the attached image "possible-arbor-bug-2.jpg" and the code "zoom.html". 

- Concerning the springy layout, I'm unable to use it. I'm getting the following error when starting a web page with this layout: 

"Can not apply layout: No such layout '%s' found; did you include its JS file?" 

I've checked the inclusion of both springy.js and springyui.js in my code and are present. See attached code: springy.html.

- Finally, I don't know how to change the style of one particular parent node. I mean, with this 

   .selector("$node > node") // compound (parent) node properties

         .css({

              'width': "auto",

              'height': "auto",

              'shape': "circle",

              'border-width': 0,

              'content': 'data(name)',

              'font-weight': 'bold',

              'text-valign': 'bottom',

              'font-size': <?php print $cw_cmpnd_label_width; ?>

         })

I can modify the style of ALL the parent nodes, but how to change only one? 

Thanks! 

Roger Olivella

[Max Franz]

On Wednesday, October 23, 2013 10:01:52 AM UTC-4, roger.o...@irbbarcelona.org wrote:

Hi all, 

First two questions about the arbor layout: 

- Why if you drag one node and drop it on another one, the entire network almost disappears except the edges? See attached image "possible-arbor-bug-1.jpg". This is the same error reported some days ago by Teresa Juan with subject "Arbor layout doesn't work properly with big networks (>150 nodes)".

Dragging a a node before, after, or during arbor?

 

- Also for the arbor layout, I've noticed that if "liveUpdate: false" and the zoom is modified at the "ready" function like this 

   ready: function() {

           window.cy = this;

              cy.zoom({

                  level: 0.1, // the zoom level

              renderedPosition: { x: 0, y: 0 }

              });

    }

the entire network resizes itself after some seconds. Please see the attached image "possible-arbor-bug-2.jpg" and the code "zoom.html". 

This is expected behaviour if you specified `fit: true` or similar in the layout options.  So, the layout overwrites whatever you set in `ready`.  The layout can modify the zoom and pan for the graph, so you've created a race condition.  Better to configure the layout and init options pan/zoom appropriately, and then let cy.js do its thing.  Alternatively, you could try binding to events like `layoutstop` so that your commands execute at the right time.

 

- Concerning the springy layout, I'm unable to use it. I'm getting the following error when starting a web page with this layout: 

"Can not apply layout: No such layout '%s' found; did you include its JS file?" 

I've checked the inclusion of both springy.js and springyui.js in my code and are present. See attached code: springy.html.

Springy is no longer maintained in favour of arbor, which is why it's no longer included in the distribution ZIP.  Maybe it should just be removed from the repo altogether.

 

- Finally, I don't know how to change the style of one particular parent node. I mean, with this 

   .selector("$node > node") // compound (parent) node properties

         .css({

              'width': "auto",

              'height': "auto",

              'shape': "circle",

              'border-width': 0,

              'content': 'data(name)',

              'font-weight': 'bold',

              'text-valign': 'bottom',

              'font-size': <?php print $cw_cmpnd_label_width; ?>

         })

I can modify the style of ALL the parent nodes, but how to change only one? 

Try a selector with a class or ID, as you would in HTML+CSS.

 

Thanks! 

Roger Olivella

[roger.o...@irbbarcelona.org]

Hi Max, 

What do you mean by "Dragging a node before, after, or during arbor?" ? What I understand is that after loading the arbor.js I drag the node and get the error. 

Thanks, 

Roger

El dilluns 28 d’octubre de 2013 20:39:02 UTC+1, Max Franz va escriure:

[roger.o...@irbbarcelona.org]

And if you mean during or after the animation takes place, in my case the behavior is AFTER the arbor.

Thank you, 

Roger

El dimarts 29 d’octubre de 2013 17:40:18 UTC+1, roger.o...@irbbarcelona.org va escriure:

[roger.o...@irbbarcelona.org]

Hi Max, all, 

Just to ask if there's some new idea about the unexpected behaviour when dragging a node and dropping it on another after the arbor layout. 

Or maybe any workaround? 

Thank you very much,

Roger

El dimecres 23 d’octubre de 2013 16:01:52 UTC+2, roger.o...@irbbarcelona.org va escriure:

[Max Franz]

If this is indeed the same issue as Teresa, you can confirm it by using `rectangle` instead of `roundrectangle`.  I couldn’t get her error to occur with plain rectangle shapes.  A fix has been pushed to the repo to fix the issue with `roundrectangle`, and if you `make zip` you’ll get a ZIP made for you in the /build directory.  With the new ZIP, you can go back to using `roundrectangle`s as normal. -M

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at http://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/groups/opt_out.