1. Did a refactor of the javascript code for temporal graph vis.
2. Implemented the ellipsis feature for the legend row (containing the bar & label for selected entities). If the label is too long it will try to fit in the provided space & append "..." at the end.
This commit is contained in:
cdtank
parent
b2d569b110
commit
84f5b029fa
3 changed files with 139 additions and 109 deletions
|
|
@ -91,13 +91,25 @@ position: inherit;
|
|||
#checkbox{
|
||||
float:left;
|
||||
}
|
||||
#label {
|
||||
|
||||
.easy-deselect-label {
|
||||
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;
|
||||
}
|
||||
|
||||
.easy-deselect-label .entity-label {
|
||||
color:red;
|
||||
}
|
||||
|
||||
#searchresult {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
|
@ -127,13 +139,6 @@ position: inherit;
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
#label a,#text {
|
||||
/* text-decoration: none; */
|
||||
color: black;
|
||||
font-family: Helvetica;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#rightblock {
|
||||
float:right;
|
||||
margin-right:5%;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,41 @@
|
|||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||
(function ($) {
|
||||
$.fn.ellipsis = function () {
|
||||
return this.each(function () {
|
||||
var el = $(this);
|
||||
|
||||
if (el.css("overflow") == "hidden") {
|
||||
|
||||
var text = el.html();
|
||||
|
||||
var multiline = el.hasClass('multiline');
|
||||
var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').width(multiline ? el.width() : 'auto').height(multiline ? 'auto' : el.height());
|
||||
|
||||
el.after(t);
|
||||
|
||||
function height() {
|
||||
return t.height() > el.height();
|
||||
};
|
||||
|
||||
function width() {
|
||||
return t.width() > el.width();
|
||||
};
|
||||
|
||||
var func = multiline ? height : width;
|
||||
|
||||
|
||||
while (text.length > 0 && func()) {
|
||||
text = text.substr(0, text.length - 1);
|
||||
t.html(text + "...");
|
||||
}
|
||||
|
||||
el.html(t.html());
|
||||
t.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
|
||||
|
||||
/**
|
||||
|
||||
|
|
@ -336,6 +373,7 @@ function setTickSizeOfYAxis(maxValue, flotOptions){
|
|||
flotOptions.yaxis.tickSize = 10;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a div that represents the rectangular bar A hidden input class that is
|
||||
* used to pass the value and a label beside the checkbox.
|
||||
|
|
@ -343,71 +381,69 @@ function setTickSizeOfYAxis(maxValue, flotOptions){
|
|||
* @param {Object}
|
||||
* entityLabel
|
||||
*/
|
||||
function createGraphic(entity, bottomDiv) {
|
||||
|
||||
var parentP = $('<p>');
|
||||
parentP.attr('id', slugify(entity.label));
|
||||
function createLegendRow(entity, bottomDiv) {
|
||||
|
||||
var labelDiv = $('<div>')
|
||||
labelDiv.attr('id', 'label');
|
||||
labelDiv.html('<a id="entityURL" href="' + getVIVOURL(entity) + '"></a>');
|
||||
// labelDiv.children('a').after('<a id="vivoURL" href="' + getVIVOURL(entity) + '"></a>');
|
||||
labelDiv.children('a').after('<a id="vivoURL" href="' + getEntityURL(entity) + '"><img src = "'+ temporalGraphSmallIcon +'"/></a>');
|
||||
var parentP = $('<p>');
|
||||
parentP.attr('id', slugify(entity.label));
|
||||
|
||||
var checkbox = $('<input>');
|
||||
checkbox.attr('type','checkbox');
|
||||
checkbox.attr('checked', true);
|
||||
checkbox.attr('id','checkbox');
|
||||
checkbox.attr('class', 'easyDeselectCheckbox');
|
||||
checkbox.attr('value', entity.label);
|
||||
console.log("entity label in create", entity.label);
|
||||
|
||||
var hiddenLabel = $('<label>');
|
||||
hiddenLabel.attr('type', 'hidden');
|
||||
hiddenLabel.attr('value', entity.label);
|
||||
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>');
|
||||
|
||||
var barDiv = $('<div>');
|
||||
barDiv.attr('id', 'bar');
|
||||
var checkbox = $('<input>');
|
||||
checkbox.attr('type', 'checkbox');
|
||||
checkbox.attr('checked', true);
|
||||
checkbox.attr('id', 'checkbox');
|
||||
checkbox.attr('class', 'easyDeselectCheckbox');
|
||||
checkbox.attr('value', entity.label);
|
||||
|
||||
var numAttributeText = $('<span>');
|
||||
numAttributeText.attr('id', 'text');
|
||||
var hiddenLabel = $('<label>');
|
||||
hiddenLabel.attr('type', 'hidden');
|
||||
hiddenLabel.attr('value', entity.label);
|
||||
|
||||
parentP.append(checkbox);
|
||||
parentP.append(labelDiv);
|
||||
parentP.append(hiddenLabel);
|
||||
parentP.append(barDiv);
|
||||
parentP.append(numAttributeText);
|
||||
var barDiv = $('<div>');
|
||||
barDiv.attr('id', 'bar');
|
||||
|
||||
bottomDiv.children('p.displayCounter').after(parentP);
|
||||
var numAttributeText = $('<span>');
|
||||
numAttributeText.attr('id', 'text');
|
||||
|
||||
return hiddenLabel;
|
||||
parentP.append(checkbox);
|
||||
parentP.append(labelDiv);
|
||||
parentP.append(hiddenLabel);
|
||||
parentP.append(barDiv);
|
||||
parentP.append(numAttributeText);
|
||||
|
||||
bottomDiv.children('p.displayCounter').after(parentP);
|
||||
|
||||
renderBarAndLabel(entity, barDiv, labelDiv, numAttributeText);
|
||||
}
|
||||
|
||||
/*function getVIVOURL(entity){
|
||||
/**
|
||||
* generate the corresponding bar (representing area under the linegraph)
|
||||
* and label of the entity clicked
|
||||
*/
|
||||
|
||||
function renderBarAndLabel(entity, divBar, divLabel, spanElement) {
|
||||
|
||||
var sum = calcSumOfComparisonParameter(entity);
|
||||
var normalizedWidth = getNormalizedWidth(entity, sum);
|
||||
|
||||
divBar.css("background-color", colorToAssign);
|
||||
divBar.css("width", normalizedWidth);
|
||||
|
||||
var entityLabelForLegend = divLabel.find(".entity-label-url");
|
||||
entityLabelForLegend.html(entity.label);
|
||||
entityLabelForLegend.ellipsis();
|
||||
entityLabelForLegend.wrap("<a class='entity-url' href='" + getVIVOURL(entity) + "'></a>");
|
||||
|
||||
spanElement.text(sum).css("font-size", "0.8em").css("color", "#595B5B");
|
||||
|
||||
var result = "/vivo1/individual?uri="+entity.entityURI+"&home=1";
|
||||
return result;
|
||||
}
|
||||
|
||||
function getEntityURL(entity) {
|
||||
|
||||
var result = '', path = '', uri = '';
|
||||
|
||||
if(entity.visMode == "PERSON"){
|
||||
path = "/vivo1/individual?";
|
||||
uri = "uri=" + entity.entityURI;
|
||||
var home = "&home=1";
|
||||
result = (path + uri + home);
|
||||
}else{
|
||||
path = "/vivo1/visualizationfm?";
|
||||
var visAndRenderMode = "vis=entity_comparison&render_mode=standalone&";
|
||||
var visMode = "vis_mode=" + entity.visMode + "&";
|
||||
uri = "uri=" + entity.entityURI;
|
||||
result = (path + visAndRenderMode + visMode + uri);
|
||||
}
|
||||
return result;
|
||||
}*/
|
||||
|
||||
function getVIVOURL(entity){
|
||||
|
||||
var result = subOrganizationVivoProfileURL + "uri="+entity.entityURI;
|
||||
|
|
@ -415,7 +451,7 @@ function getVIVOURL(entity){
|
|||
return result;
|
||||
}
|
||||
|
||||
function getEntityURL(entity) {
|
||||
function getTemporalVisURL(entity) {
|
||||
|
||||
var result = '';
|
||||
|
||||
|
|
@ -423,7 +459,7 @@ function getEntityURL(entity) {
|
|||
|
||||
result = subOrganizationVivoProfileURL + "uri="+ entity.entityURI;
|
||||
|
||||
}else{
|
||||
} else{
|
||||
|
||||
result = subOrganizationTemporalGraphURL+ "&vis_mode=" + entity.visMode + "&" +
|
||||
"uri=" + entity.entityURI ;
|
||||
|
|
@ -435,7 +471,7 @@ function getEntityURL(entity) {
|
|||
function getVIVOProfileURL(given_uri) {
|
||||
|
||||
finalURL = $.ajax({
|
||||
url: contextPath + "/visualization",
|
||||
url: contextPath + "/visualizationfm",
|
||||
data: ({vis: "utilities", vis_mode: "PROFILE_URL", uri: given_uri}),
|
||||
dataType: "text",
|
||||
async: false,
|
||||
|
|
@ -463,9 +499,9 @@ function slugify(textToBeSlugified) {
|
|||
* @param {Object}
|
||||
* span
|
||||
*/
|
||||
function removeGraphic(checkbox) {
|
||||
function removeLegendRow(checkbox) {
|
||||
|
||||
//console.log("removeGraphic is called for "+$(checkbox).attr("value"));
|
||||
//console.log("removeLegendRow is called for "+$(checkbox).attr("value"));
|
||||
var pToBeRemovedIdentifier = $(checkbox).attr("value");
|
||||
$('p#' + slugify(pToBeRemovedIdentifier)).remove();
|
||||
|
||||
|
|
@ -553,34 +589,6 @@ function getNextFreeColor(entity){
|
|||
colors[entity.label] = colorToAssign;
|
||||
}
|
||||
|
||||
/**
|
||||
* generate the corresponding bar (representing area under the linegraph)
|
||||
* and label of the entity clicked
|
||||
* @param entity
|
||||
* @param divBar
|
||||
* @param divLabel
|
||||
* @return
|
||||
*/
|
||||
function generateBarAndLabel(entity, divBar, divLabel,checkbox, spanElement){
|
||||
|
||||
var sum = calcSumOfComparisonParameter(entity);
|
||||
var normalizedWidth = getNormalizedWidth(entity, sum);
|
||||
var checkboxValue = $(checkbox).attr("value");
|
||||
|
||||
//append a div and modify its css
|
||||
divBar.css("background-color", colorToAssign);
|
||||
divBar.css("width", normalizedWidth);
|
||||
divLabel.children("a#entityURL").html(checkboxValue + " ").css("color", "#333");
|
||||
// divLabel.children("a#entityURL").css("color", "#333").css("text-decoration", none);
|
||||
// divLabel.children("a#entityURL").autoEllipsis();
|
||||
divLabel.children("a#entityURL");
|
||||
createVIVOProfileImage(divLabel.children("a#`"));
|
||||
divLabel.children("a").css("font-size", "0.8em");
|
||||
spanElement.text(sum).css("font-size", "0.8em").css("color", "#595B5B");
|
||||
checkbox.next('a').css("font-weight", "bold");
|
||||
|
||||
}
|
||||
|
||||
function createVIVOProfileImage(url){
|
||||
|
||||
var vivoImage = $(url);
|
||||
|
|
@ -674,7 +682,7 @@ function clearRenderedObjects(){
|
|||
updateRowHighlighter(val);
|
||||
removeUsedColor(labelToEntityRecord[$(val).attr("value")]);
|
||||
removeEntityUnChecked(renderedObjects, labelToEntityRecord[$(val).attr("value")]);
|
||||
removeGraphic(val);
|
||||
removeLegendRow(val);
|
||||
displayLineGraphs();
|
||||
//console.log(index);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,6 +94,8 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
|
||||
$(document).ready(function() {
|
||||
|
||||
//$(".ellipsis").ellipsis();
|
||||
|
||||
var jsonString = '${jsonContent}';
|
||||
var organizationLabel = '${organizationLabel}';
|
||||
|
||||
|
|
@ -150,7 +152,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
updateRowHighlighter(linkedCheckbox);
|
||||
removeUsedColor(entityToBeRemoved);
|
||||
removeEntityUnChecked(renderedObjects, entityToBeRemoved);
|
||||
removeGraphic(linkedCheckbox);
|
||||
removeLegendRow(linkedCheckbox);
|
||||
removeCheckBoxFromGlobalSet(linkedCheckbox);
|
||||
$(linkedCheckbox).attr('checked', false);
|
||||
checkIfColorLimitIsReached();
|
||||
|
|
@ -211,20 +213,13 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
var checkboxValue = $(this).attr("value");
|
||||
var entity = labelToEntityRecord[checkboxValue];
|
||||
|
||||
//Dynamically generate the bar, checkbox and label.
|
||||
|
||||
var bottomDiv = $("#bottom");
|
||||
var hiddenLabel = createGraphic(entity, bottomDiv);
|
||||
|
||||
|
||||
var divBar = hiddenLabel.next();
|
||||
var divLabel = hiddenLabel.prev();
|
||||
var spanElement = divBar.next('span');
|
||||
|
||||
if (checkbox.is(':checked')) {
|
||||
|
||||
getNextFreeColor(entity);
|
||||
generateBarAndLabel(entity, divBar, divLabel,checkbox, spanElement) ;
|
||||
|
||||
//Dynamically generate the bar, checkbox and label.
|
||||
createLegendRow(entity, $("#bottom"));
|
||||
|
||||
renderLineGraph(renderedObjects, entity);
|
||||
labelToCheckedEntities[checkboxValue] = checkbox;
|
||||
|
||||
|
|
@ -232,7 +227,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
|
||||
removeUsedColor(entity);
|
||||
removeEntityUnChecked(renderedObjects, entity);
|
||||
removeGraphic(checkbox);
|
||||
removeLegendRow(checkbox);
|
||||
removeCheckBoxFromGlobalSet(checkbox);
|
||||
|
||||
}
|
||||
|
|
@ -251,6 +246,25 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.entity-label-url {
|
||||
width: 125px;
|
||||
margin-right: 10px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.ellipsis.multiline {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="body">
|
||||
|
||||
<h2 style="width: 36%; padding-left:45px;"><a href="" id = "organizationMoniker"></a></h2>
|
||||
|
|
@ -324,4 +338,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue