<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>

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;