<html>
    <head>
        <meta charset="utf-8">
        
            <script src="lib/bindings/utils.js"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            
        
<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
          crossorigin="anonymous"
        />
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
          crossorigin="anonymous"
        ></script>


        <center>
          <h1></h1>
        </center>
        <style type="text/css">

             #mynetwork {
                 width: 100%;
                 height: 600px;
                 background-color: #ffffff;
                 border: 1px solid lightgray;
                 position: relative;
                 float: left;
             }

             

             

             
        </style>
    </head>


    <body>
        <div class="card" style="width: 100%">
            
            
            <div id="mynetwork" class="card-body"></div>
        </div>

        
        

        <script type="text/javascript">

              // initialize global variables.
              var edges;
              var nodes;
              var allNodes;
              var allEdges;
              var nodeColors;
              var originalNodes;
              var network;
              var container;
              var options, data;
              var filter = {
                  item : '',
                  property : '',
                  value : []
              };

              

              

              // This method is responsible for drawing the graph, returns the drawn network
              function drawGraph() {
                  var container = document.getElementById('mynetwork');

                  

                  // parsing and collecting nodes and edges from the python
                  nodes = new vis.DataSet([{"color": "#97c2fc", "id": 1, "label": "Node 1", "shape": "dot"}, {"color": "#97c2fc", "id": 2, "label": "Node 2", "shape": "dot"}, {"color": "#97c2fc", "id": 3, "label": "Node 3", "shape": "dot"}, {"color": "#97c2fc", "id": 4, "label": "Node 4", "shape": "dot"}, {"color": "#97c2fc", "id": 5, "label": "Node 5", "shape": "dot"}, {"color": "#97c2fc", "id": 6, "label": "Node 6", "shape": "dot"}, {"color": "#97c2fc", "id": 7, "label": "Node 7", "shape": "dot"}, {"color": "#97c2fc", "id": 8, "label": "Node 8", "shape": "dot"}, {"color": "#97c2fc", "id": 9, "label": "Node 9", "shape": "dot"}, {"color": "#97c2fc", "id": 10, "label": "Node 10", "shape": "dot"}, {"color": "#97c2fc", "id": 11, "label": "Node 11", "shape": "dot"}, {"color": "#97c2fc", "id": 12, "label": "Node 12", "shape": "dot"}, {"color": "#97c2fc", "id": 13, "label": "Node 13", "shape": "dot"}, {"color": "#97c2fc", "id": 14, "label": "Node 14", "shape": "dot"}, {"color": "#97c2fc", "id": 15, "label": "Node 15", "shape": "dot"}, {"color": "#97c2fc", "id": 16, "label": "Node 16", "shape": "dot"}, {"color": "#97c2fc", "id": 17, "label": "Node 17", "shape": "dot"}, {"color": "#97c2fc", "id": 18, "label": "Node 18", "shape": "dot"}, {"color": "#97c2fc", "id": 19, "label": "Node 19", "shape": "dot"}, {"color": "#97c2fc", "id": 20, "label": "Node 20", "shape": "dot"}, {"color": "#97c2fc", "id": 21, "label": "Node 21", "shape": "dot"}, {"color": "#97c2fc", "id": 22, "label": "Node 22", "shape": "dot"}, {"color": "#97c2fc", "id": 23, "label": "Node 23", "shape": "dot"}, {"color": "#97c2fc", "id": 24, "label": "Node 24", "shape": "dot"}, {"color": "#97c2fc", "id": 25, "label": "Node 25", "shape": "dot"}, {"color": "#97c2fc", "id": 26, "label": "Node 26", "shape": "dot"}, {"color": "#97c2fc", "id": 27, "label": "Node 27", "shape": "dot"}, {"color": "#97c2fc", "id": 28, "label": "Node 28", "shape": "dot"}, {"color": "#97c2fc", "id": 29, "label": "Node 29", "shape": "dot"}, {"color": "#97c2fc", "id": 30, "label": "Node 30", "shape": "dot"}]);
                  edges = new vis.DataSet([{"from": 1, "to": 2}, {"from": 2, "to": 3}, {"from": 3, "to": 4}, {"from": 4, "to": 5}, {"from": 5, "to": 6}, {"from": 6, "to": 7}, {"from": 7, "to": 8}, {"from": 8, "to": 9}, {"from": 9, "to": 10}, {"from": 10, "to": 11}, {"from": 11, "to": 12}, {"from": 12, "to": 13}, {"from": 13, "to": 14}, {"from": 14, "to": 15}, {"from": 15, "to": 16}, {"from": 16, "to": 17}, {"from": 17, "to": 18}, {"from": 18, "to": 19}, {"from": 19, "to": 20}, {"from": 20, "to": 21}, {"from": 21, "to": 22}, {"from": 22, "to": 23}, {"from": 23, "to": 24}, {"from": 24, "to": 25}, {"from": 25, "to": 26}, {"from": 26, "to": 27}, {"from": 27, "to": 28}, {"from": 28, "to": 29}, {"from": 29, "to": 30}, {"from": 30, "to": 1}]);

                  nodeColors = {};
                  allNodes = nodes.get({ returnType: "Object" });
                  for (nodeId in allNodes) {
                    nodeColors[nodeId] = allNodes[nodeId].color;
                  }
                  allEdges = edges.get({ returnType: "Object" });
                  // adding nodes and edges to the graph
                  data = {nodes: nodes, edges: edges};

                  var options = {
    "configure": {
        "enabled": false
    },
    "edges": {
        "color": {
            "inherit": true
        },
        "smooth": {
            "enabled": true,
            "type": "dynamic"
        }
    },
    "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();
        </script>
    

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/7.0.3/vis-network.min.js"></script>
<script type="text/javascript">
    var container = document.getElementById("mynetwork");
    var options = {};
    var data = {
        nodes: new vis.DataSet([
{id: 1, label: "Node 1"},{id: 2, label: "Node 2"},{id: 3, label: "Node 3"},{id: 4, label: "Node 4"},{id: 5, label: "Node 5"},{id: 6, label: "Node 6"},{id: 7, label: "Node 7"},{id: 8, label: "Node 8"},{id: 9, label: "Node 9"},{id: 10, label: "Node 10"},{id: 11, label: "Node 11"},{id: 12, label: "Node 12"},{id: 13, label: "Node 13"},{id: 14, label: "Node 14"},{id: 15, label: "Node 15"},{id: 16, label: "Node 16"},{id: 17, label: "Node 17"},{id: 18, label: "Node 18"},{id: 19, label: "Node 19"},{id: 20, label: "Node 20"},{id: 21, label: "Node 21"},{id: 22, label: "Node 22"},{id: 23, label: "Node 23"},{id: 24, label: "Node 24"},{id: 25, label: "Node 25"},{id: 26, label: "Node 26"},{id: 27, label: "Node 27"},{id: 28, label: "Node 28"},{id: 29, label: "Node 29"},{id: 30, label: "Node 30"},
        ]),
        edges: new vis.DataSet([
{from: 1, to: 2},{from: 2, to: 3},{from: 3, to: 4},{from: 4, to: 5},{from: 5, to: 6},{from: 6, to: 7},{from: 7, to: 8},{from: 8, to: 9},{from: 9, to: 10},{from: 10, to: 11},{from: 11, to: 12},{from: 12, to: 13},{from: 13, to: 14},{from: 14, to: 15},{from: 15, to: 16},{from: 16, to: 17},{from: 17, to: 18},{from: 18, to: 19},{from: 19, to: 20},{from: 20, to: 21},{from: 21, to: 22},{from: 22, to: 23},{from: 23, to: 24},{from: 24, to: 25},{from: 25, to: 26},{from: 26, to: 27},{from: 27, to: 28},{from: 28, to: 29},{from: 29, to: 30},{from: 30, to: 1},
        ])
    };

    var network = new vis.Network(container, data, options);
    network.on("click", function (params) {
        if (params.nodes.length > 0) {
            var nodeId = params.nodes[0];
            switch (nodeId) {

                case 1:
                    window.location.href = "/page1";
                    break;

                case 2:
                    window.location.href = "/page2";
                    break;

                case 3:
                    window.location.href = "/page3";
                    break;

                case 4:
                    window.location.href = "/page4";
                    break;

                case 5:
                    window.location.href = "/page5";
                    break;

                case 6:
                    window.location.href = "/page6";
                    break;

                case 7:
                    window.location.href = "/page7";
                    break;

                case 8:
                    window.location.href = "/page8";
                    break;

                case 9:
                    window.location.href = "/page9";
                    break;

                case 10:
                    window.location.href = "/page10";
                    break;

                case 11:
                    window.location.href = "/page11";
                    break;

                case 12:
                    window.location.href = "/page12";
                    break;

                case 13:
                    window.location.href = "/page13";
                    break;

                case 14:
                    window.location.href = "/page14";
                    break;

                case 15:
                    window.location.href = "/page15";
                    break;

                case 16:
                    window.location.href = "/page16";
                    break;

                case 17:
                    window.location.href = "/page17";
                    break;

                case 18:
                    window.location.href = "/page18";
                    break;

                case 19:
                    window.location.href = "/page19";
                    break;

                case 20:
                    window.location.href = "/page20";
                    break;

                case 21:
                    window.location.href = "/page21";
                    break;

                case 22:
                    window.location.href = "/page22";
                    break;

                case 23:
                    window.location.href = "/page23";
                    break;

                case 24:
                    window.location.href = "/page24";
                    break;

                case 25:
                    window.location.href = "/page25";
                    break;

                case 26:
                    window.location.href = "/page26";
                    break;

                case 27:
                    window.location.href = "/page27";
                    break;

                case 28:
                    window.location.href = "/page28";
                    break;

                case 29:
                    window.location.href = "/page29";
                    break;

                case 30:
                    window.location.href = "/page30";
                    break;

                default:
                    break;
            }
        }
    });
</script>
</body>
</html>