diff options
-rw-r--r-- | TODO | 8 | ||||
-rw-r--r-- | application.rb | 4 | ||||
-rw-r--r-- | public/images/ist_logo.png | bin | 5246 -> 4191 bytes | |||
-rw-r--r-- | public/stylesheets/screen.css | 2 | ||||
-rw-r--r-- | public/stylesheets/screen.sass | 46 | ||||
-rw-r--r-- | views/details.haml | 18 | ||||
-rw-r--r-- | views/error.haml | 2 | ||||
-rw-r--r-- | views/layout.haml | 3 | ||||
-rw-r--r-- | views/neighbours.haml | 11 | ||||
-rw-r--r-- | views/prediction.haml | 9 |
10 files changed, 57 insertions, 46 deletions
@@ -1,10 +1,4 @@ - 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 -- display notice 'sth went wrong' -- check checkbox with model title +- add wait snake for java plugin diff --git a/application.rb b/application.rb index 54b2d10..6dfc9b7 100644 --- a/application.rb +++ b/application.rb @@ -36,9 +36,9 @@ get '/prediction/:neighbour/details/?' do when "Error" @names = "There are no names for this compound available." when "Completed" - @names = @compound_uri.names + @names = @compound_uri.names.join(",") end - @inchi = @compound_uri.inchi.gsub("InChI=", "InChI: ") + @inchi = @compound_uri.inchi.gsub("InChI=", "") haml :details, :layout => false end diff --git a/public/images/ist_logo.png b/public/images/ist_logo.png Binary files differindex 35a4f3c..2ad562c 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 d522e1d..91bd649 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 1px 1px 0;font-size:x-large;font-family:Verdana;display:inline}.content h2{text-shadow:#fff 1px 1px 0;font-size:x-large;color:#f55}.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:#dbc87b;-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:#dbc87b;-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:#dbc87b;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:#dbc87b;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 .error{margin-top:5em;background-color:#dbc87b;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 .error error{border:2px solid #f55;background-color:#fff;color:#f55}.details{margin-bottom:2em;height:400px;scroll:auto;background-image:url("/images/gray_jean.png");-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}.results{background-image:url("/images/gray_jean.png");overflow:auto;margin-top:2em;margin-bottom:2em;-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}.results .tablesorter{width:100%}.results .tablesorter thead{background-color:#fcfaf3}.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:#e2d397}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#e2d397}.results .tablesorter tbody tr.odd td{background-color:#f0f0f0}.results .tablesorter tbody tr.even td{background-color:ivory}input#predict{border:0px;background-color:#dbc87b;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;display:inline;margin-right:1em}.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 1px 1px 0;font-size:x-large;color:#f55}.content .arrow{margin:5px 0px 5px 20px}.content .back{display:inline}.content .close{text-align:right}.content fieldset#top{border:0;padding:10px;background-color:#dbc87b;-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:#dbc87b;-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:#dbc87b;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{background-color:#dbc87b;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 .overview #overview tr td.true{text-align:center;background-color:#f80000;-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 .overview #overview tr td.false{text-align:center;background-color:#52ce00;-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 .error{background-color:#dbc87b;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 .error error{border:2px solid #f55;background-color:#fff;color:#f55}.details{margin-bottom:2em;height:400px;scroll:auto;background-image:url("/images/gray_jean.png");-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}.results{background-image:url("/images/gray_jean.png");overflow:auto;margin-top:2em;margin-bottom:2em;-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}.results .tablesorter{width:100%}.results .tablesorter thead{background-color:#fcfaf3}.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:#e2d397}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#e2d397}.results .tablesorter tbody tr td.false{text-align:center;background-color:#52ce00;-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}.results .tablesorter tbody tr td.true{text-align:center;background-color:#f80000;-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}input#predict{border:0px;background-color:#dbc87b;margin:0;padding:0}.footer{margin:20px 0 20px 0} diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass index db6395d..cc8878d 100644 --- a/public/stylesheets/screen.sass +++ b/public/stylesheets/screen.sass @@ -12,7 +12,6 @@ body background-color: $bg-color overflow: scroll font-family: sans-serif - //margin: 0.3em min-width: 800px min-heigth: 600px @@ -24,11 +23,12 @@ body .logo img float: left + display: inline + margin-right: 1em h1 - margin-top: -2px - position: relative - top: -4px - left: 20px + //position: relative + //top: 6px + //left: 20px .content @@ -45,7 +45,6 @@ body h2 text-shadow: #FFF 1px 1px 0 font-size: x-large - //font-family: monospace color: #FF5555 .arrow @@ -59,7 +58,7 @@ body fieldset#top border: 0 - margin-top: 5em + //margin-top: 5em padding: 10px background-color: $ist-color +border-top-left-radius(25px) @@ -94,7 +93,6 @@ body margin-left: 1em .predictions - margin-top: 5em background-color: $ist-color padding: 10px text-align: justify @@ -121,9 +119,20 @@ body padding-left: 1em #overview tr td#compound width: 150px + + #overview tr td.true + text-align: center + background-color: adjust-lightness(#D40000, 7%) + +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) + + #overview tr td.false + text-align: center + background-color: adjust-lightness(#44AA00, 7%) + +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) + .error - margin-top: 5em + //height: 200px background-color: $ist-color padding: 10px text-align: justify @@ -148,7 +157,6 @@ body .results background-image: url("/images/gray_jean.png") - //height: 400px overflow: auto margin-top: 2em margin-bottom: 2em @@ -173,13 +181,19 @@ body 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 + + tr td.false + text-align: center + background-color: adjust-lightness(#44AA00, 7%) + +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) + tr td.true + text-align: center + background-color: adjust-lightness(#D40000, 7%) + +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) + input#predict diff --git a/views/details.haml b/views/details.haml index 38d97fe..48d28bc 100644 --- a/views/details.haml +++ b/views/details.haml @@ -5,14 +5,16 @@ %h2 Details: %img{:src=>"#{@compound_uri.uri}/image", :alt=>@compound_uri.uri, :width=>"100px"} - %p + %br + %b SMILES: - = @smiles - - %p + %p= @smiles + %br + %b // TODO handle OpenTox::ResourceNotFoundError Names: - = @names - - %p - = @inchi + %p= @names + %br + %b + InChI: + %p= @inchi diff --git a/views/error.haml b/views/error.haml index 9aced43..61b436f 100644 --- a/views/error.haml +++ b/views/error.haml @@ -4,5 +4,5 @@ %img{:src=>"/images/arrow_left_float.png", :alt=>"arrow"} %a{:href => to('/predict')} New Prediction %error - = @error_report.to_s + = @error_report diff --git a/views/layout.haml b/views/layout.haml index 2269a34..7c05190 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -17,7 +17,8 @@ .logo %a{:href=> "http://www.in-silico.ch/", :rel=> "external"} %img{:src=>"/images/ist_logo.png"} - %h1 Lazar Toxicity Predictions + %h1 Lazar Toxicity Predictions + %hr .content = yield diff --git a/views/neighbours.haml b/views/neighbours.haml index eec7d39..a593e7b 100644 --- a/views/neighbours.haml +++ b/views/neighbours.haml @@ -41,7 +41,7 @@ $(document).ready(function(){ $("table##{count_rs}").tablesorter({ //debug: true, - widgets: ['zebra'], + //widgets: ['zebra'], headers: {0: {sorter: false},3: {sorter: false}}, sortList: [[2,0]] }); @@ -65,12 +65,11 @@ %tr %td %img{:src=>"#{neighbour_compound.uri}/image", :alt=>neighbour_compound.uri, :width=>"100px"} - %td + %td{:class => p.data_entries[count][0]} = p.data_entries[count][0] - %td - = p.data_entries[count][3].round(3) - - %td + %td{:class => p.data_entries[count][0]} + = p.data_entries[count][3].round(3) + %td{:class => p.data_entries[count][0]} %a{:href => to("/prediction/#{CGI.escape(neighbour_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"} %img{:src=>"/images/arrow_right_float.png", :alt=>"arrow"} :javascript diff --git a/views/prediction.haml b/views/prediction.haml index ed51d09..dd90847 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -14,15 +14,16 @@ %tbody %tr %td{:id=>"compound"} - %img{:src=>"#{@compound.uri}/image", :alt=>@compound.uri, :width=>"100px"} + %img{:src=>"#{@compound.uri}/image", :alt=>@compound.uri, :width=>"100"} - count=0 - @@predictions.each do |pa| - pa.each do |p| - p.get - %td - %b= @@prediction_models[count].title - + %td{:class => p.data_entries[0][1]} + %b{:class => "title"} + = @@prediction_models[count].title %br + %br = "Result:\n" %b= p.data_entries[0][1] %br |