marked descriptor links;resize body if many models;fixed progress status

3 files changed, 48 insertions, 19 deletions

diff --git a/views/neighbors.haml b/views/neighbors.haml
index 33ea688..86d1906 100644
--- a/views/neighbors.haml
+++ b/views/neighbors.haml
@@ -113,7 +113,7 @@
                         %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 >
                     - 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
+                        %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) {
diff --git a/views/predict.haml b/views/predict.haml
index b37d6ab..1adc9da 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -1,22 +1,46 @@
 :javascript
-  function progress(percent, $element) {
-    var progressBarWidth = percent * $element.width() / 100;
+  function callTask(url) {
+    var result="";
+    $.ajax({
+      url: url,
+      async: false,
+      success:function(data) {
+        var response = data.match(/Completed\s.*\./)[0];
+        var arr = response.split(" ");
+        result = arr[1].replace(/"/g, "");
+      }
+    });
+    return result;
+  };
+  function progressBarWidth(p,w){
+    percent = p * w / 100;
+    return percent ;
+  };
+  // form function
+  function progress($element, url) {
     $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;
+    var fullWidth = $element.width();
+    var timer = setInterval(function(){
+      var percent = callTask(url);
+      if(percent == 100.0){
+        var next = progressBarWidth(percent,fullWidth);
+        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);
       }
-      $element.find('#bar').animate({ width:next }, 300);
-    }, 2000);
+      $element.find('#bar').animate({ width:next }, 3000);
+    }, 3000);
   };
   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();
+      $('#progressBar').hide();
       return false;
     };
     return true;
@@ -30,8 +54,8 @@
     });
     if (checked == false){
       alert("Please select an endpoint.");
-      $("img.circle").hide();
-      //$('#progressBar').hide();
+      //$("img.circle").hide();
+      $('#progressBar').hide();
       return false;
     };
     return true;
@@ -52,6 +76,10 @@
     $("img.circle").show();
   };
 
+// init task for progress
+- task_uri = OpenTox::Task.task_uri
+- OpenTox::Task.run("Predict compound.", "#{$lazar[:uri]}", task_uri)do;end
+
 // 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
@@ -155,9 +183,10 @@
           %h1
             3. Predict
         %td{:style=>"width:10%;align:center;valign:middle;"}
-          %input{ :type => "submit", :id => "submit", :value=>">>", :onclick => "(showcircle() & 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 => "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;"}
+          -#%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;"}
diff --git a/views/prediction.haml b/views/prediction.haml
index 99b7527..edf6259 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -134,7 +134,7 @@
                       });
                   - 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
+                    %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) {