1. Did a refactor of the javascript code for temporal graph vis.

2. Implemented the ellipsis feature for the legend row (containing the bar & label for selected entities). If the label is too long it will try to fit in the provided space & append "..." at the end.

productMods/css/visualization/entitycomparison/layout.css

@@ -91,13 +91,25 @@ position: inherit;
 #checkbox{
 	float:left;	
 }
-#label {
+
+.easy-deselect-label {
 	float: left;
 	font-size: 12px;
 	width: 160px;
 	text-align: right;
 }
 
+.easy-deselect-label a, #text {
+	text-decoration: none;
+	color: black;
+	font-family: Helvetica;
+	font-size: 1em;
+}
+
+.easy-deselect-label .entity-label {
+	color:red;
+}
+
 #searchresult {
 	margin-top: 50px;
 }
@@ -127,13 +139,6 @@ position: inherit;
 	font-weight: normal;
 }
 
-#label a,#text {
-/*	text-decoration: none; */
-	color: black;
-	font-family: Helvetica;
-	font-size: 1em;
-}
-
 #rightblock {
 	float:right;
 	margin-right:5%;

productMods/js/visualization/entitycomparison/util.js

@@ -1,4 +1,41 @@
 /* $This file is distributed under the terms of the license in /doc/license.txt$ */
+(function ($) {
+    $.fn.ellipsis = function () {
+        return this.each(function () {
+            var el = $(this);
+
+            if (el.css("overflow") == "hidden") {
+
+                var text = el.html();
+
+                var multiline = el.hasClass('multiline');
+                var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').width(multiline ? el.width() : 'auto').height(multiline ? 'auto' : el.height());
+
+                el.after(t);
+
+                function height() {
+                    return t.height() > el.height();
+                };
+
+                function width() {
+                    return t.width() > el.width();
+                };
+
+                var func = multiline ? height : width;
+
+
+                while (text.length > 0 && func()) {
+                    text = text.substr(0, text.length - 1);
+                    t.html(text + "...");
+                }
+
+                el.html(t.html());
+                t.remove();
+            }
+        });
+    };
+})(jQuery);
+
 
 /**
 
@@ -336,6 +373,7 @@ function setTickSizeOfYAxis(maxValue, flotOptions){
 		flotOptions.yaxis.tickSize = 10;
 	}
 }
+
 /**
  * Create a div that represents the rectangular bar A hidden input class that is
  * used to pass the value and a label beside the checkbox.
@@ -343,71 +381,69 @@ function setTickSizeOfYAxis(maxValue, flotOptions){
  * @param {Object}
  *            entityLabel
  */
-function createGraphic(entity, bottomDiv) {
 
-	var parentP = $('<p>');
+function createLegendRow(entity, bottomDiv) {
-	parentP.attr('id', slugify(entity.label));
 
-	var labelDiv = $('<div>')
+    var parentP = $('<p>');
-	labelDiv.attr('id', 'label');
+    parentP.attr('id', slugify(entity.label));
-	labelDiv.html('<a id="entityURL" href="' + getVIVOURL(entity) + '"></a>');
-//	labelDiv.children('a').after('<a id="vivoURL" href="' + getVIVOURL(entity) + '"></a>');
-	labelDiv.children('a').after('<a id="vivoURL" href="' + getEntityURL(entity) + '"><img src = "'+ temporalGraphSmallIcon +'"/></a>');
 
-	var checkbox = $('<input>');
+    console.log("entity label in create", entity.label);
-	checkbox.attr('type','checkbox');
-	checkbox.attr('checked', true);
-	checkbox.attr('id','checkbox');
-	checkbox.attr('class', 'easyDeselectCheckbox');
-	checkbox.attr('value', entity.label);
 
-	var hiddenLabel = $('<label>');
+    var labelDiv = $('<div>')
-	hiddenLabel.attr('type', 'hidden');
+    labelDiv.attr('class', 'easy-deselect-label');
-	hiddenLabel.attr('value', entity.label);
+    labelDiv.html('<div class="entity-label-url ellipsis"></div>');
+    labelDiv.append('<a class="temporal-vis-url" href="' + getTemporalVisURL(entity) + '"><img src = "' + temporalGraphSmallIcon + '"/></a>');
 
-	var barDiv = $('<div>');
+    var checkbox = $('<input>');
-	barDiv.attr('id', 'bar');
+    checkbox.attr('type', 'checkbox');
+    checkbox.attr('checked', true);
+    checkbox.attr('id', 'checkbox');
+    checkbox.attr('class', 'easyDeselectCheckbox');
+    checkbox.attr('value', entity.label);
 
-	var numAttributeText = $('<span>');
+    var hiddenLabel = $('<label>');
-	numAttributeText.attr('id', 'text');
+    hiddenLabel.attr('type', 'hidden');
+    hiddenLabel.attr('value', entity.label);
 
-	parentP.append(checkbox);
+    var barDiv = $('<div>');
-	parentP.append(labelDiv);
+    barDiv.attr('id', 'bar');
-	parentP.append(hiddenLabel);
-	parentP.append(barDiv);
-	parentP.append(numAttributeText);
 
-	bottomDiv.children('p.displayCounter').after(parentP);
+    var numAttributeText = $('<span>');
+    numAttributeText.attr('id', 'text');
 
-	return hiddenLabel;
+    parentP.append(checkbox);
+    parentP.append(labelDiv);
+    parentP.append(hiddenLabel);
+    parentP.append(barDiv);
+    parentP.append(numAttributeText);
 
+    bottomDiv.children('p.displayCounter').after(parentP);
+
+    renderBarAndLabel(entity, barDiv, labelDiv, numAttributeText);
 }
 
-/*function getVIVOURL(entity){
+/**
+ * generate the corresponding bar (representing area under the linegraph)
+ * and label of the entity clicked
+ */
+
+function renderBarAndLabel(entity, divBar, divLabel, spanElement) {
+
+    var sum = calcSumOfComparisonParameter(entity);
+    var normalizedWidth = getNormalizedWidth(entity, sum);
+
+    divBar.css("background-color", colorToAssign);
+    divBar.css("width", normalizedWidth);
+
+    var entityLabelForLegend = divLabel.find(".entity-label-url");
+    entityLabelForLegend.html(entity.label);
+    entityLabelForLegend.ellipsis();
+    entityLabelForLegend.wrap("<a class='entity-url' href='" + getVIVOURL(entity) + "'></a>");
+
+    spanElement.text(sum).css("font-size", "0.8em").css("color", "#595B5B");
 
-	var result  = "/vivo1/individual?uri="+entity.entityURI+"&home=1";
-	return result;
 }
 
-function getEntityURL(entity) {
-	
-	var result = '', path = '', uri = '';
-	
-	if(entity.visMode == "PERSON"){
-		path = "/vivo1/individual?";
-		uri = "uri=" + entity.entityURI;
-		var home = "&home=1";
-		result = (path + uri + home);
-	}else{
-		path = "/vivo1/visualizationfm?";
-		var visAndRenderMode = "vis=entity_comparison&render_mode=standalone&";
-		var visMode = "vis_mode=" + entity.visMode + "&";
-		uri = "uri=" + entity.entityURI;
-		result = (path + visAndRenderMode + visMode + uri);
-	}
-	return result;
-}*/
-
 function getVIVOURL(entity){
 	
 	var result  = subOrganizationVivoProfileURL + "uri="+entity.entityURI;
@@ -415,7 +451,7 @@ function getVIVOURL(entity){
 	return result;
 }
 
-function getEntityURL(entity) {
+function getTemporalVisURL(entity) {
 	
 	var result = '';
 	
@@ -423,7 +459,7 @@ function getEntityURL(entity) {
 
 		result = subOrganizationVivoProfileURL + "uri="+ entity.entityURI;
 
-	}else{
+	} else{
 		
 		result = subOrganizationTemporalGraphURL+ "&vis_mode=" + entity.visMode + "&" +  
 				 "uri=" + entity.entityURI ;
@@ -435,7 +471,7 @@ function getEntityURL(entity) {
 function getVIVOProfileURL(given_uri) {
 	
 	finalURL = $.ajax({
-		url: contextPath + "/visualization",
+		url: contextPath + "/visualizationfm",
 		data: ({vis: "utilities", vis_mode: "PROFILE_URL", uri: given_uri}),
 		dataType: "text",
 		async: false,
@@ -463,9 +499,9 @@ function slugify(textToBeSlugified) {
  * @param {Object}
  *            span
  */
-function removeGraphic(checkbox) {
+function removeLegendRow(checkbox) {
 	
-	//console.log("removeGraphic is called for "+$(checkbox).attr("value"));
+	//console.log("removeLegendRow is called for "+$(checkbox).attr("value"));
 	var pToBeRemovedIdentifier = $(checkbox).attr("value");
 	$('p#' + slugify(pToBeRemovedIdentifier)).remove();
 	
@@ -553,34 +589,6 @@ function getNextFreeColor(entity){
     colors[entity.label] = colorToAssign;
 }
 
-/**
- * generate the corresponding bar (representing area under the linegraph)
- * and label of the entity clicked
- * @param entity
- * @param divBar
- * @param divLabel
- * @return
- */
-function generateBarAndLabel(entity, divBar, divLabel,checkbox, spanElement){
-	
-	var sum = calcSumOfComparisonParameter(entity);
-	var normalizedWidth = getNormalizedWidth(entity, sum);
-	var checkboxValue = $(checkbox).attr("value");
-	
-	//append a div and modify its css
-    divBar.css("background-color", colorToAssign);
-    divBar.css("width", normalizedWidth);
-    divLabel.children("a#entityURL").html(checkboxValue + "    ").css("color", "#333");
-//    divLabel.children("a#entityURL").css("color", "#333").css("text-decoration", none);
-//    divLabel.children("a#entityURL").autoEllipsis();
-    divLabel.children("a#entityURL");
-    createVIVOProfileImage(divLabel.children("a#`"));
-    divLabel.children("a").css("font-size", "0.8em");
-    spanElement.text(sum).css("font-size", "0.8em").css("color", "#595B5B");
-    checkbox.next('a').css("font-weight", "bold");
-
-}
-
 function createVIVOProfileImage(url){
 	
 	var vivoImage = $(url);
@@ -674,7 +682,7 @@ function clearRenderedObjects(){
 			updateRowHighlighter(val);
 			removeUsedColor(labelToEntityRecord[$(val).attr("value")]);
 			removeEntityUnChecked(renderedObjects, labelToEntityRecord[$(val).attr("value")]);
-			removeGraphic(val);
+			removeLegendRow(val);
 			displayLineGraphs();
 			//console.log(index);
 		}

productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl

@@ -94,6 +94,8 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
 
 	$(document).ready(function() {
 	
+	//$(".ellipsis").ellipsis();
+	
 		var jsonString = '${jsonContent}';
 		var organizationLabel = '${organizationLabel}';
 		
@@ -150,7 +152,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
 				updateRowHighlighter(linkedCheckbox);
 				removeUsedColor(entityToBeRemoved);
 				removeEntityUnChecked(renderedObjects, entityToBeRemoved);                          
-             	removeGraphic(linkedCheckbox);
+             	removeLegendRow(linkedCheckbox);
              	removeCheckBoxFromGlobalSet(linkedCheckbox);
              	$(linkedCheckbox).attr('checked', false);
              	checkIfColorLimitIsReached();
@@ -211,20 +213,13 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
                 var checkboxValue = $(this).attr("value");
                 var entity = labelToEntityRecord[checkboxValue];
                 
-				//Dynamically generate the bar, checkbox and label.
-
-                var bottomDiv = $("#bottom");
-                var hiddenLabel = createGraphic(entity, bottomDiv);
-
-                
-                var divBar = hiddenLabel.next();
-                var divLabel = hiddenLabel.prev();
-                var spanElement = divBar.next('span');
-
                 if (checkbox.is(':checked')) {
                 	
 					getNextFreeColor(entity);
-					generateBarAndLabel(entity, divBar, divLabel,checkbox, spanElement) ; 
+					
+					//Dynamically generate the bar, checkbox and label.
+	                createLegendRow(entity, $("#bottom"));
+	                
 					renderLineGraph(renderedObjects, entity);
 					labelToCheckedEntities[checkboxValue] = checkbox;
 					                     
@@ -232,7 +227,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
 		
 					removeUsedColor(entity);
 					removeEntityUnChecked(renderedObjects, entity);                          
-		            removeGraphic(checkbox);
+		            removeLegendRow(checkbox);
 		            removeCheckBoxFromGlobalSet(checkbox);
 		                     
 		        	}
@@ -251,6 +246,25 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
 	
 </script>
 
+<style>
+
+.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+}
+
+.entity-label-url {
+	width: 125px; 
+	margin-right: 10px; 
+	display:inline-block;
+}
+
+.ellipsis.multiline {
+        white-space: normal;
+}
+
+</style>
+
 <div id="body">
 
 		<h2 style="width: 36%; padding-left:45px;"><a href="" id = "organizationMoniker"></a></h2>
@@ -324,4 +338,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
 			</div>
 		
 		</div>		
+		
+		
+		
 </div>