Εβδομάδα 4: Λεπτομέρειες της κάθε ταξινομικής βαθμίδας και λίστα με τα πιο σημαντικά μέλη της τάξης

#Λεπτομέρειες της κάθε ταξινομικής βαθμίδας και λίστα με τα πιο σημαντικά μέλη της τάξης
16/09/2015 - 22/09/2015

---

Αυτή τη βδομάδα έγινε υλοποίηση του popup που παρουσιάζει λεπτομέρειες για μία βαθμίδα (Όνομα, εικόνα σε μεγαλύτερο μέγεθος, πρώτη παράγραφο της σελίδας της wikipedia, και τα πιο σημαντικά μέλη της βαθμίδας).

Ο κώδικας που χειρίζεται αυτές τις λειτουργίες βρίσκεται στο αρχείο tree.js

Όταν ο χρήστης πατάει το κουμπί "Λεπτομέρειες" κάποιας βαθμίδας, γίνεται εξαγωγή του ονόματος, της τάξης, της ετικέτας (η μεταβλητή title) και τη εικόνας της βαθμίδας από το DOM.

$(document).on("click", ".details", function() {
  var name = getName($(this));
  var rank = getRank($(this));
  var img_url = $(this).closest('.thumbnail').find('img').attr('src'); 
  var title = $(this).closest('.thumbnail').find('.caption').children().first().text();  

Μετά χρησιμοποιείται το παρακάτω query που βρίσκεται στο αρχείο queries.js που χρησιμοποιεί το API της Wikipedia για να επιστρέψει τη πρώτη παράγραφο του άρθρου.

query='https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles='+name;

Αφού γίνει εξαγωγή της πρώτης παραγράφου του άρθρου της Wikipedia, καλείται η συνάρτηση getMembers που βρίσκει τα 7 πιο σημαντικά μέλη της βαθμίδας.

query = getSummaryQuery(name);
var queryUrl = query;
$.ajax({
dataType: "jsonp",
url: queryUrl,
rank: rank,
data: {
    img_url: img_url,
    title: title,
    rank: rank,
    name: name
},
success: function(_data) {
    var results = _data.query.pages;
    for (var j in results) {
        var sum = results[j].extract;
    }
    getMembers(rank, name, img_url, title, sum);
}
});
});

Η συνάρτηση αυτή βρίσκει τα 7 σημαντικότερα μέλη της βαθμίδας. Επειδή ο όγκος των δεδομένων, ειδικά για τις πρώτες βαθμίδες είναι πολύ μεγάλος χρησιμοποιήθηκε το παρακάτω query που επιστρέφει τα 500 όντα με τα περισσότερα triples, δηλαδή τις περισσότερες συσχετίσεις με άλλα αντικείμενα της Dbpedia. Είναι πιο πιθανό ένα ον με πολλές συσχετίσεις να είναι πιο σημαντικό/δημοφιλές και θα μπορούσε να χρησιμοποιηθεί αυτό το κριτήριο και ως μοναδικό κριτήριο για την επιλογή των όντων.

query='SELECT DISTINCT ?name,?thumb, COUNT(*) AS ?count WHERE {?name dbo:'+rank+' dbr:'+name+';dbo:thumbnail ?thumb;dbo:genus ?k.?s ?p ?name} ORDER BY DESC(COUNT(*)) LIMIT 500 ';

Τα δεδομένα αυτά συγκρίνονται με τα δεδομένα της wikirank, που βρίσκονται στο φάκελο wikirank data. Εξετάζονται ένα προς ένα τα δεδομένα της wikirank και αν ανήκουν στα 500 όντα που βρέθηκαν πριν τότε καταχωρούνται στο τελικό αποτέλεσμα. Η διαδικασία σταματάει μόλις βρεθούν 7 όντα.

function getMembers(rank, name, img_url, title, sum) {
    query = getImportantQuery(rank, name);
    var queryUrl = encodeURI(url + "?query=" + query + "&format=json");
    $.ajax({
        dataType: "jsonp",
        url: queryUrl,
        rank: rank,
        data: {
            img_url: img_url,
            title: title,
            sum: sum
        },
        success: function(_data) {
            animals_html = "";
            var a = 0;
            var k = 0;
            var array = [];

            var dbpedia_results = _data.results.bindings;
            console.log(dbpedia_results);
            var wikirank_results = jsonObject.items;
            for (var j in dbpedia_results) {
                var src2 = dbpedia_results[j].name.value;
                var name = nameFromUrl(src2);
                name = name.replace("_", ' ');
                array[j] = name;

            }



            for (var i in wikirank_results) {

                var src = $.trim(wikirank_results[i].n);

                if ($.inArray(src, array) > -1) {
                    k++;
                    var thumb = dbpedia_results[$.inArray(src, array)].thumb.value;
                    animals_html = animals_html + " <li><div class='span1'><img src='" + thumb + "'width='50px' ><p>" + src + "</p></div></li>";
                }

                if (k > 6)
                    break;

            }

            makeDialog(title, img_url, animals_html, sum);


        }
    });
}

Η συνάρτηση makeDialog αναλαμβάνει τη μορφοποίηση των δεδομένων σε html και δημιουργεί ένα popup χρησιμοποιώντας το dialog widget της βιβλιοθήκης JqueryUI

function makeDialog(title, img_url, animals_html, sum) {
    $("body").append('<div id="dialog"  ><div class="container-fluid">   <div class="row"><div class="span7">' + title + '</div></div> <div class="row "><div class="span7"><img src="' + img_url + '"width="200px"></div></div><div class="row"><div class="span7">' + sum + '</div></div>  <div class="row"><div class="span6"><ul class="list-inline">' + animals_html + '</ul></div></div></div></div>');
    $("#dialog").dialog({
        width: 700,
        height: 400,
        close: function(event, ui) {
            $("#dialog").remove();
        }

    });
}