summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorgebele <gebele@in-silico.ch>2019-07-11 08:20:10 +0000
committergebele <gebele@in-silico.ch>2019-07-11 08:20:10 +0000
commit5efd8128dc5bdb9ffc0aa4798f8aa303973794e6 (patch)
tree7beac4ecf00fa3ec793f9c78f79dd8bb4c71ef0e
parentbcc618026db1ee7a030391853b55bbf6116ab89a (diff)
moved form js functions to lazar-gui.js
-rw-r--r--application.rb1
-rw-r--r--public/javascripts/lazar-gui.js136
-rw-r--r--views/predict.haml151
3 files changed, 138 insertions, 150 deletions
diff --git a/application.rb b/application.rb
index 7cebb2b..4ed4a31 100644
--- a/application.rb
+++ b/application.rb
@@ -96,6 +96,7 @@ get '/predict/modeldetails/:model' do
data_entries = training_dataset.data_entries
crossvalidations = model.crossvalidations
+ response['Content-Type'] = "text/html"
return haml :model_details, :layout=> false, :locals => {:model => model,
:crossvalidations => crossvalidations,
:training_dataset => training_dataset,
diff --git a/public/javascripts/lazar-gui.js b/public/javascripts/lazar-gui.js
index 3b85f78..e87b0fa 100644
--- a/public/javascripts/lazar-gui.js
+++ b/public/javascripts/lazar-gui.js
@@ -37,6 +37,142 @@ var HttpClient = function() {
// functions used in predict.haml
+// GET request
+/*$(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();
+ }
+});*/
+
+// get and check input
+function getInput(){
+ identifier = document.getElementById("identifier").value.trim();
+ fileselect = document.getElementById("fileselect").value;
+ if (fileselect != ""){
+ return 1;
+ };
+ if (identifier != ""){
+ return 2;
+ };
+ return 0;
+};
+
+// display wait animation
+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;
+};
+
+// check if a file was selected for upload
+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;
+};
+
+// check if a smiles string was entered
+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;
+};
+
+// check if a model was selected
+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;
+};
+
+// display jsme editor with option
+function jsmeOnLoad() {
+ jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
+ //optional parameters
+ "options" : "polarnitro"
+ });
+document.JME = jsmeApplet;
+};
+
+// get and take smiles from jsme editor for input field
+function getsmiles() {
+ if (document.JME.smiles() != '') {
+ document.form.identifier.value = document.JME.smiles() ;
+ };
+};
+
+// show model details
+function loadDetails(id, model_url) {
+ button = document.getElementById("link"+id);
+ span = button.childNodes[1];
+ if (span.className == "fa fa-caret-right"){
+ span.className = "fa fa-caret-down";
+ } else if (span.className = "fa fa-caret-down"){
+ span.className = "fa fa-caret-right";
+ };
+ image = document.getElementById("circle"+id);
+ if ($('modeldetails'+id).length == 0) {
+ $(button).hide();
+ $(image).show();
+ aClient = new HttpClient();
+ aClient.get(model_url, function(response) {
+ var details = document.createElement("modeldetails"+id);
+ details.innerHTML = response;
+ document.getElementById("details"+id).appendChild(details);
+ $(button).show();
+ $(image).hide();
+ addExternalLinks();
+ });
+ }
+}
+
// functions used in batch.haml
diff --git a/views/predict.haml b/views/predict.haml
index 1fbcf2f..cca2147 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -1,154 +1,5 @@
%link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet", :property=>"stylesheet"}
%script{:src=>"/jsme/jsme.nocache.js"}
-:javascript
- // GET request
- 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();
- }
- });*/
-
- // get and check input
- function getInput(){
- identifier = document.getElementById("identifier").value.trim();
- fileselect = document.getElementById("fileselect").value;
- if (fileselect != ""){
- return 1;
- };
- if (identifier != ""){
- return 2;
- };
- return 0;
- };
-
- // display wait animation
- 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;
- };
-
- // check if a file was selected for upload
- 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;
- };
-
- // check if a smiles string was entered
- 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;
- };
-
- // check if a model was selected
- 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;
- };
-
- // display jsme editor with option
- function jsmeOnLoad() {
- jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
- //optional parameters
- "options" : "polarnitro"
- });
- document.JME = jsmeApplet;
- };
-
- // get and take smiles from jsme editor for input field
- function getsmiles() {
- if (document.JME.smiles() != '') {
- document.form.identifier.value = document.JME.smiles() ;
- };
- };
-
- // show model details
- function loadDetails(id) {
- button = document.getElementById("link"+id);
- span = button.childNodes[1];
- if (span.className == "fa fa-caret-right"){
- span.className = "fa fa-caret-down";
- } else if (span.className = "fa fa-caret-down"){
- span.className = "fa fa-caret-right";
- };
- image = document.getElementById("circle"+id);
- if ($('modeldetails'+id).length == 0) {
- $(button).hide();
- $(image).show();
- aClient = new HttpClient();
- aClient.get("#{to("/predict/modeldetails/")}"+id, function(response) {
- var details = document.createElement("modeldetails"+id);
- details.innerHTML = response;
- document.getElementById("details"+id).appendChild(details);
- $(button).show();
- $(image).hide();
- addExternalLinks();
- });
- }
- }
-
// 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.card.bg-light
@@ -186,7 +37,7 @@
%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}')", :id => "link#{model.id}", :style=>"font-size:small;"}
+ %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}','#{to("/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;"}