working with iframes

8 files changed, 145 insertions, 154 deletions

diff --git a/application.rb b/application.rb
index 76e7f60..658366d 100644
--- a/application.rb
+++ b/application.rb
@@ -28,8 +28,8 @@ post '/predict/?' do
   # get compound from SMILES
   @compound = OpenTox::Compound.from_smiles $compound[:uri], @identifier.to_s
   # init
-  @prediction_models = []
-  @predictions = []
+  @@prediction_models = []
+  @@predictions = []
   # init lazar algorithm
   lazar = OpenTox::Algorithm.new File.join($algorithm[:uri],"lazar")
   # gather models from service and compare if selected
@@ -38,27 +38,35 @@ post '/predict/?' do
     @mall = OpenTox::Model.all $model[:uri]
     @mall.each do |m|
       m.get
-      @prediction_models << m if m.title =~ /#{@mselected}/
+      @@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_models.each do |m| 
     @prediction_uri = m.run :compound_uri => "#{@compound.uri}"
     prediction = OpenTox::Dataset.new @prediction_uri
     pa = []
     pa << prediction
-    @predictions << pa
+    @@predictions << pa
     $logger.debug "prediction class: #{prediction.class}"
   end
 
   haml :prediction
 end
 
+get '/prediction/neighbours/?' do
+  haml :neighbours, :layout => false
+end
+
+get '/prediction/neighbours/details/?' do
+  haml :details, :layout => false
+end
+
 get '/stylesheets/:name.css' do
   content_type 'text/css', :charset => 'utf-8'
   sass(:"stylesheets/#{params[:name]}", Compass.sass_engine_options )
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
index 9e8aa27..48730d3 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}.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 #info{color:green;position:relative;margin-left:60%}.content .results .tablesorter{width:100%}.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}
+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}
diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass
index 80f49fa..b928922 100644
--- a/public/stylesheets/screen.sass
+++ b/public/stylesheets/screen.sass
@@ -3,8 +3,8 @@
 
 $bg-color: #CCCCFF
 $bg-color-div: #C5C1E4
-//$ist-blue: #B9DCFF
-$ist-blue: #C8AB37
+//$ist-color: #B9DCFF
+$ist-color: #C8AB37
 
 body
   background-image: url("/images/gray_jean.png")
@@ -55,7 +55,7 @@ body
     border: 0
     margin-top: 5em
     padding: 10px
-    background-color: $ist-blue
+    background-color: $ist-color
     +border-top-left-radius(25px)
     +border-top-right-radius(25px)
     +background-clip(border-box)
@@ -66,7 +66,7 @@ body
   fieldset#middle
     border: 0
     padding: 10px
-    background-color: $ist-blue
+    background-color: $ist-color
     +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
     
     #model a
@@ -74,7 +74,7 @@ body
     
   fieldset#bottom
     border: 0
-    background-color: $ist-blue
+    background-color: $ist-color
     padding: 10px
     margin-bottom: 5em   
     +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
@@ -84,7 +84,7 @@ body
   
   .predictions
     margin-top: 5em
-    background-color: $ist-blue
+    background-color: $ist-color
     padding: 10px
     text-align: justify
     +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
@@ -111,52 +111,45 @@ body
     #overview tr td#compound
       width: 150px
     
-  .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)
-    
-    #info
-      color: green
-      position: relative
-      margin-left: 60%
+
+.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%
+    thead
+      background-color: adjust-lightness($ist-color, 30%)
+      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
+        th.headerSortDown 
+          background-image: url("/images/desc.gif") 
+          background-color: adjust-lightness($ist-color, 7%)
+        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
           
-    .tablesorter
-      width: 100%
-      thead
-        background-color: adjust-lightness($ist-blue, 30%)
-        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
-          th.headerSortDown 
-            background-image: url("/images/desc.gif") 
-            background-color: adjust-lightness($ist-blue, 7%)
-          th.headerSortUp 
-            background-image: url("/images/asc.gif") 
-            background-color: adjust-lightness($ist-blue, 7%)
-      tbody
-        tr.odd
-          td
-            background-color: #F0F0F0
-        tr.even
-          td
-            background-color: #FFFFF0
-    .result
-      width: 100%
-      thead
-        padding-left: 20px
-        border: 1px solid #dad9c7
-        margin-left: -1px
+.details
+  color: green
       
         
 .footer
diff --git a/views/details.haml b/views/details.haml
new file mode 100644
index 0000000..824da91
--- /dev/null
+++ b/views/details.haml
@@ -0,0 +1,4 @@
+%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
diff --git a/views/layout.haml b/views/layout.haml
index 3487bba..7bb62c3 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -8,7 +8,7 @@
     %link{:rel=>"stylesheet", :href=>"http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css"}
     %script{:src=>"http://code.jquery.com/jquery-1.9.1.js"}
     %script{ :src=>"http://code.jquery.com/ui/1.10.0/jquery-ui.js"}
-
+    
 
   %body
     .logo
diff --git a/views/neighbours.haml b/views/neighbours.haml
new file mode 100644
index 0000000..0a266b5
--- /dev/null
+++ b/views/neighbours.haml
@@ -0,0 +1,71 @@
+%link{ :href=>"/stylesheets/screen.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"}
+%link{:rel=>"stylesheet", :href=>"http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css"}
+%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"}
+ 
+.results
+  - count_m = 0
+  :javascript
+    $(function() {
+      $("#tabs").tabs();
+    });
+  #tabs
+    %ul
+      - @@prediction_models.each do |m|
+        - count_m += 1
+        %li
+          %a{:href => "#results_#{count_m}", :id => "link#{m.title}"}
+            = m.title
+    - count_rs = 0
+    - @@predictions.each do |pa|
+      - count_rs += 1
+      #results{:id=>"#{count_m}"}
+        - pa.each do |p|
+          / get prediction OpenTox::Dataset   
+          - p.get
+          / prepare dataset for neighbours table
+          - p.data_entries.shift
+          - p.compounds.shift
+          
+          :javascript
+            $(document).ready(function(){
+              // call the tablesorter plugin 
+              $("table##{count_rs}").tablesorter({
+                // debug for development
+                debug: true,
+                widgets: ['zebra'],
+                // disable first column
+                headers: {0: {sorter: false},3: {sorter: false}},
+                // presort similarity asc
+                sortList: [[2,0]]
+              });
+            });
+          / TODO catch table error if tbody is empty      
+          %h3= "Neighbours: "
+          %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"}
+            %thead
+              %tr
+                %th
+                  Compound
+                %th
+                  Measured Activity
+                %th
+                  Similarity
+                %th
+                  Details
+            -#%tbody
+            - count = 0
+            - p.compounds.each do |neighbour_compound|
+              %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][3].round(3)
+                  
+                %td
+                  %a{:href => to('/prediction/neighbours/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 60817da..be2134b 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -69,19 +69,4 @@
   
 
   %fieldset#bottom
-    %a{:href => "#predict", :id => "linkPredict"}
-      %h1 3. Predict
-    
-    :javascript
-      $("a#linkPredict").click(function () {
-        $("#predict").toggle();
-        document.location = document.location + "#" + "predict";
-      });
-      
-    #predict{ :style => "display: none;"}
-      %p Display the prediction including neighbours and sort mechanism
-      %br 
-      %input{ :type => "submit", :value => "Predict", :onclick => "getsmiles();"}
-      
-      .close
-        = hide_link "#predict"
+    %input{ :type => "submit", :value=>"3. Predict", :onclick => "getsmiles();"}
diff --git a/views/prediction.haml b/views/prediction.haml
index ef928fa..623275d 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -1,8 +1,3 @@
-:javascript
-  $(function() {
-    $("#tabs").tabs();
-  });
-
 .predictions
   .back
     %h1
@@ -21,11 +16,11 @@
           %td{:id=>"compound"}
             %img{:src=>"#{@compound.uri}/image", :alt=>@compound.uri, :width=>"100px"}
           - count=0
-          - @predictions.each do |pa|
+          - @@predictions.each do |pa|
             - pa.each do |p|
               - p.get
               %td
-                %b= @prediction_models[count].title
+                %b= @@prediction_models[count].title
                 - count+=1
                 %br
                   = "Result:\n"
@@ -33,77 +28,12 @@
                 %br
                   = "Confidence:\n"
                   = p.data_entries[0][2].round(3)
-    
-  %script{:src=>"/javascripts/jquery.tablesorter.min.js"}
-   
-  .results
-    #tabs
-      %ul
-        - count_m = 0
-        - @prediction_models.each do |m|
-          - count_m += 1
-          %li
-            %a{:href => "#results_#{count_m}", :id => "link#{m.title}"}
-              = m.title
-      - count_rs = 0
-      - @predictions.each do |pa|
-        - count_rs += 1
-        #results{:id=>"#{count_rs}"}
-          - pa.each do |p|
-            / get prediction OpenTox::Dataset   
-            - p.get
-            / prepare dataset for neighbours table
-            - p.data_entries.shift
-            - p.compounds.shift
-
-            :javascript
-              $(document).ready(function(){ 
-                // call the tablesorter plugin 
-                $("table##{count_rs}").tablesorter({
-                  // debug for development
-                  debug: true,
-                  widgets: ['zebra'],
-                  // disable first column
-                  headers: {0: {sorter: false},3: {sorter: false}},
-                  // presort similarity asc
-                  sortList: [[2,0]]
-                });
-              });
-            / TODO catch table error if tbody is empty      
-            %h3= "Neighbours: "
-            %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"}
-              %thead
-                %tr
-                  %th
-                    Compound
-                  %th
-                    Measured Activity
-                  %th
-                    Similarity
-                  %th
-                    Details
-              -#%tbody
-              - count = 0
-              - p.compounds.each do |neighbour_compound|
-                %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][3].round(3)
-                    
-                  %td
-                    %a{:href => "#info_#{count}", :id=>"linkNeighbour#{count}"}
-                      %img{:src=>"/images/arrow_right_float.png", :alt=>"arrow"}
-                    #info{:id=>"#{count}", :style => "display: none;"}
-                      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
-                      
-                    :javascript
-                      $("a#linkNeighbour#{count}").click(function () {
-                        $("#info_#{count}").toggle();
-                        document.location = document.location + "#" + "linkNeighbour#{count}";
-                      });
-                      
-                  - count += 1
+                %br
+                %a{:href=> to("/prediction/neighbours"), :target=> "neighbours"}
+                  %img{:src=>"/images/arrow_down_float.png", :alt=>"arrow"}
+                  
+                  
+  %iframe{:name=>"neighbours", :width=>"50%", :height=>"400px", :style=>"float:left; border:0px"}
+  %iframe{:name=>"details", :width=>"50%", :height=>"400px", :style=>"border:0px"}