check input

8 files changed, 67 insertions, 24 deletions

diff --git a/TODO b/TODO
index 6741b5c..d33ef1a 100644
--- a/TODO
+++ b/TODO
@@ -7,3 +7,4 @@
 - external links
 - add info hovers
 - display notice 'sth went wrong'
+- check checkbox with model title 
diff --git a/application.rb b/application.rb
index 5a11f2e..ac5e360 100644
--- a/application.rb
+++ b/application.rb
@@ -19,11 +19,7 @@ get '/predict/?' do
 end
 
 post '/predict/?' do
-  # check for content
-  unless params[:selection] and params[:identifier] != ''
-    redirect to('/predict')
-  end
-  # transferred input
+  # transfered input
   @identifier = params[:identifier]
   # get compound from SMILES
   @compound = OpenTox::Compound.from_smiles $compound[:uri], @identifier.to_s
diff --git a/public/javascripts/lazar-gui.js b/public/javascripts/lazar-gui.js
new file mode 100644
index 0000000..60602c6
--- /dev/null
+++ b/public/javascripts/lazar-gui.js
@@ -0,0 +1,11 @@
+$(document).ready(function() {
+  addExternalLinks();
+});
+
+addExternalLinks = function() {
+  $('A[rel="external"]').each(function() {
+    $(this).attr('alt', 'Link opens in new window.');
+    $(this).attr('title', 'Link opens in new window.');
+    $(this).attr('target', '_blank');
+  });
+};
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
index a479821..a3d7ca9 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 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}
+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}
diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass
index e4304c9..a453adc 100644
--- a/public/stylesheets/screen.sass
+++ b/public/stylesheets/screen.sass
@@ -36,7 +36,7 @@ body
       
   h1
     margin: 0.3em
-    text-shadow: #FFF 0 1px 0
+    text-shadow: #FFF 1px 1px 0
     font-size: x-large
     font-family: Verdana
     display: inline
@@ -85,6 +85,8 @@ body
     +border-bottom-left-radius(25px)
     +border-bottom-right-radius(25px)
     +background-clip(border-box)
+    label
+      //cursor: pointer
     
     input#predict
       margin-left: 1em
@@ -164,6 +166,8 @@ input#predict
   margin: 0
   padding: 0
       
-        
+.halt
+  margin: 5em
+          
 .footer
   margin: 20px 0 20px 0
diff --git a/views/layout.haml b/views/layout.haml
index 6366ae6..a12b324 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -8,15 +8,16 @@
     %link{:rel=>"stylesheet", :href=>"/stylesheets/jquery-ui.css"}
     %script{:src=>"/javascripts/jquery-1.9.1.min.js"}
     %script{ :src=>"/javascripts/jquery-ui.js"}
+    %script{ :src=>"/javascripts/lazar-gui.js"}
     
 
   %body
     .logo
-      %a{:href=> "http://www.in-silico.ch/", :target=>"_blank"}
+      %a{:href=> "http://www.in-silico.ch/", :rel=> "external"}
         %img{:src=>"/images/ist_logo.png"}
       %h1 Lazar Toxicity Predictions
     
-    .content
+    .content    
       = yield
     
     .footer
diff --git a/views/neighbours.haml b/views/neighbours.haml
index 6170d43..cb30481 100644
--- a/views/neighbours.haml
+++ b/views/neighbours.haml
@@ -1,43 +1,52 @@
+/ @@prediction_models and @@predictions defined in POST request '/predict'
+/ unpacks multi prediction array ;
+/ prepare it for neighbours ;
+/ align single prediction to endpoint ;
+/ display preordered in table view ;
+/ loaded in iframe, necessary to load js/css here ;
 %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"}
- 
+/ main class in stylesheet ;
 .results
   - 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
+      / each endpoint becomes a tab head ;
       - @@prediction_models.each do |m|
         - count_m += 1
         %li
           %a{:href => "#results_#{count_m}", :id => "link#{m.title}"}
             = m.title
     - count_rs = 0
+    / unpack to single arrays
     - @@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
+          / prepare dataset for neighbours table ;
+          / delete first array which contains input compound prediction ;
+          / keep the following arrays they are the neighbour predictions ;
           - p.data_entries.shift
           - p.compounds.shift
-          
+          / call the tablesorter plugin ;
+          / presort by similarity ;
           :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]]
               });
             });
@@ -65,6 +74,7 @@
                   = 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"}
                     %img{:src=>"/images/arrow_right_float.png", :alt=>"arrow"}
                 - count += 1
diff --git a/views/predict.haml b/views/predict.haml
index 8ee3558..064ed60 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -2,10 +2,26 @@
   function getsmiles() {
     if (document.JME.smiles() != '') {
       document.form.identifier.value = document.JME.smiles() ;
-    }
-  }
-
-%form{:name => "form", :action => to('/predict'), :method => "post", :enctype => "multipart/form-data" }
+    };
+  };
+  function checksmiles () {
+    if (document.form.identifier.value == "") {
+      alert("Please insert a compound.")
+      document.form.identifier.focus();
+      return false;
+    };
+    return true;
+  };
+  function checkboxes () {
+    if ($("#model input[type=checkbox]:checked").length < 1 ){
+      alert("Please select an endpoint.")
+      document.getElementById('model').focus();
+      return false;
+    };
+    return true;
+  };
+  
+%form{:name => "form", :action => to('/predict'), :method => "post", :enctype => "multipart/form-data", :onsubmit => "return  !!(checksmiles() & checkboxes())" }
   %fieldset#top
     %a{:href => "#insert", :id => "linkInsert"}
       %h1 1. Draw or insert your compound   
@@ -21,6 +37,7 @@
         %applet{:code => "JME.class", :name => "JME", :archive => "JME.jar", :width => "500", :height => "360"}
           %param{ :name => "options", :value => "polarnitro"}
           Please enable Java and JavaScript in your browser to use the JME editor.
+        %a{:href => "jme_help", :rel => "external"} (help)
         %span{:style=>"font-size:75%"}
           &copy;
           %a{:href => 'http://www.molinspiration.com/jme/index.html', :rel => "external"} JME Editor
@@ -55,7 +72,8 @@
       - @models.each do |model|
         - model.get
         #model
-          %input{:type => 'checkbox', :name => "selection[#{model.title}]", :value => true, :disabled => false}
+          %input{:type => "checkbox", :name => "selection[#{model.title}]", :id => "selection[#{model.title}]", :value => true, :disabled => false}
+          %label{:for => "selection[#{model.title}]"}
             %b= model.title
           %a{:href=>"#", :alt=>"#{model.title} validation"}
             %i Validation Link
@@ -70,6 +88,8 @@
 
   %fieldset#bottom
     %a{:href => "#predict", :id => "linkPredict"}
-      %h1 3. Predict
-      %input{ :type => "submit", :value=>">>", :onclick => "getsmiles();"}
+      %label{:for => "submit"}
+        %h1 3. Predict
+      %input{ :type => "submit", :id => "submit", :value=>">>", :onclick => "getsmiles()"}
+