lazar-gui 1.3.1 → 1.4.0.pre.0

data/views/predict.haml

@@ -1,185 +1,50 @@
 %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet", :property=>"stylesheet"}
 %script{:src=>"/jsme/jsme.nocache.js"}
-:javascript
-  var HttpClient = function() {
-    this.get = function(aUrl, aCallback) {
-    var anHttpRequest = new XMLHttpRequest();
-    anHttpRequest.onreadystatechange = function() {
-    if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
-      aCallback(anHttpRequest.responseText);
-    }
-      anHttpRequest.open( "GET", aUrl, true );
-      anHttpRequest.send( null );
-    }
-  };
-
-  $(function() { 
-    $('a[data-toggle="tab"]').on('click', function (e) {
-      localStorage.setItem('lastTab', $(e.target).attr('href'));
-    });
-    var lastTab = localStorage.getItem('lastTab');
-    if (lastTab) {
-      $('a[href="'+lastTab+'"]').click();
-    }
-  });  
-  
-  function getInput(){
-    identifier = document.getElementById("identifier").value.trim();
-    fileselect = document.getElementById("fileselect").value;
-    if (fileselect != ""){
-      return 1;
-    };
-    if (identifier != ""){
-      return 2;
-    };
-    return 0;
-  };
-  function showcircle() {
-    switch (getInput()){
-      case 0:
-        alert("Please draw or insert a chemical structure.");
-        return false;
-        break;
-      case 1:
-        if (checkfile() && checkboxes()){
-          button = document.getElementById("submit");
-          image = document.getElementById("circle");
-          button.parentNode.replaceChild(image, button);
-          $("img.circle").show();
-          return true;
-        };
-        return false;
-        break;
-      case 2:
-        if (checksmiles() && checkboxes()){
-          button = document.getElementById("submit");
-          image = document.getElementById("circle");
-          button.parentNode.replaceChild(image, button);
-          $("img.circle").show();
-          return true;
-        };
-        return false;
-        break;
-      default: false;
-    };
-    return false;
-  };
-  function checkfile() {
-    var fileinput = document.getElementById("fileselect");
-    if(fileinput.value != "") {
-      //TODO check file type is csv
-      return true;
-    };
-    alert("Please select a file (csv).");
-    return false;
-  };
-  function checksmiles () {
-    getsmiles();
-    if (document.form.identifier.value == "") {
-      alert("Please draw or insert a chemical structure.");
-      document.form.identifier.focus();
-      $("img.circle").hide();
-      return false;
-    };
-    return true;
-  };
-  function checkboxes () {
-    var checked = false;
-    $('input[type="checkbox"]').each(function() {
-      if ($(this).is(":checked")) {
-        checked = true;
-      };
-    });
-    if (checked == false){
-      alert("Please select an endpoint.");
-      $("img.circle").hide();
-      return false;
-    };
-    return true;
-  };
-  function jsmeOnLoad() {
-    jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
-      //optional parameters
-      "options" : "polarnitro"
-    });
-  document.JME = jsmeApplet;
-  };
-  function getsmiles() {
-    if (document.JME.smiles() != '') {
-      document.form.identifier.value = document.JME.smiles() ;
-    };
-  };
-
-// 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 !!(showcircle())" }
-  %fieldset#top.well
-    %h2 1. Draw a chemical structure
-    #insert
+// whole site content needs to be in one form. Input and checkboxes are proofed by js functions.
+%form{:name => "form", :action => "//#{$host_with_port}/predict", :method => "post", :enctype => "multipart/form-data", :onsubmit => "return !!(showcircle())" }
+  %fieldset#top.card.bg-light
+    #insert.card-body
+      %h2.card-title 1. Draw a chemical structure
       %label  
-      #appletContainer
-      %br
-      %label{:for => 'identifier'}
-        or enter the
-        %a{:href => "http://en.wikipedia.org/wiki/Simplified_molecular_input_line_entry_specification", :rel => "external"} SMILES
-        string:
+      #appletContainer.d-flex
       %br
-      %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
       %p
-      -#%label{:for=>"fileselect"}
-        or upload a CSV file for batch predictions:
-      -#%a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"File format", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"auto", html:"true", content:"One column with compounds and keyword SMILES or InChI in the first row."}}
-      -#%br
-      %span.btn.btn-default.btn-file{:style=>"display:none;"}
-        %input{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv", :disabled=>"disabled", :type=>"hidden"}
+        %label{:for => 'identifier'}
+          or enter the
+          %a{:href => "http://en.wikipedia.org/wiki/Simplified_molecular_input_line_entry_specification", :rel => "external"} SMILES
+          string:
+        %input.form-control{:type => 'text', :name => 'identifier', :id => 'identifier'}
+      %p{:style=>("display:none;" unless ENV["BATCH_MODE"].to_boolean)}
+        %label{:for=>"fileselect"}
+          or upload a CSV file for batch predictions:
+        %br
+        %span.btn.btn-file{:style=>"background-color:white;"}
+          %input.form-control-file{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv"}
+        %a.btn.btn-outline-info{:href => "//#{$host_with_port}/predict/help", :rel => "external", :style=>"margin-left: 1em;"} Help
 
-  %fieldset#middle.well
-    %h2 2. Select one or more endpoints
-    #models
+  %fieldset#middle.card.bg-light
+    #models.card-body
+      %h2.card-title 2. Select one or more endpoints
       - @endpoints.each do |endpoint|
-        %div{:id=>endpoint.gsub(/\s+/, "_")}
-          %h4.head-back=endpoint
-          - @models.select{|m| m.endpoint == endpoint}.each do |model|
-            %div.row{:id => model.id,:style=>"margin-bottom:1em;"}
-              %span.col-lg-4.col-md-4.col-sm-4.col-xs-4
-                %input{:type => "checkbox", :name => "selection[#{model.id}]", :id => "selection[#{model.species.gsub(/\s+/, "_")}]", :value => true, :disabled => false}
-                %label{:for => "selection[#{model.species.gsub(/\s+/, "_")}]"}
-                  = model.species
-              %span.col-lg-8.col-md-8.col-sm-8.col-xs-8
-                %a.btn.btn-default.btn-xs{:data=>{:toggle=>"collapse"}, :href=>"#details#{model.id}", :onclick=>"load#{model.id}Details('#{model}')", :id => "link#{model.id}", :style=>"font-size:small;"}
-                  %span.glyphicon.glyphicon-menu-right
-                  Details | Validation
-                %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle#{model.id}", :class=>"circle#{model.id}", :alt=>"wait", :style=>"display:none;"}
-            %div.panel-collapse.collapse{:id=>"details#{model.id}", :style=>"margin-left:1em;"}
-            :javascript
-              function load#{model.id}Details(model) {
-                button = document.getElementById("link#{model.id}");
-                span = button.childNodes[1];
-                if (span.className == "glyphicon glyphicon-menu-right"){
-                  span.className = "glyphicon glyphicon-menu-down";
-                } else if (span.className = "glyphicon glyphicon-menu-down"){
-                  span.className = "glyphicon glyphicon-menu-right";
-                };
-                image = document.getElementById("circle#{model.id}");
-                if ($('modeldetails#{model.id}').length == 0) {
-                  $(button).hide();
-                  $(image).show();
-                  aClient = new HttpClient();
-                  aClient.get("#{to("/predict/modeldetails/#{model.id}")}", function(response) {
-                    var details = document.createElement("modeldetails#{model.id}");
-                    details.innerHTML = response;
-                    document.getElementById("details#{model.id}").appendChild(details);
-                    $(button).show();
-                    $(image).hide();
-                    addExternalLinks();
-                  });
-                }
-              }
-  %fieldset#bottom.well
-    %div.row
-      %div.col-lg-2.col-md-2.col-sm-2.col-xs-2
-        %h2
-          3. Predict
-      %div.col-lg-10.col-md-10.col-sm-10.col-xs-10
-        %button.has-feedback.btn.btn-warning.h2{:type => "submit", :id => "submit", :value=>"", :onclick => "getsmiles()"}
-          %span.glyphicon.glyphicon-play
-        %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :alt=>"wait", :style=>"display:none;"}
+        %div.card{:id=>endpoint.gsub(/\s+/, "_")}
+          %div.card-header
+            %h5.card-title=endpoint
+          %div.card-body
+            - @models.select{|m| m.endpoint == endpoint}.each do |model|
+              %div.row{:id => model.id,:style=>"margin-bottom:1em;"}
+                %span.col-6
+                  %input{:type => "checkbox", :name => "selection[#{model.id}]", :id => "selection[#{model.species.gsub(/\s+/, "_")}]", :value => true, :disabled => false}
+                  %label{:for => "selection[#{model.species.gsub(/\s+/, "_")}]"}
+                    = model.species
+                %span.col-6
+                  %a.btn.btn-outline-info{:role=>"button", :data=>{:toggle=>"collapse"}, :href=>"#details#{model.id}", :aria=>{:expanded=>"false", :controls=>"details#{model.id}"}, :onclick=>"loadDetails('#{model.id}','//#{$host_with_port}/predict/modeldetails/#{model.id}')", :id => "link#{model.id}", :style=>"font-size:small;"}
+                    %span.fa.fa-caret-right
+                    Details | Validation
+                  %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle#{model.id}", :class=>"circle#{model.id}", :alt=>"wait", :style=>"display:none;"}
+              %div.collapse{:id=>"details#{model.id}", :style=>"margin-left:1em;"}
+  %fieldset#bottom.card.bg-light
+    %div.card-body
+      %h2.card-title 3. Predict
+      %button.has-feedback.btn.btn-primary.btn-lg{:type => "submit", :id => "submit", :value=>"", :onclick => "getsmiles()"}
+        %span.fa.fa-play
+      %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :alt=>"wait", :style=>"display:none;"}

data/views/prediction.haml

@@ -1,120 +1,127 @@
-:javascript
-  $(document).ready(function(){
-    $('[data-toggle="popover"]').popover();
-    $('.modal').on('hidden.bs.modal', function () {
-      $(this).removeData('bs.modal');
-    });
-  });
-
-%div.well
-  %a.btn.btn-warning{:href => to('/predict')}
-    %i.glyphicon.glyphicon-menu-left
+%div.card
+  %a.btn.btn-outline-info{:href => "//#{$host_with_port}/predict"}
+    %span.fa.fa-caret-left
     New Prediction
-  / displays all prediction result in first table
-  %h3 Prediction Results:
-  %div.table-responsive
-    %table.table.table-bordered{:id=>"overview"}
-      %tbody
-        %tr
-          %td{:id=>"compound", :style=>"vertical-align:top;text-align:center;"}
-            %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@compound.id.to_s)}/details"), :id=>"link01"}}
-              = @compound.svg
-            %p= @compound.smiles
-          - @model_types = {}
-          - @dbhit = {}
-          - @predictions.each_with_index do |prediction,i|
-            - type = @models[i].model.class.to_s.match("Classification") ? "Classification" : "Regression"
-            - @model_types[i] = type
-            - unit = @models[i].unit
-            %td{:style=>"vertical-align:top;white-space:nowrap;"}
-              %b{:class => "title"}
-                = "#{@models[i].endpoint.gsub('_', ' ')} (#{@models[i].species})"
-              
-              / check for prediction
-              - if prediction[:neighbors] and !prediction[:value].nil?
+%div.card.bg-light
+  %div.card-body
+    %h3.card-title Prediction:
+    %div.table-responsive
+      %table.table.table-bordered{:id=>"overview"}
+        %tbody
+          %tr
+            %td.align-items-center{:id=>"compound"}
+              %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: "//#{$host_with_port}/prediction/#{@compound.id}/details", :id=>"link01"}}
+                = embedded_svg(@compound.svg, :title=>"click for details")
+              %p= @compound.smiles
+              - if @compound.cid && @compound.cid != "0"
                 %p
-                / show model type (classification|regression)
-                %b Type:
-                = type
-                %p 
-                / check for database hit
-                - if prediction[:info] =~ /\b(identical)\b/i
-                  - @dbhit[i] = true
-                  
-                  / show message about dbhit and measurements
+                  %a{:href=>PUBCHEM_CID_URI+@compound.cid, :rel => "external"}
+                    PubChem
+                    %span.fa.fa-xs.fa-external-link
+            - @model_types = {}
+            - @dbhit = {}
+            - @predictions.each_with_index do |prediction,i|
+              - type = @models[i].model.class.to_s.match("Classification") ? "Classification" : "Regression"
+              - @model_types[i] = type
+              - unit = @models[i].unit
+              %td
+                %b{:class => "title"}
+                  = "#{@models[i].endpoint.gsub('_', ' ')} (#{@models[i].species})"
+                
+                / check for prediction
+                - if prediction[:neighbors] and !prediction[:value].nil?
                   %p
-                    :plain
-                      This compound was part of the training dataset. <i>All</i> information </br>
-                      from this compound was removed from the training data before the </br>
-                      prediction, to obtain unbiased results.
+                  / show model type (classification|regression)
+                  %b Type:
+                  = type
+                  %p 
+                  / check for database hit
+                  - if prediction[:info] =~ /\b(identical)\b/i
+                    - @dbhit[i] = true
+                    
+                    / show message about dbhit and measurements
                     %p
-                    %b Measured activity:
-                    %br
-                    - if prediction[:measurements].is_a?(Array)
-                      = (type == "Regression") ? prediction[:measurements].collect{|value| "#{value.delog10.signif(3)} (#{unit})</br>#{@compound.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : prediction[:measurements].join(", ")
-                    - else
-                      = (type == "Regression") ? "#{prediction[:measurements].delog10.signif(3)} (#{unit})</br>#{@compound.mmol_to_mg(prediction[:measurements].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:measurements]
-                
-                - else
-                  - @dbhit[i] = false
-                
-                / show prediction
-                %p
-                  %b Prediction:
-                  / prediction popover
-                  %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Prediction", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"<p>lazar searches the training dataset for similar compounds (neighbors) and calculates the prediction from their experimental activities.<p><b>Classification:</b></br>Majority vote of neighbor activities weighted by similarity.<p><b>Regression:</b></br>Prediction from a local partial least squares regression model with neighbor activities weighted by similarity.<p><a href=\"http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract\", target=\"_blank\"> Original publication</a>.<hr></hr><a href=\"https://doi.org/10.3389/fphar.2013.00038\", target=\"_blank\"><img src=\"https://zenodo.org/badge/DOI/10.3389/zenodo.10.3389.svg\" alt=\"DOI\"></a>"}}
-                  %br
-                  = (type == "Regression") ? "#{prediction[:value].delog10.signif(3)} (#{unit})</br>#{@compound.mmol_to_mg(prediction[:value].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value]
+                      :plain
+                        This compound was part of the training dataset. <i>All</i> information </br>
+                        from this compound was removed from the training data before the </br>
+                        prediction, to obtain unbiased results.
+                      %p
+                      %b Measured activity:
+                      %br
+                      - if prediction[:measurements].is_a?(Array)
+                        = (type == "Regression") ? prediction[:measurements].collect{|value| "#{value.delog10.signif(3)} (#{unit})</br>#{@compound.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : prediction[:measurements].join(", ")
+                      - else
+                        = (type == "Regression") ? "#{prediction[:measurements].delog10.signif(3)} (#{unit})</br>#{@compound.mmol_to_mg(prediction[:measurements].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:measurements]
                   
-                  / show prediction interval or probability
+                  - else
+                    - @dbhit[i] = false
+                  
+                  / show prediction
                   %p
-                  - if type == "Regression"
-                    %b 95% Prediction interval:
-                    - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval])
-                    / prediction interval popover
-                    %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Prediction intervall", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"An estimate of prediction uncertainty. The \"real\" value should be with 95% probability within the prediction interval."}}
+                    %b Prediction:
+                    / prediction popover
+                    %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Prediction", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"<p>lazar searches the training dataset for similar compounds (neighbors) and calculates the prediction from their experimental activities.<p><b>Classification:</b></br>Majority vote of neighbor activities weighted by similarity.<p><b>Regression:</b></br>Prediction from a local partial least squares regression model with neighbor activities weighted by similarity.<p><a href=\"http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract\", target=\"_blank\"> Original publication</a>.<hr></hr><a href=\"https://doi.org/10.3389/fphar.2013.00038\", target=\"_blank\"><img src=\"https://zenodo.org/badge/DOI/10.3389/zenodo.10.3389.svg\" alt=\"DOI\"></a>"}}
                     %br
-                    = interval.nil? ? "--" : "#{interval[1].delog10.signif(3)} - #{interval[0].delog10.signif(3)} (#{unit})"
-                    %br
-                    = "#{@compound.mmol_to_mg(interval[1].delog10).signif(3)} - #{@compound.mmol_to_mg(interval[0].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" if !interval.nil?
-                  - else
-                    %b Probability:
-                    / probability popover
-                    %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Pobability", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"Probability that the prediction belongs to one of the given classes."}}
-                    - unless prediction[:probabilities].nil?
+                    = (type == "Regression") ? "#{prediction[:value].delog10.signif(3)} (#{unit})</br>#{@compound.mmol_to_mg(prediction[:value].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value]
+                    
+                  / show prediction interval or probability
+                  - if type == "Regression"
+                    %p
+                      %b 95% Prediction interval:
+                      - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval])
+                      / prediction interval popover
+                      %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Prediction intervall", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"An estimate of prediction uncertainty. The \"real\" value should be with 95% probability within the prediction interval."}}
+                      %br
+                      = interval.nil? ? "--" : "#{interval[1].delog10.signif(3)} - #{interval[0].delog10.signif(3)} (#{unit})"
                       %br
-                      = "#{prediction[:probabilities].keys[0]}: #{prediction[:probabilities].values[0].signif(3)}"
-                      - if prediction[:probabilities].size == 2
+                      = "#{@compound.mmol_to_mg(interval[1].delog10).signif(3)} - #{@compound.mmol_to_mg(interval[0].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" if !interval.nil?
+                    %p
+                      %b Confidence:
+                      %br
+                      = prediction[:confidence]
+                  - else
+                    %p
+                      %b Probability:
+                      / probability popover
+                      %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Pobability", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"Probability that the prediction belongs to one of the given classes."}}
+                      - unless prediction[:probabilities].nil?
                         %br
-                        = "#{prediction[:probabilities].keys[1]}: #{prediction[:probabilities].values[1].signif(3)}"
-                
-                / show warnings and info
-                %p
-                  - if !prediction[:info].blank?
+                        = "#{prediction[:probabilities].keys[0]}: #{prediction[:probabilities].values[0].signif(3)}"
+                        - if prediction[:probabilities].size == 2
+                          %br
+                          = "#{prediction[:probabilities].keys[1]}: #{prediction[:probabilities].values[1].signif(3)}"
+                    %p
+                      %b Confidence:
+                      %br
+                      = prediction[:confidence]
+
+                  / show warnings and info
+                  %p
+                    - unless @dbhit[i] || prediction[:info].blank?
+                      %b Info:
+                      %br
+                      %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",<br>")
+                    - unless prediction[:warnings].blank?
+                      - warning = prediction[:warnings].last
+                      %b Warnings:
+                      %br
+                      %p=warning#.sub(/,/, ",<br>")
+                - else
+                  %br
+                  - unless @dbhit[i] || prediction[:info].blank?
                     %b Info:
                     %br
                     %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",<br>")
-                  - if !prediction[:warnings].blank?
+                  - unless prediction[:warnings].blank?
+                    - warning = prediction[:warnings].last
                     %b Warnings:
-                    - prediction[:warnings].uniq.each do |warning|
-                      %p=warning #.sub(/,/, ",<br>")
-                      /%p=warning.sub(/substances/, "substances<br>").sub(/prediction\:/, "prediction\:<br>")
-              - else
-                %br
-                - if !prediction[:info].blank?
-                  %b Info:
-                  %br
-                  %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",<br>")
-                - if !prediction[:warnings].blank?
-                  %b Warnings:
-                  - prediction[:warnings].uniq.each do |warning|
                     %br
-                    %p=warning.sub(/,/, ",<br>")
+                    %p=warning#.sub(/,/, ",<br>")
 
-  / always show the neighbors table, message is given there  
-  = haml :neighbors, :layout => false, :model_type => @model_types, :dbhit => @dbhit
+/ always show the neighbors table, message is given there  
+= haml :neighbors, :layout => false, :model_type => @model_types, :dbhit => @dbhit
     
-%div.modal.fade{:id=>"details0", :role=>"dialog"}
-  %div.modal-dialog.modal-lg
+%div.modal.fade{:id=>"details0", :tabindex=>"-1", :role=>"dialog"}
+  %div.modal-dialog.modal-lg{:role=>"document"}
     %div.modal-content