{% extends "base.html" %}
{% block container_class %}container-fluid{% endblock %}
{% block head %}
{% load static from staticfiles %}
<!-- <script src="{% static "js/d3.js" %}" charset="utf-8"></script> -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

#plotwin {
    height: 75vh;
}
</style>
{% endblock %}
{% block body %}
<div class="page-header">
	<h3>{% if crawl.pk %}Crawl run {{crawl.pk}}{% else %}Live Crawl {% endif %} from {{crawl.startTime|date:"d.m.Y H:i"}}</h3>
</div>

<div id="plotwin" class="container-fluid"></div>
<!-- <div id="infowin"><div class="alert alert-info" role="alert">Click on a node for more information</div></div> -->
<script type="text/javascript" charset="utf-8">

const margin = {
  top: 40,
  bottom: 10,
  left: 20,
  right: 20,
};
let plotwin = document.getElementById("plotwin")
const width = plotwin.offsetWidth - margin.left - margin.right;
const height = plotwin.offsetHeight - margin.top - margin.bottom;

let drag = d3.drag()
    .on("drag", dragged);

function dragged() {
    let current = d3.select(this);
    current
        .attr('cx', d3.event.x)
        .attr('cy', d3.event.y);                   
        console.log(`${d3.event.x}, ${d3.event.y}`);
}

function dragmove(d) {
  let x = d3.event.x;
  let y = d3.event.y;
  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}

const parent_svg = d3
  .select("#plotwin")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  //.attr("viewBox", [width / 2, height / 2, width, height])
  .attr("viewBox", [0, 0, width, height])
const svg = parent_svg.append("g")
//  .append("g")
//  .attr("transform", `translate(${margin.left}, ${margin.top})`);

parent_svg.call(
    d3.zoom()
        .scaleExtent([.1, 4])
        .on("zoom", function() { svg.attr("transform", d3.event.transform); })
);

//const simulation = d3
//  .forceSimulation()
//  .force(
//    "link",
//    d3.forceLink().id((d) => d.id)
//  )
//  .force("charge", d3.forceManyBody().distanceMin(50).strength(-300))
//  .force("center", d3.forceCenter(width / 2, height / 2));

const color = d3.scaleOrdinal(d3.schemeCategory10);

drag = simulation => {
  
  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }
  
  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  
  return d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);
}


d3.json("/api/v2/crawlrun/live/?with_graph").then((data) => {
  // Links data join
  data = data.graph

  const simulation = d3.forceSimulation(data.nodes)
      //.force("link", d3.forceLink(data.links).id(d => d.id).distance(150).strength(1))
      //.force("link", d3.forceLink().id(function(d) { return d.id; }))
      .force("link", d3.forceLink().id(d => d.id)
            .distance(l => {
                neighs = Math.min(l.source.neighbors, l.target.neighbors);
                switch(neighs) {
                    case 0: return 40;
                    case 1: return 40;
                    case 2: return 120;
                    case 3:
                    case 4: return 200;
                    default: return 300;
                }
            })
            .strength(l => {
                neighs = Math.min(l.source.neighbors, l.target.neighbors);
                return 1 / (neighs);

            }))
      .force("charge", d3.forceManyBody()
            .strength(-200)
            .theta(1.1))
      //.force("collision", d3.forceCollide(50).strength(0.2).iterations(100))
      //.force("collision", d3.forceCollide(40).strength(0.2))
      .force("collision", d3.forceCollide(40).strength(0.2))
      //.force("x", d3.forceX())
      //.force("y", d3.forceY())
      .force("center", d3.forceCenter(width / 2, height / 2));
      //.force("center", d3.forceRadial(100, width / 2, height / 2));




  const link = svg
    .selectAll(".link")
    .data(data.links)
    .join((enter) => 
            enter.append("line")
                 .attr("class", "link"));

  // Nodes data join


    let node = svg.selectAll('.node')
                .data(data.nodes)
                .enter()
                .append("g")
                .attr("id", d => "node-" + d.id)
                .call(drag(simulation));

    node.append("ellipse")
        //.attr("rx", d => d.stub ? 35 : 40)
        //.attr("ry", d => d.stub ? 14 : 20)
        .attr("rx", d => d.stub ? 34 : (40 + (d.neighbors > 5 ? 5 : 0)))
        .attr("ry", d => d.stub ? 12 : (20 + (d.neighbors > 5 ? 2 : 0)))
        .attr("fill", function(d) {
            if(d.directly_crawled)
                return "#94FF70";
            else if(!d.online)
                return "#FFCCCC";
                // return "#F0FFEB";
            else if(d.stub)
                return "#3291A8"
            else
                return "#D1FFC2";
        })
        .attr("stroke", "black")
        .attr("stroke-width", "1px");

    node.append('text')
        .attr("fill", "black")
        .attr("font-family", "sans-serif")
        .attr("font-size", "13px")
        .attr("font-weight", "bold")
        .attr("dy", "4")
        .attr("text-anchor", "middle")
        .text(d => d.id)




simulation.nodes(data.nodes).force("link").links(data.links);

simulation.on("tick", (e) => {
    link
      .attr("x1", (d) => d.source.x)
      .attr("y1", (d) => d.source.y)
      .attr("x2", (d) => d.target.x)
      .attr("y2", (d) => d.target.y);

    node.attr("transform", d => "translate(" + d.x + "," + d.y + ")");
  });
});


</script>

{% endblock %}