fixed neighbors table; bg-color predictions due to safari; disabled neighbors sort option; enabled table header info icons

5 files changed, 26 insertions, 29 deletions

diff --git a/public/images/IST_logo_s.png b/public/images/IST_logo_s.png
new file mode 100644
index 0000000..eff71af
--- /dev/null
+++ b/public/images/IST_logo_s.png
diff --git a/views/layout.haml b/views/layout.haml
index a49238f..1220cf5 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'}"}
@@ -20,17 +20,18 @@
     %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
+    %header.page-header{:style=>"margin:20px 0 20px;text-align:justify;display:inline-block;width:100%;"}
       %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
-        /%div.col-md-2
-        /  %a.btn.btn-info{:href=> to("/faq"), :rel => "external"}
-        /    FAQ
-    
+          %h1.media-heading{:style=>"margin: 0 0 0 2em;"}
+            lazar Toxicity Predictions
+        %div.col-md-2
+          %h1.media-heading{:style=>"margin: 0 0 0 1em;"}
+            %small
+              %a{:href=>"https://nano-lazar.in-silico.ch/predict"} nano-lazar
     %div.container-fluid
       :javascript
         $(document).ready(function(){
diff --git a/views/neighbors.haml b/views/neighbors.haml
index 2edc3ab..096e432 100644
--- a/views/neighbors.haml
+++ b/views/neighbors.haml
@@ -38,7 +38,7 @@
               $("table##{j+1}").tablesorter({
                 debug: false,
                 theme: "bootstrap",
-                headerTemplate: '{content} {icon}',
+                headerTemplate: '',
                 widgets: ['columns', 'uitheme', 'stickyHeaders'],
                 widgetOptions: {
                   stickyHeaders_attachTo : '.tab-content',
@@ -53,34 +53,26 @@
                   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;"}
-                      / measured activity
-                      %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;"}
-                    %td{:style=>"font-size:x-small;padding:0px;"}
-                      / 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;"}
-                    / %td
                 %tbody
                   - type = @model_types[j]
                   - unit = @models[j].unit
diff --git a/views/prediction.haml b/views/prediction.haml
index 709e17e..0f3d57b 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;"}
@@ -35,9 +35,9 @@
                 %b Measured activity:
                 - 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 + " (#{unit})"+"|#{'%.2e' % weight} #{unit == "mmol/L" ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : prediction[:value].join(", ")
+                  = (type == "Regression") ? prediction[:value].collect{|v| weight = Compound.from_smiles(@compound.smiles).mmol_to_mg(v); '%.2e' % v + " (#{unit})"+", #{'%.2e' % weight} #{unit == "mmol/L" ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : prediction[:value].join(", ")
                 - else
-                  = (type == "Regression") ? "#{"%.2e" % prediction[:value]} (#{unit}) | #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value]
+                  = (type == "Regression") ? "#{"%.2e" % prediction[:value]} (#{unit}), #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value]
                 %p
                   %b Compound is part of the training dataset
               - elsif prediction[:neighbors].size > 0
@@ -50,13 +50,13 @@
                 = (type == "Regression") ? "#{'%.2e' % prediction[:value]} (#{unit}) , #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} #{(unit == "mmol/L") ? "(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.
                 / 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>."}}
+                %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
                 - if type == "Regression"
                   %b 95% Prediction interval:
                   - interval = prediction[:prediction_interval].nil? ? " - - " : prediction[:prediction_interval].collect{|i| i.round(2)}
                   %br
-                  = "#{interval[0]} - #{interval[1]} (#{unit}), #{'%.2e' % @compound.mmol_to_mg(interval[0])} - #{'%.2e' % @compound.mmol_to_mg(interval[1])} (mg/L)"
+                  = "#{interval[0]} - #{interval[1]} (#{unit}), #{'%.2e' % @compound.mmol_to_mg(interval[0])} - #{'%.2e' % @compound.mmol_to_mg(interval[1])} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}"
                   / 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."}}
                 - else
diff --git a/views/style.scss b/views/style.scss
index 70c8035..29f532b 100644
--- a/views/style.scss
+++ b/views/style.scss
@@ -37,3 +37,7 @@ img {
 .faq h1 {
   text-align: center;
 }
+.tablesorter-bootstrap thead .sorter-false {
+  cursor: default;
+}
+