wc_rules/graph/templates/template_graphcontainer.html from KarrLab/wc_rules

wc_rules/graph/templates/template_graphcontainer.html
Summary

Maintainability

Test Coverage

Issues
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>

<style type="text/css">

        .container {
            text-align:center;
            width:100%;
        }

        .graph, .titlebox {
            width:  50%;
            display: inline-block;

        }

        .graph {
            width: 50%;
            height: 30%;
            background-color: #ffffff;
            border: 1px solid lightgray;
            display:inline-block; 
        }
  
</style>
</head>

<body>
    <div class = "container">
        <div class="titlebox"> <h2> Graph </h2> </div>
        <div id = "graph" class="graph"> </div>
    </div>

    <script type="text/javascript">

    // initialize global variables.
    var edges;
    var nodes;
    var network; 
    var container;
    var options, data;

    nodes = new vis.DataSet({{ graph.nodes|tojson }});
    edges = new vis.DataSet({{ graph.edges|tojson }});
        
    // This method is responsible for drawing the graph, returns the drawn network
    function drawGraph(nodes,edges) {
        var container = document.getElementById("graph");
        
        // adding nodes and edges to the graph
        data = {nodes: nodes, edges: edges};
        

        var options = {
            "configure": {
                "enabled": false
            },
            "edges": {
                "color": {
                    "inherit": true
                },
                "smooth": {
                    "enabled": false,
                    "type": "continuous"
                }
            },
            "interaction": {
                "dragNodes": true,
                "hideEdgesOnDrag": false,
                "hideNodesOnDrag": false
            },
            "physics": {
                "enabled": true,
                "stabilization": {
                    "enabled": true,
                    "fit": true,
                    "iterations": 1000,
                    "onlyDynamicEdges": false,
                    "updateInterval": 50
                }
            }
        };
        
        network = new vis.Network(container, data, options);
         return network;
    }

        drawGraph(nodes,edges);

    
</script>
</body>