<div id="widgetvisualization-{{ widget.pk }}" width="900" height="700" rel="{{ widget.pk }}"
     class="widgetvisualizationdialog" title="{{ widget.name }} results">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/>
    {% comment %}<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.15/datatables.min.css"/>
{% endcomment %}
    {% comment %}<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.15/datatables.min.js"></script>{% endcomment %}
    <div id="mynetwork{{ widget.pk }}"
         style="border:1px solid black; background:white; width:100%; height:60%; margin:auto;"></div>


    <center>
        <br>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="datasetTable{{ widget.pk }}{{ random }}">
            <!-- header -->
            <thead>
            <tr>
                <th>Summary</th>
                {% for attribute in attributes %}
                    <th>{{ attribute }}</th>
                {% endfor %}
                <th style="display:none;">nodes</th>
            </tr>
            </thead>
            <tbody>
            <!-- instances -->
            {% for node in nodes %}
                <tr>
                    <td>Min</td>
                    {% for d in node.min %}
                        <td>{{ d }}</td>
                    {% endfor %}
                    <td style="display:none;">node{{ node.id }}_filter</td>
                </tr>
                <tr>
                    <td>Max</td>
                    {% for d in node.max %}
                        <td>{{ d }}</td>
                    {% endfor %}
                    <td style="display:none;">node{{ node.id }}_filter</td>
                </tr>
                <tr>
                    <td>Avg</td>
                    {% for d in node.avg %}
                        <td>{{ d }}</td>
                    {% endfor %}
                    <td style="display:none;">node{{ node.id }}_filter</td>
                </tr>
                    <tr>
                    <td>StdDev</td>
                    {% for d in node.stddev %}
                        <td>{{ d }}</td>
                    {% endfor %}
                    <td style="display:none;">node{{ node.id }}_filter</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </center>

    <script type="text/javascript">
        var dt = $('#datasetTable{{widget.pk}}{{ random }}').DataTable({
            "bSortCellsTop": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "iDisplayLength": 4
        });
        //dt.fnSetColumnVis( 4, false );
        // create an array with nodes
        var nodes = new vis.DataSet([
            {% for node in nodes %}
                {
                    id: '{{ node.id }}',
                    label: '{{ node.label|safe }}',
                    target_stat: '{{ node.target_stat }}',
                    orig_shape: '{{ node.shape }}',
                    orig_label: '{{ node.label|safe }}',
                    title: '{{ node.title|safe }}',
                    shape: '{{node.shape}}',
                    shadow: {
                        enabled: true,
                        color: 'rgba(0,0,0,0.5)',
                        size: 10,
                        x: 5,
                        y: 5
                    },
                    color: {
                        border: '#2B7CE9',
                        background: 'white',
                        highlight: {
                            border: '#2B7CE9',
                            background: '#D2E5FF'
                        },
                        hover: {
                            border: '#2B7CE9',
                            background: '#D2E5FF'
                        }
                    }
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ]);

        // create an array with edges
        var edges = new vis.DataSet([
            {% for edge in edges %}
                {
                    from: '{{ edge.from }}',
                    to: '{{ edge.to }}',
                    label: '{{ edge.label|safe }}'
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ]);

        // create a network
        var container = document.getElementById('mynetwork{{ widget.pk }}');

        // provide the data in the vis format
        var data = {
            nodes: nodes,
            edges: edges
        };
        var options = {
            'layout': {
                'hierarchical': {
                    enabled: true,
                    levelSeparation: 150,
                    nodeSpacing: 300,
                    treeSpacing: 200,
                    blockShifting: false,
                    edgeMinimization: true,
                    parentCentralization: true,
                    direction: 'UD',        // UD, DU, LR, RL
                    sortMethod: 'directed'   // hubsize, directed
                }
            },
            'interaction': {
                'navigationButtons': true,
                'keyboard': false
            },
            'edges': {
                'arrows': {
                    'to': {'enabled': true, 'scaleFactor': 1, 'type': 'arrow'}
                }
            },
            'physics': {
                enabled: false,
                /* hierarchicalRepulsion: {
                 centralGravity: 0.0,
                 springLength: 100,
                 springConstant: 0.01,
                 nodeDistance: 200,
                 damping: 0.09
                 },
                 solver: 'hierarchicalRepulsion', */
            }
        };

        // initialize your network!
        var network = new vis.Network(container, data, options);

        function hide_descendants(node_id, hide, apply_node) {
            var node_item = nodes.get(node_id);
            if (apply_node) {
                nodes.update({id: node_id, hidden: hide});
            }
            if (!hide && !node_item.condensed || hide) {
                var my_edges = network.getConnectedEdges(node_id)
                my_edges.forEach(function (edge) {
                    var item = edges.get(edge);
                    if (item.from == node_id) {
                        edges.update({id: item.id, hidden: hide});
                        hide_descendants(item.to, hide, true);
                    }
                });
                /*edges.forEach(function (item) {
                    if (item.from == node_id) {
                        edges.update({id: item.id, hidden: hide});
                        hide_descendants(item.to, hide, true);
                    }
                })*/
            }
        }

        network.on("doubleClick", function (params) {
            console.log('doubleClick Event:', params);
            var hide = true;
            if (params.nodes.length > 0) {
                var item = nodes.get(params.nodes[0]);
                if (item.condensed) {
                    nodes.update({
                        id: item.id, condensed: false, label: item.orig_label, shape: item.orig_shape,
                        color: {
                            background: 'white',
                            highlight: {
                                background: '#D2E5FF'
                            }
                        }
                    });
                    hide = false;
                } else if (item.shape != 'box') {
                    nodes.update({
                        id: item.id, condensed: true, label: item.target_stat, shape: 'box',
                        color: {
                            background: '#dddddd',
                            highlight: {
                                background: 'yellow'
                            }
                        }
                    });
                }
                hide_descendants(params.nodes[0], hide, false);
                network.fit();
            }
        });

        network.on("selectNode", function (params) {
            console.log('selectNode Event:', params);
            params.nodes.forEach(function (item) {
                dt.fnFilter("node" + item + "_filter");
            });
        });

        network.fit();
        setTimeout(function () {
            network.fit();
            dt.fnFilter("node0_filter");
        }, 50);
    </script>
</div>
