1. Made style changes to the temporal graph vis per Katy's suggestions.
2. Refactored the temporal graph views (based on different comparison parameters). Now there is one basic template from which different parameter templates inherit. 3. Did code cleanup for the same. 4. Removed GUI related javascript into separate file & include it in the common basic template for temporal graph vis. 5. Reflected the changes in the servlets as well.
This commit is contained in:
cdtank
parent
f394a2586f
commit
1f7962a454
12 changed files with 457 additions and 686 deletions
|
|
@ -23,6 +23,7 @@ a.temporalGraphLinks {
|
|||
padding: 4px 3px 3px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
a.clear-selected-entities {
|
||||
|
|
@ -31,7 +32,8 @@ a.clear-selected-entities {
|
|||
|
||||
#paginated-table-footer {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#legend-row-header a {
|
||||
|
|
@ -93,7 +95,7 @@ a.clear-selected-entities {
|
|||
float: left;
|
||||
font-size: 12px;
|
||||
width: 160px;
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.easy-deselect-label a, #text {
|
||||
|
|
@ -132,7 +134,7 @@ a.clear-selected-entities {
|
|||
|
||||
.entity-label-url {
|
||||
width: 125px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
display:inline-block;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,206 @@
|
|||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
/* This is used to cache the current state whether the user is allowed to select more entities from
|
||||
the datatable or not. Once Max number of entity selection is reached the user can no longer select
|
||||
more & this variable will be set to false. */
|
||||
$("#datatable").data("isEntitySelectionAllowed", true);
|
||||
|
||||
$("#organizationLabel").text(organizationLabel).css("color", "#2485ae");
|
||||
$("#organizationMoniker").text(organizationLabel);
|
||||
$("#organizationMoniker").attr("href", organizationVIVOProfileURL);
|
||||
|
||||
$notificationContainer = $("#notification-container").notify();
|
||||
|
||||
var jsonObject = {
|
||||
prepare : function(arg1){
|
||||
loadData(arg1);
|
||||
}
|
||||
};
|
||||
|
||||
graphContainer = $("#graphContainer");
|
||||
tableDiv = $('#paginatedTable');
|
||||
|
||||
// initial display of the grid when the page loads
|
||||
init(graphContainer);
|
||||
|
||||
|
||||
//click event handler for clear button
|
||||
$("a.clear-selected-entities").click(function(){
|
||||
clearRenderedObjects();
|
||||
});
|
||||
|
||||
/*
|
||||
* When the intra-entity parameters are clicked,
|
||||
* update the status accordingly.
|
||||
*/
|
||||
|
||||
$("select.comparisonValues").change(function(){
|
||||
|
||||
var selectedValue = $("select.comparisonValues option:selected").val();
|
||||
|
||||
var selectedParameter;
|
||||
|
||||
$.each(COMPARISON_PARAMETERS_INFO, function(index, parameter) {
|
||||
|
||||
if (parameter.value === selectedValue) {
|
||||
selectedParameter = parameter;
|
||||
window.location = parameter.viewLink;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
* This piece of code is not executed at all because the redirect happens before there is a chance
|
||||
* to render the below contents.
|
||||
* */
|
||||
|
||||
$("#comparisonParameter").text("Total Number of " + selectedValue);
|
||||
$('#yaxislabel').html("Number of " + selectedValue).mbFlipText(false);
|
||||
$('#yaxislabel').css("color", "#595B5B");
|
||||
$('#comparisonHeader').html(selectedValue).css('font-weight', 'bold');
|
||||
|
||||
});
|
||||
|
||||
$("input[type=checkbox].easyDeselectCheckbox").live('click', function(){
|
||||
|
||||
var checkbox = $(this);
|
||||
var checkboxValue = $(this).attr("value");
|
||||
var linkedCheckbox = labelToCheckedEntities[checkboxValue];
|
||||
var entityToBeRemoved = labelToEntityRecord[checkboxValue];
|
||||
|
||||
if(!checkbox.is(':checked')){
|
||||
//console.log("Easy deselect checkbox is unclicked!");
|
||||
updateRowHighlighter(linkedCheckbox);
|
||||
removeUsedColor(entityToBeRemoved);
|
||||
removeEntityUnChecked(renderedObjects, entityToBeRemoved);
|
||||
removeLegendRow(linkedCheckbox);
|
||||
removeCheckBoxFromGlobalSet(linkedCheckbox);
|
||||
$(linkedCheckbox).attr('checked', false);
|
||||
checkIfColorLimitIsReached();
|
||||
displayLineGraphs();
|
||||
updateCounter();
|
||||
}
|
||||
});
|
||||
|
||||
//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) {
|
||||
|
||||
// var yearRange;
|
||||
$.each(jsonData, function (index, val) {
|
||||
setOfLabels.push(val.label);
|
||||
labelToEntityRecord[val.label] = val;
|
||||
});
|
||||
|
||||
getEntityVisMode(jsonData);
|
||||
prepareTableForDataTablePagination(jsonData);
|
||||
setEntityLevel();
|
||||
|
||||
$(".disabled-checkbox-event-receiver").live("click", function () {
|
||||
|
||||
if ($(this).next().is(':disabled')) {
|
||||
|
||||
createNotification("warning-notification", {
|
||||
title: 'Error',
|
||||
text: 'A Maximum 10 entities can be compared. Please remove some & try again.'
|
||||
}, {
|
||||
custom: true,
|
||||
expires: false
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
* 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();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -61,6 +61,8 @@
|
|||
background:#F1F2ee;
|
||||
font-weight:bold;
|
||||
font-size:12px;
|
||||
padding-bottom: 3px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
#infoContainer {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||
|
||||
|
||||
(function ($) {
|
||||
|
||||
$.fn.dataTableExt.oPagination.gmail_style = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<div id="body">
|
||||
|
||||
<h2><span id="header-entity-label"><a id="organizationMoniker" href="#"></a></span></h2>
|
||||
|
||||
<div id="leftblock">
|
||||
<div id="leftUpper">
|
||||
<h3>How do you want to compare?</h3>
|
||||
|
||||
<div style="text-align: left;">
|
||||
|
||||
<select class="comparisonValues" style="margin-bottom: 20px;">
|
||||
|
||||
<#list parameterOptions as parameter>
|
||||
<#if currentParameter = parameter.name>
|
||||
|
||||
<#assign selectedText = "selected='selected'">
|
||||
|
||||
<#else>
|
||||
|
||||
<#assign selectedText = "">
|
||||
|
||||
</#if>
|
||||
<option value="${parameter.value}" ${selectedText}>${parameter.dropDownText}</option>
|
||||
</#list>
|
||||
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="leftLower">
|
||||
<div id="notification-container" style="display:none">
|
||||
|
||||
<div id="error-notification" class="ui-state-error" style="padding:10px; -moz-box-shadow:0 0 6px #980000; -webkit-box-shadow:0 0 6px #980000; box-shadow:0 0 6px #980000;">
|
||||
<a class="ui-notify-close" href="#"><span class="ui-icon ui-icon-close" style="float:right"></span></a>
|
||||
<span style="float:left; margin:0 5px 0 0;" class="ui-icon ui-icon-alert"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
|
||||
</div>
|
||||
|
||||
<div id="warning-notification" class="ui-state-highlight ui-corner-all" >
|
||||
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
|
||||
<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h3>Who do you want to compare?</h3>
|
||||
<div id="paginatedTable"></div>
|
||||
<div id="paginated-table-footer">
|
||||
<a id="csv" href="${temporalGraphDownloadFileLink}" class="temporalGraphLinks">Save as CSV</a>
|
||||
<a class="clear-selected-entities temporalGraphLinks" title="Clear all selected entities.">Clear</a>
|
||||
</div>
|
||||
</div>
|
||||
<#--
|
||||
<div id = "stopwordsdiv">
|
||||
* The entity types core:Person, foaf:Organization have been excluded as they are too general.
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div id="rightblock">
|
||||
|
||||
<h3 id="headerText">Comparing <span id="comparisonHeader">${currentParameterObject.value}</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h3>
|
||||
|
||||
<div id="temporal-graph">
|
||||
<div id="yaxislabel"></div>
|
||||
<div id="graphContainer"></div>
|
||||
<div id="xaxislabel">Year</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom">
|
||||
<h3><span id="comparisonParameter"></span></h3>
|
||||
<p class="displayCounter">You have selected <span id="counter">0</span> of a maximum
|
||||
<span id="total">10</span> <span id="entityleveltext"> schools</span> to compare.
|
||||
<span id="legend-row-header">
|
||||
<a class="clear-selected-entities temporalGraphLinks" title="Clear all selected entities.">Clear</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,341 +0,0 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<#assign standardVisualizationURLRoot ="/visualization">
|
||||
<#assign ajaxVisualizationURLRoot ="/visualizationAjax">
|
||||
<#assign dataVisualizationURLRoot ="/visualizationData">
|
||||
|
||||
<#assign organizationURI ="${organizationURI?url}">
|
||||
<#assign jsonContent ="${jsonContent}">
|
||||
<#assign organizationLabel = "${organizationLabel}">
|
||||
<#assign organizationVivoProfileURL = "${urls.base}/individual?uri=${organizationURI}">
|
||||
<#assign subOrganizationTemporalGraphURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count">
|
||||
<#assign subOrganizationTemporalGraphPubURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_comparison">
|
||||
<#assign subOrganizationVivoProfileURL = "${urls.base}/individual?">
|
||||
|
||||
|
||||
|
||||
<#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
|
||||
|
||||
<#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_grant_count&uri=${organizationURI}&labelField=label'>
|
||||
|
||||
<#-- Javascript files -->
|
||||
|
||||
<#assign excanvas = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/excanvas.js'>
|
||||
<#assign flot = 'js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
|
||||
<#assign fliptext = 'js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
|
||||
<#assign jqueryNotify = 'js/jquery_plugins/jquery.notify.min.js'>
|
||||
<#assign jqueryUI = 'js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
|
||||
<#assign datatable = 'js/jquery_plugins/jquery.dataTables.min.js'>
|
||||
<#assign entityComparisonUtils = 'js/visualization/entitycomparison/util.js'>
|
||||
<#assign entityComparisonConstants = 'js/visualization/entitycomparison/constants.js'>
|
||||
|
||||
<!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]-->
|
||||
${scripts.add(flot)}
|
||||
${scripts.add(fliptext)}
|
||||
${scripts.add(jqueryUI)}
|
||||
${scripts.add(datatable)}
|
||||
${scripts.add(entityComparisonUtils)}
|
||||
${scripts.add(entityComparisonConstants)}
|
||||
${scripts.add(jqueryNotify)}
|
||||
|
||||
<#-- CSS files -->
|
||||
|
||||
<#assign demoTable = "js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
|
||||
<#assign jqueryUIStyle = "js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
|
||||
<#assign jqueryNotifyStyle = "css/jquery_plugins/ui.notify.css" />
|
||||
<#assign entityComparisonStyle = "css/visualization/entitycomparison/layout.css" />
|
||||
<#assign entityComparisonStyleIEHack = "${urls.base}/css/visualization/entitycomparison/layout-ie.css" />
|
||||
<#assign vizStyle = "css/visualization/visualization.css" />
|
||||
|
||||
${stylesheets.add(jqueryUIStyle)}
|
||||
${stylesheets.add(demoTable)}
|
||||
${stylesheets.add(entityComparisonStyle)}
|
||||
${stylesheets.add(vizStyle)}
|
||||
${stylesheets.add(jqueryNotifyStyle)}
|
||||
<!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]-->
|
||||
|
||||
|
||||
<#-- variables passed from server-side code -->
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
|
||||
var contextPath = "${urls.base}";
|
||||
var temporalGraphDownloadFile = "${TemporalGraphDownloadFile}"
|
||||
var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
|
||||
var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
|
||||
var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
||||
var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}";
|
||||
|
||||
var jsonString = '${jsonContent}';
|
||||
var organizationLabel = '${organizationLabel}';
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
/* This is used to cache the current state whether the user is allowed to select more entities from
|
||||
the datatable or not. Once Max number of entity selection is reached the user can no longer select
|
||||
more & this variable will be set to false. */
|
||||
$("#datatable").data("isEntitySelectionAllowed", true);
|
||||
|
||||
$("#organizationLabel").text(organizationLabel).css("color", "#2485ae");
|
||||
$("#organizationMoniker").text(organizationLabel);
|
||||
$("#organizationMoniker").attr("href", "${organizationVivoProfileURL}");
|
||||
|
||||
$notificationContainer = $("#notification-container").notify();
|
||||
|
||||
var jsonObject = {
|
||||
prepare : function(arg1){
|
||||
loadData(arg1);
|
||||
}
|
||||
};
|
||||
|
||||
graphContainer = $("#graphContainer");
|
||||
tableDiv = $('#paginatedTable');
|
||||
|
||||
// initial display of the grid when the page loads
|
||||
init(graphContainer);
|
||||
|
||||
|
||||
//click event handler for clear button
|
||||
$("a.clear-selected-entities").click(function(){
|
||||
clearRenderedObjects();
|
||||
});
|
||||
|
||||
/*
|
||||
* When the intra-entity parameters are clicked,
|
||||
* update the status accordingly.
|
||||
*/
|
||||
|
||||
$("select.comparisonValues").change(function(){
|
||||
|
||||
if ($("select.comparisonValues option:selected").text() === "by Publications") {
|
||||
window.location = subOrganizationTemporalGraphPubURL + "&uri=" + "${organizationURI}";
|
||||
}
|
||||
|
||||
var selectedValue = $("select.comparisonValues option:selected").val();
|
||||
$("#comparisonParameter").text("Total Number of " + selectedValue);
|
||||
$('#yaxislabel').html("Number of " + selectedValue).mbFlipText(false);
|
||||
$('#yaxislabel').css("color", "#595B5B");
|
||||
$('#comparisonHeader').html(selectedValue).css('font-weight', 'bold');
|
||||
|
||||
});
|
||||
|
||||
$("input[type=checkbox].easyDeselectCheckbox").live('click', function(){
|
||||
|
||||
var checkbox = $(this);
|
||||
var checkboxValue = $(this).attr("value");
|
||||
var linkedCheckbox = labelToCheckedEntities[checkboxValue];
|
||||
var entityToBeRemoved = labelToEntityRecord[checkboxValue];
|
||||
|
||||
if(!checkbox.is(':checked')){
|
||||
//console.log("Easy deselect checkbox is unclicked!");
|
||||
updateRowHighlighter(linkedCheckbox);
|
||||
removeUsedColor(entityToBeRemoved);
|
||||
removeEntityUnChecked(renderedObjects, entityToBeRemoved);
|
||||
removeLegendRow(linkedCheckbox);
|
||||
removeCheckBoxFromGlobalSet(linkedCheckbox);
|
||||
$(linkedCheckbox).attr('checked', false);
|
||||
checkIfColorLimitIsReached();
|
||||
displayLineGraphs();
|
||||
updateCounter();
|
||||
}
|
||||
});
|
||||
|
||||
//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) {
|
||||
|
||||
// var yearRange;
|
||||
$.each(jsonData, function (index, val) {
|
||||
setOfLabels.push(val.label);
|
||||
labelToEntityRecord[val.label] = val;
|
||||
});
|
||||
|
||||
getEntityVisMode(jsonData);
|
||||
prepareTableForDataTablePagination(jsonData);
|
||||
setEntityLevel();
|
||||
|
||||
$(".disabled-checkbox-event-receiver").live("click", function () {
|
||||
|
||||
if ($(this).next().is(':disabled')) {
|
||||
|
||||
createNotification("warning-notification", {
|
||||
title: 'Error',
|
||||
text: 'A Maximum 10 entities can be compared. Please remove some & try again.'
|
||||
}, {
|
||||
custom: true,
|
||||
expires: false
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
* 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>
|
||||
|
||||
<div id="body">
|
||||
|
||||
<h2><span id="header-entity-label"><a id="organizationMoniker" href="#"></a></span></h2>
|
||||
|
||||
<div id="leftblock">
|
||||
<div id="leftUpper">
|
||||
<h3>How do you want to compare?</h3>
|
||||
|
||||
<div style="text-align: left;">
|
||||
|
||||
<select class="comparisonValues" style="margin-bottom: 20px;">
|
||||
<option value="Grants" selected="selected">by Grants</option>
|
||||
<option value="Publications">by Publications</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="leftLower">
|
||||
<div id="notification-container" style="display:none">
|
||||
|
||||
<div id="error-notification" class="ui-state-error" style="padding:10px; -moz-box-shadow:0 0 6px #980000; -webkit-box-shadow:0 0 6px #980000; box-shadow:0 0 6px #980000;">
|
||||
<a class="ui-notify-close" href="#"><span class="ui-icon ui-icon-close" style="float:right"></span></a>
|
||||
<span style="float:left; margin:0 5px 0 0;" class="ui-icon ui-icon-alert"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
|
||||
</div>
|
||||
|
||||
<div id="warning-notification" class="ui-state-highlight ui-corner-all" >
|
||||
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
|
||||
<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h3>Who do you want to compare?</h3>
|
||||
<div id="paginatedTable"></div>
|
||||
<div id="paginated-table-footer">
|
||||
<a id="csv" href="${TemporalGraphDownloadFile}" class="temporalGraphLinks">Save as CSV</a>
|
||||
<a class="clear-selected-entities temporalGraphLinks">Clear</a>
|
||||
</div>
|
||||
</div>
|
||||
<#--
|
||||
<div id = "stopwordsdiv">
|
||||
* The entity types core:Person, foaf:Organization have been excluded as they are too general.
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div id="rightblock">
|
||||
|
||||
<h3 id="headerText">Comparing <span id="comparisonHeader">Grants</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h3>
|
||||
|
||||
<div id="temporal-graph">
|
||||
<div id="yaxislabel"></div>
|
||||
<div id="graphContainer"></div>
|
||||
<div id="xaxislabel">Year</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom">
|
||||
<h3><span id="comparisonParameter"></span></h3>
|
||||
<p class="displayCounter">You have selected <span id="counter">0</span> of a maximum
|
||||
<span id="total">10</span> <span id="entityleveltext"> schools</span> to compare.
|
||||
<span id="legend-row-header">
|
||||
<a class="clear-selected-entities temporalGraphLinks">Clear</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<#-- The Order of each element in this file is very important. Do not make any changes to it unless making
|
||||
corresponding changes in the included Templates. -->
|
||||
|
||||
<#assign currentParameter = "grant">
|
||||
|
||||
<#include "entityComparisonSetup.ftl">
|
||||
|
||||
<#assign temporalGraphDownloadFileLink = '${temporalGraphDownloadCSVCommonURL}&vis=entity_grant_count'>
|
||||
|
||||
<#-- variables passed from server-side code -->
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
|
||||
/*
|
||||
This is used in util.js to print grant temporal graph links for all sub-organizations.
|
||||
*/
|
||||
var subOrganizationTemporalGraphURL = "${subOrganizationGrantTemporalGraphCommonURL}";
|
||||
|
||||
</script>
|
||||
|
||||
<#assign currentParameterObject = grantParameter>
|
||||
|
||||
<#include "entityComparisonBody.ftl">
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<#-- The Order of each element in this file is very important. Do not make any changes to it unless making
|
||||
corresponding changes in the included Templates. -->
|
||||
|
||||
<#assign currentParameter = "publication">
|
||||
|
||||
<#include "entityComparisonSetup.ftl">
|
||||
|
||||
<#assign temporalGraphDownloadFileLink = '${temporalGraphDownloadCSVCommonURL}&vis=entity_comparison'>
|
||||
|
||||
<#-- variables passed from server-side code -->
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
|
||||
/*
|
||||
This is used in util.js to print grant temporal graph links for all sub-organizations.
|
||||
*/
|
||||
var subOrganizationTemporalGraphURL = "${subOrganizationPublicationTemporalGraphCommonURL}";
|
||||
|
||||
</script>
|
||||
|
||||
<#assign currentParameterObject = publicationParameter>
|
||||
|
||||
<#include "entityComparisonBody.ftl">
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<#assign standardVisualizationURLRoot ="/visualization">
|
||||
<#assign ajaxVisualizationURLRoot ="/visualizationAjax">
|
||||
<#assign dataVisualizationURLRoot ="/visualizationData">
|
||||
|
||||
<#assign organizationURI ="${organizationURI?url}">
|
||||
<#assign jsonContent ="${jsonContent}">
|
||||
<#assign organizationLabel = "${organizationLabel}">
|
||||
<#assign organizationVivoProfileURL = "${urls.base}/individual?uri=${organizationURI}">
|
||||
|
||||
<#assign subOrganizationVivoProfileURL = "${urls.base}/individual?">
|
||||
|
||||
<#assign subOrganizationGrantTemporalGraphCommonURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count">
|
||||
<#assign subOrganizationPublicationTemporalGraphCommonURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_comparison">
|
||||
|
||||
<#assign organizationPublicationTemporalGraphURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_comparison&uri=${organizationURI}">
|
||||
<#assign organizationGrantTemporalGraphURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count&uri=${organizationURI}">
|
||||
|
||||
<#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
|
||||
|
||||
<#assign temporalGraphDownloadCSVCommonURL = '${urls.base}${dataVisualizationURLRoot}?uri=${organizationURI}&labelField=label'>
|
||||
|
||||
<#assign publicationParameter = { "name": "publication",
|
||||
"dropDownText": "by Publications",
|
||||
"viewLink": "${organizationPublicationTemporalGraphURL}",
|
||||
"value": "Publications" }>
|
||||
|
||||
<#assign grantParameter = { "name": "grant",
|
||||
"dropDownText": "by Grants",
|
||||
"viewLink": "${organizationGrantTemporalGraphURL}",
|
||||
"value": "Grants" }>
|
||||
|
||||
<#assign parameterOptions = [publicationParameter, grantParameter]>
|
||||
|
||||
<#-- Javascript files -->
|
||||
|
||||
<#assign excanvas = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/excanvas.js'>
|
||||
<#assign flot = 'js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
|
||||
<#assign fliptext = 'js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
|
||||
<#assign jqueryNotify = 'js/jquery_plugins/jquery.notify.min.js'>
|
||||
<#assign jqueryUI = 'js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
|
||||
<#assign datatable = 'js/jquery_plugins/jquery.dataTables.min.js'>
|
||||
<#assign entityComparisonUtils = 'js/visualization/entitycomparison/util.js'>
|
||||
<#assign entityComparisonConstants = 'js/visualization/entitycomparison/constants.js'>
|
||||
<#assign guiEventManager = 'js/visualization/entitycomparison/gui-event-manager.js'>
|
||||
|
||||
|
||||
<!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]-->
|
||||
${scripts.add(flot)}
|
||||
${scripts.add(fliptext)}
|
||||
${scripts.add(jqueryUI)}
|
||||
${scripts.add(datatable)}
|
||||
${scripts.add(entityComparisonUtils)}
|
||||
${scripts.add(entityComparisonConstants)}
|
||||
${scripts.add(jqueryNotify)}
|
||||
|
||||
<#-- CSS files -->
|
||||
|
||||
<#assign demoTable = "js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
|
||||
<#assign jqueryUIStyle = "js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
|
||||
<#assign jqueryNotifyStyle = "css/jquery_plugins/ui.notify.css" />
|
||||
<#assign entityComparisonStyle = "css/visualization/entitycomparison/layout.css" />
|
||||
<#assign entityComparisonStyleIEHack = "${urls.base}/css/visualization/entitycomparison/layout-ie.css" />
|
||||
<#assign vizStyle = "css/visualization/visualization.css" />
|
||||
|
||||
${stylesheets.add(jqueryUIStyle)}
|
||||
${stylesheets.add(demoTable)}
|
||||
${stylesheets.add(entityComparisonStyle)}
|
||||
${stylesheets.add(vizStyle)}
|
||||
${stylesheets.add(jqueryNotifyStyle)}
|
||||
<!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]-->
|
||||
|
||||
<#-- variables passed from server-side code -->
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
|
||||
var contextPath = "${urls.base}";
|
||||
var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
|
||||
var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
|
||||
|
||||
var jsonString = '${jsonContent}';
|
||||
var organizationLabel = '${organizationLabel}';
|
||||
var organizationVIVOProfileURL = "${organizationVivoProfileURL}";
|
||||
|
||||
/*
|
||||
This has to be declared before making a call to GUI event manager JS.
|
||||
*/
|
||||
var COMPARISON_PARAMETERS_INFO = {
|
||||
|
||||
<#list parameterOptions as parameter>
|
||||
|
||||
${parameter.name}: {
|
||||
|
||||
<#list parameter?keys as key>
|
||||
${key}:"${parameter[key]}"<#if key_has_next>,</#if>
|
||||
</#list>
|
||||
|
||||
}<#if parameter_has_next>,</#if>
|
||||
|
||||
</#list>
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
${scripts.add(guiEventManager)}
|
||||
|
|
@ -1,338 +0,0 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<#assign standardVisualizationURLRoot ="/visualization">
|
||||
<#assign ajaxVisualizationURLRoot ="/visualizationAjax">
|
||||
<#assign dataVisualizationURLRoot ="/visualizationData">
|
||||
|
||||
<#assign organizationURI ="${organizationURI?url}">
|
||||
<#assign jsonContent ="${jsonContent}">
|
||||
<#assign organizationLabel = "${organizationLabel}">
|
||||
<#assign organizationVivoProfileURL = "${urls.base}/individual?uri=${organizationURI}">
|
||||
<#assign subOrganizationTemporalGraphURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_comparison">
|
||||
<#assign subOrganizationTemporalGraphGrantURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count">
|
||||
<#assign subOrganizationVivoProfileURL = "${urls.base}/individual?">
|
||||
|
||||
<#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
|
||||
|
||||
<#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_comparison&uri=${organizationURI}&labelField=label'>
|
||||
|
||||
|
||||
<#-- Javascript files -->
|
||||
|
||||
<#assign excanvas = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/excanvas.js'>
|
||||
<#assign flot = 'js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
|
||||
<#assign fliptext = 'js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
|
||||
<#assign jqueryNotify = 'js/jquery_plugins/jquery.notify.min.js'>
|
||||
<#assign jqueryUI = 'js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
|
||||
<#assign datatable = 'js/jquery_plugins/jquery.dataTables.min.js'>
|
||||
<#assign entityComparisonUtils = 'js/visualization/entitycomparison/util.js'>
|
||||
<#assign entityComparisonConstants = 'js/visualization/entitycomparison/constants.js'>
|
||||
|
||||
<!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]-->
|
||||
${scripts.add(flot)}
|
||||
${scripts.add(fliptext)}
|
||||
${scripts.add(jqueryUI)}
|
||||
${scripts.add(datatable)}
|
||||
${scripts.add(entityComparisonUtils)}
|
||||
${scripts.add(entityComparisonConstants)}
|
||||
${scripts.add(jqueryNotify)}
|
||||
|
||||
<#-- CSS files -->
|
||||
|
||||
<#assign demoTable = "js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
|
||||
<#assign jqueryUIStyle = "js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
|
||||
<#assign jqueryNotifyStyle = "css/jquery_plugins/ui.notify.css" />
|
||||
<#assign entityComparisonStyle = "css/visualization/entitycomparison/layout.css" />
|
||||
<#assign entityComparisonStyleIEHack = "${urls.base}/css/visualization/entitycomparison/layout-ie.css" />
|
||||
<#assign vizStyle = "css/visualization/visualization.css" />
|
||||
|
||||
${stylesheets.add(jqueryUIStyle)}
|
||||
${stylesheets.add(demoTable)}
|
||||
${stylesheets.add(entityComparisonStyle)}
|
||||
${stylesheets.add(vizStyle)}
|
||||
${stylesheets.add(jqueryNotifyStyle)}
|
||||
<!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]-->
|
||||
|
||||
|
||||
<#-- variables passed from server-side code -->
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
|
||||
var contextPath = "${urls.base}";
|
||||
var temporalGraphDownloadFile = "${TemporalGraphDownloadFile}"
|
||||
var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
|
||||
var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
|
||||
var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
||||
var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantURL}";
|
||||
|
||||
var jsonString = '${jsonContent}';
|
||||
var organizationLabel = '${organizationLabel}';
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
/* This is used to cache the current state whether the user is allowed to select more entities from
|
||||
the datatable or not. Once Max number of entity selection is reached the user can no longer select
|
||||
more & this variable will be set to false. */
|
||||
$("#datatable").data("isEntitySelectionAllowed", true);
|
||||
|
||||
$("#organizationLabel").text(organizationLabel).css("color", "#2485ae");
|
||||
$("#organizationMoniker").text(organizationLabel);
|
||||
$("#organizationMoniker").attr("href", "${organizationVivoProfileURL}");
|
||||
|
||||
$notificationContainer = $("#notification-container").notify();
|
||||
|
||||
var jsonObject = {
|
||||
prepare : function(arg1){
|
||||
loadData(arg1);
|
||||
}
|
||||
};
|
||||
|
||||
graphContainer = $("#graphContainer");
|
||||
tableDiv = $('#paginatedTable');
|
||||
|
||||
// initial display of the grid when the page loads
|
||||
init(graphContainer);
|
||||
|
||||
//click event handler for clear button
|
||||
$("a.clear-selected-entities").click(function(){
|
||||
clearRenderedObjects();
|
||||
});
|
||||
|
||||
/*
|
||||
* When the intra-entity parameters are clicked,
|
||||
* update the status accordingly.
|
||||
*/
|
||||
|
||||
$("select.comparisonValues").change(function(){
|
||||
|
||||
if ($("select.comparisonValues option:selected").text() === "by Grants") {
|
||||
window.location = subOrganizationTemporalGraphGrantURL + "&uri=" + "${organizationURI}";
|
||||
}
|
||||
|
||||
var selectedValue = $("select.comparisonValues option:selected").val();
|
||||
$("#comparisonParameter").text("Total Number of " + selectedValue);
|
||||
$('#yaxislabel').html("Number of " + selectedValue).mbFlipText(false);
|
||||
$('#yaxislabel').css("color", "#595B5B");
|
||||
$('#comparisonHeader').html(selectedValue).css('font-weight', 'bold');
|
||||
|
||||
});
|
||||
|
||||
$("input[type=checkbox].easyDeselectCheckbox").live('click', function(){
|
||||
|
||||
var checkbox = $(this);
|
||||
var checkboxValue = $(this).attr("value");
|
||||
var linkedCheckbox = labelToCheckedEntities[checkboxValue];
|
||||
var entityToBeRemoved = labelToEntityRecord[checkboxValue];
|
||||
|
||||
if(!checkbox.is(':checked')){
|
||||
//console.log("Easy deselect checkbox is unclicked!");
|
||||
updateRowHighlighter(linkedCheckbox);
|
||||
removeUsedColor(entityToBeRemoved);
|
||||
removeEntityUnChecked(renderedObjects, entityToBeRemoved);
|
||||
removeLegendRow(linkedCheckbox);
|
||||
removeCheckBoxFromGlobalSet(linkedCheckbox);
|
||||
$(linkedCheckbox).attr('checked', false);
|
||||
checkIfColorLimitIsReached();
|
||||
displayLineGraphs();
|
||||
updateCounter();
|
||||
}
|
||||
});
|
||||
|
||||
//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) {
|
||||
|
||||
// var yearRange;
|
||||
$.each(jsonData, function (index, val) {
|
||||
setOfLabels.push(val.label);
|
||||
labelToEntityRecord[val.label] = val;
|
||||
});
|
||||
|
||||
getEntityVisMode(jsonData);
|
||||
prepareTableForDataTablePagination(jsonData);
|
||||
setEntityLevel();
|
||||
|
||||
$(".disabled-checkbox-event-receiver").live("click", function () {
|
||||
|
||||
if ($(this).next().is(':disabled')) {
|
||||
|
||||
createNotification("warning-notification", {
|
||||
title: 'Error',
|
||||
text: 'A Maximum 10 entities can be compared. Please remove some & try again.'
|
||||
}, {
|
||||
custom: true,
|
||||
expires: false
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
* 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>
|
||||
|
||||
<div id="body">
|
||||
|
||||
<h2><span id="header-entity-label"><a id="organizationMoniker" href="#"></a></span></h2>
|
||||
|
||||
<div id="leftblock">
|
||||
<div id="leftUpper">
|
||||
<h3>How do you want to compare?</h3>
|
||||
|
||||
<div style="text-align: left;">
|
||||
|
||||
<select class="comparisonValues" style="margin-bottom: 20px;">
|
||||
<option value="Publications" selected="selected">by Publications</option>
|
||||
<option value="Grants">by Grants</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="leftLower">
|
||||
<div id="notification-container" style="display:none">
|
||||
|
||||
<div id="error-notification" class="ui-state-error" style="padding:10px; -moz-box-shadow:0 0 6px #980000; -webkit-box-shadow:0 0 6px #980000; box-shadow:0 0 6px #980000;">
|
||||
<a class="ui-notify-close" href="#"><span class="ui-icon ui-icon-close" style="float:right"></span></a>
|
||||
<span style="float:left; margin:0 5px 0 0;" class="ui-icon ui-icon-alert"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
|
||||
</div>
|
||||
|
||||
<div id="warning-notification" class="ui-state-highlight ui-corner-all" >
|
||||
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
|
||||
<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h3>Who do you want to compare?</h3>
|
||||
<div id="paginatedTable"></div>
|
||||
<div id="paginated-table-footer">
|
||||
<a id="csv" href="${TemporalGraphDownloadFile}" class="temporalGraphLinks">Save as CSV</a>
|
||||
<a class="clear-selected-entities temporalGraphLinks">Clear</a>
|
||||
</div>
|
||||
</div>
|
||||
<#--
|
||||
<div id = "stopwordsdiv">
|
||||
* The entity types core:Person, foaf:Organization have been excluded as they are too general.
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div id="rightblock">
|
||||
|
||||
<h3 id="headerText">Comparing <span id="comparisonHeader">Publications</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h3>
|
||||
|
||||
<div id="temporal-graph">
|
||||
<div id="yaxislabel"></div>
|
||||
<div id="graphContainer"></div>
|
||||
<div id="xaxislabel">Year</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom">
|
||||
<h3><span id="comparisonParameter"></span></h3>
|
||||
<p class="displayCounter">You have selected <span id="counter">0</span> of a maximum
|
||||
<span id="total">10</span> <span id="entityleveltext"> schools</span> to compare.
|
||||
<span id="legend-row-header">
|
||||
<a class="clear-selected-entities temporalGraphLinks">Clear</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,7 +141,7 @@ public class EntityPublicationCountRequestHandler implements
|
|||
Entity entity, String entityURI, Map<String, Set<String>> subOrganizationTypesResult) {
|
||||
|
||||
Portal portal = vreq.getPortal();
|
||||
String standaloneTemplate = "entityComparisonStandaloneActivator.ftl";
|
||||
String standaloneTemplate = "entityComparisonOnPublicationsStandalone.ftl";
|
||||
|
||||
String jsonContent = "";
|
||||
jsonContent = writePublicationsOverTimeJSON(vreq, entity.getSubEntities(), subOrganizationTypesResult);
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ public class EntityGrantCountRequestHandler implements
|
|||
Entity entity, String entityURI, Map<String, Set<String>> subOrganizationTypesResult) {
|
||||
|
||||
Portal portal = vreq.getPortal();
|
||||
String standaloneTemplate = "entityComparisonGrantsStandaloneActivator.ftl";
|
||||
String standaloneTemplate = "entityComparisonOnGrantsStandalone.ftl";
|
||||
|
||||
String jsonContent = "";
|
||||
jsonContent = writeGrantsOverTimeJSON(vreq, entity.getSubEntities(), subOrganizationTypesResult);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue