From 84bb7c7ff4afcb1ad7ad1c68f0eb778c64f63183 Mon Sep 17 00:00:00 2001 From: gebele Date: Wed, 20 Mar 2013 16:31:38 +0100 Subject: check input --- TODO | 1 + application.rb | 6 +----- public/javascripts/lazar-gui.js | 11 +++++++++++ public/stylesheets/screen.css | 2 +- public/stylesheets/screen.sass | 8 ++++++-- views/layout.haml | 5 +++-- views/neighbours.haml | 24 +++++++++++++++++------- views/predict.haml | 34 +++++++++++++++++++++++++++------- 8 files changed, 67 insertions(+), 24 deletions(-) create mode 100644 public/javascripts/lazar-gui.js 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%"} © %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()"} + -- cgit v1.2.3