| <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>
|
|
|
| <link href="lib/tom-select/tom-select.css" rel="stylesheet">
|
| <script src="lib/tom-select/tom-select.complete.min.js"></script>
|
|
|
|
|
| <center>
|
| <h1></h1>
|
| </center>
|
|
|
| |
|
|
| <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: #0f172a;
|
| border: 1px solid lightgray;
|
| position: relative;
|
| float: left;
|
| }
|
|
|
|
|
|
|
|
|
|
|
|
|
| </style>
|
| </head>
|
|
|
|
|
| <body>
|
| <div class="card" style="width: 100%">
|
|
|
| <div id="select-menu" class="card-header">
|
| <div class="row no-gutters">
|
| <div class="col-10 pb-2">
|
| <select
|
| class="form-select"
|
| aria-label="Default select example"
|
| onchange="selectNode([value]);"
|
| id="select-node"
|
| placeholder="Select node..."
|
| >
|
| <option selected>Select a Node by ID</option>
|
|
|
| <option value="Desconocido...">Desconocido...</option>
|
|
|
| <option value="Fuente Desconocida">Fuente Desconocida</option>
|
|
|
| </select>
|
| </div>
|
| <div class="col-2 pb-2">
|
| <button type="button" class="btn btn-primary btn-block" onclick="neighbourhoodHighlight({nodes: []});">Reset Selection</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="mynetwork" class="card-body"></div>
|
| </div>
|
|
|
|
|
|
|
|
|
| <script type="text/javascript">
|
|
|
|
|
| var edges;
|
| var nodes;
|
| var allNodes;
|
| var allEdges;
|
| var nodeColors;
|
| var originalNodes;
|
| var network;
|
| var container;
|
| var options, data;
|
| var filter = {
|
| item : '',
|
| property : '',
|
| value : []
|
| };
|
|
|
|
|
| new TomSelect("#select-node",{
|
| create: false,
|
| sortField: {
|
| field: "text",
|
| direction: "asc"
|
| }
|
| });
|
|
|
|
|
|
|
|
|
|
|
| function drawGraph() {
|
| var container = document.getElementById('mynetwork');
|
|
|
|
|
|
|
|
|
| nodes = new vis.DataSet([{"color": "#8b5cf6", "font": {"color": "white"}, "id": "Desconocido...", "label": "Desconocido...", "shape": "dot", "size": 20, "title": ""}, {"color": "#10b981", "font": {"color": "white"}, "id": "Fuente Desconocida", "label": "Fuente Desconocida", "shape": "square", "size": 25}]);
|
| edges = new vis.DataSet([{"from": "Desconocido...", "to": "Fuente Desconocida", "width": 1}]);
|
|
|
| nodeColors = {};
|
| allNodes = nodes.get({ returnType: "Object" });
|
| for (nodeId in allNodes) {
|
| nodeColors[nodeId] = allNodes[nodeId].color;
|
| }
|
| allEdges = edges.get({ returnType: "Object" });
|
|
|
| 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,
|
| "forceAtlas2Based": {
|
| "avoidOverlap": 0,
|
| "centralGravity": 0.01,
|
| "damping": 0.4,
|
| "gravitationalConstant": -50,
|
| "springConstant": 0.08,
|
| "springLength": 100
|
| },
|
| "solver": "forceAtlas2Based",
|
| "stabilization": {
|
| "enabled": true,
|
| "fit": true,
|
| "iterations": 1000,
|
| "onlyDynamicEdges": false,
|
| "updateInterval": 50
|
| }
|
| }
|
| };
|
|
|
|
|
|
|
|
|
|
|
|
|
| network = new vis.Network(container, data, options);
|
|
|
|
|
|
|
|
|
| network.on("selectNode", neighbourhoodHighlight);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| return network;
|
|
|
| }
|
| drawGraph();
|
| </script>
|
| </body>
|
| </html> |
