From 022c84da75f3421d581f66d57c3de2ec908a18a6 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <root@misp.misp.local>
Date: Wed, 21 Mar 2018 16:24:52 +0000
Subject: [PATCH] First iteration of refactoring (reference_graph.js): moved
 functions into classes

---
 app/View/Events/view.ctp             |   12 +-
 app/webroot/css/references-graph.css |    4 +-
 app/webroot/js/references-graph.js   | 1093 ++++++++++++++------------
 3 files changed, 584 insertions(+), 525 deletions(-)

diff --git a/app/View/Events/view.ctp b/app/View/Events/view.ctp
index 5173b4c91..28996b947 100644
--- a/app/View/Events/view.ctp
+++ b/app/View/Events/view.ctp
@@ -331,8 +331,8 @@
 		<button class="btn btn-inverse toggle qet galaxy-toggle-button" id="galaxies_toggle" data-toggle-type="galaxies">
 			<span class="icon-minus icon-white" title="<?php echo __('Toggle galaxies');?>" role="button" tabindex="0" aria-label="<?php echo __('Toggle galaxies');?>" style="vertical-align:top;"></span><?php echo __('Galaxy');?>
 		</button>
-		<button class="btn btn-inverse toggle qet galaxy-toggle-button" id="references_toggle" data-toggle-type="references" onclick="enable_interactive_graph();">
-			<span class="icon-plus icon-white" title="<?php echo __('Toggle references');?>" role="button" tabindex="0" aria-label="<?php echo __('Toggle references');?>" style="vertical-align:top;"></span><?php echo __('References');?>
+		<button class="btn btn-inverse toggle qet galaxy-toggle-button" id="eventgraph_toggle" data-toggle-type="eventgraph" onclick="enable_interactive_graph();">
+			<span class="icon-plus icon-white" title="<?php echo __('Toggle Event graph');?>" role="button" tabindex="0" aria-label="<?php echo __('Toggle Event graph');?>" style="vertical-align:top;"></span><?php echo __('Event graph');?>
 		</button>
 		<button class="btn btn-inverse toggle qet galaxy-toggle-button" id="attributes_toggle" data-toggle-type="attributes">
 			<span class="icon-minus icon-white" title="<?php echo __('Toggle attributes');?>" role="button" tabindex="0" aria-label="<?php echo __('Toggle attributes');?>" style="vertical-align:top;"></span><?php echo __('Attributes');?>
@@ -350,12 +350,12 @@
 		<h4 class="blue"><?php echo __('Galaxies');?></h4>
 		<?php echo $this->element('galaxyQuickView', array('mayModify' => $mayModify, 'isAclTagger' => $isAclTagger)); ?>
 	</div>
-	<div id="references_div" class="info_container_references_network" style="display: none;" data-fullscreen="false">
-		<span class="shortcut-help btn btn-xs btn-primary">?</span>
-		<span class="fullscreen-btn btn btn-xs btn-primary" data-toggle="tooltip" data-placement="left" data-title="<?php echo __('Toggle fullscreen');?>"><span class="fa fa-desktop"></span></span>
+	<div id="eventgraph_div" class="info_container_eventgraph_network" style="display: none;" data-fullscreen="false">
+		<span class="shortcut-help btn btn-xs btn-info">?</span>
+		<span class="fullscreen-btn btn btn-xs btn-primary" data-toggle="tooltip" data-placement="top" data-title="<?php echo __('Toggle fullscreen');?>"><span class="fa fa-desktop"></span></span>
 		<input type="text" id="network-typeahead" class="network-typeahead" data-provide="typeahead" size="20" placeholder="Search for an item">
 
-		<div id="references_network" class="references_network" data-event-id="<?php echo h($event['Event']['id']); ?>" data-user-manipulation="<?php echo h($mayModify) ? 'true' : 'false'; ?>"></div>
+		<div id="eventgraph_network" class="eventgraph_network" data-event-id="<?php echo h($event['Event']['id']); ?>" data-user-manipulation="<?php echo h($mayModify) ? 'true' : 'false'; ?>"></div>
 		<div class="loading-network-div" id="refecences_network_loading_div" style="display: none;">
 			<div class="spinner-network" data-original-title="" title="" style="display: none;"></div>
 			<div class="progress progressbar-network-div" >
diff --git a/app/webroot/css/references-graph.css b/app/webroot/css/references-graph.css
index db3ef73f2..9cd838b89 100644
--- a/app/webroot/css/references-graph.css
+++ b/app/webroot/css/references-graph.css
@@ -1,4 +1,4 @@
-.info_container_references_network {
+.info_container_eventgraph_network {
 	position: relative;
 	margin-top: 10px;
 	border: 1px solid #0088cc;
@@ -10,7 +10,7 @@
 	overflow: hidden;
 }
 
-.references_network {
+.eventgraph_network {
 	height: inherit;
 }
 
diff --git a/app/webroot/js/references-graph.js b/app/webroot/js/references-graph.js
index 892238305..dd88fd82a 100644
--- a/app/webroot/js/references-graph.js
+++ b/app/webroot/js/references-graph.js
@@ -1,12 +1,439 @@
-var max_displayed_char = 32;
+function log(m) {
+	console.log(m);
+}
+/*=============
+ * GLOBAL VARS
+ * ============*/
+var eventGraph;
+var dataHandler;
+var mispInteraction;
+var nodes = new vis.DataSet();
+var edges = new vis.DataSet();
 
-var mapping_meta_fa = new Map();
-mapping_meta_fa.set('file', {"meta-category": "file","fa_text": "file","fa-hex": "f15b"});
-mapping_meta_fa.set('financial', {"meta-category": "financial","fa_text": "money-bil-alt","fa-hex": "f3d1"});
-mapping_meta_fa.set('network', {"meta-category": "network","fa_text": "server","fa-hex": "f223"});
-mapping_meta_fa.set('misc', {"meta-category": "misc","fa_text": "cube","fa-hex": "f1b2"});
+var typeaheadData;
+var scope_id = $('#eventgraph_network').data('event-id');
+var container = document.getElementById('eventgraph_network');
+var user_manipulation = $('#eventgraph_network').data('user-manipulation');
+var user_manipulation = true;
 
-// Util
+/*=========
+ * CLASSES
+ * ========*/
+// network class (handle the event graph manipulation and events)
+class EventGraph {
+	constructor(network_options, nodes, edges) {
+		// FIXME: To remove
+		this.mapping_meta_fa = new Map();
+		this.mapping_meta_fa.set('file', {"meta-category": "file","fa_text": "file","fa-hex": "f15b"});
+		this.mapping_meta_fa.set('financial', {"meta-category": "financial","fa_text": "money-bil-alt","fa-hex": "f3d1"});
+		this.mapping_meta_fa.set('network', {"meta-category": "network","fa_text": "server","fa-hex": "f223"});
+		this.mapping_meta_fa.set('misc', {"meta-category": "misc","fa_text": "cube","fa-hex": "f1b2"});
+		// FIXME
+		this.nodes = nodes;
+		this.edges = edges;
+		var data = { // empty
+			nodes: this.nodes,
+			edges: this.edges
+		};
+
+		this.network = new vis.Network(container, data, network_options);
+		var that = this;
+		this.network.on("selectNode", function (params) {
+			that.network.moveTo({
+				position: {
+					x: params.pointer.canvas.x,
+					y: params.pointer.canvas.y
+				},
+				animation: true,
+			});
+		});
+		// Fit view only when page is loading for the first time
+		//this.reset_view_on_stabilized();
+	}
+
+	// Util
+	get_node_color(uuid) {
+		return this.nodes.get(uuid).icon.color;
+	}
+
+	// Graph interaction
+	reset_graphs() {
+		this.nodes.clear();
+		this.edges.clear();
+	}
+	
+	update_graph(data) {
+		var total = data.items.length + data.relations.length;
+		this.network_loading(0, total);
+		
+		// New nodes will be automatically added
+		// removed references will be deleted
+		var node_conf;
+		var newNodes = [];
+		var newNodeIDs = [];
+		for(var node of data.items) {
+			var group, label;
+			if ( node.node_type == 'object' ) {
+				group =  'object';
+				label = node.type;
+				var striped_value = label.substring(0, max_displayed_char) + (label.length < max_displayed_char ? "" : "[...]");
+				node_conf = { 
+					id: node.id,
+					label: striped_value,
+					title: label,
+					group: group,
+					mass: 5,
+					icon: {
+						color: getRandomColor(),
+						face: 'FontAwesome',
+						code: String.fromCharCode(parseInt(this.mapping_meta_fa.get(node['meta-category'])['fa-hex'], 16)),
+					}
+				};
+				dataHandler.mapping_value_to_nodeID.set(striped_value, node.id);
+			} else {
+				group =  'attribute';
+				label = node.type + ': ' + node.val;
+				var striped_value = label.substring(0, max_displayed_char) + (label.length < max_displayed_char ? "" : "[...]");
+				node_conf = { 
+					id: node.id,
+					label: striped_value,
+					title: label,
+					group: group,
+					mass: 5,
+				};
+				dataHandler.mapping_value_to_nodeID.set(striped_value, node.id);
+			}
+	
+			newNodes.push(node_conf);
+			newNodeIDs.push(node.id);
+		}
+		// check if nodes got deleted
+		var old_node_ids = this.nodes.getIds();
+		for (var old_id of old_node_ids) {
+			// This old node got removed
+			if (newNodeIDs.indexOf(old_id) == -1) {
+				this.nodes.remove(old_id);
+			}
+		}
+	
+		this.nodes.update(newNodes);
+		this.network_loading(data.items.length, total);
+		
+		// New relations will be automatically added
+		// removed references will be deleted
+		var newRelations = [];
+		var newRelationIDs = [];
+		for(var rel of data.relations) {
+			var fromto = rel.from + '-' + rel.to;
+			var rel = {
+				id: fromto,
+				from: rel.from,
+				to: rel.to,
+				label: rel.type,
+				title: rel.comment,
+				color: {
+					opacity: 1.0
+				}
+			};
+			newRelations.push(rel);
+			newRelationIDs.push(fromto);
+		}
+		// check if nodes got deleted
+		var old_rel_ids = this.edges.getIds();
+		for (var old_id of old_rel_ids) {
+			// This old node got removed
+			if (newRelationIDs.indexOf(old_id) == -1) {
+				this.edges.remove(old_id);
+			}
+		}
+	
+		this.edges.update(newRelations);
+		this.network_loading(total, total);
+	}
+	
+	reset_view() {
+		this.network.fit({animation: true });
+	}
+	
+	reset_view_on_stabilized() {
+		var that = this;
+		this.network.on("stabilized", function(params) {
+			that.network.fit({ animation: true });
+			that.network.off("stabilized"); //  Removed listener
+		});
+	}
+
+	// -1: Undefined state
+	// 0<=iterations<total: state known
+	// iterations>=total: finished
+	network_loading(iterations, total) {
+		if(iterations == -1) {
+			var loadingText = loadingText_fetching;
+			$('.loading-network-div').show();
+			$('.spinner-network').show();
+			$('.loadingText-network').text(loadingText);
+			$('.loadingText-network').show();
+		} else if (iterations >= 0 && iterations < total) {
+			var loadingText = loadingText_creating;
+			$('.loading-network-div').show();
+			$('.loadingText-network').text(loadingText);
+			$('.loadingText-network').show();
+			$('.spinner-network').hide();
+			// pb
+			var percentage = parseInt(iterations*100/total);
+			$('.progressbar-network-div').show();
+			$('#progressbar-network').show();
+			$('#progressbar-network').width(percentage*progressbar_length);
+			$('#progressbar-network').text(percentage+' %');
+	
+		} else if (iterations >= total) {
+			$('#progressbar-network').width(100*progressbar_length);
+			$('#progressbar-network').text(100+' %');
+			setTimeout(function() {
+				$('.loading-network-div').hide();
+				$('.spinner-network').hide();
+				$('.loadingText-network').hide();
+				$('.progressbar-network-div').hide();
+				$('#progressbar-network').hide();
+			}, 1000)
+		}
+	}
+
+
+	collapse_node(parent_id) {
+		if (parent_id === undefined) { //  No node selected
+			return
+		}
+		var connected_nodes = this.network.getConnectedNodes(parent_id);
+		var connected_edges = this.network.getConnectedEdges(parent_id);
+		// Remove nodes
+		for (var nodeID of connected_nodes) {
+	 		// Object's attribute are in UUID format (while other object or in simple integer)
+			if (nodeID.length > 10) {
+				this.nodes.remove(nodeID);
+			}
+		}
+	
+		// Remove edges
+		for (var edgeID of connected_edges) {
+	 		// Object's attribute (edge) are in UUID format (while other object or in simple integer)
+			if (edgeID.length > 10) {
+				this.edges.remove(edgeID);
+			}
+		}
+	}
+	
+	expand_node(parent_id) {
+		if (parent_id === undefined //  Node node selected
+		    || this,nodes.get(parent_id).group == "attribute"
+		    || this.nodes.get(parent_id).group == "obj_relation") { //  Cannot expand attribute
+			return;
+		}
+	
+		var newNodes = [];
+		var newRelations = [];
+	
+		var parent_pos = this.network.getPositions([parent_id])[parent_id];
+		for(var attr of dataHandler.mapping_all_obj_relation.get(parent_id)) {
+			var parent_color = eventGraph.get_node_color(parent_id);
+					
+			// Ensure unicity of nodes
+			if (this.nodes.get(attr.uuid) !== null) {
+				continue;
+			}
+					
+			var striped_value = attr.value.substring(0, max_displayed_char) + (attr.value.length < max_displayed_char ? "" : "[...]");
+			var node = { 
+				id: attr.uuid,
+				x: parent_pos.x,
+				y: parent_pos.y,
+				label: attr.type + ': ' + striped_value,
+				title: attr.type + ': ' + attr.value,
+				group: 'obj_relation',
+				color: { 
+					background: parent_color
+				},
+				font: {
+					color: getTextColour(parent_color)
+				}
+			};
+			newNodes.push(node);
+					
+			var rel = {
+				from: parent_id,
+				to: attr.uuid,
+				arrows: '',
+				color: {
+					opacity: 0.5,
+					color: parent_color
+				},
+				length: 40
+			};
+			newRelations.push(rel);
+		}
+			
+		this.nodes.add(newNodes);
+		this.edges.add(newRelations);
+	}
+
+}
+
+// data class (handle data)
+class DataHandler {
+	constructor(network) {
+		this.network = network;
+		this.mapping_value_to_nodeID = new Map();
+		this.mapping_id_to_uuid = new Map();
+		this.mapping_fromto_to_rel_id = new Map();
+		this.mapping_all_obj_relation = new Map();
+	}
+
+	extract_references(data) {
+		var items = [];
+		var relations = [];
+	
+		if (data.Attribute !== undefined) {
+			for (var attr of data.Attribute) {
+				this.mapping_id_to_uuid.set(attr.id, attr.uuid);
+				items.push({
+					'id': attr.id,
+					'type': attr.type,
+					'val': attr.value,
+					'node_type': 'attribute'
+				});
+			}
+		}
+	
+		if (data.Object !== undefined) {
+			for (var obj of data.Object) {
+				this.mapping_id_to_uuid.set(obj.id, obj.uuid);
+				this.mapping_all_obj_relation.set(obj.id, obj.Attribute);
+				items.push({
+					'id': obj.id,
+					'type': obj.name,
+					'val': obj.value,
+					'node_type': 'object',
+					'meta-category': obj['meta-category']
+				});
+				
+				for (var rel of obj.ObjectReference) {
+					var fromto = obj.id + '-' + rel.referenced_id;
+					this.mapping_fromto_to_rel_id.set(fromto, rel.id);
+					relations.push({
+						'from': obj.id,
+						'to': rel.referenced_id,
+						'type': rel.relationship_type,
+						'comment': rel.comment != "" ? rel.comment : "[Comment not set]"
+					});
+				}
+			}
+		}
+	
+		return {
+			items: items,
+			relations: relations
+		}
+	}
+	
+	fetch_data_and_update() {
+		eventGraph.network_loading(-1, 0);
+		$.getJSON( "/events/getReferences/"+scope_id+"/event.json", function( data ) {
+			var extracted = dataHandler.extract_references(data);
+			eventGraph.network_loading(1, 0);
+			eventGraph.update_graph(extracted);
+			eventGraph.reset_view_on_stabilized();
+		});
+	}
+
+	get_typeaheadData() {
+		var to_ret = []
+		for( var entry of this.mapping_value_to_nodeID) {
+			var value = entry[0];
+			to_ret.push(value);
+		}
+		return to_ret;
+	}
+}
+
+
+// misp interaction class (handle interaction with misp)
+class MispInteraction {
+	constructor(nodes, edges) {
+		this.nodes = nodes;
+		this.edges = edges;
+	}
+
+	remove_reference(edgeData, callback) {
+		edge_id = edgeData.edges[0];
+		var fromto = edge_id;
+		var relation_id = dataHandler.mapping_fromto_to_rel_id.get(fromto);
+		deleteObject('object_references', 'delete', relation_id, scope_id);
+	}
+	
+	add_reference(edgeData, callback) {
+		var that = mispInteraction;
+		var uuid = dataHandler.mapping_id_to_uuid.get(edgeData.to);
+		if (!that.can_create_reference(edgeData.from) || !that.can_be_referenced(edgeData.to)) {
+			return;
+		}
+		genericPopup('/objectReferences/add/'+edgeData.from, '#popover_form', function() {
+			$('#targetSelect').val(uuid);
+			$('option[value='+uuid+']').click()
+		});
+	}
+	
+	can_create_reference(id) {
+		return this.nodes.get(id).group == "object";
+	}
+
+	can_be_referenced(id) {
+		var res;
+		if (this.nodes.get(id).group == "object") {
+			res = true;
+		} else if (this.nodes.get(id).group == "attribute") {
+			res = true;
+		} else {
+			res = false;
+		}
+		return res;
+	}
+
+	add_item(nodeData, callback) {
+		choicePopup("Add an element", [
+			{
+				text: "Add an Object",
+				onclick: "getPopup('"+scope_id+"', 'objectTemplates', 'objectChoice');"
+			},
+			{
+				text: "Add an Attribute",
+				onclick: "simplePopup('/attributes/add/"+scope_id+"');"
+			},
+		]);
+	}
+	
+	delete_item(nodeData, callback) {
+		var selected_nodes = nodeData.nodes;
+		for (var nodeID of selected_nodes) {
+			var node = this.nodes.get(nodeID)
+			if (node.group == "attribute") {
+				deleteObject('attributes', 'delete', nodeID, scope_id);
+			} else if (node.group == "object") {
+				deleteObject('objects', 'delete', nodeID, scope_id);
+			}
+		}
+		
+	}
+	
+	edit_item(nodeData, callback) {
+		var id = nodeData.id
+		simplePopup('/attributes/edit/'+id);
+	}
+}
+
+
+/*=========
+ * UTILS
+ * ========*/
 function getRandomColor() {
 	var letters = '0123456789ABCDEF';
 	var color = '#';
@@ -29,37 +456,134 @@ function getTextColour(hex) {
 	}
 }
 
-function get_node_color(uuid) {
-	return nodes.get(uuid).icon.color;
+
+function genericPopupCallback(result) {
+	if (result == "success") {
+		dataHandler.fetch_data_and_update();
+		//eventGraph.reset_view_on_stabilized();
+	}
 }
 
 
-// Global var
-var shortcut_text = "<b>V:</b> Center camera"
-		+ "\n<b>X:</b> Expaned node"
-		+ "\n<b>C:</b> Collapse node"
-		+ "\n<b>SHIFT+E:</b> Edit node"
-		+ "\n<b>SHIFT+F:</b> Search for value"
-		+ "\n<b>SHIFT:</b> Hold to add a reference"
-		+ "\n<b>DEL:</b> Delete selected item";
 
-var scope_id = $('#references_network').data('event-id');
-var container = document.getElementById('references_network');
-var nodes = new vis.DataSet();
-var edges = new vis.DataSet();
-var mapping_value_to_nodeID = new Map();
-var map_id_to_uuid = new Map();
-var map_fromto_to_rel_id = new Map();
-var all_obj_relation = new Map();
-var user_manipulation = $('#references_network').data('user-manipulation');
-var user_manipulation = true;
-var data = {
-	nodes: nodes,
-	edges: edges
-};
+// Called when the user click on the 'Event graph' toggle
+function enable_interactive_graph() {
+	// unregister onclick
+	$('#eventgraph_toggle').removeAttr('onclick');
 
+	// Defer the loading of the network to let some time for the DIV to appear
+	setTimeout(function() {
+		$('.shortcut-help').popover({
+			container: 'body',
+			title: 'Shortcuts',
+			content: shortcut_text,
+			placement: 'left',
+			trigger: 'hover',
+			html: true,
+		});
+		$('.fullscreen-btn').click(function() {
+			var network_div = $('#eventgraph_div');
+			var fullscreen_enabled = !network_div.data('fullscreen');
+			network_div.data('fullscreen', fullscreen_enabled);
+			var height_val = fullscreen_enabled == true ? "calc(100vh - 42px - 42px - 10px)" : "500px";
+
+			network_div.css("height", height_val);
+			network_div[0].scrollIntoView({
+				behavior: "smooth",
+
+			});
+		});
+		$('#network-typeahead').typeahead(typeaheadOption);
+
+		eventGraph = new EventGraph(network_options, nodes, edges);
+		dataHandler = new DataHandler(eventGraph.network);
+
+		$(document).on("keydown", function(evt) {
+			switch(evt.keyCode) {
+				case 88: // x
+					var selected_id = eventGraph.network.getSelectedNodes()[0]; 
+					eventGraph.expand_node(selected_id);
+					break;
+
+				case 67: // c
+					var selected_id = eventGraph.network.getSelectedNodes()[0]; 
+					eventGraph.collapse_node(selected_id);
+					break;
+				case 86: // v
+					eventGraph.reset_view();
+					break;
+
+				case 69: // e
+					if (evt.shiftKey) {
+						var selected_id = eventGraph.network.getSelectedNodes()[0]; 
+						data = { id: selected_id };
+						mispInteraction.edit_item(data);
+					}
+					break;
+
+				case 70: // f
+					if (evt.shiftKey) {
+						// set focus to search input
+						eventGraph.network.disableEditMode(); // un-toggle edit mode
+						$('#network-typeahead').focus();
+						$('#network-typeahead').text('');
+						evt.preventDefault(); // avoid writting a 'F' in the input field
+					}
+					break;
+
+				case 16: // <SHIFT>
+					if (!user_manipulation) { // user can't modify references
+						break;
+					}
+					eventGraph.network.addEdgeMode(); // toggle edit mode
+					break;
+
+				case 46: // <Delete>
+					if (!user_manipulation) { // user can't modify references
+						break;
+					}
+					//  References
+					var selected_ids = eventGraph.network.getSelectedEdges(); 
+					for (var selected_id of selected_ids) {
+						var edge = { edges: [selected_id] }; // trick to use the same function
+						mispInteraction.remove_reference(edge);
+					}
+
+					//  Objects or Attributes
+					selected_ids = eventGraph.network.getSelectedNodes();
+					data = { nodes: selected_ids };
+					mispInteraction.delete_item(data);
+					break;
+
+				default:
+					break;
+			}
+		});
+
+		$(document).on("keyup", function(evt) {
+			switch(evt.keyCode) {
+				case 16: // <SHIFT>
+					if (!user_manipulation) { // user can't modify references
+						break;
+					}
+					eventGraph.network.disableEditMode(); // un-toggle edit mode
+					break;
+				default:
+					break;
+			}
+
+			
+		});
+
+		dataHandler.fetch_data_and_update();
+	}, 1);
+}
+
+/*=========
+ * OPTIONS
+ * ========*/
+mispInteraction = new MispInteraction(nodes, edges);
 
-// Options
 var network_options = {
 	interaction: {
 		hover: true
@@ -67,12 +591,12 @@ var network_options = {
 	manipulation: {
 		enabled: user_manipulation,
 		initiallyActive: false,
-		addEdge: add_reference,
+		addEdge: mispInteraction.add_reference,
 		editEdge: false,
-		addNode: add_item,
-		editNode: edit_item,
-		deleteNode: delete_item,
-		deleteEdge: remove_reference
+		addNode: mispInteraction.add_item,
+		editNode: mispInteraction.edit_item,
+		deleteNode: mispInteraction.delete_item,
+		deleteEdge: mispInteraction.remove_reference
 	},
 	physics: {
 		enabled: true,
@@ -142,500 +666,35 @@ var network_options = {
 	}
 };
 
-var typeaheadData;
 var typeaheadOption = {
 	source: function (query, process) {
 		if (typeaheadData === undefined) { // caching
-			typeaheadData = get_typeaheadData();
+			typeaheadData = dataHandler.get_typeaheadData();
 		}
 		process(typeaheadData);
 	},
 	updater: function(value) {
-		var nodeID = mapping_value_to_nodeID.get(value);
+		var nodeID = dataHandler.mapping_value_to_nodeID.get(value);
 		// select node and focus on it
-		network.selectNodes([nodeID]);
-		network.focus(nodeID, {animation: true, scale: 1});
+		eventGraph.network.selectNodes([nodeID]);
+		eventGraph.network.focus(nodeID, {animation: true, scale: 1});
 		// set focus to the network
 		$("#network-typeahead").blur();
 	},
 	autoSelect: true
 }
+var max_displayed_char = 32;
+var progressbar_length = 3; // divided by 100
+var loadingText_fetching = 'Fetching data';
+var loadingText_creating = 'Constructing network';
 
-function get_typeaheadData() {
-	var to_ret = []
-	for( entry of mapping_value_to_nodeID) {
-		var value = entry[0];
-		to_ret.push(value);
-	}
-	return to_ret;
-}
+var shortcut_text = "<b>V:</b> Center camera"
+		+ "\n<b>X:</b> Expaned node"
+		+ "\n<b>C:</b> Collapse node"
+		+ "\n<b>SHIFT+E:</b> Edit node"
+		+ "\n<b>SHIFT+F:</b> Search for value"
+		+ "\n<b>SHIFT:</b> Hold to add a reference"
+		+ "\n<b>DEL:</b> Delete selected item";
 
-// Graph interaction
-function collapse_node(parent_id) {
-	if (parent_id === undefined) { //  No node selected
-		return
-	}
-	var connected_nodes = network.getConnectedNodes(parent_id);
-	var connected_edges = network.getConnectedEdges(parent_id);
-	// Remove nodes
-	for (var nodeID of connected_nodes) {
- 		// Object's attribute are in UUID format (while other object or in simple integer)
-		if (nodeID.length > 10) {
-			nodes.remove(nodeID);
-		}
-	}
 
-	// Remove edges
-	for (var edgeID of connected_edges) {
- 		// Object's attribute (edge) are in UUID format (while other object or in simple integer)
-		if (edgeID.length > 10) {
-			edges.remove(edgeID);
-		}
-	}
-}
 
-function expand_node(parent_id) {
-	if (parent_id === undefined) { //  Node node selected
-		return;
-	} else if (nodes.get(parent_id).group == "attribute" || nodes.get(parent_id).group == "obj_relation") { //  Cannot expand attribute
-		return;
-	}
-
-	newNodes = [];
-	newRelations = [];
-
-	var parent_pos = network.getPositions([parent_id])[parent_id];
-	for(var attr of all_obj_relation.get(parent_id)) {
-		var parent_color = get_node_color(parent_id);
-				
-		// Ensure unicity of nodes
-		if (nodes.get(attr.uuid) !== null) {
-			continue;
-		}
-				
-		var striped_value = attr.value.substring(0, max_displayed_char) + (attr.value.length < max_displayed_char ? "" : "[...]");
-		var node = { 
-			id: attr.uuid,
-			x: parent_pos.x,
-			y: parent_pos.y,
-			label: attr.type + ': ' + striped_value,
-			title: attr.type + ': ' + attr.value,
-			group: 'obj_relation',
-			color: { 
-				background: parent_color
-			},
-			font: {
-				color: getTextColour(parent_color)
-			}
-		};
-		newNodes.push(node);
-				
-		var rel = {
-			from: parent_id,
-			to: attr.uuid,
-			arrows: '',
-			color: {
-				opacity: 0.5,
-				color: parent_color
-			},
-			length: 40
-		};
-		newRelations.push(rel);
-	}
-		
-	nodes.add(newNodes);
-	edges.add(newRelations);
-}
-			
-function remove_reference(edgeData, callback) {
-	edge_id = edgeData.edges[0];
-	var fromto = edge_id;
-	var relation_id = map_fromto_to_rel_id.get(fromto);
-	deleteObject('object_references', 'delete', relation_id, scope_id);
-}
-
-function add_reference(edgeData, callback) {
-	var uuid = map_id_to_uuid.get(edgeData.to);
-	if (!can_create_reference(edgeData.from) || !can_be_referenced(edgeData.to)) {
-		return;
-	}
-	genericPopup('/objectReferences/add/'+edgeData.from, '#popover_form', function() {
-		$('#targetSelect').val(uuid);
-		$('option[value='+uuid+']').click()
-	});
-}
-
-function can_create_reference(id) {
-	return nodes.get(id).group == "object";
-}
-function can_be_referenced(id) {
-	var res;
-	if (nodes.get(id).group == "object") {
-		res = true;
-	} else if (nodes.get(id).group == "attribute") {
-		res = true;
-	} else {
-		res = false;
-	}
-	return res;
-}
-
-function add_item(nodeData, callback) {
-	choicePopup("Add an element", [
-		{
-			text: "Add an Object",
-			onclick: "getPopup('"+scope_id+"', 'objectTemplates', 'objectChoice');"
-		},
-		{
-			text: "Add an Attribute",
-			onclick: "simplePopup('/attributes/add/"+scope_id+"');"
-		},
-	]);
-}
-
-function delete_item(nodeData, callback) {
-	var selected_nodes = nodeData.nodes;
-	for (nodeID of selected_nodes) {
-		node = nodes.get(nodeID)
-		if (node.group == "attribute") {
-			deleteObject('attributes', 'delete', nodeID, scope_id);
-		} else if (node.group == "object") {
-			deleteObject('objects', 'delete', nodeID, scope_id);
-		}
-	}
-	
-}
-
-function edit_item(nodeData, callback) {
-	var id = nodeData.id
-	simplePopup('/attributes/edit/'+id);
-}
-
-function genericPopupCallback(result) {
-	if (result == "success") {
-		fetch_data_and_update();
-		reset_view_on_stabilized();
-	}
-}
-
-function reset_graphs() {
-	nodes.clear();
-	edges.clear();
-}
-
-function update_graph(data) {
-	var total = data.items.length + data.relations.length;
-	network_loading(0, total);
-	
-	// New nodes will be automatically added
-	// removed references will be deleted
-	var node_conf;
-	newNodes = [];
-	newNodeIDs = [];
-	for(var node of data.items) {
-		var group, label;
-		if ( node.node_type == 'object' ) {
-			group =  'object';
-			label = node.type;
-			var striped_value = label.substring(0, max_displayed_char) + (label.length < max_displayed_char ? "" : "[...]");
-			node_conf = { 
-				id: node.id,
-				label: striped_value,
-				title: label,
-				group: group,
-				mass: 5,
-				icon: {
-					color: getRandomColor(),
-					face: 'FontAwesome',
-					code: String.fromCharCode(parseInt(mapping_meta_fa.get(node['meta-category'])['fa-hex'], 16)),
-				}
-			};
-			mapping_value_to_nodeID.set(striped_value, node.id);
-		} else {
-			group =  'attribute';
-			label = node.type + ': ' + node.val;
-			var striped_value = label.substring(0, max_displayed_char) + (label.length < max_displayed_char ? "" : "[...]");
-			node_conf = { 
-				id: node.id,
-				label: striped_value,
-				title: label,
-				group: group,
-				mass: 5,
-			};
-			mapping_value_to_nodeID.set(striped_value, node.id);
-		}
-
-		newNodes.push(node_conf);
-		newNodeIDs.push(node.id);
-	}
-	// check if nodes got deleted
-	var old_node_ids = nodes.getIds();
-	for (var old_id of old_node_ids) {
-		// This old node got removed
-		if (newNodeIDs.indexOf(old_id) == -1) {
-			nodes.remove(old_id);
-		}
-	}
-
-	nodes.update(newNodes);
-	network_loading(data.items.length, total);
-	
-	// New relations will be automatically added
-	// removed references will be deleted
-	newRelations = [];
-	newRelationIDs = [];
-	for(var rel of data.relations) {
-		var fromto = rel.from + '-' + rel.to;
-		var rel = {
-			id: fromto,
-			from: rel.from,
-			to: rel.to,
-			label: rel.type,
-			title: rel.comment,
-			color: {
-				opacity: 1.0
-			}
-		};
-		newRelations.push(rel);
-		newRelationIDs.push(fromto);
-	}
-	// check if nodes got deleted
-	var old_rel_ids = edges.getIds();
-	for (var old_id of old_rel_ids) {
-		// This old node got removed
-		if (newRelationIDs.indexOf(old_id) == -1) {
-			edges.remove(old_id);
-		}
-	}
-
-	edges.update(newRelations);
-	network_loading(total, total);
-}
-
-function reset_view() {
-	network.fit({animation: true });
-}
-
-function reset_view_on_stabilized() {
-	network.on("stabilized", function(params) {
-		network.fit({ animation: true });
-		network.off("stabilized"); //  Removed listener
-	});
-}
-
-// Data
-function extract_references(data) {
-	var items = [];
-	var relations = [];
-
-	if (data.Attribute !== undefined) {
-		for (var attr of data.Attribute) {
-			map_id_to_uuid.set(attr.id, attr.uuid);
-			items.push({
-				'id': attr.id,
-				'type': attr.type,
-				'val': attr.value,
-				'node_type': 'attribute'
-			});
-		}
-	}
-
-	if (data.Object !== undefined) {
-		for (var obj of data.Object) {
-			map_id_to_uuid.set(obj.id, obj.uuid);
-			all_obj_relation.set(obj.id, obj.Attribute);
-			items.push({
-				'id': obj.id,
-				'type': obj.name,
-				'val': obj.value,
-				'node_type': 'object',
-				'meta-category': obj['meta-category']
-			});
-			
-			for (var rel of obj.ObjectReference) {
-				var fromto = obj.id + '-' + rel.referenced_id;
-				map_fromto_to_rel_id.set(fromto, rel.id);
-				relations.push({
-					'from': obj.id,
-					'to': rel.referenced_id,
-					'type': rel.relationship_type,
-					'comment': rel.comment != "" ? rel.comment : "[Comment not set]"
-				});
-			}
-		}
-	}
-
-	return {
-		items: items,
-		relations: relations
-	}
-}
-
-function fetch_data_and_update() {
-	network_loading(-1, 0);
-	$.getJSON( "/events/getReferences/"+scope_id+"/event.json", function( data ) {
-		extracted = extract_references(data);
-		network_loading(1, 0);
-		update_graph(extracted, reset_view);
-	});
-}
-
-// -1: Undefined state
-// 0<=iterations<total: state known
-// iterations>=total: finished
-function network_loading(iterations, total) {
-	var progressbar_length = 3; // divided by 100
-	if(iterations == -1) {
-		var loadingText = 'Fetching data';
-		$('.loading-network-div').show();
-		$('.spinner-network').show();
-		$('.loadingText-network').text(loadingText);
-		$('.loadingText-network').show();
-	} else if (iterations >= 0 && iterations < total) {
-		var loadingText = 'Constructing network';
-		$('.loading-network-div').show();
-		$('.loadingText-network').text(loadingText);
-		$('.loadingText-network').show();
-		$('.spinner-network').hide();
-		// pb
-		var percentage = parseInt(iterations*100/total);
-		$('.progressbar-network-div').show();
-		$('#progressbar-network').show();
-		$('#progressbar-network').width(percentage*progressbar_length);
-		$('#progressbar-network').text(percentage+' %');
-
-	} else if (iterations >= total) {
-		$('#progressbar-network').width(100*progressbar_length);
-		$('#progressbar-network').text(100+' %');
-		setTimeout(function() {
-			$('.loading-network-div').hide();
-			$('.spinner-network').hide();
-			$('.loadingText-network').hide();
-			$('.progressbar-network-div').hide();
-			$('#progressbar-network').hide();
-		}, 1000)
-	}
-}
-
-function enable_interactive_graph() {
-	// unregister onclick
-	$('#references_toggle').removeAttr('onclick');
-
-	// Defer the loading of the network to let some time for the DIV to appear
-	setTimeout(function() {
-		$('.shortcut-help').popover({
-			container: 'body',
-			title: 'Shortcuts',
-			content: shortcut_text,
-			placement: 'left',
-			trigger: 'hover',
-			html: true,
-		});
-		$('.fullscreen-btn').click(function() {
-			var network_div = $('#references_div');
-			var fullscreen_enabled = !network_div.data('fullscreen');
-			network_div.data('fullscreen', fullscreen_enabled);
-			var height_val = fullscreen_enabled == true ? "calc(100vh - 42px - 42px - 10px)" : "500px";
-
-			network_div.css("height", height_val);
-			network_div[0].scrollIntoView({
-				behavior: "smooth",
-
-			});
-			setTimeout(function() { reset_view(); }, 400);
-		});
-		$('#network-typeahead').typeahead(typeaheadOption);
-
-		network = new vis.Network(container, data, network_options);
-		network.on("selectNode", function (params) {
-			network.moveTo({
-				position: {
-					x: params.pointer.canvas.x,
-					y: params.pointer.canvas.y
-				},
-				animation: true,
-			});
-		});
-		// Fit view only when page is loading for the first time
-		reset_view_on_stabilized();
-
-		$(document).on("keydown", function(evt) {
-			switch(evt.keyCode) {
-				case 88: // x
-					var selected_id = network.getSelectedNodes()[0]; 
-					expand_node(selected_id);
-					break;
-
-				case 67: // c
-					var selected_id = network.getSelectedNodes()[0]; 
-					collapse_node(selected_id);
-					break;
-				case 86: // v
-					reset_view();
-					break;
-
-				case 69: // e
-					if (evt.shiftKey) {
-						var selected_id = network.getSelectedNodes()[0]; 
-						data = { id: selected_id };
-						edit_item(data);
-					}
-					break;
-
-				case 70: // f
-					if (evt.shiftKey) {
-						// set focus to search input
-						network.disableEditMode(); // un-toggle edit mode
-						$('#network-typeahead').focus();
-						$('#network-typeahead').text('');
-						evt.preventDefault(); // avoid writting a 'F' in the input field
-					}
-					break;
-
-				case 16: // <SHIFT>
-					if (!user_manipulation) { // user can't modify references
-						break;
-					}
-					network.addEdgeMode(); // toggle edit mode
-					break;
-
-				case 46: // <Delete>
-					if (!user_manipulation) { // user can't modify references
-						break;
-					}
-					//  References
-					var selected_ids = network.getSelectedEdges(); 
-					for (var selected_id of selected_ids) {
-						var edge = { edges: [selected_id] }; // trick to use the same function
-						remove_reference(edge);
-					}
-
-					//  Objects or Attributes
-					selected_ids = network.getSelectedNodes();
-					data = { nodes: selected_ids };
-					delete_item(data);
-					break;
-
-				default:
-					break;
-			}
-		});
-
-		$(document).on("keyup", function(evt) {
-			switch(evt.keyCode) {
-				case 16: // <SHIFT>
-					if (!user_manipulation) { // user can't modify references
-						break;
-					}
-					network.disableEditMode(); // un-toggle edit mode
-					break;
-				default:
-					break;
-			}
-
-			
-		});
-
-		fetch_data_and_update();
-	}, 1);
-}