diff options
author | Christoph Helma <helma@in-silico.ch> | 2019-09-03 13:45:36 +0200 |
---|---|---|
committer | Christoph Helma <helma@in-silico.ch> | 2019-09-03 13:45:36 +0200 |
commit | d1032e4f40d9fbb212e85e0db4f0ecd2e8ac9a88 (patch) | |
tree | 48922d60d750839dacd5d0a4a6e50ea3fe68da63 /views/predict.haml | |
parent | 5bb4c24c6cfc1ddfae14eb9543b283baae2d75be (diff) | |
parent | a84d9eabf1b921086a688f81df28b0f21ba4df19 (diff) |
development merged, git links in FAQ.md fixed1.4.0
Diffstat (limited to 'views/predict.haml')
-rw-r--r-- | views/predict.haml | 221 |
1 files changed, 43 insertions, 178 deletions
diff --git a/views/predict.haml b/views/predict.haml index 2308911..7dedf63 100644 --- a/views/predict.haml +++ b/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;"} |