before clean up

10 files changed, 353 insertions, 153 deletions

diff --git a/views/batch.haml b/views/batch.haml
index c5dd2f4..fb317c9 100644
--- a/views/batch.haml
+++ b/views/batch.haml
@@ -1,15 +1,47 @@
 :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*1000});
+    } else {
+      var approximate = new Date(tasktime*1000 + #{@compounds_size*100});
+    }
+    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();
@@ -58,9 +90,9 @@
       $('#data-container_'+id).show();
       $('#pager_'+id).show();
       $('#pager_'+id).pagination({
-        dataSource: '#{to("/prediction/task/?predictions=")}' + task_id + '&model=' + model_id ,
+        dataSource: '#{to("/prediction/task/?predictions=")}' + task_id,
         locator: 'prediction',
-        totalNumber: #{@compounds.size},
+        totalNumber: '#{@compounds_size}',
         pageSize: 1,
         showPageNumbers: true,
         showGoInput: true,
@@ -106,15 +138,18 @@
               %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')"}
                 %span.fa.fa-caret-right
                 Details
-              %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/csv/#{task}/#{model}/#{@filename}")}", :title=>"download"}
+              %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/batch/download?tid=#{task}")}", :title=>"download"}
                 %span.fa.fa-download
                 CSV
           %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;"}
+          %p{:id=>"est_#{idx}"}
+            waiting ...
           - # increase interval timer for large datasets 
-          - ctimer = ((@compounds.size/1000) == 0 ? 1000 : ((@compounds.size/1000)*1000))
+          - ctimer = ((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000))
           :javascript
             var timer = #{ctimer};
+            var tasktime = #{task.generation_time.to_i};
             $(document).ready(function(){
               // check button class before execute a task
               if (#{idx} > 0){
@@ -122,12 +157,18 @@
                   var button = document.getElementById("detailsbutton_#{idx-1}");
                   if(!button.classList.contains('disabled')){
                     renderTask('#{task}','#{model}',#{idx});
+                    remaining(#{idx},tasktime);
                   }
                 }, timer );
               }else{
                 markers[#{idx}] = setInterval(function(){
                   renderTask('#{task}','#{model}',#{idx});
+                  remaining(#{idx},tasktime,#{m.classification?});
                 }, timer );
               };
             });
-          #data-container.card.d-none{:id=>idx}
+          #data-container.card.d-none.table-responsive{:id=>idx}
+%div.modal.fade{:id=>"details", :tabindex=>"-1", :role=>"dialog"}
+  %div.modal-dialog.modal-lg{:role=>"document"}
+    %div.modal-content
+
diff --git a/views/details.haml b/views/details.haml
index be4948a..abf7518 100644
--- a/views/details.haml
+++ b/views/details.haml
@@ -6,7 +6,7 @@
   %button.close{ :type=>" button", data: { dismiss:"modal"}} &times;
   %h3
     Names and synonyms:
-  %p= @compound.svg
+  %p= embedded_svg(@compound.svg, :title=>"x")
   %p
   %b="SMILES:"
   %p= @smiles
@@ -14,6 +14,11 @@
   %b="InChI:"
   %p= @inchi
   %br
+  - cid = @compound.cid
+  - if cid
+    %b="CID:"
+    %p= cid
+    %br
   %b="Names:"
   %p{:style=>"padding-left:0.5em;"}
   - if @names !~ /^no names/i
@@ -23,6 +28,9 @@
   %hr
   %p{:style=>"padding-left:0.5em;"}
     / pubchem link
-    %a.btn.btn-primary{:href=>"http://aop.in-silico.ch/", :title=>"Link opens in new window.", :alt=>"pubchem read across", :rel=>"external"} PubChem read across 
+    - if cid
+      %a.btn.btn-primary{:href=>"http://aop.in-silico.ch/cid/#{cid}", :title=>"Link opens in new window.", :alt=>"pubchem read across", :rel=>"external"} PubChem read across 
+    - else
+      %a.btn.btn-primary{:href=>"http://aop.in-silico.ch/", :title=>"Link opens in new window.", :alt=>"pubchem read across", :rel=>"external"} PubChem read across 
     %i (experimental)
   %br
diff --git a/views/help.haml b/views/help.haml
new file mode 100644
index 0000000..84be516
--- /dev/null
+++ b/views/help.haml
@@ -0,0 +1,68 @@
+%div.card.bg-light
+  %div.card-body
+    %h3 How to use batch prediction
+
+    %p
+      You have two options to format your comma or tab sperated spreadsheet for batch predictions:
+
+    %br
+    %p
+      %div.row
+        %div.col-md-6
+          %strong Option 1:
+          %br
+          A spreadsheet with a single column and a header. The header should specify the input format (SMILES or InChI are accepted).
+        %div.col-md-6
+          %table.help
+            %tr.row
+              %th.col-md-12
+                SMILES
+            %tr.row
+              %td.col-md-12
+                C1ccccc1NN
+            %tr.row
+              %td.col-md-12
+                Cc1ccc(cc1\N=C=O)/N=C=O
+            %tr.row
+              %td.col-md-12
+                OC(=O)c1ccc(cc1)C(=O)O
+            %tr.row
+              %td.col-md-12
+                ="..."
+    %br
+    %p
+      %div.row
+        %div.col-md-6
+          %strong Option 2:
+          %br
+          A spreadsheet with two columns and a header. The first column may contain an arbitrary ID, 
+          the second column the compound structure (as SMILES or InChI).  
+          The header consists of "ID" followed by the input format (SMILES or InChI).
+        %div.col-md-6
+          %table.help
+            %tr.row
+              %th.col-md-4
+                ID
+              %th.col-md-8
+                SMILES
+            %tr.row
+              %td.col-md-4
+                2735
+              %td.col-md-8
+                C1ccccc1NN
+            %tr.row
+              %td.col-md-4
+                A2
+              %td.col-md-8
+                O=C(OCCCC)C1=CC=CC=C1C(OCCCC)=O
+            %tr.row
+              %td.col-md-4
+                82 B-6 304663
+              %td.col-md-8
+                CC(C)(C)C1=CC2(C=C(C1=O)C(C)(C)C)CCC(=O)O2
+            %tr.row
+              %td.col-md-4
+                ="..."
+              %td.col-md-8
+                ="..."
+    %br
diff --git a/views/info.haml b/views/info.haml
index d8b93f9..148d53f 100644
--- a/views/info.haml
+++ b/views/info.haml
@@ -1,2 +1,3 @@
-%div.info
-  We are rebuilding the models. It will take a while, please be patient and reload the page in some time.
+%div.card.border-warning.mb-3
+  %div.card-body
+    We are rebuilding the models. It will take a while, please be patient and reload the page in some time.
diff --git a/views/layout.haml b/views/layout.haml
index 1d95ae2..3304c69 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -24,20 +24,14 @@
       %div.row.align-items-center
         %div.col-3
           %a.card-link{:href=> "https://in-silico.ch/", :rel=>"external"}
-            %img{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"100px", :heigth=>"100px"}
-          %a.card-link{:href=> "https://openrisknet.org/", :rel=>"external"}
-            %img{:src=>"/images/orn-logo.jpg", :alt=>"orn-logo", :width=>"100px", :heigth=>"100px"}
-        %div.col-6
+            %img{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"120px"}
+        %div.col-7
           %h1 lazar toxicity predictions
-        %div.col-3
-          %a{:href=>"https://twitter.com/intent/tweet?source=http%3A%2F%2Flazar.in-silico.ch&text=http%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Tweet"}
-            %span.fa.fa-2x.fa-twitter-square
-          %a{:href=>"https://plus.google.com/share?url=http%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Share on Google+"}
-            %span.fa.fa-2x.fa-google-plus-square
-          %a{:href=>"http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Flazar.in-silico.ch&title=&summary=&source=http%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Share on LinkedIn"}
-            %span.fa.fa-2x.fa-linkedin-square
-          %a{:href=>"https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flazar.in-silico.ch&title=&summary=&source=http%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Share on Facebook"}
-            %span.fa.fa-2x.fa-facebook-square
+        %div.col-2
+          %h5
+            %a.text-right{:href=>"https://nano-lazar.in-silico.ch", :rel=>"external"}
+              nano-lazar
+              %span.fa.fa-xs.fa-external-link
     %div.container-fluid
       %topline.alert
         %p
@@ -54,7 +48,12 @@
           %a{ :href=>"https://doi.org/10.3389/fphar.2013.00038", :rel=>"external"}
             %img{ :src=>"https://zenodo.org/badge/DOI/10.3389/zenodo.10.3389.svg", :alt=>"DOI"}
           in scientific publications.
-      
+          %a{:href=>"https://twitter.com/intent/tweet?source=http%3A%2F%2Flazar.in-silico.ch&text=https%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Tweet"}
+            %span.fa.fa-twitter-square
+          %a{:href=>"http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Flazar.in-silico.ch&title=&summary=&source=https%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Share on LinkedIn"}
+            %span.fa.fa-linkedin-square
+          %a{:href=>"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flazar.in-silico.ch&title=&summary=&source=https%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Share on Facebook"}
+            %span.fa.fa-facebook-square
           
       = yield
     
@@ -67,6 +66,19 @@
               %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2004 - #{Time.now.year.to_s}
               |
               %a{:href => to("/license"), :rel => "external"} GPL3 License
+        %supporters.row
+          %div.card-body.text-center
+            %div.card-title
+              Financial support by
+            %div.card-text
+              %a{:href=>"http://www.bfr.bund.de/de/start.html", :rel=>"external"}
+                %img{:src=>"/images/bfr_logo.gif"}
+              %a{:href=>"http://www.opentox.org/", :rel=>"external"}
+                %img{:src=>"/images/ot_logo.png"}
+              %a{:href=>"https://enanomapper.net/", :rel=>"external"}
+                %img{:src=>"/images/enm_logo.png"}
+              %a{:href=>"https://www.researchgate.net/institution/Nestle_SA/department/Nestle_Research_Center", :rel=>"external"}
+                %img{:src=>"/images/nestec.jpg"}
 
     #back-top{:style => "z-index:100;position:fixed;bottom:1%;right:1%;"}
       %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
diff --git a/views/model_details.haml b/views/model_details.haml
index 5417a48..8691325 100644
--- a/views/model_details.haml
+++ b/views/model_details.haml
@@ -9,9 +9,8 @@
     = "Type:\t"
     = type
     %br
-    - training_dataset = OpenTox::Dataset.find model.model.training_dataset_id
     = "Training compounds:\t"
-    = training_dataset.data_entries.size
+    = data_entries.count/3
     %br
     = "Training dataset:\t"
     %a{:href=>"#{to("/predict/dataset/#{training_dataset.name}")}"}
@@ -20,134 +19,157 @@
 %div.card.bg-light
   %div.card-body
     %h6.card-title Algorithms:
-    Similarity:
-    %a{:href=> "http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["similarity"]["method"].sub("::", "%2F")}", :rel=>"external"}
-      = model.model.algorithms["similarity"]["method"]
-    = ", min: #{model.model.algorithms["similarity"]["min"]}"
-    %br
-    Prediction:
-    - if model.model.algorithms["prediction"]["method"] !~ /Caret/
-      %a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"}
-        = model.model.algorithms["prediction"]["method"]
-    - else
-      %a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox/Algorithm/Caret", :rel=>"external"}
-        = model.model.algorithms["prediction"]["method"]
+    %p.card-text
+      Similarity:
+      %a.card-link{:href=> "http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["similarity"]["method"].sub("::", "%2F")}", :rel=>"external"}
+        = model.model.algorithms["similarity"]["method"]
+      = ", min: #{model.model.algorithms["similarity"]["min"]}"
+      %br
+      Prediction:
+      - if model.model.algorithms["prediction"]["method"] !~ /Caret/
+        %a.card-link{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"}
+          = model.model.algorithms["prediction"]["method"]
+      - else
+        %a.card-link{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox/Algorithm/Caret", :rel=>"external"}
+          = model.model.algorithms["prediction"]["method"]
 
-    %br
-    Descriptors:
-    = model.model.algorithms["descriptors"]["method"]+","
-    = model.model.algorithms["descriptors"]["type"]
+      %br
+      Descriptors:
+      = model.model.algorithms["descriptors"]["method"]+","
+      = model.model.algorithms["descriptors"]["type"]
 
 %div.card.bg-light
   %div.card-body
     - if type == "Classification"
-      %h6.card-title Independent crossvalidations:
+      %h6.card-text Independent crossvalidations:
     - else
-      %h6.card-title Independent crossvalidations (-log10 transformed):
-    %div.row{:id=>"validations#{model.id}"}
-      - crossvalidations.each do |cv|
-        %span.col-4
-          = "Num folds:\t"
-          = cv.folds
-          %br
-          = "Num instances:\t"
-          = cv.nr_instances
-          %br
-          = "Num unpredicted"
-          = cv.nr_unpredicted
-          - if model.classification? 
-            %br
-            = "Accuracy:\t"
-            = cv.accuracy.round(3) if cv.accuracy
-            %br
-            = "Weighted accuracy:\t"
-            = cv.weighted_accuracy.round(3) if cv.weighted_accuracy
-            - if cv.true_rate
-              %br
-              = "True positive rate:\t"
-              = cv.true_rate[cv.accept_values[0]].round(3)
-              %br
-              = "True negative rate:\t"
-              = cv.true_rate[cv.accept_values[1]].round(3)
-            - if cv.predictivity
-              %br 
-              = "Positive predictive value:\t"
-              = cv.predictivity[cv.accept_values[0]].round(3)
-              %br
-              = "Negative predictive value:\t"
-              = cv.predictivity[cv.accept_values[1]].round(3)
-            %p
-            - ["confusion_matrix", "weighted_confusion_matrix"].each_with_index do |matrix,idx|
-              %b= (idx == 0 ? "Confusion Matrix" : "Weighted Confusion Matrix")
-              %div.table-responsive
-                %table.table.table-sm.table-borderless
-                  %tbody
-                    %tr
-                      %td
-                      %td
-                      %td 
-                        %b actual
-                      %td
-                      %td
-                    %tr
-                      %td
-                      %td
-                      %td active
-                      %td inactive
-                      -#%td total
-                    %tr
-                      %td 
-                        %b predicted
-                      %td active
-                      %td 
-                        =( idx == 1 ? cv.send(matrix)[0][0].round(3) : cv.send(matrix)[0][0])
-                      %td 
-                        =( idx == 1 ? cv.send(matrix)[0][1].round(3) : cv.send(matrix)[0][1])
-                      -#%td 
-                        =cv.confusion_matrix[0][0]+cv.confusion_matrix[0][1]
-                    %tr
-                      %td
-                      %td inactive
-                      %td 
-                        =( idx == 1 ? cv.send(matrix)[1][0].round(3) : cv.send(matrix)[1][0])
-                      %td 
-                        =( idx == 1 ? cv.send(matrix)[1][1].round(3) : cv.send(matrix)[1][1])
-                      -#%td 
-                        =cv.confusion_matrix[1][0]+cv.confusion_matrix[1][1]
-                    -#%tr
-                      %td
-                      %td total
-                      %td
-                        =cv.confusion_matrix[0][0]+cv.confusion_matrix[1][0]
-                      %td
-                        =cv.confusion_matrix[0][1]+cv.confusion_matrix[1][1]
-                      %td
-                        -#= "Confusion Matrix:\t"
-                        -#= cv.confusion_matrix
+      %h6.card-text Independent crossvalidations (-log10 transformed):
+  - crossvalidations.each_with_index do |cv,idx|
+    %div.card.bg-light
+      %div.card-body
+        %h6.card-title= "Nr.#{idx+1}  |  Num folds:#{cv.folds}"
+        %p.card-text
+          / predictions nr
+          %div.row
+            %div.col-6
+              %h6
+                Predictions number:
+              - cv.nr_predictions.each do |key,value|
+                %div.row
+                  %div.col
+                    %h6
+                      = key
+                  %div.col
+                    = value
+          - if model.classification?
+            %hr
+            %div.row
+              / accuracy
+              %div.col-6
+                %h6
+                  Accuracy:
+                - cv.accuracy.each do |key, value|
+                  %div.row
+                    %div.col
+                      %h6
+                        = key
+                    %div.col
+                      = value.signif(3)
+            %hr
+            / matrixes
+            %div.row
+              - cv.confusion_matrix.each do |key,matrix|
+                %div.col-4
+                  %h6
+                    Confusion Matrix:
+                    %i= key
                     %br
-            %br
-            /= "Confidence plot:"
-            /%p.plot
-            /  %img{:src=>"confp#{cv.id}.svg"}
+                    %table.table.table-sm.table-borderless.col-4
+                      %tbody
+                        %tr
+                          %td
+                          %td
+                          %td 
+                            %h6 actual
+                          %td
+                        %tr
+                          %td
+                          %td
+                          %td active
+                          %td inactive
+                        %tr
+                          %td 
+                            %h6 predicted
+                          %td active
+                          %td 
+                            = matrix[0][0]
+                          %td 
+                            = matrix[0][1]
+                        %tr
+                          %td
+                          %td inactive
+                          %td 
+                            = matrix[1][0]
+                          %td 
+                            = matrix[1][1]
+                        %br
           - if model.regression?
-            %br
-            %a{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE:
-            = cv.rmse.round(3) if cv.rmse
-            %br
-            %a{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE:
-            = cv.mae.round(3) if cv.mae
-            %br 
-            %a{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"<sup>2</sup>"+":"
-            = cv.r_squared.round(3) if cv.r_squared
-            %br
-            /= "Confidence plot:"
-            /%p.plot
-            /  %img{:src=>"/confp#{cv.id}.svg"}
-            /%br
-            /= "Correlation plot"
-            /%p.plot
-            /  %img{:src=>"/corrp#{cv.id}.svg"}
-          
+            %hr
+            %div.row
+              %div.col
+                %h6
+                  %a.card-link{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"}
+                    RMSE:
+                - cv.rmse.each do |key,value|
+                  %div.row
+                    %div.col
+                      %h6
+                        = key
+                    %div.col
+                      = value.signif(3)
+              %div.col
+                %h6
+                  %a.card-link{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"}
+                    MAE:
+                - cv.mae.each do |key,value|
+                  %div.row
+                    %div.col
+                      %h6
+                        = key
+                    %div.col
+                      = value.signif(3)
+              %div.col
+                %h6
+                  %a.card-link{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"<sup>2</sup>"+":"
+                - cv.r_squared.each do |key,value|
+                  %div.row
+                    %div.col
+                      %h6.card-title
+                        = key
+                    %div.col
+                      = value.signif(3)
+            %hr
+            %div.row
+              %div.col
+                %h6
+                  Within prediction interval:
+                - cv.within_prediction_interval.each do |key,value|
+                  %div.row
+                    %div.col
+                      %h6
+                        = key
+                    %div.col
+                      = value
+              %div.col
+                %h6
+                  Out of prediction interval:
+                - cv.out_of_prediction_interval.each do |key,value|
+                  %div.row
+                    %div.col
+                      %h6
+                        = key
+                    %div.col
+                      = value
 %div.card.bg-light
   %div.card-body
     %h6.card-title QMRF:
diff --git a/views/neighbors.haml b/views/neighbors.haml
index f9d2691..c4f3b94 100644
--- a/views/neighbors.haml
+++ b/views/neighbors.haml
@@ -37,7 +37,7 @@
                         - c = Compound.find(neighbor)
                         %td
                           %a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(c.id.to_s)}/details"), :id=>"link#{j+1}#{count}"}}
-                            = c.svg
+                            = embedded_svg(c.svg, :title=>"click for details")
                         %td
                           %p= c.smiles
                         
diff --git a/views/predict.haml b/views/predict.haml
index d23f26a..d525b33 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -1,6 +1,7 @@
 %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet", :property=>"stylesheet"}
 %script{:src=>"/jsme/jsme.nocache.js"}
 :javascript
+  // GET request
   var HttpClient = function() {
     this.get = function(aUrl, aCallback) {
     var anHttpRequest = new XMLHttpRequest();
@@ -23,6 +24,7 @@
     }
   });*/  
   
+  // get and check input
   function getInput(){
     identifier = document.getElementById("identifier").value.trim();
     fileselect = document.getElementById("fileselect").value;
@@ -34,6 +36,8 @@
     };
     return 0;
   };
+
+  // display wait animation
   function showcircle() {
     switch (getInput()){
       case 0:
@@ -64,6 +68,8 @@
     };
     return false;
   };
+
+  // check if a file was selected for upload
   function checkfile() {
     var fileinput = document.getElementById("fileselect");
     if(fileinput.value != "") {
@@ -73,6 +79,8 @@
     alert("Please select a file (csv).");
     return false;
   };
+
+  // check if a smiles string was entered
   function checksmiles () {
     getsmiles();
     if (document.form.identifier.value == "") {
@@ -83,6 +91,8 @@
     };
     return true;
   };
+
+  // check if a model was selected
   function checkboxes () {
     var checked = false;
     $('input[type="checkbox"]').each(function() {
@@ -97,6 +107,8 @@
     };
     return true;
   };
+
+  // display jsme editor with option
   function jsmeOnLoad() {
     jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
       //optional parameters
@@ -104,12 +116,15 @@
     });
   document.JME = jsmeApplet;
   };
+
+  // get and take smiles from jsme editor for input field
   function getsmiles() {
     if (document.JME.smiles() != '') {
       document.form.identifier.value = document.JME.smiles() ;
     };
   };
 
+  // show model details
   function loadDetails(id) {
     button = document.getElementById("link"+id);
     span = button.childNodes[1];
@@ -133,6 +148,7 @@
       });
     }
   }
+
 // whole site content needs to be in one form. Input and checkboxes are proofed by js functions. 
 %form{:name => "form", :action => to('/predict'), :method => "post", :enctype => "multipart/form-data", :onsubmit => "return !!(showcircle())" }
   %fieldset#top.card.bg-light
@@ -147,11 +163,13 @@
           %a{:href => "http://en.wikipedia.org/wiki/Simplified_molecular_input_line_entry_specification", :rel => "external"} SMILES
           string:
         %input.form-control{:type => 'text', :name => 'identifier', :id => 'identifier'}
-      %p{:style=>"display:none;"}
+      %p{:style=>("display:none;" unless ENV["BATCH_MODE"].to_boolean)}
         %label{:for=>"fileselect"}
           or upload a CSV file for batch predictions:
         %br
-        %input.form-control-file{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv"}
+        %span.btn.btn-file{:style=>"background-color:white;"}
+          %input.form-control-file{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv"}
+        %a.btn.btn-warning{:href => to("/help"), :rel => "external", :style=>"margin-left: 1em;"} Help
 
   %fieldset#middle.card.bg-light
     #models.card-body
diff --git a/views/prediction.haml b/views/prediction.haml
index 47e83fa..2a315f9 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -16,14 +16,14 @@
     New Prediction
 %div.card.bg-light
   %div.card-body
-    %h3.card-title Prediction Results:
+    %h3.card-title Prediction:
     %div.table-responsive
       %table.table.table-bordered{:id=>"overview"}
         %tbody
           %tr
             %td.align-items-center{:id=>"compound"}
               %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: to("/prediction/#{@compound.id}/details"), :id=>"link01"}}
-                = @compound.svg
+                = embedded_svg(@compound.svg, :title=>"click for details")
               %p= @compound.smiles
             - @model_types = {}
             - @dbhit = {}
@@ -71,9 +71,9 @@
                     %br
                     = (type == "Regression") ? "#{prediction[:value].delog10.signif(3)} (#{unit})</br>#{@compound.mmol_to_mg(prediction[:value].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value]
                     
-                    / show prediction interval or probability
+                  / show prediction interval or probability
+                  - if type == "Regression"
                     %p
-                    - if type == "Regression"
                       %b 95% Prediction interval:
                       - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval])
                       / prediction interval popover
@@ -82,7 +82,12 @@
                       = interval.nil? ? "--" : "#{interval[1].delog10.signif(3)} - #{interval[0].delog10.signif(3)} (#{unit})"
                       %br
                       = "#{@compound.mmol_to_mg(interval[1].delog10).signif(3)} - #{@compound.mmol_to_mg(interval[0].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" if !interval.nil?
-                    - else
+                    %p
+                      %b Confidence:
+                      %br
+                      = prediction[:confidence]
+                  - else
+                    %p
                       %b Probability:
                       / probability popover
                       %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Pobability", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"Probability that the prediction belongs to one of the given classes."}}
@@ -92,6 +97,10 @@
                         - if prediction[:probabilities].size == 2
                           %br
                           = "#{prediction[:probabilities].keys[1]}: #{prediction[:probabilities].values[1].signif(3)}"
+                    %p
+                      %b Confidence:
+                      %br
+                      = prediction[:confidence]
                   
                   / show warnings and info
                   %p
diff --git a/views/style.scss b/views/style.scss
index 5d47872..01b5147 100644
--- a/views/style.scss
+++ b/views/style.scss
@@ -72,3 +72,24 @@ ul.share-buttons{
   table-layout: fixed;
   width: 100%;
 }
+.help table, .help th, .help td {
+  background-color: white;
+  border: 1px solid black;
+  border-bottom: none;
+  width: 100%;
+}
+.help th, .help td {
+  padding: 10px;
+  text-align: left;
+}
+/*img.supporters {
+  width: 150px;
+  height: 150px;
+}*/
+supporters{
+  background-color: #fff;
+  img{
+    width: 200px;
+    margin: 1em;
+  }
+}