From bcc618026db1ee7a030391853b55bbf6116ab89a Mon Sep 17 00:00:00 2001 From: gebele Date: Wed, 10 Jul 2019 09:57:07 +0000 Subject: moved batch js functions to lazar-gui.js --- public/javascripts/lazar-gui.js | 127 ++++++++++++++++++++++++++++++++++++++ views/batch.haml | 131 +++------------------------------------- 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 = ''; + 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 = ''; - 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 ); }; }); -- cgit v1.2.3