cluster_search_ui/commit

Simplified path, on click full path is shown.

diff --git a/web/css/search.css b/web/css/search.css
index ee50601..ec84639 100644
--- a/web/css/search.css
+++ b/web/css/search.css
@@ -34,6 +34,7 @@ body {
 	white-space: nowrap;
 	vertical-align: baseline;
 	border-radius: 0.25em 0.25em 0.25em 0.25em;
+	cursor: pointer;
 }
 
 .path-label:hover, .path-label:visited:hover {
@@ -46,8 +47,13 @@ body {
  	text-decoration: none;
 }
 
+.path-resource {
+	background-color: rgb(20, 65, 115);
+	padding: 0.3em 0.6em 0.4em;
+	font-size: 80%;
+}
+
 .path-literal {background-color: rgb(100, 100, 100);}
-.path-resource {background-color: rgb(20, 65, 115);}
 .path-property {background-color: rgb(66, 139, 202);}
 /* .path-resource a:link, 
 .path-resource a:visited, 
diff --git a/web/js/search.js b/web/js/search.js
index a8b2739..6c13e7b 100644
--- a/web/js/search.js
+++ b/web/js/search.js
@@ -138,12 +138,31 @@ function addPath(clusterId) {
 				
 					// Add path to enrichedClusters for future reference
 					enrichedClusters[clusterId].path = path;
-					$("#cluster"+clusterId).prepend(pathHtmlElements(path))}
-				});
+					$("#cluster"+clusterId).prepend(pathHtmlElements(path));
+					unfoldPathEvent(clusterId, path);
+				}
+	});
 }
 
 function pathHtmlElements(reversedPath) {
 	var path = reversedPath.reverse();
+	var simplePathElements = $.el.h4();
+	
+	//Simplified
+	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(clusterId, path) {
 	var pathElements = $.el.h4();
 	
 	for(var i=0; i<path.length; i++) {
@@ -167,10 +186,13 @@ function pathHtmlElements(reversedPath) {
 				$.el.span({'class':'glyphicon glyphicon-arrow-right'}));
 		}
 	};
-	
-	return $.el.div({'class':'row'},
-					$.el.div({'class':'col-md-12'},
-							 pathElements));
+
+	$("#cluster" + clusterId + " .path-label").click(function() {
+		$("#cluster" + clusterId + " .path").html(
+			$.el.div({'class':'col-md-12'},
+					pathElements)
+		);
+	});
 }
 
 function addItems(clusterId) {