
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Node Styles | HTML in Nodes</title>

    <style type="text/css">
      body {
        font: 14pt arial;
      }
      #postnetviz {
        width: 900px;
        height: 900px;
        /* border: 1px solid lightgray; */
        /* background-color: #eeeeee; */
        float:right;
      }
      #tweet { 
        width:500px;
        min-height:200px;
      }
    </style>

    <script
      type="text/javascript"
      src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"
    ></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


    <script type="text/javascript">
      var nodes = null;
      var edges = null;
      var network = null;

      var DIR = "img/refresh-cl/";
      var LENGTH_MAIN = 150;
      var LENGTH_SUB = 50;

      



      // Called when the Visualization API is loaded.
      function draw() {
        var nodes = {{nodes | tojson | safe}};
        var edges = {{edges | tojson | safe}};

        // create a network
        var container = document.getElementById("postnetviz");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {
          
          // PHYSICS OPTIONS
          physics:{
            enabled: true,
            barnesHut: {
              theta: 0.5,
              gravitationalConstant: -2000,
              centralGravity: 0.3,
              springLength: 95,
              springConstant: 0.04,
              damping: 0.09,
              avoidOverlap: 0
            },
            forceAtlas2Based: {
              theta: 0.5,
              gravitationalConstant: -50,
              centralGravity: 0.01,
              springConstant: 0.08,
              springLength: 100,
              damping: 0.4,
              avoidOverlap: 0
            },
            repulsion: {
              centralGravity: 0.2,
              springLength: 200,
              springConstant: 0.05,
              nodeDistance: 100,
              damping: 0.09
            },
            hierarchicalRepulsion: {
              centralGravity: 0.2,
              springLength: 100,
              springConstant: 0.01,
              nodeDistance: 120,
              damping: 0.09,
              avoidOverlap: 1
            },
            maxVelocity: 50,
            minVelocity: 0.1,
            solver: 'hierarchicalRepulsion',
            stabilization: {
              enabled: true,
              iterations: 100,
              updateInterval: 100,
              onlyDynamicEdges: false,
              fit: true
            },
            timestep: 0.5,
            adaptiveTimestep: true,
            wind: { x: 0, y: 0 }
          },


          // EDGES OPTIONS
          edges:{
            arrows: {
              to: {
                enabled: true,
                // imageHeight: undefined,
                // imageWidth: undefined,
                scaleFactor: 1,
                // src: undefined,
                type: "arrow"
              },
              middle: {
                enabled: false,
                imageHeight: 32,
                imageWidth: 32,
                scaleFactor: 1,
                src: "https://visjs.org/images/visjs_logo.png",
                type: "image"
              },
              from: {
                enabled: false,
                // imageHeight: undefined,
                // imageWidth: undefined,
                scaleFactor: 1,
                // src: undefined,
                type: "arrow"
              }
            },
            endPointOffset: {
              from: 0,
              to: 0
            },
            arrowStrikethrough: true,
            chosen: true,
            color: {
              color:'#848484',
              highlight:'#848484',
              hover: '#848484',
              inherit: 'from',
              opacity:1.0
            },
            dashes: false,
            font: {
              color: '#343434',
              size: 16, // px
              face: 'arial',
              background: 'none',
              strokeWidth: 2, // px
              strokeColor: '#ffffff',
              align: 'horizontal',
              multi: false,
              vadjust: 0,
              bold: {
                color: '#343434',
                size: 16, // px
                face: 'arial',
                vadjust: 0,
                mod: 'bold'
              },
              ital: {
                color: '#343434',
                size: 16, // px
                face: 'arial',
                vadjust: 0,
                mod: 'italic',
              },
              boldital: {
                color: '#343434',
                size: 16, // px
                face: 'arial',
                vadjust: 0,
                mod: 'bold italic'
              },
              mono: {
                color: '#343434',
                size: 16, // px
                face: 'courier new',
                vadjust: 2,
                mod: ''
              }
            },
            hidden: false,
            hoverWidth: 1.5,
            label: undefined,
            labelHighlightBold: true,
            length: undefined,
            physics: true,
            scaling:{
              min: 1,
              max: 15,
              label: {
                enabled: true,
                min: 14,
                max: 30,
                maxVisible: 30,
                drawThreshold: 5
              },
              customScalingFunction: function (min,max,total,value) {
                if (max === min) {
                  return 0.5;
                }
                else {
                  var scale = 1 / (max - min);
                  return Math.max(0,(value - min)*scale);
                }
              }
            },
            selectionWidth: 1,
            selfReferenceSize: 20,
            selfReference:{
                size: 20,
                angle: Math.PI / 4,
                renderBehindTheNode: true
            },
            shadow:{
              enabled: false,
              color: 'rgba(0,0,0,0.5)',
              size:10,
              x:5,
              y:5
            },
            smooth: {
              enabled: false,
              type: "dynamic",
              roundness: 0.5
            },
            title:undefined,
            value: undefined,
            width: 1,
            widthConstraint: false
          },
          
          
          // LAYOUT OPTIONS
          layout: {
            randomSeed: undefined,
            improvedLayout:true,
            clusterThreshold: 150,
            hierarchical: {
              enabled:false,
              levelSeparation: 150,
              nodeSpacing: 100,
              treeSpacing: 200,
              blockShifting: true,
              edgeMinimization: true,
              parentCentralization: true,
              direction: 'LR',        // UD, DU, LR, RL
              sortMethod: 'hubsize',  // hubsize, directed
              shakeTowards: 'leaves'  // roots, leaves
            }
          }, 

          
          // INTERACTION
          interaction:{
            dragNodes:true,
            dragView: true,
            hideEdgesOnDrag: false,
            hideEdgesOnZoom: false,
            hideNodesOnDrag: false,
            hover: true,
            hoverConnectedEdges: true,
            keyboard: {
              enabled: false,
              speed: {x: 10, y: 10, zoom: 0.02},
              bindToWindow: true,
              autoFocus: true,
            },
            multiselect: false,
            navigationButtons: false,
            selectable: true,
            selectConnectedEdges: true,
            tooltipDelay: 300,
            zoomSpeed: 1,
            zoomView: true,
          }
        };
        network = new vis.Network(
          container,
          data, 
          options
        );

        network.on("hoverNode", function (params) {
          console.log("hoverNode Event:", params);
          node = params.node;
          node_d = nodes[node-1];
          $('#tweet').html(node_d['html']);
        });
        
      }
    </script>
  </head>

  <body onload="draw()">
    <div id="postnetviz"></div>
    <div id="tweet"></div>
  </body>
</html>
