lazar-gui 1.0.0

data/views/js_link.haml

@@ -0,0 +1,5 @@
+%a{:href => "#{destination}", :id => "js_link#{@link_id}"} #{name}
+:javascript
+  $("a#js_link#{@link_id}").click(function () {
+    $("#{destination}").#{method}();  
+  });

data/views/layout.haml

@@ -0,0 +1,113 @@
+!!!
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %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=>"#{'/css/bootstrap.min.css'}"}
+    %link{:rel=>'stylesheet', :href=>"#{'/css/theme.default.min.css'}"}
+    %link{:rel=>'stylesheet', :href=>"#{'/css/theme.bootstrap.min.css'}"}
+    %link{ :href=>"/style.css", :rel=>"stylesheet"}
+    %link{ :href=>"/stylesheets/jquery-ui.css", :rel=>"stylesheet"}
+    %script{:src=>"/javascripts/jquery-1.11.2.min.js"}
+    %script{:src=>"/javascripts/bootstrap.min.js"}
+    %script{:src=>"/javascripts/jquery.tablesorter.min.js"}
+    %script{:src=>"/javascripts/jquery.tablesorter.widgets.js"}
+    %script{ :src=>"/javascripts/lazar-gui.js"}
+  %body
+    %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.
+    %header.page-header
+      %div.row
+        %div.col-md-2
+          %a{:href=> to("/predict")}
+            %img.media-object{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"150px", :heigth=>"150px", :style=>"margin:0 3em 0 2em;"}
+        %div.col-md-8
+          %h1.media-heading{:style=>"margin: 0 0 0 2em;"}
+            lazar toxicity predictions
+        %div.col-md-2
+          %h1.media-heading
+            %small
+              %a{:href=>"https://nano-lazar.in-silico.ch"} nano-lazar
+
+    %div.container-fluid
+      %topline
+        %div.row
+          %div.col-md-8
+            Problems, bugs, ideas for improvements ? Please report at our
+            %a{:href => 'https://github.com/opentox/lazar-gui/issues', :rel => "external"} issue tracker.
+            or send us an email:
+            %a{ :href=>"mailto:info@in-silico.ch", :target=>"_top"}
+              %img.share{:src=>"/images/Email.png"}
+          %div.col-md-2
+          %div.col-md-2
+            %a{:href=>"https://twitter.com/intent/tweet?source=http%3A%2F%2Flazar.in-silico.ch&text=:%20http%3A%2F%2Flazar.in-silico.ch", :target=>"_blank", :title=>"Tweet"}
+              %img.share{:src=>"/images/Twitter.png"}
+            %a{:href=>"https://plus.google.com/share?url=http%3A%2F%2Flazar.in-silico.ch", :target=>"_blank", :title=>"Share on Google+"}
+              %img.share{:src=>"/images/Google+.png"}
+            %a{:href=>"http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Flazar.in-silico.ch&title=&summary=&source=http%3A%2F%2Flazar.in-silico.ch", :target=>"_blank", :title=>"Share on LinkedIn"}
+              %img.share{:src=>"/images/LinkedIn.png"}
+            %a{:href=>"https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flazar.in-silico.ch&title=&summary=&source=http%3A%2F%2Flazar.in-silico.ch", :target=>"_blank", :title=>"Share on Facebook"}
+              %img.share{:src=>"/images/Facebook.png"}
+        %div.row
+        Previous version:
+        %a{:href=>"http://lazar-old.in-silico.ch"} lazar-old
+      :javascript
+        $(document).ready(function(){
+          $("#back-top").hide();
+          $(".blind").error(function(){
+            $(this).attr('src', '/images/blind.png');
+          });
+        });
+        $(document).ready(function(){
+          $('[data-toggle="popover"]').popover();
+          $('.modal').on('hidden.bs.modal', function () {
+            $(this).removeData('bs.modal');
+          });
+        });
+          
+      = yield
+    
+    %footer.footer
+      %div.container-fluid
+        %div.row
+          %div.col-md-12
+            %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}
+          %supporters.col-md-12
+            %p Financial support:
+            %a{:href=>"http://www.bfr.bund.de/de/start.html", :target=>"_blank"}
+              %img{:src=>"/images/bfr_logo.gif"}
+            %a{:href=>"http://www.opentox.org/", :target=>"_blank"}
+              %img{:src=>"/images/ot_logo.png"}
+            %a{:href=>"https://enanomapper.net/", :target=>"_blank"}
+              %img{:src=>"/images/enm_logo.png"}
+            %a{:href=>"https://www.researchgate.net/institution/Nestle_SA/department/Nestle_Research_Center", :target=>"_blank"}
+              %img{:src=>"/images/nestec.jpg"}
+    
+
+    #back-top{:style => "z-index:100;position:fixed;bottom:1%;right:1%;"}
+      %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
+        %span.glyphicon.glyphicon-circle-arrow-up{:style => "font-size:3em;color:black;"}
+    :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;
+        });
+      });

data/views/model_details.haml

@@ -0,0 +1,117 @@
+%b Model:
+%br
+Source:
+%a{:href=>model.source, :target=>"external"}
+  = model.source
+%br
+- model.classification? ? type = "Classification" : type = "Regression"
+= "Type:\t"
+= type
+%br
+- training_dataset = OpenTox::Dataset.find model.training_dataset.id
+= "Training compounds:\t"
+= training_dataset.compounds.size
+
+%p
+- if type == "Classification"
+  %b Independent crossvalidations:
+- else
+  %b Independent crossvalidations (-log10 transformed):
+%div.row{:id=>"validations#{model.id}", :style=>"background-color:#f5f5f5;"}
+  - model.crossvalidations.each do |crossvalidation|
+    %span.col-xs-4.col-sm-4.col-md-4.col-lg-4
+      - cv = OpenTox::CrossValidation.find crossvalidation.id
+      = "Num folds:\t"
+      = cv.folds
+      %br
+      = "Num instances:\t"
+      = cv.nr_instances
+      %br
+      = "Num unpredicted"
+      = cv.nr_unpredicted
+      - if model.classification? 
+        %br
+        = "Accuracy:\t"
+        = cv.accuracy.round(3) if cv.accuracy
+        %br
+        = "True positive rate:\t"
+        = cv.true_rate["active"].round(3) if cv.true_rate["active"]
+        %br
+        = "True negative rate:\t"
+        = cv.true_rate["inactive"].round(3) if cv.true_rate["inactive"]
+        %br 
+        = "Positive predictive value:\t"
+        = cv.predictivity["active"].round(3) if cv.predictivity["active"]
+        %br
+        = "Negative predictive value:\t"
+        = cv.predictivity["inactive"].round(3) if cv.predictivity["inactive"]
+        %p
+        %b Confusion Matrix:
+        %table.table.table-condensed.table-borderless{:style=>"width:20%;"}
+          %tbody
+            %tr
+              %td
+              %td
+              %td 
+                %b actual
+              %td
+              %td
+            %tr
+              %td
+              %td
+              %td active
+              %td inactive
+              -#%td total
+            %tr
+              %td 
+                %b predicted
+              %td active
+              %td 
+                =cv.confusion_matrix[0][0]
+              %td 
+                =cv.confusion_matrix[0][1]
+              -#%td 
+                =cv.confusion_matrix[0][0]+cv.confusion_matrix[0][1]
+            %tr
+              %td
+              %td inactive
+              %td 
+                =cv.confusion_matrix[1][0]
+              %td 
+                =cv.confusion_matrix[1][1]
+              -#%td 
+                =cv.confusion_matrix[1][0]+cv.confusion_matrix[1][1]
+            -#%tr
+              %td
+              %td total
+              %td
+                =cv.confusion_matrix[0][0]+cv.confusion_matrix[1][0]
+              %td
+                =cv.confusion_matrix[0][1]+cv.confusion_matrix[1][1]
+              %td
+                -#= "Confusion Matrix:\t"
+                -#= cv.confusion_matrix
+        %br
+        /= "Confidence plot:"
+        /%p.plot
+        /  %img{:src=>"confp#{cv.id}.svg"}
+      - if model.regression?
+        %br
+        = "Root mean squared error:\t"
+        = cv.rmse.round(3) if cv.rmse
+        %br
+        = "Mean absolute error:\t"
+        = cv.mae.round(3) if cv.mae
+        %br 
+        = "R square:\t"
+        = cv.r_squared.round(3) if cv.r_squared
+        %br
+        /= "Confidence plot:"
+        /%p.plot
+        /  %img{:src=>"/confp#{cv.id}.svg"}
+        /%br
+        /= "Correlation plot"
+        /%p.plot
+        /  %img{:src=>"/corrp#{cv.id}.svg"}
+        
+%br

data/views/neighbors.haml

@@ -0,0 +1,104 @@
+/ unpacks multi prediction array ;
+/ prepare it for neighbors ;
+/ align single prediction to endpoint ;
+/ display preordered in table view ;
+
+%div.results
+  %h3 Neighbors:
+  / tabs div
+  #tabs
+    %ul.nav.nav-tabs.nav-justified{:id=>"neighborTabs", :role=>"tablist"}
+      / each model a tab head ;
+      / hash for predictionFeature
+      - predictionFeature = {}
+      - @models.each_with_index do |model,i|
+        / get predictionFeature type
+        - m = Model::Lazar.find model.model_id.to_s
+        - predFeature = Feature.find m.prediction_feature_id.to_s
+        / define feature type (numeric : nominal)
+        - predFeatureType = (predFeature.numeric? ? "numeric" : "nominal")
+        / use prediction feature id for neighbor compound features
+        - predFeatureId = m.prediction_feature_id.to_s
+        - predictionFeature[i] = {"id" => predFeatureId, "type" => predFeatureType}
+        %li{:class => ("active" if i == 0)}
+          %a{:href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}}
+            = "#{model.endpoint} (#{model.species})"
+    %div.tab-content
+      / unpack to single arrays
+      - @predictions.each_with_index do |prediction,j|
+        / pass model type for significant fragments view
+        #results.tab-pane{:id=>"#{j+1}", :class => ("active" if j == 0)}
+          / prepare dataset for neighbors table ;
+          / delete first array which contains prediction ;
+          / following arrays are the neighbor predictions ;
+          / call the tablesorter plugin ;
+          / presort by similarity ;
+          :javascript
+            $(document).ready(function(){
+              $("table##{j+1}").tablesorter({
+                debug: false,
+                theme: "bootstrap",
+                headerTemplate: '',
+                widgets: ['columns', 'uitheme', 'stickyHeaders'],
+                widgetOptions: {
+                  stickyHeaders_attachTo : '.tab-content',
+                  stickyHeaders : '',
+                  stickyHeaders_offset : 0,
+                  stickyHeaders_cloneId : '-sticky',
+                  stickyHeaders_addResizeEvent : true,
+                  stickyHeaders_includeCaption : true,
+                  stickyHeaders_zIndex : 2,
+                  stickyHeaders_attachTo : null,
+                  stickyHeaders_xScroll : null,
+                  stickyHeaders_yScroll : null,
+                  stickyHeaders_filteredToTop: true
+                },
+                sortList: [[2,1]],
+                headers: {sorter: false},
+                widthFixed: false
+              });
+            });
+          - if prediction[:neighbors].size > 0
+            %div.table-responsive
+              %table{:id=>"#{j+1}", :style=>"border-style: solid;"}
+                %thead
+                  %tr
+                    %th.sorter-false{:style =>"vertical-align:middle;"}
+                      Compound
+                    %th.sorter-false{:style =>"vertical-align:middle;"}
+                      Measured Activity
+                      %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"}
+                    %th.sorter-false{:style =>"vertical-align:middle;"}
+                      Similarity
+                      %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", html:"true", content:"<a href=\"https://en.wikipedia.org/wiki/Jaccard_index\">Tanimoto/Jaccard</a> similarity based on <a href=\"https://openbabel.org/docs/dev/FileFormats/MolPrint2D_format.html\">Molprint2D</a> fingerprints."}, :style=>"z-index:auto+10;"}
+                    / %th{:style =>"vertical-align:middle;"}
+                    / Supporting Information
+                %tbody
+                  - type = @model_types[j]
+                  - unit = @models[j].unit
+                - prediction[:neighbors].uniq.each_with_index do |neighbor,count|
+                  %tr
+                    / Compound
+                    - c = Compound.find(neighbor["_id"])
+                    %td{:style =>"vertical-align:middle;padding-left:1em;width:50%;"}
+                      /%a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(neighbor["_id"])}/details"), :id=>"link#{j+1}#{count}"}}
+                      %p= c.svg
+                      %p= c.smiles
+                    - mw = c.molecular_weight
+                    / Measured Activity = compound.features
+                    %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;white-space:nowrap;"}
+                      - features = c.features.collect{|k,v| v if k == predictionFeature[j]["id"] }.compact.flatten
+                      = (predictionFeature[j]["type"] == "numeric") ? features.collect{|v| weight = c.mmol_to_mg(v); '%.2e' % v + " (#{@models[j].unit})"+" , #{'%.2e' % weight} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : features.join("</br>")
+                    / Similarity = tanimoto
+                    %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;"}
+                      / TODO differentiate between no neighbors found and compound found in dataset, display neighbors for compounds in dataset?
+                      = neighbor[:tanimoto] != nil ? neighbor[:tanimoto].to_f.round(3) : "Not enough similar compounds </br>in training dataset."
+
+          - else
+            %span.btn.btn-default.disabled
+              = "Not enough similar compounds in training dataset"
+
+          %div.modal.fade{:id=>"details#{j+1}", :role=>"dialog"}
+            %div.modal-dialog.modal-lg
+              %div.modal-content
+

data/views/predict.haml

@@ -0,0 +1,175 @@
+%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
+      %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:
+      %br
+      %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
+      %p
+      %label{:for=>"fileselect"}
+        or upload a CSV file for batch predictions (disabled in public version)
+      %br
+      %span.btn.btn-default.btn-file
+        %input{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv", :disabled=>"disabled"}
+
+  %fieldset#middle.well
+    %h2 2. Select one or more endpoints
+    #models
+      - @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}
+              %span.col-sm-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-sm-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;"}
+                  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}");
+                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();
+                  });
+                }
+              }
+  %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 => "getsmiles()"}
+        %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :alt=>"wait", :style=>"display:none;"}