diff options
author | gebele <gebele@in-silico.ch> | 2015-06-18 12:07:25 +0200 |
---|---|---|
committer | gebele <gebele@in-silico.ch> | 2015-06-18 12:07:25 +0200 |
commit | d356e84babc0b753ba29f27f589b5a85bbd2e982 (patch) | |
tree | 878839cb4019518424e0c0a2dee17471802633e7 /views | |
parent | 1bcf3e70deeac061db0450587668af442cbc6bc5 (diff) |
general css update with bootstrap
Diffstat (limited to 'views')
-rw-r--r-- | views/details.haml | 55 | ||||
-rw-r--r-- | views/error.haml | 10 | ||||
-rw-r--r-- | views/info.haml | 2 | ||||
-rw-r--r-- | views/layout.haml | 78 | ||||
-rw-r--r-- | views/neighbors.haml | 115 | ||||
-rw-r--r-- | views/predict.haml | 188 | ||||
-rw-r--r-- | views/prediction.haml | 121 | ||||
-rw-r--r-- | views/significant_fragments.haml | 123 | ||||
-rw-r--r-- | views/style.scss | 13 |
9 files changed, 300 insertions, 405 deletions
diff --git a/views/details.haml b/views/details.haml index 02d7b66..00d8f61 100644 --- a/views/details.haml +++ b/views/details.haml @@ -1,28 +1,31 @@ -%link{ :href=>"/style.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"} +:javascript + $(document).ready(function(){ + $("#details").on('hidden.bs.modal', function() { + $(this).removeData('bs.modal'); + }); + }); -.content{:style=>"margin-top:0;"} - .details{:style=>"padding:0.7em;padding-bottom:5em;"} - %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"} - X - - %h2{:style=>"margin-left:8px;"} - Names and synonyms: - %img{:src=>"#{@compound.uri}/image", :alt=>"Compound image not available", :width=>"300px", :heigth=>"300px"} - %p - %b="SMILES:" - %p= @smiles - %br - %b="InChI:" - %p= @inchi - %br - %b="Names:" - %p{:style=>"padding-left:0.5em;"} - - if @names !~ /^no names/i - = @names.join("; ") - - else - = @names - %p{:style=>"padding-left:0.5em;"} - / pubchem link - %a{:href=>"http://aop.in-silico.ch/", :title=>"Link opens in new window.", :alt=>"pubchem read across", :target=>"_blank"} PubChem read across - %i (experimental) +%div.modal-body{:style=>"padding:10px;"} + %button.close{ :type=>" button", data: { dismiss:"modal"}} × + %h2 + Names and synonyms: + %img{:src=>"#{@compound.uri}/image", :alt=>"Compound image not available", :width=>"300px", :heigth=>"300px", :style=>"float:left;"} + %p + %b="SMILES:" + %p= @smiles + %br + %b="InChI:" + %p= @inchi + %br + %b="Names:" + %p{:style=>"padding-left:0.5em;"} + - if @names !~ /^no names/i + = @names.join("; ") + - else + = @names + %hr + %p{:style=>"padding-left:0.5em;"} + / pubchem link + %a.btn.btn-primary{:href=>"http://aop.in-silico.ch/", :title=>"Link opens in new window.", :alt=>"pubchem read across", :target=>"_blank"} PubChem read across + %i (experimental) diff --git a/views/error.haml b/views/error.haml index e9a892e..bad965d 100644 --- a/views/error.haml +++ b/views/error.haml @@ -1,8 +1,6 @@ -.error - .back - %h1 - %img{:src=>"/images/arrow_left_float.png", :alt=>"<"} - %a{:href => to('/predict')} New Prediction - .message +%div.well + %a.btn.btn-primary{:href => to('/predict')} New Prediction + %hr + %span.btn.btn-danger.btn-block.disabled = @error_report diff --git a/views/info.haml b/views/info.haml index 92022ea..34ded87 100644 --- a/views/info.haml +++ b/views/info.haml @@ -1,2 +1,2 @@ -.info +%div.info currently no models available diff --git a/views/layout.haml b/views/layout.haml index 05f4a70..8703042 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -1,70 +1,54 @@ !!! %html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"} %head - %meta{'http-equiv' => 'Content-Type', :content => 'text/html; charset=UTF-8'} + %meta{'charset'=>"utf-8"} + %meta{'http-equiv'=>"X-UA-Compatible", :content=>"IE=edge"} + %meta{'name'=>"viewport", :content=>"width=device-width, initial-scale=1"} %title Lazar Toxicity Predictions %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'} - %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"} + %link{:rel=>'stylesheet', :href=>"#{'/css/bootstrap.min.css'}"} + %link{:rel=>'stylesheet', :href=>"#{'/css/theme.default.min.css'}"} + %link{:rel=>'stylesheet', :href=>"#{'/css/theme.bootstrap.min.css'}"} %link{ :href=>"/stylesheets/jquery-ui.css", :rel=>"stylesheet"} %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet"} - %script{:src=>"/javascripts/jquery-1.8.3.min.js", :type=>"text/javascript"} - %script{ :src=>"/javascripts/jquery-ui-1.10.3.custom.min.js", :type=>"text/javascript"} - %script{:src=>"/javascripts/jquery.tools.min.js", :type=>"text/javascript"} - %script{:src=>"/javascripts/jquery.tablesorter.min.js", :type=>"text/javascript"} - %script{:src=>"/javascripts/jquery.bpopup.min.js", :type=>"text/javascript"} - %script{ :src=>"/javascripts/lazar-gui.js", :type=>"text/javascript"} - %script{:src=>"/jsme/jsme.nocache.js", :type=>"text/javascript"} - - %body + %script{:src=>"/javascripts/jquery-1.11.2.min.js"} + %script{:src=>"/javascripts/bootstrap.min.js"} + %script{:src=>"/javascripts/jquery-ui-1.10.3.custom.min.js"} + %script{:src=>"/javascripts/jquery.tablesorter.min.js"} + %script{:src=>"/javascripts/jquery.tablesorter.widgets.js"} + %script{ :src=>"/javascripts/lazar-gui.js"} + %body{:style=>"background-color:#E7E7E7"} %noscript %div{ :style=>"width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"} - Your web browser must have JavaScript enabled in order for this application to display correctly. - .logo - %a{:href=> to("/predict")} - %img{:src=>"/images/ist_logo.png", :alt=>"logo"} - %h1 Lazar Toxicity Predictions - %hr{:style=>"color:black;"} + Your web browser must have JavaScript enabled in order for this application to display correctly. + %header.page-header + %div.row + %div.col-md-2 + %a{:href=> to("/predict")} + %img.media-object{:src=>"/images/ist_logo.png", :alt=>"logo", :style=>"margin-left:3em;margin-right:1em;"} + %div.col-md-8 + %h1.media-heading Lazar Toxicity Predictions - .content + %div.container :javascript $(document).ready(function(){ - // hide #back-top first $("#back-top").hide(); - // fade in #back-top - $('a#confidence').tooltip({ - predelay: 300, - position: 'bottom center', - offset: [-100, 0], - }); - $('a#result').tooltip({ - predelay: 300, - position: 'bottom center', - offset: [-100, 0], - }); - $('a#similarity').tooltip({ - predelay: 300, - position: 'bottom center', - offset: [-600, 0], - }); - $('a#measured_activity').tooltip({ - predelay: 300, - position: 'bottom center', - offset: [-500, 0], + $(".blind").error(function(){ + $(this).attr('src', '/images/blind.png'); }); }); = yield - .footer{:style=>"margin-bottom:2em;"} - © - %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2004 - #{Time.now.year.to_s} + %footer.footer + %div.container + %p.text-muted + © + %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2004 - #{Time.now.year.to_s} - #back-top{:style => "z-index:100;position:fixed;bottom:0%;width:98%;"} - %hr{:style => "margin-bottom:0;"} + #back-top{:style => "z-index:100;position:fixed;bottom:1%;right:1%;"} %a{:href => "", :style=>"text:decoration:none;color:#ccc;"} - %img{:src => "/rect.png", :alt => "top", :style=>"width:100%;height:50px"} - %div{:id=>"backtop", :style => "margin-top:-50px;text-align:right;cursor:default;"} - TOP + %span.glyphicon.glyphicon-circle-arrow-up{:style => "font-size:3em;color:black;"} :javascript $("#back-top").hide(); $(function () { diff --git a/views/neighbors.haml b/views/neighbors.haml index 45a3642..db32c88 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -1,15 +1,22 @@ -/ @@prediction_models and @@predictions defined in POST request '/predict' +:javascript + $(function() { + $("#deatils.modal").on('show.bs.modal', function() { + alert("alert"); + //$(this).removeData('bs.modal'); + }); + }); + / unpacks multi prediction array ; / prepare it for neighbors ; / align single prediction to endpoint ; / display preordered in table view ; -.results{:style=>"display:none"} +%div.results{:style=>"display:none"} - count_m = 0 / tabs div ; #tabs %ul - / each endpoint becomes a tab head ; + / each model a tab head ; - @prediction_models.each do |m| - count_m += 1 - m_title = m.title.split("_").last(2)[0] @@ -36,8 +43,16 @@ :javascript $(document).ready(function(){ $("table##{count_rs}").tablesorter({ - //debug: true, - //widgets: ['zebra'], + debug: false, + table: 'ui-widget ui-widget-content ui-corner-all', + header: 'ui-widget-header ui-corner-all ui-state-default', + theme: "bootstrap", + widthFixed: true, + hover: 'ui-state-hover', + even: 'ui-widget-content', + odd: 'ui-state-default', + headerTemplate: '{content} {icon}', + widgets: ['zebra', 'columns', 'uitheme'], headers: {0: {sorter: false}, 3: {sorter: false}}, sortList: [[2,1]] }); @@ -45,46 +60,29 @@ - $logger.debug "neighbors compounds:\t#{p.data_entries[0]}\n" - if p.data_entries[0][2] != nil && p.data_entries[0].size != 3 %h2= "Neighbors: " - %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"} + + %div.table-responsive + %table.tablesorter{:id=>"#{count_rs}", :style=>"border-style: solid;"} %thead %tr - %th + %th{:style =>"vertical-align:middle;"} Compound - %th - %b Measured Activity - / title must be empty for tooltip - %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 - / title must be empty for tooltip - %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{:style=>"font-size:x-large;"} 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 - Supporting information - -#%tbody + %th{:style =>"vertical-align:middle;"} + Measured Activity + -#%a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", data: {toggle:"popover", placement:"auto", trigger:"focus", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"} + %th{:style =>"vertical-align:middle;"} + Similarity + -#%a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", data: {toggle:"popover", placement:"auto", trigger:"focus", html:"true", content:"LAZAR calculates 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><li>ignore inert parts of the structure</li><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.</li></ul>"}, :style=>"z-index:auto+10;"} + %th{:style =>"vertical-align:middle;"} + Supporting Information + %info + %tr + %td + %td{:style=>"font-size:x-small;padding:0px;"} + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", data: {toggle:"popover", placement:"auto", trigger:"focus", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"} + %td{:style=>"font-size:x-small;padding:0px;"} + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", data: {toggle:"popover", placement:"auto", trigger:"focus", html:"true", content:"LAZAR calculates 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><li>ignore inert parts of the structure</li><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.</li></ul>"}, :style=>"z-index:auto+10;"} + %tbody - count = 0 - p.compounds.each do |neighbor_compound| / prevent conversion of nil @@ -96,38 +94,29 @@ /- c = Array.new - c = p.data_entries[count][2].to_f.round(3) %tr - %td.compound - %a{:href => to("/prediction/#{CGI.escape(neighbor_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"} - Names and synonymes > - %img{:src=>"#{neighbor_compound.uri}/image", :alt=>"Compound image not available", :title=>"#{neighbor_compound.smiles}", :width=>"150px"} - %td + %td{:style =>"vertical-align:middle;padding-left:1em;"} + %a.btn.btn-link{:href => to("/prediction/#{CGI.escape(neighbor_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", data: { toggle: "modal", target:"#details"}} + %img.blind{:src=>"#{neighbor_compound.uri}/image", :alt=>"no image", :onError=>"this.onerror=null;", :title=>"#{neighbor_compound.smiles}", :width=>"150px"} + %td{:style =>"vertical-align:middle;padding-left:1em;"} - if c.class == String = c - else = c - %td + %td{:style =>"vertical-align:middle;padding-left:1em;"} = p.data_entries[count][3] != nil ? p.data_entries[count][3].round(3) : "Not enough similar compounds in training dataset." - %td + %td{:style =>"vertical-align:middle;padding-left:1em;"} - if @type =~ /classification/i - if p.data_entries[count][3] != nil - %a{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@type}/#{CGI.escape(neighbor_compound.uri)}/significant_fragments"), :id=>"link#{count_rs}#{count}sf", :target=>"details"} Significant fragments > + %a.btn.btn-primary{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@type}/#{CGI.escape(neighbor_compound.uri)}/significant_fragments"), :id=>"link#{count_rs}#{count}sf", data: { toggle: "modal", target:"#details"}} Significant fragments - if @type =~ /regression/i - if p.data_entries[count][3] != nil - %a{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@type}/#{CGI.escape(neighbor_compound.uri)}/significant_fragments"), :id=>"link#{count_rs}#{count}sf", :target=>"details"} Descriptors > - :javascript - $(function() { - $("a#link#{count_rs}#{count}").on('click', function(e) { - $('#iframe_details').bPopup(); - }); - }); - $(function() { - $("a#link#{count_rs}#{count}sf").on('click', function(e) { - $('#iframe_details').bPopup(); - }); - }); + %a.btn.btn-primary{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@type}/#{CGI.escape(neighbor_compound.uri)}/significant_fragments"), :id=>"link#{count_rs}#{count}sf", data: { toggle: "modal", target:"#details"}} Descriptors - count += 1 -#- else %h3 Not enough similar compounds in training dataset -%iframe{:id=>"iframe_details", :name=>"details", :height=>"95%", :width=>"95%", :style=>"display:none;border:0px"} +%div.modal.fade{:id=>"details", :role=>"dialog"} + %div.modal-dialog.modal-lg + %div.modal-content + diff --git a/views/predict.haml b/views/predict.haml index 1adc9da..0ff25e8 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -1,3 +1,4 @@ +%script{:src=>"/jsme/jsme.nocache.js"} :javascript function callTask(url) { var result=""; @@ -12,35 +13,27 @@ }); return result; }; - function progressBarWidth(p,w){ - percent = p * w / 100; - return percent ; - }; // form function function progress($element, url) { + $element.width("2%"); $element.show(); - var fullWidth = $element.width(); var timer = setInterval(function(){ var percent = callTask(url); if(percent == 100.0){ - var next = progressBarWidth(percent,fullWidth); + var next = percent; clearInterval(timer); - //$element.delay(3000).hide(); - //percent = 0; } - //else if($element.find('#bar').is(":visible") & $element.find('#bar').width() < 400){ else { - var next = progressBarWidth(percent,fullWidth); + var next = percent; } - $element.find('#bar').animate({ width:next }, 3000); + $element.width(next+"%"); }, 3000); }; function checksmiles () { if (document.form.identifier.value == "") { alert("Please draw or insert a chemical structure."); - //$("img.circle").hide(); document.form.identifier.focus(); - $('#progressBar').hide(); + $('.progress-bar').hide(); return false; }; return true; @@ -54,8 +47,7 @@ }); if (checked == false){ alert("Please select an endpoint."); - //$("img.circle").hide(); - $('#progressBar').hide(); + $('.progress-bar').hide(); return false; }; return true; @@ -72,9 +64,6 @@ document.form.identifier.value = document.JME.smiles() ; }; }; - function showcircle(){ - $("img.circle").show(); - }; // init task for progress - task_uri = OpenTox::Task.task_uri @@ -82,9 +71,8 @@ // whole site content needs to be in one form. Input and checkboxes are proofed by js functions. %form{:name => "form", :action => to('/predict'), :method => "post", :enctype => "multipart/form-data", :onsubmit => "return !!(checksmiles() & checkboxes())" } - %fieldset#top - %a{:href => "#", :id => "linkInsert"} - %h1 1. Draw a chemical structure + %fieldset#top.well + %h2 1. Draw a chemical structure :javascript $("a#linkInsert").click(function () { $("#insert").toggle(); @@ -99,14 +87,12 @@ or enter the %a{:href => "http://en.wikipedia.org/wiki/Simplified_molecular_input_line_entry_specification", :rel => "external"} SMILES string: + %br %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'} - .arrow - %img{:src=>"/images/arrow_down_float.png", :alt=>"v", :class=> "arrow"} - %fieldset#middle - %a{:href => "#models", :id => "linkModels"} - %h1 2. Select one or more endpoints + %fieldset#middle.well + %h2 2. Select one or more endpoints :javascript $("a#linkModels").click(function () { @@ -117,76 +103,84 @@ #models - @detail_count = 0 - @endpoints.each do |endpoint| - %b= endpoint[0].split("#").last.gsub("_", " ").gsub(/\"|\]/, "")+" :" - - @models.each do |model| - - if endpoint == model.type.select{|e| e =~ /Endpoint/} - - model_title = model.title.split("_").last(2)[0] - - model_t = model.title.gsub("_", " ") - - @detail_count +=1 - %div{:id => model_title} - %input{:type => "checkbox", :name => "selection[#{model.uri}]", :id => "selection[#{model_title}]", :value => true, :disabled => false} - %label{:for => "selection[#{model_title}]"} - = model_t - %a{:href=>"#details", :id => "linkDetails#{model_title}", :title=>"#{model_title} details", :style=>"font-size:small;"} - [Details] - - :javascript - $("a#linkDetails#{model_title}").click(function () { - $("#details_#{@detail_count}").toggle(); - //document.location = document.location + "#" + "details"; - }); - #details{:id => "#{@detail_count}", :style => "display:none;background-color:white;padding:1em;"} - %h3 Model Details: - %p{:style=>"display:inline;"} Algorithm: - %code{:style=>"font-size:x-large;"} lazar - - model.type.to_s =~ /regression/i ? type = "regression" : type = "classification" - - @model_type = type - %p= "Type: "+type - - training_dataset = OpenTox::Dataset.new "#{model[RDF::OT.trainingDataset]}" - - training_compounds = training_dataset.compounds.size.to_s - %p= "Training compounds: "+training_compounds - %p{:style=>"display:inline;"} Descriptors: - - if type == "regression" - %a{:href=>"https://services.in-silico.ch/algorithm/descriptor/physchem/list", :title=>"link opens in new window.", :target=>"_blank"} Physico-chemical (PC) properties - - else - %a{:href=>"http://www.maunz.de/libfminer2-bbrc-doc/", :title=>"link opens in new window.", :target=>"_blank"} Fminer backbone refinement classes - %br - %br - %p{:style=>"display:inline"}= "Model: " - %a{:href=>"#{to("/predict/#{CGI.escape(model.uri)}")}", :title=>"download"} rdf - %br - %br - %p{:style=>"display:inline"}= "Feature Dataset: " - %a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}", :title=>"download"} rdf - -#%a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}/sdf", :title=>"download"} sdf - %br - %br - %p{:style=>"display:inline"}= "Training Dataset: " - %a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}")}", :title=>"link opens in new window."} rdf - -#%a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}/sdf")}", :title=>"link opens in new window."} sdf - %br - - unless model.metadata[RDF::OT.crossValidation].nil? - %h3 Validation: - %a{:href => "#{model.metadata[RDF::OT.crossValidation][0]}", :title=>"link opens in new window.", :target=>"_blank"} - Detailed report link - %br - - @cv = OpenTox::Validation.find "#{model.metadata[RDF::OT.crossValidation][0]+"/statistics"}" - = haml :validation, :layout => false, :validation => @cv, :model_type => @model_type + %div + %b= endpoint[0].split("#").last.gsub("_", " ").gsub(/\"|\]/, "")+" :" + - @models.each do |model| + - if endpoint == model.type.select{|e| e =~ /Endpoint/} + - model_title = model.title.split("_").last(2)[0] + - model_t = model.title.gsub("_", " ") + - @detail_count +=1 + %div{:id => model_title} + %input{:type => "checkbox", :name => "selection[#{model.uri}]", :id => "selection[#{model_title}]", :value => true, :disabled => false} + %label{:for => "selection[#{model_title}]"} + = model_t + %a.btn.btn-default.btn-xs{:href=>"#details", :id => "linkDetails#{model_title}", :title=>"#{model_title} details", :style=>"font-size:small;"} + Details | Validation + + :javascript + $("a#linkDetails#{model_title}").click(function () { + $("#details_#{@detail_count}").toggle(); + //document.location = document.location + "#" + "details"; + }); + #details{:id => "#{@detail_count}", :style => "display:none;"} + %div.panel{:style=>"padding:0.5em;"} + %div.row + %div.col-md-6 + %h3 Model Details: + %p + Algorithm: LAZAR + - model.type.to_s =~ /regression/i ? type = "regression" : type = "classification" + - @model_type = type + %p + = "Type: "+type + - training_dataset = OpenTox::Dataset.new "#{model[RDF::OT.trainingDataset]}" + - training_compounds = training_dataset.compounds.size.to_s + %p + Training compounds: + = training_compounds + %p + Descriptors: + - if type == "regression" + %a{:href=>"https://services.in-silico.ch/algorithm/descriptor/physchem/list", :title=>"link opens in new window.", :target=>"_blank"} Physico-chemical (PC) properties + - else + %a{:href=>"http://www.maunz.de/libfminer2-bbrc-doc/", :title=>"link opens in new window.", :target=>"_blank"} Fminer backbone refinement classes + %p + Model: + %a.btn{:href=>"#{to("/predict/#{CGI.escape(model.uri)}")}", :title=>"download"} + rdf + %span.glyphicon.glyphicon-download-alt + %p + Feature Dataset: + %a.btn{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}", :title=>"download"} + rdf + %span.glyphicon.glyphicon-download-alt + -#%a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}/sdf", :title=>"download"} sdf + %p + Training Dataset: + %a.btn{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}")}", :title=>"link opens in new window."} + rdf + %span.glyphicon.glyphicon-download-alt + -#%a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}/sdf")}", :title=>"link opens in new window."} sdf + - unless model.metadata[RDF::OT.crossValidation].nil? + %div.col-md-6 + %h3 Validation: + %a.btn.btn-info.btn-xs{:href => "#{model.metadata[RDF::OT.crossValidation][0]}", :title=>"link opens in new window.", :target=>"_blank"} + Detailed report link + %p + - @cv = OpenTox::Validation.find "#{model.metadata[RDF::OT.crossValidation][0]+"/statistics"}" + = haml :validation, :layout => false, :validation => @cv, :model_type => @model_type + %p - .arrow - %img{:src=>"/images/arrow_down_float.png", :alt=>"v", :class=> "arrow"} - %fieldset#bottom - %table{:style=>"cellspacing:10;cellpadding:20"} - %tr - %td{:style=>"width:10em;align:center;valign:middle;"} - %h1 - 3. Predict - %td{:style=>"width:10%;align:center;valign:middle;"} - %input{ :type => "submit", :id => "submit", :value=>">>", :onclick => "(progress($('#progressBar'),'#{task_uri}') & getsmiles() & checkboxes())", :style=>"cursor: pointer;display:inline;width:50px;height:50px;border-radius: 50%;color:#2b2b2b;text-align:center;text-decoration:none;background:#f76700;box-shadow: 0 0 5px white;font-weight:bold;"} - %input{:type => "hidden", :name => "task_uri", :value => "#{task_uri}"} - - %td{:style=>"align:center;valign:middle;"} - -#%img{:src=>"/images/wait30trans.gif", :class=>"circle", :style=>"display:none;background-color:white;margin-left:10%;border:solid 1px;vertical-align:middle;"} - #progressBar{:style=>"width:400px;height:22px;border:1px solid #2b2b2b;background-color:gray;display:none;"} - #bar{:style =>"width:0;height:100%;color:#fff;text-align:right;line-height:22px;background-color:#0099ff;"} + %fieldset#bottom.well + %div.row + %div.col-md-2 + %h2 + 3. Predict + %div.col-md-10 + %input.btn.btn-warning.h2{ :type => "submit", :id => "submit", :value=>">>", :onclick => "(progress($('.progress-bar'),'#{task_uri}') & getsmiles() & checkboxes())"} + %input{:type => "hidden", :name => "task_uri", :value => "#{task_uri}"} + %div.row + %div.col-md-12 + %div.progress + %div.progress-bar.progress-bar-striped.active{:role=>"progressbar", aria: { valuemin: 0, valuemax: 100}, :style=>"width:0%;"} diff --git a/views/prediction.haml b/views/prediction.haml index 764adb1..8d9e235 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -1,37 +1,25 @@ :javascript - // increase body width if more than 2 models selected - window.onload = function(){ - var plusSize = ("#{@predictions.size}" > 2 ) ? ("#{@predictions.size}" * 100) : 0; - var width = $(window).width() + plusSize; - $("body").width(width); - }; -.predictions - .back - %h1 - %img{:src=>"/images/arrow_left_float.png", :alt=>"<"} - %a{:href => to('/predict')} New Prediction + $(document).ready(function(){ + $('[data-toggle="popover"]').popover(); + $(".modal").on('hidden.bs.modal', function() { + $(this).removeData('bs.modal'); + }); + }); +%div.well + %a.btn.btn-primary{:href => to('/predict')} New Prediction / displays all prediction result in first table - .overview - %table{:width=>"100%", :cellspacing=>"1", :id=>"overview"} + %div.table-responsive + %table.table.table-bordered{:id=>"overview"} %thead %tr - %caption - %h2 Prediction Results: + %h2 Prediction Results: %tbody %tr %td{:id=>"compound", :style=>"vertical-align:top;"} - %a{:href => to("/prediction/#{CGI.escape(@compound.uri)}/details"), :id=>"linkCompound", :target=>"details_overview"} - Names and synonyms > - %img{:src=>"#{@compound.uri}/image", :alt=>"Compound image not available", :title=>"#{@compound.smiles}", :width=>"150", :height=>"150"} - %p - :javascript - $(function() { - $("a#linkCompound").on('click', function(e) { - $('#iframe_overview').bPopup(); - }); - }); + %a.btn.btn-link{:href => to("/prediction/#{CGI.escape(@compound.uri)}/details"), :id=>"linkCompound", data: { toggle: "modal", target:"#detailsTop"}} + %img{:src=>"#{@compound.uri}/image", :alt=>"no image", :title=>"#{@compound.smiles}", :width=>"150", :height=>"150"} - count=0 - @predictions.each do |pa| / unpack to single array/prediction @@ -70,31 +58,7 @@ - result = (c != '' ? c.round(3) : "No prediction result.") = result - confidence = (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0) ? p.data_entries[0][1].round(2) : "--" - - / title must be empty for tooltip - %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 - Result - %dd - %code{:style=>"font-size:x-large;"} lazar - calculates searches the training dataset for similar compounds (neighbors) - and calculates the prediction from their measured activities. - %code{:style=>"font-size:x-large;"} lazar - calculates predictions using - %ul - %li a majority vote (weighted by compound similarity) for - %em classification - ( - %a{:href=>"http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract", :target=>"_blank"} original publication - ) - %li a local QSAR model based on neighbors for - %em regression - ( - %a{:href=>"http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract", :target=>"_blank"} original publication - ) - Please keep in mind that predictions are based on the measured activities of neighbors. + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Result", data: {toggle:"popover", placement:"left", trigger:"focus", html:"true", content:"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<br /><b>classification</b> (<a href='http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract', target='_blank'>original publication</a>) </li><li>a local QSAR model based on neighbors for<br /><b>regression</b> (<a href='http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract', target='_blank'</h>original publication</a>) </li></ul>Please keep in mind that predictions are based on the measured activities of neighbors."}} - @cv = OpenTox::Validation.find @prediction_models[count].metadata[RDF::OT.crossValidation][0]+"/statistics" #unless @prediction_models[count].title.include?("Mutagenicity") - unless @model_type[count] == "regression" %br @@ -104,54 +68,27 @@ - prob = @cv.probabilities( confidence, result )[:probs][result]*100 = "#{prob.round(1)} %" %p - .confidence - %b Confidence: - = confidence - / title must be empty for tooltip - %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 distinguish between - reliable and unreliable predictions. - - + %b Confidence: + = confidence + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Confidence", data: {toggle:"popover", placement:"left", trigger:"focus", html:"true", content:"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 distinguish between reliable and unreliable predictions."}} %p /TODO add tooltip for significant ftagments and descriptors - if @model_type[count] =~ /classification/i && (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0) / Significant fragments: - %a{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[count]}/#{CGI.escape(@compound.uri)}/fingerprints"), :id=>"linkPredictionSf", :title=>"", :target=>"details_overview"}Significant fragments > - :javascript - $(function() { - $("a#linkPredictionSf").on('click', function(e) { - $('#iframe_overview').bPopup(); - }); - }); + %a.btn.btn-primary.btn-sm{:id=>"linkSigFragments", :href => to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[count]}/#{CGI.escape(@compound.uri)}/fingerprints"), data: { toggle: "modal", target:"#detailsTop"}} Significant fragments - if @model_type[count] =~ /regression/i && (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0) / Descriptors - %a{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[count]}/#{CGI.escape(@compound.uri)}/fingerprints"), :id=>"linkPredictionSf", :target=>"details_overview"} Descriptors > - :javascript - $(function() { - $("a#linkPredictionSf").on('click', function(e) { - $('#iframe_overview').bPopup(); - }); - }); + %a.btn.btn-primary.btn-sm{:id=>"linkDescriptors", :href => to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[count]}/#{CGI.escape(@compound.uri)}/fingerprints"), data: { toggle: "modal", target:"#detailsTop"}} Descriptors %p - if c != '' - %a{:href=> "#tabs", :id=>"link#{count}"} - %b Neighbors > - :javascript - $("a#link#{count}").click(function () { - $(".results").show(); - document.getElementById('tabs').focus(); - $("#tabs").tabs({ active: "#{count}" }); - }); + %a.btn.btn-warning.btn-sm{:href=> "#tabs", :id=>"link#{count}"} + Neighbors + :javascript + $("a#link#{count}").click(function () { + $(".results").show(); + document.getElementById('tabs').focus(); + $("#tabs").tabs({ active: "#{count}" }); + }); %p - count+=1 - else # database hit @@ -166,4 +103,6 @@ / always show the neighbors table, message is given there = haml :neighbors, :layout => false, :model_type => @model_type -%iframe{:id=>"iframe_overview", :name=>"details_overview", :height=>"95%", :width=>"95%", :style=>"display:none;border:0px"} +%div.modal.fade{:id=>"detailsTop", :role=>"dialog"} + %div.modal-dialog.modal-lg + %div.modal-content diff --git a/views/significant_fragments.haml b/views/significant_fragments.haml index b039804..e441a9a 100644 --- a/views/significant_fragments.haml +++ b/views/significant_fragments.haml @@ -1,71 +1,66 @@ -%link{ :href=>"/style.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"} -.content{:style=>"margin-top:0;"} +%div.modal-body{:style=>"padding:10px;"} + %button.close{ :type=>" button", data: { dismiss:"modal"}} × - if @type =~ /classification/i - .significant_fragments{:style=>"padding:0.7em;padding-bottom:10em;"} - %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"} - X - %h2{:style=>"margin-left:8px;"} - Significant fragments: + %div.row + %div.col-md-4 + %h2{:style=>"margin-left:8px;"} + Significant fragments: + %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"} + - if !@significant_fragments.empty? + %div.col-md-8 + %table{:id => "sf"} + %tr + / @value_map => hash; interpret the effect + %th{:style=>"border:2px solid #E6E6E6;"} + Predominantly in compounds with activity "inactive" + %th{:style=>"border:2px solid #E6E6E6;"} + p value + - @significant_fragments.each do |fragments| + / fragments == [effect, smarts, pValue] + / fragments[0] = effect + /- $logger.debug "effect:\t#{fragments[0]}\n" + - if fragments[0] == @value_map.index("inactive") + %tr + %td + / fragments[1] = smarts + = fragments[1] + -#%img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"} + %td + /fragments[2] = pValue + = fragments[2] + %tr + %th{:style=>"border:2px solid #E6E6E6;"} + Predominantly in compounds with activity "active" + %th{:style=>"border:2px solid #E6E6E6;"} + p value + - @significant_fragments.each do |fragments| + / fragments == [effect, smarts, pValue] + - if fragments[0] == @value_map.index("active") + %tr + %td + %img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"} + = fragments[1] + %td + = fragments[2] - %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"} + - if @type =~ /regression/i + %div.row + %div.col-md-4 + %h2 + Descriptors: + %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"} - if !@significant_fragments.empty? - %table{:id => "sf1"} - %tr - / @value_map => hash; interpret the effect - %th{:style=>"border:2px solid #E6E6E6;"} - Predominantly in compounds with activity "inactive" - %th{:style=>"border:2px solid #E6E6E6;"} - p value - - @significant_fragments.each do |fragments| - / fragments == [effect, smarts, pValue] - / fragments[0] = effect - /- $logger.debug "effect:\t#{fragments[0]}\n" - - if fragments[0] == @value_map.index("inactive") - %tr - %td - / fragments[1] = smarts - = fragments[1] - %img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"} - %td - /fragments[2] = pValue - = fragments[2] - %tr - %td - %br - %tr - %th{:style=>"border:2px solid #E6E6E6;"} - Predominantly in compounds with activity "active" - %th{:style=>"border:2px solid #E6E6E6;"} - p value - - @significant_fragments.each do |fragments| - / fragments == [effect, smarts, pValue] - - if fragments[0] == @value_map.index("active") + %div.col-md-8 + %table{:id =>"de"} + %tr + %th{:style=>"border:2px solid #E6E6E6;"} + Descriptor + %th{:style=>"border:2px solid #E6E6E6;"} + value + - @significant_fragments.each do |fragments| %tr %td - %img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"} - = fragments[1] + = fragments[0] %td - = fragments[2] - - - if @type =~ /regression/i - .descriptors{:style=>"padding:0.5em;height:100%"} - %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"} - X - %h2{:style=>"margin:0px;margin-left:8px;"} - Descriptors: - - %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"} - - if !@significant_fragments.empty? - %table{:id => "sf2"} - %tr - %th{:style=>"border:2px solid #E6E6E6;"} - Descriptor - %th{:style=>"border:2px solid #E6E6E6;"} - value - - @significant_fragments.each do |fragments| - %tr - %td - = fragments[0] - %td - = fragments[1][0].round(3) + = fragments[1][0].round(3) diff --git a/views/style.scss b/views/style.scss index 4021d1f..0802545 100644 --- a/views/style.scss +++ b/views/style.scss @@ -52,7 +52,6 @@ body { .content .back { display: inline; } .content fieldset#top { - box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset); border: 0; padding: 10px; background-color: $ist-color; } @@ -65,7 +64,6 @@ body { .content fieldset#middle { border: 0; padding: 10px; - box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset); background-color: $ist-color; } .content fieldset#middle a#linkModels { display: block; @@ -78,7 +76,6 @@ body { font-weight: normal; } .content fieldset#bottom { border: 0; - box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset); background-color: $ist-color; padding: 10px; margin-bottom: 5em; } @@ -86,12 +83,9 @@ body { margin-left: 1em; } .content .predictions { background-color: $ist-color; - box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset); padding: 10px; text-align: justify; } .content .overview { - background-image: url("/images/gray_jean.png"); - box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset); padding: 12px; margin-top: 1em; margin-bottom: 1em; @@ -176,8 +170,6 @@ body { padding: 0.2em; } .results { - box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset); - background-image: url("/images/gray_jean.png"); overflow-x: auto; overflow-y: hidden; margin-top: 2em; @@ -200,11 +192,11 @@ body { .results .tablesorter thead tr th.headerSortDown { background-image: url("/images/desc.gif"); background-color: $ist-color; } - .results .tablesorter thead tr th.headerSortUp { + table.tablesorter .tablesorter-default thead tr .tablesorter-headerRow th .tablesorter-header .tablesorter-headerAsc { background-image: url("/images/asc.gif"); background-color: $ist-color; } .results .tablesorter tbody tr td { - box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset); + border-spacing: 1px; padding-left: 1em; } .results .tablesorter tbody .compound { width: 250px; @@ -235,3 +227,4 @@ input#predict { color: black; } .footer a:hover { color: $orange; } + |