introduce batch predictions and QMRF for public service;layout refinements for better readability

6 files changed, 276 insertions, 241 deletions

diff --git a/views/batch.haml b/views/batch.haml
index c1b45f6..38c8c6e 100644
--- a/views/batch.haml
+++ b/views/batch.haml
@@ -2,11 +2,11 @@
   %a.btn.btn-warning{:href => to('/predict')}
     %span.glyphicon.glyphicon-menu-left{:aria=>{:hidden=>"true"}}
     New Prediction
-  %a.btn.btn-success{:href=>"#{to("/predict/#{@filename}")}", :title=>"download"}
+  %a.btn.btn-success{:id => "downbutton", :href=>"#{to("/predict/#{@tmppath}/#{@filename}")}", :title=>"download"}
     %span.glyphicon.glyphicon-download-alt
-    download CSV
+    Download CSV
 
-  / show processed file name
+  / show file name
   %topline
     %div.row
       %div.col-md-4
@@ -18,83 +18,95 @@
   %div.table-responsive
     %table.table.table-bordered{:id=>"batch", :style=>"background-color:white;"}
       %tbody
-      - if @warnings
-        - @warnings.each do |warning|
+        - if @warnings
+          - @warnings.each do |warning|
+            %tr
+              %td
+                %b Warning
+              %td
+                = warning.sub(/\b(tmp\/)\b/,"")
+        - @view.each do |compound, array|
           %tr
-            %td
-              %b Warning
-            %td
-              = warning.sub(/\b(tmp\/)\b/,"")
-      / key = compound, values = [model,prediction]
-      - @batch.each do |key, values|
-        - compound = key
-        %tr
-          %td{:style=>"vertical-align:top;"}
-            %p= compound.svg
-            %p= compound.smiles
-          
-          / array[0] = model, array[1] = prediction
-          - values.each_with_index do |array,i|
-            %td{:style=>"vertical-align:top;white-space:nowrap;"}
-              - model = array[0]
-              / model type (classification|regression)
-              - model.model.class.to_s.match("Classification") ? type = "Classification" : type = "Regression"
-              - unit = model.unit
-              - prediction = array[1]
-              
-              %b{:class => "title"}
-                = "#{model.endpoint.gsub('_', ' ')} (#{model.species})"
-                  
-              / check for prediction
-              - if prediction[:neighbors].size > 0
-                %p
-                / show model type (classification|regression)
-                %b Type:
-                = type
-                %p 
-                / check for database hit
-                - if prediction[:info] =~ /\b(identical)\b/i
-                  
-                  / show message about dbhit and measurements
+            %td{:style=>"vertical-align:top;"}
+              %p= compound.svg
+              %p= compound.smiles
+            - array.each do |model,prediction|
+              %td{:style=>"vertical-align:top;white-space:nowrap;"}
+                - model.model.class.to_s.match("Classification") ? type = "Classification" : type = "Regression"
+                - unit = model.unit
+                
+                %b{:class => "title"}
+                  = "#{model.endpoint.gsub('_', ' ')} (#{model.species})"
+                    
+                / check for prediction
+                - if prediction[:value]
                   %p
-                    %b Compound is part of the training dataset
+                  / show model type (classification|regression)
+                  %b Type:
+                  = type
+                  %p 
+                  / check for database hit
+                  - if prediction[:info] =~ /\b(identical)\b/i
+                    
+                    / show message about dbhit and measurements
                     %p
-                    %b Measured activity:
+                      %b Compound is part of the training dataset
+                      %p
+                      %b Measured activity:
+                      %br
+                      - if prediction[:measurements].is_a?(Array)
+                        = (type == "Regression") ? prediction[:measurements].collect{|value| $logger.debug value ; "#{value.delog10.signif(3)} (#{unit})</br>#{compound.mmol_to_mg(value.delog10.signif(3))} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : prediction[:measurements].join(", ")
+                      - else
+                        - $logger.debug prediction[:measurements]
+                        - $logger.debug prediction[:measurements].delog10
+                        - $logger.debug prediction[:measurements].delog10.signif(3)
+                        = (type == "Regression") ? "#{prediction[:measurements].delog10.signif(3)} (#{unit})</br>#{compound.mmol_to_mg(prediction[:measurements].delog10.signif(3))} #{(unit =~ /\b(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:measurements]
+                    
+                    
+                  / show prediction
+                  %p
+                    %b Prediction:
                     %br
-                    - if prediction[:measurements].is_a?(Array)
-                      = (type == "Regression") ? prediction[:measurements].collect{|value| "#{value.delog10} (#{unit})</br>#{compound.mmol_to_mg(value.delog10)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : prediction[:measurements].join(", ")
+                    = (type == "Regression") ? "#{prediction[:value].delog10.signif(3)} (#{unit})</br>#{compound.mmol_to_mg(prediction[:value].delog10.signif(3))} #{(unit =~ /\b(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value]
+                    
+                    / show prediction interval or probability
+                    %p
+                    - if type == "Regression"
+                      %b 95% Prediction interval:
+                      - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval])
+                      %br
+                      = 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(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" if !prediction[:prediction_interval].nil?
                     - else
-                      = (type == "Regression") ? "#{prediction[:measurements].delog10} (#{unit})</br>#{compound.mmol_to_mg(prediction[:measurements].delog10)} #{(unit =~ /\b(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:measurements]
-                
-                
-                / show prediction
-                %p
-                  %b Prediction:
-                  %br
-                  = (type == "Regression") ? "#{prediction[:value].delog10} (#{unit})</br>#{compound.mmol_to_mg(prediction[:value].delog10)} #{(unit =~ /\b(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value]
-                  
-                  / show prediction interval or probability
+                      %b Probability:
+                      - unless prediction[:probabilities].nil?
+                        - probabilities = ""
+                        - prediction[:probabilities].each{|k,v| probabilities += "#{k}: #{v.signif(3)}<br>"}
+                        %br
+                        = probabilities
+                  / show warnings
                   %p
-                  - if type == "Regression"
-                    %b 95% Prediction interval:
-                    - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval])
+                  - if !prediction[:info].blank?
+                    %b Info:
                     %br
-                    = interval.nil? ? "--" : "#{interval[1].delog10} - #{interval[0].delog10} (#{unit})"
-                    %br
-                    = "#{compound.mmol_to_mg(interval[1].delog10)} - #{compound.mmol_to_mg(interval[0].delog10)} #{(unit =~ /\b(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" if !prediction[:prediction_interval].nil?
-                  - else
-                    %b Probability:
-                    - unless prediction[:probabilities].nil?
+                    %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",<br>")
+                  - if !prediction[:warnings].blank?
+                    %b Warnings:
+                    - prediction[:warnings].uniq.each do |warning|
                       %br
-                      = "#{prediction[:probabilities].keys[0]}: #{prediction[:probabilities].values[0]}"
+                      %p=warning.sub(/substances/, "substances<br>").sub(/prediction\:/, "prediction\:<br>")
+                        
+                  / no prediction  
+                - else
+                  %br
+                  - if !prediction[:info].blank?
+                    %b Info:
+                    %br
+                    %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",<br>")
+                  - if !prediction[:warnings].blank?
+                    %b Warnings:
+                    - prediction[:warnings].uniq.each do |warning|
                       %br
-                / show warnings
-                %p
-                - if !prediction[:warning].nil?
-                  %b Warnings:
-                  %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Warnings", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"#{prediction[:warning]}"}}
-                    
-                / no prediction  
-              - else
-                %p
-                  = "Not enough similar compounds </br>in training dataset."
+                      %p=warning.sub(/substances/, "substances<br>").sub(/prediction\:/, "prediction\:<br>")
+            %tr
diff --git a/views/layout.haml b/views/layout.haml
index d8ff735..5e76d85 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -31,7 +31,9 @@
         %div.col-md-3
           %h1.media-heading
             %small
-              %a{:href=>"https://nano-lazar.in-silico.ch", :rel=>"external"} nano-lazar
+              %a.btn{:href=>"https://nano-lazar.in-silico.ch", :rel=>"external"}
+                nano-lazar
+                %span.glyphicon.glyphicon-new-window
 
     %div.container-fluid
       %topline.alert
@@ -86,16 +88,18 @@
               %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.col-md-12
-            %p Financial support by
-            %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"}
+          %supporters
+            %div.panel.panel-default
+              Financial support by
+              %div.panel-body
+                %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%;"}
diff --git a/views/model_details.haml b/views/model_details.haml
index 5c3aa4f..d85d2fb 100644
--- a/views/model_details.haml
+++ b/views/model_details.haml
@@ -1,141 +1,156 @@
-%b Model:
-%br
-Source:
-%a{:href=>model.source, :rel=>"external"}
-  = model.source
-%br
-- model.classification? ? type = "Classification" : type = "Regression"
-= "Type:\t"
-= type
-%br
-- training_dataset = OpenTox::Dataset.find model.model.training_dataset_id
-= "Training compounds:\t"
-= training_dataset.data_entries.size
-%br
-= "Training dataset:\t"
-%a{:href=>"#{to("/predict/dataset/#{training_dataset.name}")}"}
-  = training_dataset.name
-%br
-%b Algorithms:
-%br
-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:
-%a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"}
-  = model.model.algorithms["prediction"]["method"]
-%br
-Descriptors:
-= model.model.algorithms["descriptors"]["method"]+","
-= model.model.algorithms["descriptors"]["type"]
-%p
-- if type == "Classification"
-  %b Independent crossvalidations:
-- else
-  %b Independent crossvalidations (-log10 transformed):
-%div.row{:id=>"validations#{model.id}", :style=>"background-color:#f5f5f5;"}
-  - crossvalidations.each do |cv|
-    %span.col-xs-4.col-sm-4.col-md-4.col-lg-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
+%div.panel.panel-default
+  %div.panel-heading
+    %b Model:
+  %div.panel-body
+    Source:
+    %a{:href=>model.source, :rel=>"external"}
+      = model.source
+    %br
+    - model.classification? ? type = "Classification" : type = "Regression"
+    = "Type:\t"
+    = type
+    %br
+    - training_dataset = OpenTox::Dataset.find model.model.training_dataset_id
+    = "Training compounds:\t"
+    = training_dataset.data_entries.size
+    %br
+    = "Training dataset:\t"
+    %a{:href=>"#{to("/predict/dataset/#{training_dataset.name}")}"}
+      = training_dataset.name
+
+%div.panel.panel-default
+  %div.panel-heading
+    %b Algorithms:
+  %div.panel-body
+    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:
+    %a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"}
+      = model.model.algorithms["prediction"]["method"]
+    %br
+    Descriptors:
+    = model.model.algorithms["descriptors"]["method"]+","
+    = model.model.algorithms["descriptors"]["type"]
+
+%div.panel.panel-default
+  - if type == "Classification"
+    %div.panel-heading
+      %b Independent crossvalidations:
+  - else
+    %div.panel-heading
+      %b Independent crossvalidations (-log10 transformed):
+  %div.panel-body
+    /%div.row{:id=>"validations#{model.id}", :style=>"background-color:#f5f5f5;"}
+    %div.row{:id=>"validations#{model.id}"}
+      - crossvalidations.each do |cv|
+        %span.col-xs-4.col-sm-4.col-md-4.col-lg-4
+          = "Num folds:\t"
+          = cv.folds
           %br
-          = "True positive rate:\t"
-          = cv.true_rate[cv.accept_values[0]].round(3)
+          = "Num instances:\t"
+          = cv.nr_instances
           %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")
-          %table.table.table-condensed.table-borderless{:style=>"width:20%;"}
-            %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
+          = "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
-        %br
-        /= "Confidence plot:"
-        /%p.plot
-        /  %img{:src=>"confp#{cv.id}.svg"}
-      - if model.regression?
-        %br
-        %a.ht5{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE:
-        = cv.rmse.round(3) if cv.rmse
-        %br
-        %a.ht5{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE:
-        = cv.mae.round(3) if cv.mae
-        %br 
-        %a.ht5{: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"}
+              = "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")
+              %table.table.table-condensed.table-borderless{:style=>"width:20%;"}
+                %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
+                  %br
+            %br
+            /= "Confidence plot:"
+            /%p.plot
+            /  %img{:src=>"confp#{cv.id}.svg"}
+          - if model.regression?
+            %br
+            %a.ht5{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE:
+            = cv.rmse.round(3) if cv.rmse
+            %br
+            %a.ht5{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE:
+            = cv.mae.round(3) if cv.mae
+            %br 
+            %a.ht5{: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"}
           
-%br 
+%div.panel.panel-default
+  %div.panel-heading
+    %b QMRF:
+  %div.panel-body
+    %a.btn.btn-default.btn-xs{:href=>"#{to("/report/#{model.id}")}", :id=>"report#{model.id}", :style=>"font-size:small;"}
+      %span.glyphicon.glyphicon-download-alt
+      XML
diff --git a/views/predict.haml b/views/predict.haml
index 59630d0..9fb56cb 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -125,13 +125,12 @@
       %br
       %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
       %p
-      -#%label{:for=>"fileselect"}
-        or upload a CSV file for batch predictions (disabled in public version)
-      -#%a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"File format", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"auto", html:"true", content:"One column with compounds and keyword SMILES or InChI in the first row."}}
-      -#%br
-      -#%span.btn.btn-default.btn-file
-        -#%input{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv", :disabled=>"disabled"}
-      %input{:type=>"hidden", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv", :disabled=>"disabled"}
+      %label{:for=>"fileselect"}
+        or upload a CSV file for batch predictions:
+      %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"File format", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"auto", html:"true", content:"One column with compounds and keyword SMILES or InChI in the first row."}}
+      %br
+      %span.btn.btn-default.btn-file
+        %input{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv"}
 
   %fieldset#middle.well
     %h2 2. Select one or more endpoints
@@ -140,19 +139,26 @@
         %div{:id=>endpoint.gsub(/\s+/, "_")}
           %h4.head-back=endpoint
           - @models.select{|m| m.endpoint == endpoint}.each do |model|
-            %div.row{:id => model.id}
-              %span.col-sm-4
+            %div.row{:id => model.id,:style=>"margin-bottom:1em;"}
+              %span.col-lg-4.col-md-4.col-sm-4.col-xs-4
                 %input{:type => "checkbox", :name => "selection[#{model.id}]", :id => "selection[#{model.species.gsub(/\s+/, "_")}]", :value => true, :disabled => false}
                 %label{:for => "selection[#{model.species.gsub(/\s+/, "_")}]"}
                   = model.species
-              %span.col-sm-8
+              %span.col-lg-8.col-md-8.col-sm-8.col-xs-8
                 %a.btn.btn-default.btn-xs{:data=>{:toggle=>"collapse"}, :href=>"#details#{model.id}", :onclick=>"load#{model.id}Details('#{model}')", :id => "link#{model.id}", :style=>"font-size:small;"}
+                  %span.glyphicon.glyphicon-menu-right
                   Details | Validation
                 %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle#{model.id}", :class=>"circle#{model.id}", :alt=>"wait", :style=>"display:none;"}
             %div.panel-collapse.collapse{:id=>"details#{model.id}", :style=>"margin-left:1em;"}
             :javascript
               function load#{model.id}Details(model) {
                 button = document.getElementById("link#{model.id}");
+                span = button.childNodes[1];
+                if (span.className == "glyphicon glyphicon-menu-right"){
+                  span.className = "glyphicon glyphicon-menu-down";
+                } else if (span.className = "glyphicon glyphicon-menu-down"){
+                  span.className = "glyphicon glyphicon-menu-right";
+                };
                 image = document.getElementById("circle#{model.id}");
                 if ($('modeldetails#{model.id}').length == 0) {
                   $(button).hide();
@@ -170,9 +176,9 @@
               }
   %fieldset#bottom.well
     %div.row
-      %div.col-md-2
+      %div.col-lg-2.col-md-2.col-sm-2.col-xs-2
         %h2
           3. Predict
-      %div.col-md-10
+      %div.col-lg-10.col-md-10.col-sm-10.col-xs-10
         %input.btn.btn-warning.h2{ :type => "submit", :id => "submit", :value=>">>", :onclick => "getsmiles()"}
         %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :alt=>"wait", :style=>"display:none;"}
diff --git a/views/prediction.haml b/views/prediction.haml
index 24d62fa..a657dba 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -81,11 +81,11 @@
                 / show warnings and info
                 %p
                 - if !prediction[:info].blank?
-                  %b info:
+                  %b Info:
                   %br
                   %p=prediction[:info].sub(/excluded/, "excluded<br>")
                 - if !prediction[:warnings].blank?
-                  %b warnings:
+                  %b Warnings:
                   - prediction[:warnings].uniq.each do |warning|
                     %br
                     %p=warning
@@ -94,11 +94,11 @@
                 %br
                 - @dbhit[i] = false
                 - if !prediction[:info].blank?
-                  %b info:
+                  %b Info:
                   %br
                   %p=prediction[:info].sub(/excluded/, "excluded<br>")
                 - if !prediction[:warnings].blank?
-                  %b warnings:
+                  %b Warnings:
                   - prediction[:warnings].uniq.each do |warning|
                     %br
                     %p=warning.sub(/substances/, "substances<br>").sub(/prediction\:/, "prediction\:<br>")
diff --git a/views/style.scss b/views/style.scss
index 308d1ba..ac070a1 100644
--- a/views/style.scss
+++ b/views/style.scss
@@ -35,7 +35,6 @@ h4.head-back, h5.head-back{
 }
 .nav-tabs {
   background-color: #E7E7E7;
-  //margin-bottom: 0;
 
   li.active a:hover {
     background-color: #f5f5f5;
@@ -84,11 +83,10 @@ ul.share-buttons{
   padding-right: 5px;
 }
 supporters{
-  background-color: white;
   text-align:center;
   img{
     width: 200px;
-    margin-right: 1em;
+    margin: 1em;
   }
 }