<commit_before>ngCytoscape
=============

A simple angular wrapper for the [Cytocape.js](http://js.cytoscape.org/) library.

Dependencies
-----------
jQuery

AngularJs

##Installation

```javascript
<script src="pathToJquery/jquery.js"> 
<script src="pathToAngular/angular.js">
<script src="ngCytoscape.js">
```
Include `ngCytoscape` as a dependency in your application.

##Basic Example
HTML
```javascript
 <cytoscape graph-options="defaults" graph-elements="elements" graph-layout="layout" graph-style="style"></cytoscape>
```
Controller
```javascript
(function(){
 angular
  .module('app')
  .controller('example');
  example.$inject = ['$scope', 'cytoData']
  function example($scope, cytoData){
   $scope.defaults = {
    textureOnViewport:true,
    pixelRatio: 'auto',
    motionBlur: false,
    hideEdgesOnViewport:true
   };
   //See http://js.cytoscape.org/#collection/layout for available layouts and options
   $scope.layout = {name: 'grid'}
   // See http://js.cytoscape.org/#notation/elements-json for element array format
   $scope.elements = [
    { 
     group: 'nodes', // 'nodes' for a node, 'edges' for an edge
     data: { 
      id: 'n1', // mandatory for each element, assigned automatically on undefined
     },
    { 
     group: 'nodes', 
      data: { 
       id: 'n2', 
    },
    { // edge e1
     data: {
      id: 'e1',
    // inferred as an edge because `source` and `target` are specified:
       source: 'n1', // the source node id (edge comes from this node)
       target: 'n2'  // the target node id (edge goes to this node)
     }
    }
    ]
    $scope.style = [
      {
            selector: 'node',
            style: {
                'shape': 'ellipse',
                'border-width': 0,
                'background-color': 'blue'
            }
        }
    ]
  }
}();
```

#### cytoscape instance
Obtain the cytoscape graph core by making a call to cytoData.getGraph().  This will return a promise with the graph instance.
```javascript
$scope.graph = {};

cytoData.getGraph().then(function(cytoGraph){
 $scope.graph = cytoGraph;
})
```
Now all core functionality is available on $scope.graph
```javascript
$scope.graph.fit(); //Pan and zooms the graph to fit to a collection.
```
#### Adding a removing nodes / edges
Just push the node / edge object into your $scope.elements array.
IMPORTANT: Edges must have target and source nodes already defined.  Make sure you add nodes before adding edges.

#### Data Object
The data property of nodes and edges are $watched.  Any changes to data will automatically updated in cytoscape.

#### Events
See <a href="http://js.cytoscape.org/#events"> cytoscape library</a> for more information.
* `cytoEvent:edge:event` Edge Events.
* `cytoEvent:node:event` Node Events.
* `cytoEvent:core:event` Core Events.
* `cytoEvent:core:event` Graph Events.

```javascript
$scope.$on('cytoEvent:node:select', function(node){
    console.log(node.data())
})
```
<commit_msg>removed jquery dependency<commit_after>ngCytoscape
=============

A simple angular wrapper for the [Cytocape.js](http://js.cytoscape.org/) library.

Dependencies
-----------
jQuery

AngularJs

##Installation

```javascript
<script src="pathToAngular/angular.js">
<script src="ngCytoscape.js">
```
Include `ngCytoscape` as a dependency in your application.

##Basic Example
HTML
```javascript
 <cytoscape graph-options="defaults" graph-elements="elements" graph-layout="layout" graph-style="style"></cytoscape>
```
Controller
```javascript
(function(){
 angular
  .module('app')
  .controller('example');
  example.$inject = ['$scope', 'cytoData']
  function example($scope, cytoData){
   $scope.defaults = {
    textureOnViewport:true,
    pixelRatio: 'auto',
    motionBlur: false,
    hideEdgesOnViewport:true
   };
   //See http://js.cytoscape.org/#collection/layout for available layouts and options
   $scope.layout = {name: 'grid'}
   // See http://js.cytoscape.org/#notation/elements-json for element array format
   $scope.elements = [
    { 
     group: 'nodes', // 'nodes' for a node, 'edges' for an edge
     data: { 
      id: 'n1', // mandatory for each element, assigned automatically on undefined
     },
    { 
     group: 'nodes', 
      data: { 
       id: 'n2', 
    },
    { // edge e1
     data: {
      id: 'e1',
    // inferred as an edge because `source` and `target` are specified:
       source: 'n1', // the source node id (edge comes from this node)
       target: 'n2'  // the target node id (edge goes to this node)
     }
    }
    ]
    $scope.style = [
      {
            selector: 'node',
            style: {
                'shape': 'ellipse',
                'border-width': 0,
                'background-color': 'blue'
            }
        }
    ]
  }
}();
```

#### cytoscape instance
Obtain the cytoscape graph core by making a call to cytoData.getGraph().  This will return a promise with the graph instance.
```javascript
$scope.graph = {};

cytoData.getGraph().then(function(cytoGraph){
 $scope.graph = cytoGraph;
})
```
Now all core functionality is available on $scope.graph
```javascript
$scope.graph.fit(); //Pan and zooms the graph to fit to a collection.
```
#### Adding a removing nodes / edges
Just push the node / edge object into your $scope.elements array.
IMPORTANT: Edges must have target and source nodes already defined.  Make sure you add nodes before adding edges.

#### Data Object
The data property of nodes and edges are $watched.  Any changes to data will automatically updated in cytoscape.

#### Events
See <a href="http://js.cytoscape.org/#events"> cytoscape library</a> for more information.
* `cytoEvent:edge:event` Edge Events.
* `cytoEvent:node:event` Node Events.
* `cytoEvent:core:event` Core Events.
* `cytoEvent:core:event` Graph Events.

```javascript
$scope.$on('cytoEvent:node:select', function(node){
    console.log(node.data())
})
```

{'fraction_non_alphanumeric': 0.14578005115089515, 'fraction_numerical': 0.0023870417732310316, 'mean_word_length': 3.1602836879432625, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 16, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7670671', 'n_tokens_mistral': 1841, 'n_tokens_neox': 1772, 'n_words': 542}