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

1. Updated front-end for temporal graph to display helpful message when it takes mnore than 10 seconds to get the data, most likely due to a cached version not available for the requested entity.

Browse source
This commit is contained in:
cdtank 2011-03-22 20:59:59 +00:00
parent 15b07e56f0
commit caa941049b
6 changed files with 165 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

86
productMods/js/visualization/entitycomparison/gui-event-manager.js
View file

@ -192,6 +192,17 @@ function entityCheckboxOperatedOnEventListener() {
}
function renderTemporalGraphVisualization(parameters) {
setupLoadingScreen(parameters.responseContainer);
getTemporalGraphData(parameters.dataURL,
parameters.bodyContainer,
parameters.errorContainer,
parameters.responseContainer);
}
/*
* This method will setup the options for loading screen & then activate the
* loading screen.
@ -208,14 +219,38 @@ function setupLoadingScreen(visContainerDIV) {
$.blockUI.defaults.css.top = '15%';
visContainerDIV.block({
message: '<h3><img src="' + loadingImageLink
message: '<div id="loading-data-container"><h3><img id="data-loading-icon" src="' + loadingImageLink
+ '" />&nbsp;Loading data for <i>'
+ organizationLabel
+ '</i></h3>'
+ '</i></h3></div>'
});
setTimeout(function() {
$("#loading-data-container")
.html('<h3><img id="refresh-page-icon" src="'
+ refreshPageImageLink
+ '" />&nbsp;Data for <i>' + organizationLabel
+ '</i> is now being refreshed. The visualization will load as soon as we are done computing, '
+ 'or you can come back in a few minutes.</h3>')
.css({'cursor': 'pointer'});
}, 10 * 1000);
}
$("#reload-data").live('click', function() {
options = {
responseContainer: $("div#temporal-graph-response"),
bodyContainer: $("#body"),
errorContainer: $("#error-container"),
dataURL: temporalGraphDataURL
};
renderTemporalGraphVisualization(options);
});
/*
* This function gets json data for temporal graph & after rendering removes the
* loading message. It will also display the error container in case of any error.
@ -225,25 +260,34 @@ function getTemporalGraphData(temporalGraphDataURL,
errorBodyDIV,
visContainerDIV) {
$.ajax({
url: temporalGraphDataURL,
dataType: "json",
timeout: 5 * 60 * 1000,
success: function (data) {
if (data.error) {
graphBodyDIV.remove();
errorBodyDIV.show();
visContainerDIV.unblock();
} else {
graphBodyDIV.show();
errorBodyDIV.remove();
temporalGraphProcessor.initiateTemporalGraphRenderProcess(graphContainer, data);
visContainerDIV.unblock();
}
}
});
if (!isDataRequestSentViaAJAX) {
isDataRequestSentViaAJAX = true;
$.ajax({
url: temporalGraphDataURL,
dataType: "json",
timeout: 5 * 60 * 1000,
success: function (data) {
if (data.error) {
graphBodyDIV.remove();
errorBodyDIV.show();
visContainerDIV.unblock();
} else {
graphBodyDIV.show();
errorBodyDIV.remove();
temporalGraphProcessor.initiateTemporalGraphRenderProcess(graphContainer, data);
visContainerDIV.unblock();
}
},
complete: function() {
isDataRequestSentViaAJAX = false;
}
});
}
}

16
productMods/templates/freemarker/visualization/entitycomparison/entityComparisonOnGrantsStandalone.ftl
View file

@ -19,14 +19,18 @@ This is used in util.js to print grant temporal graph links for all sub-organiza
*/
var subOrganizationTemporalGraphURL = "${subOrganizationGrantTemporalGraphCommonURL}";
var temporalGraphDataURL = '${temporalGraphDataURL}';
$(document).ready(function () {
setupLoadingScreen($("div#temporal-graph-response"));
getTemporalGraphData('${temporalGraphDataURL}',
$("#body"),
$("#error-container"),
$("div#temporal-graph-response"));
options = {
responseContainer: $("div#temporal-graph-response"),
bodyContainer: $("#body"),
errorContainer: $("#error-container"),
dataURL: temporalGraphDataURL
};
renderTemporalGraphVisualization(options);
});

16
productMods/templates/freemarker/visualization/entitycomparison/entityComparisonOnPublicationsStandalone.ftl
View file

@ -19,14 +19,18 @@ This is used in util.js to print grant temporal graph links for all sub-organiza
*/
var subOrganizationTemporalGraphURL = "${subOrganizationPublicationTemporalGraphCommonURL}";
var temporalGraphDataURL = '${temporalGraphDataURL}';
$(document).ready(function () {
setupLoadingScreen($("div#temporal-graph-response"));
getTemporalGraphData('${temporalGraphDataURL}',
$("#body"),
$("#error-container"),
$("div#temporal-graph-response"));
options = {
responseContainer: $("div#temporal-graph-response"),
bodyContainer: $("#body"),
errorContainer: $("#error-container"),
dataURL: temporalGraphDataURL
};
renderTemporalGraphVisualization(options);
});

5
productMods/templates/freemarker/visualization/entitycomparison/entityComparisonSetup.ftl
View file

@ -74,9 +74,12 @@ var organizationLabel = '${organizationLabel}';
var organizationVIVOProfileURL = "${organizationVivoProfileURL}";
var loadingImageLink = contextPath + "/images/visualization/ajax-loader-indicator.gif";
var refreshPageImageLink = contextPath + "/images/visualization/refresh-green.png";
var entityCheckboxSelectorDOMClass = "${entityCheckboxSelectorDOMClass}";
var isDataRequestSentViaAJAX = false;
var temporalGraphProcessor;
/*
@ -100,4 +103,4 @@ var COMPARISON_PARAMETERS_INFO = {
</script>
${scripts.add('<script type="text/javascript" src="${urls.base}/js/visualization/entitycomparison/gui-event-manager.js"></script>')}
${scripts.add('<script type="text/javascript" src="${urls.base}/js/visualization/entitycomparison/gui-event-manager.js"></script>')}