1. Added comment about the new visualization.topLevelOrg property for deploy.proeprties. Added similar content for install.txt.

2. Made front-end improvements to temporal graph vis per Katy's suggestions.
3. Made improvements to person level vis front-end.
This commit is contained in:
cdtank 2011-01-13 21:30:15 +00:00
parent e9a2cae473
commit 63a3e318ea
8 changed files with 703 additions and 673 deletions

View file

@ -164,6 +164,23 @@ example value: defaultAdmin
property name: selfEditing.idMatchingProperty
example value: http://vivo.mydomain.edu/ns#networkId
NOTE: If you want to use an external authentication system like Shibboleth or
CUWebAuth, you will need to set two additional properties in this file. See
the section below entitled "Using an External Authentication System with VIVO".
Temporal Graph Visualization is used to compare different
organizations/people within an organization on different parameters
like number of publications, grants. This parameter will be used
as a default in case a URI is not provided. It will be also used
whenever this visualization is to be rendered for top level organization.
In absence of this parameter a SPARQL query will be fired which will
attempt to provide a top level organization.The name of a property
that can be used to associate an Individual with a user account.
When a user logs in with a name that matches the value of this property,
the user will be authorized to edit that Individual.
property name: visualization.topLevelOrg
example value: http://vivo-trunk.indiana.edu/individual/topLevelOrgURI
NOTE: If you want to use an external authentication system like Shibboleth or
CUWebAuth, you will need to set two additional properties in this file. See
the section below entitled "Using an External Authentication System with VIVO".

View file

@ -124,3 +124,13 @@ selfEditing.idMatchingProperty = http://vivo.mydomain.edu/ns#networkId
#
#externalAuth.buttonText = Log in using BearCat Shibboleth
#externalAuth.netIdHeaderName = remote_userID
#
# Temporal Graph Visualization is used to compare different organizations/people
# within an organization on different parameters like number of publications, grants.
# This parameter will be used as a default in case a URI is not provided. It will be
# also used whenever this visualization is to be rendered for top level organization.
# In absence of this parameter a SPARQL query will be fired which will attempt to
# provide a top level organization.
# visualization.topLevelOrg = http://vivo-trunk.indiana.edu/individual/topLevelOrgURI

View file

@ -3,67 +3,69 @@
@CHARSET "UTF-8";
head,#body {
font: 0.9em Helvetica;
font: 0.9em Helvetica;
}
#body {
background-color: #fff;
min-height: 800px;
width: 100%;
min-width: 900px;
margin: auto;
background-color: #fff;
min-height: 800px;
width: 100%;
min-width: 900px;
margin: auto;
}
h1 {
padding-top: 10px;
/* font-size: 1.5em; */
margin-left: 5%;
padding-top: 10px;
/* font-size: 1.5em; */
margin-left: 5%;
}
h2 {
/* font-size: 1.1em; */
margin-top: 10px;
margin-bottom: 5px;
/* font-size: 1.1em; */
margin-top: 10px;
margin-bottom: 5px;
}
a.temporalGraphLinks {
margin-top: 10px;
float:right;
height: 20px;
text-decoration: none;
width: 30%;
margin: 0 1% 0 1%;
background-color: #EAEAEA;
text-align: center;
padding: 3px;
padding-top: 4px;
margin-top: 10px;
/*float:right;*/
height: 20px;
text-decoration: none;
width: 30%;
/*margin: 0 1% 0 1%;*/
background-color: #EAEAEA;
text-align: center;
padding: 3px;
padding-top: 4px;
cursor: pointer;
}
#reset-search {
color: #2485AE;
color: #2485AE;
cursor: pointer;
margin-left: 10px;
}
form{
margin-top:70px;
margin-bottom: -50px;
margin-top:70px;
margin-bottom: -50px;
}
#yaxislabel{
font-size: 12px;
float:right;
background-color: white;
color:black;
display: block;
height: 150px;
text-align: center;
padding-top: 50px;
#yaxislabel {
font-size: 12px;
float:right;
background-color: white;
color: #595B5B;
display: block;
height: 150px;
text-align: center;
padding-top: 50px;
position: absolute !important;
}
#xaxislabel{
font-size: 12px;
margin-top: -5px;
text-align: center;
font-size: 12px;
margin-top: -5px;
text-align: center;
}
#notification-container {
@ -78,36 +80,47 @@ position: inherit;
}
#functions{
margin-top: 20px;
margin-bottom: -40px;
margin-top: 20px;
margin-bottom: -40px;
}
#bar {
height: 20px;
float: left;
background-color: #fff;
width: 250px;
margin-left: 10px;
height: 20px;
float: left;
background-color: #fff;
width: 250px;
margin-left: 10px;
}
#checkbox{
float:left;
float:left;
}
.easy-deselect-label {
float: left;
font-size: 12px;
width: 160px;
text-align: right;
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;
text-decoration: none;
color: black;
font-family: Helvetica;
font-size: 1em;
}
.easy-deselect-label .entity-label {
color:red;
color:red;
}
#header-entity-label {
font-size: 1.1em;
font-weight: bold;
}
#header-entity-label a {
color: #13968C;
}
.ellipsis {
@ -116,9 +129,10 @@ position: inherit;
}
.entity-label-url {
width: 125px;
margin-right: 10px;
display:inline-block;
width: 125px;
margin-right: 10px;
display:inline-block;
text-decoration: underline;
}
.ellipsis.multiline {
@ -126,113 +140,116 @@ position: inherit;
}
#searchresult {
margin-top: 50px;
margin-top: 50px;
}
#bottom,#graphContainer {
float: right;
/*float: right;*/
}
#graphContainer {
margin-bottom: 15px;
margin-bottom: 15px;
width: 450px;
height: 250px;
margin-left: 23px;
}
#leftblock {
float: left;
margin-left: 5%;
width: 36%;
float: left;
/*margin-left: 5%;*/
width: 39%;
}
#text {
margin-left: 5px;
margin-left: 5px;
}
#searchresult a {
text-decoration: none;
color: black;
font-family: Helvetica;
font-size: 13px;
font-weight: normal;
text-decoration: none;
color: black;
font-family: Helvetica;
font-size: 13px;
font-weight: normal;
}
#rightblock {
float:right;
margin-right:5%;
width:54%;
margin-top: -43px;
float:right;
margin-right:3%;
width:54%;
margin-top: -43px;
}
#counter,#total {
color: red;
color: red;
}
#heading {
margin-top: 10px;
margin-top: 10px;
}
li{
padding: 5px;
list-style: none;
padding: 5px;
list-style: none;
}
#paginatedTable{
margin-top:0px;
margin-top:0px;
}
.sDomSearchBar{
margin-bottom: -10px;
margin-left: 41%;
margin-bottom: -10px;
margin-left: 41%;
}
.datatablerowhighlight {
background-color: #ECFFB3 !important;
background-color: #ECFFB3 !important;
}
.datatablerowhighlight td {
font-weight: bold !important;
font-weight: bold !important;
}
/*
.metallic{
background-color: #212D34;
color: white;
background-color: #212D34;
color: white;
}
*/
#leftUpper{
/*
border: 1px #3D454E solid;
border-top: 10px #3D454E solid;
background-color: #D9D9D9;
padding-left: 10px;
*/
border: 1px #3D454E solid;
border-top: 10px #3D454E solid;
background-color: #D9D9D9;
padding-left: 10px;
*/
}
#leftLower{
/*
border: 1px #3D454E solid;
border-top: 10px #3D454E solid;
/*
border: 1px #3D454E solid;
border-top: 10px #3D454E solid;
padding-left: 10px;
*/
padding-left: 10px;
*/
}
#bottomButtons{
width: 100%;
float:right;
margin: 20px 0 20px 0;
width: 100%;
float:right;
margin: 20px 0 20px 0;
}
#stopwordsdiv{
margin-top: 10px;
margin-left: 10px;
margin-top: 10px;
margin-left: 10px;
}
p.displayCounter{
padding-bottom: 4px;
border-bottom: 1px solid gray;
padding-bottom: 4px;
border-bottom: 1px solid gray;
}
#comparisonHeader, #entityHeader, #entitylevelheading, #comparisonParameter, #headerText{
color: #2485ae;
color: #2485ae;
}

View file

@ -1,85 +1,85 @@
@CHARSET "UTF-8";
thead th, tr.even td{
background-color: white;
background-color: white;
}
.paginatedtabs{
/* border-top: 1px #3D454E solid; */
text-align: center;
margin-bottom: 10px;
padding-top: 10px;
font-size: 1.2em;
/* border-top: 1px #3D454E solid; */
text-align: center;
margin-bottom: 10px;
padding-top: 10px;
font-size: 1.2em;
}
.paginatedtabs span{
padding-right: 5px;
cursor: pointer;
padding-right: 5px;
cursor: pointer;
}
.datatablewrapper td, th{
border-bottom: 1px #F1F2EE solid;
border-right: 1px #F1F2EE solid;
border-left: 1px #F1F2EE solid;
text-align: left;
padding: 5px;
font-size: 10px;
border-bottom: 1px #F1F2EE solid;
border-right: 1px #F1F2EE solid;
border-left: 1px #F1F2EE solid;
text-align: left;
padding: 5px;
font-size: 12px;
}
.showentries {
text-align: center;
margin-bottom: 10px;
text-align: center;
margin-bottom: 10px;
}
.searchbar{
margin-bottom: -10px;
text-align: left;
margin-bottom: -10px;
text-align: left;
}
.datatablewrapper th{
border-top: 1px #3D454E solid;
background:#F1F2ee;
font-weight:bold;
font-size:12px;
border-top: 1px #3D454E solid;
background:#F1F2ee;
font-weight:bold;
font-size:12px;
}
/*
.datatablewrapper th{
border-top: 1px #3D454E solid;
border-bottom: 1px #3D454E solid;
border-right: 1px #3D454E solid;
padding: 5px;
border-top: 1px #3D454E solid;
border-bottom: 1px #3D454E solid;
border-right: 1px #3D454E solid;
padding: 5px;
}
*/
.sorting_asc {
background: url('sort_asc.png') no-repeat center right;
background: url('sort_asc.png') no-repeat center right;
}
.sorting_desc {
background: url('sort_desc.png') no-repeat center right;
background: url('sort_desc.png') no-repeat center right;
}
.sorting {
background: url('sort_both.png') no-repeat center right;
background: url('sort_both.png') no-repeat center right;
}
.sorting_asc_disabled {
background: url('sort_asc_disabled.png') no-repeat center right;
background: url('sort_asc_disabled.png') no-repeat center right;
}
.sorting_desc_disabled {
background: url('sort_desc_disabled.png') no-repeat center right;
background: url('sort_desc_disabled.png') no-repeat center right;
}
/*
tr.odd {
background-color: #E2E4FF;
background-color: #E2E4FF;
}
tr.even {
background-color: white;
background-color: white;
}
*/

View file

@ -48,7 +48,6 @@
*/
function init(graphContainer) {
$('#yaxislabel').css("color", "#595B5B");
var optionSelected = $("select.comparisonValues option:selected").val();
// TODO: make use of the id on the select field instead of a generic one.
$("#comparisonParameter").text("Total Number of " + $("select.comparisonValues option:selected").val());
@ -395,7 +394,15 @@ function createLegendRow(entity, bottomDiv) {
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>');
/*
* We should display a further drill-down option only when available. In case of people
* there is no drill-down possible, so don't diaply the temporal graph icon.
* */
if (entity.visMode !== "PERSON") {
labelDiv.append('<a class="temporal-vis-url" href="' + getTemporalVisURL(entity) + '"><img src = "' + temporalGraphSmallIcon + '"/></a>');
}
var checkbox = $('<input>');
checkbox.attr('type', 'checkbox');
@ -456,19 +463,7 @@ function getVIVOURL(entity){
function getTemporalVisURL(entity) {
var result = '';
if(entity.visMode == "PERSON"){
result = subOrganizationVivoProfileURL + "uri="+ entity.entityURI;
} else{
result = subOrganizationTemporalGraphURL + "&" +
"uri=" + entity.entityURI ;
}
return result;
return subOrganizationTemporalGraphURL + "&uri=" + entity.entityURI ;
}
function getVIVOProfileURL(given_uri) {

View file

@ -81,7 +81,7 @@
<#-- variables passed from server-side code -->
<script language="JavaScript" type="text/javascript">
var contextPath = "${urls.base}";
var temporalGraphDownloadFile = "${TemporalGraphDownloadFile}"
var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
@ -92,79 +92,79 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
<script type="text/javascript">
$(document).ready(function() {
var jsonString = '${jsonContent}';
var organizationLabel = '${organizationLabel}';
/* 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');
$(document).ready(function() {
var jsonString = '${jsonContent}';
var organizationLabel = '${organizationLabel}';
/* 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);
/*
* When the intra-entity parameters are clicked,
* update the status accordingly.
*/
// initial display of the grid when the page loads
init(graphContainer);
/*
* When the intra-entity parameters are clicked,
* update the status accordingly.
*/
$("select.comparisonValues").click(function(){
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');
$("#comparisonParameter").text("Total Number of " + selectedValue);
$('#yaxislabel').html("Number of " + selectedValue).mbFlipText(false);
$('#yaxislabel').css("color", "#595B5B");
$('#comparisonHeader').html(selectedValue).css('font-weight', 'bold');
});
//click event handler for clear button
$("a#clear").click(function(){
clearRenderedObjects();
});
$("input[type=checkbox].easyDeselectCheckbox").live('click', function(){
var checkbox = $(this);
var checkboxValue = $(this).attr("value");
var linkedCheckbox = labelToCheckedEntities[checkboxValue];
//console.log('checkbox value is '+ checkboxValue);
var entityToBeRemoved = labelToEntityRecord[checkboxValue];
//click event handler for clear button
$("a#clear").click(function(){
clearRenderedObjects();
});
$("input[type=checkbox].easyDeselectCheckbox").live('click', function(){
var checkbox = $(this);
var checkboxValue = $(this).attr("value");
var linkedCheckbox = labelToCheckedEntities[checkboxValue];
//console.log('checkbox value is '+ 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();
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
updateCounter();
}
});
//parse the json object and pass it to loadData
jsonObject.prepare(jQuery.parseJSON(jsonString));
function performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox) {
removeUsedColor(entity);
removeUsedColor(entity);
removeEntityUnChecked(renderedObjects, entity);
removeLegendRow(checkbox);
removeCheckBoxFromGlobalSet(checkbox);
@ -174,8 +174,8 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
}
function performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox) {
getNextFreeColor(entity);
getNextFreeColor(entity);
//Generate the bar, checkbox and label for the legend.
createLegendRow(entity, $("#bottom"));
@ -183,183 +183,177 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
renderLineGraph(renderedObjects, entity);
labelToCheckedEntities[checkboxValue] = checkbox;
/*
* To highlight the rows belonging to selected entities.
* */
/*
* To highlight the rows belonging to selected entities.
* */
checkbox.closest("tr").addClass('datatablerowhighlight');
}
function performEntityCheckboxClickedRedrawActions() {
setTickSizeOfAxes();
checkIfColorLimitIsReached();
displayLineGraphs();
updateCounter();
}
}
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();
/*
calcMinandMaxYears(labelToEntityRecord, year);
yearRange = (year.max - year.min);
setLineWidthAndTickSize(yearRange, FlotOptions);
setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions);
*/
$(".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.'
}, {
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')) {
performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox);
} else {
performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox);
}
performEntityCheckboxClickedRedrawActions();
});
}
function loadData(jsonData) {
// var yearRange;
$.each(jsonData, function (index, val) {
setOfLabels.push(val.label);
labelToEntityRecord[val.label] = val;
});
getEntityVisMode(jsonData);
prepareTableForDataTablePagination(jsonData);
setEntityLevel();
/*
calcMinandMaxYears(labelToEntityRecord, year);
yearRange = (year.max - year.min);
setLineWidthAndTickSize(yearRange, FlotOptions);
setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions);
*/
$(".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.'
}, {
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')) {
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();
});
/*
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 style="width: 36%; padding-left:45px;"><a href="" id = "organizationMoniker"></a></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>
<#--
<option value="People" disabled="disabled">by People</option>
<option value="Item4" disabled="disabled">by Item4</option>
<option value="Item5" disabled="disabled">by Item5</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>&#035;{title}</h1>
<p>&#035;{text}</p>
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
</div>
<div id="warning-notification">
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
<h1>&#035;{title}</h1>
<p>&#035;{text}</p>
</div>
</div>
<h3>Who do you want to compare?</h3>
<div id="paginatedTable">
</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">
<h4 id="headerText" style="padding-left:60px;">Comparing <span id="comparisonHeader">Publications</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h4>
<div id="graphContainer" style="width: 450px; height: 250px;"></div>
<div id="yaxislabel"></div>
<div id="bottom" style="width: 450px; height: 350px;">
<div id="xaxislabel">Year</div>
<div id="bottomButtons">
<a id="clear" style="cursor:pointer;" class="temporalGraphLinks" >Remove All</a>
<a id="csv" href="${TemporalGraphDownloadFile}" class="temporalGraphLinks" >Save as CSV</a>
<#-- <a id="image" href = "" class="temporalGraphLinks" onClick="window.print()"> Save as Image</a>
--> </div><br/>
<h4><span id="comparisonParameter"></span></h4>
<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.</p>
</div>
</div>
<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>&#035;{title}</h1>
<p>&#035;{text}</p>
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
</div>
<div id="warning-notification">
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
<h1>&#035;{title}</h1>
<p>&#035;{text}</p>
</div>
</div>
<h3>Who do you want to compare?</h3>
<div id="paginatedTable"></div>
<br />
<a id="csv" href="${TemporalGraphDownloadFile}" class="temporalGraphLinks">Save as CSV</a>
</div>
<#--
<div id = "stopwordsdiv">
* The entity types core:Person, foaf:Organization have been excluded as they are too general.
</div>
-->
</div>
<div id="rightblock">
<h4 id="headerText">Comparing <span id="comparisonHeader">Publications</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h4>
<div id="temporal-graph">
<div id="yaxislabel"></div>
<div id="graphContainer"></div>
<div id="xaxislabel">Year</div>
</div>
<div id="bottom" style="width: 450px; height: 350px;">
<h4><span id="comparisonParameter"></span></h4>
<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.
<a id="clear" class="temporalGraphLinks">Clear</a></p>
</div>
</div>
</div>

View file

@ -66,161 +66,158 @@ var visualizationDataRoot = "${dataVisualizationURLRoot}";
$(document).ready(function(){
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) >
$("#coauth_table_container").empty().html('<img id="loadingData" width="auto" src="${loadingImageLink}" />');
</#if>
processProfileInformation("ego_label",
"ego_moniker",
"ego_profile_image",
jQuery.parseJSON(getWellFormedURLs("${egoURIParam}", "profile_info")));
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips <= 0) || (numOfAuthors?? && numOfAuthors <= 0) >
if ($('#ego_label').text().length > 0) {
setProfileName('no_coauthorships_person', $('#ego_label').text());
}
</#if>
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) >
$("#coauth_table_container").empty().html('<img id="loadingData" width="auto" src="${loadingImageLink}" />');
</#if>
processProfileInformation("ego_label",
"ego_moniker",
"ego_profile_image",
jQuery.parseJSON(getWellFormedURLs("${egoURIParam}", "profile_info")));
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips <= 0) || (numOfAuthors?? && numOfAuthors <= 0) >
if ($('#ego_label').text().length > 0) {
setProfileName('no_coauthorships_person', $('#ego_label').text());
}
</#if>
});
</script>
<div id="body">
<div id="ego_profile">
<#-- Label -->
<h2><span id="ego_label" class="author_name"></span></h2>
<#-- Moniker-->
<em id="ego_moniker" class="moniker"></em>
<div id="ego_profile">
<#-- Label -->
<h2><a href="${egoVivoProfileURL}"><span id="ego_label" class="author_name"></span></a></h2>
<#-- Moniker-->
<em id="ego_moniker" class="moniker"></em>
<br />
<img class="" src="${urls.images}/arrowBackIcon.gif" alt="arrow icon" /><a href="${egoVivoProfileURL}">Back to Profile</a>
</div>
<div class = "toggle_visualization">
<div id="coinvestigator_link_container">
<div class="collaboratorship-icon"><a href="${coprincipalinvestigatorURL}"><img src="${coInvestigatorIcon}" /></a></div>
<div class="collaboratorship-link">
</div>
<div class = "toggle_visualization">
<div id="coinvestigator_link_container">
<div class="collaboratorship-icon"><a href="${coprincipalinvestigatorURL}"><img src="${coInvestigatorIcon}" /></a></div>
<div class="collaboratorship-link">
<h3><a href="${coprincipalinvestigatorURL}">Co-Investigator Network</a></h3>
</div>
</div>
</div>
<div style="clear:both;"></div>
<#if (numOfAuthors?? && numOfAuthors > 0) >
<div class="sub_headings"><h3>Co-Author Network </h3></div>
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) || (numOfAuthors?? && numOfAuthors > 0) >
<div class = "graphml-file-link"><a href="${egoCoAuthorshipNetworkDataFileURL}">(GraphML File)</a></div>
<#else>
</div>
</div>
</div>
<div style="clear:both;"></div>
<#if (numOfAuthors?? && numOfAuthors > 0) >
<div class="sub_headings"><h3>Co-Author Network </h3></div>
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) || (numOfAuthors?? && numOfAuthors > 0) >
<div class = "graphml-file-link"><a href="${egoCoAuthorshipNetworkDataFileURL}">(GraphML File)</a></div>
<#else>
<#if numOfAuthors?? && numOfAuthors <= 0 >
<#assign authorsText = "multi-author" />
</#if>
<div id="no_coauthorships">Currently there are no ${authorsText!} papers for
<a href="${egoVivoProfileURL}"><span id="no_coauthorships_person" class="author_name">this author</span></a>
in the VIVO database.
</div>
</#if>
<#else>
<span id="no_coauthorships">Currently there are no papers for
<a href="${egoVivoProfileURL}"><span id="no_coauthorships_person" class="author_name">this author</span></a> in the
VIVO database.
</span>
</#if>
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) || (numOfAuthors?? && numOfAuthors > 0) >
<div id="bodyPannel">
<div id="visPanel">
<script language="JavaScript" type="text/javascript">
<!--
renderCollaborationshipVisualization();
//-->
</script>
</div>
<div id="dataPanel">
<h4 id ="profileTitle">Profile</h4>
<div id="data-panel-content">
<div id="profileImage" class="thumbnail"></div>
<h4><span id="authorName" class="neutral_author_name">&nbsp;</span></h4>
<em id="profileMoniker" class="moniker"></em>
<div><a href="#" id="profileUrl">VIVO profile</a> | <a href="#" id="coAuthorshipVisUrl">Co-author network</a></div>
<#if numOfAuthors?? && numOfAuthors <= 0 >
<#assign authorsText = "multi-author" />
</#if>
<div id="no_coauthorships">Currently there are no ${authorsText!} papers for
<a href="${egoVivoProfileURL}"><span id="no_coauthorships_person" class="author_name">this author</span></a>
in the VIVO database.
</div>
</#if>
<#else>
<span id="no_coauthorships">Currently there are no papers for
<a href="${egoVivoProfileURL}"><span id="no_coauthorships_person" class="author_name">this author</span></a> in the
VIVO database.
</span>
</#if>
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) || (numOfAuthors?? && numOfAuthors > 0) >
<div id="bodyPannel">
<div id="visPanel">
<script language="JavaScript" type="text/javascript">
<!--
renderCollaborationshipVisualization();
//-->
</script>
</div>
<div id="dataPanel">
<h4 id ="profileTitle">Profile</h4>
<div id="data-panel-content">
<div id="profileImage" class="thumbnail"></div>
<h4><span id="authorName" class="neutral_author_name">&nbsp;</span></h4>
<em id="profileMoniker" class="moniker"></em>
<div><a href="#" id="profileUrl">VIVO profile</a> | <a href="#" id="coAuthorshipVisUrl">Co-author network</a></div>
<div class="author_stats" id="num_works"><span class="numbers" style="width: 40px;" id="works"></span>&nbsp;&nbsp;
<span class="author_stats_text">Publication(s)</span></div>
<div class="author_stats" id="num_authors"><span class="numbers" style="width: 40px;" id="coAuthors"></span>
&nbsp;&nbsp;<span class="author_stats_text">Co-author(s)</span></div>
<div class="author_stats" id="fPub" style="visibility:hidden">
<span class="numbers" style="width:40px;" id="firstPublication"></span>&nbsp;&nbsp;<span>First Publication</span></div>
<div class="author_stats" id="lPub" style="visibility:hidden"><span class="numbers" style="width:40px;" id="lastPublication"></span>
&nbsp;&nbsp;<span>Last Publication</span></div>
<div id="incomplete-data">Note: This information is based solely on publications which have been loaded into the VIVO system.
This may only be a small sample of the person's total work. </div>
</div>
</div>
</div>
</#if>
<#-- Sparkline -->
<div id="sparkline-container">
<#assign displayTable = false />
<#assign sparklineVO = egoPubSparklineVO />
<div id="publication-count-sparkline-include"><#include "personPublicationSparklineContent.ftl"></div>
<div class="author_stats" id="num_works"><span class="numbers" style="width: 40px;" id="works"></span>&nbsp;&nbsp;
<span class="author_stats_text">Publication(s)</span></div>
<div class="author_stats" id="num_authors"><span class="numbers" style="width: 40px;" id="coAuthors"></span>
&nbsp;&nbsp;<span class="author_stats_text">Co-author(s)</span></div>
<div class="author_stats" id="fPub" style="visibility:hidden">
<span class="numbers" style="width:40px;" id="firstPublication"></span>&nbsp;&nbsp;<span>First Publication</span></div>
<div class="author_stats" id="lPub" style="visibility:hidden"><span class="numbers" style="width:40px;" id="lastPublication"></span>
&nbsp;&nbsp;<span>Last Publication</span></div>
<div id="incomplete-data">Note: This information is based solely on publications which have been loaded into the VIVO system.
This may only be a small sample of the person's total work. </div>
</div>
</div>
</div>
</#if>
<#assign sparklineVO = uniqueCoauthorsSparklineVO />
<div id="coauthor-count-sparkline-include"><#include "coAuthorshipSparklineContent.ftl"></div>
</div>
<#if (numOfAuthors?? && numOfAuthors > 0) >
<#if (numOfAuthors?? && numOfAuthors > 0) >
<div class="vis_stats">
<div class="sub_headings" id="table_heading"><h3>Tables</h3></div>
<div class="vis-tables">
<p id="publications_table_container" class="datatable">
<#-- Sparkline -->
<div id="sparkline-container">
<#assign displayTable = false />
<#assign sparklineVO = egoPubSparklineVO />
<div id="publication-count-sparkline-include"><#include "personPublicationSparklineContent.ftl"></div>
<#assign sparklineVO = uniqueCoauthorsSparklineVO />
<div id="coauthor-count-sparkline-include"><#include "coAuthorshipSparklineContent.ftl"></div>
</div>
<div class="vis_stats">
<div class="sub_headings" id="table_heading"><h3>Tables</h3></div>
<div class="vis-tables">
<p id="publications_table_container" class="datatable">
<#assign tableID = "publication_data_table" />
<#assign tableCaption = "Publications per year " />
<#assign tableActivityColumnName = "Publications" />
<#assign tableContent = egoPubSparklineVO.yearToActivityCount />
<#assign fileDownloadLink = egoPubSparklineVO.downloadDataLink />
<#include "yearToActivityCountTable.ftl">
<#assign tableID = "publication_data_table" />
<#assign tableCaption = "Publications per year " />
<#assign tableActivityColumnName = "Publications" />
<#assign tableContent = egoPubSparklineVO.yearToActivityCount />
<#assign fileDownloadLink = egoPubSparklineVO.downloadDataLink />
<#include "yearToActivityCountTable.ftl">
</p>
</div>
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) >
<div class="vis-tables">
<p id="coauth_table_container" class="datatable"></p>
</div>
</#if>
<div style="clear:both"></div>
</div>
</#if>
</p>
</div>
<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) >
<div class="vis-tables">
<p id="coauth_table_container" class="datatable"></p>
</div>
</#if>
<div style="clear:both"></div>
</div>
</#if>
</div>

View file

@ -63,163 +63,163 @@ var visualizationDataRoot = "${dataVisualizationURLRoot}";
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) >
$("#coinve_table_container").empty().html('<img id="loadingData" width="auto" src="${loadingImageLink}" />');
</#if>
processProfileInformation("ego_label",
"ego_moniker",
"ego_profile_image",
jQuery.parseJSON(getWellFormedURLs("${egoURIParam}", "profile_info")));
<#if (numOfCoInvestigations?? && numOfCoInvestigations <= 0) || (numOfInvestigators?? && numOfInvestigators <= 0) >
if ($('#ego_label').text().length > 0) {
setProfileName('no_coinvestigations_person', $('#ego_label').text());
}
</#if>
<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) >
$("#coinve_table_container").empty().html('<img id="loadingData" width="auto" src="${loadingImageLink}" />');
</#if>
processProfileInformation("ego_label",
"ego_moniker",
"ego_profile_image",
jQuery.parseJSON(getWellFormedURLs("${egoURIParam}", "profile_info")));
<#if (numOfCoInvestigations?? && numOfCoInvestigations <= 0) || (numOfInvestigators?? && numOfInvestigators <= 0) >
if ($('#ego_label').text().length > 0) {
setProfileName('no_coinvestigations_person', $('#ego_label').text());
}
</#if>
});
</script>
<div id="body">
<div id="ego_profile">
<#-- Label -->
<h2><span id="ego_label" class="investigator_name"></span></h2>
<#-- Moniker-->
<em id="ego_moniker" class="moniker"></em>
<br />
<img class="" src="${urls.images}/arrowBackIcon.gif" alt="arrow icon" /><a href="${egoVivoProfileURL}">Back to Profile</a>
</div>
<div class = "toggle_visualization">
<div id="coauthorship_link_container">
<div class="collaboratorship-icon"><a href="${coauthorshipURL}"><img src="${coAuthorIcon}" /></a></div>
<div class="collaboratorship-link">
<div id="ego_profile">
<#-- Label -->
<h2><a href="${egoVivoProfileURL}"><span id="ego_label" class="investigator_name"></span></a></h2>
<#-- Moniker-->
<em id="ego_moniker" class="moniker"></em>
</div>
<div class = "toggle_visualization">
<div id="coauthorship_link_container">
<div class="collaboratorship-icon"><a href="${coauthorshipURL}"><img src="${coAuthorIcon}" /></a></div>
<div class="collaboratorship-link">
<h3><a href="${coauthorshipURL}">Co-Author Network</a></h3>
</div>
</div>
</div>
<div style="clear:both;"></div>
<#if (numOfInvestigators?? && numOfInvestigators > 0) >
<div class="sub_headings"><h3 >Co-Investigator Network </h3></div>
<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) || (numOfInvestigators?? && numOfInvestigators > 0) >
<div class = "graphml-file-link"><a href="${egoCoInvestigationNetworkDataFileURL}">(GraphML File)</a></div>
<#else>
</div>
</div>
</div>
<div style="clear:both;"></div>
<#if (numOfInvestigators?? && numOfInvestigators > 0) >
<div class="sub_headings"><h3 >Co-Investigator Network </h3></div>
<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) || (numOfInvestigators?? && numOfInvestigators > 0) >
<div class = "graphml-file-link"><a href="${egoCoInvestigationNetworkDataFileURL}">(GraphML File)</a></div>
<#else>
<#if numOfInvestigators?? && numOfInvestigators <= 0 >
<#assign investigatorsText = "multi-investigator" />
</#if>
<span id="no_coinvestigations">Currently there are no ${investigatorsText!} grants for
<a href="${egoVivoProfileURL}"><span id="no_coinvestigations_person" class="investigator_name">this investigator</span></a>
in the VIVO database.
</span>
</#if>
<#else>
<span id="no_coinvestigations">Currently there are no grants for
<a href="${egoVivoProfileURL}"><span id="no_coinvestigations_person" class="investigator_name">this investigator</span></a> in the
VIVO database.
</span>
</#if>
<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) || (numOfInvestigators?? && numOfInvestigators > 0) >
<div id="bodyPannel">
<div id="visPanel">
<script language="JavaScript" type="text/javascript">
<!--
renderCollaborationshipVisualization();
//-->
</script>
</div>
<div id="dataPanel">
<h4 id ="profileTitle">Profile</h4>
<div id="data-panel-content">
<div id="profileImage" class="thumbnail"></div>
<h4><span id="investigatorName" class="neutral_investigator_name">&nbsp;</span></h4>
<em id="profileMoniker" class="moniker"></em>
<div><a href="#" id="profileUrl">VIVO profile</a> | <a href="#" id="coInvestigationVisUrl">Co-investigator network</a></div>
<#if numOfInvestigators?? && numOfInvestigators <= 0 >
<#assign investigatorsText = "multi-investigator" />
</#if>
<span id="no_coinvestigations">Currently there are no ${investigatorsText!} grants for
<a href="${egoVivoProfileURL}"><span id="no_coinvestigations_person" class="investigator_name">this investigator</span></a>
in the VIVO database.
</span>
</#if>
<#else>
<span id="no_coinvestigations">Currently there are no grants for
<a href="${egoVivoProfileURL}"><span id="no_coinvestigations_person" class="investigator_name">this investigator</span></a> in the
VIVO database.
</span>
</#if>
<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) || (numOfInvestigators?? && numOfInvestigators > 0) >
<div id="bodyPannel">
<div id="visPanel">
<script language="JavaScript" type="text/javascript">
<!--
renderCollaborationshipVisualization();
//-->
</script>
</div>
<div id="dataPanel">
<h4 id ="profileTitle">Profile</h4>
<div id="data-panel-content">
<div id="profileImage" class="thumbnail"></div>
<h4><span id="investigatorName" class="neutral_investigator_name">&nbsp;</span></h4>
<em id="profileMoniker" class="moniker"></em>
<div><a href="#" id="profileUrl">VIVO profile</a> | <a href="#" id="coInvestigationVisUrl">Co-investigator network</a></div>
<div class="investigator_stats" id="num_works"><span class="numbers" style="width: 40px;" id="works"></span>&nbsp;&nbsp;
<span class="investigator_stats_text">Grant(s)</span></div>
<div class="investigator_stats" id="num_investigators"><span class="numbers" style="width: 40px;" id="coInvestigators"></span>
&nbsp;&nbsp;<span class="investigator_stats_text">Co-investigator(s)</span></div>
<div class="investigator_stats" id="fGrant" style="visibility:hidden">
<span class="numbers" style="width:40px;" id="firstGrant"></span>&nbsp;&nbsp;<span>First Grant</span></div>
<div class="investigator_stats" id="lGrant" style="visibility:hidden"><span class="numbers" style="width:40px;" id="lastGrant"></span>
&nbsp;&nbsp;<span>Last Grant</span></div>
<div id="incomplete-data">Note: This information is based solely on grants which have been loaded into the VIVO system.
This may only be a small sample of the person's total work. </div>
</div>
</div>
</div>
</#if>
<div class="investigator_stats" id="num_works"><span class="numbers" style="width: 40px;" id="works"></span>&nbsp;&nbsp;
<span class="investigator_stats_text">Grant(s)</span></div>
<div class="investigator_stats" id="num_investigators"><span class="numbers" style="width: 40px;" id="coInvestigators"></span>
&nbsp;&nbsp;<span class="investigator_stats_text">Co-investigator(s)</span></div>
<div class="investigator_stats" id="fGrant" style="visibility:hidden">
<span class="numbers" style="width:40px;" id="firstGrant"></span>&nbsp;&nbsp;<span>First Grant</span></div>
<div class="investigator_stats" id="lGrant" style="visibility:hidden"><span class="numbers" style="width:40px;" id="lastGrant"></span>
&nbsp;&nbsp;<span>Last Grant</span></div>
<div id="incomplete-data">Note: This information is based solely on grants which have been loaded into the VIVO system.
This may only be a small sample of the person's total work. </div>
</div>
</div>
</div>
</#if>
<#-- Sparkline -->
<div id="sparkline-container">
<#assign displayTable = false />
<#assign sparklineVO = egoGrantSparklineVO />
<div id="grant-count-sparkline-include"><#include "personGrantSparklineContent.ftl"></div>
<#assign sparklineVO = uniqueCoInvestigatorsSparklineVO />
<div id="coinvestigator-count-sparkline-include"><#include "coInvestigationSparklineContent.ftl"></div>
</div>
<#if (numOfInvestigators?? && numOfInvestigators > 0) >
<#if (numOfInvestigators?? && numOfInvestigators > 0) >
<div class="vis_stats">
<div class="sub_headings" id="table_heading"><h3>Tables</h3></div>
<div class="vis-tables">
<#-- Sparkline -->
<div id="sparkline-container">
<#assign displayTable = false />
<#assign sparklineVO = egoGrantSparklineVO />
<div id="grant-count-sparkline-include"><#include "personGrantSparklineContent.ftl"></div>
<#assign sparklineVO = uniqueCoInvestigatorsSparklineVO />
<div id="coinvestigator-count-sparkline-include"><#include "coInvestigationSparklineContent.ftl"></div>
</div>
<p id="grants_table_container" class="datatable">
<div class="vis_stats">
<div class="sub_headings" id="table_heading"><h3>Tables</h3></div>
<div class="vis-tables">
<#assign tableID = "grant_data_table" />
<#assign tableCaption = "Grants per year " />
<#assign tableActivityColumnName = "Grants" />
<#assign tableContent = egoGrantSparklineVO.yearToActivityCount />
<#assign fileDownloadLink = egoGrantSparklineVO.downloadDataLink />
<#include "yearToActivityCountTable.ftl">
<p id="grants_table_container" class="datatable">
</p>
</div>
<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) >
<div class="vis-tables">
<p id="coinve_table_container" class="datatable"></p>
</div>
</#if>
<div style="clear:both"></div>
</div>
</#if>
<#assign tableID = "grant_data_table" />
<#assign tableCaption = "Grants per year " />
<#assign tableActivityColumnName = "Grants" />
<#assign tableContent = egoGrantSparklineVO.yearToActivityCount />
<#assign fileDownloadLink = egoGrantSparklineVO.downloadDataLink />
<#include "yearToActivityCountTable.ftl">
</p>
</div>
<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) >
<div class="vis-tables">
<p id="coinve_table_container" class="datatable"></p>
</div>
</#if>
<div style="clear:both"></div>
</div>
</#if>
</div>