{% extends "shared/d3_base.html" %}

{# A collapsible tree, left to right (d3 v7, backlog #34) #}


{% block custom_css %}

	<style type="text/css" media="screen">

		.node circle {
			cursor: pointer;
			fill: #fff;
			stroke: steelblue;
			stroke-width: 1.5px;
		}

		.node circle.collapsed {
			fill: lightsteelblue;
		}

		.node text {
			font-size: 11px;
			cursor: pointer;
			paint-order: stroke;
			stroke: white;
			stroke-width: 3px;
			stroke-linejoin: round;
		}

		.node text:hover {
			fill: darkorange;
		}

		path.link {
			fill: none;
			stroke: #ccc;
			stroke-width: 1.5px;
		}

	</style>

{% endblock custom_css %}



{% block hint %}
	Click a circle to open or close its branch, click a name to see its details.
	<a href="javascript:expandAll();">Expand all</a> &middot; <a href="javascript:collapseAll();">Collapse all</a>
{% endblock hint %}



{% block the_javascript %}

<script type="text/javascript">

{% if TOTAL_OBJECTS > 0 %}

	var data = {{JSON_DATA_OBJECTS|safe}};

	var dx = 22,      // vertical distance between nodes
		dy = 200,     // horizontal distance between levels
		margin = {top: 20, right: 240, bottom: 20, left: 100},
		duration = 400;

	var root = d3.hierarchy(data);
	var tree = d3.tree().nodeSize([dx, dy]);
	var diagonal = d3.linkHorizontal().x(function(d) { return d.y; }).y(function(d) { return d.x; });

	root.x0 = 0;
	root.y0 = 0;
	root.descendants().forEach(function(d, i) {
		d.id = i;
		d._children = d.children;
	});

	var svg = d3.select("#the_graph").append("svg")
		.attr("width", 800)
		.attr("height", dx)
		.style("font", "11px sans-serif")
		.style("user-select", "none");

	var gLink = svg.append("g").attr("class", "links");
	var gNode = svg.append("g").attr("class", "nodes");

	{% if TOTAL_OBJECTS > 200 %}
		// a large tree: show only the top level at first
		root.children.forEach(collapse);
	{% endif %}

	update(null, root);


	function update(event, source) {
		var dur = event && event.altKey ? 2500 : duration;
		var nodes = root.descendants().reverse();
		var links = root.links();

		tree(root);

		// size the svg to the visible nodes
		var top = root, bottom = root, right = root;
		root.eachBefore(function(node) {
			if (node.x < top.x) top = node;
			if (node.x > bottom.x) bottom = node;
			if (node.y > right.y) right = node;
		});
		var height = bottom.x - top.x + margin.top + margin.bottom;
		var width = right.y + margin.left + margin.right;

		var transition = svg.transition()
			.duration(dur)
			.attr("height", height)
			.attr("width", Math.max(width, 800));
		gLink.transition(transition).attr("transform", "translate(" + margin.left + "," + (margin.top - top.x) + ")");
		gNode.transition(transition).attr("transform", "translate(" + margin.left + "," + (margin.top - top.x) + ")");

		// nodes
		var node = gNode.selectAll("g.node")
			.data(nodes, function(d) { return d.id; });

		var nodeEnter = node.enter().append("g")
			.attr("class", "node")
			.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
			.attr("fill-opacity", 0)
			.attr("stroke-opacity", 0);

		nodeEnter.append("circle")
			.attr("r", 4.5)
			.on("click", function(event, d) {
				d.children = d.children ? null : d._children;
				update(event, d);
			});

		nodeEnter.append("text")
			.attr("dy", "0.32em")
			.attr("x", function(d) { return d._children ? -9 : 9; })
			.attr("text-anchor", function(d) { return d._children ? "end" : "start"; })
			.text(function(d) { return d.data.name; })
			.on("click", function(event, d) { hideTooltip(); showpanel(d.data.objid); })
			.on("mouseover", function(event, d) {
				var n = d._children ? d._children.length : 0;
				showTooltip(event, entityTooltip(d.data, n ? n + " direct sub-entities" : ""));
			})
			.on("mousemove", function(event) { showTooltip(event); })
			.on("mouseout", hideTooltip);

		var nodeUpdate = node.merge(nodeEnter).transition(transition)
			.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
			.attr("fill-opacity", 1)
			.attr("stroke-opacity", 1);

		node.merge(nodeEnter).select("circle")
			.attr("class", function(d) { return d._children && !d.children ? "collapsed" : null; })
			.style("cursor", function(d) { return d._children ? "pointer" : "default"; });

		node.exit().transition(transition).remove()
			.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
			.attr("fill-opacity", 0)
			.attr("stroke-opacity", 0);

		// links
		var link = gLink.selectAll("path.link")
			.data(links, function(d) { return d.target.id; });

		var linkEnter = link.enter().append("path")
			.attr("class", "link")
			.attr("d", function(d) {
				var o = {x: source.x0, y: source.y0};
				return diagonal({source: o, target: o});
			});

		link.merge(linkEnter).transition(transition)
			.attr("d", diagonal);

		link.exit().transition(transition).remove()
			.attr("d", function(d) {
				var o = {x: source.x, y: source.y};
				return diagonal({source: o, target: o});
			});

		// stash the old positions for the next transition
		root.eachBefore(function(d) {
			d.x0 = d.x;
			d.y0 = d.y;
		});
	}


	// fold a node and all its descendants
	function collapse(d) {
		if (d._children) {
			d._children.forEach(collapse);
			d.children = null;
		}
	}

	function expandAll() {
		root.descendants().forEach(function(d) { d.children = d._children; });
		update(null, root);
	}

	function collapseAll() {
		if (root._children) {
			root._children.forEach(collapse);
			root.children = root._children;
		}
		update(null, root);
	}

{% endif %}

</script>

{% endblock the_javascript %}