3bloc result view

7 files changed, 68 insertions, 56 deletions

diff --git a/application.rb b/application.rb
index ac5e360..69cf031 100644
--- a/application.rb
+++ b/application.rb
@@ -7,6 +7,12 @@ require 'opentox-server'
 require File.join(File.dirname(__FILE__),'helper.rb')
 require File.join(ENV["HOME"],".opentox","config","lazar-gui.rb")
 
+helpers do
+  def compound_uri(uri)
+    $logger.debug "\ncompound_uri: #{uri}\n"
+    @compound_uri = OpenTox::Compound.new uri
+  end
+end
 
 get '/?' do
   redirect to('/predict') 
@@ -36,32 +42,27 @@ post '/predict/?' do
       m.get
       @@prediction_models << m if m.title =~ /#{@mselected}/
     end
-    #$logger.debug "@prediction_models: #{@@prediction_models.inspect}"
+    $logger.debug "@prediction_models: #{@@prediction_models.inspect}"
   end
 
   # predict with selected models
   # results in prediction variable
   # store prediction in array for better handling
-  #$logger.debug "@models: #{@models.inspect}"
   @@prediction_models.each do |m| 
     @prediction_uri = m.run :compound_uri => "#{@compound.uri}"
     prediction = OpenTox::Dataset.new @prediction_uri
     pa = []
     pa << prediction
     @@predictions << pa
-    #$logger.debug "prediction class: #{prediction.class}"
   end
 
   haml :prediction
 end
 
-get '/prediction/neighbours/:id?' do
-
-  haml :neighbours, :layout => false
-end
 
 get '/prediction/:neighbour/details/?' do
-  @compound = OpenTox::Compound.new params[:neighbour]
+  @compound_uri = OpenTox::Compound.new params[:neighbour]
+  
   haml :details, :layout => false
 end
 
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
index a3d7ca9..a3c4d68 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 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 fieldset#bottom input#predict{margin-left:1em}.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 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}iframe#neighbours{background-image:url("/images/gray_jean.png");-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-webkit-background-clip:border;-moz-background-clip:border;background-clip:border-box}iframe#details{background-image:url("/images/gray_jean.png");-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")}.results .tablesorter{width:80%}.results .tablesorter thead{background-color:#e9ddaf}.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:#d0b753}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#d0b753}.results .tablesorter tbody tr.odd td{background-color:#f0f0f0}.results .tablesorter tbody tr.even td{background-color:ivory}input#predict{border:0px;background-color:#c8ab37;margin:0;padding:0}.halt{margin:5em}.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}.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}.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{height:400px;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}
diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass
index a453adc..6af7e85 100644
--- a/public/stylesheets/screen.sass
+++ b/public/stylesheets/screen.sass
@@ -4,7 +4,8 @@
 $bg-color: #CCCCFF
 $bg-color-div: #C5C1E4
 //$ist-color: #B9DCFF
-$ist-color: #C8AB37
+$i-color: #C8AB37
+$ist-color: adjust-lightness($i-color, 17%)
 
 body
   background-image: url("/images/gray_jean.png")
@@ -42,9 +43,10 @@ body
     display: inline
     
   h2
-    text-shadow: #FFF 0 1px 0
+    text-shadow: #FFF 1px 1px 0
     font-size: x-large
-    font-family: monospace   
+    //font-family: monospace
+    color: #FF5555 
     
   .arrow
     margin: 5px 0px 5px 20px
@@ -119,22 +121,25 @@ body
       padding-left: 1em
     #overview tr td#compound
       width: 150px
-    
-iframe#neighbours
-  background-image: url("/images/gray_jean.png")
-  +border-bottom-left-radius(25px)
-  +background-clip(border-box)
   
-iframe#details
+.details
+  margin-bottom: 2em
+  height: 400px
+  scroll: auto
   background-image: url("/images/gray_jean.png")
+  +border-bottom-left-radius(25px)
   +border-bottom-right-radius(25px)
   +background-clip(border-box)
 
 .results
-  background-image: url("/images/gray_jean.png")
-
+  height: 400px
+  overflow: auto
+  margin-top: 2em
+  margin-bottom: 2em
+  +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
+  
   .tablesorter
-    width: 80%
+    width: 100%
     thead
       background-color: adjust-lightness($ist-color, 30%)
       tr
@@ -165,9 +170,7 @@ input#predict
   background-color: $ist-color
   margin: 0
   padding: 0
-      
-.halt
-  margin: 5em
-          
+
+  
 .footer
   margin: 20px 0 20px 0
diff --git a/views/details.haml b/views/details.haml
index ffa347c..028b5b1 100644
--- a/views/details.haml
+++ b/views/details.haml
@@ -1,15 +1,17 @@
 %link{ :href=>"/stylesheets/screen.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"}
+.content
+  .details
+    %h2
+      Details:
+    %img{:src=>"#{@compound_uri.uri}/image", :alt=>@compound_uri.uri, :width=>"100px"}
+    %p
+      SMILES:
+      = @compound_uri.smiles
 
-.details
-  %img{:src=>"#{@compound.uri}/image", :alt=>@compound.uri, :width=>"100px"}
-  %p
-    SMILES:
-    = @compound.smiles
+    %p
+      // TODO handle OpenTox::ResourceNotFoundError
+      Names:
+      = @compound_uri.names
 
-  %p
-    // TODO handle OpenTox::ResourceNotFoundError
-    Names:
-    = @compound.names
-
-  %p
-    = @compound.inchi.gsub("InChI=", "InChI: ")
+    %p
+      = @compound_uri.inchi.gsub("InChI=", "InChI: ")
diff --git a/views/neighbours.haml b/views/neighbours.haml
index cb30481..ad22e10 100644
--- a/views/neighbours.haml
+++ b/views/neighbours.haml
@@ -9,14 +9,9 @@
 %script{:src=>"http://code.jquery.com/jquery-1.9.1.js"}
 %script{ :src=>"http://code.jquery.com/ui/1.10.0/jquery-ui.js"}
 %script{:src=>"/javascripts/jquery.tablesorter.min.js"}
-/ main class in stylesheet ;
-.results
+
+.results{:style=>"display:none"}
   - count_m = 0
-  / js function for tabs div with preseleted tab by link id ;
-  :javascript
-    $(function() {
-      $("#tabs").tabs({ active: '#{params[:id]}' });
-    });
   / tabs div ;
   #tabs
     %ul
@@ -44,14 +39,14 @@
           :javascript
             $(document).ready(function(){
               $("table##{count_rs}").tablesorter({
-                debug: true,
+                //debug: true,
                 widgets: ['zebra'],
                 headers: {0: {sorter: false},3: {sorter: false}},
                 sortList: [[2,0]]
               });
             });
           / TODO catch table error if tbody is empty      
-          %h3= "Neighbours: "
+          %h2= "Neighbours: "
           %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"}
             %thead
               %tr
@@ -69,13 +64,20 @@
               %tr
                 %td
                   %img{:src=>"#{neighbour_compound.uri}/image", :alt=>neighbour_compound.uri, :width=>"100px"}
-                %td= p.data_entries[count][0]
+                %td
+                  = p.data_entries[count][0]
                 %td
                   = p.data_entries[count][3].round(3)
                   
                 %td
-                  / target is iframe "details", defined in prediction.haml
-                  %a{:href => to("/prediction/#{CGI.escape(neighbour_compound.uri)}/details"), :id=>"link#{neighbour_compound.uri}/#{count}", :target=>"details"}
+                  %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
+                    $("a#link#{count_rs}#{count}").click(function () {
+                      $(".details").toggle();
+                      document.getElementById('details').focus();
+                    });
+                    
                 - count += 1
-          
+-#= haml :details, :layout => false
+%iframe{:id=>"details", :name=>"details", :height=>"400px", :width=>"100%", :style=>"border:0px"}
diff --git a/views/predict.haml b/views/predict.haml
index 064ed60..dbfab50 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -30,7 +30,7 @@
         $("#insert").toggle();
         document.location = document.location + "#" + "insert";
       });
-    #insert{ :style => "display: none" }   
+    #insert{:style=>"display:none"}   
       %p
       %label &nbsp;
       .jme
diff --git a/views/prediction.haml b/views/prediction.haml
index 47a4dfa..82c7254 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -29,11 +29,15 @@
                   = "Confidence:\n"
                   = p.data_entries[0][2].round(3)
                 %br
-                %a{:href=> to("/prediction/neighbours/#{count}"), :target=> "neighbours"}
+                %a{:href=> "#tabs", :id=>"link#{count}"}
                   %img{:src=>"/images/arrow_down_float.png", :alt=>"arrow"}
+                  :javascript
+                    $("a#link#{count}").click(function () {
+                      $(".results").toggle();
+                      document.getElementById('tabs').focus();
+                      $("#tabs").tabs({ active: "#{count}" });
+                    });
               - count+=1
-                  
-  %iframe{:id=>"neighbours", :name=>"neighbours", :width=>"50%", :height=>"400px", :style=>"float:left; border:0px"}
-  %iframe{:id=>"details", :name=>"details", :width=>"50%", :height=>"400px", :style=>"border:0px"}
-                  
+  
+  = haml :neighbours, :layout => false