:javascript
function progress(value,id) {
var percent = Math.round(value);
var bar = document.getElementById("bar_"+id);
var prog = document.getElementById("progress_"+id);
bar.style.width = value + '%';
if (percent == 100){
prog.style.display = "none";
};
};
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("/")}" + 'task/?turi=' + task_id;
var aClient = new HttpClient();
aClient.get(uri, function(res) {
var response = JSON.parse(res);
if (model_id == "Cramer"){
$("img.circle_cramer").show();
} else if (model_id == "Mazzatorta"){
$("img.circle_mazza").show();
}else{
progress(response['percent'],id);
}
if (response['percent'] == 100){
window.clearInterval(markers[id]);
$("a#downbutton_"+id).removeClass("disabled");
$("a#detailsbutton_"+id).removeClass("disabled");
$("a#detailsbutton_"+id).addClass("btn-success");
if (model_id == "Cramer"){
$("img.circle_cramer").hide();
};
if (model_id == "Mazzatorta"){
$("img.circle_mazza").hide();
};
};
});
};
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 == "glyphicon glyphicon-menu-right"){
span.className = "glyphicon glyphicon-menu-down";
$('#data-container_'+id).show();
$('#pager_'+id).show();
$('#pager_'+id).pagination({
dataSource: '#{to("/")}' + 'task/?predictions=' + task_id + '&model=' + model_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 = "glyphicon glyphicon-menu-down"){
span.className = "glyphicon glyphicon-menu-right";
$('#data-container_'+id).hide();
$('#pager_'+id).hide();
};
};
%div.well
%a.btn.btn-warning{:href => to("/predict?tpid=#{@pid}")}
%span.glyphicon.glyphicon-menu-left{:aria=>{:hidden=>"true"}}
New Prediction
/ show file name
%topline
%div.row
%div.col-md-4
%h3 Batch Prediction Results:
%div.col-md-8
%h3= @filename
- @models.each_with_index do |model,idx|
- m = Model::Validation.find model unless model =~ /Cramer|Mazzatorta/
- task = @tasks[idx].id
#result.panel{:id=>idx}
%div.row
%div.col-md-6
- if model =~ /Mazzatorta/
%h5= "Lowest observed adverse effect level (LOAEL) (Mazzatorta) (Rats)"
- else
%h5= (model == "Cramer") ? "Oral toxicity (Cramer rules)" : (m.endpoint =~ /Mutagenicity/i ? "Consensus mutagenicity" : "#{m.endpoint} (#{m.species})")
#pager{:id=>idx}
%div.col-md-6.h5
%a.btn.btn-default.btn-xs.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')", :style=>"font-size:small;"}
%span.glyphicon.glyphicon-menu-right
Details
%a.btn.btn-default.btn-xs.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/csv/#{task}/#{model}/#{@filename}")}", :title=>"download", :style=>"font-size:small;"}
%span.glyphicon.glyphicon-download-alt
CSV
- if model == "Cramer"
%img.h2{:src=>"/images/wait30trans.gif", :id=>"circle1", :class=>"circle_cramer", :alt=>"wait", :style=>"display:none;"}
- if model == "Mazzatorta"
%img.h2{:src=>"/images/wait30trans.gif", :id=>"circle2", :class=>"circle_mazza", :alt=>"wait", :style=>"display:none;"}
- if model !~ /Cramer|Mazzatorta/
%div{:id=>"progress_#{idx}", :style=>"width:100%;height:3px;position:relative;background-color:#ccc;"}
%div{:id=>"bar_#{idx}", :style=>"background-color: #4CAF50;width:10px;height:3px;position:absolute;"}
- # increase interval timer for large datasets
- ctimer = ((@compounds.size/1000) == 0 ? 1000 : ((@compounds.size/1000)*1000))
:javascript
var timer = #{ctimer};
$(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});
}
}, timer );
}else{
markers[#{idx}] = setInterval(function(){
renderTask('#{task}','#{model}',#{idx});
}, timer );
};
});
#data-container{:id=>idx,:style=>"width:100%;"}