From 4164bae2d4a3c7865926d48582686d3da4ace7a4 Mon Sep 17 00:00:00 2001
From: juanf <juanf>
Date: Tue, 25 Feb 2014 13:52:19 +0000
Subject: [PATCH] BIS-604 / SP-1173: ELN UI - Hierarchical View - Data
Visualization
SVN: 30599
---
.../as/webapps/newbrowser/html/css/style.css | 18 ++++++-
.../newbrowser/html/js/UI/Inspector.js | 25 ++++++---
.../newbrowser/html/js/UI/SampleHierarchy.js | 54 +++++++++++++++++--
3 files changed, 83 insertions(+), 14 deletions(-)
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css
index 21a49659bf1..297c672999b 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css
@@ -321,14 +321,28 @@ h1, h2, legend {
margin-left: 20px;
}
+
+div.inspectorCondensed {
+ text-decoration: none;
+ color: #000;
+ display: block;
+ overflow: hidden;
+ position: relative;
+}
+
+div.inspectorCondensed > .table th,
+div.inspectorCondensed > .table td {
+ border-top: none;
+ line-height: 14px;
+}
+
div.inspector {
text-decoration: none;
color: #000;
display: block;
width: 400px;
overflow: hidden;
- margin-top: 10px;
- padding: 1em;
+ padding: 0.5em;
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/Inspector.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/Inspector.js
index 230a46f25d7..282d09fa0ed 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/Inspector.js
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/Inspector.js
@@ -232,7 +232,7 @@ function Inspector(serverFacade, containerId, profile) {
return allParentCodesAsText;
}
- this.getInspectorTable = function(entity, showClose, withColors, withLinks) {
+ this.getInspectorTable = function(entity, showClose, withColors, withLinks, optionalTitle, isCondensed) {
var defaultColor = null;
if(!withColors) {
@@ -243,7 +243,15 @@ function Inspector(serverFacade, containerId, profile) {
var inspector = "";
var divID = entity.sampleTypeCode + "_" + entity.code + "_INSPECTOR";
- inspector += "<div id='"+divID+"' class='inspector' style='background-color:" + defaultColor + ";' >";
+
+ var inspectorClass = null;
+ if(isCondensed) {
+ inspectorClass = 'inspectorCondensed';
+ } else {
+ inspectorClass = 'inspector';
+ }
+
+ inspector += "<div id='"+divID+"' class='" + inspectorClass + "' style='background-color:" + defaultColor + ";' >";
if(showClose) {
var removeButton = "<span class='btn inspectorToolbar btn-inverse' style='float:left; margin: 2px' onclick='mainController.inspector.closeNewInspector(\""+entity.id+"\")'><i class='icon-remove icon-white'></i></span>";
@@ -255,20 +263,21 @@ function Inspector(serverFacade, containerId, profile) {
inspector += toogleButton;
}
- inspector += "<strong>" + entity.code + "</strong>";
+ if(optionalTitle) {
+ inspector += optionalTitle;
+ } else {
+ inspector += "<strong>" + entity.code + "</strong>";
+ }
-
if(withLinks) {
var printButton = "<span class='btn inspectorToolbar' style='float:right; margin: 2px;' onclick='mainController.inspector.printInspector(\""+entity.permId+"\")'><i class='icon-print'></i></span>";
inspector += printButton;
- var viewButton = "<span class='btn inspectorToolbar' style='float:right; margin: 2px' onclick='mainController.inspector.showViewSamplePage(\""+entity.permId+"\")'><i class='icon-edit'></i></span>";
+ var viewButton = "<span class='btn inspectorToolbar' style='float:right; margin: 2px' onclick='mainController.inspector.showViewSamplePage(\""+entity.permId+"\")'><i class='icon-eye-open'></i></span>";
inspector += viewButton;
}
-
-
- inspector += "<table id='" + entity.permId +"_TOOGLE' class='properties table'>"
+ inspector += "<table id='" + entity.permId +"_TOOGLE' class='properties table table-condensed'>"
//Show Properties following the order given on openBIS
var sampleTypePropertiesCode = this.profile.getAllPropertiCodesForTypeCode(entity.sampleTypeCode);
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/SampleHierarchy.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/SampleHierarchy.js
index b61984c78bf..ee07854b043 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/SampleHierarchy.js
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/SampleHierarchy.js
@@ -20,7 +20,7 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
this.containerId = containerId;
this.profile = profile;
this.sample = sample;
-
+
this.init = function() {
this.repaint();
}
@@ -161,8 +161,6 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
this._filterSampleAndUpdate();
}
-
-
this._filterSampleAndUpdate = function() {
var newSample = jQuery.extend(true, {}, this.sample);
@@ -236,6 +234,29 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
this._repaintGraph(newSample);
}
+ this._updateDataFor = function(show, permId) {
+ var searchAndUpdateData = function(show, permId, sample) {
+ if(sample.permId === permId) {
+ sample.showDataOnGraph = show;
+ } else {
+ if(sample.parents) {
+ for(var i = 0; i < sample.parents.length; i++) {
+ searchAndUpdateData(show, permId, sample.parents[i]);
+ }
+ }
+
+ if(sample.children) {
+ for(var i = 0; i < sample.children.length; i++) {
+ searchAndUpdateData(show, permId, sample.children[i]);
+ }
+ }
+ }
+ }
+
+ searchAndUpdateData(show, permId, this.sample);
+ this._filterSampleAndUpdate();
+ }
+
this._updateDisplayabilityFor = function(hide, permId) {
var searchAndUpdateDisplayability = function(hide, permId, sample) {
if(sample.permId === permId) {
@@ -264,6 +285,8 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
//Fill graph
var NODES = {};
+
+ var _this = this;
function addSampleNodes(sample, rootPermId) {
if(!NODES[sample.permId]) {
var $nodeContent = $('<div>');
@@ -282,13 +305,36 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
'style' : 'cursor:pointer',
}));
+ var $dataLink = $('<a>', {
+ 'href' : "javascript:mainController.sampleHierarchy._updateDataFor(" + ((sample.showDataOnGraph)?false:true) + ",'" + sample.permId + "');"
+ }).append(
+ $('<i>', {
+ 'class' : (sample.showDataOnGraph)?'icon-minus-sign':'icon-plus-sign',
+ 'style' : 'cursor:pointer',
+ }));
+
var $sampleLink = $('<a>', { 'href' : "javascript:mainController.showViewSamplePageFromPermId('" + sample.permId + "')"}).html(sample.code);
+
+
if(sample.showLabel || (sample.permId === rootPermId)) {
$nodeContent
.append($hideLink)
+ .append($dataLink)
.append(sample.sampleTypeCode + ':')
.append($sampleLink);
+
+ if(sample.showDataOnGraph) {
+ var optionalInspectorTitle = $nodeContent[0].outerHTML;
+ var $inspector = _this.inspector.getInspectorTable(sample, false, true, false, optionalInspectorTitle, true);
+
+ $nodeContent.empty();
+ $nodeContent.css({
+ 'background-color' : 'transparent'
+ });
+ $nodeContent.append($inspector);
+ }
+
} else {
$nodeContent.append('---');
}
@@ -352,7 +398,7 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
transition(d3.select('svg'))
.attr('width', $(document).width() - 30)
.attr('height', $(document).height() - 120)
-
+
d3.select('svg')
.call(d3.behavior.zoom().on('zoom', function() {
var ev = d3.event;
--
GitLab