fixed merge

11 files changed, 340 insertions, 147 deletions

diff --git a/views/details.haml b/views/details.haml
index 8a57440..bb8250d 100644
--- a/views/details.haml
+++ b/views/details.haml
@@ -19,6 +19,6 @@
   %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", :target=>"_blank"} PubChem read across 
+    %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/faq.haml b/views/faq.haml
new file mode 100644
index 0000000..818b96a
--- /dev/null
+++ b/views/faq.haml
@@ -0,0 +1,2 @@
+%div.well.faq
+  = @faq
diff --git a/views/faq_layout.haml b/views/faq_layout.haml
new file mode 100644
index 0000000..a9b6664
--- /dev/null
+++ b/views/faq_layout.haml
@@ -0,0 +1,67 @@
+!!!
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %meta{'charset'=>"utf-8"}
+    %meta{'http-equiv'=>"X-UA-Compatible", :content=>"IE=edge"}
+    %meta{'name'=>"viewport", :content=>"width=device-width, initial-scale=1"}
+    %title Lazar GUI FAQ
+    %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'}
+    %link{:rel=>'stylesheet', :href=>"#{'/css/bootstrap.min.css'}"}
+    %link{:rel=>'stylesheet', :href=>"#{'/css/theme.default.min.css'}"}
+    %link{:rel=>'stylesheet', :href=>"#{'/css/theme.bootstrap.min.css'}"}
+    %link{ :href=>"/style.css", :rel=>"stylesheet"}
+    %link{ :href=>"/stylesheets/jquery-ui.css", :rel=>"stylesheet"}
+    %script{:src=>"/javascripts/jquery-1.11.2.min.js"}
+    %script{:src=>"/javascripts/bootstrap.min.js"}
+    %script{ :src=>"/javascripts/lazar-gui.js"}
+  %body
+    %noscript
+      %div{ :style=>"width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"}
+      Your web browser must have JavaScript enabled in order for this application to display correctly.
+    %header.page-header
+      %div.row
+        %div.col-md-2
+          %a{:href=> to("/predict")}
+            %img.media-object{:src=>"/images/ist_logo.png", :alt=>"logo", :style=>"margin:0 3em 0 2em;"}
+        %div.col-md-10
+          %h1.media-heading{:style=>"margin: 0 0 0 1em;display:inline;"} Lazar GUI
+          A Graphical User Interface for the <a href="http://github.com/opentox/lazar">Lazar</a> framework
+    
+    %div.container-fluid
+      :javascript
+        $(document).ready(function(){
+          $("#back-top").hide();
+          $(".blind").error(function(){
+            $(this).attr('src', '/images/blind.png');
+          });
+        });
+          
+      = yield
+    
+    %footer.footer
+      %div.container-fluid
+        %p.text-muted
+          &copy; 
+          %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}
+
+    #back-top{:style => "z-index:100;position:fixed;bottom:1%;right:1%;"}
+      %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
+        %span.glyphicon.glyphicon-circle-arrow-up{:style => "font-size:3em;color:black;"}
+    :javascript
+      $("#back-top").hide();
+      $(function () {
+        $(window).scroll(function () {
+          if ($(this).scrollTop() > 600) {
+            $('#back-top').fadeIn();
+          } else {
+            $('#back-top').fadeOut();
+          }
+        });
+        // scroll body to 0px on click
+        $('#back-top a').click(function () {
+          $('body,html').animate({
+            scrollTop: 0
+          }, 500);
+          return false;
+        });
+      });
diff --git a/views/layout.haml b/views/layout.haml
index 60f2bb3..dddf854 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -4,7 +4,7 @@
     %meta{'charset'=>"utf-8"}
     %meta{'http-equiv'=>"X-UA-Compatible", :content=>"IE=edge"}
     %meta{'name'=>"viewport", :content=>"width=device-width, initial-scale=1"}
-    %title Lazar Toxicity Predictions
+    %title lazar Toxicity Predictions
     %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'}
     %link{:rel=>'stylesheet', :href=>"#{'/css/bootstrap.min.css'}"}
     %link{:rel=>'stylesheet', :href=>"#{'/css/theme.default.min.css'}"}
@@ -15,8 +15,8 @@
     %script{:src=>"/javascripts/bootstrap.min.js"}
     %script{:src=>"/javascripts/jquery.tablesorter.min.js"}
     %script{:src=>"/javascripts/jquery.tablesorter.widgets.js"}
-    %script{ :src=>"/javascripts/lazar-gui.js"}
-  %body{:style=>"background-color:#E7E7E7"}
+    %script{:src=>"/javascripts/lazar-gui.js"}
+  %body
     %noscript
       %div{ :style=>"width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"}
       Your web browser must have JavaScript enabled in order for this application to display correctly.
@@ -24,11 +24,38 @@
       %div.row
         %div.col-md-2
           %a{:href=> to("/predict")}
-            %img.media-object{:src=>"/images/ist_logo.png", :alt=>"logo", :style=>"margin:0 3em 0 2em;"}
+            %img.media-object{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"150px", :heigth=>"150px", :style=>"margin:0 3em 0 2em;"}
         %div.col-md-8
-          %h1.media-heading{:style=>"margin: 0 0 0 1em;"} Lazar Toxicity Predictions
-    
+          %h1.media-heading
+            lazar toxicity predictions
+        %div.col-md-2
+          %h1.media-heading
+            %small
+              %a{:href=>"https://nano-lazar.in-silico.ch"} nano-lazar
+
     %div.container-fluid
+      %topline
+        %div.row
+          %div.col-md-8
+            Problems, bugs, ideas for improvements ? Please report at our
+            %a{:href => 'https://github.com/opentox/lazar-gui/issues', :rel => "external"} issue tracker
+            or send us an email
+            %a{ :href=>"mailto:info@in-silico.ch", :target=>"_top"}
+              %img.share{:src=>"/images/Email.png"}
+            (version #{@version}).
+          %div.col-md-2
+          %div.col-md-2
+            %a{:href=>"https://twitter.com/intent/tweet?source=http%3A%2F%2Flazar.in-silico.ch&text=:%20http%3A%2F%2Flazar.in-silico.ch", :target=>"_blank", :title=>"Tweet"}
+              %img.share{:src=>"/images/Twitter.png"}
+            %a{:href=>"https://plus.google.com/share?url=http%3A%2F%2Flazar.in-silico.ch", :target=>"_blank", :title=>"Share on Google+"}
+              %img.share{:src=>"/images/Google+.png"}
+            %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", :target=>"_blank", :title=>"Share on LinkedIn"}
+              %img.share{:src=>"/images/LinkedIn.png"}
+            %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", :target=>"_blank", :title=>"Share on Facebook"}
+              %img.share{:src=>"/images/Facebook.png"}
+        %div.row
+        Previous version:
+        %a{:href=>"http://lazar-old.in-silico.ch", :rel => "external"} lazar-old
       :javascript
         $(document).ready(function(){
           $("#back-top").hide();
@@ -36,14 +63,35 @@
             $(this).attr('src', '/images/blind.png');
           });
         });
+        $(document).ready(function(){
+          $('[data-toggle="popover"]').popover();
+          $('.modal').on('hidden.bs.modal', function () {
+            $(this).removeData('bs.modal');
+          });
+        });
           
       = yield
     
     %footer.footer
       %div.container-fluid
-        %p.text-muted
-          &copy; 
-          %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}
+        %div.row
+          %div.col-md-12
+            %p.text-muted
+              &copy; 
+              %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"}
+    
 
     #back-top{:style => "z-index:100;position:fixed;bottom:1%;right:1%;"}
       %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
diff --git a/views/license.haml b/views/license.haml
new file mode 100644
index 0000000..2813220
--- /dev/null
+++ b/views/license.haml
@@ -0,0 +1 @@
+= @license
diff --git a/views/model_details.haml b/views/model_details.haml
index e5886e7..7646471 100644
--- a/views/model_details.haml
+++ b/views/model_details.haml
@@ -1,28 +1,39 @@
 %b Model:
 %br
 Source:
-%a{:href=>model.source, :target=>"external"}
+%a{:href=>model.source, :rel=>"external"}
   = model.source
 %br
-= "Algorithm:\tLAZAR"
-%br
 - model.classification? ? type = "Classification" : type = "Regression"
 = "Type:\t"
 = type
 %br
-- training_dataset = OpenTox::Dataset.find model.training_dataset.id
-= "Training dataset:\t"
-= training_dataset.source.split("/").last
-%br
+- training_dataset = OpenTox::Dataset.find model.model.training_dataset_id
 = "Training compounds:\t"
 = training_dataset.compounds.size
-
+%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
-%b Crossvalidation (3 independent):
+- if type == "Classification"
+  %b Independent crossvalidations:
+- else
+  %b Independent crossvalidations (-log10 transformed):
 %div.row{:id=>"validations#{model.id}", :style=>"background-color:#f5f5f5;"}
-  - model.crossvalidations.each do |crossvalidation|
+  - crossvalidations.each do |cv|
     %span.col-xs-4.col-sm-4.col-md-4.col-lg-4
-      - cv = OpenTox::CrossValidation.find crossvalidation.id
       = "Num folds:\t"
       = cv.folds
       %br
@@ -36,93 +47,89 @@ Source:
         = "Accuracy:\t"
         = cv.accuracy.round(3) if cv.accuracy
         %br
-        = "Weighted Accuracy:\t"
+        = "Weighted accuracy:\t"
         = cv.weighted_accuracy.round(3) if cv.weighted_accuracy
         %br
         = "True positive rate:\t"
-        = cv.true_rate["active"].round(3) if cv.true_rate["active"]
+        = cv.true_rate["active"].round(3) if cv.true_rate
         %br
         = "True negative rate:\t"
-        = cv.true_rate["inactive"].round(3) if cv.true_rate["inactive"]
+        = cv.true_rate["inactive"].round(3) if cv.true_rate
         %br 
         = "Positive predictive value:\t"
-        = cv.predictivity["active"].round(3) if cv.predictivity["active"]
+        = cv.predictivity["active"].round(3) if cv.predictivity
         %br
         = "Negative predictive value:\t"
-        = cv.predictivity["inactive"].round(3) if cv.predictivity["inactive"]
+        = cv.predictivity["inactive"].round(3) if cv.predictivity
         %p
-        %b 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 
-                =cv.confusion_matrix[0][0]
-              %td 
-                =cv.confusion_matrix[0][1]
-              -#%td 
-                =cv.confusion_matrix[0][0]+cv.confusion_matrix[0][1]
-            %tr
-              %td
-              %td inactive
-              %td 
-                =cv.confusion_matrix[1][0]
-              %td 
-                =cv.confusion_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
+        - ["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
-        -#%p
-          = "Confidence plot:"
-        -#%p{:id=>"confp#{cv.id}", :style=>"transform:scale(0.5);margin-left:-30%;margin-top:-30%;padding:0;"}
-          = cv.confidence_plot
+        /= "Confidence plot:"
+        /%p.plot
+        /  %img{:src=>"confp#{cv.id}.svg"}
       - if model.regression?
         %br
-        = "Root mean squared error:\t"
+        %a.ht5{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE:
         = cv.rmse.round(3) if cv.rmse
         %br
-        = "Weighted root mean squared error:\t"
-        = cv.weighted_rmse.round(3) if cv.weighted_rmse
-        %br
-        = "Mean absolute error:\t"
+        %a.ht5{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE:
         = cv.mae.round(3) if cv.mae
-        %br
-        = "Weighted mean absolute error:\t"
-        = cv.weighted_mae.round(3) if cv.weighted_mae
         %br 
-        = "R square:\t"
+        %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
-        -#%p
-          = "Correlation plot"
-        -#%p{:id=>"corrp#{cv.id}", :style=>"transform:scale(0.5);margin-left:-30%;margin-top:-30%;margin-bottom:0;padding:0;"}
-          =cv.correlation_plot
-        -#%p
-          = "Confidence plot:"
-        -#%p{:id=>"confp#{cv.id}", :style=>"transform:scale(0.5);margin-left:-30%;margin-top:-30%;margin-bottom:0;padding:0;"}
-          = cv.confidence_plot
+        %br
+        /= "Confidence plot:"
+        /%p.plot
+        /  %img{:src=>"/confp#{cv.id}.svg"}
+        /%br
+        /= "Correlation plot"
+        /%p.plot
+        /  %img{:src=>"/corrp#{cv.id}.svg"}
+          
 %br
diff --git a/views/neighbors.haml b/views/neighbors.haml
index 6001605..d9f2796 100644
--- a/views/neighbors.haml
+++ b/views/neighbors.haml
@@ -9,7 +9,17 @@
   #tabs
     %ul.nav.nav-tabs.nav-justified{:id=>"neighborTabs", :role=>"tablist"}
       / each model a tab head ;
+      / hash for predictionFeature
+      - predictionFeature = {}
       - @models.each_with_index do |model,i|
+        / get predictionFeature type
+        - m = Model::Lazar.find model.model_id.to_s
+        - predFeature = Feature.find m.prediction_feature_id.to_s
+        / define feature type (numeric : nominal)
+        - predFeatureType = (predFeature.numeric? ? "numeric" : "nominal")
+        / use prediction feature id for neighbor compound features
+        - predFeatureId = m.prediction_feature_id.to_s
+        - predictionFeature[i] = {"id" => predFeatureId, "type" => predFeatureType}
         %li{:class => ("active" if i == 0)}
           %a{:href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}}
             = "#{model.endpoint} (#{model.species})"
@@ -28,8 +38,8 @@
               $("table##{j+1}").tablesorter({
                 debug: false,
                 theme: "bootstrap",
-                headerTemplate: '{content} {icon}',
-                widgets: ['zebra', 'columns', 'uitheme', 'stickyHeaders'],
+                headerTemplate: '',
+                widgets: ['columns', 'uitheme', 'stickyHeaders'],
                 widgetOptions: {
                   stickyHeaders_attachTo : '.tab-content',
                   stickyHeaders : '',
@@ -43,50 +53,45 @@
                   stickyHeaders_yScroll : null,
                   stickyHeaders_filteredToTop: true
                 },
-                headers: {0: {sorter: false}, 3: {sorter: false}},
                 sortList: [[2,1]],
+                headers: {sorter: false},
                 widthFixed: false
               });
             });
           - if prediction[:neighbors].size > 0
             %div.table-responsive
-              %table.tablesorter{:id=>"#{j+1}", :style=>"border-style: solid;"}
+              %table{:id=>"#{j+1}", :style=>"border-style: solid;"}
                 %thead
                   %tr
-                    %th{:style =>"vertical-align:middle;"}
+                    %th.sorter-false{:style =>"vertical-align:middle;"}
                       Compound
-                    %th{:style =>"vertical-align:middle;"}
+                    %th.sorter-false{:style =>"vertical-align:middle;"}
                       Measured Activity
-                    %th{:style =>"vertical-align:middle;"}
+                      %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"}
+                    %th.sorter-false{:style =>"vertical-align:middle;"}
                       Similarity
+                      %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", html:"true", content:"<a href=\"https://en.wikipedia.org/wiki/Jaccard_index\">Tanimoto/Jaccard</a> similarity based on <a href=\"https://openbabel.org/docs/dev/FileFormats/MolPrint2D_format.html\">Molprint2D</a> fingerprints."}, :style=>"z-index:auto+10;"}
                     / %th{:style =>"vertical-align:middle;"}
                     / Supporting Information
-                %span
-                  %tr
-                    %td
-                    %td{:style=>"font-size:x-small;padding:0px;"}
-                      / %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", data: {toggle:"popover", placement:"auto", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"}
-                    %td{:style=>"font-size:x-small;padding:0px;"}
-                      / %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", data: {toggle:"popover", placement:"auto", html:"true", content:"LAZAR calculates activity specific similarities based on the presence of statistically significant fragments. This procedure will <ul><li>consider only those parts of a chemical structure that are relevant for a particular endpoint</li><li>ignore inert parts of the structure</li><li>lead to different similarities, depending on the toxic endpoint Similarities of 1 may be encountered even for structurally dissimilar compounds, because inert parts are ignored.</li></ul>"}, :style=>"z-index:auto+10;"}
-                    / %td
                 %tbody
                   - type = @model_types[j]
+                  - unit = @models[j].unit
                 - prediction[:neighbors].uniq.each_with_index do |neighbor,count|
                   %tr
                     / Compound
+                    - c = Compound.find(neighbor)
                     %td{:style =>"vertical-align:middle;padding-left:1em;width:50%;"}
-                      /%a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(neighbor[0].to_s)}/details"), :id=>"link#{j+1}#{count}"}}
-                      %p= Compound.find(neighbor[0]).svg
-                      %p= Compound.find(neighbor[0]).smiles
-                    - c = Compound.find(neighbor[0])
-                    //- mw = c.molecular_weight
+                      /%a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(neighbor["_id"])}/details"), :id=>"link#{j+1}#{count}"}}
+                      %p= c.svg
+                      %p= c.smiles
                     / Measured Activity
                     %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;white-space:nowrap;"}
-                      = (type == "Regression") ? neighbor[2].collect{|n| weight = c.mmol_to_mg(n); '%.2e' % n + " (#{@models[j].unit})"+"|#{'%.2e' % weight} (mg/kg_bw/day)"}.join("</br>") : neighbor[2].join(", ")
-                    / Similarity
+                      = (type == "Regression" ? "#{neighbor[:measurement].delog10}" + " (#{unit})" : neighbor[:measurement])
+                      %br
+                      = "#{c.mmol_to_mg(neighbor[:measurement].delog10)}" + " (#{(unit =~ /\b(mol\/L)\b/) ? "mg/L" : "mg/kg_bw/day"})" if type == "Regression"
+                    / Similarity = tanimoto
                     %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;"}
-                      / TODO differentiate between no neighbors found and compound found in dataset, display neighbors for compounds in dataset?
-                      = neighbor[1] != nil ? neighbor[1].round(2) : "Not enough similar compounds </br>in training dataset."
+                      = neighbor[:similarity].round(3)
 
           - else
             %span.btn.btn-default.disabled
diff --git a/views/predict.haml b/views/predict.haml
index 7f19071..66006d4 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -162,6 +162,7 @@
                     document.getElementById("details#{model.id}").appendChild(details);
                     $(button).show();
                     $(image).hide();
+                    addExternalLinks();
                   });
                 }
               }
diff --git a/views/prediction.haml b/views/prediction.haml
index 8d7e3d0..2454aca 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -12,7 +12,7 @@
   / displays all prediction result in first table
   %h3 Prediction Results:
   %div.table-responsive
-    %table.table.table-bordered{:id=>"overview", :style=>"background-color:white;"}
+    %table.table.table-bordered{:id=>"overview"}
       %tbody
         %tr
           %td{:id=>"compound", :style=>"vertical-align:top;"}
@@ -24,21 +24,25 @@
           - @predictions.each_with_index do |prediction,i|
             - type = @models[i].model.class.to_s.match("Classification") ? "Classification" : "Regression"
             - @model_types[i] = type
+            - unit = @models[i].unit
             %td{:style=>"vertical-align:top;white-space:nowrap;"}
               %b{:class => "title"}
                 = "#{@models[i].endpoint.gsub('_', ' ')} (#{@models[i].species})"
               %p
-              - if prediction[:confidence] == "measured"
+              - if prediction[:warning] =~ /\b(identical)\b/i
                 - @dbhit[i] = true
                 %p
+                /TODO combine with regular view, if prediction value is present
                 %b Measured activity:
-                - p prediction[:value] 
+                - p prediction[:value]
                 - if prediction[:value].is_a?(Array)
-                  = (type == "Regression") ? prediction[:value].collect{|v| weight = Compound.from_smiles(@compound.smiles).mmol_to_mg(v); '%.2e' % v + " (#{@models[i].unit})"+"|#{'%.2e' % weight} (mg/kg_bw/day)"}.join("</br>") : prediction[:value].join(", ")
+                  = (type == "Regression") ? prediction[:value].collect{|value| "#{value} (#{unit}) , #{@compound.mmol_to_mg(value.delog10)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : prediction[:value].join(", ")
                 - else
-                  = (type == "Regression") ? "#{"%.2e" % prediction[:value]} (#{@models[i].unit}) | #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} (mg/kg_bw/day)" : prediction[:value]
-                %p 
+                  = (type == "Regression") ? "#{prediction[:value]} (#{unit}), #{@compound.mmol_to_mg(prediction[:value].delog10)} #{(unit =~ /\b(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value]
+                %p
                   %b Compound is part of the training dataset
+                  / warning popover
+                  %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Warnings", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"#{prediction[:warning]}"}}
               - elsif prediction[:neighbors].size > 0
                 %p
                 / model type (classification|regression)
@@ -46,22 +50,38 @@
                 = type
                 %br
                 %b Prediction:
-                = (type == "Regression") ? "#{'%.2e' % prediction[:value]} (#{@models[i].unit}) | #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} (mg/kg_bw/day)" : prediction[:value]
-                / TODO update description
-                / %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Prediction", data: {toggle:"popover", placement:"left", html:"true", content:"LAZAR calculates searches the training dataset for similar compounds (neighbors) and calculates the prediction from their measured activities. LAZAR calculates predictions using <ul><li>a majority vote (weighted by compound similarity) for<br /><b>classification</b> (<a href='http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract', target='_blank'>original publication</a>) </li><li>a local QSAR model based on neighbors for<br /><b>regression</b> (<a href='http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract', target='_blank'</h>original publication</a>) </li></ul>Please keep in mind that predictions are based on the measured activities of neighbors."}}
+                / prediction popover
+                %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Prediction", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"<p>lazar searches the training dataset for similar compounds (neighbors) and calculates the prediction from their experimental activities.<p><b>Classification:</b></br>Majority vote of neighbor activities weighted by similarity.<p><b>Regression:</b></br>Prediction from a local partial least squares regression model with neighbor activities weighted by similarity.<p><a href=\"http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract\", target=\"_blank\"> Original publication</a>."}}
+                %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]
+                / tabindex=0 seems the best fix for FF|S browsers on OSX better than trigger="click focus" which ends up in double click for FF.
                 %br
-                / TODO probability
-                %b Confidence:
-                = prediction[:confidence].round(2)
-                / %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Confidence", data: {toggle:"popover", placement:"left", html:"true", content:"Indicates the applicability domain of a model. Predictions with a high confidence can be expected to be more reliable than predictions with low confidence. Confidence values may take any value between 0 and 1. For most models confidence > 0.025 is a sensible (hard) cutoff to distinguish between reliable and unreliable predictions."}}
+                - if type == "Regression"
+                  %b 95% Prediction interval:
+                  - interval = (prediction[:prediction_interval].nil? ? ["- -","- -"] : prediction[:prediction_interval])
+                  / prediction intervall popover
+                  %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Prediction intervall", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"An estimate of prediction uncertainty. The \"real\" value should be with 95% probability within the prediction interval."}}
+                  %br
+                  = "#{interval[0].delog10} - #{interval[1].delog10} (#{unit})"
+                  %br
+                  = "#{@compound.mmol_to_mg(interval[0].delog10)} - #{@compound.mmol_to_mg(interval[1].delog10)} #{(unit =~ /\b(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" if !prediction[:prediction_interval].nil?
+                - else
+                  %b Probability:
+                  - unless prediction[:probabilities].nil?
+                    %br
+                    = "#{prediction[:probabilities].keys[0]}: #{prediction[:probabilities].values[0]}"
+                    %br
+                    = "#{prediction[:probabilities].keys[1]}: #{prediction[:probabilities].values[1]}"
+                  / probability popover
+                  -#%a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Confidence", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"Indicates the applicability domain of a model. Predictions with a high confidence can be expected to be more reliable than predictions with low confidence. Confidence values may take any value between 0 and 1. For most models confidence > 0.025 is a sensible (hard) cutoff to distinguish between reliable and unreliable predictions."}}
                 %p
                 /TODO add tooltip for significant ftagments and descriptors
                 / - if @model_type[i] =~ /classification/i && (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0)
                 / Significant fragments:
-                / %a.btn.btn-default.btn-sm{:id=>"linkSigFragments", :href => "#detailsTop", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[i]}/#{CGI.escape(@compound.uri)}/fingerprints")}} Significant fragments
+                / %a.btn.btn-default.btn-sm{:id=>"linkSigFragments", :href => "#detailsTop", :tabindex=>"0", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[i]}/#{CGI.escape(@compound.uri)}/fingerprints")}} Significant fragments
                 / - if @model_type[i] =~ /regression/i && (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0)
                 / Descriptors
-                / %a.btn.btn-default.btn-sm{:id=>"linkDescriptors", :href => "#detailsTop", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[i]}/#{CGI.escape(@compound.uri)}/fingerprints")}} Descriptors
+                / %a.btn.btn-default.btn-sm{:id=>"linkDescriptors", :href => "#detailsTop", :tabindex=>"0", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[i]}/#{CGI.escape(@compound.uri)}/fingerprints")}} Descriptors
                 / %p
                 %p
               - else
diff --git a/views/style.scss b/views/style.scss
index 9a3c9df..2c84781 100644
--- a/views/style.scss
+++ b/views/style.scss
@@ -1,3 +1,6 @@
+body {
+  background-color:#E7E7E7;
+}
 table.table-borderless tbody tr td{
   border-top: none;
 }
@@ -16,3 +19,58 @@ h4.head-back, h5.head-back{
     height: 5em;
   }
 }
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.plot {
+  height: 300px;
+  width: 300px;
+}
+.faq {
+  text-align: block;
+  margin-left:15%;
+  margin-right:15%;
+  margin-top:2%;
+}
+.faq h1 {
+  text-align: center;
+}
+.tablesorter-bootstrap thead .sorter-false {
+  cursor: default;
+}
+ul.share-buttons{
+  list-style: none;
+}
+.dropdown-menu {
+  min-width: 0px !important;
+  width:60px;
+}
+.dropdown-menu a {
+  padding: 0 2px 1px 2px !important;
+}
+.page-header{
+  background-color: #fff;
+  padding:20px 0 20px 0;
+  margin: 0;
+  text-align:center;
+  display:inline-block;
+  width:100%;
+}
+.share{
+  width: 30px;
+  padding-right: 5px;
+}
+supporters{
+  background-color: white;
+  text-align:center;
+  img{
+    width: 200px;
+    margin-right: 1em;
+  }
+}
+
+.footer{
+  margin-top:3em;
+}
diff --git a/views/validation.haml b/views/validation.haml
deleted file mode 100644
index fd63ea6..0000000
--- a/views/validation.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-- case @model_type
-- when "classification"
-  - prediction = @cv.metadata["http://www.opentox.org/api/1.2#classificationStatistics"]["http://www.opentox.org/api/1.2#numCorrect"] + @cv.metadata["http://www.opentox.org/api/1.2#classificationStatistics"]["http://www.opentox.org/api/1.2#numIncorrect"]
-  %p= "Number of predictions: #{prediction}"
-  - percent = @cv.metadata["http://www.opentox.org/api/1.2#classificationStatistics"]["http://www.opentox.org/api/1.2#percentCorrect"]
-  %p= "Correct predictions: #{percent.round(2)} %"
-- when "regression"
-  - prediction = @cv.metadata["http://www.opentox.org/api/1.2#numInstances"].to_i - @cv.metadata["http://www.opentox.org/api/1.2#numUnpredicted"].to_i
-  %p= "Number of predictions: #{prediction}"
-  - rSquare = @cv.metadata["http://www.opentox.org/api/1.2#regressionStatistics"]["http://www.opentox.org/api/1.2#rSquare"]
-  %p= "R-squared: #{rSquare.round(2)} %"
-  - rootMeanSquaredError = @cv.metadata["http://www.opentox.org/api/1.2#regressionStatistics"]["http://www.opentox.org/api/1.2#rootMeanSquaredError"]
-  %p= "Root Mean Square Error: #{rootMeanSquaredError.round(2)} %"
-  - meanAbsoluteError = @cv.metadata["http://www.opentox.org/api/1.2#regressionStatistics"]["http://www.opentox.org/api/1.2#meanAbsoluteError"]
-  %p= "Mean Absolute Error: #{meanAbsoluteError.round(2)} %"
-