/*=============
* GLOBAL VARS
* ============*/
var eventGraph;
var dataHandler;
var mispInteraction;
var nodes = new vis.DataSet();
var edges = new vis.DataSet();

var typeaheadDataSearch;
var event_last_change = $('#eventgraph_network').data('event-timestamp');
var scope_id = $('#eventgraph_network').data('event-id');
var user_email = $('#eventgraph_network').data('user-email');
var container = document.getElementById('eventgraph_network');
var user_manipulation = $('#eventgraph_network').data('user-manipulation');
var is_siteadmin = $('#eventgraph_network').data('is-site-admin');
var root_id_attr = "rootNode:attribute";
var root_id_object = "rootNode:object";
var root_id_tag = "rootNode:tag";
var root_id_keyType = "rootNode:keyType";
var mapping_root_id_to_type = {};
mapping_root_id_to_type[root_id_attr] = 'attribute';
mapping_root_id_to_type[root_id_object] = 'object';
mapping_root_id_to_type[root_id_tag] = 'tag';
mapping_root_id_to_type[root_id_keyType] = 'keyType';
var root_node_x_pos = 800;
var cluster_expand_threshold = 100;
var nodes_ask_threshold = 300;

/*=========
* CLASSES
* ========*/
// network class (handle the event graph manipulation and events)
class EventGraph {
    constructor(network_options, nodes, edges) {
        // FIXME: Do the mapping between meta-catory and fa-icons.
        // Should be replaced later on.
        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": "f09d"});
        this.mapping_meta_fa.set('network', {"meta-category": "network","fa_text": "server","fa-hex": "f233"});
        this.mapping_meta_fa.set('misc', {"meta-category": "misc","fa_text": "cube","fa-hex": "f1b2"}); // Also considered as default
        // FIXME
        this.network_options = network_options;
        this.scope_name;
        this.scope_keyType;
        this.globalCounter = 0;
        this.first_draw = true;
        this.can_be_fitted_again = true;
        this.root_node_shown = false;
        this.is_filtered = false;
        this.menu_scope = this.init_scope_menu();
        this.menu_physic = this.init_physic_menu();
        this.menu_display = this.init_display_menu();
        this.menu_filter = this.init_filter_menu();
        this.menu_canvas = this.init_canvas_menu();
        this.menu_import = this.init_import_menu();
        this.menu_history = this.init_history_menu();
        this.new_edges_for_unreferenced_nodes = [];
        this.layout = 'default';
        this.solver = 'barnesHut';
        this.backup_connection_edges = {};
        this.nodes = nodes;
        this.edges = edges;
        var data = { // empty
            nodes: this.nodes,
            edges: this.edges
        };
        this.hiddenNode = new vis.DataSet();
        this.object_templates = {};
        this.canvasContext;

        this.cluster_index = 0; // use to get uniq cluster ID
        this.clusters = [];

        this.extended_event_color_mapping = {};
        this.extended_event_points = {};
        this.extended_event_uuid_mapping = {};

        this.network = new vis.Network(container, data, this.network_options);
        this.add_unreferenced_root_node();

        this.bind_listener();
    }

    bind_listener() {
        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,
            // });
        });

        this.network.on("dragStart", function (params) {
            eventGraph.physics_state(false);
            eventGraph.physics_activate_physics_for_nodes(params.nodes);
        });
        this.network.on("dragEnd", function (params) {
            eventGraph.physics_disable_physics_for_nodes(params.nodes);
            eventGraph.physics_state($('#checkbox_physics_enable').prop("checked"));
        });

        // create Hull for extending events
        this.network.on("beforeDrawing", function (ctx) {
            if (that.scope_name != "Reference" || !that.canDrawHull) {
                return;
            }

            for (var event_id in that.extended_event_points) {
                if (that.extended_event_color_mapping[event_id] === undefined) {
                    eventGraph.extended_event_color_mapping[event_id] = stringToRGB(that.extended_event_uuid_mapping[event_id]);
                }
                var chosen_color = eventGraph.extended_event_color_mapping[event_id];

                var nodes = that.network.getPositions(that.extended_event_points[event_id]);
                nodes = $.map(nodes, function(value, index) { // object to array
                    return [value];
                });
                drawExtendedEventHull(ctx, nodes, chosen_color, "Event "+event_id);
            }
        });

        this.network.on("afterDrawing", function (ctx) {
            that.canvasContext = ctx;
        });

        this.network.on("oncontext", function (event) {
            var node = that.network.getNodeAt({x: event.pointer.DOM.x, y: event.pointer.DOM.y});
            if (node !== undefined) {
                that.network.selectNodes([node]);
            }
        });
    }

    // Util
    get_node_color(uuid) {
        return this.nodes.get(uuid).icon.color;
    }
    get_FA_icon(metaCateg) {
        var dict = this.mapping_meta_fa.get(metaCateg);
        dict = dict === undefined ? this.mapping_meta_fa.get('misc') : dict; // if unknown meta-categ, take default
        return String.fromCharCode(parseInt(dict['fa-hex'], 16))
    }
    getUniqId() {
        this.globalCounter++;
        return this.globalCounter-1;
    }
    update_scope(value) {
        if (value === undefined) {
            value = $("#select_graph_scope").val();
        } else {
            $("#select_graph_scope").val(value);
        }

        if (value == "Pivot key") {
            $("#network-scope-badge").text(value + ": " + eventGraph.scope_keyType);
        } else {
            $("#network-scope-badge").text(value);
        }
        this.scope_name = value;
        dataHandler.scope_name = value;
    }

    init_scope_menu() {
        var menu_scope = new ContextualMenu({
            trigger_container: document.getElementById("network-scope"),
            bootstrap_popover: true,
            style: "z-index: 1",
            container: document.getElementById("eventgraph_div"),
        });
        menu_scope.add_select({
            id: "select_graph_scope",
            label: "Scope",
            tooltip: "The scope represented by the network",
            event: function(value) {
                if (value == "Pivot key" && $('#input_graph_scope_jsonkey').val() == "") { // no key selected  for Pivot key scope
                    return;
                } else {
                    eventGraph.update_scope(value);
                    dataHandler.fetch_data_and_update();
                }
            },
            options: ["Reference", "Tag", "Pivot key"],
            default: "Reference"
        });
        menu_scope.add_select({
            id: "input_graph_scope_jsonkey",
            label: "Pivot key",
            tooltip: "The key around which the network will be constructed",
            event: function(value) {
                if (value == "Pivot key" && $('#input_graph_scope_jsonkey').val() == "") { // no key selected for Pivot key scope
                    return;
                } else {
                    eventGraph.scope_keyType = value;
                    eventGraph.update_scope("Pivot key");
                    dataHandler.fetch_data_and_update();
                }
            },
            options: dataHandler.available_pivot_key ? dataHandler.available_pivot_key : [],
            default: ""
        });
        return menu_scope;
    }

    init_physic_menu() {
        var menu_physic = new ContextualMenu({
            trigger_container: document.getElementById("network-physic"),
            bootstrap_popover: true,
            style: "z-index: 1",
            container: document.getElementById("eventgraph_div")
        });
        menu_physic.add_select({
            id: "select_physic_solver",
            label: "Solver",
            tooltip: "Physics solver to use",
            event: function(value) {
                eventGraph.physics_change_solver(value);
            },
            options: ["barnesHut", "repulsion"],
            default: "barnesHut"
        });
        menu_physic.add_slider({
            id: 'slider_physic_node_repulsion',
            label: "Node repulsion",
            min: 0,
            max: 1000,
            value: this.network_options.physics.barnesHut.springLength,
            step: 10,
            event: function(value) {
                eventGraph.physics_change_repulsion(parseInt(value));
            },
            tooltip: "Correspond to spring length for barnesHut and node spacing for hierarchical"
        });
        menu_physic.add_checkbox({
            label: "Enable physics",
            id: "checkbox_physics_enable",
            event: function(checked) {
                eventGraph.physics_state(checked);
            },
            checked: true
        });
        return menu_physic;
    }

    init_display_menu() {
        var menu_display = new ContextualMenu({
            trigger_container: document.getElementById("network-display"),
            bootstrap_popover: true,
            style: "z-index: 1",
            container: document.getElementById("eventgraph_div")
        });
        menu_display.add_select({
            id: "select_display_layout",
            label: "Layout",
            event: function(value) {
                switch(value) {
                    case "default":
                    eventGraph.change_layout_type("default");
                    break;
                    case "hierarchical.directed":
                    eventGraph.change_layout_type("directed");
                    break;
                    case "hierarchical.hubsize":
                    eventGraph.change_layout_type("hubsize");
                    break;
                    default:
                    eventGraph.change_layout_type("default");
                }
            },
            options: [
                {text: "Default layout", value: "default"},
                {text: "Hierarchical directed", value: "hierarchical.directed"},
                {text: "Hierarchical hubsize", value: "hierarchical.hubsize"}
            ],
            tooltip: "Choose layout",
            default: "default"
        });
        menu_display.add_select({
            id: "select_display_object_field",
            label: "Object-relation in label",
            event: function(value) {
                dataHandler.selected_type_to_display = value;
                dataHandler.fetch_data_and_update();
            },
            options: [],
            tooltip: "If no item is selected display the first requiredOneOf of the object"
        });
        menu_display.add_button({
            label: "Expand all nodes",
            type: "danger",
            event: function() {
                var objectIds = eventGraph.nodes.getIds({
                    filter: function(item) { return item.group == 'object'; }
                })
                for(var nodeId of objectIds) {
                    eventGraph.expand_node(nodeId);
                }
            },
            title: "Expanding all nodes may takes some time"
        });
        menu_display.add_button({
            label: "Collapse all nodes",
            type: "danger",
            event: function() {
                var objectIds = eventGraph.nodes.getIds({
                    filter: function(item) { return item.group == 'object'; }
                });
                for(var nodeId of objectIds) {
                    eventGraph.collapse_node(nodeId);
                }
            },
            title: "Collapsing all nodes may takes some time"
        });
        menu_display.add_slider({
            id: 'slider_display_max_char_num',
            label: "Characters to show",
            tooltip: "Maximum number of characters to display in the label",
            min: 8,
            max: 1024,
            value: max_displayed_char,
            step: 8,
            applyButton: true,
            event: function(value) {
                $("#slider_display_max_char_num").parent().find("span").text(value);
            },
            eventApply: function(value) {
                dataHandler.fetch_data_and_update();
            }
        });
        menu_display.add_slider({
            id: 'slider_display_picture_size',
            label: "Picture size",
            tooltip: "Picture size",
            min: 10,
            max: 500,
            value: 50,
            step: 10,
            applyButton: true,
            event: function(value) {
                $("#slider_display_picture_size").parent().find("span").text(value);
            },
            eventApply: function(value) {
                dataHandler.fetch_data_and_update();
            }
        });
        menu_display.add_button({
            label: "Remove leaves",
            type: "primary",
            event: function () {
                eventGraph.remove_leaves();
            },
        });
        return menu_display;
    }

    init_filter_menu() {
        var menu_filter = new ContextualMenu({
            trigger_container: document.getElementById("network-filter"),
            bootstrap_popover: true,
            style: "z-index: 1",
            container: document.getElementById("eventgraph_div")
        });
        menu_filter.add_action_table({
            id: "table_attr_presence",
            container: menu_filter.menu,
            title: "Filter on Attribute presence",
            header: ["Relation", "Attribute"],
            control_items: [
                {
                    DOMType: "select",
                    item_options: {
                        options: ["Contains", "Do not contain"],
                    }
                },
                {
                    DOMType: "select",
                    item_options: {
                        id: "table_control_select_attr_presence",
                        options: []
                    }
                },
            ],
            data: [],
        });
        menu_filter.create_divider(3);
        menu_filter.add_action_table({
            id: "table_tag_presence",
            container: menu_filter.menu,
            title: "Filter on Tag presence",
            header: ["Relation", "Tag"],
            control_items: [
                {
                    DOMType: "select",
                    item_options: {
                        options: ["Contains", "Do not contain"]
                    }
                },
                {
                    DOMType: "select",
                    item_options: {
                        id: "table_control_select_tag_presence",
                        options: []
                    }
                },
            ],
            data: [],
        });
        menu_filter.create_divider(3);
        menu_filter.add_action_table({
            id: "table_attr_value",
            container: menu_filter.menu,
            title: "Filter on Attribute value",
            header: ["Attribute", "Comparison", "Value"],
            control_items: [
                {
                    DOMType: "select",
                    item_options: {
                        id: "table_control_select_attr_value",
                        options: []
                    }
                },
                {
                    DOMType: "select",
                    item_options: {
                        options: ["<", "<=", "==", ">=", ">"]
                    }
                },
                {
                    DOMType: "input",
                    item_options: {}
                }
            ],
            data: [],
            onAddition: function(data) {
                eventGraph.menu_filter.items["table_attr_presence"].add_row(["Contains", data[0]]);
            }
        });
        menu_filter.items["table_attr_value"].table.style.minWidth = "550px";
        menu_filter.add_button({
            label: "Filter",
            type: "primary",
            event: function() {
                dataHandler.fetch_data_and_update();
            }
        });
        return menu_filter;
    }

    init_canvas_menu() {
        var menu_canvas = new ContextualMenu({
            trigger_container: document.getElementById("eventgraph_network"),
            right_click: true,
            style: "z-index: 1",
            container: document.getElementById("eventgraph_div")
        });
        menu_canvas.add_button({
            label: "View/Edit",
            type: "primary",
            event: function() {
                var selected_id = eventGraph.network.getSelectedNodes()[0];
                if (selected_id === undefined) { // A node is selected
                    return;
                }
                var data = { id: selected_id };
                mispInteraction.edit_item(data);
            }
        });
        menu_canvas.add_button({
            label: "Hide",
            type: "info",
            event: function() {
                var selected_id = eventGraph.network.getSelectedNodes()[0];
                if (selected_id === undefined) { // A node is selected
                    return;
                }
                eventGraph.hideNode([selected_id]);
            }
        });
        menu_canvas.add_button({
            label: "Expand",
            type: "primary",
            event: function() {
                var selected_id = eventGraph.network.getSelectedNodes()[0];
                if (selected_id === undefined) { // A node is selected
                    return;
                }
                eventGraph.expand_node(selected_id);
            }
        });
        menu_canvas.add_button({
            label: "Collapse",
            type: "primary",
            event: function() {
                var selected_id = eventGraph.network.getSelectedNodes()[0];
                if (selected_id === undefined) { // A node is selected
                    return;
                }
                eventGraph.collapse_node(selected_id);
            }
        });
        return menu_canvas;
    }

    init_import_menu() {
        var menu_import = new ContextualMenu({
            trigger_container: document.getElementById("network-import"),
            bootstrap_popover: true,
            style: "z-index: 1",
            container: document.getElementById("eventgraph_div")
        });
        menu_import.add_select_button({
            id: "select_button_graph_import_export",
            label: "Export",
            tooltip: "Export graph",
            textButton: "Export",
            event: function(selected_value) {
                if (selected_value == 'json') {
                    var jsonData = eventGraph.toJSON();
                    download_file(jsonData, 'json');
                } else if (selected_value == 'png' || selected_value == 'jpeg') {
                    var dataURL = eventGraph.canvasContext.canvas.toDataURL('image/'+selected_value);
                    download_file(dataURL, selected_value);
                } else if (selected_value == 'DOT Language') {
                    var hiddenNodeIds = [];
                    eventGraph.hiddenNode.forEach(function(node) {
                        hiddenNodeIds.push(node.id);
                    });

                    var nodePositions = eventGraph.network.getPositions();
                    var validNodes = eventGraph.nodes.get({ filter: function (nodeD) {
                        var nodeP = nodePositions[nodeD.id];
                        if (nodeP !== undefined) {
                            return true;
                        }
                        return false;
                    }});


                    var dotData = convert_to_dot_lang(validNodes, eventGraph.edges, hiddenNodeIds);
                    download_file(dotData, 'dot');
                }
            },
            options: ["json", "png", "jpeg", "DOT Language"],
            default: "json"
        });
        return menu_import;
    }

    init_history_menu() {
        var menu_history= new ContextualMenu({
            trigger_container: document.getElementById("network-history"),
            bootstrap_popover: true,
            style: "z-index: 1",
            container: document.getElementById("eventgraph_div")
        });
        menu_history.add_action_table({
            id: "table_graph_history_actiontable",
            container: menu_history.menu,
            title: "Network history",
            header: ["Id", "Name", "Owner", "Date"],
            control_items: [
                {
                    DOMType: "input",
                    colspan: 4,
                    item_options: {
                        style: "width: 98%;",
                        placeholder: "Network's name",
                        id: "networkHistory_input_name_save",
                        disabled: !user_manipulation
                    }
                }
            ],
            header_action_button: {
                additionEnabled: false,
                style: {
                    type: "success",
                    icon: "fa-save",
                    tooltip: "Save network"
                },
                disabled: !user_manipulation
            },
            row_action_button: {
                removalEnabled: false,
                style: {
                    tooltip: "Delete saved network"
                },
                others: [
                    {
                        style: {
                            type: "success",
                            icon: "fa-share ",
                            tooltip: "Load saved network"
                        },
                        event: function(data) {
                            var network_id = data[0];
                            dataHandler.fetch_and_import_graph(network_id);
                        }
                    }
                ]
            },
            data: [],
            onAddition: function(network_name, selfTable) {
                var network_json = eventGraph.toJSON();
                var preview = eventGraph.canvasContext.canvas.toDataURL('image/png', 0.1);

                mispInteraction.save_network(network_json, network_name, preview);
                $('#networkHistory_input_name_save').val('');
            },
            onRemove: function(data, selfTable) {
                mispInteraction.delete_saved_network(data);
            }
        });
        menu_history.items["table_graph_history_actiontable"].table.style.minWidth = "450px";

        // fill history table
        // has to do it manually here (not using reset_graph_history) because menu_history still not constructed yet
        dataHandler.fetch_graph_history(function(history_formatted, network_previews) {
            menu_history.items["table_graph_history_actiontable"].set_table_data(history_formatted);
            for(var i=0; i<history_formatted.length; i++) {
                var history = history_formatted[i];
                var cur_email = history[2];
                var tr = eventGraph.menu_history.items.table_graph_history_actiontable.get_DOM_row(i);
                if (!(cur_email == user_email || is_siteadmin)) {
                    // disable delete button
                    var btn_del = $(tr).find('.btn-danger');
                    btn_del.prop('disabled', true);
                }
                // set tooltip preview
                var preview = network_previews[i];
                if (typeof preview == 'string') {
                    var btn_plot = $(tr).find('.btn-success');
                    btn_plot.data('network-preview', preview);
                    btn_plot.popover({
                        container: 'body',
                        content: function() { return '<img style="width: 500px; height: 150px;" src="' + $('<div>').text($(this).data('network-preview')).html() + '" />'; },
                        placement: 'right',
                        trigger: 'hover',
                        template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content" style="width: 500px; height: 150px;"></div></div>',
                        html: true,
                    });
                }
            }
        });

        return menu_history;
    }

    get_filtering_rules() {
        var rules_presence = eventGraph.menu_filter.items["table_attr_presence"].get_data();
        var rules_tag_presence = eventGraph.menu_filter.items["table_tag_presence"].get_data();
        var rules_value = eventGraph.menu_filter.items["table_attr_value"].get_data();
        var rules = { presence: rules_presence, tag_presence: rules_tag_presence, value: rules_value };
        return rules;
    }
    // Graph interaction

    // Clusterize the specified node with its connected childs
    clusterize(rootID) {
        var that = eventGraph;
        var type = mapping_root_id_to_type[rootID];
        var clusterOptionsByData = {
            processProperties: global_processProperties,
            clusterNodeProperties: {borderWidth: 3, shape: 'database', font: {size: 30}},
            joinCondition: function(nodeOptions) {
                return nodeOptions.unreferenced == type || nodeOptions.id == rootID;
            }

        };
        that.network.cluster(clusterOptionsByData);
    }

    init_clusterize() {
        for(var key of Object.keys(mapping_root_id_to_type)) {
            this.clusterize(key);
        }
    }

    reset_graphs(hard) {
        this.nodes.clear();
        this.edges.clear();
        if (hard) {
            this.backup_connection_edges = {};
            this.extended_event_points = {};
            this.extended_event_uuid_mapping = {};
            this.extended_event_color_mapping = {};
        }
    }

    update_graph(data) {
        var that = this;
        that.network_loading(true, loadingText_creating);

        this.extended_event_uuid_mapping = data.extended_event_uuid_mapping;

        dataHandler.mapping_node_to_from_edges = {};
        dataHandler.mapping_node_to_to_edges = {};
        // 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.event_id != scope_id) { // add node ids of extended event
                if (that.extended_event_points[node.event_id] === undefined) {
                    that.extended_event_points[node.event_id] = [];
                }
                that.extended_event_points[node.event_id].push(node.id);
            }

            if ( node.node_type == 'object' ) {
                var group =  'object';
                var label = dataHandler.generate_label(node);
                var labelHtml = label + '</br><i>' + escapeHtml(node.comment) + '</i>'
                label += ' ' + escapeHtml(node.comment)
                var striped_value = that.strip_text_value(label);
                node_conf = {
                    id: node.id,
                    uuid: node.uuid,
                    Attribute: node.Attribute,
                    event_id: node.event_id,
                    label: striped_value,
                    title: labelHtml,
                    group: group,
                    mass: 5,
                    icon: {
                        color: node.color,
                        face: '"Font Awesome 5 Free"',
                        code: that.get_FA_icon(node['meta-category']),
                    }
                };
                dataHandler.mapping_value_to_nodeID.set(label, node.id);
            } else if (node.node_type == 'tag') {
                var tag_color = node.tagContent.colour;
                group =  'tag';
                label = node.label;
                node_conf = {
                    id: node.id,
                    uuid: node.uuid,
                    label: label,
                    title: label,
                    group: group,
                    mass: 20,
                    color: {
                        background: tag_color,
                        border: tag_color
                    },
                    font: {
                        color: getTextColour(tag_color),
                        bold: true,
                        size: 28
                    },
                    shapeProperties: {
                        borderRadius: 6
                    }
                };
                dataHandler.mapping_value_to_nodeID.set(label, node.id);
            } else if (node.node_type == 'keyType') {
                group = 'keyType';
                label = that.scope_keyType + ": " + node.label;
                var striped_value = that.strip_text_value(label);
                node_conf = {
                    id: node.id,
                    label: striped_value,
                    title: label,
                    group: group
                };
                dataHandler.mapping_value_to_nodeID.set(label, node.id);
            } else {
                group =  'attribute';
                label = node.type + ': ' + node.label;
                label += ' ' + escapeHtml(node.comment)
                var labelHtml = label + '</br><i>' + escapeHtml(node.comment) + '</i>'
                var striped_value = that.strip_text_value(label);
                node_conf = {
                    id: node.id,
                    uuid: node.uuid,
                    event_id: node.event_id,
                    label: striped_value,
                    title: labelHtml,
                    group: group,
                    mass: 5,
                };
                if (node.type == 'attachment' && isPicture(node.label)) {
                    // fetch picture via attributes/viewPicture
                    node_conf.group = 'attribute_image';
                    node_conf.size = $('#slider_display_picture_size').val();
                    node_conf.image = baseurl + '/attributes/viewPicture/' + node.id + '/1';
                }
                dataHandler.mapping_value_to_nodeID.set(label, node.id);
            }

            newNodes.push(node_conf);
            newNodeIDs.push(node.id);
        }
        // check if nodes got deleted
        var old_node_ids = that.nodes.getIds();
        for (var old_id of old_node_ids) {
            // Ignore root node
            if (old_id == "rootNode:attribute" || old_id == "rootNode:object" || old_id == "rootNode:tag" || old_id == "rootNode:keyType") {
                continue;
            }
            // This old node got removed
            if (newNodeIDs.indexOf(old_id) == -1) {
                that.nodes.remove(old_id);
            }
        }

        that.nodes.update(newNodes);

        // New relations will be automatically added
        // removed references will be deleted
        var newRelations = [];
        var newRelationIDs = [];
        for(var rel of data.relations) {
            var rel = {
                id: rel.id,
                from: rel.from,
                to: rel.to,
                label: rel.type,
                title: rel.comment,
                color: {
                    opacity: 1.0,
                }
            };
            newRelations.push(rel);
            newRelationIDs.push(rel.id);
            if (!dataHandler.mapping_node_to_from_edges[rel.from]) {
                dataHandler.mapping_node_to_from_edges[rel.from] = [];
            }
            if (!dataHandler.mapping_node_to_to_edges[rel.to]) {
                dataHandler.mapping_node_to_to_edges[rel.to] = [];
            }
            dataHandler.mapping_node_to_from_edges[rel.from].push(rel.to);
            dataHandler.mapping_node_to_to_edges[rel.to].push(rel.from);
        }
        // check if nodes got deleted
        var old_rel_ids = that.edges.getIds();
        for (var old_id of old_rel_ids) {
            // This old node got removed
            if (newRelationIDs.indexOf(old_id) == -1) {
                that.edges.remove(old_id);
            }
        }

        that.edges.update(newRelations);

        that.remove_root_nodes();
        // do not clusterize if the network is filtered
        if (!that.is_filtered) {
            if (that.scope_name == 'Reference') {
                that.add_unreferenced_root_node();
                // links unreferenced attributes and object to root nodes
                if (that.first_draw) {
                    that.link_not_referenced_nodes();
                    that.first_draw = !that.first_draw
                }
            } else if (that.scope_name == 'Tag') {
                that.add_tag_root_node();
                // links untagged attributes and object to root nodes
                if (that.first_draw) {
                    that.link_not_referenced_nodes();
                    that.first_draw = !that.first_draw
                }
            } else if (that.scope_name == 'Distribution') {
            } else if (that.scope_name == 'Correlation') {
            } else {
                that.add_keyType_root_node();
                if (that.first_draw) {
                    that.link_not_referenced_nodes();
                    that.first_draw = !that.first_draw
                }
            }
        }

        eventGraph.canDrawHull = true;
        that.network_loading(false, "");
    }

    strip_text_value(text) {
        var max_num = $("#slider_display_max_char_num").val();
        return text.substring(0, max_num) + (text.length < max_num ? "" : "[...]")
    }

    reset_view() {
        this.network.fit({animation: true });
    }

    reset_view_on_stabilized() { // Avoid fitting more than once, (cause a bug if it occurs)
        var that = eventGraph;
        if (that.can_be_fitted_again) {
            that.can_be_fitted_again = false;
            this.network.once("stabilized", function(params) {
                that.network.fit({ animation: true });
                that.can_be_fitted_again = true;
            });
        }
    }

    focus_on_stabilized(nodeID) {
        this.network.once("stabilized", function(params) {
            eventGraph.network.focus(nodeID, {animation: true, scale: 1});
        });
    }

    physics_state(state) {
        var that = eventGraph;
        that.network_options.physics.enabled = state;
        if(that.layout == "default") {
            $("#select_physic_solver").prop('disabled', !state);
        }
        $("#slider_physic_node_repulsion").prop('disabled', !state);
        that.network.setOptions({physics: { enabled: state} })
    }

    physics_change_repulsion(value) {
        var that = eventGraph;
        if(that.layout == 'default') { // repulsion on default is related to spring length
            if(that.solver == "barnesHut") {
                that.network.setOptions({physics: { barnesHut: {springLength: value} } })
            } else {
                that.network.setOptions({physics: { repulsion: {nodeDistance: value} } })
            }
        } else {
            that.network.setOptions({physics: { hierarchicalRepulsion: {nodeDistance: value} } })
        }
    }

    physics_change_solver(solver) {
        var that = eventGraph;
        if(that.layout == 'default') { // only hierarchical repulsion for other layout
            that.network.setOptions({physics: { solver: solver } })
            // update physics slider value
            if(solver == "barnesHut") {
                $("#slider_physic_node_repulsion").val(that.network_options.physics.barnesHut.springLength);
                $("#slider_physic_node_repulsion").parent().find("span").text(that.network_options.physics.barnesHut.springLength);
            } else {
                $("#slider_physic_node_repulsion").val(that.network_options.physics.repulsion.nodeDistance);
                $("#slider_physic_node_repulsion").parent().find("span").text(that.network_options.physics.repulsion.nodeDistance);
            }
        }
        that.solver = solver;
    }

    physics_disable_physics_for_nodes(nodes) {
        var update = [];
        nodes.forEach(function(nodeId) {
            if (!eventGraph.network.isCluster(nodeId)) {
                update.push({id: nodeId, fixed: {x: true, y: true}});
            }
        });
        eventGraph.nodes.update(update);
    }
    physics_activate_physics_for_nodes(nodes) {
        var update = [];
        nodes.forEach(function(nodeId) {
            if (!eventGraph.network.isCluster(nodeId)) {
                update.push({id: nodeId, fixed: {x: false, y: false}});
            }
        });
        eventGraph.nodes.update(update);
    }

    remove_leaves() {
        var nodeIds = []
        eventGraph.nodes.forEach(function (node) {
            // Hide node that have no outgoing references and are not being targetted by others
            if (
                dataHandler.mapping_node_to_from_edges[node.id] === undefined &&
                (
                    dataHandler.mapping_node_to_to_edges[node.id] === undefined ||
                    dataHandler.mapping_node_to_to_edges[node.id].length < 2
                )
            ) {
                nodeIds.push(node.id)
            }
        })
        eventGraph.hideNode(nodeIds)
    }

    // state true: loading
    // state false: finished
    network_loading(state, message) {
        if(state) {
            $('.loading-network-div').show();
            $('.loadingText-network').text(message);
        } else {
            setTimeout(function() {
                $('.loading-network-div').hide();
            }, 500)
        }
    }


    collapse_node(parent_id) {
        if(parent_id === undefined) { return; }

        if (!(parent_id == root_id_attr || parent_id == root_id_object || parent_id == root_id_tag || parent_id == root_id_keyType)) { // Is not a root node
            var parent_node = this.nodes.get(parent_id);
            var node_group = parent_node.group;
            if (parent_id === undefined || node_group != 'object') { //  No node selected  or collapse not permitted
                return
            }
            parent_node.expanded = false;
            var connected_nodes_ids = this.network.getConnectedNodes(parent_id);
            var connected_nodes = this.nodes.get(connected_nodes_ids);
            for (var node of connected_nodes) {
                if (node.group.slice(0, 12) == "obj_relation") {
                    // remove edge
                    var connected_edges = this.network.getConnectedEdges(node.id);
                    for (var edgeID of connected_edges) {
                        this.edges.remove(edgeID);
                    }
                    this.nodes.remove(node.id);
                }
            }
            this.nodes.update(parent_node);
        } else { // Is a root node
            this.clusterize(parent_id);
        }
    }

    expand_node(parent_id) {
        if (!this.network.isCluster(parent_id)) {

            var parent_node = this.nodes.get(parent_id);
            if (parent_id === undefined //  Node node selected
                || parent_node.group != "object") { //  Cannot expand attribute
                    return;
                }
                parent_node.expanded = true;

                var objAttributes = parent_node.Attribute;
                var newNodes = [];
                var newRelations = [];

                var parent_pos = this.network.getPositions([parent_id])[parent_id];
                for(var attr of objAttributes) {
                    var parent_color = eventGraph.get_node_color(parent_id);

                    // Ensure unicity of nodes
                    if (this.nodes.get(attr.uuid) !== null) {
                        continue;
                    }

                    var striped_value = this.strip_text_value(attr.value);
                    var node = {
                        id: attr.uuid,
                        x: parent_pos.x,
                        y: parent_pos.y,
                        label: attr.object_relation + ': ' + striped_value,
                        title: attr.object_relation + ': ' + attr.value,
                        group: 'obj_relation',
                        color: {
                            background: parent_color
                        },
                        font: {
                            color: getTextColour(parent_color)
                        }
                    };
                    if (attr.type == 'attachment'  && isPicture(attr.value)) {
                        // fetch picture via attributes/viewPicture
                        node.group = 'obj_relation_image';
                        node.size = $('#slider_display_picture_size').val();
                        node.image = baseurl + '/attributes/viewPicture/' + attr.id + '/1';
                    }
                    newNodes.push(node);
                    dataHandler.mapping_obj_relation_value_to_nodeID.set(attr.value, node.id);

                    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);
                this.nodes.update(parent_node);

            } else { // is a cluster
                if(this.network.getNodesInCluster(parent_id).length > cluster_expand_threshold) {
                    if(!confirm("The cluster contains lots of nodes. Are you sure you want to expand it?")) {
                        return;
                    }
                }
                // expand cluster
                this.network.openCluster(parent_id);
            }
        }

        expand_previous_expansion(nodes) {
            var that = this;
            for (var id in nodes) {
                if (nodes.hasOwnProperty(id)) {
                    var node = nodes[id];
                    if (node.expanded) {
                        eventGraph.expand_node(node.id);
                    }
                }
            }
        }

        hideNode(nodeIds) {
            nodeIds.forEach(function(nodeId) {
                var node = eventGraph.nodes.get(nodeId);
                eventGraph.hiddenNode.add(node);
                eventGraph.nodes.remove(nodeId);
            });
        }

        link_not_referenced_nodes() {
            // unlink previously linked
            this.edges.remove(this.new_edges_for_unreferenced_nodes)
            this.new_edges_for_unreferenced_nodes = [];

            // link not referenced nodes
            var newEdges = [];
            var that = this;
            this.nodes.forEach(function(nodeData) {
                var cur_id = nodeData.id;
                var cur_group = nodeData.group;

                // Do not link already connected nodes
                if (that.network.getConnectedEdges(cur_id).length > 0) {
                    if (nodeData['unreferenced'] !== undefined) {
                        that.nodes.remove(nodeData.id);
                        delete nodeData['unreferenced'];
                        that.nodes.add(nodeData);
                    }
                    return;
                }

                var new_edge = {
                    to: cur_id,
                    id: "temp_edge_unreferenced_" + that.getUniqId(),
                    arrows: '',
                    color: {
                        opacity: 0.7,
                        color: '#d9d9d9'
                    },
                    length: 150
                }

                if (that.scope_name == 'Reference') {
                    if (cur_group.slice(0, 9) == 'attribute' || cur_group == 'object') {
                        new_edge.from = cur_group.slice(0, 9) == 'attribute' ? root_id_attr : root_id_object;
                        that.nodes.update({id: nodeData.id, unreferenced: cur_group.slice(0, 9)});
                    }
                } else if (that.scope_name == 'Tag') {
                    if (cur_group.slice(0, 9) == 'attribute' || cur_group == 'object') {
                        new_edge.from = root_id_tag;
                        that.nodes.update({id: nodeData.id, unreferenced: 'tag'});
                    }
                } else {  // specified key
                    if (cur_group.slice(0, 9) == 'attribute' || cur_group == 'object') {
                        new_edge.from = root_id_keyType;
                        that.nodes.update({id: nodeData.id, unreferenced: that.scope_name});
                    }
                }

                newEdges.push(new_edge);
                that.new_edges_for_unreferenced_nodes.push(new_edge.id);
            });
            this.edges.add(newEdges);
            this.init_clusterize();
        }

        remove_root_nodes() {
            this.remove_unreferenced_root_node();
            this.remove_tag_root_node();
            this.remove_keyType_root_node();
        }

        add_unreferenced_root_node() {
            if (this.root_node_shown) {
                return;
            }
            var root_node_attr = {
                id: root_id_attr,
                x: -root_node_x_pos,
                y: 0,
                label: 'Unreferenced Attributes',
                title: 'All Attributes not being referenced',
                group: 'rootNodeAttribute'
            };
            var root_node_obj = {
                id: root_id_object,
                x: root_node_x_pos,
                y: 0,
                label: 'Unreferenced Objects',
                title: 'All Objects not being referenced',
                group: 'rootNodeObject'
            };
            this.nodes.add([root_node_attr, root_node_obj]);
            this.root_node_shown = true;
        }
        remove_unreferenced_root_node() {
            this.nodes.remove([root_id_attr, root_id_object]);
            this.root_node_shown = false;
        }

        add_tag_root_node() {
            if (this.root_node_shown) {
                return;
            }
            var root_node_tag = {
                id: root_id_tag,
                x: -root_node_x_pos,
                y: 0,
                label: 'Untagged Attribute',
                title: 'All Attributes not being tagged',
                group: 'rootNodeTag'
            };
            this.nodes.add([root_node_tag]);
            this.root_node_shown = true;
        }
        remove_tag_root_node() {
            this.nodes.remove([root_id_tag]);
            this.root_node_shown = false;
        }

        add_keyType_root_node() {
            if (this.root_node_shown) {
                return;
            }
            var root_node_keyType = {
                id: root_id_keyType,
                x: -root_node_x_pos,
                y: 0,
                label: this.scope_keyType + ': No value',
                title: 'All Attributes not having a value for the specified field',
                group: 'rootNodeKeyType'
            };
            this.nodes.add([root_node_keyType]);
            this.root_node_shown = true;

        }
        remove_keyType_root_node() {
            this.nodes.remove([root_id_keyType]);
            this.root_node_shown = false;
        }

        switch_unreferenced_nodes_connection() {
            var that = eventGraph;
            var to_update = [];
            var root_ids;
            switch(that.scope_name) {
                case "Reference":
                root_ids = [root_id_attr, root_id_object];
                break;
                case "Tag":
                root_ids = [root_id_tag];
                break;
                default:
                root_ids = [root_id_keyType];
                break;
            }

            for(var root_id of root_ids) {
                if(that.layout == 'default') {
                    var all_edgesID = that.backup_connection_edges[root_id]
                    if (all_edgesID === undefined) { // edgesID was not saved (happen if we switch scope then layout)
                        // redraw everything
                        eventGraph.destroy_and_redraw();
                        return;
                    }
                } else {
                    that.network.storePositions();
                    var prev_node = root_id;
                    var all_edgesID = that.network.getConnectedEdges(root_id)
                    that.backup_connection_edges[root_id] = all_edgesID;
                }
                var all_edges = that.edges.get(all_edgesID);

                for(var i=0; i<all_edges.length; i++ ) {
                    var edge = all_edges[i];
                    if(that.layout == 'default') {
                        // restore all edges connected to root node
                        edge.from = root_id;
                    } else {
                        // change edges so that they are linked one node after the other
                        edge.from = prev_node;
                        prev_node = edge.to;
                    }
                    to_update.push(edge);
                }
            }
            that.edges.update(to_update);
        }

        change_layout_type(layout) {
            var that = eventGraph;
            if (that.layout == layout) { // Hasn't changed
            return;
        }

        if (layout == 'default') {
            that.network_options = $.extend(true, {}, default_layout_option);;
            // update physics slider value
            $("#slider_physic_node_repulsion").val(that.network_options.physics.barnesHut.springLength);
            $("#slider_physic_node_repulsion").parent().find("span").text(that.network_options.physics.barnesHut.springLength);
            $("#select_physic_solver").prop('disabled', false);
        } else {
            that.network_options.layout.hierarchical.enabled = true;
            that.network_options.layout.hierarchical.sortMethod = layout;
            // update physics slider value
            $("#slider_physic_node_repulsion").val(that.network_options.physics.hierarchicalRepulsion.nodeDistance);
            $("#slider_physic_node_repulsion").parent().find("span").text(that.network_options.physics.hierarchicalRepulsion.nodeDistance);
            $("#select_physic_solver").prop('disabled', true);
        }
        that.layout = layout;
        that.network_loading(true, loadingText_redrawing);
        that.switch_unreferenced_nodes_connection();
        that.destroy_and_redraw();
        that.network_loading(false, "");
    }

    destroy_and_redraw(callback) {
        var that = eventGraph;
        that.network.destroy();
        that.network = null;
        var data = {nodes: that.nodes, edges: that.edges};
        that.network = new vis.Network(container, data, that.network_options);
        that.init_clusterize();
        that.bind_listener();
        if (callback !== undefined) {
            callback();
        }
    }

    toJSON() {
        var nodeData = [];
        var nodePositions = eventGraph.network.getPositions();
        eventGraph.nodes.get().forEach(function(nodeD) {
            var nodeP = nodePositions[nodeD.id];
            if (nodeP !== undefined && nodeD.group.slice(0, 12) != 'obj_relation') {
                var temp = {
                    id: nodeD.id,
                    x: nodeP.x,
                    y: nodeP.y,
                };
                if (nodeD.fixed !== undefined) {
                    temp.fixed = nodeD.fixed;
                }
                if (nodeD.expanded !== undefined) {
                    temp.expanded = nodeD.expanded;
                }
                nodeData.push(temp);
            }
        });
        var hiddenNodeData = [];
        eventGraph.hiddenNode.forEach(function(node) {
            hiddenNodeData.push(node.id);
        });

        var data = {
            eventId: scope_id,
            eventLastChange: event_last_change,
            nodes: nodeData,
            hiddenNodes: hiddenNodeData,
            scope: {
                scope: eventGraph.scope_name,
                keyType: eventGraph.scope_keyType
            },
            physics: {
                solver: eventGraph.solver,
                repulsion: parseInt($('#slider_physic_node_repulsion').val()),
                enabled: $('#checkbox_physics_enable').prop("checked")
            },
            display: {
                layout: eventGraph.layout,
                label: dataHandler.selected_type_to_display,
                charLength: parseInt($("#slider_display_max_char_num").val())
            }
        };
        var jsonData = JSON.stringify(data);
        return jsonData;
    }

}

// data class (handle data)
class DataHandler {
    constructor() {
        this.mapping_value_to_nodeID = new Map();
        this.mapping_obj_relation_value_to_nodeID = new Map();
        this.mapping_uuid_to_template = new Map();
        this.mapping_node_to_from_edges = {};
        this.mapping_node_to_to_edges = {};
        this.selected_type_to_display = "";
        this.extended_event = $('#eventgraph_network').data('extended') == 1 ? true : false;
        this.networkHistoryJsonData = new Map();
        this.scope_name;
    }

    get_scope_url() {
        switch(this.scope_name) {
            case "Reference":
            return "getEventGraphReferences";
            case "Tag":
            return "getEventGraphTags";
            case "Correlation":
            return "getEventGraphReferences";
            default:
            return "getEventGraphGeneric";
        }
    }

    generate_label(obj) {
        var label = obj.type;
        for (var attr of obj.Attribute) { // for each field
            if (attr.object_relation == this.selected_type_to_display) {
                label += ": " + attr.value;
                return label;
            }
        }
        if(this.selected_type_to_display !== "") { // User explicitly choose the type to display
            return label;
        }
        // no matching, taking the first requiredOff
        var template_uuid = obj.template_uuid;
        var template_req = this.mapping_uuid_to_template.get(template_uuid);
        if (template_req === undefined) { // template not known
            return label;
        }
        // search if this field exists in the object
        for (var attr of obj.Attribute) { // for each field
            var attr_rel = attr.object_relation;
            if (template_req.indexOf(attr_rel) != -1) {
                label += ": " + attr.value;
                return label;
            }
        }
        return label;
    }

    update_filtering_selectors(available_object_references, available_tags) {
        eventGraph.menu_display.add_options("select_display_object_field", available_object_references);
        eventGraph.menu_filter.items["table_attr_presence"].add_options("table_control_select_attr_presence", available_object_references);
        eventGraph.menu_filter.items["table_tag_presence"].add_options("table_control_select_tag_presence", available_tags);
        eventGraph.menu_filter.items["table_attr_value"].add_options("table_control_select_attr_value", available_object_references);
    }

    fetch_data_and_update(stabilize, updateOnly, callback) {
        eventGraph.network_loading(true, loadingText_fetching);
        $.when(this.fetch_objects_template()).done(function() {
            var filtering_rules = eventGraph.get_filtering_rules();
            var keyType = eventGraph.scope_keyType;
            var payload = {};
            payload.filtering = filtering_rules;
            payload.keyType = keyType;
            var extended_text = dataHandler.extended_event ? "extended:1" : "";
            eventGraph.canDrawHull = false;
            $.ajax({
                url: baseurl+"/events/"+dataHandler.get_scope_url()+"/"+scope_id+"/"+extended_text+"/event.json",
                dataType: 'json',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify( payload ),
                processData: false,
                success: function( data, textStatus, jQxhr ){
                    if (updateOnly === undefined || updateOnly === false) {
                        eventGraph.reset_graphs(true);
                    }
                    eventGraph.is_filtered = (filtering_rules.presence.length > 0 || filtering_rules.value.length > 0);
                    eventGraph.first_draw = true;
                    // update object state
                    var available_object_references = Object.keys(data.existing_object_relation);
                    var available_tags = Object.keys(data.existing_tags);
                    var available_tags = $.map(data.existing_tags, function(value, index) { // object to array
                        return [[index, value]];
                    });
                    dataHandler.update_filtering_selectors(available_object_references, available_tags);
                    dataHandler.available_pivot_key = data.available_pivot_key;
                    eventGraph.menu_scope.add_options("input_graph_scope_jsonkey", dataHandler.available_pivot_key);
                    if (data.items.length < nodes_ask_threshold) {
                        eventGraph.update_graph(data);
                    } else if (data.items.length > nodes_ask_threshold && confirm("The network contains a lot of nodes, displaying it may slow down your browser. Continue?")) {
                        eventGraph.update_graph(data);
                    } else {
                        eventGraph.network_loading(false, "");
                        $("#eventgraph_toggle").click();
                    }

                    if ( stabilize === undefined || stabilize) {
                        eventGraph.reset_view_on_stabilized();
                    }
                    if (callback !== undefined) {
                        callback();
                    }
                },
                error: function( jqXhr, textStatus, errorThrown ){
                    console.log( errorThrown );
                }
            });
        });
    }

    fetch_reference_data(rel_uuid, callback) {
        $.getJSON(baseurl + "/events/getReferenceData/"+rel_uuid+"/reference.json", function( data ) {
            callback(data);
        });
    }

    fetch_objects_template() {
        return $.getJSON(baseurl + "/events/getObjectTemplate/templates.json", function( data ) {
            for (var i in data) {
                var template = data[i].ObjectTemplate;
                var requiredFields;
                // add both requiredOneOf and required field
                if (template.requirements.requiredOneOf !== undefined) {
                    requiredFields = template.requirements.requiredOneOf;
                } else {
                    requiredFields = [];
                }
                if (template.requirements.required !== undefined) {
                    requiredFields = requiredFields.concat(template.requirements.required);
                }
                dataHandler.mapping_uuid_to_template.set(template.uuid, requiredFields);
            }
        });
    }

    // same event, same timestamp
    validateImportedFile(data) {
        if (scope_id != data.eventId) {
            showMessage('fail', '<b>Failed</b> to import file: Event '+data.eventId+' not compatible with event '+scope_id);
            return false;
        }
        if (parseInt(event_last_change) < parseInt(data.eventLastChange)) {
            showMessage('fail', '<b>Fail</b>: Imported graph is newer than current event');
            return false;
        }
        if (parseInt(event_last_change) > parseInt(data.eventLastChange)) {
            showMessage('success', '<b>Warning</b>: Imported graph is not the latest version');
        }
        return true;
    }

    fetch_graph_history(callback) {
        $.getJSON(baseurl + "/eventGraph/view/"+scope_id, function( history ) {
            var history_formatted = [];
            var network_previews = [];
            history.forEach(function(item) {
                history_formatted.push([
                    item['EventGraph']['id'],
                    item['EventGraph']['network_name'],
                    item['User']['email'],
                    new Date(parseInt(item['EventGraph']['timestamp'])*1000).toLocaleString()
                ]);
                dataHandler.networkHistoryJsonData.set(item['EventGraph']['id'], item['EventGraph']['network_json']);
                network_previews.push(item['EventGraph']['preview_img']);
            });
            callback(history_formatted, network_previews);
        });
    }

    fetch_and_import_graph(network_id) {
        var data = dataHandler.networkHistoryJsonData.get(network_id);
        var json = JSON.parse(data);
        import_graph_from_json(json);
    }

    get_typeaheadData_search() {
        var to_ret = []
        for( var entry of this.mapping_value_to_nodeID) {
            var value = entry[0];
            to_ret.push(value);
        }
        // object relation
        for( var entry of this.mapping_obj_relation_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;
        // Dirty way to know what modif was successful as the callback gives no information
        // May be changed in the futur
        this.callback_to_be_called = null;
    }

    register_callback(callback) {
        this.callback_to_be_called = callback;
    }

    apply_callback() {
        var that = mispInteraction;
        if (that.callback_to_be_called !== null) {
            that.callback_to_be_called(that.callback_data);
        }
        that.callback_to_be_called = null;
        that.callback_data = null;
    }

    remove_reference(edgeData, callback) {
        var that = mispInteraction;
        var edge_id = edgeData.edges[0];
        var relation_id = edge_id;
        deleteObject('object_references', 'delete', relation_id, scope_id);
        if (callback !== undefined) {
            callback();
        }
    }

    add_reference(edgeData, callback) {
        var that = mispInteraction;
        var uuid = that.nodes.get(edgeData.to).uuid;
        if (!that.can_create_reference(edgeData.from) || !that.can_be_referenced(edgeData.to)) {
            return;
        }
        var edgeFromId = edgeData.from.startsWith('o-') ? edgeData.from.substr(2) : edgeData.from;
        genericPopup(baseurl+'/objectReferences/add/'+edgeFromId, '#popover_form', function() {
            $('#ObjectReferenceReferencedUuid').val(uuid);
            objectReferenceInput();
        });
    }

    edit_reference(edgeData, callback) {
        if (callback !== undefined) {
            callback();
        }
        var that = mispInteraction;
        var rel_id = edgeData.id;
        var rel_uuid = edgeData.uuid;

        that.register_callback(function() {
            var relation_id = edgeData.id;
            submitDeletion(scope_id, 'delete', 'object_references', relation_id);
        });

        dataHandler.fetch_reference_data(rel_uuid, function(data) {
            data = data[0].ObjectReference;
            var uuid = data.referenced_uuid;
            genericPopup(baseurl + '/objectReferences/add/'+data.object_id, '#popover_form', function() {
                $('#targetSelect').val(uuid);
                $('#ObjectReferenceComment').val(data.comment);
                $('#ObjectReferenceRelationshipTypeSelect').val(data.relationship_type);
                $('option[value='+uuid+']').click();
            });
        });
    }

    can_create_reference(id) {
        var node = this.nodes.get(id)
        return node.group == "object";
    }

    can_be_referenced(id) {
        var res;
        var node = this.nodes.get(id)
        if (node.event_id != scope_id) {
            showMessage('fail', 'Cannot reference a node not belonging in this event')
            return false;
        }
        if (node.group == "object") {
            res = true;
        } else if (node.group.slice(0, 9) == "attribute") {
            res = true;
        } else {
            showMessage('fail', 'This node cannot be referenced')
            res = false;
        }
        return res;
    }

    add_item(nodeData, callback) {
        var that = mispInteraction;
        choicePopup("Add an element", [
            {
                text: "Add an Object",
                onclick: "getPopup('"+scope_id+"', 'objectTemplates', 'objectChoice');"
            },
            {
                text: "Add an Attribute",
                onclick: "openGenericModal('"+baseurl+"/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)
            nodeID = nodeID.startsWith('o-') ? nodeID.substr(2) : nodeID;
            if (node.group.slice(0, 9) == "attribute") {
                deleteObject('attributes', 'delete', nodeID, scope_id);
            } else if (node.group == "object") {
                deleteObject('objects', 'delete', nodeID, scope_id);
            }
        }
    }

    edit_item(nodeData, callback) {
        var that = mispInteraction;
        var id = nodeData.id
        var group = nodes.get(id).group;
        id = id.startsWith('o-') ? id.substr(2) : id;
        if (group.slice(0, 9) == 'attribute') {
            openGenericModal(baseurl + '/attributes/edit/' + id);
        } else if (group == 'object') {
            window.location = baseurl + '/objects/edit/' + id;
        }
    }

    save_network(network_json, network_name, network_preview) {
        var network_json = eventGraph.toJSON();
        this.quickSaveNetworkHistory(scope_id, network_json, network_name, network_preview, reset_graph_history);
    }

    delete_saved_network(data) {
        var network_id = data[0];
        var url = baseurl + "/" + "eventGraph" + "/" + "delete" + "/" + network_id;
        $.get(url, function(data) {
            openPopup("#confirmation_box");
            $("#confirmation_box").html(data);
        });
    }

    quickSaveNetworkHistory(event_id, network_json, network_name, network_preview, callback) {
        this.networkFetchForm('add', event_id, undefined, function(form) {
            var container = $('#eventgraph_network');
            // append the form somewhere
            container.append(form);

            var url = form.attr('action');

            // locate wanted field and set the value
            var field_network_json = form.find('#' + 'EventGraph' + 'NetworkJson');
            field_network_json.val(network_json);
            var field_network_name = form.find('#' + 'EventGraph' + 'NetworkName');
            field_network_name.val(network_name);
            var field_network_preview = form.find('#' + 'EventGraph' + 'PreviewImg');
            field_network_preview.val(network_preview);


            // submit the form
            $.ajax({
                data: form.serialize(),
                cache: false,
                beforeSend: function(XMLHttpRequest) {
                    $('.loading').show();
                },
                success: function(data, textStatus) {
                    showMessage('success', 'Network has been saved');
                    if (callback !== undefined) {
                        callback();
                    }
                },
                error: function( jqXhr, textStatus, errorThrown ){
                    showMessage('fail', 'Could not save network');
                    console.log( errorThrown );
                },
                complete: function() {
                    $(".loading").hide();
                    form.remove();
                },
                type: 'post',
                url: url
            });
        });
    }

    networkFetchForm(type, event_id, network_id, callback) {
        var url = baseurl + '/' + 'EventGraph' + '/' + 'add' + '/' + event_id;
        $.ajax({
            beforeSend: function(XMLHttpRequest) {
                $('.loading').show();
            },
            dataType: 'html',
            cache: false,
            success: function(data, textStatus) {
                var form = $(data);
                form.css('display', 'none');
                if (callback !== undefined) {
                    callback(form);
                } else {
                    return form;
                }
            },
            error: function( jqXhr, textStatus, errorThrown ){
                console.log( errorThrown );
            },
            complete: function() {
                $(".loading").hide();
            },
            type: 'get',
            url: url
        });
    }
}


/*=========
* UTILS
* ========*/
function drawExtendedEventHull(ctx, nodes, color, text) {
    ctx.fillStyle = color+'55';
    ctx.strokeStyle = color+'aa';
    var centroid = getCentroid(nodes);
    var hull = getHullFromPoints(nodes, centroid);
    var hullExtraPoints = []
    hull.forEach(p => {
        hullExtraPoints.push(applyAngularOffsetForCentroid(p, centroid, false))
        hullExtraPoints.push(p)
        hullExtraPoints.push(applyAngularOffsetForCentroid(p, centroid, true))
    })
    centroid = getCentroid(hullExtraPoints);
    var hullFinal = getHullFromPoints(hullExtraPoints, centroid);
    hullFinal.push(hullFinal[0])

    ctx.beginPath();
    ctx.moveTo(hullFinal[0].x, hullFinal[0].y);
    for(var i=1; i<hullFinal.length; i++) {
        var cp_x_mid = (hullFinal[i-1].x + hullFinal[i].x) / 2;
        var cp_y_mid = (hullFinal[i-1].y + hullFinal[i].y) / 2;
        var cp = applyOffsetForCentroid({x: cp_x_mid, y: cp_y_mid}, centroid, 0.2)
        ctx.quadraticCurveTo(cp.x, cp.y, hullFinal[i].x, hullFinal[i].y);
        ctx.stroke();
    }
    ctx.stroke();
    ctx.fill();

    ctx.beginPath();
    ctx.font="30px Verdana";
    ctx.fillStyle = getTextColour(color);
    ctx.fillText(text, centroid.x, centroid.y);
}
function orientation(p, q, r) {
    var val = (q.y - p.y) * (r.x - q.x) -
    (q.x - p.x) * (r.y - q.y);
    if (val == 0) {
        return 0;  // collinear
    }
    return val > 0 ? 1 : 2; // clock or counterclock wise
}
// Implementation of Gift wrapping algorithm (jarvis march in 2D)
// Inspired from https://www.geeksforgeeks.org/convex-hull-set-1-jarviss-algorithm-or-wrapping/
function getHullFromPoints(points, centroid) {
    var n = points.length;
    var l = 0;
    var hull = [];
    var cur_point;
    // get leftmost point
    for (var i=0; i<n; i++) {
        l = points[l].x > points[i].x ? l : i;
    }

    var p = l;
    var q;
    do {
        cur_point = points[p]
        cur_point = applyOffsetForCentroid(cur_point, centroid)
        hull.push(cur_point);

        q = (p+1) % n;
        for (var i=0; i<n; i++) {
            if (orientation(points[p], points[i], points[q]) == 2) {
                q = i;
            }
        }
        p = q;
    } while (p != l);
    return hull;
}
function getCentroid(coordList) {
    var centroid = {x: 0, y: 0};
    coordList.forEach(function(point) {
        centroid.x += point.x;
        centroid.y += point.y;
    })
    centroid.x = centroid.x / coordList.length;
    centroid.y = centroid.y / coordList.length;
    return centroid;
}
function applyOffsetForCentroid(point, centroid, ratio) {
    ratio = ratio === undefined ? 1.0 : ratio;
    var DEFAULT_OFFSET_X = 45 * ratio;
    var DEFAULT_OFFSET_Y = 22 * ratio;
    var slope = (point.y - centroid.y) / (point.x - centroid.x);
    var angle = Math.atan(slope);
    var sign = point.x > centroid.x ? 1 : -1;
    var newPoint = {
        x: point.x + Math.cos(angle) * DEFAULT_OFFSET_X * sign,
        y: point.y + Math.sin(angle) * DEFAULT_OFFSET_Y * sign,
    }
    return newPoint;
}
function applyAngularOffsetForCentroid(point, centroid, left) {
    var DEFAULT_ANGULAR_OFFSET = 2;
    var DEFAULT_OFFSET = 40;
    var slope = (point.y - centroid.y) / (point.x - centroid.x);
    var angle = Math.atan(slope);
    angle = angle + ((left ? 1 : -1) * DEFAULT_ANGULAR_OFFSET);
    var sign = point.x > centroid.x ? 1 : -1
    var newPoint = {
        x: point.x + Math.cos(angle) * DEFAULT_OFFSET * sign,
        y: point.y + Math.sin(angle) * DEFAULT_OFFSET * sign,
    }
    return newPoint;
}

function generate_background_shortcuts(shortcut_text) {
    var table = document.createElement('table');
    for (var shortcut of shortcut_text.split("\n")) {
        var index = shortcut.indexOf(" ");
        var text1 = shortcut.substring(0, index);
        var text2 = shortcut.substring(index, shortcut.length);
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        td.innerHTML = text1;
        tr.appendChild(td);
        var td = document.createElement('td');
        td.innerHTML = text2;
        tr.appendChild(td);
        table.appendChild(tr);
    }
    document.getElementById("eventgraph_shortcuts_background").appendChild(table);
}

function getTextColour(hex) {
    hex = hex.slice(1);
    var r = parseInt(hex.substring(0,2), 16);
    var g = parseInt(hex.substring(2,4), 16);
    var b = parseInt(hex.substring(4,6), 16);
    var avg = ((2 * r) + b + (3 * g))/6;
    if (avg < 128) {
        return 'white';
    } else {
        return 'black';
    }
}


function genericPopupCallback(result) {
    // sucess and eventgraph is enabled
    if (result == "success" && dataHandler !== undefined) {
        mispInteraction.apply_callback();
        dataHandler.fetch_data_and_update(false, true);
    }
}


function download_file(data, type) {
    var dataUri;
    var filename = 'graphExport_'+ parseInt(new Date().getTime()/1000);
    if (type == 'json') {
        dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(data);
        filename +=  '.json';

    } else if (type == 'png' || type == 'jpeg') {
        dataUri = data;
        filename +=  type;
    } else if (type == 'dot') {
        dataUri = 'data:text/x-graphviz;charset=utf-8,' + encodeURIComponent(data);
        filename +=  '.dot';
    }
    var a = document.createElement('a');
    a.setAttribute('href', dataUri);
    a.setAttribute('download', filename);
    var aj = $(a);
    aj.appendTo('body');
    aj[0].click();
    aj.remove();
}

function reset_graph_history() {
    var table = eventGraph.menu_history.items["table_graph_history_actiontable"];
    dataHandler.fetch_graph_history(function(history_formatted, network_previews) {
        table.set_table_data(history_formatted);
        for(var i=0; i<history_formatted.length; i++) {
            var history = history_formatted[i];
            var cur_email = history[2];
            var tr = eventGraph.menu_history.items.table_graph_history_actiontable.get_DOM_row(i);
            if (!(cur_email == user_email || is_siteadmin)) {
                // disable delete button
                var btn_del = $(tr).find('.btn-danger');
                btn_del.prop('disabled', true);
            }
            // set tooltip preview
            var preview = network_previews[i];
            if (typeof preview == 'string') {
                var btn_plot = $(tr).find('.btn-success');
                btn_plot.data('network-preview', preview);
                btn_plot.popover({
                    container: 'body',
                    content: function() { return '<img style="width: 500px; height: 150px;" src="' + $('<div>').text($(this).data('network-preview')).html() + '" />'; },
                    placement: 'right',
                    trigger: 'hover',
                    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content" style="width: 500px; height: 150px;"></div></div>',
                    html: true,
                });
            }
        }
    });
}

function import_graph_from_json(data) {
    if (dataHandler.validateImportedFile(data)) {
        // set options
        eventGraph.scope_name = data.scope;
        eventGraph.scope_keyType = data.scope.keyType;
        eventGraph.update_scope(data.scope.scope)

        var layoutVal;
        switch(data.display.layout) {
            case "default":
            layoutVal = 'default';
            break;
            case "directed":
            layoutVal = 'hierarchical.directed';
            break;
            case "hubsize":
            layoutVal = 'hierarchical.hubsize';
            break;
            default:
            layoutVal = 'default';
        }
        $('#select_display_layout').val(layoutVal);
        eventGraph.change_layout_type(data.display.layout);
        dataHandler.selected_type_to_display = data.display.label;
        $('#select_display_object_field').val(data.display.label);
        $("#slider_display_max_char_num").val(data.display.charLength);
        $('#slider_display_max_char_num').trigger('reflectOnSpan');

        eventGraph.solver = data.physics.solver;
        eventGraph.physics_change_solver(data.physics.solver)
        $('#select_physic_solver').val(data.physics.solver);
        $('#slider_physic_node_repulsion').val(data.physics.repulsion);
        $('#slider_physic_node_repulsion').trigger('reflectOnSpan');
        eventGraph.physics_change_repulsion(data.physics.repulsion)
        eventGraph.physics_state(data.physics.enabled)
        $('#checkbox_physics_enable').prop('checked', data.physics.enabled);

        // update data
        dataHandler.fetch_data_and_update(false, false, function() {
            eventGraph.nodes.update(data.nodes);
            eventGraph.expand_previous_expansion(data.nodes);
            eventGraph.hiddenNode.clear();
            eventGraph.hideNode(data.hiddenNodes);
        });
    }
}

function escapeQuote(str) {
    return str.replace(/"/g, '\\\"');
}

function convert_to_dot_lang(nodes, edges, hiddenNodeIds) {
    var mappingStringDic = new Map(); // in case the id is not an int, map it to a letter

    var dotNodes = [];
    var validNodeId = {};
    nodes.forEach(function(node) {
        if (hiddenNodeIds.indexOf(node.id) != -1) return;
        var nodeId = node.id;
        if (node.id != parseInt(node.id, 10)) {
            nodeId = 'autgenerated_id_'+mappingStringDic.size;
            mappingStringDic.set(node.id, nodeId);
        }
        var dnode = {
            id: nodeId,
            shape: node.group == 'object' ? 'box' : 'ellipse',
            label: escapeQuote(node.label),
            style: 'filled',
        };
        switch(node.group) {
            case 'object':
            dnode.fillcolor = node.icon.color;
            break;
            case 'tag':
            dnode.fillcolor = node.color.background;
            break;
            case 'keyType':
            dnode.fillcolor = node.color.background;
            break;
            default:
            dnode.fillcolor = '#f3a500';
            break;
        }
        validNodeId[nodeId] = true;
        dotNodes.push(dnode);
    });
    var dotNodesStr = "";
    dotNodes.forEach(function(node) {
        var nodeAttr = "";
        for (var attr in node) {
            if (!node.hasOwnProperty(attr)) continue;
            if (attr=='id') continue;
            nodeAttr += attr + "=\"" + node[attr] + "\" ";
        }
        dotNodesStr += node.id + " ["+nodeAttr+"];\n";
    });

    var dotEdges = [];
    edges.forEach(function(edge) {
        if (edge.to.includes("rootNode:")) return; // drop root nodes
        if (edge.from.includes("rootNode:")) return; // drop root nodes
        var from = edge.from;
        if (edge.from != parseInt(edge.from, 10)) {
            from = mappingStringDic.get(edge.from);
        }
        var to = edge.to;
        if (edge.to != parseInt(edge.to, 10)) {
            to = mappingStringDic.get(edge.to);
        }
        var dedge = {
            from: from,
            to: to,
            label: edge.label !== undefined ? escapeQuote(edge.label) : "",
            color: edge.color.color !== undefined ? edge.color.color : "#597ce9",
            dirType: edge.label !== undefined ? "forward" : "none",
        };
        dotEdges.push(dedge);
    });
    var dotEdgesStr = "";
    dotEdges.forEach(function(edge) {
        if (hiddenNodeIds.indexOf(edge.from) != -1 || hiddenNodeIds.indexOf(edge.to) != -1) return;
        var edgeAttr = "";
        for (var attr in edge) {
            if (!edge.hasOwnProperty(attr)) continue;
            if (attr=='id' || attr=='from' || attr=='to') continue;
            edgeAttr += attr + "=\"" + edge[attr] + "\" ";
        }
        dotEdgesStr += edge.from + " -> " + edge.to + " ["+edgeAttr+"];\n";
    });

    var dotLang = "digraph network_event_"+scope_id+" {\n";
    dotLang += dotNodesStr;
    dotLang += "\n";
    dotLang += dotEdgesStr;
    dotLang += "}";
    return dotLang;
}

// 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',
            template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content preWarp"></div></div>',
            html: true,
        });
        generate_background_shortcuts(shortcut_text);
        $('#fullscreen-btn-eventgraph').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",

            });
        });


        dataHandler = new DataHandler();
        eventGraph = new EventGraph(network_options, nodes, edges);

        $(document).on("keydown", function(evt) {
            if (evt.target !== undefined && ($(evt.target).is('input') || $(evt.target).is('textarea'))) {
                return;
            }
            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];
                    if (selected_id !== undefined) { // A node is selected
                        var data = { id: selected_id };
                        mispInteraction.edit_item(data);
                        break;
                    }
                    selected_id = eventGraph.network.getSelectedEdges()[0];
                    if (selected_id !== undefined) { // A edge is selected
                        var data = { id: selected_id };
                        mispInteraction.edit_reference(data);
                        break;
                    }
                }
                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;
}
});

eventGraph.update_scope();
dataHandler.fetch_data_and_update(true, false, function() {
    var $select = $('#network-typeahead');
    dataHandler.get_typeaheadData_search().forEach(function(element) {
        var $option = $('<option></option>');
        $option.text(element);
        $option.attr('value', $option.text());
        $select.append($option);
    });
    $('#network-typeahead').chosen(chosen_options).on('change', function(evt, params) {
        var value = params.selected;
        var nodeID = dataHandler.mapping_value_to_nodeID.get(value);
        // in case we searched for an object relation
        nodeID = nodeID === undefined ? dataHandler.mapping_obj_relation_value_to_nodeID.get(value) : nodeID;
        // check if node in cluster
        nested_length = eventGraph.network.findNode(nodeID).length;
        if (nested_length > 1) { // Node is in cluster
            // As vis.js cannot supply a way to uncluster a single node, we remove it and add it again
            searched_node = eventGraph.nodes.get(nodeID);
            // Remove old node and edges
            eventGraph.nodes.remove(nodeID);
            eventGraph.nodes.add(searched_node);
            /* don't need to re-add the edge as it is the same */
            eventGraph.focus_on_stabilized(nodeID);
        } else {
            // set focus to the network
            eventGraph.network.focus(nodeID, {animation: true, scale: 1});
        }
        // select node and focus on it
        eventGraph.network.selectNodes([nodeID]);
        $("#network-typeahead").blur();
    });
});
}, 1);
}

/*=========
* OPTIONS
* ========*/
mispInteraction = new MispInteraction(nodes, edges);

var network_options = {
    interaction: {
        hover: true
    },
    layout: {
        improvedLayout: false,
        hierarchical: {
            enabled: false,
            levelSeparation: 150,
            nodeSpacing: 5,
            treeSpacing: 200,
            blockShifting: true,
            edgeMinimization: true,
            parentCentralization: true,
            direction: 'UD',        // UD, DU, LR, RL
            sortMethod: 'directed'   // hubsize, directed
        }

    },
    manipulation: {
        enabled: user_manipulation,
        initiallyActive: false,
        addEdge: mispInteraction.add_reference,
        editEdge: { editWithoutDrag: mispInteraction.edit_reference },
        addNode: mispInteraction.add_item,
        editNode: mispInteraction.edit_item,
        deleteNode: mispInteraction.delete_item,
        deleteEdge: mispInteraction.remove_reference,
    },
    physics: {
        enabled: true,
        barnesHut: {
            gravitationalConstant: -10000,
            centralGravity: 5,
            springLength: 150,
            springConstant: 0.24,
            damping: 1.0,

        },
        repulsion: {
            centralGravity: 5,
            springLength: 150,
            springConstant: 0.04,
            nodeDistance: 240,
            damping: 0.3
        },
        hierarchicalRepulsion: {
            centralGravity: 0,
            springLength: 150,
            springConstant: 0.24,
            nodeDistance: 120,
            damping: 1
        },
        minVelocity: 3.0,
    },
    edges: {
        width: 3,
        arrows: 'to'
    },
    nodes: {
        chosen: {
            node: function(values, id, selected, hovering) {
                values.shadow = true;
                values.shadowSize = 5;
                values.shadowX = 2;
                values.shadowY = 2;
                values.shadowColor = "rgba(0,0,0,0.1)";
            }
        }
    },
    groups: {
        object: {
            shape: 'icon',
            icon: {
                face: '"Font Awesome 5 Free"',
                size: 50
            },
            font: {
                size: 18, // px
                background: 'rgba(255, 255, 255, 0.7)'
            },
        },
        obj_relation: {
            mass: 3,
            size: 10,
            color: {
                border:'black'
            }
        },
        attribute: {
            shape: 'box',
            color: {
                background:'orange',
                border:'black'
            },
            size: 15
        },
        attribute_image: {
            shape: 'image',
            borderWidth: 4,
            mass: 15
        },
        obj_relation_image: {
            shape: 'image',
            borderWidth: 4,
            mass: 15
        },
        tag: {
            shape: 'box',
            size: 15,
            shadow: {
                enabled: true,
                size: 3,
                x: 3, y: 3
            },
            mass: 20
        },
        keyType: {
            shape: 'box',
            color: {
                border: '#303030',
                background: '#808080',
            },
            font: {
                size: 18, //px
                color: 'white'
            },
            mass: 25
        },
        rootNodeObject: {
            shape: 'icon',
            icon: {
                face: '"Font Awesome 5 Free"',
                code: '\uf00a',
            },
            font: {
                size: 18, // px
                background: 'rgba(255, 255, 255, 0.7)'
            },
            mass: 5,
            physics: false
        },
        rootNodeAttribute: {
            shape: 'icon',
            icon: {
                face: '"Font Awesome 5 Free"',
                code: '\uf1c0',
            },
            font: {
                size: 18, // px
                background: 'rgba(255, 255, 255, 0.7)'
            },
            mass: 5,
            physics: false
        },
        rootNodeKeyType: {
            shape: 'icon',
            icon: {
                face: '"Font Awesome 5 Free"',
                code: '\uf111',
            },
            font: {
                size: 22, // px
                background: 'rgba(255, 255, 255, 0.7)'
            },
            mass: 5,
            physics: false
        },
        rootNodeTag: {
            shape: 'icon',
            icon: {
                face: '"Font Awesome 5 Free"',
                code: '\uf02b',
            },
            font: {
                size: 22, // px
                background: 'rgba(255, 255, 255, 0.7)'
            },
            mass: 5,
            physics: false
        },
        clustered_object: {
            shape: 'icon',
            icon: {
                face: '"Font Awesome 5 Free"',
                code: '\uf009',
            },
            font: {
                size: 18, // px
                background: 'rgba(255, 255, 255, 0.7)'
            },
            mass: 5,
            physics: false
        }
    },
    locales: {
        en: {
            edit: 'Edit',
            del: 'Delete selected',
            back: 'Back',
            addNode: 'Add Object or Attribute',
            editNode: 'Edit selected item',
            addDescription: 'Click in an empty space to place a new node.',
            addEdge: 'Add Reference',
            editEdge: 'Edit Reference',
            edgeDescription: 'Click on an Object and drag the edge to another Object (or Attribute) to connect them.'
        }
    }
};
var default_layout_option = $.extend(true, {}, network_options);
var chosen_options = {
    max_shown_results: 20,
    inherit_select_classes: true
}
var max_displayed_char = 32;
var progressbar_length = 3; // divided by 100
var loadingText_fetching = 'Fetching data';
var loadingText_creating = 'Constructing network';
var loadingText_redrawing = 'Redrawing network';

var shortcut_text = "<b>V</b> Center camera"
+ "\n<b>X</b> Expand 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"
+ "\n<b>RIGHT-CLICK</b> Open contextual menu";

function global_processProperties(clusterOptions, childNodes) {
    var concerned_root_node;
    var that = eventGraph;
    that.cluster_index = that.cluster_index + 1;
    var childrenCount = 0;
    for (var i = 0; i < childNodes.length; i++) {
        var childNodeID = childNodes[i].id
        if ( childNodeID.includes("rootNode:")) {
            concerned_root_node = childNodeID;
        }
        childrenCount += childNodes[i].childrenCount || 1;
    }
    childrenCount--; // -1 because 2 nodes merged into 1
    clusterOptions.childrenCount = childrenCount;
    clusterOptions.font = {size: Math.sqrt(childrenCount)*0.5+30}
    clusterOptions.id = 'cluster:' + that.cluster_index;
    if (concerned_root_node !== undefined) {
        clusterOptions.icon = { size: Math.sqrt(childrenCount)*5+100 };
        if (concerned_root_node == "rootNode:object") {
            clusterOptions.label = "Unreferenced Objects (" + childrenCount + ")";
            clusterOptions.x =  root_node_x_pos;
            clusterOptions.group = 'rootNodeObject';
        } else if (concerned_root_node == "rootNode:attribute") {
            clusterOptions.label = "Unreferenced Attributes (" + childrenCount + ")";
            clusterOptions.x =  -root_node_x_pos;
            clusterOptions.group = 'rootNodeAttribute';
        } else if (concerned_root_node == "rootNode:tag") {
            clusterOptions.label = "Untagged elements (" + childrenCount + ")";
            clusterOptions.x =  -root_node_x_pos;
            clusterOptions.group = 'rootNodeTag';
        } else if (concerned_root_node == "rootNode:keyType") {
            clusterOptions.label = "Empty value elements (" + childrenCount + ")";
            clusterOptions.x =  -root_node_x_pos;
            clusterOptions.group = 'rootNodeKeyType';
        }
    }
    clusterOptions.y = 0
    that.clusters.push({id:'cluster:' + that.cluster_index, scale: that.cur_scale, group: clusterOptions.group});
    return clusterOptions;
}

function isPicture(filename) {
    var extension = filename.split('.').pop()
    var validExtensions = ['jpg', 'jpeg', 'png', 'gif']
    return validExtensions.includes(extension)
}