RESTORE_FE/js/people.js

// Raccatto i parametri dall'URL -- mi aspetto un parametro di nome 'link'!
thisUrlParams = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    thisUrlParams[key] = value;
});
console.log('URL get params: ', thisUrlParams);

// Funzioni per eseguire le queries
function prepareQueryURL(query){
    sparqlEndpoint = 'http://dev.restore.ovi.cnr.it:8890/sparql/';
    sparqlUrlParams = '?default-graph-uri=&query=' + encodeURIComponent(query) + '&output=json&callback=?';
    return sparqlEndpoint + sparqlUrlParams;
}

function doJsonQuery(query){

    queryURL = prepareQueryURL(query);

    response = $.ajax({//OGGETTO

        url: queryURL,
        dataType: "json",
        success: function (data){},
        error: function (e) {}
    });

    return response;

}

// Funzioni per raccattare + stringhificare l'output
queryStringOutput = "";
function stringifyResponse(val){
    resultArray = val['results']['bindings'];
    out = "";
    for(i = 0; i < resultArray.length; i++){
        out = out + JSON.stringify(resultArray[i])
    }
    queryStringOutput = (queryStringOutput + out).replace("}{",",");
}

prefixes = "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> \
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> \
PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/> \
PREFIX owl: <http://www.w3.org/2002/07/owl#>"

query = prefixes + " SELECT DISTINCT ?place ?label ?coordinates \
WHERE { \
{?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
?event_from crm:P01_has_domain ?pc ; \
rdf:type crm:EL3_Receive_Letter; \
crm:P26_moved_to ?place_from . \
?place_from rdf:type crm:E53_Place ; \
owl:sameAs ?place . \
?place rdfs:label ?label ; \
crm:P168_place_is_defined_by ?coordinates . \
} UNION { \
?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
?event_from crm:P01_has_domain ?pc ; \
rdf:type crm:EL2_Send_Letter; \
crm:P27_moved_from ?place_from . \
?place_from rdf:type crm:E53_Place ; \
owl:sameAs ?place . \
?place rdfs:label ?label ; \
crm:P168_place_is_defined_by ?coordinates . \
} \
}"

queryInfo = prefixes + " SELECT DISTINCT ?graph ?label \
WHERE { \
GRAPH ?graph {<" + thisUrlParams.link + "> rdfs:label ?label} \
}"

queryLetters = prefixes + " SELECT DISTINCT ?type ?document_uri ?document_name \
WHERE {?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
?ev_send crm:P01_has_domain ?pc ; \
rdfs:label ?type ; \
rdfs:subClassOf ?event . \
?document_uri crm:P25i_moved_by ?event ; \
rdfs:label ?document_name . \
}"

queryNetwork = prefixes + " SELECT DISTINCT ?uri ?label ?uri2 ?label2 \
WHERE { \
{?event rdf:type crm:EL1_Exchange_Letters . \
?event_to rdfs:subClassOf ?event; \
rdf:type crm:EL2_Send_Letter ; \
crm:P01_has_domain ?pc_to . \
?pc_to crm:P02_has_range ?uri . \
?uri rdfs:label ?label . \
?event_from rdfs:subClassOf ?event; \
rdf:type crm:EL3_Receive_Letter; \
crm:P01_has_domain ?pc_from . \
?pc_from crm:P02_has_range ?uri2 . \
?uri2 rdfs:label ?label2 . \
FILTER (?uri = <" + thisUrlParams.link + ">) \
} UNION { \
?event rdf:type crm:EL1_Exchange_Letters . \
?event_to rdfs:subClassOf ?event; \
rdf:type crm:EL2_Send_Letter ; \
crm:P01_has_domain ?pc_to . \
?pc_to crm:P02_has_range <" + thisUrlParams.link + "> . \
?event_from rdfs:subClassOf ?event; \
rdf:type crm:EL3_Receive_Letter; \
crm:P01_has_domain ?pc_from . \
?pc_from crm:P02_has_range ?uri . \
?uri rdfs:label ?label . \
?pc_new crm:P02_has_range ?uri . \
?event_new crm:P01_has_domain ?pc_new ; \
rdfs:label ?event_label; \
rdfs:subClassOf ?exchange . \
?event3 rdfs:subClassOf ?exchange; \
rdfs:label ?event_label2; \
crm:P01_has_domain ?pc3 . \
?pc3 crm:P02_has_range ?uri2 . \
?uri2 rdfs:label ?label2 .  \
FILTER (?event_label != ?event_label2)\
} \
} limit 50 "

queryURL = prepareQueryURL(query);

queryNet = prepareQueryURL(queryNetwork);

query = prepareQueryURL(queryInfo);

queryEx = prepareQueryURL(queryLetters);

response = $.ajax({

    url: query,
    dataType: "json",
    success: function (data){
      handle_data(data);
    },
    error: function (e) {}
});

response = $.ajax({

    url: queryURL,
    dataType: "json",
    success: function (data){
    	handle_map(data);
    },
    error: function (e) {}
});

responseNet = $.ajax({

    url: queryNet,
    dataType: "json",
    success: function (data){
      handle_network(data);
    },
    error: function (e) {}
});

responseLet = $.ajax({

    url: queryEx,
    dataType: "json",
    success: function (data){
      handle_Letters(data);
    },
    error: function (e) {}
});



function handle_data(json) {

  console.log(json);

  var graph = "";
  var label = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var graph = value['graph']['value'];
        var label = value['label']['value'];

        document.getElementById("grafo").innerHTML = graph;
        document.getElementById("nome_persona").innerHTML = label;
        document.getElementById("nome1").innerHTML = label;
        document.getElementById("nome2").innerHTML = label;
        document.getElementById("nome_au").innerHTML = label;
        document.getElementById("nome_ap").innerHTML = label;
        document.getElementById("nome_al").innerHTML = label;
        
      });
  
}


function handle_Letters(json) {

  console.log(json);

  const send = {};
  const receive = {};

  var i=0;
  var j=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        type = value['type']['value'];
        uri = value['document_uri']['value'];
        title = value['document_name']['value'];
        if (type == "Invio") {
          send[uri] = title;
          i++;
        } else {
          receive[uri] = title;
          j++;
        }   
      });

  var Send_Letters = "";
  var Receive_Letters = "";

  for (var key in send) {
    Send_Letters += "<div class='row'><div class='col-10'>" + send[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
  }

  for (var key in receive) {
    Receive_Letters += "<div class='row'><div class='col-10'>" + receive[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
  }

  document.getElementById("l_send").innerHTML = i;
  document.getElementById("l_receive").innerHTML = j;
  document.getElementById("letters_send").innerHTML = Send_Letters;
  document.getElementById("letters_receive").innerHTML = Receive_Letters;

  if (i==0) {
    var messaggio = "<p>Nessun risultato trovato</p>";
    document.getElementById("letters_send").innerHTML = messaggio;
  }

  if (j==0) {
    var messaggio = "<p>Nessun risultato trovato</p>";
    document.getElementById("letters_receive").innerHTML = messaggio;
  }

}


function handle_map(json) {
  console.log(json);

  const locations = [];
  const place_names = [];

  var lat = 0;
  var long = 0;
  var i=0;
  var myPlaces = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const loc = []
        var graph = value['place']['value'];
        var label = value['label']['value'];
        var coord = value['coordinates']['value'];
        const coordinates = coord.split(", ");
        loc.push(label);
        myPlaces += "<div class='row'><div class='col-10'>" + label + "</div></div>";
        loc.push(coordinates[0]);
        lat += parseInt(coordinates[0]);
        loc.push(coordinates[1]);
        long += parseInt(coordinates[1].replace(/^(\.)/,"0.").replace("-.", "-0."));
        locations.push(loc);
        i++;
        
      });

  var latitude = lat/i;
  var longitude = long/i;

  document.getElementById("list_places_person").innerHTML = myPlaces;


  var map = L.map('map').setView([locations[0][1], locations[0][2]], 5);
  mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

  L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; ' + mapLink + ' Contributors',
      maxZoom: 18,
    }).addTo(map);

  for (var i = 0; i < locations.length; i++) {
    marker = new L.marker([locations[i][1], locations[i][2]])
      .bindPopup(locations[i][0])
      .addTo(map);
  }
}

//out = "";
//for(i = 0; i < resultArray.length; i++){
 //   out = out + JSON.stringify(resultArray[i])
//}
//queryStringOutput = (queryStringOutput + out).replace("}{",",");


/*

var locations = [
  ["LOCATION_1", 11.8166, 122.0942],
  ["LOCATION_2", 11.9804, 121.9189],
  ["LOCATION_3", 10.7202, 122.5621],
  ["LOCATION_4", 11.3889, 122.6277],
  ["LOCATION_5", 10.5929, 122.6325]
];

var map = L.map('map').setView([11.206051, 122.447886], 8);
mapLink =
  '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
  }).addTo(map);

for (var i = 0; i < locations.length; i++) {
  marker = new L.marker([locations[i][1], locations[i][2]])
    .bindPopup(locations[i][0])
    .addTo(map);
}
*/

function handle_network(json) {
  console.log(json);

  const  myArray = {};
  const  myLinks = [];
  var listNodes = "";
  var listLinks = "";
  var ArrayNames = "";

  var max = 0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const topo = [];

        var id = value['uri']['value'];
        var name = value['label']['value'];
        var id2 = value['uri2']['value'];
        var name2 = value['label2']['value'];
        ArrayNames += "<div class='row'><div class='col-10'>" + name2 + "</div><div class='col'><a target='_blank' href='" + id2 + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
        myArray[id] = name;
        myArray[id2] = name2;
        myLinks.push([id, id2]);
        
      });

  document.getElementById("list_person_network").innerHTML = ArrayNames;

  for (var key in myArray) {
      listNodes += '{ "id": \"' + key + '\", "name": \"' + myArray[key] + '\"},';
  }

  for (var i in myLinks) {
    var source = myLinks[i][0]
    var target = myLinks[i][1]
    listLinks += '{ "source": \"' + source + '\", "target": \"' + target + '\"},';
  }

  console.log(myLinks);

  let listN = ('[' + listNodes + ']').replace(',]', ']');
  let listL = ('[' + listLinks + ']').replace(',]', ']');


  const nodes = JSON.parse(listN);
  const links = JSON.parse(listL);

  console.log(nodes);
  console.log(links);


  var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");

  var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }))
      //.force("charge", d3.forceManyBody().strength(-200))
      .force('charge', d3.forceManyBody()
        .strength(-500)
        .theta(0.8)
        .distanceMax(250)
      )
  //    .force('collide', d3.forceCollide()
  //       .radius(d => 40)
  //       .iterations(2)
  //     )
      .force("center", d3.forceCenter(width / 4, height / 3));

  
  links.forEach(function(d){
//     d.source = d.source_id;    
//     d.target = d.target_id;
  });           

  var link = svg.append("g")
                .style("stroke", "#aaa")
                .selectAll("line")
                .data(links)
                .enter().append("line");

  var node = svg.append("g")
            .attr("class", "nodes")
  .selectAll("circle")
            .data(nodes)
  .enter().append("circle")
          .attr("r", 2)
          .attr("id", function (d) { return d.id; })
          .call(d3.drag()
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended));
  
  var label = svg.append("g")
      .attr("class", "labels")
      .selectAll("text")
      .data(nodes)
      .enter().append("text")
        .attr("class", "label")
        .call(d3.drag()
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended))
        .text(function(d) { return d.name; });

  simulation
      .nodes(nodes)
      .on("tick", ticked);

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

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
         .attr("r", 5)
         .style("fill", "#efefef")
         .style("stroke", "#424242")
         .style("stroke-width", "1px")
         .attr("cx", function (d) { return d.x+5; })
         .attr("cy", function(d) { return d.y-3; });
    
    label
        .attr("x", function(d) { return d.x+12; })
            .attr("y", function (d) { return d.y+1; })
            .style("font-size", "10px").style("fill", "#333");

  }

  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart()
    d.fx = d.x
    d.fy = d.y
  //  simulation.fix(d);
  }

  function dragged(d) {
    d.fx = d3.event.x
    d.fy = d3.event.y
  //  simulation.fix(d, d3.event.x, d3.event.y);
  }

  function dragended(d) {
    d.fx = d3.event.x
    d.fy = d3.event.y
    if (!d3.event.active) simulation.alphaTarget(0);
    //simulation.unfix(d);
  }
}