version with iframes for neighbours and details view

10 files changed, 67 insertions, 29 deletions

diff --git a/TODO b/TODO
new file mode 100644
index 0000000..a4fad2e
--- /dev/null
+++ b/TODO
@@ -0,0 +1,8 @@
+- 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
diff --git a/application.rb b/application.rb
index 658366d..5a11f2e 100644
--- a/application.rb
+++ b/application.rb
@@ -40,30 +40,32 @@ 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}"
+  #$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}"
+    #$logger.debug "prediction class: #{prediction.class}"
   end
 
   haml :prediction
 end
 
-get '/prediction/neighbours/?' do
+get '/prediction/neighbours/:id?' do
+
   haml :neighbours, :layout => false
 end
 
-get '/prediction/neighbours/details/?' do
+get '/prediction/:neighbour/details/?' do
+  @compound = OpenTox::Compound.new params[:neighbour]
   haml :details, :layout => false
 end
 
diff --git a/public/images/ist_logo.png b/public/images/ist_logo.png
index b182bbd..b0c8227 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 48730d3..a479821 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: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 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}.results{margin-top:2em;background-image:url("/images/gray_jean.png")}.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}.details{color:green}.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 0 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}.footer{margin:20px 0 20px 0}
diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass
index b928922..e4304c9 100644
--- a/public/stylesheets/screen.sass
+++ b/public/stylesheets/screen.sass
@@ -11,7 +11,7 @@ body
   background-color: $bg-color
   overflow: scroll
   font-family: sans-serif
-  margin: 1em
+  //margin: 0.3em
   min-width: 800px
   min-heigth: 600px
   
@@ -24,7 +24,10 @@ body
   img
     float: left
   h1
-    margin-bottom: 3em
+    margin-top: -2px
+    position: relative
+    top: -4px
+    left: 20px
 
   
 .content
@@ -36,6 +39,7 @@ body
     text-shadow: #FFF 0 1px 0
     font-size: x-large
     font-family: Verdana
+    display: inline
     
   h2
     text-shadow: #FFF 0 1px 0
@@ -81,6 +85,9 @@ body
     +border-bottom-left-radius(25px)
     +border-bottom-right-radius(25px)
     +background-clip(border-box)
+    
+    input#predict
+      margin-left: 1em
   
   .predictions
     margin-top: 5em
@@ -111,18 +118,21 @@ body
     #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
+  background-image: url("/images/gray_jean.png")
+  +border-bottom-right-radius(25px)
+  +background-clip(border-box)
 
 .results
-  margin-top: 2em
-  //padding: 1em
   background-image: url("/images/gray_jean.png")
-  //+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)
-        
+
   .tablesorter
-    //width: 100%
+    width: 80%
     thead
       background-color: adjust-lightness($ist-color, 30%)
       tr
@@ -148,8 +158,11 @@ body
         td
           background-color: #FFFFF0
           
-.details
-  color: green
+input#predict
+  border: 0px
+  background-color: $ist-color
+  margin: 0
+  padding: 0
       
         
 .footer
diff --git a/views/details.haml b/views/details.haml
index 824da91..ffa347c 100644
--- a/views/details.haml
+++ b/views/details.haml
@@ -1,4 +1,15 @@
 %link{ :href=>"/stylesheets/screen.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"}
 
 .details
-  info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken info names smiles inchies Eigenschaften physic chem Verwandte links zu anderen Datenbanken
+  %img{:src=>"#{@compound.uri}/image", :alt=>@compound.uri, :width=>"100px"}
+  %p
+    SMILES:
+    = @compound.smiles
+
+  %p
+    // TODO handle OpenTox::ResourceNotFoundError
+    Names:
+    = @compound.names
+
+  %p
+    = @compound.inchi.gsub("InChI=", "InChI: ")
diff --git a/views/layout.haml b/views/layout.haml
index 7bb62c3..341ae25 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -12,7 +12,8 @@
 
   %body
     .logo
-      %img{:src=>"/images/ist_logo.png"}
+      %a{:href=> to('/predict')}
+        %img{:src=>"/images/ist_logo.png"}
       %h1 Lazar Toxicity Predictions
     
     .content
diff --git a/views/neighbours.haml b/views/neighbours.haml
index 0a266b5..6170d43 100644
--- a/views/neighbours.haml
+++ b/views/neighbours.haml
@@ -8,7 +8,7 @@
   - count_m = 0
   :javascript
     $(function() {
-      $("#tabs").tabs();
+      $("#tabs").tabs({ active: '#{params[:id]}' });
     });
   #tabs
     %ul
@@ -20,7 +20,7 @@
     - count_rs = 0
     - @@predictions.each do |pa|
       - count_rs += 1
-      #results{:id=>"#{count_m}"}
+      #results{:id=>"#{count_rs}"}
         - pa.each do |p|
           / get prediction OpenTox::Dataset   
           - p.get
@@ -65,7 +65,7 @@
                   = p.data_entries[count][3].round(3)
                   
                 %td
-                  %a{:href => to('/prediction/neighbours/details'), :id=>"link#{neighbour_compound.uri}/#{count}", :target=>"details"}
+                  %a{:href => to("/prediction/#{CGI.escape(neighbour_compound.uri)}/details"), :id=>"link#{neighbour_compound.uri}/#{count}", :target=>"details"}
                     %img{:src=>"/images/arrow_right_float.png", :alt=>"arrow"}
                 - count += 1
           
diff --git a/views/predict.haml b/views/predict.haml
index be2134b..8ee3558 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -69,4 +69,7 @@
   
 
   %fieldset#bottom
-    %input{ :type => "submit", :value=>"3. Predict", :onclick => "getsmiles();"}
+    %a{:href => "#predict", :id => "linkPredict"}
+      %h1 3. Predict
+      %input{ :type => "submit", :value=>">>", :onclick => "getsmiles();"}
+    
diff --git a/views/prediction.haml b/views/prediction.haml
index 623275d..47a4dfa 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -21,7 +21,7 @@
               - p.get
               %td
                 %b= @@prediction_models[count].title
-                - count+=1
+                
                 %br
                   = "Result:\n"
                   %b= p.data_entries[0][1]
@@ -29,11 +29,11 @@
                   = "Confidence:\n"
                   = p.data_entries[0][2].round(3)
                 %br
-                %a{:href=> to("/prediction/neighbours"), :target=> "neighbours"}
+                %a{:href=> to("/prediction/neighbours/#{count}"), :target=> "neighbours"}
                   %img{:src=>"/images/arrow_down_float.png", :alt=>"arrow"}
+              - count+=1
                   
-                  
-  %iframe{:name=>"neighbours", :width=>"50%", :height=>"400px", :style=>"float:left; border:0px"}
-  %iframe{:name=>"details", :width=>"50%", :height=>"400px", :style=>"border:0px"}
+  %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"}