/* JavaScript file for showing the graph in the "explore" page.
 */

var nodes = null;
var edges = null;
var network = null;

// Draw the graph nodes.
// https://visjs.github.io/vis-network/docs/network/
function draw(graph)
{
    // used to check IDs already used
    id_list = []
    
    nodes = []
    edges = []
    
    // Create array of nodes and edges
    for (let relation of graph)
    {
        if (id_list.indexOf(relation.node1.value) === -1)
            if ("image" in relation)
                nodes.push({
                    id:    relation.node1.value,
                    shape: "circularImage",
                    image: "/dokk/instance/blob/" + relation.image.value,
                    label: relation.node1.value.slice(0, 12) + (relation.node1.value.length > 12 ? "..." : "")
                });
            else
                nodes.push({
                    id:    relation.node1.value,
                    shape: "dot",
                    label: relation.node1.value.slice(0, 12) + (relation.node1.value.length > 12 ? "..." : "")
                });
        
        id_list.push(relation.node1.value);
        
        if (edges.indexOf(relation.node1.value) === -1)
            if ("link" in relation)
                edges.push({
                    from:  relation.node1.value,
                    to:    relation.node2.value,
                    title: relation.link.value,
                    font:  { align: "bottom" }
                });
    }
    
    // Display options
    var options = {
        configure: {
            enabled: false,
            filter: 'physics, layout',
            showButton: true
        },
        
        interaction: {
            hover: true
        },
        
        nodes: {
            borderWidth: 1,
            borderWidthSelected: 3,
            brokenImage: undefined,
            color: {
                border: '#aaa',
                background: '#333',
                highlight: {
                    border: '#ff0',
                    background: '#ff0'
                },
                hover: {
                    border: '#ff0',
                    background: '#333'
                }
            },
            font: {
                color:'#fff',
                face: 'sans-serif',
                size: 24
            },
            labelHighlightBold: false,
            shadow: {
                enabled: true,
                color: 'rgba(255,255,255,1)',
                size: 5,
                x: 0,
                y: 0
            },
            size: 32
        },
        
        edges: {
            arrows: {
                to:     {enabled: true,  scaleFactor:1, type: 'arrow'},
                middle: {enabled: false, scaleFactor:1, type: 'arrow'},
                from:   {enabled: false, scaleFactor:1, type: 'arrow'}
            },
            color: {
                color:     '#fff',
                highlight: '#ff0',
                hover:     '#fff',
                inherit:   'from',
                opacity:   1.0
            },
            dashes: false,
            width: 3,
            hoverWidth: 1,
            selectionWidth: 3
        },
        
        physics: {
            enabled: true,
            barnesHut: {
                gravitationalConstant: -10000,
                centralGravity: 0,
                springLength:   200,
                springConstant: .5,
                damping:        1,
                avoidOverlap:   0,
                //timestep:       1
            },
        }
    };
    
    // Create network graph
    network = new vis.Network(
        document.getElementById('dokk-graph'),
        { nodes: nodes, edges: edges },
        options);
    
    // Change pointer on mouse hover
    network.on("hoverNode", function(event) {
        network.canvas.body.container.style.cursor = 'pointer';
    });
    
    network.on("blurNode", function(event) {
        network.canvas.body.container.style.cursor = 'default';
    });
    
    // Click even for nodes
    network.on("click", function(event) {
        // Open a new page
        iri = event.nodes[0];
        
        if (iri.startsWith("dokk/file/"))
            window.open("/dokk/instance/blob/" + iri.slice(10))
        else
            window.open("/" + iri);
    });
}



// Send XMLHttpRequest request
var xhr = new XMLHttpRequest();

// xhr.addEventListener("loadstart", ...);
// xhr.addEventListener("loadend", ...);
// xhr.addEventListener("progress", ...);
// xhr.addEventListener("error", ...);
// xhr.addEventListener("abort", ...);

// Load graph nodes
xhr.addEventListener("load", function(event) {
    
    switch (xhr.status)
    {
        case 200: // OK
            
            // Draw graph
            draw(JSON.parse(xhr.response).results.bindings);
            
            // Remove "Loading..." message
            document.getElementById("loading").remove();
            
            break;
        
        default:
            break;
    }
});

// XMLHttpRequest.open(method, url, async)
xhr.open("GET", "/dokk/instance/explorenodes", true);
xhr.send();
