litvinovg/vivo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
2. Added the feature that top 3 entities are always selected by default when page is loaded.
This commit is contained in:
cdtank 2011-01-11 22:42:56 +00:00
parent 02aa704916
commit ee81f45917
3 changed files with 140 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
productMods/css/visualization/entitycomparison/layout.css
View file

@ -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;
}

45
productMods/js/visualization/entitycomparison/util.js
View file

@ -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,9 +330,11 @@ 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',

133
productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl
View file

@ -94,8 +94,6 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
$(document).ready(function() {
//$(".ellipsis").ellipsis();
var jsonString = '${jsonContent}';
var organizationLabel = '${organizationLabel}';
@ -164,16 +162,52 @@ 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;
$.each(jsonData, function(index, val){
$.each(jsonData, function (index, val) {
setOfLabels.push(val.label);
labelToEntityRecord[val.label] = val;
});
@ -181,33 +215,36 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
getEntityVisMode(jsonData);
prepareTableForDataTablePagination(jsonData);
setEntityLevel();
// calcMinandMaxYears(labelToEntityRecord, year);
//yearRange = (year.max - year.min);
// setLineWidthAndTickSize(yearRange, FlotOptions);
//setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions);
/*
calcMinandMaxYears(labelToEntityRecord, year);
yearRange = (year.max - year.min);
setLineWidthAndTickSize(yearRange, FlotOptions);
setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions);
*/
$(".disabled-checkbox-event-receiver").live("click", function() {
$(".disabled-checkbox-event-receiver").live("click", function () {
if ($(this).next().is(':disabled')) {
createNotification("error-notification", { title:'Error',
text:'A Maximum 10 entities can be compared. Please remove some & try again.' },{
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(){
$("input.if_clicked_on_school").live('click', function () {
var checkbox = $(this);
var checkboxValue = $(this).attr("value");
@ -215,56 +252,44 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
if (checkbox.is(':checked')) {
getNextFreeColor(entity);
performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox);
//Dynamically generate the bar, checkbox and label.
createLegendRow(entity, $("#bottom"));
} else {
renderLineGraph(renderedObjects, entity);
labelToCheckedEntities[checkboxValue] = checkbox;
} else if (!checkbox.is(':checked')) {
removeUsedColor(entity);
removeEntityUnChecked(renderedObjects, entity);
removeLegendRow(checkbox);
removeCheckBoxFromGlobalSet(checkbox);
performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox);
}
//console.log('Number of checked entities: ' + getSize(labelToCheckedEntities));
//disableUncheckedEntities();
setTickSizeOfAxes();
checkIfColorLimitIsReached();
//populateMapOfCheckedEntities();
displayLineGraphs();
updateCounter();
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>