From 5a3be4190688bc8240327930b3e953b09ecc9d9e Mon Sep 17 00:00:00 2001 From: gebele Date: Tue, 28 May 2019 14:25:52 +0000 Subject: before clean up --- views/batch.haml | 51 ++++++++- views/details.haml | 12 ++- views/help.haml | 68 ++++++++++++ views/info.haml | 5 +- views/layout.haml | 40 ++++--- views/model_details.haml | 266 +++++++++++++++++++++++++---------------------- views/neighbors.haml | 2 +- views/predict.haml | 22 +++- views/prediction.haml | 19 +++- views/style.scss | 21 ++++ 10 files changed, 353 insertions(+), 153 deletions(-) create mode 100644 views/help.haml (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index c5dd2f4..fb317c9 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -1,15 +1,47 @@ :javascript + $(document).ready(function(){ + $('[data-toggle="popover"]').popover(); + $('.modal').on('hidden.bs.modal', function () { + $(this).removeData('bs.modal'); + }); + $('.modal').on('show.bs.modal', function(e){ + var button = $(e.relatedTarget); + var modal = $(this); + modal.find('.modal-content').load(button.data("remote")); + }); + }); function progress(value,id) { var percent = Math.round(value); var bar = document.getElementById("bar_"+id); + var est = document.getElementById("est_"+id); var prog = document.getElementById("progress_"+id); bar.style.width = value + '%'; if (percent == 100){ prog.style.display = "none"; + est.style.display = "none"; }; }; + function remaining(id,tasktime,type) { + var est = document.getElementById("est_"+id); + var now = new Date().getTime(); + if ( type == "true" ){ + var approximate = new Date(tasktime*1000 + #{@compounds_size*1000}); + } else { + var approximate = new Date(tasktime*1000 + #{@compounds_size*100}); + } + var remain = approximate - now; + var minutes = Math.floor((remain % (1000 * 60 * 60)) / (1000 * 60)); + var seconds = Math.floor((remain % (1000 * 60)) / 1000); + if ( minutes <= 0 && seconds <= 0 ) { + var newtime = "0m " + "00s "; + } else { + var newtime = minutes + "m " + seconds + "s "; + } + est.innerHTML = newtime; + }; + var HttpClient = function() { this.get = function(aUrl, aCallback) { var anHttpRequest = new XMLHttpRequest(); @@ -58,9 +90,9 @@ $('#data-container_'+id).show(); $('#pager_'+id).show(); $('#pager_'+id).pagination({ - dataSource: '#{to("/prediction/task/?predictions=")}' + task_id + '&model=' + model_id , + dataSource: '#{to("/prediction/task/?predictions=")}' + task_id, locator: 'prediction', - totalNumber: #{@compounds.size}, + totalNumber: '#{@compounds_size}', pageSize: 1, showPageNumbers: true, showGoInput: true, @@ -106,15 +138,18 @@ %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')"} %span.fa.fa-caret-right Details - %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/csv/#{task}/#{model}/#{@filename}")}", :title=>"download"} + %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/batch/download?tid=#{task}")}", :title=>"download"} %span.fa.fa-download CSV %div{:id=>"progress_#{idx}", :style=>"width:100%;height:3px;position:relative;background-color:#ccc;"} %div{:id=>"bar_#{idx}", :style=>"background-color: #4CAF50;width:10px;height:3px;position:absolute;"} + %p{:id=>"est_#{idx}"} + waiting ... - # increase interval timer for large datasets - - ctimer = ((@compounds.size/1000) == 0 ? 1000 : ((@compounds.size/1000)*1000)) + - ctimer = ((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) :javascript var timer = #{ctimer}; + var tasktime = #{task.generation_time.to_i}; $(document).ready(function(){ // check button class before execute a task if (#{idx} > 0){ @@ -122,12 +157,18 @@ var button = document.getElementById("detailsbutton_#{idx-1}"); if(!button.classList.contains('disabled')){ renderTask('#{task}','#{model}',#{idx}); + remaining(#{idx},tasktime); } }, timer ); }else{ markers[#{idx}] = setInterval(function(){ renderTask('#{task}','#{model}',#{idx}); + remaining(#{idx},tasktime,#{m.classification?}); }, timer ); }; }); - #data-container.card.d-none{:id=>idx} + #data-container.card.d-none.table-responsive{:id=>idx} +%div.modal.fade{:id=>"details", :tabindex=>"-1", :role=>"dialog"} + %div.modal-dialog.modal-lg{:role=>"document"} + %div.modal-content + diff --git a/views/details.haml b/views/details.haml index be4948a..abf7518 100644 --- a/views/details.haml +++ b/views/details.haml @@ -6,7 +6,7 @@ %button.close{ :type=>" button", data: { dismiss:"modal"}} × %h3 Names and synonyms: - %p= @compound.svg + %p= embedded_svg(@compound.svg, :title=>"x") %p %b="SMILES:" %p= @smiles @@ -14,6 +14,11 @@ %b="InChI:" %p= @inchi %br + - cid = @compound.cid + - if cid + %b="CID:" + %p= cid + %br %b="Names:" %p{:style=>"padding-left:0.5em;"} - if @names !~ /^no names/i @@ -23,6 +28,9 @@ %hr %p{:style=>"padding-left:0.5em;"} / pubchem link - %a.btn.btn-primary{:href=>"http://aop.in-silico.ch/", :title=>"Link opens in new window.", :alt=>"pubchem read across", :rel=>"external"} PubChem read across + - if cid + %a.btn.btn-primary{:href=>"http://aop.in-silico.ch/cid/#{cid}", :title=>"Link opens in new window.", :alt=>"pubchem read across", :rel=>"external"} PubChem read across + - else + %a.btn.btn-primary{:href=>"http://aop.in-silico.ch/", :title=>"Link opens in new window.", :alt=>"pubchem read across", :rel=>"external"} PubChem read across %i (experimental) %br diff --git a/views/help.haml b/views/help.haml new file mode 100644 index 0000000..84be516 --- /dev/null +++ b/views/help.haml @@ -0,0 +1,68 @@ +%div.card.bg-light + %div.card-body + %h3 How to use batch prediction + + %p + You have two options to format your comma or tab sperated spreadsheet for batch predictions: + + %br + %p + %div.row + %div.col-md-6 + %strong Option 1: + %br + A spreadsheet with a single column and a header. The header should specify the input format (SMILES or InChI are accepted). + %div.col-md-6 + %table.help + %tr.row + %th.col-md-12 + SMILES + %tr.row + %td.col-md-12 + C1ccccc1NN + %tr.row + %td.col-md-12 + Cc1ccc(cc1\N=C=O)/N=C=O + %tr.row + %td.col-md-12 + OC(=O)c1ccc(cc1)C(=O)O + %tr.row + %td.col-md-12 + ="..." + %br + %p + %div.row + %div.col-md-6 + %strong Option 2: + %br + A spreadsheet with two columns and a header. The first column may contain an arbitrary ID, + the second column the compound structure (as SMILES or InChI). + The header consists of "ID" followed by the input format (SMILES or InChI). + %div.col-md-6 + %table.help + %tr.row + %th.col-md-4 + ID + %th.col-md-8 + SMILES + %tr.row + %td.col-md-4 + 2735 + %td.col-md-8 + C1ccccc1NN + %tr.row + %td.col-md-4 + A2 + %td.col-md-8 + O=C(OCCCC)C1=CC=CC=C1C(OCCCC)=O + %tr.row + %td.col-md-4 + 82 B-6 304663 + %td.col-md-8 + CC(C)(C)C1=CC2(C=C(C1=O)C(C)(C)C)CCC(=O)O2 + %tr.row + %td.col-md-4 + ="..." + %td.col-md-8 + ="..." + %br diff --git a/views/info.haml b/views/info.haml index d8b93f9..148d53f 100644 --- a/views/info.haml +++ b/views/info.haml @@ -1,2 +1,3 @@ -%div.info - We are rebuilding the models. It will take a while, please be patient and reload the page in some time. +%div.card.border-warning.mb-3 + %div.card-body + We are rebuilding the models. It will take a while, please be patient and reload the page in some time. diff --git a/views/layout.haml b/views/layout.haml index 1d95ae2..3304c69 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -24,20 +24,14 @@ %div.row.align-items-center %div.col-3 %a.card-link{:href=> "https://in-silico.ch/", :rel=>"external"} - %img{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"100px", :heigth=>"100px"} - %a.card-link{:href=> "https://openrisknet.org/", :rel=>"external"} - %img{:src=>"/images/orn-logo.jpg", :alt=>"orn-logo", :width=>"100px", :heigth=>"100px"} - %div.col-6 + %img{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"120px"} + %div.col-7 %h1 lazar toxicity predictions - %div.col-3 - %a{:href=>"https://twitter.com/intent/tweet?source=http%3A%2F%2Flazar.in-silico.ch&text=http%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Tweet"} - %span.fa.fa-2x.fa-twitter-square - %a{:href=>"https://plus.google.com/share?url=http%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Share on Google+"} - %span.fa.fa-2x.fa-google-plus-square - %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", :rel=>"external", :title=>"Share on LinkedIn"} - %span.fa.fa-2x.fa-linkedin-square - %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", :rel=>"external", :title=>"Share on Facebook"} - %span.fa.fa-2x.fa-facebook-square + %div.col-2 + %h5 + %a.text-right{:href=>"https://nano-lazar.in-silico.ch", :rel=>"external"} + nano-lazar + %span.fa.fa-xs.fa-external-link %div.container-fluid %topline.alert %p @@ -54,7 +48,12 @@ %a{ :href=>"https://doi.org/10.3389/fphar.2013.00038", :rel=>"external"} %img{ :src=>"https://zenodo.org/badge/DOI/10.3389/zenodo.10.3389.svg", :alt=>"DOI"} in scientific publications. - + %a{:href=>"https://twitter.com/intent/tweet?source=http%3A%2F%2Flazar.in-silico.ch&text=https%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Tweet"} + %span.fa.fa-twitter-square + %a{:href=>"http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Flazar.in-silico.ch&title=&summary=&source=https%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Share on LinkedIn"} + %span.fa.fa-linkedin-square + %a{:href=>"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flazar.in-silico.ch&title=&summary=&source=https%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :title=>"Share on Facebook"} + %span.fa.fa-facebook-square = yield @@ -67,6 +66,19 @@ %a{:href => 'http://www.in-silico.ch', :rel => "external"} in silico toxicology gmbh 2004 - #{Time.now.year.to_s} | %a{:href => to("/license"), :rel => "external"} GPL3 License + %supporters.row + %div.card-body.text-center + %div.card-title + Financial support by + %div.card-text + %a{:href=>"http://www.bfr.bund.de/de/start.html", :rel=>"external"} + %img{:src=>"/images/bfr_logo.gif"} + %a{:href=>"http://www.opentox.org/", :rel=>"external"} + %img{:src=>"/images/ot_logo.png"} + %a{:href=>"https://enanomapper.net/", :rel=>"external"} + %img{:src=>"/images/enm_logo.png"} + %a{:href=>"https://www.researchgate.net/institution/Nestle_SA/department/Nestle_Research_Center", :rel=>"external"} + %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;"} diff --git a/views/model_details.haml b/views/model_details.haml index 5417a48..8691325 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -9,9 +9,8 @@ = "Type:\t" = type %br - - training_dataset = OpenTox::Dataset.find model.model.training_dataset_id = "Training compounds:\t" - = training_dataset.data_entries.size + = data_entries.count/3 %br = "Training dataset:\t" %a{:href=>"#{to("/predict/dataset/#{training_dataset.name}")}"} @@ -20,134 +19,157 @@ %div.card.bg-light %div.card-body %h6.card-title Algorithms: - Similarity: - %a{:href=> "http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["similarity"]["method"].sub("::", "%2F")}", :rel=>"external"} - = model.model.algorithms["similarity"]["method"] - = ", min: #{model.model.algorithms["similarity"]["min"]}" - %br - Prediction: - - if model.model.algorithms["prediction"]["method"] !~ /Caret/ - %a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"} - = model.model.algorithms["prediction"]["method"] - - else - %a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox/Algorithm/Caret", :rel=>"external"} - = model.model.algorithms["prediction"]["method"] + %p.card-text + Similarity: + %a.card-link{:href=> "http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["similarity"]["method"].sub("::", "%2F")}", :rel=>"external"} + = model.model.algorithms["similarity"]["method"] + = ", min: #{model.model.algorithms["similarity"]["min"]}" + %br + Prediction: + - if model.model.algorithms["prediction"]["method"] !~ /Caret/ + %a.card-link{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{model.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"} + = model.model.algorithms["prediction"]["method"] + - else + %a.card-link{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox/Algorithm/Caret", :rel=>"external"} + = model.model.algorithms["prediction"]["method"] - %br - Descriptors: - = model.model.algorithms["descriptors"]["method"]+"," - = model.model.algorithms["descriptors"]["type"] + %br + Descriptors: + = model.model.algorithms["descriptors"]["method"]+"," + = model.model.algorithms["descriptors"]["type"] %div.card.bg-light %div.card-body - if type == "Classification" - %h6.card-title Independent crossvalidations: + %h6.card-text Independent crossvalidations: - else - %h6.card-title Independent crossvalidations (-log10 transformed): - %div.row{:id=>"validations#{model.id}"} - - crossvalidations.each do |cv| - %span.col-4 - = "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 - = "Weighted accuracy:\t" - = cv.weighted_accuracy.round(3) if cv.weighted_accuracy - - if cv.true_rate - %br - = "True positive rate:\t" - = cv.true_rate[cv.accept_values[0]].round(3) - %br - = "True negative rate:\t" - = cv.true_rate[cv.accept_values[1]].round(3) - - if cv.predictivity - %br - = "Positive predictive value:\t" - = cv.predictivity[cv.accept_values[0]].round(3) - %br - = "Negative predictive value:\t" - = cv.predictivity[cv.accept_values[1]].round(3) - %p - - ["confusion_matrix", "weighted_confusion_matrix"].each_with_index do |matrix,idx| - %b= (idx == 0 ? "Confusion Matrix" : "Weighted Confusion Matrix") - %div.table-responsive - %table.table.table-sm.table-borderless - %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 - =( idx == 1 ? cv.send(matrix)[0][0].round(3) : cv.send(matrix)[0][0]) - %td - =( idx == 1 ? cv.send(matrix)[0][1].round(3) : cv.send(matrix)[0][1]) - -#%td - =cv.confusion_matrix[0][0]+cv.confusion_matrix[0][1] - %tr - %td - %td inactive - %td - =( idx == 1 ? cv.send(matrix)[1][0].round(3) : cv.send(matrix)[1][0]) - %td - =( idx == 1 ? cv.send(matrix)[1][1].round(3) : cv.send(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 + %h6.card-text Independent crossvalidations (-log10 transformed): + - crossvalidations.each_with_index do |cv,idx| + %div.card.bg-light + %div.card-body + %h6.card-title= "Nr.#{idx+1} | Num folds:#{cv.folds}" + %p.card-text + / predictions nr + %div.row + %div.col-6 + %h6 + Predictions number: + - cv.nr_predictions.each do |key,value| + %div.row + %div.col + %h6 + = key + %div.col + = value + - if model.classification? + %hr + %div.row + / accuracy + %div.col-6 + %h6 + Accuracy: + - cv.accuracy.each do |key, value| + %div.row + %div.col + %h6 + = key + %div.col + = value.signif(3) + %hr + / matrixes + %div.row + - cv.confusion_matrix.each do |key,matrix| + %div.col-4 + %h6 + Confusion Matrix: + %i= key %br - %br - /= "Confidence plot:" - /%p.plot - / %img{:src=>"confp#{cv.id}.svg"} + %table.table.table-sm.table-borderless.col-4 + %tbody + %tr + %td + %td + %td + %h6 actual + %td + %tr + %td + %td + %td active + %td inactive + %tr + %td + %h6 predicted + %td active + %td + = matrix[0][0] + %td + = matrix[0][1] + %tr + %td + %td inactive + %td + = matrix[1][0] + %td + = matrix[1][1] + %br - if model.regression? - %br - %a{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE: - = cv.rmse.round(3) if cv.rmse - %br - %a{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE: - = cv.mae.round(3) if cv.mae - %br - %a{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"2"+":" - = 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"} - + %hr + %div.row + %div.col + %h6 + %a.card-link{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} + RMSE: + - cv.rmse.each do |key,value| + %div.row + %div.col + %h6 + = key + %div.col + = value.signif(3) + %div.col + %h6 + %a.card-link{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} + MAE: + - cv.mae.each do |key,value| + %div.row + %div.col + %h6 + = key + %div.col + = value.signif(3) + %div.col + %h6 + %a.card-link{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"2"+":" + - cv.r_squared.each do |key,value| + %div.row + %div.col + %h6.card-title + = key + %div.col + = value.signif(3) + %hr + %div.row + %div.col + %h6 + Within prediction interval: + - cv.within_prediction_interval.each do |key,value| + %div.row + %div.col + %h6 + = key + %div.col + = value + %div.col + %h6 + Out of prediction interval: + - cv.out_of_prediction_interval.each do |key,value| + %div.row + %div.col + %h6 + = key + %div.col + = value %div.card.bg-light %div.card-body %h6.card-title QMRF: diff --git a/views/neighbors.haml b/views/neighbors.haml index f9d2691..c4f3b94 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -37,7 +37,7 @@ - c = Compound.find(neighbor) %td %a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(c.id.to_s)}/details"), :id=>"link#{j+1}#{count}"}} - = c.svg + = embedded_svg(c.svg, :title=>"click for details") %td %p= c.smiles diff --git a/views/predict.haml b/views/predict.haml index d23f26a..d525b33 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -1,6 +1,7 @@ %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(); @@ -23,6 +24,7 @@ } });*/ + // get and check input function getInput(){ identifier = document.getElementById("identifier").value.trim(); fileselect = document.getElementById("fileselect").value; @@ -34,6 +36,8 @@ }; return 0; }; + + // display wait animation function showcircle() { switch (getInput()){ case 0: @@ -64,6 +68,8 @@ }; return false; }; + + // check if a file was selected for upload function checkfile() { var fileinput = document.getElementById("fileselect"); if(fileinput.value != "") { @@ -73,6 +79,8 @@ alert("Please select a file (csv)."); return false; }; + + // check if a smiles string was entered function checksmiles () { getsmiles(); if (document.form.identifier.value == "") { @@ -83,6 +91,8 @@ }; return true; }; + + // check if a model was selected function checkboxes () { var checked = false; $('input[type="checkbox"]').each(function() { @@ -97,6 +107,8 @@ }; return true; }; + + // display jsme editor with option function jsmeOnLoad() { jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", { //optional parameters @@ -104,12 +116,15 @@ }); 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]; @@ -133,6 +148,7 @@ }); } } + // 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 @@ -147,11 +163,13 @@ %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;"} + %p{:style=>("display:none;" unless ENV["BATCH_MODE"].to_boolean)} %label{:for=>"fileselect"} or upload a CSV file for batch predictions: %br - %input.form-control-file{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv"} + %span.btn.btn-file{:style=>"background-color:white;"} + %input.form-control-file{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv"} + %a.btn.btn-warning{:href => to("/help"), :rel => "external", :style=>"margin-left: 1em;"} Help %fieldset#middle.card.bg-light #models.card-body diff --git a/views/prediction.haml b/views/prediction.haml index 47e83fa..2a315f9 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -16,14 +16,14 @@ New Prediction %div.card.bg-light %div.card-body - %h3.card-title Prediction Results: + %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: to("/prediction/#{@compound.id}/details"), :id=>"link01"}} - = @compound.svg + = embedded_svg(@compound.svg, :title=>"click for details") %p= @compound.smiles - @model_types = {} - @dbhit = {} @@ -71,9 +71,9 @@ %br = (type == "Regression") ? "#{prediction[:value].delog10.signif(3)} (#{unit})
#{@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 + / show prediction interval or probability + - if type == "Regression" %p - - if type == "Regression" %b 95% Prediction interval: - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval]) / prediction interval popover @@ -82,7 +82,12 @@ = 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 + %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."}} @@ -92,6 +97,10 @@ - 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 diff --git a/views/style.scss b/views/style.scss index 5d47872..01b5147 100644 --- a/views/style.scss +++ b/views/style.scss @@ -72,3 +72,24 @@ ul.share-buttons{ table-layout: fixed; width: 100%; } +.help table, .help th, .help td { + background-color: white; + border: 1px solid black; + border-bottom: none; + width: 100%; +} +.help th, .help td { + padding: 10px; + text-align: left; +} +/*img.supporters { + width: 150px; + height: 150px; +}*/ +supporters{ + background-color: #fff; + img{ + width: 200px; + margin: 1em; + } +} -- cgit v1.2.3