<html lang="en">
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" href="#"/>
</head>
<body>
<script type="text/javascript">
    function showhideclass(id) {
        var elements = document.getElementsByClassName(id)
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = (elements[i].style.display != 'none') ? 'none' : 'block';
        }
    }
</script>
<style>
    @media print { .noPrint { display: none; } }
    .button {
        background-color: #5555cc;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 18px;
    }
</style>

<div style="width: 100%;">
    <div id="mynetwork" style="float:left; width: 70%;"></div>
    <div style="float:right;width:30%;">
        <div id="details" style="padding:10;" class="noPrint">Pipeline: {{PIPELINE_NAME}}</div>
        <button onclick="javascript:showhideclass('controls')" class="button noPrint">
            Show / hide graph controls
        </button>
        <div id="controls" class="controls" style="padding:5; display:none"></div>
    </div>
</div>
<div style="clear:both"></div>

<script type="text/javascript">
    var nodes = new vis.DataSet({{NODES_JSON}});
    var edges = new vis.DataSet({{EDGES_JSON}});

    let container = document.getElementById('mynetwork');
    var controls = document.getElementById('controls');
    var options = {
        autoResize: true,
        locale: 'en',
        edges: { arrows: { to: { enabled: true } }, smooth: { enabled: false } },
        nodes: { font: { 'face': 'monospace', 'align': 'left' } },
        layout: {
            "hierarchical": {
                "enabled": true,
                "sortMethod": "directed",
                "direction": "LR",
                levelSeparation: 275,
                nodeSpacing: 70,
                treeSpacing: 15
            }
        },
        physics: { enabled: false },
        configure: { enabled: true, filter: 'layout physics', showButton: false, container: controls }
    };

    let network = new vis.Network(container, {nodes, edges}, options);
    network.setSize('1000px', '70%');
    network.redraw();
    network.on('click', function (properties) {
        var ids = properties.nodes;
        var clickedNodes = nodes.get(ids);
        var control = document.getElementById("details");
        if (clickedNodes[0]) {
            control.innerHTML = clickedNodes[0].fulllabel || clickedNodes[0].label;
        } else {
            control.innerHTML = "<b>Pipeline</b>: {{PIPELINE_NAME}}";
        }
    });
</script>
</body>
<footer>
    <div class="container-fluid">
        <div class="info">
            <p>Pipeline dependencies graph</p>
        </div>
    </div>
</footer>
</html>
