update jsme_version/stylesheet

6 files changed, 140 insertions, 112 deletions

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"} <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;"}
+      %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 + "%&nbsp;");
+    }, 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)