added info icons; neighbors, color by class for text not background

8 files changed, 121 insertions, 67 deletions

diff --git a/application.rb b/application.rb
index 0a8998d..5cc6763 100644
--- a/application.rb
+++ b/application.rb
@@ -24,14 +24,13 @@ get '/jme_help/?' do
 end
 
 # best way to get individual compound uri for details
-get '/prediction/:neighbour/details/?' do
-  @compound_uri = OpenTox::Compound.new params[:neighbour]
+get '/prediction/:neighbor/details/?' do
+  @compound_uri = OpenTox::Compound.new params[:neighbor]
   @smiles = @compound_uri.smiles
   task = OpenTox::Task.run("look for names.") do
     names = @compound_uri.names
   end
   task.wait
-  $logger.debug "names task uri: #{task.uri}"
   case task[RDF::OT.hasStatus]
   when "Error"
     @names = "There are no names for this compound available."
@@ -71,13 +70,11 @@ post '/predict/?' do
     # gather models from service and compare if selected
     #TODO compare selected by uri
     params[:selection].each do |model|
-      $logger.debug "Model inspect in POST:\n#{model.inspect}"
       @mselected = model[0]
       @mall = OpenTox::Model.all $model[:uri]
       @mall.each do |m|
         @@prediction_models << m if m.title =~ /#{@mselected}/
       end
-      $logger.debug "@prediction_models: #{@@prediction_models.inspect}"
     end
 
     # predict with selected models
diff --git a/public/images/info_white.png b/public/images/info_white.png
new file mode 100644
index 0000000..7005238
--- /dev/null
+++ b/public/images/info_white.png
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
index ac60f7c..95d3fb6 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;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 #back-top{z-index:100;position:fixed;bottom:6%;margin-left:150px}.content #back-top a:hover{color:#bbb}.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 a#linkInsert{display:block;width:100%;height:2em}.content fieldset#top #appletContainer{padding:10px}.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 a#linkModels{display:block;width:100%;height:2em}.content fieldset#middle #endpoint{padding-top:2em}.content fieldset#middle #model a{display:inline;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;text-align:center;-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{padding-top:0.5em;background-color:#ff2121;-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{padding-top:0.5em;background-color:#82ba4b;-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;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-x:auto;overflow-y:hidden;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:#e6d8a3}.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:#e6d8a3}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#e6d8a3}.results .tablesorter tbody tr td.false{text-align:center;background-color:#82ba4b;-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:#ff2121;-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}.tooltip{background-color:#fff;border:2px solid #ccc;padding:1em;display:none;z-index:50}.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 #back-top{z-index:100;position:fixed;bottom:3%;margin-left:91%}.content #back-top a:hover{color:#bbb}.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 a#linkInsert{display:block;width:100%;height:2em}.content fieldset#top #appletContainer{padding:10px}.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 a#linkModels{display:block;width:100%;height:2em}.content fieldset#middle #endpoint{padding-top:2em}.content fieldset#middle #model a{display:inline;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;text-align:center;-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:200px}.content .overview #overview tr td.ctrue{padding-top:0.5em;background-color:#ff5a3b;-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.cfalse{padding-top:0.5em;background-color:#82ba4b;-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.c1{padding-top:0.5em;background-color:#ff5a3b;-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.c0{padding-top:0.5em;background-color:#82ba4b;-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.c0 .confidence{display:inline}.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;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-x:auto;overflow-y:hidden;margin-top:2em;margin-bottom:2em;-webkit-box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset}.results .tablesorter{width:100%}.results .tablesorter thead{background-color:#e6d8a3}.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:#dbc87b}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#dbc87b}.results .tablesorter tbody tr td{-webkit-box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset}.results .tablesorter tbody tr td.compound{width:200px}.results .tablesorter tbody tr td.cfalse{text-align:center;color:#5c8533}.results .tablesorter tbody tr td.ctrue{text-align:center;color:#d42200}.results .tablesorter tbody tr td.c0{text-align:center;color:#5c8533}.results .tablesorter tbody tr td.c1{text-align:center;color:#d42200}input#predict{border:0px;background-color:#dbc87b;margin:0;padding:0}.tooltip{background-color:#fff;border:2px solid #ccc;font-size:0.5em;padding:1em;display:none;z-index:50}.footer{margin:20px 0 20px 0}
diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass
index fe0bb19..d460dbc 100644
--- a/public/stylesheets/screen.sass
+++ b/public/stylesheets/screen.sass
@@ -59,8 +59,8 @@ body
   #back-top
     z-index: 100
     position: fixed
-    bottom: 6%
-    margin-left: 150px
+    bottom: 3%
+    margin-left: 91%
     
     a:hover
       color: #bbb
@@ -142,17 +142,29 @@ body
       border: 1px solid #dad9c7
       padding-left: 1em
     #overview tr td#compound
-      width: 150px
+      width: 200px
 
-    #overview tr td.true
+    #overview tr td.ctrue
       padding-top: 0.5em
-      background-color: adjust-lightness(#D40000, 15%)
+      background-color: adjust-lightness(#D42200, 20%)
       +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
 
-    #overview tr td.false
+    #overview tr td.cfalse
       padding-top: 0.5em
       background-color: adjust-lightness(#5C8533, 15%)
       +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+
+    #overview tr td.c1
+      padding-top: 0.5em
+      background-color: adjust-lightness(#D42200, 20%)
+      +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+
+    #overview tr td.c0
+      padding-top: 0.5em
+      background-color: adjust-lightness(#5C8533, 15%)
+      +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)      
+      .confidence
+        display: inline
     
       
   .error
@@ -184,7 +196,7 @@ body
   overflow-y: hidden
   margin-top: 2em
   margin-bottom: 2em
-  +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+  +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba(black, 0.3) inset)
   
   .tablesorter
     width: 100%
@@ -201,23 +213,29 @@ body
           margin-left: -1px
         th.headerSortDown 
           background-image: url("/images/desc.gif") 
-          background-color: adjust-lightness($ist-color, 10%)
+          background-color: $ist-color
         th.headerSortUp 
           background-image: url("/images/asc.gif") 
-          background-color: adjust-lightness($ist-color, 10%)
+          background-color: $ist-color
 
 
     tbody
-          
-      tr td.false
+      tr td
+        +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba(black, 0.3) inset)
+      tr td.compound
+        width: 200px  
+      tr td.cfalse
         text-align: center
-        background-color: adjust-lightness(#5C8533, 15%)
-        +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
-      tr td.true
+        color: #5C8533
+      tr td.ctrue
         text-align: center
-        background-color: adjust-lightness(#D40000, 15%)
-        +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
-
+        color: #D42200
+      tr td.c0
+        text-align: center
+        color: #5C8533
+      tr td.c1
+        text-align: center
+        color: #D42200
           
           
 input#predict
@@ -229,12 +247,11 @@ input#predict
 .tooltip
   background-color: #fff
   border: 2px solid #ccc
+  font-size: 0.5em
   padding: 1em
   display: none
   z-index: 50
   
-
-  
 .footer
   margin: 20px 0 20px 0
   
diff --git a/views/layout.haml b/views/layout.haml
index 410d150..b9fd06d 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -49,19 +49,24 @@
             });
           });
           $('a#confidence').tooltip({
-            predelay: 800,
+            predelay: 300,
+            position: 'bottom center',
+            offset: [-100, 0],
+          });
+          $('a#result').tooltip({
+            predelay: 300,
             position: 'bottom center',
             offset: [-100, 0],
           });
           $('a#similarity').tooltip({
-            predelay: 800,
+            predelay: 300,
             position: 'bottom center',
             offset: [-600, 0],
           });
           $('a#measured_activity').tooltip({
-            predelay: 800,
+            predelay: 300,
             position: 'bottom center',
-            offset: [-450, 0],
+            offset: [-500, 0],
           });
         });
       #back-top
diff --git a/views/neighbours.haml b/views/neighbors.haml
index 84d9f72..ddea418 100644
--- a/views/neighbours.haml
+++ b/views/neighbors.haml
@@ -1,6 +1,6 @@
 / @@prediction_models and @@predictions defined in POST request '/predict'
 / unpacks multi prediction array ;
-/ prepare it for neighbours ;
+/ prepare it for neighbors ;
 / align single prediction to endpoint ;
 / display preordered in table view ;
 
@@ -28,9 +28,9 @@
       - count_rs += 1
       #results{:id=>"#{count_rs}"}
         - pa.each do |p|
-          / prepare dataset for neighbours table ;
+          / prepare dataset for neighbors table ;
           / delete first array which contains input compound prediction ;
-          / keep the following arrays they are the neighbour predictions ;
+          / keep the following arrays they are the neighbor predictions ;
           - p.data_entries.shift
           - p.compounds.shift
           / call the tablesorter plugin ;
@@ -45,21 +45,25 @@
               });
             });
           / TODO catch table error if tbody is empty      
-          %h2= "Neighbours: "
+          %h2= "Neighbors: "
           %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"}
             %thead
               %tr
                 %th
                   Compound
                 %th
-                  %a{:href=>"#", :title=>"", :id=>"measured_activity"} Measured Activity
+                  %b Measured Activity
+                  %a{:href=>"#", :title=>"", :id=>"measured_activity"}
+                    %img{:src=>"/images/info_white.png"}
                   .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"}
                     %dt
                       Measured Activity
                     %dd
                       Experimental result(s) from the training dataset.
                 %th
-                  %a{:href=>"#", :title=>"", :id=>"similarity"} Similarity
+                  %b Similarity
+                  %a{:href=>"#", :title=>"", :id=>"similarity"}
+                    %img{:src=>"/images/info_white.png"}
                   .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"}
                     %dt
                       Similarity
@@ -71,24 +75,26 @@
                       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 consider only those parts of a chemical structure that are relevant 
+                        for a particular endpoint
                         %li ignore inert parts of the structure
                         %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.
+                        Similarities of 1 may be encountered even for structurally dissimilar 
+                        compounds, because inert parts are ignored.
                 %th
                   Details
             -#%tbody
             - count = 0
-            - p.compounds.each do |neighbour_compound|
+            - p.compounds.each do |neighbor_compound|
               %tr
-                %td
-                  %img{:src=>"#{neighbour_compound.uri}/image", :alt=>"", :width=>"100px"}
-                %td{:class => p.data_entries[count][2]}
+                %td.compound
+                  %img{:src=>"#{neighbor_compound.uri}/image", :alt=>"", :width=>"100px"}
+                %td{:class => "c"+p.data_entries[count][2]}
                   = p.data_entries[count][2]
-                %td{:class => p.data_entries[count][2]}
-                  = p.data_entries[count][3].round(3)                  
-                %td{:class => p.data_entries[count][2]}
-                  %a{:href => to("/prediction/#{CGI.escape(neighbour_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"}
+                %td{:class => "c"+p.data_entries[count][2]}
+                  = p.data_entries[count][3] != nil ? p.data_entries[count][3].round(3) : "No prediction result"            
+                %td{:class => "c"+p.data_entries[count][2]}
+                  %a{:href => to("/prediction/#{CGI.escape(neighbor_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"}
                     %img{:src=>"/images/arrow_right_float.png", :alt=>"arrow"}
                   :javascript
                     $(function() {
@@ -99,4 +105,4 @@
                     
                 - count += 1
 
-%iframe{:id=>"iframe", :name=>"details", :height=>"80%", :width=>"80%", :style=>"display:none;border:0px"}
+%iframe{:id=>"iframe", :name=>"details", :height=>"90%", :width=>"90%", :style=>"display:none;border:0px"}
diff --git a/views/predict.haml b/views/predict.haml
index 369f3b8..98b9edb 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -78,9 +78,9 @@
         #model
           %input{:type => "checkbox", :name => "selection[#{model.title}]", :id => "selection[#{model.title}]", :value => true, :disabled => false}
           %label{:for => "selection[#{model.title}]"}
-            %b= model.title
+            = "DSSTox Carcinogenic Potency DBS "+model.title.split(" ").first
           %a{:href=>"#", :alt=>"#{model.title} validation"}
-            %i Validation Link
+            %i ( Validation Link )
           %br
           
       .close
diff --git a/views/prediction.haml b/views/prediction.haml
index 20be935..89e66f0 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -27,33 +27,62 @@
                 });
               });
           - count=0
-          / var for rule to load neighbours page.
-          - @@neighbours_available = 1
+          / var for rule to load neighbors page.
+          - @@neighbors_available = 1
           - @@predictions.each do |pa|
             / prediction of one model
             - pa.each do |p|
-              / p.data_entries > 1 = neighbours available
-              - $logger.debug "count data_entries: #{p.data_entries.length}"
-              - p.data_entries.length > 1 ? @@neighbours_available = p.data_entries.length : @@neighbours_available
-              %td{:class => p.data_entries[0][0]}
+              / p.data_entries > 1 = neighbors available
+              - p.data_entries.length > 1 ? @@neighbors_available = p.data_entries.length : @@neighbors_available
+              / prevent conversion of nil
+              - c = p.data_entries[0][0] != nil ? p.data_entries[0][0] : ''
+              / define color by class; number first is not allowed for css
+              %td{:class => "c"+c}
                 %b{:class => "title"}
                   = @@prediction_models[count].title
                 %br
                 %br            
-                  = "Result:\n"
+                  = "Result:"
                   %b= p.data_entries[0][0] != nil ? p.data_entries[0][0] : "No prediction result"
-                %br
-                  %a{:href=>"#", :title=>"", :id=>"confidence"} Confidence
+                  %a{:href=>"#result", :title=>"", :id=>"result"}
+                    %img{:src=>"/images/info_white.png"}
                   .tooltip{:style=>"font-weight: normal; font-size: 1em; width: 50%; text-align: left;"}
                     %dt
-                      Confidence
+                      Result
                     %dd
-                      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 distiguish between reliable and unreliable predictions.
-                  = p.data_entries[0][1].round(3)
+                      %code 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 
+                        %em classification 
+                        (
+                        %a{:href=>"http://www.in-silico.de/articles/modi020905.pdf"} original publication
+                        )
+                        %li a local QSAR model based on neighbors for
+                        %em regression
+                        (
+                        %a{:href=>"http://www.in-silico.de/articles/mh_tf.pdf"} original publication
+                        )
+                      Please keep in mind that predictions are based on the measured activities of neighbors.
                 %br
+                  .confidence
+                    %b Confidence:
+                    = p.data_entries[0][1] != nil ? p.data_entries[0][1].round(3) : "No prediction result"
+                    %a{:href=>"#confidence", :title=>"", :id=>"confidence"}
+                      %img{:src=>"/images/info_white.png"}
+                    .tooltip{:style=>"font-weight: normal; font-size: 1em; width: 50%; text-align: left;"}
+                      %dt
+                        Confidence
+                      %dd
+                        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 distiguish between 
+                        reliable and unreliable predictions.
+                  %br
                 %a{:href=> "#tabs", :id=>"link#{count}"}
                   %img{:src=>"/images/arrow_down_float.png", :alt=>"arrow"}
                   :javascript
@@ -64,9 +93,9 @@
                     });
               - count+=1
   
-  - if @@neighbours_available > 1
-    = haml :neighbours, :layout => false
+  - if @@neighbors_available > 1
+    = haml :neighbors, :layout => false
   - else
     %h2
-      no neighbours available             
-%iframe{:id=>"iframe_overview", :name=>"details_overview", :height=>"80%", :width=>"80%", :style=>"display:none;border:0px"}            
+      no neighbors available             
+%iframe{:id=>"iframe_overview", :name=>"details_overview", :height=>"90%", :width=>"90%", :style=>"display:none;border:0px"}