1. Code cleanup & refactor of temporal graph front-end.

2. Added the feature that top 3 entities are always selected by default when page is loaded.

productMods/css/visualization/entitycomparison/layout.css

@@ -110,6 +110,21 @@ position: inherit;
 	color:red;
 }
 
+.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+}
+
+.entity-label-url {
+	width: 125px; 
+	margin-right: 10px; 
+	display:inline-block;
+}
+
+.ellipsis.multiline {
+        white-space: normal;
+}
+
 #searchresult {
 	margin-top: 50px;
 }

productMods/js/visualization/entitycomparison/util.js

@@ -212,10 +212,13 @@ function calcZeroLessMinAndMax(jsonObject, year) {
 			}
 
 		}
-		if (globalMinYear > minYear)
+		if (globalMinYear > minYear) {
 			globalMinYear = minYear;
-		if (globalMaxYear < maxYear)
+		}
+			
+		if (globalMaxYear < maxYear) {
 			globalMaxYear = maxYear;
+		}
 
 	});
 
@@ -327,8 +330,10 @@ function calcSumOfComparisonParameter(jsonObject) {
 function contains(objectArray, object) {
 	var i = 0, flag = 0;
 	for (i = 0; i < objectArray.length; i++) {
-		if (objectArray[i] == object)
+		if (objectArray[i] == object) {
 			flag = i;
+		}
+			
 	}
 	return flag;
 }
@@ -387,9 +392,7 @@ function createLegendRow(entity, bottomDiv) {
     var parentP = $('<p>');
     parentP.attr('id', slugify(entity.label));
 
-    console.log("entity label in create", entity.label);
+    var labelDiv = $('<div>');
-
-    var labelDiv = $('<div>')
     labelDiv.attr('class', 'easy-deselect-label');
     labelDiv.html('<div class="entity-label-url ellipsis"></div>');
     labelDiv.append('<a class="temporal-vis-url" href="' + getTemporalVisURL(entity) + '"><img src = "' + temporalGraphSmallIcon + '"/></a>');
@@ -438,7 +441,7 @@ function renderBarAndLabel(entity, divBar, divLabel, spanElement) {
     var entityLabelForLegend = divLabel.find(".entity-label-url");
     entityLabelForLegend.html(entity.label);
     entityLabelForLegend.ellipsis();
-    entityLabelForLegend.wrap("<a class='entity-url' href='" + getVIVOURL(entity) + "'></a>");
+    entityLabelForLegend.wrap("<a class='entity-url' title='" + entity.label + "' href='" + getVIVOURL(entity) + "'></a>");
 
     spanElement.text(sum).css("font-size", "0.8em").css("color", "#595B5B");
 
@@ -589,17 +592,6 @@ function getNextFreeColor(entity){
     colors[entity.label] = colorToAssign;
 }
 
-function createVIVOProfileImage(url){
-	
-	var vivoImage = $(url);
-	
-/*	vivoImage.html("profile");
-	vivoImage.css("background-color","#727272" );
-	vivoImage.css("color", "white");
-*/	
-	vivoImage.css("padding", "2px");
-}
-
 function getNormalizedWidth(entity, sum){
 	
 	 var maxValueOfComparisonParameter = calcMaxOfComparisonParameter(labelToEntityRecord);
@@ -775,13 +767,11 @@ function prepareTableForDataTablePagination(jsonData){
 		var labelTD =  $('<td>');
 		labelTD.css("width", "100px");
 		labelTD.html(index);
-//		labelTD.autoEllipsis();
 		
 		var publicationCountTD =  $('<td>');
 		publicationCountTD.html(calcSumOfComparisonParameter(val));
 		
 		var entityTypeTD =  $('<td>');
-		//entityTypeTD.html(val.organizationType.join(", "));
 		entityTypeTD.html(entityTypesWithoutStopWords);
 		
 		row.append(checkboxTD);
@@ -793,8 +783,6 @@ function prepareTableForDataTablePagination(jsonData){
 		checkboxCount++;
 	});
 	
-//	console.log('creating '+ checkboxCount + ' checkboxes inside the data table');
-	
 	table.append(tbody);
 	tableDiv.append(table);
 	
@@ -811,17 +799,6 @@ function prepareTableForDataTablePagination(jsonData){
 	    	    //	"aLengthMenu" : [5,10,15],
 	    "fnDrawCallback": function () {
 	    	
-	    	/*
-	    	 * To highlight the rows belonging to selected entities. 
-	    	 * */
-	        $('input.if_clicked_on_school').bind('click', function () {
-	        	if ($(this).is(':checked')) {
-	        		$(this).closest("tr").addClass('datatablerowhighlight')
-	        	} else {
-	        		$(this).closest("tr").removeClass('datatablerowhighlight')
-	        	}
-	        });
-	        
 	        /* We check whether max number of allowed comparisions (currently 10) is reached
 	         * here as well becasue the only function that is guaranteed to be called during 
 	         * page navigation is this. No need to bind it to the nav-buttons becuase 1. It is over-ridden
@@ -834,6 +811,7 @@ function prepareTableForDataTablePagination(jsonData){
 //		"bAutoWidth": false
 	});
 	
+	
 	var searchInputBox = $("." + searchBarParentContainerDIVClass).find("input[type=text]");
 	
 	searchInputBox.after("<span id='reset-search' title='Clear Search query'>X</span>");
@@ -920,7 +898,6 @@ function disableUncheckedEntities(){
 	 * Note that the usual Error message will still display if the user tries to click on the white box 
 	 * (or a disabled checkbox in case of non-IE browsers).   
 	 * */
-	
 	if ($("#datatable").data("isEntitySelectionAllowed")) {
 		if ($.browser.msie) {
 			createNotification("warning-notification", { title:'Information', 

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

@@ -94,8 +94,6 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
 
 	$(document).ready(function() {
 	
-	//$(".ellipsis").ellipsis();
-	
 		var jsonString = '${jsonContent}';
 		var organizationLabel = '${organizationLabel}';
 		
@@ -164,107 +162,134 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
 		//parse the json object and pass it to loadData
         jsonObject.prepare(jQuery.parseJSON(jsonString));
         
+        function performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox) {
+		    
+		    removeUsedColor(entity);
+            removeEntityUnChecked(renderedObjects, entity);
+            removeLegendRow(checkbox);
+            removeCheckBoxFromGlobalSet(checkbox);
+            
+            checkbox.closest("tr").removeClass('datatablerowhighlight');
+        
+        }
+        
+        function performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox) {
+		        	
+    		getNextFreeColor(entity);
+
+            //Generate the bar, checkbox and label for the legend.
+            createLegendRow(entity, $("#bottom"));
+
+            renderLineGraph(renderedObjects, entity);
+            labelToCheckedEntities[checkboxValue] = checkbox;
+            
+        	/*
+			 * To highlight the rows belonging to selected entities. 
+			 * */
+            checkbox.closest("tr").addClass('datatablerowhighlight');
+		        	
+    	}
+    	
+    	function performEntityCheckboxClickedRedrawActions() {
+    	
+	        setTickSizeOfAxes();
+	        checkIfColorLimitIsReached();
+	        displayLineGraphs();
+	        updateCounter();
+    	
+    	}
+    	
         /* 
          *  function to populate the labelToEntityRecord object with the
          *  values from the json file and
          *  dynamically generate checkboxes
          */
-        function loadData(jsonData){
+		function loadData(jsonData) {
 		
-           // var yearRange;
+		    // var yearRange;
+		    $.each(jsonData, function (index, val) {
+		        setOfLabels.push(val.label);
+		        labelToEntityRecord[val.label] = val;
+		    });
 		
-            $.each(jsonData, function(index, val){
+		    getEntityVisMode(jsonData);
-                setOfLabels.push(val.label);
+		    prepareTableForDataTablePagination(jsonData);
-                labelToEntityRecord[val.label] = val;
+		    setEntityLevel();
-            });
 		
-			getEntityVisMode(jsonData);
+					/*
-			prepareTableForDataTablePagination(jsonData);
+		           		calcMinandMaxYears(labelToEntityRecord, year);
-			setEntityLevel();
+						yearRange = (year.max - year.min);
-           // calcMinandMaxYears(labelToEntityRecord, year);
-			//yearRange = (year.max - year.min);
 		
-           // setLineWidthAndTickSize(yearRange, FlotOptions);     
+		           		setLineWidthAndTickSize(yearRange, FlotOptions);     
-			//setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions);
+						setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions);
+		            */
 		
+		    $(".disabled-checkbox-event-receiver").live("click", function () {
 		
-            $(".disabled-checkbox-event-receiver").live("click", function() {
+		        if ($(this).next().is(':disabled')) {
 		
-            	if ($(this).next().is(':disabled')) {
+		            createNotification("error-notification", {
+		                title: 'Error',
+		                text: 'A Maximum 10 entities can be compared. Please remove some & try again.'
+		            }, {
+		                custom: true,
+		                expires: 3500
+		            });
 		
-            	createNotification("error-notification", { title:'Error', 
+		        }
-					text:'A Maximum 10 entities can be compared. Please remove some & try again.' },{
-					custom: true,
-					expires: 3500
-					});	
-		
-            	}
-            	
-            
-            });
-            
-            /*
-             * When the elements in the paginated div
-             * are clicked this event handler is called
-             */
-            $("input.if_clicked_on_school").live('click', function(){
-            
-                var checkbox = $(this);
-                var checkboxValue = $(this).attr("value");
-                var entity = labelToEntityRecord[checkboxValue];
-                
-                if (checkbox.is(':checked')) {
-                	
-					getNextFreeColor(entity);
-					
-					//Dynamically generate the bar, checkbox and label.
-	                createLegendRow(entity, $("#bottom"));
-	                
-					renderLineGraph(renderedObjects, entity);
-					labelToCheckedEntities[checkboxValue] = checkbox;
-					                     
-		        } else if (!checkbox.is(':checked')) {
-		
-					removeUsedColor(entity);
-					removeEntityUnChecked(renderedObjects, entity);                          
-		            removeLegendRow(checkbox);
-		            removeCheckBoxFromGlobalSet(checkbox);
-		                     
-		        	}
-				//console.log('Number of checked entities: ' + getSize(labelToCheckedEntities));
-				//disableUncheckedEntities();
-				setTickSizeOfAxes();
-				checkIfColorLimitIsReached();
-		    	//populateMapOfCheckedEntities();                    
-		        displayLineGraphs();
-				updateCounter(); 
 		
 		    });
-        }
+		    
+					/*
+		             * When the elements in the paginated div
+		             * are clicked this event handler is called
+		             */
+		    $("input.if_clicked_on_school").live('click', function () {
+		
+		        var checkbox = $(this);
+		        var checkboxValue = $(this).attr("value");
+		        var entity = labelToEntityRecord[checkboxValue];
+		        
+		        if (checkbox.is(':checked')) {
+		        
+		        	performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox);
+		        
+		        } else {
+				
+					performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox);        
+		
+		        }
+		        
+		        performEntityCheckboxClickedRedrawActions();
+		
+		    });
+		}
+
+		/*
+		This will make sure that top 3 entites are selected by default when the page loads.
+		
+		*/		
+		$.each($("input.if_clicked_on_school"), function(index, checkbox) {
+		    	
+			    	if (index > 2) {
+			    		return false;
+			    	}
+		    	
+		    		$(this).attr('checked', true);
+			    	
+			        var checkboxValue = $(this).attr("value");
+			        var entity = labelToEntityRecord[checkboxValue];
+			        
+			        performEntityCheckboxSelectedActions(entity, checkboxValue, $(this));
+			        
+			        performEntityCheckboxClickedRedrawActions();
+			        
+			    });
 
 	});
 	
 </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>
@@ -336,9 +361,5 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
 			id="total">10</span> <span id="entityleveltext"> schools</span> to compare.</p>
 		
 			</div>
-		
 		</div>		
-		
-		
-		
 </div>