Cytoscape.js, Graph is not loaded while using with angular

Question

I have been working on a project in which I used Cytoscape.js with Angular.js. I am facing an issue regarding the loading of the graph. The problem I am facing is that the graph doesn't load on first attempt when the page is refreshed.

The specific scenario is when I am on a view with graph in the view's html, If I refresh the page from that view, the next time I open the graph, the graph shows correctly. But when I am not on a view with graph in it's html, the graph won't load if I refresh my page from that view.

I have searched and found an almost similar problem someone else faced but the solution is not helping me.

Cytoscape.js, graph is not displayed with correct settings

Here is my HTML Code.

<div class="col-sm-12" style="height:100%;width:100%;margin-top:5px;">
    <div ng-show="cyLoaded" ng-model="cyLoaded" id="cy" ng-init="ShowProjectRelationGraph(1)" ></div>
    <div ng-show="!cyLoaded" ng-model="cyLoaded" class="row" style="align-items:center;margin-top:100px;">
        <div class="col-sm-5"></div>
        <div class="col-sm-2" style="padding-left:6%">
            <div class="spinner-lg">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>
    </div>
</div>

Here is my .js code

angular.module("VPMWeb")
 .factory('nodesGraph', ['$q', function($q) {
  var cy;
  var nodesGraph = function(elements, signal) {
   var deferred = $q.defer();

   // put people model in cy.js
   var eles = [];
   for (var i = 0; i < elements.nodes.length; i++) {
    eles.push({
     group: 'nodes',
     data: {
      id: elements.nodes[i].data.id,
      parent: elements.nodes[i].data.parent,
      s_id: elements.nodes[i].data.s_id
     }
    });
   }

   for (var i = 0; i < elements.edges.length; i++) {
    eles.push({
     group: 'edges',
     data: {
      id: elements.edges[i].data.id,
      source: elements.edges[i].data.source,
      target: elements.edges[i].data.target,
     }
    });
   }

   $(function() { // on dom ready
    cy = cytoscape({

     container: $("#cy")[0],
     //zoomingEnabled: false,
     userZoomingEnabled: false,

     style: cytoscape.stylesheet()
      .selector('node')
      .css({
       'content': 'data(s_id)',
       'text-valign': 'center',
       'text-halign': 'center',
       'padding-top': '10px',
       'padding-left': '10px',
       'padding-bottom': '10px',
       'padding-right': '10px',
       'text-valign': 'top',
       'text-halign': 'center',
      })
      .selector('edge')
      .css({
       'target-arrow-shape': 'triangle'
      })
      .selector(':selected')
      .css({
       'background-color': 'black',
       'line-color': 'black',
       'target-arrow-color': 'black',
       'source-arrow-color': 'black'
      }),

     layout: {
      name: 'cose',
      padding: 10,
      fit: true,
      randomize: true
     },

     elements: eles,

     ready: function() {
      deferred.resolve(this);
     }
    });

    cy.center();
   }); // on dom ready

   return deferred.promise;
  };

  nodesGraph.listeners = {};

  function fire(e, args) {
   var listeners = nodesGraph.listeners[e];

   for (var i = 0; listeners && i < listeners.length; i++) {
    var fn = listeners[i];

    fn.apply(fn, args);
   }
  }

  function listen(e, fn) {
   var listeners = nodesGraph.listeners[e] = nodesGraph.listeners[e] || [];

   listeners.push(fn);
  }

  return nodesGraph;
 }]);

Can someone please have a look and help with it. Thanks in advance.

Answer 1

If you're not setting the dimensions of the Cytoscape.js div properly in advance, then you'll have to call cy.resize() .

Refs:

• http://js.cytoscape.org/#getting-started/including-cytoscape.js
• http://js.cytoscape.org/#cy.resize