[% PROCESS _header.tt js=[ "vendor/visjs/v9.1.2/vis-network.min.js" ] %]

[% IF service %]
[% typename = "service" %]
[% backlink = uri_with(c, { type => 2 }) %]
[% ELSE %]
[% typename = "host" %]
[% backlink = uri_with(c, { type => 1 }) %]
[% END %]
<div class="card w-full h-full flexcol gap-0 flex-nowrap">
  <div class="head justify-between" style="flex: 0 0 40px;">
    <a href="[% backlink %]" class="button header-button rounded w-[70px]" title="Go back to [% typename %]">
      <i class="uil uil-angle-double-left"></i>Back
    </a>
    <h3><a href="[% backlink %]" class="link" title="Go back to [% typename %]">Dependency Tree: [% host | html %][% IF service %] - [% service | html; END %]</a></h3>
    <div class="w-[70px]"></div>
  </div>
  <div class="body w-full h-full">
    <div id="mynetwork" class="w-full h-full overflow-hidden"></div>
  </div>
</div>

<script>

function replaceCssVariable(data) {
  if(Array.isArray(data)) {
    data.forEach(function(v, i) {
      data[i] = replaceCssVariable(v);
    });
  }
  else if(typeof(data) == "object") {
    for(var key in data) {
      data[key] = replaceCssVariable(data[key]);
    }
  }
  else if(typeof(data) == "string") {
    var matches = data.match(/\s*var\s*\(\s*(\-\-[^\)]+)\s*\)/);
    if(matches && matches[1]) {
      return(getComputedStyle(document.documentElement).getPropertyValue(matches[1]));
    }
  }
  return(data);
}

var nodes = new vis.DataSet(replaceCssVariable([% json_encode(nodes) %]));
var edges = [% json_encode(edges) %];
var network = null;
function draw() {
  if (network != null) {
    network.destroy();
    network = null;
  }

  // create a network
  var container = document.getElementById("mynetwork");
  var data = { nodes, edges };
  var options = {
    layout: {
      hierarchical: {
        direction: "UD",
        sortMethod: "directed"
      }
    },
    physics: {
      hierarchicalRepulsion: {
        avoidOverlap: 1
      }
    },
    interaction: {
      dragNodes: false,
      selectable: false,
      hover: true
    },
    nodes: {
      color: {
          border: replaceCssVariable('var(--border-dark)')
      },
      labelHighlightBold: false,
      widthConstraint: 140,
      heightConstraint: 40
    },
    edges: {
      color: replaceCssVariable('var(--border-dark)'),
      arrows: 'to',
      hoverWidth: 0
    }
  };
  network = new vis.Network(container, data, options);

  network.on("click", function(params) {
    var n = this.getNodeAt(params.pointer.DOM);
    if(!n) { return; }
    var node = nodes.get(n);
    var host_name   = node.data.host_name;
    var description = node.data.description;
    var peer_key    = node.data.peer_key;

    overcard({
      'body': '<div class="service_popup_content"><\/div>',
      'caption': host_name+(description ? ' - '+description : ''),
      'width': 600
    });
    fetch_svc_info_popup(this, host_name, description, peer_key);
  });
  network.on("hoverNode", function(params) {
    jQuery(container).addClass("clickable");
  });
  network.on("blurNode", function(params) {
    jQuery(container).removeClass("clickable");
  });
}
draw();

</script>

[% PROCESS _footer.tt %]
