accurator/commit
Improved objects based on adding them to results page.
author | Chris Dijkshoorn |
---|---|
Tue Mar 22 21:44:46 2016 +0100 | |
committer | Chris Dijkshoorn |
Tue Mar 22 21:44:46 2016 +0100 | |
commit | f0c3780038920f84a2caf1100999a73413cd306e |
tree | 6cd7ec6b8c326b37e0bbe244a194e8c402175d48 |
parent | fd5cad5d10a9cd3d680b482b4f3f0d748788ff70 |
Diff style: patch stat
diff --git a/web/html/results.html b/web/html/results.html index 247e0ca..9f50b8e 100644 --- a/web/html/results.html +++ b/web/html/results.html @@ -85,7 +85,7 @@ <script type="text/javascript" src="js/components/pagination.js"></script> <script type="text/javascript" src="js/components/thumbnail.js"></script> <script type="text/javascript" src="js/components/path.js"></script> - <script type="text/javascript" src="js/pengines.js"></script> + <script type="text/javascript" src="js/components/cluster.js"></script> <script type="text/javascript" src="js/components/utilities.js"></script> <script type="text/javascript" src="js/results.js"></script> <script>resultsInit();</script> diff --git a/web/js/components/cluster.js b/web/js/components/cluster.js index 6907dc1..a41332e 100644 --- a/web/js/components/cluster.js +++ b/web/js/components/cluster.js @@ -8,6 +8,7 @@ function Cluster(uris, id) { this.thumbnails = []; // thumbnails this.pagination = null; this.node = null; + this.enriched = false; this.init(); } @@ -17,7 +18,7 @@ Cluster.prototype.init = function() { } Cluster.prototype.html = function() { - return $.el.div({'class':'col-md-12', 'id':this.id}); + return $.el.div({'class':'col-md-12 well well-sm', 'id':this.id}); } Cluster.prototype.enrich = function() { @@ -42,6 +43,7 @@ Cluster.prototype.enrich = function() { items[i].title = truncate(data[i].title, 60); } _cluster.items = items; + _cluster.enriched = true; }); } diff --git a/web/js/components/pagination.js b/web/js/components/pagination.js index 42a9ea2..c5a2a74 100644 --- a/web/js/components/pagination.js +++ b/web/js/components/pagination.js @@ -38,17 +38,15 @@ Pagination.prototype.html = function() { var html = $.el.ul({'class':'pagination pagination-sm'}, $.el.li({'class':'disabled left-arrow'}, - $.el.a({'href':'#'}, - '\u00ab')), + $.el.span('\u00ab')), $.el.li({'class':'active'}, - $.el.a({'href':'#'}, - 1)) + $.el.span(1)) ); // add additional pages for (var i=2; i<=this.numberOfPages; i++) { // create html for page number - var pageNode = $.el.li($.el.a({'href':'#'}, i)); + var pageNode = $.el.li($.el.span(i)); this.addClickEvent(pageNode, i); html.appendChild(pageNode); }; @@ -56,8 +54,7 @@ Pagination.prototype.html = function() { // add right arrow to pagination var rightArrow = $.el.li({'class':'right-arrow'}, - $.el.a({'href':'#'}, - '\u00bb') + $.el.span('\u00bb') ); this.addClickNext(rightArrow); html.appendChild(rightArrow); @@ -67,8 +64,9 @@ Pagination.prototype.html = function() { Pagination.prototype.addClickEvent = function(pageNode, i) { var _page = this; - + console.log("add event to cluster ", _page.parentId, " go to ", i); $(pageNode).on("click pagination", function() { + console.log("cluster ", _page.parentId, " go to ", i); _page.goToPage(i); }); } diff --git a/web/js/profile.js b/web/js/profile.js index 6ba29f3..7ab23e5 100644 --- a/web/js/profile.js +++ b/web/js/profile.js @@ -50,6 +50,9 @@ function populateRecentlyAnnotated(user) { } else { //TODO: limit length of uris (faster if someone annotated a bunch)? var cluster = new Cluster(uris, "profileDivCluster"); + + $("#profileDivLastCluster").append(cluster.node); + cluster.enrich() .then(function() { // display 6 elements in cluster diff --git a/web/js/results.js b/web/js/results.js index 9f7f7cf..ad05f2a 100644 --- a/web/js/results.js +++ b/web/js/results.js @@ -25,7 +25,6 @@ Layout of the results: *******************************************************************************/ "use strict"; -var clusters = []; var randoms = []; // Display options deciding how to results get displayed @@ -58,8 +57,6 @@ function resultsInit() { var user = userData.user; var userName = getUserName(user); var realName = userData.real_name; - var userQuery = getParameterByName("user"); - var query = getParameterByName("query"); setLinkLogo("profile"); populateNavbar(userName, [{link:"profile.html", name:"Profile"}], locale); @@ -80,8 +77,8 @@ function resultsInit() { // Provide results based on query, recommend something based on // the expertise of the retrieved user or, if none of these, show // just random results - results(labels, query, userQuery, target); - }); + results(target, labels); + }) } } @@ -110,9 +107,9 @@ function initLabels(labelData) { // Add button events in the navbar function addButtonEvents(user) { $("#navbarBtnRecommend").click(function() { - document.location.href="results.html" + "?user=" + user; + document.location.href = "results.html?user=" + user; }); - // Search on pressing enter + // search on pressing enter $("#navbarInpSearch").keypress(function(event) { if (event.which == 13) { var query = encodeURIComponent($("#navbarInpSearch").val()); @@ -125,10 +122,11 @@ function addButtonEvents(user) { }); } -// Message displayed when the first annotation is made by a user + function events(user, labels) { return $.getJSON("annotations", {uri:user, type:"user"}) .then(function(annotations) { + // message displayed before the first annotation is made by a user if (annotations.length === 0) { alertMessage(labels.resultsHdrFirst, labels.resultsTxtFirst, 'success'); } @@ -138,9 +136,10 @@ function events(user, labels) { /******************************************************************************* Search, Recommend or Random results *******************************************************************************/ -function results(labels, query, userQuery, target) { - // don't do random stuff yet - var recommendBoolean = true; +function results(target, labels) { + var query = getParameterByName("query"); // get query from url when present + var userQuery = getParameterByName("user"); // get user from url when present + var recommendBoolean = true; // don't do random stuff if(query) { // results based on the user query @@ -149,7 +148,7 @@ function results(labels, query, userQuery, target) { // recommendations based on the expertise of the user // first recommended results are shown, then random results query = "expertise"; - recommend(query, labels, target); + recommend(query, target, labels); } else { // random results query = "random"; @@ -159,38 +158,125 @@ function results(labels, query, userQuery, target) { } // Get results based on the user query -function search(query, labels, target) { - var request = {query:query}; +function search(query, labels) { + $.getJSON("cluster_search_api", {query:query}) + .then(function(data) { + $(document).prop('title', labels.resultsHdrResults + query); + var clusters = processClusters(data); + drawResults(clusters); + // add control buttons to change layout + controls(labels); + }, function(data) { + statusMessage(labels.resultsTxtError, data.responseText); + }); +} - if(typeof target != 'undefined') - request.target = target; +function processClusters(data) { + if (data.clusters.length === 0) { + statusMessage(labels.resultsTxtNoResults + query); + } else { + var clusters = []; // array containing cluster objects - $.getJSON("cluster_search_api", request) - .then(function(data){ - // retrieve clusters - clusters = data.clusters; + for(var i=0; i<data.clusters.length; i++) { + var uris = []; // uris of items in cluster + var id = "cluster" + i; // id of cluster - // enrich retrieved clusters if any - if(clusters.length == 0){ - statusMessage(labels.resultsTxtNoResults, query); - } else { - // set page title and text for results header - statusMessage(labels.resultsHdrResults + query); + for(var j = 0; j < data.clusters[i].items.length; j++) + uris[j] = data.clusters[i].items[j].uri; - // enrich the retrieved clusters - enrichClusters(query, labels); + clusters[i] = new Cluster(uris, id); + } + + return clusters; + } +} + +function drawResults(clusters) { + drawRows(clusters); + + for (var i=0; i<clusters.length; i++) + drawCluster(clusters[i]); +} - // Add control buttons to change layout - controls(labels); +// Add rows for cluster items for the list view +function drawRows(clusters) { + if (display.layout === "cluster") { + for (var i=0; i<clusters.length; i++) { + $("#resultsDiv").append( + $.el.div({'class':'row', + 'id':clusters[i].id}) + ); } - }, function() { - statusMessage(labels.resultsTxtError, data.responseText); - }); + } else if (display.layout === "list") { + var totalItems = totalItemsInClusters(clusters); + var rows = getNumberOfRows(totalItems); + + for (var i=0; i<rows; i++) { + $("#resultsDiv").append( + $.el.div({'class':'row', + 'id':'thumbnailRow' + i}) + ); + } + } +} + +// Determine the total number of items from clusters +function totalItemsInClusters(clusters) { + var totalItems = 0; + + for (var i=0; i<clusters.length; i++){ + totalItems += clusters[i].items.length; + } + return totalItems; +} + +// Determine number of pages or rows based on the items to be shown +function getNumberOfRows(numberOfItems) { + var numberOfRows = 0; + var restRows = numberOfItems%display.numberDisplayedItems; + + if (restRows === 0) { + return numberOfItems/display.numberDisplayedItems; + } else { + return (numberOfItems-restRows)/display.numberDisplayedItems+1; + } +} + +function drawCluster(cluster) { + var draw = function() { + if (display.layout === "cluster") { + $("#resultsDiv #" + cluster.id).append(cluster.node); + cluster.display(display.numberDisplayedItems); + // clusters[index].display(display.numberDisplayedItems); + } else if (display.layout === "list") { + console.log("should be drawing lists"); + } + } + + if (cluster.enriched) { + draw(); + } else { + cluster.enrich() + .then(function() { + draw(); + }); + } + // clusters[index].enrich() + // .then(function() { + // console.log(clusters[0]); + // // append cluster + // if (display.layout === "cluster") { + // displayClusterItems(clusterId); + // // add enriched clusters and rows + // } else if (display.layout === "list") { + // itemsAdded = displayList(clusterId, itemsAdded); + // } + // }); } // Get results based on the expertise of the user and, afterwards, a number of // random items that have not yet been annotated -function recommend(query, labels, target) { +function recommend(query, target, labels) { $.getJSON("recommendation", {strategy:query, target:target}) .then(function(data){ @@ -276,82 +362,76 @@ function random(query, labels, target, noResults) { Result population and enrichment *******************************************************************************/ -function enrichClusters(query, labels) { - // clear results div and reset rows - //$("#resultsDiv").children().remove(); - - // enrich retrieved clusters if any - if(clusters.length != 0){ //double verification here (see previous function) - // set page title - $(document).prop('title', labels.resultsHdrResults + query); - - // if the display is the list view, the rows that are needed can be first - // created and after the enrichment is done, these can be further populated - if (display.layout === "list") { - var totItems = totalItemsInClusters(); - - // add rows for every cluster item - addRows(totItems); - } - var itemsAdded = 0; - - //for every cluster item - for(var i = 0; i < clusters.length; i++) { - if(display.layout === "cluster") { - displayClusterHeader(i); - } - var uris = []; - - // enrich every item in the cluster - for(var j = 0; j < clusters[i].items.length; j++) { - uris[j] = clusters[i].items[j].uri; - } - - //when a cluster item finished being enriched, display it - enrichCluster(uris, i) - .then(function (clusterId){ - // add enriched clusters and pagination - if (display.layout === "cluster"){ - displayClusterItems(clusterId); - // add enriched clusters and rows - } else if (display.layout === "list"){ - itemsAdded = displayList(clusterId, itemsAdded); - } - }); - } - } -} +// function enrichClusters(query, labels) { + // set page title + // $(document).prop('title', labels.resultsHdrResults + query); + + // if the display is the list view, the rows that are needed can be first + // created and after the enrichment is done, these can be further populated + // if (display.layout === "list") { + // var totItems = totalItemsInClusters(); + // + // // add rows for every cluster item + // addRows(totItems); + // } + // var itemsAdded = 0; + + //for every cluster item +// for(var i = 0; i < clusters.length; i++) { +// if(display.layout === "cluster") { +// displayClusterHeader(i); +// } +// var uris = []; +// +// // enrich every item in the cluster +// for(var j = 0; j < clusters[i].items.length; j++) { +// uris[j] = clusters[i].items[j].uri; +// } +// +// //when a cluster item finished being enriched, display it +// enrichCluster(uris, i) +// .then(function (clusterId){ +// // add enriched clusters and pagination +// if (display.layout === "cluster"){ +// displayClusterItems(clusterId); +// // add enriched clusters and rows +// } else if (display.layout === "list"){ +// itemsAdded = displayList(clusterId, itemsAdded); +// } +// }); +// } +// } // Enrichment of one cluster item -function enrichCluster(uris, clusterId){ - var json = {"uris":uris}; - - return $.ajax({type: "POST", - url: "metadata", - contentType: "application/json", - data: JSON.stringify(json)}) - .then(function(data) { - // replace cluster items array with enriched ones - clusters[clusterId].items = processEnrichment(data); - return clusterId; - }); -} +// function enrichCluster(uris, clusterId){ +// var json = {"uris":uris}; +// +// return $.ajax({type: "POST", +// url: "metadata", +// contentType: "application/json", +// data: JSON.stringify(json)}) +// .then(function(data) { +// // replace cluster items array with enriched ones +// clusters[clusterId].items = processEnrichment(data); +// return clusterId; +// }); +// } // Enrich one image element in the cluster adding an image, a link where it can // be (further) annotated and a title -function processEnrichment(data) { - var enrichedItems = []; - - for(var i=0; i<data.length; i++) { - enrichedItems[i] = {}; - var uri = data[i].uri; - enrichedItems[i].uri = uri; - enrichedItems[i].thumb = data[i].thumb; - enrichedItems[i].link = "item.html?uri=" + uri; - enrichedItems[i].title = truncate(data[i].title, 60); - } - return enrichedItems; -} +// function processEnrichment(data) { +// var enrichedItems = []; +// +// for(var i=0; i<data.length; i++) { +// enrichedItems[i] = {}; +// var uri = data[i].uri; +// enrichedItems[i].uri = uri; +// enrichedItems[i].thumb = data[i].thumb; +// enrichedItems[i].link = "item.html?uri=" + uri; +// enrichedItems[i].title = truncate(data[i].title, 60); +// } +// return enrichedItems; +// } // Enrichment of one random object function enrichRandoms(uris) { @@ -374,38 +454,19 @@ function enrichRandoms(uris) { Display of results and helper functions for the display *******************************************************************************/ -// Determine number of pages or rows based on the items to be shown -function getNoOfPagesOrRows(numberOfItems) { - var numberOfPages = 0; - var restPages = numberOfItems%display.numberDisplayedItems; - if(restPages == 0) { - numberOfPages = numberOfItems/display.numberDisplayedItems; - } else { - numberOfPages = (numberOfItems-restPages)/display.numberDisplayedItems+1; - } - return numberOfPages; -} -// Determine the total number of items from clusters -function totalItemsInClusters(){ - var totItems = 0; - for (var clusterId = 0; clusterId < clusters.length; clusterId++){ - totItems += clusters[clusterId].results; - } - return totItems; -} // Display the cluster header: the html rows that contain one cluster and // the path of the cluster -function displayClusterHeader(clusterId) { - $("#resultsDiv").append( - $.el.div({'class':'well well-sm', - 'id':'cluster' + clusterId}) - ); - addPath(clusterId, clusters[clusterId].path, localStorage.query); -} +// function displayClusterHeader(clusterId) { +// $("#resultsDiv").append( +// $.el.div({'class':'well well-sm', +// 'id':'cluster' + clusterId}) +// ); +// addPath(clusterId, clusters[clusterId].path, localStorage.query); +// } // Add the path elements for one cluster function addPath(clusterId, uris, query) { @@ -432,24 +493,24 @@ function addPath(clusterId, uris, query) { } // Display the items in one cluster with pagination (if necessary) -function displayClusterItems(clusterId){ - var noPages = getNoOfPagesOrRows(clusters[clusterId].items.length); - - $("#cluster" + clusterId).append(pagination(noPages, clusters[clusterId].items, "cluster", clusterId)); - thumbnails(clusterId); -} +// function displayClusterItems(clusterId){ +// var noPages = getNoOfPagesOrRows(clusters[clusterId].items.length); +// +// $("#cluster" + clusterId).append(pagination(noPages, clusters[clusterId].items, "cluster", clusterId)); +// thumbnails(clusterId); +// } // Add rows for cluster items for the list view -function addRows(totItems){ - var noRows = getNoOfPagesOrRows(totItems); - - for (var i = 0; i < noRows; i++){ - $("#resultsDiv").append( - $.el.div({'class':'row', - 'id':'thumbnailRow' + i}) - ); - } -} +// function addRows(totItems){ +// var noRows = getNoOfPagesOrRows(totItems); +// +// for (var i = 0; i < noRows; i++){ +// $("#resultsDiv").append( +// $.el.div({'class':'row', +// 'id':'thumbnailRow' + i}) +// ); +// } +// } // Display the items from one cluster and add them as items in a list function displayList(clusterId, itemsAdded){ @@ -581,11 +642,9 @@ function addRandomClickEvent(id, link, rowId, index) { // Add a title for the page and print a status message within the page that // gives more information on the progress of the search function statusMessage(header, text){ - //$("#resultsDiv").children().remove(); - //$(".col-md-10").empty(); $(document).prop('title', header); - $("#resultsDiv").append( + $("#resultsDiv").html( $.el.div({'class':'row'}, $.el.div({'class':'col-lg-10 col-md-offset-1'}, $.el.h3(header)),