Fonctionnement du système de graph déployé

[darcosion]

Cette issue à pour but de documenter et d'exploiter au mieux les possibilités du système d'affichage et de visualisation par graph proposé.

[darcosion]

Actuellement, le système de graph employé est cytoscape.js .

C'est une library javascript de création de graph sur canvas basé sur la manipulation d'objet SVG par du JS.
Sa documentation se trouve ici : https://js.cytoscape.org/

[darcosion]

Mode fonctionnement du graph via angularJS

Actuellement, le graph Cytoscape est au niveau HTML lié à un canvas sous cette forme :

    <div id="placeNetwork" ng-controller="graphNetwork">
      <div id="mynetwork"></div>
    </div>

Comme on peut le voir avec le ng-controller, ce canvas est un lié à un composant AngularJS qui contient tout le code de gestion du graph.

Tout comme en java il existe un objet this et en python un objet self qui permet d'indiquer qu'on accède à une variable du contexte globale d'un objet, en AngularJS, il existe l'objet $scope dans lequel quasiment toutes les fonctions et les variables liés au graph sont rangées.

On a donc :

$scope.cyto; // contient l'objet cytoscape qui est le coeur du graph, les noeuds et les liens
$scope.options; // contiens les options d'affichage et de placement du graph
$scope.styles; // contiens les styles CSS associés aux différents éléments du graph

Tous ces éléments sont manipulables et modifiables en temps réel. Toutefois, la construction du graph nécessite pas mal de fonctions javascript.

En premier lieu, il faut récupérer les données à afficher dans le graph. Pour cela, un certain nombre de fonction $scope.getXScan() existent, et appellent une fonction d'insertion de leurs données dans le graph.

Le cœur de construction de graph est donc la fonction suivante :

  $scope.createCytoGraph = function(scan_data) {
    // plein de code qui ajoute le contenu de scan_data sous la forme de noeuds & liens
   ...
   ...

    // on ajoute l'ensemble des ip au graph
    $scope.cyto.add($scope.nodes);
    // on ajoute l'ensemble des lien au graph
    $scope.cyto.add($scope.edges);
    // on actualise la vue
    $scope.layout = $scope.cyto.layout($scope.options);
    $scope.layout.run();
  };

Ce code est très important car il ne fait qu'actualiser continuellement le graph en y ajoutant les nouveaux noeuds qui peuvent ressortir.

[darcosion]

Cette issue change un peu la donne car elle ajoute un paramètre ip_node f4b4912

Cela dans le but de faciliter les recherches par ip :

Echosounder/static/main.js

Line 285 in f4b4912

let node_update = $scope.cyto.elements("node[data_ip = '" + ip_node + "']");

Sinon, une fonction de mise à jour des données d'un node via une fonction a été ajouté, ses données ne semblent pas impactés par un nouveau scan général de réseau :

Echosounder/static/main.js

Lines 282 to 288 in f4b4912

	// fonction de mise à jour d'un noeud spécifique
	$scope.updateNodebyIP = function(ip_node, update_key, update_data) {
	// on cherche le noeud à updater par IP
	let node_update = $scope.cyto.elements("node[data_ip = '" + ip_node + "']");
	// on met la donnée dans la key du node depuis data
	node_update.data('data')[update_key] = update_data;
	}

[darcosion]

La résolution de l'issue #42 change le fonctionnement du graph ainsi créé.

On oublie tout ce qui est :

$scope.nodes; // contiens les noeuds du graph
$scope.edges; // contiens les lien du graph

ça sert à rien de les manipuler dans angularJS, ils sont récupérables à partir de $scope.cyto via plusieurs commandes et les systèmes de tri de donnée proposés par cytoscape seront toujours 100 fois plus performant que la recherche de donnée directement dans les nœuds et liens listés dans un array.
voir 2e10bd9

[Lewean]

Manipulation de graphe

Lors de l’utilisation d’Echo Sounder on peut se retrouver parfois avec un graphe peu lisible selon le nombre de réseau, dans ce cas il est pratique de pouvoir faire de la manipulation de graphe directement sur la console. Nous allons voir différentes pratiques qui vont nous facilités la visibilité du graphe. Voici un exemple de graphe ( image 1) :

Tout d'abord on peut sélectionner les nœuds qu'on veut manipuler pour ça on met le graphe dans une variable et on sélectionne les nœuds avec un .elements("node") (image 2). On peut notamment utiliser des fonctions comment .size() ou .empty() qui sont des fonctions utiles lorsque on a un grand réseau.

On peut aussi faire de l'itération dessus avec le forEach(). Pour cet exemple on va faire la liste de l'attribut ID de tout les nœuds (image3):

Et il y la possibilité de changer le style du graphe que ce soit la forme, la couleur, la taille, l'opacité etc .... avec la fonction style().

Maintenant qu'on a vu ce qu'on pouvait faire on va voir quelques cas qui pourrait être utile :

Cas 1 : Rendre les services plus lisibles en utilisant style (image 4) :

Obtenu avec :

temp0.filter('node[type="Service"]').style('background-color',"blue").style('shape',"triangle")

Cas 2 : Trier les nœuds en fonctions de leurs père et fils :
temp0.elements('node[type = "VLAN"] > node')