Layout doesn't apply

[SuddenDevelopment]

after appling the examples I can get a display but only see positioning of nodes when specified. any layout properties I apply seem to be ignored. I did a recent install of cytoscape which I think is 3.1.2 on latest angular 1. As you can see all nodes are at 0,0

    $scope.cyt={};
    $scope.cyt.options = { 
        fit:true
       };
       $scope.cyt.layout = {name: 'grid'}  
   $scope.cyt.ready = function(evt){
      console.log('graph ready to be interacted with: ', evt);
   }

   $scope.cyt.elements = {
    n1:{
     group: 'nodes',
     data:{}
    },
    n2:{
     group: 'nodes',
     data:{}
   },
    e1:{
     group:'edges',
     data:{
      target: 'n1',  //Source and Target mandatory for edges.
      source: 'n2'
     }
    }
   }
    $scope.cyt.style = [ // See http://js.cytoscape.org/#style for style formatting and options.
      {
            selector: 'node',
            style: {
                'shape': 'ellipse',
                'border-width': 0,
                'background-color': 'blue'
            }
        }
    ];

<cytoscape 
        graph-options="cyt.options" 
        graph-elements="cyt.elements" 
        graph-layout="cyt.layout" 
        graph-style="cyt.style" 
        graph-ready="cyt.ready" >   
    </cytoscape>

[SuddenDevelopment]

next I tried to do it inside of the onready event. explicitly

cytoData.getGraph().then(function(graph){ $scope.cytoscape = graph; });
   $scope.cyt.ready = function(evt){
      //console.log('graph ready to be interacted with: ', evt);
      $scope.cytoscape.layout={name: 'grid'};
      $scope.cytoscape.layout.run();
      $scope.cytoscape.fit();
   }

which returned

TypeError: $scope.cytoscape.layout.run is not a function(…)

the $scope.cyt.layout={name:'grid'} was already set in the earlier block btw.

it's like the layout object isnt being watched

[SuddenDevelopment]

This also happens without any of the directive stuff... ended up being based on not being able to find the pixels of height and width so it couldnt do the layout things... % and flex etc dont apply has to be pixels :/

[jkourou]

Hey!

I am having the same problem. After cytoscape version 3 it looks like it completely ignores the layout property.

With cytoscape 2.7.4 it works perfectly. Unfortunately cyto 3+ has many optimizations.

@SuddenDevelopment Can you be more specific how you solved it?

@johnnyflinn Any thought or advice on this?

Thank you!

[SuddenDevelopment]

@jkourou I solved it by using the cola plugin for layout.

[jkourou]

@SuddenDevelopment Thanks for the help!

I am not sure how the Cola plugin fits my problem, since what I need is the simple angular wrapper that ngCytoscape provides for angular. In my scenario I need dagre layout, so I am using the respective libraries.

Also all tests I did without angular, latest cytoscape and dagre libraries required, works just fine.

The moment I do it with ngCytoscape, any layout I choose (not only dagre), it just renders all nodes at top left as you screenshot indicates in your original comment.

Thx anyway for the help and lets see if the author of the directive has any helpful comments.

[jkourou]

Also @SuddenDevelopment would you please re-open the issue as it remains at the moment un-resolved.

[SuddenDevelopment]

@jkourou I also used it in angular 1, felt that the ngCytoscape was unnecessary overhead. had no problem making it work as plain js inside my angular controller. I can show you a gist. reopened.

[jkourou]

@SuddenDevelopment Yes I thought as much :)

Well if I cannot get to a solution with ngCytoscape I will just use it with plain js as well, or just write a simple directive myself. Because I am using ngCytoscape and it simplifies a few thing for me for almost a year I thought I would try here first.

Thanks for the help and response!

[jkourou]

@johnnyflinn Hey!

Did you had a chance to take a look at this? It would really help me if I knew this is something easily addressable or not.

Thank you.

[aprudnikoff]

Just tried to start with ngCytoscape and got into the same issue. Additionally I have cose-bilkent layout plugin which added me some headache. It was really challenging to find out a proper combination of modules versions that could work: "cytoscape": "^2.6.1", "cytoscape-cose-bilkent": "1.4.1", "ngCytoscape": "^0.0.6"

I can't even imagine a gap between these versions and the latest which I used for my PoC without AngularJs. At least 1.4.1's layout looks much worse than latest 3.0.0's.

@johnnyflinn is it real to have ngCytoscape updated to support latest version of cytoscape and to have this issue gone? I would appreciate it very much.

[jkourou]

@aprudnikoff

Hey. Using the latest versions of cytoscape libraries, I changed the following code in the directive and it worked. I did some search to find if this is indeed a change in cytoscape functionality, or I just happened to fix it by "recalculating" something, but mainly because of time constraints from my part, I just left it there. Any way it works for me, I hope it can help you.

At line 80 of ngCytoscape.js change this:

if(isDefined(scope.graphLayout) && !isEmpty(scope.graphLayout)){                    
    //cy.layout(scope.graphLayout);
    cy.layout(scope.graphLayout).run();
}

Cheers