script_debug.js

var s, graf;

var showYears = new Set();
var limitYears = false;

function xhr(method, url, params, callback) {
  var http = new XMLHttpRequest();
  if (method == "POST") {
    http.open(method, url, true);
  } else {
    if (params != "") {
      http.open(method, url+"?"+params, true);
    } else {
      http.open(method, url, true);
    }
  }
  http.onload = function() {
    if(this.status != 200) {
      console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
    }
    callback(this.responseText, this.status);
  };
  if (method == "POST") {
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    http.send(params);
  } else {
    http.send();
  }
}

function altSearchBar() {
  if (document.querySelector(".md-google-search__metacontainer").style.display == "none") {
    document.querySelector(".md-google-search__metacontainer").style.display = "block";
    document.querySelector("#search i").innerText = "fullscreen";
  } else {
    document.querySelector(".md-google-search__metacontainer").style.display = "none";
    document.querySelector(".autocomplete-container").style.display = "none";
    document.querySelector("#search i").innerText = "search";
  }
}

var seq = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66, 13];
var cur = 0;


function repaint() {
  if(limitYears) {
    s.graph.nodes().forEach(function(n) {
      if (!showYears.has("" + n.year)) {
        n.hidden = true;
      }
      else {
    	  n.hidden = false;
      }
    });
    
    s.graph.edges().forEach(function(e) {
      if(!showYears.has(""+e.sourceyear) || !showYears.has(""+e.targetyear)){
    	  e.hidden = true;
      }
      else e.hidden = false;
    }); 
  }
  else {
    s.graph.nodes().forEach(function(n) {
    	n.hidden = false;
    });
    
    s.graph.edges().forEach(function(e) {
    	e.hidden = false;
    });
  }
}

function justdoit() {
  s.graph.nodes().forEach(function(n) {
    switch(n.color) {
      case "#d61c08":
      n.color = "#0159aa";
      break;

      case "#0159aa":
      n.color = "#0ca80a";
      break;

      case "#0ca80a":
      n.color = "#d61c08";
      break;
    }
  });

  s.refresh();
  setTimeout(justdoit, 333);
}

var dialog = {
  fill: function(data, text, html=false) {
    var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");
    for (var i in el) {
      if (html === true) {
        el[i].innerHTML = text;
      } else {
        el[i].innerText = text;
      }
    }
  },
  show: function(id, neighbors) {
    var neighbors = Object.values(neighbors);

    this.fill("name", graf.nodes[id].name);
    this.fill("year", graf.nodes[id].year);
    this.fill("sex", graf.nodes[id].sex);
    this.fill("id", "#"+id);
    this.fill("n-edges", neighbors.length);

    var list = "";
    neighbors.forEach(function (a) {
      list += "<li><b>"+graf.nodes[id].name+" - "+a.label+":</b> "+(graf.edges[id+"_"+a.id] ? graf.edges[id+"_"+a.id].votes : graf.edges[a.id+"_"+id].votes)+" vots</li>";
    });
    this.fill("edges", list, true);

    if (window.innerWidth > 700) {
      document.querySelector("#dialog").style.display = "block";
      document.querySelector("#backdrop-container").style.display = "block";
    } else {
      document.querySelector("#summary-dialog").style.display = "block";
    }
  },
  close: function() {
    document.querySelector("#dialog").style.display = "none";
    document.querySelector("#summary-dialog").style.display = "none";
    document.querySelector("#backdrop-container").style.display = "none";
    
    repaint();

    s.refresh();
  },
  max: function() {
    document.querySelector("#summary-dialog").style.display = "none";
    document.querySelector("#dialog").style.display = "block";
  },
  min: function() {
    document.querySelector("#dialog").style.display = "none";
    document.querySelector("#summary-dialog").style.display = "block";
  }
};

function init() {
  sigma.classes.graph.addMethod("neighbors", function(nodeId) {
    var k,
        neighbors = {},
        index = this.allNeighborsIndex[nodeId] || [];

    for (k in index) {
      neighbors[k] = this.nodesIndex[k];
    }

    return neighbors;
  });

  s = new sigma({
    renderers: [{
      container: "graf",
      type: "webgl"
    }],
    settings: {
      defaultEdgeColor: "#fff",
      edgeColor: "default",
      defaultLabelColor: "#fff",
      autoRescale: false,
      zoomMax: 10,
      //enableEdgeHovering: true,
      font: "Roboto",
      labelThreshold: 5
    }
  });

  xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
    graf = JSON.parse(responseText);

    console.log(graf);

    for (var i in graf.nodes) {
      var ncolor = (graf.nodes[i].sex == "F" ? "#d61c08" : (graf.nodes[i].sex == "M" ? "#0159aa" : "#0ca80a"));

  s.graph.addNode({
    id: graf.nodes[i].id,
    year: graf.nodes[i].year,
    label: graf.nodes[i].name,
    x: graf.nodes[i].x,
    y: graf.nodes[i].y,
    size: 10,
    color: ncolor,
    originalColor: ncolor
  });
  }

  for (var i in graf.edges) {
    s.graph.addEdge({
      id: i,
      source: graf.edges[i].a,
      target: graf.edges[i].b,
      sourceyear: graf.nodes[graf.edges[i].a].year,
      targetyear: graf.nodes[graf.edges[i].b].year,
      size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
    });
  }
  s.bind('clickNode', function(e) {
    var nodeId = e.data.node.id,
      toKeep = s.graph.neighbors(nodeId);
      //toKeep[nodeId] = e.data.node;

      s.graph.nodes().forEach(function(n) {
        if (toKeep[n.id] || n.id == nodeId) {
          n.color = n.originalColor;
        } else {
          n.color = '#333';
        }
      });

      s.graph.edges().forEach(function(e) {
        if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
          e.color = '#fff';
        } else {
          e.color = '#333';
        }
      });

      s.refresh();

      dialog.show(nodeId, toKeep);
    });

    document.querySelector("#quit-dialog").addEventListener("click", dialog.close);
    document.querySelector("#quit2-dialog").addEventListener("click", dialog.close);
    document.querySelector("#max-dialog").addEventListener("click", dialog.max);
    document.querySelector("#min-dialog").addEventListener("click", dialog.min);

    document.querySelector("#zoomin").addEventListener("click", function() {
      s.camera.goTo({
        ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2))
      });
    });

    document.querySelector("#zoomout").addEventListener("click", function() {
      s.camera.goTo({
        ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2))
      });
    });

    var ylist = document.querySelector("#yearlist");
    var enc = document.createElement("span");
    for(var year=2006; year<2019; year++) {
      
      var yin = document.createElement("input");
      yin.type = "checkbox";
      yin.class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored";
      yin.name = "" + year;
      yin.addEventListener("change", function(){ 
      limitYears = true;
        
      if(this.checked) {
        showYears.add(this.name);
      }
      else {
        showYears.delete(this.name);
      }
      
      if(showYears.size == 0) limitYears = false;
        
      repaint();
      
      s.refresh();
      });
      
      var lab = document.createElement("label");
      lab.innerHTML = "" + year + "<br>";

      enc.appendChild(yin);
      enc.appendChild(lab);
    }
    ylist.appendChild(enc);
    
    document.querySelector("#settings").addEventListener("click", function() {
      var yearlist = document.querySelector("#yearlist");
      
      if(yearlist.style.display == "none"){
      yearlist.style.display = "block";
      yearLimits = true;
      }
      else{
      yearlist.style.display = "none";
      yearLimits = true;
      }
    });
    
    document.addEventListener("keydown", function() {
      
      if (event.key == "f" && event.target.getAttribute("id") != "search-input") altSearchBar();
      if (event.which == seq[cur]) {
        if (cur < seq.length) {
          ++cur;
          if (cur == seq.length) {
            justdoit();
          }
        }
      } else cur = 0;
    })
    document.querySelector("#search").addEventListener("click", altSearchBar);

    if (window.innerWidth > 700) altSearchBar();

    s.refresh();
    autocomplete(document.querySelector("#search-input"), graf.nodes, "search");
  });
}

function cameraGoto(nodeX, nodeY) {
  sigma.misc.animation.camera( s.camera,
    { x: nodeX, y: nodeY, ratio: 1 },
    { duration: s.settings('animationsTime') || 300 }
  );
}

window.addEventListener("load", init);