0

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.

Community
  • 1
  • 1
Umair Farooq
  • 1,684
  • 2
  • 14
  • 25
  • Lots of people have used Cytoscape successfully with Angular. I suspect you'll just have to run your code through the debugger to see what's happening. – maxkfranz Feb 16 '16 at 16:49
  • No. I am using it. I just have problem in its first time loading. the script runs as usual and also the canvas elements are added in html. But the problem is, in the above the mentioned scenario, the height and width of the div containing canvas elements and also canvas elements is set to 0. There is also a scenario in which I change the height of the browser and suddenly the height and widths of canvas elements are changed and they appear on page. Can u help me with this ? – Umair Farooq Feb 17 '16 at 06:15

1 Answers1

0

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

Refs:

maxkfranz
  • 11,896
  • 1
  • 27
  • 36