accurator/commit

Merged cluster search into results and created path object.

diff --git a/web/html/results.html b/web/html/results.html
index ad3a07a..3101abe 100644
--- a/web/html/results.html
+++ b/web/html/results.html
@@ -85,6 +85,7 @@
 	<script type="text/javascript" src="js/search.js"></script>
 	<script type="text/javascript" src="js/pagination.js"></script>
 	<script type="text/javascript" src="js/thumbnail.js"></script>
+	<script type="text/javascript" src="js/path.js"></script>
 	<script type="text/javascript" src="js/pengines.js"></script>
 	<script type="text/javascript" src="js/accurator_utilities.js"></script>
 	<script type="text/javascript" src="js/accurator_results.js"></script>
diff --git a/web/js/accurator_results.js b/web/js/accurator_results.js
index a8de3bc..74240e6 100644
--- a/web/js/accurator_results.js
+++ b/web/js/accurator_results.js
@@ -5,7 +5,7 @@ pagination.js and thumbnail.js
 *******************************************************************************/
 var query = "", locale, experiment, ui, userName, realName;
 var resultsTxtRecommendationsFor, resultsHdrFirst, resultsTxtFirst;
-var jsonResults, initialClusters = [], enrichedClusters = [], clusters = [];
+var clusters = [];
 
 // Display options deciding how to results get rendered
 display = {
@@ -121,8 +121,8 @@ function search(query, target) {
 	$.getJSON("cluster_search_api", request)
 	.done(function(data){
 		// Make available for future changes of view
-		jsonResults = data;
-		populateResults();
+		clusters = data.clusters;
+		populateResults(query);
 		// Change title of page
 		$(document).prop('title', resultsHdrResults + query);
 	})
@@ -131,12 +131,12 @@ function search(query, target) {
 	});
 }
 
-function populateResults() {
+function populateResults(query) {
 	// Clear results div
 	$("#resultsDiv").children().remove();
 	// Results layout is either cluster or list
 	if(display.layout === "cluster") {
-		populateClusters();
+		populateClusters(query);
 	} else if(display.layout === "list") {
 		//TODO: flatten results clusters
 		populateList();
@@ -145,59 +145,6 @@ function populateResults() {
 	controls();
 }
 
-/*******************************************************************************
-Cluster view
-Show the results in clusters
-*******************************************************************************/
-function populateClusters() {
-	console.log(jsonResults);
-	jsonToClusters(jsonResults);
-	createResultClusters();
-}
-
-function jsonToClusters(data) {
-	console.log(data);
-	// Convert json to initialClusters array
-	var sourceClusters = data.clusters;
-	var numberOfClusters = sourceClusters.length;
-
-	for (var i=0;i<numberOfClusters;i++) {
-		// Get path uris and query for the labels
-		var path = sourceClusters[i].path;
-		var numberOfItems = sourceClusters[i].results;
-		var items = [];
-
-		for (var j=0;j<numberOfItems;j++) {
-			var uri = sourceClusters[i].items[j].uri;
-			items[j] = new item(uri);
-		}
-		initialClusters[i] = new cluster(path, items);
-	}
-}
-
-function createResultClusters() {
-	if(initialClusters.length == 0){
-		// console.log('No results found for ', query);
-		$("#resultsDiv").append(noResultsHtml(query));
-	} else {
-		for(var i=0;i<initialClusters.length;i++) {
-			$("#resultsDiv").append(clusterContainer(i));
-			// Append path to cluster container
-			addPath(i);
-			// Add enriched clusters and pagination
-			addItems(i);
-		}
-	}
-}
-
-/*******************************************************************************
-List view
-Show the results in one big list
-*******************************************************************************/
-function populateList() {
-	console.log(jsonResults);
-}
-
 function recommendItems(target) {
 	console.log("Recommending items");
 
@@ -219,6 +166,30 @@ function recommendItems(target) {
 	});
 }
 
+function recommendExpertiseList(target) {
+	console.log("Recommending list of items");
+
+	$.getJSON("recommendation", {strategy:'expertise',
+								 number:12,
+								 target:target,
+							 	 output_format:'list'})
+	.done(function(data){
+		var numberOfItems = data.length;
+		var items = [];
+
+		for (var i=0; i<numberOfItems; i++) {
+			var uri = data[i];
+			items[i] = new item(uri);
+		}
+		addItemList(items);
+	})
+	.fail(function(data, textStatus){
+		$("#resultsDiv").children().remove();
+		$("#resultsDiv").append(errorHtml(data, textStatus));
+		$(document).prop('title', 'Error on ' + query);
+	});
+}
+
 function randomItems(target) {
 	console.log("Providing random items");
 
@@ -261,88 +232,105 @@ function populateRandom(target, clusterIndex) {
 	});
 }
 
-function recommendExpertiseList(target) {
-	console.log("Recommending list of items");
+/*******************************************************************************
+Cluster view
+Show the results in clusters
+*******************************************************************************/
+function populateClusters(query) {
+	//TODO: localize variables
+	var resultsTxtNoResults = "No results found for ";
 
-	$.getJSON("recommendation", {strategy:'expertise',
-								 number:12,
-								 target:target,
-							 	 output_format:'list'})
-	.done(function(data){
-		var numberOfItems = data.length;
-		var items = [];
+	if(clusters.length == 0){
+		statusMessage(resultsTxtNoResults, query);
+	} else {
+		for(var i=0; i<clusters.length; i++) {
+			var cluster = clusters[i];
 
-		for (var i=0; i<numberOfItems; i++) {
-			var uri = data[i];
-			items[i] = new item(uri);
-		}
-		addItemList(items);
-	})
-	.fail(function(data, textStatus){
-		$("#resultsDiv").children().remove();
-		$("#resultsDiv").append(errorHtml(data, textStatus));
-		$(document).prop('title', 'Error on ' + query);
-	});
-}
+			$("#resultsDiv").append(
+				$.el.div({'class':'well well-sm',
+						  'id':'cluster' + i})
+			);
 
-function controls() {
-	if(display.showControls) {
-		$("#resultsDiv").prepend(
-			$.el.div({'class':'row'},
-				$.el.div({'class':'col-md-12 resultsDivControls'}))
-		);
-		resultLayoutButtons();
+			addPath(i, cluster.path, query);
+			// Add enriched clusters and pagination
+			addItems(i);
+		}
 	}
 }
 
-function resultLayoutButtons() {
-	$(".resultsDivControls").append(
-		$.el.div({'class':'btn-group'},
-			$.el.button({'class':'btn btn-default',
-						 'id':'resultsBtnLayout'}))
-	);
-	setLayoutButton();
-	$("#resultsBtnLayout").click(function() {
-		display.layout = (display.layout === "list") ? "cluster" : "list";
-		setLayoutButton();
+function addPath(clusterId, uris, query) {
+	// Get labels from server
+	var json = {"uris":uris, "type":"label"};
+	$.ajax({type: "POST",
+			url: "metadata",
+			contentType: "application/json",
+			data: JSON.stringify(json),
+			success: function(labels) {
+				var pathElements = [];
+
+			    for(var i=0; i<uris.length; i++)
+			        pathElements[i] = {uri:uris[i], label:truncate(labels[i], 50)};
+
+			    pathElements.reverse();
+				var path = new Path(uris, labels, pathElements);
+				$("#cluster" + clusterId).prepend(path.htmlSimple);
+				path.unfoldEvent("#cluster" + clusterId, query);
+		   }
 	});
 }
 
-function setLayoutButton() {
-	//TODO: localize variables
-	var resultsLblCluster = "Cluster view";
-	var resultsLblList = "List view";
+function addItems(clusterId) {
+	var items = clusters[clusterId].items;
+	var uris = [];
 
-	if(display.layout === "list") {
-		$("#resultsBtnLayout").html(
-			$.el.span(resultsLblList + ' ',
-			$.el.span({'class':'glyphicon glyphicon-th-large'}))
-		);
-	} else {
-		$("#resultsBtnLayout").html(
-			$.el.span(resultsLblCluster + ' ',
-			$.el.span({'class':'glyphicon glyphicon-th-large'}))
-		);
+	for(var i=0; i<items.length; i++)
+		uris[i] = items[i].uri;
+
+	var json = {"uris":uris};
+	$.ajax({type: "POST",
+			url: "metadata",
+			contentType: "application/json",
+			data: JSON.stringify(json),
+			success: function(data) {
+				processEnrichment(data, clusters[clusterId].items);
+				var pages = determineNumberOfPages(clusterId);
+				$("#cluster"+clusterId).append(pagination(pages, clusterId));
+				thumbnails(clusterId);
+		   }
+	});
+}
+
+function processEnrichment(data, items) {
+	for(var i=0; i<data.length; i++) {
+		var uri = data[i].uri;
+		items[i].thumb = data[i].thumb;
+		items[i].link = "annotate.html?uri=" + uri;
+		items[i].title = truncate(data[i].title, 60);
 	}
 }
 
-function statusMessage(header, text){
-	$("#resultsDiv").children().remove();
-	$(document).prop('title', header);
+function determineNumberOfPages (clusterId) {
+	var numberOfPages = 0;
+	var numberOfItems = clusters[clusterId].items.length;
+	var restPages = numberOfItems%display.numberDisplayedItems;
 
-	$("#resultsDiv").append(
-		$.el.div({'class':'row'},
-			$.el.div({'class':'col-lg-10 col-md-offset-1'},
-				$.el.h3(header)),
-			$.el.div({'class':'row'},
-				$.el.div({'class':'col-md-10 col-md-offset-1'},
-					text)))
-	);
+	//Determine number of items in pagination
+	if(restPages == 0) {
+		numberOfPages = numberOfItems/display.numberDisplayedItems;
+	} else {
+		numberOfPages = (numberOfItems-restPages)/display.numberDisplayedItems+1;
+	}
+	return numberOfPages;
 }
 
 /*******************************************************************************
-Result List
+List view
+Show the results in one big list
 *******************************************************************************/
+function populateList() {
+	console.log(jsonResults);
+}
+
 function addItemList(items) {
 	var itemUris = [];
 	for(var i=0;i<items.length;i++)
@@ -422,3 +410,62 @@ function addListClickEvent(id, link, rowId, index) {
 		document.location.href=link;
 	});
 }
+
+/*******************************************************************************
+Controls
+Code for adding buttons controlling the layout
+*******************************************************************************/
+function controls() {
+	if(display.showControls) {
+		$("#resultsDiv").prepend(
+			$.el.div({'class':'row'},
+				$.el.div({'class':'col-md-12 resultsDivControls'}))
+		);
+		resultLayoutButtons();
+	}
+}
+
+function resultLayoutButtons() {
+	$(".resultsDivControls").append(
+		$.el.div({'class':'btn-group'},
+			$.el.button({'class':'btn btn-default',
+						 'id':'resultsBtnLayout'}))
+	);
+	setLayoutButton();
+	$("#resultsBtnLayout").click(function() {
+		display.layout = (display.layout === "list") ? "cluster" : "list";
+		setLayoutButton();
+	});
+}
+
+function setLayoutButton() {
+	//TODO: localize variables
+	var resultsLblCluster = "Cluster view";
+	var resultsLblList = "List view";
+
+	if(display.layout === "list") {
+		$("#resultsBtnLayout").html(
+			$.el.span(resultsLblList + ' ',
+			$.el.span({'class':'glyphicon glyphicon-th-large'}))
+		);
+	} else {
+		$("#resultsBtnLayout").html(
+			$.el.span(resultsLblCluster + ' ',
+			$.el.span({'class':'glyphicon glyphicon-th-large'}))
+		);
+	}
+}
+
+function statusMessage(header, text){
+	$("#resultsDiv").children().remove();
+	$(document).prop('title', header);
+
+	$("#resultsDiv").append(
+		$.el.div({'class':'row'},
+			$.el.div({'class':'col-lg-10 col-md-offset-1'},
+				$.el.h3(header)),
+			$.el.div({'class':'row'},
+				$.el.div({'class':'col-md-10 col-md-offset-1'},
+					text)))
+	);
+}
diff --git a/web/js/accurator_utilities.js b/web/js/accurator_utilities.js
index 5f70df1..e67bff5 100644
--- a/web/js/accurator_utilities.js
+++ b/web/js/accurator_utilities.js
@@ -373,6 +373,26 @@ function setLinkLogo(page) {
 		$(".navbar-brand").attr('href', "intro.html");
 }
 
+function truncate(string, limit) {
+	var chars;
+	var i;
+
+	chars = string.split('');
+	if (chars.length > limit) {
+		for (var i=chars.length - 1; i>-1; --i) {
+			if (i>limit) {
+				chars.length = i;
+			}
+			else if (' ' === chars[i]) {
+				chars.length = i;
+				break;
+			}
+		}
+		chars.push('...');
+	}
+	return chars.join('');
+}
+
 /*******************************************************************************
 User Login
 User management code.
diff --git a/web/js/path.js b/web/js/path.js
new file mode 100644
index 0000000..7bcd2c8
--- /dev/null
+++ b/web/js/path.js
@@ -0,0 +1,50 @@
+function Path(uris, labels, elements) {
+    this.uris = uris;
+    this.labels = labels;
+    this.elements = elements;
+
+    this.htmlSimple = function() {
+        return $.el.div({'class':'row path'},
+                    $.el.div({'class':'col-md-12'},
+                        $.el.h4(
+                            $.el.span({'class':'path-label path-property'},
+                                      elements[elements.length-2].label),
+                            $.el.span({'class':'path-label path-resource'},
+                                      elements[elements.length-3].label)
+        )));
+    }
+
+    this.unfoldEvent = function(id, query) {
+        var pathHtml = $.el.h4();
+
+        for(var i=0; i<elements.length; i++) {
+            // Label colouring
+            if(i==0){
+				pathHtml.appendChild(
+					$.el.span({'class':'path-label path-literal'},
+					          query));
+			} else if(i%2==0){
+                pathHtml.appendChild(
+                    $.el.span({'class':'path-label path-resource'},
+                              elements[i].label));
+            } else {
+                pathHtml.appendChild(
+                    $.el.span({'class':'path-label path-property'},
+                              elements[i].label));
+            }
+            // Add arrow if not end of path
+            if(!(elements.length == i+1)){
+                pathHtml.appendChild(
+                    $.el.span({'class':'glyphicon glyphicon-arrow-right'}));
+            }
+        }
+        // Add event
+        $(id + " .path-label").click(function() {
+            $(id + " .path").html(
+                $.el.div({'class':'col-md-12'},
+                    pathHtml)
+            );
+        });
+    }
+
+}
diff --git a/web/js/search.js b/web/js/search.js
index 94f1c63..aa2d443 100644
--- a/web/js/search.js
+++ b/web/js/search.js
@@ -110,11 +110,6 @@ function noFilterResultsHtml() {
 // 	}
 // }
 
-function clusterContainer(clusterId) {
-	return $.el.div({'class':'well well-sm',
-					'id':'cluster' + clusterId});
-}
-
 function addPath(clusterId) {
 	// Generate HTML cluster path
 	var pathUris = initialClusters[clusterId].path;
@@ -142,125 +137,119 @@ function addPath(clusterId) {
 	});
 }
 
-function pathHtmlElements(path) {
-	var simplePathElements = $.el.h4();
-
-	//Simplified
-	if(path.length==0){
-		// Only show query in case there is no path
-		simplePathElements.appendChild(
-			$.el.span({'class':'path-label path-literal'},
-					  query));
-	} else {
-		simplePathElements.appendChild(
-			$.el.span({'class':'path-label path-property'},
-					  path[path.length-2].label));
-
-		simplePathElements.appendChild(
-			$.el.span({'class':'path-label path-resource'},
-					  path[path.length-3].label));
-	}
-	return $.el.div({'class':'row path'},
-					$.el.div({'class':'col-md-12'},
-							 simplePathElements));
-}
-
-function unfoldPathEvent(id, path) {
-	var pathElements = $.el.h4();
-
-	if(path.length==0){
-		// Only show query in case there is no path
-		pathElements.appendChild(
-			$.el.span({'class':'path-label path-literal'},
-					  query));
-	} else {
-		for(var i=0; i<path.length; i++) {
-			// Label colouring
-			if(i==0){
-				pathElements.appendChild(
-					$.el.span({'class':'path-label path-literal'},
-							query));
-			} else if(i%2==0){
-				pathElements.appendChild(
-					$.el.span({'class':'path-label path-resource'},
-						path[i].label));
-			} else {
-				pathElements.appendChild(
-					$.el.span({'class':'path-label path-property'},
-						path[i].label));
-			}
-			// Add arrow if not end of path
-			if(!(path.length==i+1)){
-				pathElements.appendChild(
-					$.el.span({'class':'glyphicon glyphicon-arrow-right'}));
-			}
-		}
-	};
-
-	$(id + " .path-label").click(function() {
-		$(id + " .path").html(
-			$.el.div({'class':'col-md-12'},
-					pathElements)
-		);
-	});
-}
-
-function addItems(clusterId) {
-	var items = initialClusters[clusterId].items;
-	var uris = [];
-	var enrichedItems = [];
-
-	for(var i=0; i<items.length; i++)
-		uris[i] = items[i].uri;
-
-	var json = {"uris":uris};
-	$.ajax({type: "POST",
-			url: "metadata",
-			contentType: "application/json",
-			data: JSON.stringify(json),
-			success: function(data) {
-				processEnrichment(data, clusterId);
-				// Clone cluster to enable filtering without losing information.
-				clusters[clusterId] = clone(enrichedClusters[clusterId]);
-				filterCluster(clusters[clusterId]);
-				if(clusters[clusterId].items.length==0) {
-					$("#cluster"+clusterId).append(noFilterResultsHtml());
-				} else {
-					var pages = determineNumberOfPages(clusterId);
-					$("#cluster"+clusterId).append(pagination(pages, clusterId));
-					thumbnails(clusterId);
-				}
-		   }
-	});
-}
-
-function processEnrichment(data, clusterId) {
-	var items = [];
-
-	for(var i=0; i<data.length; i++) {
-		var uri = data[i].uri;
-		var thumb = data[i].thumb;
-		var link = "annotate.html?uri=" + uri;
-		var title = truncate(data[i].title, 60);
-		items[i] = new item(uri, thumb, link, title);
-	}
-	// Add items to enrichedClusters for future reference
-	enrichedClusters[clusterId].items = items;
-}
-
-function determineNumberOfPages (clusterId) {
-	var numberOfPages = 0;
-	var numberOfItems = clusters[clusterId].items.length;
-	var restPages = numberOfItems%display.numberDisplayedItems;
+// function pathHtmlElements(path) {
+// 	var simplePathElements = $.el.h4();
+//
+// 	//Simplified
+// 	if(path.length==0){
+// 		// Only show query in case there is no path
+// 		simplePathElements.appendChild(
+// 			$.el.span({'class':'path-label path-literal'},
+// 					  query));
+// 	} else {
+// 		simplePathElements.appendChild(
+// 			$.el.span({'class':'path-label path-property'},
+// 					  path[path.length-2].label));
+//
+// 		simplePathElements.appendChild(
+// 			$.el.span({'class':'path-label path-resource'},
+// 					  path[path.length-3].label));
+// 	}
+// 	return $.el.div({'class':'row path'},
+// 					$.el.div({'class':'col-md-12'},
+// 							 simplePathElements));
+// }
+//
+// function unfoldPathEvent(id, path) {
+// 	var pathElements = $.el.h4();
+//
+// 	if(path.length==0){
+// 		// Only show query in case there is no path
+// 		pathElements.appendChild(
+// 			$.el.span({'class':'path-label path-literal'},
+// 					  query));
+// 	} else {
+// 		for(var i=0; i<path.length; i++) {
+// 			// Label colouring
+// 			if(i==0){
+// 				pathElements.appendChild(
+// 					$.el.span({'class':'path-label path-literal'},
+// 							query));
+// 			} else if(i%2==0){
+// 				pathElements.appendChild(
+// 					$.el.span({'class':'path-label path-resource'},
+// 						path[i].label));
+// 			} else {
+// 				pathElements.appendChild(
+// 					$.el.span({'class':'path-label path-property'},
+// 						path[i].label));
+// 			}
+// 			// Add arrow if not end of path
+// 			if(!(path.length==i+1)){
+// 				pathElements.appendChild(
+// 					$.el.span({'class':'glyphicon glyphicon-arrow-right'}));
+// 			}
+// 		}
+// 	};
+//
+//
+// }
 
-	//Determine number of items in pagination
-	if(restPages == 0) {
-		numberOfPages = numberOfItems/display.numberDisplayedItems;
-	} else {
-		numberOfPages = (numberOfItems-restPages)/display.numberDisplayedItems+1;
-	}
-	return numberOfPages;
-}
+// function addItems(clusterId) {
+// 	var items = initialClusters[clusterId].items;
+// 	var uris = [];
+// 	var enrichedItems = [];
+//
+// 	for(var i=0; i<items.length; i++)
+// 		uris[i] = items[i].uri;
+//
+// 	var json = {"uris":uris};
+// 	$.ajax({type: "POST",
+// 			url: "metadata",
+// 			contentType: "application/json",
+// 			data: JSON.stringify(json),
+// 			success: function(data) {
+// 				processEnrichment(data, clusterId);
+// 				// Clone cluster to enable filtering without losing information.
+// 				clusters[clusterId] = clone(enrichedClusters[clusterId]);
+// 				filterCluster(clusters[clusterId]);
+// 				if(clusters[clusterId].items.length==0) {
+// 					$("#cluster"+clusterId).append(noFilterResultsHtml());
+// 				} else {
+// 					var pages = determineNumberOfPages(clusterId);
+// 					$("#cluster"+clusterId).append(pagination(pages, clusterId));
+// 					thumbnails(clusterId);
+// 				}
+// 		   }
+// 	});
+// }
+//
+// function processEnrichment(data, clusterId) {
+// 	var items = [];
+//
+// 	for(var i=0; i<data.length; i++) {
+// 		var uri = data[i].uri;
+// 		var thumb = data[i].thumb;
+// 		var link = "annotate.html?uri=" + uri;
+// 		var title = truncate(data[i].title, 60);
+// 		items[i] = new item(uri, thumb, link, title);
+// 	}
+// 	// Add items to enrichedClusters for future reference
+// 	enrichedClusters[clusterId].items = items;
+// }
+// function determineNumberOfPages (clusterId) {
+// 	var numberOfPages = 0;
+// 	var numberOfItems = clusters[clusterId].items.length;
+// 	var restPages = numberOfItems%display.numberDisplayedItems;
+//
+// 	//Determine number of items in pagination
+// 	if(restPages == 0) {
+// 		numberOfPages = numberOfItems/display.numberDisplayedItems;
+// 	} else {
+// 		numberOfPages = (numberOfItems-restPages)/display.numberDisplayedItems+1;
+// 	}
+// 	return numberOfPages;
+// }
 
 // function filterAndRankButtons() {
 // 	return $.el.div({'class':'row'},
@@ -436,25 +425,25 @@ function clone(obj) {
     throw new Error("Unable to copy obj! Its type isn't supported.");
 }
 
-function truncate (string, limit) {
-	var chars;
-	var i;
-
-	chars = string.split('');
-	if (chars.length > limit) {
-		for (var i=chars.length - 1; i>-1; --i) {
-			if (i>limit) {
-				chars.length = i;
-			}
-			else if (' ' === chars[i]) {
-				chars.length = i;
-				break;
-			}
-		}
-		chars.push('...');
-	}
-	return chars.join('');
-}
+// function truncate (string, limit) {
+// 	var chars;
+// 	var i;
+//
+// 	chars = string.split('');
+// 	if (chars.length > limit) {
+// 		for (var i=chars.length - 1; i>-1; --i) {
+// 			if (i>limit) {
+// 				chars.length = i;
+// 			}
+// 			else if (' ' === chars[i]) {
+// 				chars.length = i;
+// 				break;
+// 			}
+// 		}
+// 		chars.push('...');
+// 	}
+// 	return chars.join('');
+// }
 
 // function setGlobalQuery(keyword) {
 // 	query = keyword;