added overview

4 files changed, 49 insertions, 35 deletions

diff --git a/public/images/ist_logo.png b/public/images/ist_logo.png
index 07758e0..b182bbd 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 7019a98..1ceb36b 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;margin:1em;min-width:800px;min-heigth:600px}body a{text-decoration:none;font-weight:bold;color:#000}.logo img{float:left}.logo h1{margin-bottom:5em}.content{background-image:url("/images/gray_jean.png")}.content h1{margin:0.3em;text-shadow:#fff 0 1px 0;font-size:x-large;font-family:Verdana}.content h2{text-shadow:#fff 0 1px 0;font-size:x-large;font-family:monospace}.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:#b9dcff;-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:#b9dcff;-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:#b9dcff;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 .predictions{margin-top:5em;background-color:#b9dcff;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 .results{margin-top:2em;padding:1em;background-image:url("/images/gray_jean.png");-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 .results #tableinfo{text-align:right}.content .results .tablesorter{width:100%}.content .results .tablesorter thead{background-color:#b9dcff}.content .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}.content .results .tablesorter thead tr th.headerSortDown{background-image:url("/images/desc.gif");background-color:#39f}.content .results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#39f}.content .results .tablesorter tbody tr.odd td{background-color:#f0f0f6}.content .results .tablesorter tbody tr.even td{background-color:#f0f0ff}.content .results .result{width:100%}.content .results .result thead{padding-left:20px;border:1px solid #dad9c7;margin-left:-1px}.footer{margin:20px 0 20px 0}
+body{background-image:url("/images/gray_jean.png");background-color:#ccf;overflow:scroll;font-family:sans-serif;margin:1em;min-width:800px;min-heigth:600px}body a{text-decoration:none;font-weight:bold;color:#000}.logo img{float:left}.logo h1{margin-bottom:3em}.content{background-image:url("/images/gray_jean.png")}.content h1{margin:0.3em;text-shadow:#fff 0 1px 0;font-size:x-large;font-family:Verdana}.content h2{text-shadow:#fff 0 1px 0;font-size:x-large;font-family:monospace}.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:#c8ab37;-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:#c8ab37;-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:#c8ab37;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 .predictions{margin-top:5em;background-color:#c8ab37;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 #overview tr td{background-color:#fff;border:1px solid #dad9c7}.content .overview #overview tr td#compound{width:150px}.content .results{margin-top:2em;padding:1em;background-image:url("/images/gray_jean.png");-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 .results .tablesorter{width:60%}.content .results .tablesorter thead{background-color:#e9ddaf}.content .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}.content .results .tablesorter thead tr th.headerSortDown{background-image:url("/images/desc.gif");background-color:#d0b753}.content .results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#d0b753}.content .results .tablesorter tbody tr.odd td{background-color:#f0f0f0}.content .results .tablesorter tbody tr.even td{background-color:ivory}.content .results .result{width:100%}.content .results .result thead{padding-left:20px;border:1px solid #dad9c7;margin-left:-1px}.footer{margin:20px 0 20px 0}
diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass
index a27a233..1f3a9da 100644
--- a/public/stylesheets/screen.sass
+++ b/public/stylesheets/screen.sass
@@ -3,7 +3,8 @@
 
 $bg-color: #CCCCFF
 $bg-color-div: #C5C1E4
-$ist-blue: #B9DCFF
+//$ist-blue: #B9DCFF
+$ist-blue: #C8AB37
 
 body
   background-image: url("/images/gray_jean.png")
@@ -23,7 +24,7 @@ body
   img
     float: left
   h1
-    margin-bottom: 5em
+    margin-bottom: 3em
 
   
 .content
@@ -90,6 +91,21 @@ body
     +border-left-radius(25px)
     +border-right-radius(25px)
     +background-clip(border-box)
+
+  .overview
+    background-image: url("/images/gray_jean.png")
+    padding: 12px
+    margin-top: 1em
+    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+    +border-top-left-radius(25px)
+    +border-top-right-radius(25px)
+    +background-clip(border-box)
+    
+    #overview tr td
+      background-color: white
+      border: 1px solid #dad9c7
+    #overview tr td#compound
+      width: 150px
     
   .results
     margin-top: 2em
@@ -98,15 +114,12 @@ body
     +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
     +border-bottom-left-radius(25px)
     +border-bottom-right-radius(25px)
-    +background-clip(border-box)
-    
-    #tableinfo
-      text-align: right
+    +background-clip(border-box)    
     
     .tablesorter
-      width: 100%
+      width: 60%
       thead
-        background-color: $ist-blue
+        background-color: adjust-lightness($ist-blue, 30%)
         tr
           th.header
             background-image: url("/images/bg.gif")
@@ -118,17 +131,17 @@ body
             margin-left: -1px
           th.headerSortDown 
             background-image: url("/images/desc.gif") 
-            background-color: #3399FF
+            background-color: adjust-lightness($ist-blue, 7%)
           th.headerSortUp 
             background-image: url("/images/asc.gif") 
-            background-color: #3399FF
+            background-color: adjust-lightness($ist-blue, 7%)
       tbody
         tr.odd
           td
-            background-color: #F0F0F6
+            background-color: #F0F0F0
         tr.even
           td
-            background-color: #F0F0FF
+            background-color: #FFFFF0
     .result
       width: 100%
       thead
diff --git a/views/prediction.haml b/views/prediction.haml
index 81dd25a..f03b6cb 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -9,7 +9,29 @@
       %img{:src=>"/images/arrow_left_float.png", :alt=>"arrow"}
         %a{:href => to('/predict')} New Prediction  
 
-
+  .overview
+    %table{:width=>"100%", :cellspacing=>"1", :id=>"overview"}
+      %thead
+        %tr
+          %th= @identifier
+      %tbody
+        %tr
+          %td{:id=>"compound"}
+            %img{:src=>"#{@compound.uri}/image", :alt=>@compound.uri, :width=>"100px"}
+          - count=0
+          - @predictions.each do |pa|
+            - pa.each do |p|
+              - p.get
+              %td
+                %b= @prediction_models[count].title
+                - count+=1
+                %br
+                  = "Result:\n"
+                  %b= p.data_entries[0][1]
+                %br
+                  = "Confidence:\n"
+                  = p.data_entries[0][2].round(3)
+    
   %script{:src=>"/javascripts/jquery.tablesorter.min.js"}
    
   .results    
@@ -29,25 +51,6 @@
           - pa.each do |p|
             / get prediction OpenTox::Dataset   
             - p.get
-            - compound = p.compounds[0]
-            %table{:class=>"result", :cellspacing=>"1"}
-              %thead
-                %tr
-                  %th
-                    = "Compound"
-                  %th
-                    = "Result"
-                  %th
-                    = "Confidence"
-              %tbody
-                %tr
-                  %td                   
-                    %img{:src=>"#{compound.uri}/image", :alt=>compound.uri, :width=>"100px"}
-                  %td
-                    %p= p.data_entries[0][1]
-                  %td
-                    %p= p.data_entries[0][2].round(3)
-            
             / prepare dataset for neighbours table
             - p.data_entries.shift
             - p.compounds.shift
@@ -67,8 +70,6 @@
               });
             / TODO catch table error if tbody is empty      
             %h3= "Neighbours: "
-            #tableinfo
-              hold down shift for multi-sort
             %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"}
               %thead
                 %tr