colored by result

10 files changed, 57 insertions, 46 deletions

diff --git a/TODO b/TODO
index d33ef1a..bacf9ba 100644
--- a/TODO
+++ b/TODO
@@ -1,10 +1,4 @@
 - color image in details view
 - catch tablesorter error if tbody is empty
-- display notice if no input data
-- validate smiles input
-- color results
-- catch error if compound names unavailable
-- external links
 - add info hovers
-- display notice 'sth went wrong'
-- check checkbox with model title 
+- add wait snake for java plugin  
diff --git a/application.rb b/application.rb
index 54b2d10..6dfc9b7 100644
--- a/application.rb
+++ b/application.rb
@@ -36,9 +36,9 @@ get '/prediction/:neighbour/details/?' do
   when "Error"
     @names = "There are no names for this compound available."
   when "Completed"
-    @names = @compound_uri.names
+    @names = @compound_uri.names.join(",")
   end
-  @inchi = @compound_uri.inchi.gsub("InChI=", "InChI: ")
+  @inchi = @compound_uri.inchi.gsub("InChI=", "")
   haml :details, :layout => false
 end
 
diff --git a/public/images/ist_logo.png b/public/images/ist_logo.png
index 35a4f3c..2ad562c 100644
--- a/public/images/ist_logo.png
+++ b/public/images/ist_logo.png
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
index d522e1d..91bd649 100644
--- a/public/stylesheets/screen.css
+++ b/public/stylesheets/screen.css
@@ -1 +1 @@
-body{background-image:url("/images/gray_jean.png");background-color:#ccf;overflow:scroll;font-family:sans-serif;min-width:800px;min-heigth:600px}body a{text-decoration:none;font-weight:bold;color:#000}.logo img{float:left}.logo h1{margin-top:-2px;position:relative;top:-4px;left:20px}.content{background-image:url("/images/gray_jean.png")}.content h1{margin:0.3em;text-shadow:#fff 1px 1px 0;font-size:x-large;font-family:Verdana;display:inline}.content h2{text-shadow:#fff 1px 1px 0;font-size:x-large;color:#f55}.content .arrow{margin:5px 0px 5px 20px}.content .back{display:inline}.content .close{text-align:right}.content fieldset#top{border:0;margin-top:5em;padding:10px;background-color:#dbc87b;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.content fieldset#top draw{display:block}.content fieldset#middle{border:0;padding:10px;background-color:#dbc87b;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.content fieldset#middle #model a{font-weight:normal}.content fieldset#bottom{border:0;background-color:#dbc87b;padding:10px;margin-bottom:5em;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.content fieldset#bottom input#predict{margin-left:1em}.content .predictions{margin-top:5em;background-color:#dbc87b;padding:10px;text-align:justify;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.content .overview{background-image:url("/images/gray_jean.png");padding:12px;margin-top:1em;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.content .overview caption{text-align:left}.content .overview #overview tr td{background-color:#fff;border:1px solid #dad9c7;padding-left:1em}.content .overview #overview tr td#compound{width:150px}.content .error{margin-top:5em;background-color:#dbc87b;padding:10px;text-align:justify;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.content .error error{border:2px solid #f55;background-color:#fff;color:#f55}.details{margin-bottom:2em;height:400px;scroll:auto;background-image:url("/images/gray_jean.png");-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.results{background-image:url("/images/gray_jean.png");overflow:auto;margin-top:2em;margin-bottom:2em;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.results .tablesorter{width:100%}.results .tablesorter thead{background-color:#fcfaf3}.results .tablesorter thead tr th.header{background-image:url("/images/bg.gif");background-repeat:no-repeat;background-position:center left;cursor:pointer;padding-left:20px;border:1px solid #dad9c7;margin-left:-1px}.results .tablesorter thead tr th.headerSortDown{background-image:url("/images/desc.gif");background-color:#e2d397}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#e2d397}.results .tablesorter tbody tr.odd td{background-color:#f0f0f0}.results .tablesorter tbody tr.even td{background-color:ivory}input#predict{border:0px;background-color:#dbc87b;margin:0;padding:0}.footer{margin:20px 0 20px 0}
+body{background-image:url("/images/gray_jean.png");background-color:#ccf;overflow:scroll;font-family:sans-serif;min-width:800px;min-heigth:600px}body a{text-decoration:none;font-weight:bold;color:#000}.logo img{float:left;display:inline;margin-right:1em}.content{background-image:url("/images/gray_jean.png")}.content h1{margin:0.3em;text-shadow:#fff 1px 1px 0;font-size:x-large;font-family:Verdana;display:inline}.content h2{text-shadow:#fff 1px 1px 0;font-size:x-large;color:#f55}.content .arrow{margin:5px 0px 5px 20px}.content .back{display:inline}.content .close{text-align:right}.content fieldset#top{border:0;padding:10px;background-color:#dbc87b;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.content fieldset#top draw{display:block}.content fieldset#middle{border:0;padding:10px;background-color:#dbc87b;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.content fieldset#middle #model a{font-weight:normal}.content fieldset#bottom{border:0;background-color:#dbc87b;padding:10px;margin-bottom:5em;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.content fieldset#bottom input#predict{margin-left:1em}.content .predictions{background-color:#dbc87b;padding:10px;text-align:justify;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.content .overview{background-image:url("/images/gray_jean.png");padding:12px;margin-top:1em;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.content .overview caption{text-align:left}.content .overview #overview tr td{background-color:#fff;border:1px solid #dad9c7;padding-left:1em}.content .overview #overview tr td#compound{width:150px}.content .overview #overview tr td.true{text-align:center;background-color:#f80000;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.content .overview #overview tr td.false{text-align:center;background-color:#52ce00;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.content .error{background-color:#dbc87b;padding:10px;text-align:justify;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.content .error error{border:2px solid #f55;background-color:#fff;color:#f55}.details{margin-bottom:2em;height:400px;scroll:auto;background-image:url("/images/gray_jean.png");-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}.results{background-image:url("/images/gray_jean.png");overflow:auto;margin-top:2em;margin-bottom:2em;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.results .tablesorter{width:100%}.results .tablesorter thead{background-color:#fcfaf3}.results .tablesorter thead tr th.header{background-image:url("/images/bg.gif");background-repeat:no-repeat;background-position:center left;cursor:pointer;padding-left:20px;border:1px solid #dad9c7;margin-left:-1px}.results .tablesorter thead tr th.headerSortDown{background-image:url("/images/desc.gif");background-color:#e2d397}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#e2d397}.results .tablesorter tbody tr td.false{text-align:center;background-color:#52ce00;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}.results .tablesorter tbody tr td.true{text-align:center;background-color:#f80000;-webkit-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,-1px -1px 5px rgba(0,0,0,0.3) inset}input#predict{border:0px;background-color:#dbc87b;margin:0;padding:0}.footer{margin:20px 0 20px 0}
diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass
index db6395d..cc8878d 100644
--- a/public/stylesheets/screen.sass
+++ b/public/stylesheets/screen.sass
@@ -12,7 +12,6 @@ body
   background-color: $bg-color
   overflow: scroll
   font-family: sans-serif
-  //margin: 0.3em
   min-width: 800px
   min-heigth: 600px
   
@@ -24,11 +23,12 @@ body
 .logo
   img
     float: left
+    display: inline
+    margin-right: 1em
   h1
-    margin-top: -2px
-    position: relative
-    top: -4px
-    left: 20px
+    //position: relative
+    //top: 6px
+    //left: 20px
 
   
 .content
@@ -45,7 +45,6 @@ body
   h2
     text-shadow: #FFF 1px 1px 0
     font-size: x-large
-    //font-family: monospace
     color: #FF5555 
     
   .arrow
@@ -59,7 +58,7 @@ body
     
   fieldset#top
     border: 0
-    margin-top: 5em
+    //margin-top: 5em
     padding: 10px
     background-color: $ist-color
     +border-top-left-radius(25px)
@@ -94,7 +93,6 @@ body
       margin-left: 1em
   
   .predictions
-    margin-top: 5em
     background-color: $ist-color
     padding: 10px
     text-align: justify
@@ -121,9 +119,20 @@ body
       padding-left: 1em
     #overview tr td#compound
       width: 150px
+
+    #overview tr td.true
+      text-align: center
+      background-color: adjust-lightness(#D40000, 7%)
+      +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+
+    #overview tr td.false
+      text-align: center
+      background-color: adjust-lightness(#44AA00, 7%)
+      +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+    
       
   .error
-    margin-top: 5em
+    //height: 200px
     background-color: $ist-color
     padding: 10px
     text-align: justify
@@ -148,7 +157,6 @@ body
 
 .results
   background-image: url("/images/gray_jean.png")
-  //height: 400px
   overflow: auto
   margin-top: 2em
   margin-bottom: 2em
@@ -173,13 +181,19 @@ body
         th.headerSortUp 
           background-image: url("/images/asc.gif") 
           background-color: adjust-lightness($ist-color, 7%)
+
+
     tbody
-      tr.odd
-        td
-          background-color: #F0F0F0
-      tr.even
-        td
-          background-color: #FFFFF0
+          
+      tr td.false
+        text-align: center
+        background-color: adjust-lightness(#44AA00, 7%)
+        +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+      tr td.true
+        text-align: center
+        background-color: adjust-lightness(#D40000, 7%)
+        +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+
           
           
 input#predict
diff --git a/views/details.haml b/views/details.haml
index 38d97fe..48d28bc 100644
--- a/views/details.haml
+++ b/views/details.haml
@@ -5,14 +5,16 @@
     %h2
       Details:
     %img{:src=>"#{@compound_uri.uri}/image", :alt=>@compound_uri.uri, :width=>"100px"}
-    %p
+    %br
+    %b
       SMILES:
-      = @smiles
-
-    %p
+    %p= @smiles
+    %br
+    %b
       // TODO handle OpenTox::ResourceNotFoundError
       Names:
-      = @names
-
-    %p
-      = @inchi
+    %p= @names
+    %br
+    %b
+      InChI:
+    %p= @inchi
diff --git a/views/error.haml b/views/error.haml
index 9aced43..61b436f 100644
--- a/views/error.haml
+++ b/views/error.haml
@@ -4,5 +4,5 @@
       %img{:src=>"/images/arrow_left_float.png", :alt=>"arrow"}
         %a{:href => to('/predict')} New Prediction
   %error
-    = @error_report.to_s
+    = @error_report
       
diff --git a/views/layout.haml b/views/layout.haml
index 2269a34..7c05190 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -17,7 +17,8 @@
     .logo
       %a{:href=> "http://www.in-silico.ch/", :rel=> "external"}
         %img{:src=>"/images/ist_logo.png"}
-      %h1 Lazar Toxicity Predictions
+      %h1 Lazar Toxicity Predictions      
+      %hr
     
     .content    
       = yield
diff --git a/views/neighbours.haml b/views/neighbours.haml
index eec7d39..a593e7b 100644
--- a/views/neighbours.haml
+++ b/views/neighbours.haml
@@ -41,7 +41,7 @@
             $(document).ready(function(){
               $("table##{count_rs}").tablesorter({
                 //debug: true,
-                widgets: ['zebra'],
+                //widgets: ['zebra'],
                 headers: {0: {sorter: false},3: {sorter: false}},
                 sortList: [[2,0]]
               });
@@ -65,12 +65,11 @@
               %tr
                 %td
                   %img{:src=>"#{neighbour_compound.uri}/image", :alt=>neighbour_compound.uri, :width=>"100px"}
-                %td
+                %td{:class => p.data_entries[count][0]}
                   = p.data_entries[count][0]
-                %td
-                  = p.data_entries[count][3].round(3)
-                  
-                %td
+                %td{:class => p.data_entries[count][0]}
+                  = p.data_entries[count][3].round(3)                  
+                %td{:class => p.data_entries[count][0]}
                   %a{:href => to("/prediction/#{CGI.escape(neighbour_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"}
                     %img{:src=>"/images/arrow_right_float.png", :alt=>"arrow"}
                   :javascript
diff --git a/views/prediction.haml b/views/prediction.haml
index ed51d09..dd90847 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -14,15 +14,16 @@
       %tbody
         %tr
           %td{:id=>"compound"}
-            %img{:src=>"#{@compound.uri}/image", :alt=>@compound.uri, :width=>"100px"}
+            %img{:src=>"#{@compound.uri}/image", :alt=>@compound.uri, :width=>"100"}
           - count=0
           - @@predictions.each do |pa|
             - pa.each do |p|
               - p.get
-              %td
-                %b= @@prediction_models[count].title
-                
+              %td{:class => p.data_entries[0][1]}
+                %b{:class => "title"}
+                  = @@prediction_models[count].title
                 %br
+                %br            
                   = "Result:\n"
                   %b= p.data_entries[0][1]
                 %br