From 1a685503c053931513172969399e0e1df4d4d52d Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 6 Oct 2014 10:57:21 +0200 Subject: update jsme_version/stylesheet --- views/details.haml | 12 ++-- views/layout.haml | 50 +++++++++------- views/neighbors.haml | 6 +- views/predict.haml | 52 +++++++++++----- views/prediction.haml | 8 +-- views/significant_fragments.haml | 124 ++++++++++++++++++++------------------- 6 files changed, 140 insertions(+), 112 deletions(-) (limited to 'views') diff --git a/views/details.haml b/views/details.haml index b478f39..154d631 100644 --- a/views/details.haml +++ b/views/details.haml @@ -1,11 +1,11 @@ %link{ :href=>"/stylesheets/screen.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"} -.content - %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"} - X - - .details{:style=>"padding:0.5em;min-height:400px;"} - %h2{:style=>"margin:0px;margin-left:8px;"} +.content{:style=>"margin-top:0;"} + .details{:style=>"padding:0.5em;height:100%;"} + %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 diff --git a/views/layout.haml b/views/layout.haml index 5b59d4f..6659547 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -23,8 +23,7 @@ %a{:href=> to("/predict")} %img{:src=>"/images/ist_logo.png", :alt=>"logo"} %h1 Lazar Toxicity Predictions - - %hr + %hr{:style=>"color:black;"} .content :javascript @@ -32,22 +31,6 @@ // hide #back-top first $("#back-top").hide(); // fade in #back-top - $(function () { - $(window).scroll(function () { - if ($(this).scrollTop() > 400) { - $('#back-top').fadeIn(); - } else { - $('#back-top').fadeOut(); - } - }); - // scroll body to 0px on click - $('#back-top a').click(function () { - $('body,html').animate({ - scrollTop: 0 - }, 500); - return false; - }); - }); $('a#confidence').tooltip({ predelay: 300, position: 'bottom center', @@ -69,11 +52,34 @@ offset: [-500, 0], }); }); - #back-top - %a{:href => ""}^ top ^ = yield - .footer + .footer{:style=>"margin-bottom:2em;"} © - %a{:href => 'http://www.in-silico.ch', :rel => "external"} in-silico toxicology gmbh 2004-2013 + %a{:href => 'http://www.in-silico.ch', :rel => "external"} in silico 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;"} + %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 + :javascript + $("#back-top").hide(); + $(function () { + $(window).scroll(function () { + if ($(this).scrollTop() > 600) { + $('#back-top').fadeIn(); + } else { + $('#back-top').fadeOut(); + } + }); + // scroll body to 0px on click + $('#back-top a').click(function () { + $('body,html').animate({ + scrollTop: 0 + }, 500); + return false; + }); + }); diff --git a/views/neighbors.haml b/views/neighbors.haml index f742cff..32554d6 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -97,7 +97,9 @@ - c = p.data_entries[count][2].round(3) %tr %td.compound - %img{:src=>"#{neighbor_compound.uri}/image", :alt=>"Compound image not available", :title=>"#{neighbor_compound.smiles}", :width=>"150px"} + %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 - if c.class == String = c @@ -106,8 +108,6 @@ %td = p.data_entries[count][3] != nil ? p.data_entries[count][3].round(3) : "Not enough similar compounds in training dataset." %td - -#- if p.data_entries[count][3] != nil - %a{:href => to("/prediction/#{CGI.escape(neighbor_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"} Names and synonymes %br - if @type =~ /classification/i - if p.data_entries[count][3] != nil diff --git a/views/predict.haml b/views/predict.haml index 24c7c7e..62fe93c 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -1,9 +1,22 @@ :javascript + function progress(percent, $element) { + var progressBarWidth = percent * $element.width() / 100; + $element.show(); + setInterval(function(){ + if($element.find('#bar').is(":visible") & $element.find('#bar').width() < 400){ + var next = $element.find('#bar').width() + 20; + } else if ($element.find('#bar').is(":visible") & $element.find('#bar').width() == 400) { + var next = $element.find('#bar').width() - 20; + } + $element.find('#bar').animate({ width:next }, 300).html(value + "% "); + }, 2000); + }; function checksmiles () { if (document.form.identifier.value == "") { alert("Please draw or insert a chemical structure."); - $("img.circle").hide(); + //$("img.circle").hide(); document.form.identifier.focus(); + $('#progressBar').hide(); return false; }; return true; @@ -17,7 +30,8 @@ }); if (checked == false){ alert("Please select an endpoint."); - $("img.circle").hide(); + //$("img.circle").hide(); + $('#progressBar').hide(); return false; }; return true; @@ -34,9 +48,9 @@ document.form.identifier.value = document.JME.smiles() ; }; }; - function showcircle(){ - $("img.circle").show(); - }; + //function showcircle(){ + //$("img.circle").show(); + //}; // 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())" } @@ -82,7 +96,7 @@ %b= model_endpoint.split("#").last.gsub("_", " ").gsub(/\"|\]/, "")+" :" - @detail_count +=1 %div{:id => model_title} - %input{:type => "checkbox", :name => "selection[#{model_title}]", :id => "selection[#{model_title}]", :value => true, :disabled => false} + %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;"} @@ -110,17 +124,18 @@ %br %br %p{:style=>"display:inline"}= "Training Dataset: " - %a{:href=>"#{model[RDF::OT.trainingDataset]}", :title=>"link opens in new window.", :target=>"_blank"} download + %a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}")}", :title=>"link opens in new window."} download rdf %br %br %p{:style=>"display:inline"}= "Feature Dataset: " - %a{:href=>"#{model[RDF::OT.featureDataset]}", :title=>"link opens in new window.", :target=>"_blank"} download + %a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}", :title=>"download"} download rdf %br %br %p{:style=>"display:inline"}= "Model: " - %a{:href=>"#{model.uri}", :title=>"link opens in new window.", :target=>"_blank"} download + %a{:href=>"#{to("/predict/#{CGI.escape(model.uri)}")}", :title=>"download"} download rdf %br - %h3 Validation: + %h3 Validation: + -#%p= @cv.inspect %a{:href => "#"} Detailed report link %p Number of predictions: integer @@ -131,9 +146,16 @@ .arrow %img{:src=>"/images/arrow_down_float.png", :alt=>"v", :class=> "arrow"} - + %fieldset#bottom - %h1 - 3. Predict - %input{ :type => "submit", :id => "submit", :value=>">>", :onclick => "(getsmiles() & showcircle())", :style=>"height:30px;width:30px;"} - %img{:src=>"/images/wait30trans.gif", :alt=>"processing", :class=>"circle", :style=>"display:none;background-color:white;margin-left:10%;border:solid 1px;vertical-align:middle;"} + %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(1,$('#progressBar')) & getsmiles() & showcircle())", :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;"} + + %td{:style=>"align:center;valign: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;"} diff --git a/views/prediction.haml b/views/prediction.haml index f2d938c..3cd2f3f 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -14,12 +14,11 @@ %tbody %tr - %td{:id=>"compound", :style=>"align:center;"} + %td{:id=>"compound", :style=>"width: 200px;padding:0.2em;"} %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 - %a{:href => to("/prediction/#{CGI.escape(@compound.uri)}/details"), :id=>"linkCompound", :target=>"details_overview"} Names and synonyms - %p :javascript $(function() { $("a#linkCompound").on('click', function(e) { @@ -124,9 +123,8 @@ }); %p - if c != '' - %b Neighbors: %a{:href=> "#tabs", :id=>"link#{count}"} - %img{:src=>"/images/arrow_down_float.png", :alt=>"v"} + %b Neighbors :javascript $("a#link#{count}").click(function () { $(".results").show(); diff --git a/views/significant_fragments.haml b/views/significant_fragments.haml index 7301f53..5dbf9b1 100644 --- a/views/significant_fragments.haml +++ b/views/significant_fragments.haml @@ -1,68 +1,70 @@ %link{ :href=>"/stylesheets/screen.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"} /TODO put smiles in div if compound image is not available, prevent overlay to table -.content - %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"} - X -- if @type =~ /classification/i - .significant_fragments{:style=>"padding:0.5em;min-height:400px"} - %h2{:style=>"margin:0px;margin-left:8px;"} - Significant fragments: +.content{:style=>"margin-top:0;"} + - if @type =~ /classification/i + .significant_fragments{:style=>"padding:0.5em;height:100%"} + %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"} + X + %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? - %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] - %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") + %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] + %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") + %tr + %td + = fragments[1] + %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[1] + = fragments[0] %td - = fragments[2] - -- if @type =~ /regression/i - .descriptors{:style=>"padding:0.5em;min-height:400px"} - %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) -- cgit v1.2.3