diff options
-rw-r--r-- | TODO | 8 | ||||
-rw-r--r-- | application.rb | 12 | ||||
-rw-r--r-- | public/images/ist_logo.png | bin | 1180 -> 2391 bytes | |||
-rw-r--r-- | public/stylesheets/screen.css | 2 | ||||
-rw-r--r-- | public/stylesheets/screen.sass | 37 | ||||
-rw-r--r-- | views/details.haml | 13 | ||||
-rw-r--r-- | views/layout.haml | 3 | ||||
-rw-r--r-- | views/neighbours.haml | 6 | ||||
-rw-r--r-- | views/predict.haml | 5 | ||||
-rw-r--r-- | views/prediction.haml | 10 |
10 files changed, 67 insertions, 29 deletions
@@ -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 Binary files differindex 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"} |