summaryrefslogtreecommitdiff
path: root/views/predict.haml
diff options
context:
space:
mode:
Diffstat (limited to 'views/predict.haml')
-rw-r--r--views/predict.haml221
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;"}