summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorgebele <gebele@in-silico.ch>2019-07-10 09:57:07 +0000
committergebele <gebele@in-silico.ch>2019-07-10 09:57:07 +0000
commitbcc618026db1ee7a030391853b55bbf6116ab89a (patch)
tree0eb42827cd5749d54f11d5fb21ac9e7e42064f98
parent60aa817bdb08e4bcb769f4bee2834c23de9cd346 (diff)
moved batch js functions to lazar-gui.js
-rw-r--r--public/javascripts/lazar-gui.js127
-rw-r--r--views/batch.haml131
2 files changed, 134 insertions, 124 deletions
diff --git a/public/javascripts/lazar-gui.js b/public/javascripts/lazar-gui.js
index 60602c6..3b85f78 100644
--- a/public/javascripts/lazar-gui.js
+++ b/public/javascripts/lazar-gui.js
@@ -1,5 +1,6 @@
$(document).ready(function() {
addExternalLinks();
+ popOver();
});
addExternalLinks = function() {
@@ -9,3 +10,129 @@ addExternalLinks = function() {
$(this).attr('target', '_blank');
});
};
+
+popOver = function(){
+ $('[data-toggle="popover"]').popover();
+ $('.modal').on('hidden.bs.modal', function () {
+ $(this).removeData('bs.modal');
+ });
+ $('.modal').on('show.bs.modal', function(e){
+ var button = $(e.relatedTarget);
+ var modal = $(this);
+ modal.find('.modal-content').load(button.data("remote"));
+ });
+};
+
+var HttpClient = function() {
+ this.get = function(aUrl, aCallback) {
+ var anHttpRequest = new XMLHttpRequest();
+ anHttpRequest.onreadystatechange = function() {
+ if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
+ aCallback(anHttpRequest.responseText);
+ }
+ anHttpRequest.open( "GET", aUrl, true );
+ anHttpRequest.send( null );
+ }
+};
+
+// functions used in predict.haml
+
+
+// functions used in batch.haml
+
+var markers = [];
+
+progress = function(value,id) {
+ var percent = Math.round(value);
+ var bar = document.getElementById("bar_"+id);
+ var est = document.getElementById("est_"+id);
+ var prog = document.getElementById("progress_"+id);
+ bar.style.width = value + '%';
+ if (percent == 100){
+ prog.style.display = "none";
+ est.style.display = "none";
+ };
+};
+
+remaining = function(id,tasktime,type,compoundsSize) {
+ var est = document.getElementById("est_"+id);
+ var now = new Date().getTime();
+ if ( type == "true" ){
+ var approximate = new Date(tasktime*1000 + compoundsSize*100*(id+1));
+ } else {
+ var approximate = new Date(tasktime*1000 + compoundsSize*1000*(id+1));
+ }
+ var remain = approximate - now;
+ var minutes = Math.floor((remain % (1000 * 60 * 60)) / (1000 * 60));
+ var seconds = Math.floor((remain % (1000 * 60)) / 1000);
+ if ( minutes <= 0 && seconds <= 0 ) {
+ var newtime = "0m " + "00s ";
+ } else {
+ var newtime = minutes + "m " + seconds + "s ";
+ }
+ est.innerHTML = newtime;
+};
+
+renderTask = function(task_uri,model_id,id) {
+ var uri = task_uri;
+ var aClient = new HttpClient();
+ aClient.get(uri, function(res) {
+ var response = JSON.parse(res);
+ progress(response['percent'],id);
+ if (response['percent'] == 100){
+ window.clearInterval(markers[id]);
+ $("a#downbutton_"+id).removeClass("disabled");
+ $("a#detailsbutton_"+id).removeClass("disabled");
+ $("a#downbutton_"+id).removeClass("btn-outline-info");
+ $("a#detailsbutton_"+id).removeClass("btn-outline-info");
+ $("a#downbutton_"+id).addClass("btn-info");
+ $("a#detailsbutton_"+id).addClass("btn-info");
+ };
+ });
+};
+
+simpleTemplating = function(data) {
+ var html = '<ul class=pagination>';
+ $.each(data, function(index, item){
+ html += '<li>'+ item +'</li>'+'</br>';
+ });
+ html += '</ul>';
+ return html;
+};
+
+pagePredictions = function(task_uri,model_id,id,compoundsSize){
+ button = document.getElementById("detailsbutton_"+id);
+ span = button.childNodes[1];
+ if (span.className == "fa fa-caret-right"){
+ span.className = "fa fa-caret-down";
+ $('#data-container_'+id).removeClass("d-none");
+ $('#data-container_'+id).show();
+ $('#pager_'+id).show();
+ $('#pager_'+id).pagination({
+ dataSource: task_uri,
+ locator: 'prediction',
+ totalNumber: compoundsSize,
+ pageSize: 1,
+ showPageNumbers: true,
+ showGoInput: true,
+ formatGoInput: 'go to <%= input %>',
+ formatAjaxError: function(jqXHR, textStatus, errorThrown) {
+ $('#data-container_'+id).html(errorThrown);
+ },
+ /*ajax: {
+ beforeSend: function() {
+ $('#data-container_'+id).html('Loading content ...');
+ }
+ },*/
+ callback: function(data, pagination) {
+ var html = simpleTemplating(data);
+ $('#data-container_'+id).html(html);
+ //$('#data-container_'+id).css("min-height", $(window).height() + "px" );
+ }
+ });
+ } else if (span.className = "fa fa-caret-down"){
+ span.className = "fa fa-caret-right";
+ $('#data-container_'+id).hide();
+ $('#pager_'+id).hide();
+ };
+};
diff --git a/views/batch.haml b/views/batch.haml
index 6ac2a1b..c454ac7 100644
--- a/views/batch.haml
+++ b/views/batch.haml
@@ -1,122 +1,3 @@
-:javascript
- $(document).ready(function(){
- $('[data-toggle="popover"]').popover();
- $('.modal').on('hidden.bs.modal', function () {
- $(this).removeData('bs.modal');
- });
- $('.modal').on('show.bs.modal', function(e){
- var button = $(e.relatedTarget);
- var modal = $(this);
- modal.find('.modal-content').load(button.data("remote"));
- });
- });
-
- function progress(value,id) {
- var percent = Math.round(value);
- var bar = document.getElementById("bar_"+id);
- var est = document.getElementById("est_"+id);
- var prog = document.getElementById("progress_"+id);
- bar.style.width = value + '%';
- if (percent == 100){
- prog.style.display = "none";
- est.style.display = "none";
- };
- };
-
- function remaining(id,tasktime,type) {
- var est = document.getElementById("est_"+id);
- var now = new Date().getTime();
- if ( type == "true" ){
- var approximate = new Date(tasktime*1000 + #{@compounds_size*100}*(id+1));
- } else {
- var approximate = new Date(tasktime*1000 + #{@compounds_size*1000}*(id+1));
- }
- var remain = approximate - now;
- var minutes = Math.floor((remain % (1000 * 60 * 60)) / (1000 * 60));
- var seconds = Math.floor((remain % (1000 * 60)) / 1000);
- if ( minutes <= 0 && seconds <= 0 ) {
- var newtime = "0m " + "00s ";
- } else {
- var newtime = minutes + "m " + seconds + "s ";
- }
- est.innerHTML = newtime;
- };
-
- var HttpClient = function() {
- this.get = function(aUrl, aCallback) {
- var anHttpRequest = new XMLHttpRequest();
- anHttpRequest.onreadystatechange = function() {
- if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
- aCallback(anHttpRequest.responseText);
- }
- anHttpRequest.open( "GET", aUrl, true );
- anHttpRequest.send( null );
- }
- };
-
- var markers = [];
-
- function renderTask(task_id,model_id,id) {
- var uri = "#{to("/prediction/task/?turi=")}" + task_id;
- var aClient = new HttpClient();
- aClient.get(uri, function(res) {
- var response = JSON.parse(res);
- progress(response['percent'],id);
- if (response['percent'] == 100){
- window.clearInterval(markers[id]);
- $("a#downbutton_"+id).removeClass("disabled");
- $("a#detailsbutton_"+id).removeClass("disabled");
- $("a#downbutton_"+id).removeClass("btn-outline-info");
- $("a#detailsbutton_"+id).removeClass("btn-outline-info");
- $("a#downbutton_"+id).addClass("btn-info");
- $("a#detailsbutton_"+id).addClass("btn-info");
- };
- });
- };
- function simpleTemplating(data) {
- var html = '<ul class=pagination>';
- $.each(data, function(index, item){
- html += '<li>'+ item +'</li>'+'</br>';
- });
- html += '</ul>';
- return html;
- };
- function pagePredictions(task_id,model_id,id){
- button = document.getElementById("detailsbutton_"+id);
- span = button.childNodes[1];
- if (span.className == "fa fa-caret-right"){
- span.className = "fa fa-caret-down";
- $('#data-container_'+id).removeClass("d-none");
- $('#data-container_'+id).show();
- $('#pager_'+id).show();
- $('#pager_'+id).pagination({
- dataSource: '#{to("/prediction/task/?predictions=")}' + task_id,
- locator: 'prediction',
- totalNumber: '#{@compounds_size}',
- pageSize: 1,
- showPageNumbers: true,
- showGoInput: true,
- formatGoInput: 'go to <%= input %>',
- formatAjaxError: function(jqXHR, textStatus, errorThrown) {
- $('#data-container_'+id).html(errorThrown);
- },
- /*ajax: {
- beforeSend: function() {
- $('#data-container_'+id).html('Loading content ...');
- }
- },*/
- callback: function(data, pagination) {
- var html = simpleTemplating(data);
- $('#data-container_'+id).html(html);
- //$('#data-container_'+id).css("min-height", $(window).height() + "px" );
- }
- });
- } else if (span.className = "fa fa-caret-down"){
- span.className = "fa fa-caret-right";
- $('#data-container_'+id).hide();
- $('#pager_'+id).hide();
- };
- };
%div.card
%a.btn.btn-outline-info{:href => to("/predict?tpid=#{@pid}")}
%span.fa.fa-caret-left{:aria=>{:hidden=>"true"}}
@@ -135,7 +16,7 @@
%h5.card-title="#{m.endpoint} (#{m.species})"
#pager{:id=>idx}
%div.col-6
- %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')"}
+ %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{to("/prediction/task/?predictions=#{task}")}','#{model}','#{idx}','#{@compounds_size}')"}
%span.fa.fa-caret-right
Details
%a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/batch/download?tid=#{task}")}", :title=>"download"}
@@ -150,20 +31,22 @@
:javascript
var timer = #{ctimer};
var tasktime = #{task.generation_time.to_i};
+ var compoundsSize = #{@compounds_size};
+ var task_uri = "#{to("/prediction/task/?turi=#{task}")}";
$(document).ready(function(){
// check button class before execute a task
if (#{idx} > 0){
markers[#{idx}] = setInterval(function(){
var button = document.getElementById("detailsbutton_#{idx-1}");
if(!button.classList.contains('disabled')){
- renderTask('#{task}','#{model}',#{idx});
- remaining(#{idx},tasktime);
+ renderTask(task_uri,'#{model}',#{idx});
+ remaining(#{idx},tasktime,#{m.classification?},compoundsSize);
}
}, timer );
}else{
markers[#{idx}] = setInterval(function(){
- renderTask('#{task}','#{model}',#{idx});
- remaining(#{idx},tasktime,#{m.classification?});
+ renderTask(task_uri,'#{model}',#{idx});
+ remaining(#{idx},tasktime,#{m.classification?},compoundsSize);
}, timer );
};
});