diff --git a/screening/sinergia/sinergia/1/as/webapps/sinergia/html/css/style.css b/screening/sinergia/sinergia/1/as/webapps/sinergia/html/css/style.css
index 976c7565b908bf1b3f2d2bc8fa2098f25cb95867..23511d473353a04d937b4bf2d327ac6ec8e84e91 100644
--- a/screening/sinergia/sinergia/1/as/webapps/sinergia/html/css/style.css
+++ b/screening/sinergia/sinergia/1/as/webapps/sinergia/html/css/style.css
@@ -2,7 +2,7 @@
* Cool login form
*/
.bodyLogin {
- background: url(../css/loginBackground.jpg) no-repeat center center fixed;
+ /*background: url(../css/loginBackground.jpg) no-repeat center center fixed; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
@@ -29,9 +29,9 @@
font-weight: 300;
font-size: 15px;
- -webkit-box-shadow: 0px 0px 100px rgba(50, 50, 50, 0.8);
- -moz-box-shadow: 0px 0px 100px rgba(50, 50, 50, 0.8);
- box-shadow: 0px 0px 100px rgba(50, 50, 50, 0.8);
+ -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.8);
+ -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.8);
+ box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.8);
}
.loginForm form {
@@ -40,7 +40,7 @@
}
.loginLogo {
- width: 200px;
+ width: 300px;
margin-left: auto;
margin-right: auto;
display: block;
@@ -49,12 +49,14 @@
.loginForm h1 {
font-family: "Helvetica Neue",sans-serif;
- font-weight: 300;
+ font-weight: 200;
text-align: center;
+ margin-top: 50px;
}
.loginInputBox {
border-bottom: 1px solid #dddddd;
+
}
.loginForm input {
@@ -67,6 +69,7 @@
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
+
}
.loginForm input:focus,
@@ -84,12 +87,58 @@
left: 310px;
}
+/*
+ * Logout button
+ */
+.logout-btn {
+
+ position: absolute;
+ right: 10px;
+ top: 10px;
+}
+
+.logout-btn
+{
+ font: 15px "Helvetica Neue",sans-serif, bold;
+ font-weight: bold;
+ background-color: #CFCFCF;
+ background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
+ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
+ background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
+ color: #FFFFFF;
+ text-rendering: optimizeLegibility;
+
+ padding: 3px 5px 3px 5px;
+ border: 40;
+ border-radius: 10px;
+ border-bottom: 1px solid #222;
+
+ -moz-box-shadow: 1px 1px 3px #999;
+ -webkit-box-shadow: 0 1px 3px #999;
+ box-shadow: 0 1px 3px #999;
+ position: absolute;
+ right: 10px;
+ top:10px;
+}
+
+.logout-btn:hover
+{
+font: 15px "Helvetica Neue",sans-serif;
+font-weight:bold;
+font-style: normal;
+text-decoration: none;
+background-color:#FFFFFF;
+color:#848484;
+text-rendering: optimizeLegibility;
+}
+
+
/*
* General Layout
*/
body {
-margin-top : 20px;
-margin-left: 20px;
-
+ margin-top : 60px;
+ margin-left: 20px;
}
+
diff --git a/screening/sinergia/sinergia/1/as/webapps/sinergia/html/index.html b/screening/sinergia/sinergia/1/as/webapps/sinergia/html/index.html
index ecd74211fb4026ff10361985acbcc287d3e95e40..72af7c269f5d36b6dfebec524242a909a56c3026 100644
--- a/screening/sinergia/sinergia/1/as/webapps/sinergia/html/index.html
+++ b/screening/sinergia/sinergia/1/as/webapps/sinergia/html/index.html
@@ -24,23 +24,26 @@
// Global variables
//
var openbis = new openbis();
- var experimentCode = 'CLUSTERS'
- var sampleType ='CLUSTER'
+ var experimentCode = 'CLUSTERS';
+ var experimentIdentifier = '/SINERGIA/CLUSTERS/CLUSTERS';
+ var sampleType ='CLUSTER';
+
+ var allDataStores = null;
+ var mainCluster = null;
+ var clusters = {};
+ var allDataSets = null;
- var clusters = {};
-
//
// Login
//
$(document).ready(function() {
- //Atach function to form login
+ //Attach function to form login
var submitFunction = function(event) {
event.preventDefault();
- $.blockUI({ message: '<h1><img src="./css/busy.gif" /> Just a moment...</h1>' });
+ $.blockUI({ message: '<h1><img src="./css/busy.gif" /> Please wait...</h1>' });
openbis.login($.trim($('#username').val()), $.trim($('#password').val()),
function(data) {
- $.unblockUI();
enterApp(data)
});
}
@@ -58,7 +61,23 @@
}
else {
$("#login-form-div").hide();
+ //Loading main experiment
+ openbis.listExperimentsForIdentifiers([experimentIdentifier],
+ function (data) {
+ mainCluster = data.result[0];
+ //Get datastores
+ openbis.listDataStores(
+ function(data) {
+ allDataStores = data.result;
+ loadAllDataSets(); //Get all datasets using the experiment
+ }
+ );
+
+
+ }
+ );
+ //Build menu and load samples data structure
searchSamplesWithType(sampleType,
function(data) {
buildLogout();
@@ -74,7 +93,7 @@
// Logout
//
function buildLogout() {
- $("#menu").append("<a class='btn' href='javascript:logout()'>Logout</a>");
+ $("#menu").append("<a class='logout-btn' href='javascript:logout()'>Logout <img src='./images/System-Logout-icon.png'></a>");
}
function logout() {
openbis.logout(function(data) {
@@ -84,15 +103,15 @@
$("#login-form-div").show();
});
}
+
//
// Menu Setup
//
function buildMenu(data) {
-
var $menu = $("<ul>");
//$("#menu").append("<lu></lu>"); // this is equivalent to the above. It's only good for static things. The above is better for dynamic things, as in this case.
var $experimentLevel = $("<li>")
- .append("<a href='javascript:showExperiment(\""+experimentCode+"\")'>" + experimentCode + "</a>");
+ .append("<a href='javascript:showExperiment()'>" + experimentCode + "</a>");
$menu
.append($experimentLevel);
@@ -104,7 +123,7 @@
clusters[data[i].code] = data[i]; //Build a general data structure
var $sampleLevel = $("<li>")
- .append("<a href='javascript:showSamples(\""+data[i].code+"\")'>" + data[i].code + "</a>");
+ .append("<a href='javascript:showSamples(\""+data[i].identifier+"\")'>" + data[i].code + "</a>");
$samplesMenu
.append($sampleLevel);
@@ -120,9 +139,9 @@
var cleanGeneCode = data[j].code.substring(data[j].code.indexOf(":")+1);
$containedSamplesMenu.append(
$("<li>")
- .append("<a href='javascript:showContainedSamples(\""+cleanGeneCode+"\")'>" + cleanGeneCode + "</a>"));
-
- }
+ .append("<a href='javascript:showContainedSamples(\""+data[j].identifier+"\")'>" + cleanGeneCode + "</a>"));
+
+ }
}
searchSamplesWithTypeAndCode("GENE", data[i].code + ":*", callbackFunction);
@@ -132,35 +151,149 @@
}
$("#menu").append($menu);
+
}
+
//
// Navigation
//
+ function showExperiment() {
+ $("#main").empty();
- function showExperiment(code) {
- $("#main").append(code);
+ //Obtain PDF URL
+ getDataSetFilesFor(null, "PDF", allDataStores[0].downloadUrl,
+ function(files) {
+ var pdfFileUrl = files[0];
+ $("#main").append("<h1>Gene Clusters</h1>");
+ $("#main").append("<iframe src='" + pdfFileUrl + "' style='width:100%; height:" + $(window).height() + "px; ' frameborder='0'></iframe>");
+ }
+ );
}
- function showSamples(code) {
- $("#main").append(code);
+ function showSamples(sampleIdentifier) {
+ var displayName = sampleIdentifier.substring(10);
+ $("#main").empty();
+
+ //Obtain PDF URL
+ getDataSetFilesFor(sampleIdentifier, "PDF", allDataStores[0].downloadUrl,
+ function(pdfFiles) {
+ var pdfFileUrl = pdfFiles[0];
+ $("#main").append("<h1>" + displayName + "</h1>");
+ $("#main").append("<h2>Genes: </h2>");
+ $("#main").append("<iframe src='" + pdfFileUrl + "' style='width:100%; height:" + $(window).height()/2 + "px; ' frameborder='0'></iframe>");
+ $("#main").append("<h2>Representative Images: </h2>");
+
+ //Obtain Image URL
+ getDataSetFilesFor(sampleIdentifier, "PNG_IMAGES", allDataStores[0].downloadUrl,
+ function(pngFiles) {
+ for(var i = 0; i < pngFiles.length; i++) {
+ $("#main").append("<a target='_blank' href='" + pngFiles[i] + "'><img src='" + pngFiles[i] + "' style='width: 20%;' /></a>");
+ }
+ }
+ );
+ }
+ );
}
- function showContainedSamples(code) {
- $("#main").append(code);
+ function showContainedSamples(sampleIdentifier) {
+ var displayName = sampleIdentifier.substring(10);
+ $("#main").empty();
+
+ //Obtain PDF URL
+ getDataSetFilesFor(sampleIdentifier, "PDF", allDataStores[0].downloadUrl,
+ function(pdfFiles) {
+ $("#main").append("<h1>" + displayName + "</h1>");
+
+ for(var i = 0; i < pdfFiles.length; i++) {
+ var pdfFileUrl = pdfFiles[i];
+ var component = "";
+
+ component += "<div style='float: left; margin-right:20px;'>";
+ if(pdfFileUrl.indexOf("rnaProfile.pdf") !== -1) {
+ component += "<h2>RNA Profile:</h2>";
+ } else if(pdfFileUrl.indexOf("geneProfile.pdf") !== -1) {
+ component += "<h2>Gene Profile:</h2>";
+ }
+ component += "<iframe src='" + pdfFileUrl + "' style='width:" + ($("#main").width()/7) * 3 + "px; height:" + $(window).height()/2 + "px; ' frameborder='0'></iframe>";
+ component += "</div>";
+
+ $("#main").append(component);
+ }
+
+ //Obtain movies URL
+ $("#main").append("<h2>Control Videos:</h2>");
+
+ $("#main").append("<h2>Gene Videos:</h2>");
+ }
+ );
}
+ //
+ // Data Loader
+ //
+ function loadAllDataSets() {
+ openbis.listDataSetsForExperiments([mainCluster], null,
+ function(datasets) {
+ allDataSets = datasets.result;
+ $.unblockUI();
+ }
+ );
+ };
+
+ function getDataSetFilesFor(sampleIdentifier, dataSetTypeCode, datastoreDownloadURL, callback) {
+ //Obtain datasets
+ var datasets = [];
+ for(var i = 0; i < allDataSets.length; i++) {
+ if( allDataSets[i].sampleIdentifierOrNull === sampleIdentifier &&
+ allDataSets[i].dataSetTypeCode === dataSetTypeCode ) {
+ datasets.push(allDataSets[i]);
+ }
+ }
+ //List dataset files
+ var allDatasetFiles = [];
+
+ var callBackForFiles = function(datasetFiles) {
+ if(datasetFiles) {
+ var dataset = datasets.pop();
+
+ for(var i = 0; i < datasetFiles.result.length; i++) {
+ if(!datasetFiles.result[i].isDirectory) {
+ var dowloadUrl = datastoreDownloadURL + '/' + dataset.code + "/" + datasetFiles.result[i].pathInDataSet + "?sessionID=" + openbis.getSession();
+ allDatasetFiles.push(dowloadUrl);
+ }
+ }
+ }
+
+ if(datasets.length === 0) {
+ callback(allDatasetFiles);
+ } else {
+ openbis.listFilesForDataSet(datasets[datasets.length-1].code, "/", true, callBackForFiles);
+ }
+ };
+
+ callBackForFiles(null);
+ }
+
+
+
</script>
</head>
+
+
+
+
+
+
<body class="bodyLogin">
<div id="login-form-div" class="loginForm">
<img class="loginLogo" src="./images/openBIS_Logo.png" alt="openBIS" />
- <h1>Sinergia</h1>
+ <h1>Sinergia Project</h1>
<form id="loginForm" action="javascript:">
<fieldset>
<div class='loginInputBox'>
- <input placeholder="Account" id="username" type="text" required="required">
+ <input placeholder="User Name" id="username" type="text" required="required">
</div>
<div class='loginInputBox'>
@@ -172,16 +305,17 @@
</form>
<center>
- <div style="margin-bottom: 5px;">Compatible With:</div>
+ <div style="margin-bottom: 5px; margin-top: 100px;">Compatible With:</div>
<img src="./images/browser-icon-chrome.png" style="width: 43px; height:43px;" /><img src="./images/browser-icon-safari.png" style="width: 43px; height:43px;" /><img src="./images/browser-icon-firefox.png" style="width: 43px; height:43px;" />
</center>
</div>
<div class="container-fluid">
<div class="row-fluid">
- <div class="span3" id ="menu"></div>
- <div class="span9" id ="main"></div>
+ <div id ="menu" class="span3"></div>
+ <div id ="main" class="span9"></div>
</div>
</div>
</body>
+
</html>