:javascript
  function progress(model,idx,total) {
    var p = 100/total;
    var percent = Math.round((idx+1)*p);
    var bar = document.getElementById("bar_"+model);
    var prog = document.getElementById("progress_"+model);
    bar.style.width = percent + '%';
    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 );
    }
  };  

  function renderResponse(model,idx,compound,last,total,tmppath) {
    // create request
    if (model == "Cramer"){
      var dataset = '#{@dataset.id}';
      var uri = "#{to("/batch/")}" + model + '/?dataset=' + escape(dataset) + '&tmppath=' + tmppath + '&last=' + last;
    } else {
      var dataset = '#{@dataset.id}';
      var uri = "#{to("/batch/")}" + model + '/?compound=' + escape(compound) + '&dataset=' + dataset + '&idx=' + idx + '&tmppath=' + tmppath + '&last=' + last;
    };
    var aClient = new HttpClient();
    aClient.get(uri, function(res) {
      // progress bar function
      progress(model,idx,total);

      var response = JSON.parse(res);
      var td = document.getElementById("prediction_"+compound+'_'+model+'_'+idx);
      //td.innerHTML = "";
      if (model != "Cramer"){
        // init general structure
        a = ["title", "type", "db_hit", "measurements", "prediction", "interval", "probability", "warnings", "info"];
        
        // handles consesus mutagenicity
        if (response['sa_prediction'] != false){
          var p = document.createElement("p");
          var h = document.createElement("h5");
          p.id = "sa";
          // Consensus mutagenicity
          var t = document.createTextNode("Consensus mutagenicity");
          h.appendChild(t);
          p.appendChild(h);
          // handle db_hit first
          if (response['db_hit'] != false){
            var value = document.createTextNode(response['db_hit']);
            p.appendChild(value);
          };
          // Structural alerts
          var h2 = document.createElement("h5");
          var t = document.createTextNode("Structural alerts:");
          h2.appendChild(t);
          p.appendChild(h2);
          // prediction
          var h3 = document.createElement("h5");
          var t = document.createTextNode("Prediction:");
          if (response['sa_prediction']['prediction'] == false){
            var value = document.createTextNode("non-mutagenic");
          };
          if (response['sa_prediction']['prediction'] == true){
            var value = document.createTextNode("mutagenic");
          };
          h3.appendChild(t);
          p.appendChild(h3);
          p.appendChild(value);
          // confidence
          var h4 = document.createElement("h5");
          var t = document.createTextNode("Confidence:");
          var value = document.createTextNode(response['confidence']);
          h4.appendChild(t);
          p.appendChild(h4);
          p.appendChild(value);
          // Structural alerts for mutagenicity
          var h5 = document.createElement("h5");
          var t = document.createTextNode("Structural alerts for mutagenicity:");
          h5.appendChild(t);
          p.appendChild(h5);
          if (response['sa_matches'] != false){
            var value = document.createTextNode(response['sa_matches']);
            p.appendChild(value);
          } else {
            var span = document.createElement("span");
            var value = document.createTextNode("none");
            span.style.fontStyle = "italic";
            span.appendChild(value);
            p.appendChild(span);
          };
          
          // append to td
          td.appendChild(p);
        };

        // proceed to general structure
        for (val of a){
          var p = document.createElement("p");
          var h = document.createElement("h5");
          p.id = val;
          if (val == "title") {
            var value = document.createTextNode(response['model_name']);
            h.appendChild(value);
            p.appendChild(h);
          } else if (val == "type") {
            var t = document.createTextNode("Type: ");
            var value = document.createTextNode(response['model_type']);
            h.appendChild(t);
            p.appendChild(h);
            p.appendChild(value);
            h.style.display = "inline";
          } else if (val == "db_hit" && response['db_hit'] != false && response['sa_prediction'] == false) {
            var value = document.createTextNode(response['db_hit']);
            p.appendChild(value);
          } else if (val == "measurements" && response['measurements'] != false) {
            var t = document.createTextNode("Measurements:");
            h.appendChild(t);
            p.appendChild(h);
            if (response['model_type'] == "Regression"){
              for (var i=0; i<response['measurements'].length; i++){
                var value = document.createTextNode(response['measurements'][i]);
                var br = document.createElement("br");
                p.appendChild(value);
                p.appendChild(br);
                if (response['converted_measurements'] != false) {
                  var value = document.createTextNode(response['converted_measurements'][i]);
                  var br = document.createElement("br");
                  p.appendChild(value);
                  p.appendChild(br);
                  if (i+1 != response['measurements'].length){
                    var br2 = document.createElement("br");
                    p.appendChild(br2);
                  };
                };
              };
            } else if (response['model_type'] == "Classification"){
              for (var i=0; i<response['measurements'].length; i++){
                var value = document.createTextNode(response['measurements'][i]);
                var br = document.createElement("br");
                p.appendChild(value);
                p.appendChild(br);
              };
            };
          } else if (val == "prediction" && response['prediction_value'] != false) {
            var t = document.createTextNode("Prediction:");
            var value = document.createTextNode(response['prediction_value']+" "+response['model_unit']);
            h.appendChild(t);
            p.appendChild(h);
            p.appendChild(value);
            if (response['converted_value'] != false) {
              var br = document.createElement("br");
              var value = document.createTextNode(response['converted_value']+" "+response['converted_model_unit']);
              p.appendChild(br);
              p.appendChild(value);
            };
            if (response['model_type'] == "Classification" && response['probability'] != false){
              var h = document.createElement("h5");
              var t = document.createTextNode("Probability:");
              h.appendChild(t);
              p.appendChild(h);
              for (var i=0; i<response['probability'].length; i++){
                var value = document.createTextNode(response['probability'][i]);
                var br = document.createElement("br");
                p.appendChild(value);
                p.appendChild(br);
              };
            };
          } else if (val == "interval" && response['interval'] != false) {
            var t = document.createTextNode("95% Prediction interval:");
            var value = document.createTextNode(response['interval']+" "+response['model_unit']);
            h.appendChild(t);
            p.appendChild(h);
            p.appendChild(value);
            if (response['converted_interval'] != false) {
              var br = document.createElement("br");
              var value = document.createTextNode(response['converted_interval']+" "+response['converted_model_unit']);
              p.appendChild(br);
              p.appendChild(value);
            };
          } else if (val == "warnings" && response['warnings'] != false && response['db_hit'] == false) {
            var t = document.createTextNode("Warnings: ");
            h.appendChild(t);
            p.appendChild(h);
            for (var i=0; i<response['warnings'].length; i++){
              var value = document.createTextNode(response['warnings'][i]);
              var br = document.createElement("br");
              p.appendChild(value);
              p.appendChild(br);
            };
          } else if (val == "info" && response['info'] != false) {
            var t = document.createTextNode("Info: ");
            var value = document.createTextNode(response['info']);
            h.appendChild(t);
            p.appendChild(h);
            p.appendChild(value);
          };

          // append to td
          td.appendChild(p);
        };
      };// if model != Cramer
      if (model == "Cramer"){
        for(i=0; i < response['tds'].length; i++){
          progress('Cramer',i,response['tds'].length);
          var td = document.getElementById(response['tds'][i]);
          var p = document.createElement("p");
          var h = document.createElement("h5");
          var t = document.createTextNode("Oral toxicity (Cramer rules)");
          p.id = "cramer";
          h.appendChild(t);
          p.appendChild(h);
          var h2 = document.createElement("h5");
          var t = document.createTextNode("Cramer rules:");
          h2.appendChild(t);
          p.appendChild(h2);
          if (response['cramer_rules'][i] != "nil"){
            var value = document.createTextNode(response['cramer_rules'][i]);
            p.appendChild(value);
          } else {
            var span = document.createElement("span");
            var value = document.createTextNode("none");
            span.style.fontStyle = "italic";
            span.appendChild(value);
            p.appendChild(span);
          };
          var h3 = document.createElement("h5");
          var t = document.createTextNode("Cramer rules, with extensions:");
          h3.appendChild(t);
          p.appendChild(h3);
          if (response['cramer_rules_extensions'][i] != "nil"){
            var value = document.createTextNode(response['cramer_rules_extensions'][i]);
            p.appendChild(value);
          } else {
            var span = document.createElement("span");
            var value = document.createTextNode("none");
            span.style.fontStyle = "italic";
            span.appendChild(value);
            p.appendChild(span);
          };

          // append to td
          td.appendChild(p);
          if (i === response['tds'].length-1) {
            $("img#circle_Cramer").hide();
            $("a#downbutton_Cramer").show();
          };

        };
      };// if model == Cramer
      // if last compound change progress to download;
      if (last == true) {
        $("img#circle_"+model).hide();
        $("a#downbutton_"+model).show();
      };
    });
  };


%div.well
  %a.btn.btn-warning{:href => to('/predict')}
    %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
  
  / displays prediction result in table tabs
  #tabs
    %ul.nav.nav-tabs.nav-justified{:id=>"batchTabs", :role=>"tablist"}
      - @models.each_with_index do |model,i|
        - m = Model::Validation.find model unless model == "Cramer"
        %li{:class => ("active" if i == 0)}
          %a{:href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}}
            = (model == "Cramer") ? "Oral toxicity (Cramer rules)" : "#{m.endpoint} (#{m.species})"
          %img.dlwait{:src=>"/images/wait30trans.gif", :id=>"circle_#{model}", :class=>"circle", :alt=>"wait", :style=>"display:none;"}
          %a.csv.btn{:id => "downbutton_#{model}", :href=>"#{to("/predict/#{@tmppaths[model]}/#{model}/#{@filename}")}", :title=>"download", :style=>"display:none;"}
            %span.glyphicon.glyphicon-download-alt
            CSV

    %div.tab-content
      - csize = @compounds.size
      - msize = @models.size
      - timer = 0
      - @models.each_with_index do |model,j|
        #results.tab-pane{:id=>"#{j+1}", :class => ("active" if j == 0)}
          %div{:id=>"progress_"+model, :style=>"width:100%;height:2px;position:relative;background-color:#ccc;"}
            %div{:id=>"bar_"+model, :style=>"background-color: #4CAF50;width:10px;height:2px;position:absolute;"}
          %table.table.table-bordered
            %tbody
              - @compounds.each_with_index do |compound,cidx|
                - timer += 800
                :javascript
                  $(document).ready(function() {
                    $("img.circle").show();
                    var model = '#{model}',
                        msize = #{msize},
                        idx = #{j+1},
                        last = false,
                        compound = '#{compound.id}',
                        csize = #{csize},
                        cidx = #{cidx},
                        timer = #{timer},
                        tmppath = '#{@tmppaths[model]}';
                    // check for last request;
                    if (cidx+1 == csize) {
                      last = true;
                    };
                    setTimeout(function(){
                      if (model != "Cramer"){
                        renderResponse(model,cidx,compound,last,csize,tmppath);
                      } else if (model == "Cramer" && cidx == 0){
                        renderResponse(model,cidx,compound,last,csize,tmppath);
                      };
                    }, timer );
                  });
                // table layout:
                // one row per prediction;
                // first col compound; sec col results
                %tr{:id=>model}
                  // compound
                  %td.col-md-6{:id=>"compound"}
                    %p=embedded_svg(compound.svg, title: compound.smiles)
                    %p=compound.smiles
                  // prediction values from js function
                  %td.col-md-6{:id=>"prediction_#{compound.id}_#{model}_#{cidx}", :style => "vertical-align:top;"}