<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
    <div id="mynetwork" style = "background-color: rgb(39, 39, 39);"></div>
        <script type="text/javascript">
            var color = 'gray';
        
            var nodes = {{ nodes | safe }} ;
            
            var edges = {{ edges | safe }} ;
            console.log(nodes, edges);
            // create a network
            var container = document.getElementById('mynetwork');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                autoResize: true,
                layout: {
                    improvedLayout:true,
                    randomSeed: 10,
                    
                },
                height: '100%',
                width: '100%',
                nodes: {
                    shape: 'dot',
                    size: 8,
                    font: {
                        size: 5,
                        color: '#ffffff'
                    },
                    borderWidth: 1
                },
                edges: {
                    width: 1,
                    color: {
                    color:'#356b6b',
                    highlight:'#4286f4',
                    hover: '#41f4f4',
                    inherit: 'from',
                    opacity:1.0
                    },
                },
                interaction: {
                    hoverConnectedEdges: true,
                    tooltipDelay: 200
                }
            };
            network = new vis.Network(container, data, options);
            network.on("stabilizationIterationsDone", function () {
                network.setOptions( { physics: false } );
            });
        </script>
</html>