From 3bb0ba2c96572ff6b77a8a879fa1f3cd45ae000c Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 17 Jun 2013 12:44:18 +0200 Subject: added info icons; neighbors, color by class for text not background --- application.rb | 7 +-- public/images/info_white.png | Bin 0 -> 651 bytes public/stylesheets/screen.css | 2 +- public/stylesheets/screen.sass | 55 +++++++++++++-------- views/layout.haml | 13 +++-- views/neighbors.haml | 108 +++++++++++++++++++++++++++++++++++++++++ views/neighbours.haml | 102 -------------------------------------- views/predict.haml | 4 +- views/prediction.haml | 67 +++++++++++++++++-------- 9 files changed, 206 insertions(+), 152 deletions(-) create mode 100644 public/images/info_white.png create mode 100644 views/neighbors.haml delete mode 100644 views/neighbours.haml diff --git a/application.rb b/application.rb index 0a8998d..5cc6763 100644 --- a/application.rb +++ b/application.rb @@ -24,14 +24,13 @@ get '/jme_help/?' do end # best way to get individual compound uri for details -get '/prediction/:neighbour/details/?' do - @compound_uri = OpenTox::Compound.new params[:neighbour] +get '/prediction/:neighbor/details/?' do + @compound_uri = OpenTox::Compound.new params[:neighbor] @smiles = @compound_uri.smiles task = OpenTox::Task.run("look for names.") do names = @compound_uri.names end task.wait - $logger.debug "names task uri: #{task.uri}" case task[RDF::OT.hasStatus] when "Error" @names = "There are no names for this compound available." @@ -71,13 +70,11 @@ post '/predict/?' do # gather models from service and compare if selected #TODO compare selected by uri params[:selection].each do |model| - $logger.debug "Model inspect in POST:\n#{model.inspect}" @mselected = model[0] @mall = OpenTox::Model.all $model[:uri] @mall.each do |m| @@prediction_models << m if m.title =~ /#{@mselected}/ end - $logger.debug "@prediction_models: #{@@prediction_models.inspect}" end # predict with selected models diff --git a/public/images/info_white.png b/public/images/info_white.png new file mode 100644 index 0000000..7005238 Binary files /dev/null and b/public/images/info_white.png differ diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css index ac60f7c..95d3fb6 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;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 #back-top{z-index:100;position:fixed;bottom:6%;margin-left:150px}.content #back-top a:hover{color:#bbb}.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 a#linkInsert{display:block;width:100%;height:2em}.content fieldset#top #appletContainer{padding:10px}.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 a#linkModels{display:block;width:100%;height:2em}.content fieldset#middle #endpoint{padding-top:2em}.content fieldset#middle #model a{display:inline;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;text-align:center;-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{padding-top:0.5em;background-color:#ff2121;-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{padding-top:0.5em;background-color:#82ba4b;-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;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-x:auto;overflow-y:hidden;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:#e6d8a3}.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:#e6d8a3}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#e6d8a3}.results .tablesorter tbody tr td.false{text-align:center;background-color:#82ba4b;-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:#ff2121;-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}.tooltip{background-color:#fff;border:2px solid #ccc;padding:1em;display:none;z-index:50}.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 #back-top{z-index:100;position:fixed;bottom:3%;margin-left:91%}.content #back-top a:hover{color:#bbb}.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 a#linkInsert{display:block;width:100%;height:2em}.content fieldset#top #appletContainer{padding:10px}.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 a#linkModels{display:block;width:100%;height:2em}.content fieldset#middle #endpoint{padding-top:2em}.content fieldset#middle #model a{display:inline;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;text-align:center;-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:200px}.content .overview #overview tr td.ctrue{padding-top:0.5em;background-color:#ff5a3b;-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.cfalse{padding-top:0.5em;background-color:#82ba4b;-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.c1{padding-top:0.5em;background-color:#ff5a3b;-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.c0{padding-top:0.5em;background-color:#82ba4b;-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.c0 .confidence{display:inline}.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;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-x:auto;overflow-y:hidden;margin-top:2em;margin-bottom:2em;-webkit-box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset}.results .tablesorter{width:100%}.results .tablesorter thead{background-color:#e6d8a3}.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:#dbc87b}.results .tablesorter thead tr th.headerSortUp{background-image:url("/images/asc.gif");background-color:#dbc87b}.results .tablesorter tbody tr td{-webkit-box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset;-moz-box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset;box-shadow:1px 1px 1px #fff inset,0px -1px 2px rgba(0,0,0,0.3) inset}.results .tablesorter tbody tr td.compound{width:200px}.results .tablesorter tbody tr td.cfalse{text-align:center;color:#5c8533}.results .tablesorter tbody tr td.ctrue{text-align:center;color:#d42200}.results .tablesorter tbody tr td.c0{text-align:center;color:#5c8533}.results .tablesorter tbody tr td.c1{text-align:center;color:#d42200}input#predict{border:0px;background-color:#dbc87b;margin:0;padding:0}.tooltip{background-color:#fff;border:2px solid #ccc;font-size:0.5em;padding:1em;display:none;z-index:50}.footer{margin:20px 0 20px 0} diff --git a/public/stylesheets/screen.sass b/public/stylesheets/screen.sass index fe0bb19..d460dbc 100644 --- a/public/stylesheets/screen.sass +++ b/public/stylesheets/screen.sass @@ -59,8 +59,8 @@ body #back-top z-index: 100 position: fixed - bottom: 6% - margin-left: 150px + bottom: 3% + margin-left: 91% a:hover color: #bbb @@ -142,17 +142,29 @@ body border: 1px solid #dad9c7 padding-left: 1em #overview tr td#compound - width: 150px + width: 200px - #overview tr td.true + #overview tr td.ctrue padding-top: 0.5em - background-color: adjust-lightness(#D40000, 15%) + background-color: adjust-lightness(#D42200, 20%) +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) - #overview tr td.false + #overview tr td.cfalse padding-top: 0.5em background-color: adjust-lightness(#5C8533, 15%) +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) + + #overview tr td.c1 + padding-top: 0.5em + background-color: adjust-lightness(#D42200, 20%) + +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) + + #overview tr td.c0 + padding-top: 0.5em + background-color: adjust-lightness(#5C8533, 15%) + +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) + .confidence + display: inline .error @@ -184,7 +196,7 @@ body overflow-y: hidden margin-top: 2em margin-bottom: 2em - +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) + +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba(black, 0.3) inset) .tablesorter width: 100% @@ -201,23 +213,29 @@ body margin-left: -1px th.headerSortDown background-image: url("/images/desc.gif") - background-color: adjust-lightness($ist-color, 10%) + background-color: $ist-color th.headerSortUp background-image: url("/images/asc.gif") - background-color: adjust-lightness($ist-color, 10%) + background-color: $ist-color tbody - - tr td.false + tr td + +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba(black, 0.3) inset) + tr td.compound + width: 200px + tr td.cfalse text-align: center - background-color: adjust-lightness(#5C8533, 15%) - +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) - tr td.true + color: #5C8533 + tr td.ctrue text-align: center - background-color: adjust-lightness(#D40000, 15%) - +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset) - + color: #D42200 + tr td.c0 + text-align: center + color: #5C8533 + tr td.c1 + text-align: center + color: #D42200 input#predict @@ -229,12 +247,11 @@ input#predict .tooltip background-color: #fff border: 2px solid #ccc + font-size: 0.5em padding: 1em display: none z-index: 50 - - .footer margin: 20px 0 20px 0 diff --git a/views/layout.haml b/views/layout.haml index 410d150..b9fd06d 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -49,19 +49,24 @@ }); }); $('a#confidence').tooltip({ - predelay: 800, + predelay: 300, + position: 'bottom center', + offset: [-100, 0], + }); + $('a#result').tooltip({ + predelay: 300, position: 'bottom center', offset: [-100, 0], }); $('a#similarity').tooltip({ - predelay: 800, + predelay: 300, position: 'bottom center', offset: [-600, 0], }); $('a#measured_activity').tooltip({ - predelay: 800, + predelay: 300, position: 'bottom center', - offset: [-450, 0], + offset: [-500, 0], }); }); #back-top diff --git a/views/neighbors.haml b/views/neighbors.haml new file mode 100644 index 0000000..ddea418 --- /dev/null +++ b/views/neighbors.haml @@ -0,0 +1,108 @@ +/ @@prediction_models and @@predictions defined in POST request '/predict' +/ unpacks multi prediction array ; +/ prepare it for neighbors ; +/ align single prediction to endpoint ; +/ display preordered in table view ; + +:javascript + $(function() { + $( ".results" ).resizable({ + containment: ".content" + }); + }); + +.results{:style=>"display:none"} + - count_m = 0 + / 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| + / prepare dataset for neighbors table ; + / delete first array which contains input compound prediction ; + / keep the following arrays they are the neighbor predictions ; + - p.data_entries.shift + - p.compounds.shift + / call the tablesorter plugin ; + / presort by similarity ; + :javascript + $(document).ready(function(){ + $("table##{count_rs}").tablesorter({ + //debug: true, + //widgets: ['zebra'], + headers: {0: {sorter: false}, 3: {sorter: false}}, + sortList: [[2,1]] + }); + }); + / TODO catch table error if tbody is empty + %h2= "Neighbors: " + %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"} + %thead + %tr + %th + Compound + %th + %b Measured Activity + %a{:href=>"#", :title=>"", :id=>"measured_activity"} + %img{:src=>"/images/info_white.png"} + .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"} + %dt + Measured Activity + %dd + Experimental result(s) from the training dataset. + %th + %b Similarity + %a{:href=>"#", :title=>"", :id=>"similarity"} + %img{:src=>"/images/info_white.png"} + .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"} + %dt + Similarity + %dd + %code lazar + calculates + %em + activity specific + similarities based on the presence of statistically significant fragments. + This procedure will + %ul + %li consider only those parts of a chemical structure that are relevant + for a particular endpoint + %li ignore inert parts of the structure + %li lead to different similarities, depending on the toxic endpoint + Similarities of 1 may be encountered even for structurally dissimilar + compounds, because inert parts are ignored. + %th + Details + -#%tbody + - count = 0 + - p.compounds.each do |neighbor_compound| + %tr + %td.compound + %img{:src=>"#{neighbor_compound.uri}/image", :alt=>"", :width=>"100px"} + %td{:class => "c"+p.data_entries[count][2]} + = p.data_entries[count][2] + %td{:class => "c"+p.data_entries[count][2]} + = p.data_entries[count][3] != nil ? p.data_entries[count][3].round(3) : "No prediction result" + %td{:class => "c"+p.data_entries[count][2]} + %a{:href => to("/prediction/#{CGI.escape(neighbor_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"} + %img{:src=>"/images/arrow_right_float.png", :alt=>"arrow"} + :javascript + $(function() { + $("a#link#{count_rs}#{count}").on('click', function(e) { + $('#iframe').bPopup(); + }); + }); + + - count += 1 + +%iframe{:id=>"iframe", :name=>"details", :height=>"90%", :width=>"90%", :style=>"display:none;border:0px"} diff --git a/views/neighbours.haml b/views/neighbours.haml deleted file mode 100644 index 84d9f72..0000000 --- a/views/neighbours.haml +++ /dev/null @@ -1,102 +0,0 @@ -/ @@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 ; - -:javascript - $(function() { - $( ".results" ).resizable({ - containment: ".content" - }); - }); - -.results{:style=>"display:none"} - - count_m = 0 - / 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| - / 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(){ - $("table##{count_rs}").tablesorter({ - //debug: true, - //widgets: ['zebra'], - headers: {0: {sorter: false}, 3: {sorter: false}}, - sortList: [[2,1]] - }); - }); - / TODO catch table error if tbody is empty - %h2= "Neighbours: " - %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"} - %thead - %tr - %th - Compound - %th - %a{:href=>"#", :title=>"", :id=>"measured_activity"} Measured Activity - .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"} - %dt - Measured Activity - %dd - Experimental result(s) from the training dataset. - %th - %a{:href=>"#", :title=>"", :id=>"similarity"} Similarity - .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"} - %dt - Similarity - %dd - %code lazar - calculates - %em - activity specific - similarities based on the presence of statistically significant fragments. - This procedure will - %ul - %li consider only those parts of a chemical structure that are relevant for a particular endpoint - %li ignore inert parts of the structure - %li lead to different similarities, depending on the toxic endpoint - Similarities of 1 may be encountered even for structurally dissimilar compounds, because inert parts are ignored. - %th - Details - -#%tbody - - count = 0 - - p.compounds.each do |neighbour_compound| - %tr - %td - %img{:src=>"#{neighbour_compound.uri}/image", :alt=>"", :width=>"100px"} - %td{:class => p.data_entries[count][2]} - = p.data_entries[count][2] - %td{:class => p.data_entries[count][2]} - = p.data_entries[count][3].round(3) - %td{:class => p.data_entries[count][2]} - %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 - $(function() { - $("a#link#{count_rs}#{count}").on('click', function(e) { - $('#iframe').bPopup(); - }); - }); - - - count += 1 - -%iframe{:id=>"iframe", :name=>"details", :height=>"80%", :width=>"80%", :style=>"display:none;border:0px"} diff --git a/views/predict.haml b/views/predict.haml index 369f3b8..98b9edb 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -78,9 +78,9 @@ #model %input{:type => "checkbox", :name => "selection[#{model.title}]", :id => "selection[#{model.title}]", :value => true, :disabled => false} %label{:for => "selection[#{model.title}]"} - %b= model.title + = "DSSTox Carcinogenic Potency DBS "+model.title.split(" ").first %a{:href=>"#", :alt=>"#{model.title} validation"} - %i Validation Link + %i ( Validation Link ) %br .close diff --git a/views/prediction.haml b/views/prediction.haml index 20be935..89e66f0 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -27,33 +27,62 @@ }); }); - count=0 - / var for rule to load neighbours page. - - @@neighbours_available = 1 + / var for rule to load neighbors page. + - @@neighbors_available = 1 - @@predictions.each do |pa| / prediction of one model - pa.each do |p| - / p.data_entries > 1 = neighbours available - - $logger.debug "count data_entries: #{p.data_entries.length}" - - p.data_entries.length > 1 ? @@neighbours_available = p.data_entries.length : @@neighbours_available - %td{:class => p.data_entries[0][0]} + / p.data_entries > 1 = neighbors available + - p.data_entries.length > 1 ? @@neighbors_available = p.data_entries.length : @@neighbors_available + / prevent conversion of nil + - c = p.data_entries[0][0] != nil ? p.data_entries[0][0] : '' + / define color by class; number first is not allowed for css + %td{:class => "c"+c} %b{:class => "title"} = @@prediction_models[count].title %br %br - = "Result:\n" + = "Result:" %b= p.data_entries[0][0] != nil ? p.data_entries[0][0] : "No prediction result" - %br - %a{:href=>"#", :title=>"", :id=>"confidence"} Confidence + %a{:href=>"#result", :title=>"", :id=>"result"} + %img{:src=>"/images/info_white.png"} .tooltip{:style=>"font-weight: normal; font-size: 1em; width: 50%; text-align: left;"} %dt - Confidence + Result %dd - Indicates the applicability domain of a model. - Predictions with a high confidence can be expected to be more reliable than predictions with low confidence. - Confidence values may take any value between 0 and 1. - For most models confidence > 0.025 is a sensible (hard) cutoff to distiguish between reliable and unreliable predictions. - = p.data_entries[0][1].round(3) + %code lazar + calculates searches the training dataset for similar compounds (neighbors) + and calculates the prediction from their measured activities. lazar + calculates predictions using + %ul + %li a majority vote (weighted by compound similarity) for + %em classification + ( + %a{:href=>"http://www.in-silico.de/articles/modi020905.pdf"} original publication + ) + %li a local QSAR model based on neighbors for + %em regression + ( + %a{:href=>"http://www.in-silico.de/articles/mh_tf.pdf"} original publication + ) + Please keep in mind that predictions are based on the measured activities of neighbors. %br + .confidence + %b Confidence: + = p.data_entries[0][1] != nil ? p.data_entries[0][1].round(3) : "No prediction result" + %a{:href=>"#confidence", :title=>"", :id=>"confidence"} + %img{:src=>"/images/info_white.png"} + .tooltip{:style=>"font-weight: normal; font-size: 1em; width: 50%; text-align: left;"} + %dt + Confidence + %dd + Indicates the applicability domain of a model. + Predictions with a high confidence can be expected to be more reliable than predictions + with low confidence. + Confidence values may take any value between 0 and 1. + For most models confidence > 0.025 is a sensible (hard) cutoff to distiguish between + reliable and unreliable predictions. + %br %a{:href=> "#tabs", :id=>"link#{count}"} %img{:src=>"/images/arrow_down_float.png", :alt=>"arrow"} :javascript @@ -64,9 +93,9 @@ }); - count+=1 - - if @@neighbours_available > 1 - = haml :neighbours, :layout => false + - if @@neighbors_available > 1 + = haml :neighbors, :layout => false - else %h2 - no neighbours available -%iframe{:id=>"iframe_overview", :name=>"details_overview", :height=>"80%", :width=>"80%", :style=>"display:none;border:0px"} + no neighbors available +%iframe{:id=>"iframe_overview", :name=>"details_overview", :height=>"90%", :width=>"90%", :style=>"display:none;border:0px"} -- cgit v1.2.3