From f6f186de7144bfbddc508e1330f334d3ee7f2005 Mon Sep 17 00:00:00 2001 From: gebele Date: Tue, 12 Jun 2018 10:30:14 +0200 Subject: adjust link;add logo route --- views/layout.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'views') diff --git a/views/layout.haml b/views/layout.haml index 9b13e2f..2558071 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -24,7 +24,7 @@ %header.page-header %div.row %div.col-md-3 - %a{:href=> to("/predict")} + %a{:href=> to("/")} %img.media-object{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"150px", :heigth=>"150px"} %div.col-md-6 %h1.media-heading -- cgit v1.2.3 From b3ed4f0dbf47ed4986b7ff745324fbde20123631 Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 27 Aug 2018 11:33:10 +0000 Subject: updated to bs 4 --- views/error.haml | 7 +- views/faq.haml | 8 +- views/layout.haml | 132 ++++++++++++++------------------ views/model_details.haml | 140 +++++++++++++++++----------------- views/neighbors.haml | 177 +++++++++++++++++++++++-------------------- views/predict.haml | 132 ++++++++++++++++---------------- views/prediction.haml | 193 ++++++++++++++++++++++++----------------------- views/style.scss | 52 +++---------- 8 files changed, 404 insertions(+), 437 deletions(-) (limited to 'views') diff --git a/views/error.haml b/views/error.haml index 05cb0da..ca6a0b2 100644 --- a/views/error.haml +++ b/views/error.haml @@ -1,7 +1,6 @@ -%div.well +%div.card %a.btn.btn-warning{:href => to('/predict')} - %i.glyphicon.glyphicon-menu-left + %i.fa.fa-caret-left Back - %hr - %div.well{:style=>"width:100%;margin-bottom:2em;"} + %div.card-body = @error diff --git a/views/faq.haml b/views/faq.haml index 818b96a..63479e2 100644 --- a/views/faq.haml +++ b/views/faq.haml @@ -1,2 +1,6 @@ -%div.well.faq - = @faq +%div.card + %a.btn.btn-warning{:href => to('/predict')} + %i.fa.fa-caret-left + Back + %div.card-body + = @faq diff --git a/views/layout.haml b/views/layout.haml index 2558071..a520ed6 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -6,77 +6,54 @@ %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"} + %link{:href=>"/stylesheets/bootstrap.min.css", :rel=>"stylesheet"} + %link{:href=>"/stylesheets/font-awesome.min.css", :rel=>"stylesheet"} + %link{:href=>"/style.css", :rel=>"stylesheet"} + %script{ :src=>"/javascripts/jquery.min.js"} + %script{ :src=>"/javascripts/popper.min.js"} %script{:src=>"/javascripts/lazar-gui.js"} - %script{:src=>"/javascripts/google_analytics_lazar.js"} + %script{ :src=>"/javascripts/bootstrap.js"} + //%script{ :src=>"/javascripts/bootstrap.js.map"} + //%script{:src=>"/javascripts/google_analytics_lazar.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-3 - %a{:href=> to("/")} - %img.media-object{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"150px", :heigth=>"150px"} - %div.col-md-6 - %h1.media-heading - lazar toxicity predictions - %div.col-md-3 - %h1.media-heading - %small - %a.btn{:href=>"https://nano-lazar.in-silico.ch", :rel=>"external"} - nano-lazar - %span.glyphicon.glyphicon-new-window - + %header.container-fluid.page-header + %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 + %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.container-fluid %topline.alert - %div.row - %div.col-md-10 - Problems, bugs, ideas for improvements ? Please report at our - %a{:href => 'https://github.com/opentox/lazar-gui/issues', :rel => "external"} issue tracker - , check out the - %a{:href=> to("/faq"), :rel => "external"} FAQ - page or send us an email. - %a{ :href=>"mailto:info@in-silico.ch?subject=[lazar v#{@version}]", :target=>"_top"} - %img.share{:src=>"/images/Email.png"} - [version: #{@version}] - %div.col-md-2{:style=>"text-align:right;"} - %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"} - %img.share{:src=>"/images/Twitter.png"} - %a{:href=>"https://plus.google.com/share?url=http%3A%2F%2Flazar.in-silico.ch", :rel=>"external", :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", :rel=>"external", :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", :rel=>"external", :title=>"Share on Facebook"} - %img.share{:src=>"/images/Facebook.png"} - %div.row - %div.col-md-12 - Please cite - %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. + %p + Problems, bugs, ideas for improvements ? Please report at our + %a{:href => 'https://github.com/opentox/lazar-gui/issues', :rel => "external"} issue tracker + , check out the + %a{:href=> to("/faq")} FAQ + page or send us an email. + %a{ :href=>"mailto:info@in-silico.ch?subject=[lazar v#{@version}]", :target=>"_top"} + %span.fa.fa-envelope + [version: #{@version}] + %p + Please cite + %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. - :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 @@ -89,24 +66,13 @@ %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 - %div.panel.panel-default - Financial support by - %div.panel-body - %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;"} - %span.glyphicon.glyphicon-circle-arrow-up{:style => "font-size:3em;color:black;"} + %span.fa.fa-caret-up{:style => "font-size:3em;color:black;"} :javascript + //var $j = jQuery.noConflict(); + // $j is now an alias to the jQuery function; creating the new alias is optional. $("#back-top").hide(); $(function () { $(window).scroll(function () { @@ -124,3 +90,15 @@ return false; }); }); + $(document).ready(function(){ + $("#back-top").hide(); + $(".blind").on('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'); + }); + }); diff --git a/views/model_details.haml b/views/model_details.haml index c5e3370..3f1cc7a 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -1,7 +1,6 @@ -%div.panel.panel-default - %div.panel-heading - %b Model: - %div.panel-body +%div.card.bg-light + %div.card-body + %h6.card-title Model: Source: %a{:href=>model.source, :rel=>"external"} = model.source @@ -18,10 +17,9 @@ %a{:href=>"#{to("/predict/dataset/#{training_dataset.name}")}"} = training_dataset.name -%div.panel.panel-default - %div.panel-heading - %b Algorithms: - %div.panel-body +%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"] @@ -40,18 +38,15 @@ = model.model.algorithms["descriptors"]["method"]+"," = model.model.algorithms["descriptors"]["type"] -%div.panel.panel-default - - if type == "Classification" - %div.panel-heading - %b Independent crossvalidations: - - else - %div.panel-heading - %b Independent crossvalidations (-log10 transformed): - %div.panel-body - /%div.row{:id=>"validations#{model.id}", :style=>"background-color:#f5f5f5;"} +%div.card.bg-light + %div.card-body + - if type == "Classification" + %h6.card-title Independent crossvalidations: + - else + %h6.card-title Independent crossvalidations (-log10 transformed): %div.row{:id=>"validations#{model.id}"} - crossvalidations.each do |cv| - %span.col-xs-4.col-sm-4.col-md-4.col-lg-4 + %span.col-4 = "Num folds:\t" = cv.folds %br @@ -84,64 +79,65 @@ %p - ["confusion_matrix", "weighted_confusion_matrix"].each_with_index do |matrix,idx| %b= (idx == 0 ? "Confusion Matrix" : "Weighted 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 - =( 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 - %br + %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 + %br %br /= "Confidence plot:" /%p.plot / %img{:src=>"confp#{cv.id}.svg"} - if model.regression? %br - %a.ht5{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE: + %a{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE: = cv.rmse.round(3) if cv.rmse %br - %a.ht5{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE: + %a{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE: = cv.mae.round(3) if cv.mae %br - %a.ht5{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"2"+":" + %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:" @@ -152,10 +148,10 @@ /%p.plot / %img{:src=>"/corrp#{cv.id}.svg"} -%div.panel.panel-default - %div.panel-heading - %b QMRF: - %div.panel-body - %a.btn.btn-default.btn-xs{:href=>"#{to("/report/#{model.id}")}", :id=>"report#{model.id}", :style=>"font-size:small;"} - %span.glyphicon.glyphicon-download-alt +%div.card.bg-light + %div.card-body + %h6.card-title QMRF: + %a.btn.btn-outline-info{:href=>"#{to("/report/#{model.id}")}", :id=>"report#{model.id}", :style=>"font-size:small;"} + %span.fa.fa-download XML +%br diff --git a/views/neighbors.haml b/views/neighbors.haml index 8af59b6..f9d2691 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -1,83 +1,100 @@ -%div.results - %h3 Neighbors: - / tabs div - #tabs - %ul.nav.nav-tabs.nav-justified{:id=>"neighborTabs", :role=>"tablist", :style=>"width:100%;overflow-x:auto;"} - - @models.each_with_index do |model,i| - / get predictionFeature type - - m = Model::Lazar.find model.model_id.to_s - %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 - - @predictions.each_with_index do |prediction,j| - #results.tab-pane{:id=>"#{j+1}", :class => ("active" if j == 0)} - :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] - %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=>"javascript:void(0)", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", 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=>"javascript:void(0)", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"Tanimoto/Jaccard similarity based on Molprint2D fingerprints."}, :style=>"z-index:auto+10;"} - %tbody - - type = @model_types[j] - - unit = @models[j].unit - - prediction[:neighbors].uniq.each_with_index do |neighbor,count| - %tr - / Compound - - c = Compound.find(neighbor) - %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(c.id.to_s)}/details"), :id=>"link#{j+1}#{count}"}} - = c.svg - %p= c.smiles - - / Measured Activity - %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;white-space:nowrap;"} - - if neighbor[:measurement].is_a?(Array) - = (type == "Regression") ? neighbor[:measurement].collect{|value| "#{value.delog10.signif(3)} (#{unit})
#{c.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("
") : neighbor[:measurement].join(", ") - - else - - if !neighbor[:measurement].nil? - = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})
#{c.mmol_to_mg(neighbor[:measurement].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : neighbor[:measurement] - / Similarity = tanimoto - %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;"} - = neighbor[:similarity].round(3) +%div.card.bg-light + %div.card-body + %div.card-title + %h3 Neighbors: + #tabs + %ul.nav.nav-pills.nav-justified{:id=>"neighborTabs", :role=>"tablist"} + - @models.each_with_index do |model,i| + / get predictionFeature type + - m = Model::Lazar.find model.model_id.to_s + %li.nav-item + %a.nav-link{:class => ("active" if i ==0), :href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}, :onclick=>"sortTable('#{i+1}');"} + = "#{model.endpoint} (#{model.species})" + %div.tab-content + - @predictions.each_with_index do |prediction,j| + #results.tab-pane{:id=>"#{j+1}", :class => ("active" if j == 0)} + - if prediction[:neighbors] + %div.table-responsive + %table.table.table-bordered.table-hover{:id=>"nTable#{j+1}"} + %thead + %tr + %th{:scope=>"col"} + Compound + %th{:scope=>"col"} + SMILES + %th{:scope=>"col"} + Measured Activity + %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"} + %th{:scope=>"col"} + Similarity + %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"Tanimoto/Jaccard similarity based on Molprint2D fingerprints."}, :style=>"z-index:auto+10;"} + %tbody + - type = @model_types[j] + - unit = @models[j].unit + - prediction[:neighbors].uniq.each_with_index do |neighbor,count| + %tr + / Compound + - 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 + %td + %p= c.smiles + + / Measured Activity + %td + - if neighbor[:measurement].is_a?(Array) + = (type == "Regression") ? neighbor[:measurement].collect{|value| "#{value.delog10.signif(3)} (#{unit})
#{c.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("
") : neighbor[:measurement].join(", ") + - else + - if !neighbor[:measurement].nil? + = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})
#{c.mmol_to_mg(neighbor[:measurement].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : neighbor[:measurement] + / Similarity = tanimoto + %td + = neighbor[:similarity].round(3) - - else - %span.btn.btn-default.disabled - = "Not enough similar compounds 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 + %div.modal.fade{:id=>"details#{j+1}", :role=>"dialog"} + %div.modal-dialog.modal-lg{:role=>"document"} + %div.modal-content +- @models.each_with_index do |model,i| + :javascript + // sort all neighbors tables by similarity + document.addEventListener('DOMContentLoaded', function() { + var id = '#{i+1}'; + var table, rows, switching, i, x, y, shouldSwitch; + table = document.getElementById("nTable"+id); + switching = true; + /* Make a loop that will continue until + no switching has been done: */ + while (switching) { + // Start by saying: no switching is done: + switching = false; + rows = table.rows; + /* Loop through all table rows (except the + first, which contains table headers): */ + for (i = 1; i < (rows.length - 1); i++) { + // Start by saying there should be no switching: + shouldSwitch = false; + /* Get the two elements you want to compare, + one from current row and one from the next: */ + x = rows[i].getElementsByTagName("TD")[3]; + y = rows[i + 1].getElementsByTagName("TD")[3]; + // Check if the two rows should switch place: + if (parseFloat(x.innerHTML) < parseFloat(y.innerHTML)) { + // If so, mark as a switch and break the loop: + shouldSwitch = true; + break; + } + } + if (shouldSwitch) { + /* If a switch has been marked, make the switch + and mark that a switch has been done: */ + rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); + switching = true; + } + } + }, false); diff --git a/views/predict.haml b/views/predict.haml index 2308911..d23f26a 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -13,7 +13,7 @@ } }; - $(function() { + /*$(function() { $('a[data-toggle="tab"]').on('click', function (e) { localStorage.setItem('lastTab', $(e.target).attr('href')); }); @@ -21,7 +21,7 @@ if (lastTab) { $('a[href="'+lastTab+'"]').click(); } - }); + });*/ function getInput(){ identifier = document.getElementById("identifier").value.trim(); @@ -110,76 +110,72 @@ }; }; + 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.well - %h2 1. Draw a chemical structure - #insert + %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;"} + %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"} - %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}')", :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;"} diff --git a/views/prediction.haml b/views/prediction.haml index 4181c22..1cddca6 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -1,95 +1,111 @@ :javascript $(document).ready(function(){ - $('[data-toggle="popover"]').popover(); + //$('[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")); + }); }); - -%div.well +%div.card %a.btn.btn-warning{:href => to('/predict')} - %i.glyphicon.glyphicon-menu-left + %span.fa.fa-caret-left New Prediction - / displays all prediction result in first table - %h3 Prediction Results: - %div.table-responsive - %table.table.table-bordered{:id=>"overview"} - %tbody - %tr - %td{:id=>"compound", :style=>"vertical-align:top;text-align:center;"} - %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@compound.id.to_s)}/details"), :id=>"link01"}} - = @compound.svg - %p= @compound.smiles - - @model_types = {} - - @dbhit = {} - - @predictions.each_with_index do |prediction,i| - - type = @models[i].model.class.to_s.match("Classification") ? "Classification" : "Regression" - - @model_types[i] = type - - unit = @models[i].unit - %td{:style=>"vertical-align:top;white-space:nowrap;"} - %b{:class => "title"} - = "#{@models[i].endpoint.gsub('_', ' ')} (#{@models[i].species})" - - / check for prediction - - if prediction[:neighbors] and !prediction[:value].nil? - %p - / show model type (classification|regression) - %b Type: - = type - %p - / check for database hit - - if prediction[:info] =~ /\b(identical)\b/i - - @dbhit[i] = true - - / show message about dbhit and measurements +%div.card.bg-light + %div.card-body + %h3.card-title Prediction Results: + %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 + %p= @compound.smiles + - @model_types = {} + - @dbhit = {} + - @predictions.each_with_index do |prediction,i| + - type = @models[i].model.class.to_s.match("Classification") ? "Classification" : "Regression" + - @model_types[i] = type + - unit = @models[i].unit + %td + %b{:class => "title"} + = "#{@models[i].endpoint.gsub('_', ' ')} (#{@models[i].species})" + + / check for prediction + - if prediction[:neighbors] and !prediction[:value].nil? %p - :plain - This compound was part of the training dataset. All information
- from this compound was removed from the training data before the
- prediction, to obtain unbiased results. + / show model type (classification|regression) + %b Type: + = type + %p + / check for database hit + - if prediction[:info] =~ /\b(identical)\b/i + - @dbhit[i] = true + + / show message about dbhit and measurements %p - %b Measured activity: - %br - - if prediction[:measurements].is_a?(Array) - = (type == "Regression") ? prediction[:measurements].collect{|value| "#{value.delog10.signif(3)} (#{unit})
#{@compound.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("
") : prediction[:measurements].join(", ") - - else - = (type == "Regression") ? "#{prediction[:measurements].delog10.signif(3)} (#{unit})
#{@compound.mmol_to_mg(prediction[:measurements].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:measurements] - - - else - - @dbhit[i] = false - - / show prediction - %p - %b Prediction: - / prediction popover - %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Prediction", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"

lazar searches the training dataset for similar compounds (neighbors) and calculates the prediction from their experimental activities.

Classification:
Majority vote of neighbor activities weighted by similarity.

Regression:
Prediction from a local partial least squares regression model with neighbor activities weighted by similarity.

Original publication.

\"DOI\""}} - %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] + :plain + This compound was part of the training dataset. All information
+ from this compound was removed from the training data before the
+ prediction, to obtain unbiased results. + %p + %b Measured activity: + %br + - if prediction[:measurements].is_a?(Array) + = (type == "Regression") ? prediction[:measurements].collect{|value| "#{value.delog10.signif(3)} (#{unit})
#{@compound.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("
") : prediction[:measurements].join(", ") + - else + = (type == "Regression") ? "#{prediction[:measurements].delog10.signif(3)} (#{unit})
#{@compound.mmol_to_mg(prediction[:measurements].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:measurements] - / show prediction interval or probability + - else + - @dbhit[i] = false + + / show prediction %p - - if type == "Regression" - %b 95% Prediction interval: - - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval]) - / prediction interval popover - %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Prediction intervall", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"An estimate of prediction uncertainty. The \"real\" value should be with 95% probability within the prediction interval."}} - %br - = interval.nil? ? "--" : "#{interval[1].delog10.signif(3)} - #{interval[0].delog10.signif(3)} (#{unit})" + %b Prediction: + / prediction popover + %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Prediction", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"

lazar searches the training dataset for similar compounds (neighbors) and calculates the prediction from their experimental activities.

Classification:
Majority vote of neighbor activities weighted by similarity.

Regression:
Prediction from a local partial least squares regression model with neighbor activities weighted by similarity.

Original publication.

\"DOI\""}} %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 - %b Probability: - / probability popover - %a.btn.glyphicon.glyphicon-info-sign{: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."}} - - unless prediction[:probabilities].nil? + = (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 + %p + - if type == "Regression" + %b 95% Prediction interval: + - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval]) + / prediction interval popover + %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Prediction intervall", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"An estimate of prediction uncertainty. The \"real\" value should be with 95% probability within the prediction interval."}} %br - = "#{prediction[:probabilities].keys[0]}: #{prediction[:probabilities].values[0].signif(3)}" - - if prediction[:probabilities].size == 2 + = 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 + %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."}} + - unless prediction[:probabilities].nil? %br - = "#{prediction[:probabilities].keys[1]}: #{prediction[:probabilities].values[1].signif(3)}" - - / show warnings and info - %p + = "#{prediction[:probabilities].keys[0]}: #{prediction[:probabilities].values[0].signif(3)}" + - if prediction[:probabilities].size == 2 + %br + = "#{prediction[:probabilities].keys[1]}: #{prediction[:probabilities].values[1].signif(3)}" + + / show warnings and info + %p + - if !prediction[:info].blank? + %b Info: + %br + %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",
") + - if !prediction[:warnings].blank? + %b Warnings: + - prediction[:warnings].uniq.each do |warning| + %p=warning #.sub(/,/, ",
") + /%p=warning.sub(/substances/, "substances
").sub(/prediction\:/, "prediction\:
") + - else + %br - if !prediction[:info].blank? %b Info: %br @@ -97,24 +113,13 @@ - if !prediction[:warnings].blank? %b Warnings: - prediction[:warnings].uniq.each do |warning| - %p=warning #.sub(/,/, ",
") - /%p=warning.sub(/substances/, "substances
").sub(/prediction\:/, "prediction\:
") - - else - %br - - if !prediction[:info].blank? - %b Info: - %br - %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",
") - - if !prediction[:warnings].blank? - %b Warnings: - - prediction[:warnings].uniq.each do |warning| - %br - %p=warning.sub(/,/, ",
") + %br + %p=warning.sub(/,/, ",
") - / always show the neighbors table, message is given there - = haml :neighbors, :layout => false, :model_type => @model_types, :dbhit => @dbhit +/ always show the neighbors table, message is given there += haml :neighbors, :layout => false, :model_type => @model_types, :dbhit => @dbhit -%div.modal.fade{:id=>"details0", :role=>"dialog"} - %div.modal-dialog.modal-lg +%div.modal.fade{:id=>"details0", :tabindex=>"-1", :role=>"dialog"} + %div.modal-dialog.modal-lg{:role=>"document"} %div.modal-content diff --git a/views/style.scss b/views/style.scss index a23bb5d..f15fd21 100644 --- a/views/style.scss +++ b/views/style.scss @@ -1,49 +1,35 @@ -@media (min-width: 320px){ +/*@media (min-width: 320px){ .page-header{ - img.media-object{ - margin-left:0; - } + //img.media-object{ + // margin-left:0; + //} background-color: #fff; padding:10px 0 10px 0; margin: 0; - text-align:left; + //text-align:left; //display:inline-block; width:100%; } } @media (min-width: 480px){ .page-header{ - img.media-object{ - margin-left:1em; - } + //img.media-object{ + // margin-left:1em; + //} background-color: #fff; padding:20px 0 20px 0; margin: 0; - text-align:center; + //text-align:center; //display:inline-block; width:100%; } +}*/ +.page-header { + background-color: #fff; } body { background-color:#E7E7E7; } -table.table-borderless tbody tr td{ - border-top: none; -} -h4.head-back, h5.head-back{ - background-color: #E7E7E7; -} -.nav-tabs { - background-color: #E7E7E7; - - li.active a:hover { - background-color: #f5f5f5; - } - - li a { - //height: 7em; - } -} img { max-width: 100%; max-height: 100%; @@ -62,12 +48,6 @@ img { .faq h1 { text-align: center; } -.tablesorter-bootstrap thead .sorter-false { - cursor: default; -} -.tablesorter-bootstrap thead { - background-color: #E7E7E7; -} ul.share-buttons{ list-style: none; } @@ -82,14 +62,6 @@ ul.share-buttons{ width: 30px; padding-right: 5px; } -supporters{ - text-align:center; - img{ - width: 200px; - margin: 1em; - } -} - .footer{ margin-top:3em; } -- cgit v1.2.3 From e3ae34a75ed7a503078c3c2cdf95f1500d6e2b73 Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 27 Aug 2018 13:36:06 +0000 Subject: reactivate popover --- views/prediction.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'views') diff --git a/views/prediction.haml b/views/prediction.haml index 1cddca6..47e83fa 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -1,6 +1,6 @@ :javascript $(document).ready(function(){ - //$('[data-toggle="popover"]').popover(); + $('[data-toggle="popover"]').popover(); $('.modal').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); }); -- cgit v1.2.3 From 9750e0309500259e9a56e267ce87984fb5bb5e53 Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 26 Nov 2018 15:29:26 +0000 Subject: clean out; better response codes; prepare for batch --- views/batch.haml | 238 ++++++++++++++++++++++++++--------------------- views/layout.haml | 5 +- views/model_details.haml | 2 +- views/style.scss | 7 ++ 4 files changed, 142 insertions(+), 110 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index 0e7efc7..c5dd2f4 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -1,109 +1,133 @@ -%div.well - %a.btn.btn-warning{:href => to('/predict')} - %span.glyphicon.glyphicon-menu-left{:aria=>{:hidden=>"true"}} +:javascript + + function progress(value,id) { + var percent = Math.round(value); + var bar = document.getElementById("bar_"+id); + var prog = document.getElementById("progress_"+id); + bar.style.width = value + '%'; + if (percent == 100){ + prog.style.display = "none"; + }; + }; + + 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 ); + } + }; + + var markers = []; + + function renderTask(task_id,model_id,id) { + var uri = "#{to("/prediction/task/?turi=")}" + task_id; + var aClient = new HttpClient(); + aClient.get(uri, function(res) { + var response = JSON.parse(res); + progress(response['percent'],id); + if (response['percent'] == 100){ + window.clearInterval(markers[id]); + $("a#downbutton_"+id).removeClass("disabled"); + $("a#detailsbutton_"+id).removeClass("disabled"); + $("a#downbutton_"+id).removeClass("btn-outline-info"); + $("a#detailsbutton_"+id).removeClass("btn-outline-info"); + $("a#downbutton_"+id).addClass("btn-info"); + $("a#detailsbutton_"+id).addClass("btn-info"); + }; + }); + }; + function simpleTemplating(data) { + var html = '
    '; + $.each(data, function(index, item){ + html += '
  • '+ item +'
    • '+'
    '; + }); + html += '
'; + return html; + }; + function pagePredictions(task_id,model_id,id){ + button = document.getElementById("detailsbutton_"+id); + span = button.childNodes[1]; + if (span.className == "fa fa-caret-right"){ + span.className = "fa fa-caret-down"; + $('#data-container_'+id).removeClass("d-none"); + $('#data-container_'+id).show(); + $('#pager_'+id).show(); + $('#pager_'+id).pagination({ + dataSource: '#{to("/prediction/task/?predictions=")}' + task_id + '&model=' + model_id , + locator: 'prediction', + totalNumber: #{@compounds.size}, + pageSize: 1, + showPageNumbers: true, + showGoInput: true, + formatGoInput: 'go to <%= input %>', + formatAjaxError: function(jqXHR, textStatus, errorThrown) { + $('#data-container_'+id).html(errorThrown); + }, + /*ajax: { + beforeSend: function() { + $('#data-container_'+id).html('Loading content ...'); + } + },*/ + callback: function(data, pagination) { + var html = simpleTemplating(data); + $('#data-container_'+id).html(html); + //$('#data-container_'+id).css("min-height", $(window).height() + "px" ); + } + }); + } else if (span.className = "fa fa-caret-down"){ + span.className = "fa fa-caret-right"; + $('#data-container_'+id).hide(); + $('#pager_'+id).hide(); + }; + }; +%div.card + %a.btn.btn-warning{:href => to("/predict?tpid=#{@pid}")} + %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} New Prediction - %a.btn.btn-success{:id => "downbutton", :href=>"#{to("/predict/#{@tmppath}/#{@filename}")}", :title=>"download"} - %span.glyphicon.glyphicon-download-alt - Download CSV +%div.card.bg-light + %div.card-body + %h3.card-title="Batch prediction results for: #{@filename}" - / show file name - %topline - %div.row - %div.col-md-4 - %h3 Batch Prediction Results: - %div.col-md-8 - %h3= @filename - - / displays all prediction result in one table - %div.table-responsive - %table.table.table-bordered{:id=>"batch", :style=>"background-color:white;"} - %tbody - - if @warnings - - @warnings.each do |warning| - %tr - %td - %b Warning - %td - = warning.sub(/\b(tmp\/)\b/,"") - - @view.each do |compound, array| - %tr - %td{:style=>"vertical-align:top;"} - %p= compound.svg - %p= compound.smiles - - array.each do |model,prediction| - %td{:style=>"vertical-align:top;white-space:nowrap;"} - - model.model.class.to_s.match("Classification") ? type = "Classification" : type = "Regression" - - unit = model.unit - - %b{:class => "title"} - = "#{model.endpoint.gsub('_', ' ')} (#{model.species})" - - / check for prediction - - if prediction[:value] - %p - / show model type (classification|regression) - %b Type: - = type - %p - / check for database hit - - if prediction[:info] =~ /\b(identical)\b/i - - / show message about dbhit and measurements - %p - %b Compound is part of the training dataset - %p - %b Measured activity: - %br - - if prediction[:measurements].is_a?(Array) - = (type == "Regression") ? prediction[:measurements].collect{|value| "#{value.delog10.signif(3)} (#{unit})
#{compound.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("
") : prediction[:measurements].join(", ") - - else - = (type == "Regression") ? "#{prediction[:measurements].delog10.signif(3)} (#{unit})
#{compound.mmol_to_mg(prediction[:measurements].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:measurements] - - - / show prediction - %p - %b Prediction: - %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 - %p - - if type == "Regression" - %b 95% Prediction interval: - - interval = (prediction[:prediction_interval].nil? ? nil : prediction[:prediction_interval]) - %br - = 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 !prediction[:prediction_interval].nil? - - else - %b Probability: - - unless prediction[:probabilities].nil? - - probabilities = "" - - prediction[:probabilities].each{|k,v| probabilities += "#{k}: #{v.signif(3)}
"} - %br - = probabilities - / show warnings - %p - - if !prediction[:info].blank? - %b Info: - %br - %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",
") - - if !prediction[:warnings].blank? - %b Warnings: - - prediction[:warnings].uniq.each do |warning| - %br - %p=warning.sub(/substances/, "substances
").sub(/prediction\:/, "prediction\:
") - - / no prediction - - else - %br - - if !prediction[:info].blank? - %b Info: - %br - %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",
") - - if !prediction[:warnings].blank? - %b Warnings: - - prediction[:warnings].uniq.each do |warning| - %br - %p=warning.sub(/substances/, "substances
").sub(/prediction\:/, "prediction\:
") - %tr + - @models.each_with_index do |model,idx| + - m = Model::Validation.find model + - task = @tasks[idx].id + #result.caret.bg-light{:id=>idx} + %div.card-body + %div.row + %div.col-6 + %h5.card-title="#{m.endpoint} (#{m.species})" + #pager{:id=>idx} + %div.col-6 + %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"} + %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;"} + - # increase interval timer for large datasets + - ctimer = ((@compounds.size/1000) == 0 ? 1000 : ((@compounds.size/1000)*1000)) + :javascript + var timer = #{ctimer}; + $(document).ready(function(){ + // check button class before execute a task + if (#{idx} > 0){ + markers[#{idx}] = setInterval(function(){ + var button = document.getElementById("detailsbutton_#{idx-1}"); + if(!button.classList.contains('disabled')){ + renderTask('#{task}','#{model}',#{idx}); + } + }, timer ); + }else{ + markers[#{idx}] = setInterval(function(){ + renderTask('#{task}','#{model}',#{idx}); + }, timer ); + }; + }); + #data-container.card.d-none{:id=>idx} diff --git a/views/layout.haml b/views/layout.haml index a520ed6..5e0445a 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -8,12 +8,13 @@ %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'} %link{:href=>"/stylesheets/bootstrap.min.css", :rel=>"stylesheet"} %link{:href=>"/stylesheets/font-awesome.min.css", :rel=>"stylesheet"} + %link{:href=>"/stylesheets/pagination.css", :rel=>"stylesheet"} %link{:href=>"/style.css", :rel=>"stylesheet"} %script{ :src=>"/javascripts/jquery.min.js"} %script{ :src=>"/javascripts/popper.min.js"} %script{:src=>"/javascripts/lazar-gui.js"} %script{ :src=>"/javascripts/bootstrap.js"} - //%script{ :src=>"/javascripts/bootstrap.js.map"} + %script{:src=>"/javascripts/pagination.min.js"} //%script{:src=>"/javascripts/google_analytics_lazar.js"} %body %noscript @@ -43,7 +44,7 @@ Problems, bugs, ideas for improvements ? Please report at our %a{:href => 'https://github.com/opentox/lazar-gui/issues', :rel => "external"} issue tracker , check out the - %a{:href=> to("/faq")} FAQ + %a{:href=> to("/predict/faq")} FAQ page or send us an email. %a{ :href=>"mailto:info@in-silico.ch?subject=[lazar v#{@version}]", :target=>"_top"} %span.fa.fa-envelope diff --git a/views/model_details.haml b/views/model_details.haml index 3f1cc7a..5417a48 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -151,7 +151,7 @@ %div.card.bg-light %div.card-body %h6.card-title QMRF: - %a.btn.btn-outline-info{:href=>"#{to("/report/#{model.id}")}", :id=>"report#{model.id}", :style=>"font-size:small;"} + %a.btn.btn-outline-info{:href=>"#{to("/predict/report/#{model.id}")}", :id=>"report#{model.id}", :style=>"font-size:small;"} %span.fa.fa-download XML %br diff --git a/views/style.scss b/views/style.scss index f15fd21..5d47872 100644 --- a/views/style.scss +++ b/views/style.scss @@ -65,3 +65,10 @@ ul.share-buttons{ .footer{ margin-top:3em; } +.single-batch{ + width: 100%; +} +.single-batch{ + table-layout: fixed; + width: 100%; +} -- cgit v1.2.3 From 993102a8b2f131526e4578f514b4392c77f2b47d Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 3 Dec 2018 15:18:06 +0000 Subject: fixed csv download;added analytics and batch files --- views/layout.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'views') diff --git a/views/layout.haml b/views/layout.haml index 5e0445a..1d95ae2 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -15,7 +15,7 @@ %script{:src=>"/javascripts/lazar-gui.js"} %script{ :src=>"/javascripts/bootstrap.js"} %script{:src=>"/javascripts/pagination.min.js"} - //%script{:src=>"/javascripts/google_analytics_lazar.js"} + %script{:src=>"/javascripts/google_analytics_lazar.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"} -- cgit v1.2.3 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 From 2e2332190968d9679bffdb0faf63a34fac297f00 Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 14 Jun 2019 14:56:22 +0000 Subject: reordered validation stats --- views/model_details.haml | 238 ++++++++++++++++++++++------------------------- 1 file changed, 110 insertions(+), 128 deletions(-) (limited to 'views') diff --git a/views/model_details.haml b/views/model_details.haml index 8691325..ba49b79 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -41,135 +41,117 @@ %div.card.bg-light %div.card-body - if type == "Classification" - %h6.card-text Independent crossvalidations: + %h6.card-title Independent crossvalidations: - else - %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 - %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? - %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 + %h6.card-title Independent crossvalidations (-log10 transformed): + - crossvalidations.each_with_index do |cv,idx| + %p.card-text + - if model.classification? + / accuracy, confusion matrixes + - keys = cv.accuracy.collect{|key, value| key} + - acc = cv.accuracy.collect{|key, value| value.signif(3)} + %table.table.table-borderless.table-responsive + %tr + %td.text-right + = "Nr.#{idx+1}" + %td.text-center Accuracy: + / mimic vertical line + %td.border-right + %td.text-center Confusion matrix all: + %td.text-center Confusion matrix confidence high: + %td.text-center Confusion matrix confidence low: + %tr + %td + / accuracy key: + %table.table + - keys.each_with_index do |key,idx| + %tr + %td.text-right.pr-0= key.gsub("_", " ")+":" + %td + / accuray value: + %table.table + - keys.each_with_index do |key,idx| + %tr + %td.text-center= acc[idx] + + / mimic vertical line + %td.border-right + + / confusion matrixes: + - keys.each do |key| + - matrix = cv.confusion_matrix[key] + %td + %table.table-sm + %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] + + / regression + - if model.regression? + / rmse, mae, r_squared, pred nr, within intv, out intv + - keys = cv.rmse.collect{|key, value| key} + - rmse = cv.rmse.collect{|key, value| value.signif(3)} + - mae = cv.mae.collect{|key, value| value.signif(3)} + - rsq = cv.r_squared.collect{|key, value| value.signif(3)} + - nrp = cv.nr_predictions.collect{|key,value| value} + - wpi = cv.within_prediction_interval.collect{|key,value| value} + - opi = cv.out_of_prediction_interval.collect{|key,value| value} + %table.table.table-borderless.table-responsive + %tr + %td.text-center + = "Nr.#{idx+1} | Num folds:#{cv.folds}" + %td.text-center + %a.card-link{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} + RMSE: + %td.text-center + %a.card-link{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} + MAE: + %td.text-center + %a.card-link{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"2"+":" + %td.text-center Number of predictions: + %td.text-center Within prediction interval: + %td.text-center Out of prediction interval: + - keys.each_with_index do |key,idx| + %tr + %td.text-right= key.gsub("_", " ")+":" + / rsme: + %td.text-center= rmse[idx] + / mae: + %td.text-center= mae[idx] + / r_squared: + %td.text-center= rsq[idx] + / Predictions number: + %td.text-center= nrp[idx] + / Within prediction interval: + %td.text-center= wpi[idx] + / Out of prediction interval: + %td.text-center= opi[idx] + - unless idx == 4 + %hr + %div.card.bg-light %div.card-body %h6.card-title QMRF: -- cgit v1.2.3 From 2f2a4c5e3f319d523424f365d034017152eb1504 Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 17 Jun 2019 10:02:35 +0000 Subject: fixed table in model details --- views/model_details.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'views') diff --git a/views/model_details.haml b/views/model_details.haml index ba49b79..3825949 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -63,13 +63,13 @@ %tr %td / accuracy key: - %table.table + %table.table-sm - keys.each_with_index do |key,idx| %tr %td.text-right.pr-0= key.gsub("_", " ")+":" %td / accuray value: - %table.table + %table.table-sm - keys.each_with_index do |key,idx| %tr %td.text-center= acc[idx] -- cgit v1.2.3 From be9d7e0dd360328d3ef7db77128527c40819cc1c Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 17 Jun 2019 10:21:24 +0000 Subject: add PubChem links for compound cid --- views/neighbors.haml | 12 ++++++------ views/prediction.haml | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'views') diff --git a/views/neighbors.haml b/views/neighbors.haml index c4f3b94..91b5f57 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -20,8 +20,6 @@ %tr %th{:scope=>"col"} Compound - %th{:scope=>"col"} - SMILES %th{:scope=>"col"} Measured Activity %a.btn.fa.fa-info-circle{:href=>"javascript:void(0)", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"} @@ -38,8 +36,6 @@ %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}"}} = embedded_svg(c.svg, :title=>"click for details") - %td - %p= c.smiles / Measured Activity %td @@ -48,6 +44,10 @@ - else - if !neighbor[:measurement].nil? = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})
#{c.mmol_to_mg(neighbor[:measurement].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : neighbor[:measurement] + %p + %a{:href=>PUBCHEM_CID_URI+c.cid, :rel => "external"} + PubChem + %span.fa.fa-xs.fa-external-link / Similarity = tanimoto %td = neighbor[:similarity].round(3) @@ -80,8 +80,8 @@ shouldSwitch = false; /* Get the two elements you want to compare, one from current row and one from the next: */ - x = rows[i].getElementsByTagName("TD")[3]; - y = rows[i + 1].getElementsByTagName("TD")[3]; + x = rows[i].getElementsByTagName("TD")[2]; + y = rows[i + 1].getElementsByTagName("TD")[2]; // Check if the two rows should switch place: if (parseFloat(x.innerHTML) < parseFloat(y.innerHTML)) { // If so, mark as a switch and break the loop: diff --git a/views/prediction.haml b/views/prediction.haml index 2a315f9..23d27ba 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -25,6 +25,10 @@ %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: to("/prediction/#{@compound.id}/details"), :id=>"link01"}} = embedded_svg(@compound.svg, :title=>"click for details") %p= @compound.smiles + %p + %a{:href=>PUBCHEM_CID_URI+@compound.cid, :rel => "external"} + PubChem + %span.fa.fa-xs.fa-external-link - @model_types = {} - @dbhit = {} - @predictions.each_with_index do |prediction,i| -- cgit v1.2.3 From 091e0c3d84223bb7513c88cbac103d0aaee1a32c Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 17 Jun 2019 14:20:54 +0000 Subject: show only last warning --- views/prediction.haml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'views') diff --git a/views/prediction.haml b/views/prediction.haml index 23d27ba..a7bd982 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -113,10 +113,10 @@ %br %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",
") - if !prediction[:warnings].blank? + - warning = prediction[:warnings].last %b Warnings: - - prediction[:warnings].uniq.each do |warning| - %p=warning #.sub(/,/, ",
") - /%p=warning.sub(/substances/, "substances
").sub(/prediction\:/, "prediction\:
") + %br + %p=warning#.sub(/,/, ",
") - else %br - if !prediction[:info].blank? @@ -124,10 +124,10 @@ %br %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",
") - if !prediction[:warnings].blank? + - warning = prediction[:warnings].last %b Warnings: - - prediction[:warnings].uniq.each do |warning| - %br - %p=warning.sub(/,/, ",
") + %br + %p=warning#.sub(/,/, ",
") / always show the neighbors table, message is given there = haml :neighbors, :layout => false, :model_type => @model_types, :dbhit => @dbhit -- cgit v1.2.3 From 3869670b3acfb4de982f45ea24af940eccac5474 Mon Sep 17 00:00:00 2001 From: gebele Date: Tue, 18 Jun 2019 12:49:35 +0000 Subject: update routes and mime type and generate server uri for API file --- views/layout.haml | 2 +- views/predict.haml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'views') diff --git a/views/layout.haml b/views/layout.haml index 3304c69..f06a700 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -65,7 +65,7 @@ © %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 + %a{:href => to("/predict/license"), :rel => "external"} GPL3 License %supporters.row %div.card-body.text-center %div.card-title diff --git a/views/predict.haml b/views/predict.haml index d525b33..7602915 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -169,7 +169,7 @@ %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-warning{:href => to("/help"), :rel => "external", :style=>"margin-left: 1em;"} Help + %a.btn.btn-warning{:href => to("/predict/help"), :rel => "external", :style=>"margin-left: 1em;"} Help %fieldset#middle.card.bg-light #models.card-body -- cgit v1.2.3 From 2d4782c4e8df908efa0973ee842593ead58d5980 Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 27 Jun 2019 08:37:33 +0000 Subject: use prediction to csv;edit info text --- views/batch.haml | 2 +- views/info.haml | 2 +- views/model_details.haml | 2 +- views/style.scss | 6 ++++++ 4 files changed, 9 insertions(+), 3 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index fb317c9..d8e6862 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -128,7 +128,7 @@ - @models.each_with_index do |model,idx| - m = Model::Validation.find model - task = @tasks[idx].id - #result.caret.bg-light{:id=>idx} + #result.card.bg-light{:id=>idx} %div.card-body %div.row %div.col-6 diff --git a/views/info.haml b/views/info.haml index 148d53f..d2730aa 100644 --- a/views/info.haml +++ b/views/info.haml @@ -1,3 +1,3 @@ %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. + We are rebuilding our models. It will take a while, please be patient and reload the page later. diff --git a/views/model_details.haml b/views/model_details.haml index 3825949..600aaf8 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -66,7 +66,7 @@ %table.table-sm - keys.each_with_index do |key,idx| %tr - %td.text-right.pr-0= key.gsub("_", " ")+":" + %td.fit.text-right.pr-0= key.gsub("_", " ")+":" %td / accuray value: %table.table-sm diff --git a/views/style.scss b/views/style.scss index 01b5147..52be743 100644 --- a/views/style.scss +++ b/views/style.scss @@ -93,3 +93,9 @@ supporters{ margin: 1em; } } + +.table td.fit, +.table th.fit { + white-space: nowrap; + width: 1%; +} -- cgit v1.2.3 From e525fae235790604c072764e53357ccfefb2b066 Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 27 Jun 2019 13:14:36 +0000 Subject: all cv values for classification models --- views/model_details.haml | 55 ++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 46 insertions(+), 9 deletions(-) (limited to 'views') diff --git a/views/model_details.haml b/views/model_details.haml index 600aaf8..d70a7e6 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -50,29 +50,66 @@ / accuracy, confusion matrixes - keys = cv.accuracy.collect{|key, value| key} - acc = cv.accuracy.collect{|key, value| value.signif(3)} + - tpr = cv.true_rate.collect{|key, hash| hash[cv.accept_values[0]].signif(3)} + - fpr = cv.true_rate.collect{|key, hash| hash[cv.accept_values[1]].signif(3)} + - pp = cv.predictivity.collect{|key, hash| hash[cv.accept_values[0]].signif(3)} + - np = cv.predictivity.collect{|key, hash| hash[cv.accept_values[1]].signif(3)} %table.table.table-borderless.table-responsive %tr %td.text-right = "Nr.#{idx+1}" - %td.text-center Accuracy: + %td.text-center.fit Accuracy: + %td.text-right.fit True positive rate: + %td.text-right.fit True negative rate: + %td.text-right.fit Positive predictiv value: + %td.text-right.fit Negative predictiv value: / mimic vertical line %td.border-right - %td.text-center Confusion matrix all: - %td.text-center Confusion matrix confidence high: - %td.text-center Confusion matrix confidence low: + %td.text-center.fit Confusion matrix all: + %td.text-center.fit Confusion matrix confidence high: + %td.text-center.fit Confusion matrix confidence low: %tr - %td - / accuracy key: + %td.fit + / keys: %table.table-sm - keys.each_with_index do |key,idx| %tr %td.fit.text-right.pr-0= key.gsub("_", " ")+":" - %td - / accuray value: + %td.fit + / acc,accuray value: %table.table-sm - keys.each_with_index do |key,idx| %tr - %td.text-center= acc[idx] + %td.text-left= acc[idx] + + %td.fit + / tpr,true positive rate + %table.table-sm + - keys.each_with_index do |key,idx| + %tr + %td.text-left= tpr[idx] + + %td.fit + / fpr,false positive rate + %table.table-sm + - keys.each_with_index do |key,idx| + %tr + %td.text-left= fpr[idx] + + %td.fit + / pp,positive predictions + %table.table-sm + - keys.each_with_index do |key,idx| + %tr + %td.text-left= pp[idx] + + %td.fit + / np,negative predictions + %table.table-sm + - keys.each_with_index do |key,idx| + %tr + %td.text-left= np[idx] + / mimic vertical line %td.border-right -- cgit v1.2.3 From e8fbd0b6fe51888452584f80fac8508b1ba8ab3c Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 27 Jun 2019 14:13:29 +0000 Subject: use accept value for rates --- views/model_details.haml | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'views') diff --git a/views/model_details.haml b/views/model_details.haml index d70a7e6..0f34632 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -48,21 +48,22 @@ %p.card-text - if model.classification? / accuracy, confusion matrixes + - av = cv.accept_values - keys = cv.accuracy.collect{|key, value| key} - acc = cv.accuracy.collect{|key, value| value.signif(3)} - - tpr = cv.true_rate.collect{|key, hash| hash[cv.accept_values[0]].signif(3)} - - fpr = cv.true_rate.collect{|key, hash| hash[cv.accept_values[1]].signif(3)} - - pp = cv.predictivity.collect{|key, hash| hash[cv.accept_values[0]].signif(3)} - - np = cv.predictivity.collect{|key, hash| hash[cv.accept_values[1]].signif(3)} + - tpr = cv.true_rate.collect{|key, hash| hash[av[0]].signif(3)} + - fpr = cv.true_rate.collect{|key, hash| hash[av[1]].signif(3)} + - pp = cv.predictivity.collect{|key, hash| hash[av[0]].signif(3)} + - np = cv.predictivity.collect{|key, hash| hash[av[1]].signif(3)} %table.table.table-borderless.table-responsive %tr %td.text-right = "Nr.#{idx+1}" %td.text-center.fit Accuracy: - %td.text-right.fit True positive rate: - %td.text-right.fit True negative rate: - %td.text-right.fit Positive predictiv value: - %td.text-right.fit Negative predictiv value: + %td.text-right.fit True rate #{av[0]}: + %td.text-right.fit True rate #{av[1]}: + %td.text-right.fit #{av[0]} predictiv value: + %td.text-right.fit #{av[1]} predictiv value: / mimic vertical line %td.border-right %td.text-center.fit Confusion matrix all: -- cgit v1.2.3 From d68d732ca403f42caba01a96411c8a74b349defa Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 4 Jul 2019 12:47:24 +0000 Subject: regex for tpr tnr --- views/model_details.haml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'views') diff --git a/views/model_details.haml b/views/model_details.haml index 0f34632..e03c14a 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -60,10 +60,10 @@ %td.text-right = "Nr.#{idx+1}" %td.text-center.fit Accuracy: - %td.text-right.fit True rate #{av[0]}: - %td.text-right.fit True rate #{av[1]}: - %td.text-right.fit #{av[0]} predictiv value: - %td.text-right.fit #{av[1]} predictiv value: + %td.text-right.fit True #{av[0] =~ /^non/ ? "negative" : "positive"} rate: + %td.text-right.fit True #{av[1] =~ /^non/ ? "negative" : "positive"} rate: + %td.text-right.fit #{av[0] =~ /^non/ ? "Negative" : "Positive"} predictiv value: + %td.text-right.fit #{av[1] =~ /^non/ ? "Negative" : "Positive"} predictiv value: / mimic vertical line %td.border-right %td.text-center.fit Confusion matrix all: -- cgit v1.2.3 From 86a45822c29cef7fb84871416427f96782e4ecf5 Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 5 Jul 2019 08:26:18 +0000 Subject: reorder validation statistics --- views/batch.haml | 2 +- views/model_details.haml | 188 +++++++++++++++++++++-------------------------- views/predict.haml | 2 +- views/prediction.haml | 2 +- 4 files changed, 86 insertions(+), 108 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index d8e6862..334d22e 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -118,7 +118,7 @@ }; }; %div.card - %a.btn.btn-warning{:href => to("/predict?tpid=#{@pid}")} + %a.btn.btn-outline-info{:href => to("/predict?tpid=#{@pid}")} %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} New Prediction %div.card.bg-light diff --git a/views/model_details.haml b/views/model_details.haml index e03c14a..c95b363 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -41,9 +41,9 @@ %div.card.bg-light %div.card-body - if type == "Classification" - %h6.card-title Independent crossvalidations: + %h6.card-title #{crossvalidations.size} independent 10-fold crossvalidations: - else - %h6.card-title Independent crossvalidations (-log10 transformed): + %h6.card-title #{crossvalidations.size} independent 10-fold crossvalidations (-log10 transformed): - crossvalidations.each_with_index do |cv,idx| %p.card-text - if model.classification? @@ -57,95 +57,72 @@ - np = cv.predictivity.collect{|key, hash| hash[av[1]].signif(3)} %table.table.table-borderless.table-responsive %tr - %td.text-right + %td.text-center = "Nr.#{idx+1}" - %td.text-center.fit Accuracy: - %td.text-right.fit True #{av[0] =~ /^non/ ? "negative" : "positive"} rate: - %td.text-right.fit True #{av[1] =~ /^non/ ? "negative" : "positive"} rate: - %td.text-right.fit #{av[0] =~ /^non/ ? "Negative" : "Positive"} predictiv value: - %td.text-right.fit #{av[1] =~ /^non/ ? "Negative" : "Positive"} predictiv value: - / mimic vertical line - %td.border-right - %td.text-center.fit Confusion matrix all: - %td.text-center.fit Confusion matrix confidence high: - %td.text-center.fit Confusion matrix confidence low: - %tr - %td.fit - / keys: - %table.table-sm - - keys.each_with_index do |key,idx| - %tr - %td.fit.text-right.pr-0= key.gsub("_", " ")+":" - %td.fit + %td Accuracy + %td + %a{:href=>"https://en.wikipedia.org/wiki/Sensitivity_and_specificity", :rel=>"external"} + True #{av[0] =~ /^non/ ? "negative" : "positive"} rate + %td + %a{:href=>"https://en.wikipedia.org/wiki/Sensitivity_and_specificity", :rel=>"external"} + True #{av[1] =~ /^non/ ? "negative" : "positive"} rate + %td #{av[0] =~ /^non/ ? "Negative" : "Positive"} predictiv value + %td #{av[1] =~ /^non/ ? "Negative" : "Positive"} predictiv value + - keys.each_with_index do |key,idx| + %tr + / keys + %td.fit.text-right.pr-0= key.gsub("_", " ") / acc,accuray value: - %table.table-sm - - keys.each_with_index do |key,idx| - %tr - %td.text-left= acc[idx] - - %td.fit + %td= acc[idx] / tpr,true positive rate - %table.table-sm - - keys.each_with_index do |key,idx| - %tr - %td.text-left= tpr[idx] - - %td.fit + %td= tpr[idx] / fpr,false positive rate - %table.table-sm - - keys.each_with_index do |key,idx| - %tr - %td.text-left= fpr[idx] - - %td.fit + %td= fpr[idx] / pp,positive predictions - %table.table-sm - - keys.each_with_index do |key,idx| - %tr - %td.text-left= pp[idx] - - %td.fit + %td= pp[idx] / np,negative predictions - %table.table-sm - - keys.each_with_index do |key,idx| - %tr - %td.text-left= np[idx] - - - / mimic vertical line - %td.border-right - - / confusion matrixes: - - keys.each do |key| - - matrix = cv.confusion_matrix[key] - %td - %table.table-sm - %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] + %td= np[idx] + %div.row + %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#matrix#{idx}"}, :aria=>{:expanded=>"false", :controls=>"matrix#{idx}"}, :style=>"font-size:small;"} + Confusion matrix: + %div.collapse{:id=>"matrix#{idx}"} + %table.table.table-borderless.table-responsive + %tr + %td.fit.text-center all + %td.fit.text-center confidence high + %td.fit.text-center confidence low + %tr + / confusion matrix + - keys.each do |key| + - matrix = cv.confusion_matrix[key] + %td.fit.text-right + %table.table-sm + %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] / regression - if model.regression? @@ -160,34 +137,35 @@ %table.table.table-borderless.table-responsive %tr %td.text-center - = "Nr.#{idx+1} | Num folds:#{cv.folds}" - %td.text-center - %a.card-link{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} - RMSE: - %td.text-center - %a.card-link{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} - MAE: - %td.text-center - %a.card-link{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"2"+":" - %td.text-center Number of predictions: - %td.text-center Within prediction interval: - %td.text-center Out of prediction interval: + = "Nr.#{idx+1}" + %td + %a{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} + RMSE + %td + %a{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} + MAE + %td + %a{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"2" + %td Number of predictions + %td Within prediction interval + %td Out of prediction interval - keys.each_with_index do |key,idx| %tr - %td.text-right= key.gsub("_", " ")+":" + / keys + %td.fit.text-right.pr-0= key.gsub("_", " ") / rsme: - %td.text-center= rmse[idx] + %td= rmse[idx] / mae: - %td.text-center= mae[idx] + %td= mae[idx] / r_squared: - %td.text-center= rsq[idx] + %td= rsq[idx] / Predictions number: - %td.text-center= nrp[idx] + %td= nrp[idx] / Within prediction interval: - %td.text-center= wpi[idx] + %td= wpi[idx] / Out of prediction interval: - %td.text-center= opi[idx] - - unless idx == 4 + %td= opi[idx] + - unless idx == crossvalidations.size-1 %hr %div.card.bg-light diff --git a/views/predict.haml b/views/predict.haml index 7602915..1fbcf2f 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -169,7 +169,7 @@ %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-warning{:href => to("/predict/help"), :rel => "external", :style=>"margin-left: 1em;"} Help + %a.btn.btn-outline-info{:href => to("/predict/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 a7bd982..bde2397 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -11,7 +11,7 @@ }); }); %div.card - %a.btn.btn-warning{:href => to('/predict')} + %a.btn.btn-outline-info{:href => to('/predict')} %span.fa.fa-caret-left New Prediction %div.card.bg-light -- cgit v1.2.3 From 4793ee48de2535aa4f0ed5ab596a1bcb751c42c2 Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 5 Jul 2019 11:48:24 +0000 Subject: links for ppv and npv;fixed overflow in modal --- views/model_details.haml | 8 ++++++-- views/style.scss | 7 ++++--- 2 files changed, 10 insertions(+), 5 deletions(-) (limited to 'views') diff --git a/views/model_details.haml b/views/model_details.haml index c95b363..8faf785 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -66,8 +66,12 @@ %td %a{:href=>"https://en.wikipedia.org/wiki/Sensitivity_and_specificity", :rel=>"external"} True #{av[1] =~ /^non/ ? "negative" : "positive"} rate - %td #{av[0] =~ /^non/ ? "Negative" : "Positive"} predictiv value - %td #{av[1] =~ /^non/ ? "Negative" : "Positive"} predictiv value + %td + %a{:href=>"https://en.wikipedia.org/wiki/Positive_and_negative_predictive_values", :rel=>"external"} + #{av[0] =~ /^non/ ? "Negative" : "Positive"} predictiv value + %td + %a{:href=>"https://en.wikipedia.org/wiki/Positive_and_negative_predictive_values", :rel=>"external"} + #{av[1] =~ /^non/ ? "Negative" : "Positive"} predictiv value - keys.each_with_index do |key,idx| %tr / keys diff --git a/views/style.scss b/views/style.scss index 52be743..e6f6100 100644 --- a/views/style.scss +++ b/views/style.scss @@ -65,9 +65,6 @@ ul.share-buttons{ .footer{ margin-top:3em; } -.single-batch{ - width: 100%; -} .single-batch{ table-layout: fixed; width: 100%; @@ -99,3 +96,7 @@ supporters{ white-space: nowrap; width: 1%; } + +.modal-body p { + word-wrap: break-word; +} -- cgit v1.2.3 From 60aa817bdb08e4bcb769f4bee2834c23de9cd346 Mon Sep 17 00:00:00 2001 From: gebele Date: Wed, 10 Jul 2019 09:03:23 +0000 Subject: adjust approx task time --- views/batch.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index 334d22e..6ac2a1b 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -27,9 +27,9 @@ var est = document.getElementById("est_"+id); var now = new Date().getTime(); if ( type == "true" ){ - var approximate = new Date(tasktime*1000 + #{@compounds_size*1000}); + var approximate = new Date(tasktime*1000 + #{@compounds_size*100}*(id+1)); } else { - var approximate = new Date(tasktime*1000 + #{@compounds_size*100}); + var approximate = new Date(tasktime*1000 + #{@compounds_size*1000}*(id+1)); } var remain = approximate - now; var minutes = Math.floor((remain % (1000 * 60 * 60)) / (1000 * 60)); -- cgit v1.2.3 From bcc618026db1ee7a030391853b55bbf6116ab89a Mon Sep 17 00:00:00 2001 From: gebele Date: Wed, 10 Jul 2019 09:57:07 +0000 Subject: moved batch js functions to lazar-gui.js --- views/batch.haml | 131 +++---------------------------------------------------- 1 file changed, 7 insertions(+), 124 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index 6ac2a1b..c454ac7 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -1,122 +1,3 @@ -: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*100}*(id+1)); - } else { - var approximate = new Date(tasktime*1000 + #{@compounds_size*1000}*(id+1)); - } - 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(); - anHttpRequest.onreadystatechange = function() { - if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) - aCallback(anHttpRequest.responseText); - } - anHttpRequest.open( "GET", aUrl, true ); - anHttpRequest.send( null ); - } - }; - - var markers = []; - - function renderTask(task_id,model_id,id) { - var uri = "#{to("/prediction/task/?turi=")}" + task_id; - var aClient = new HttpClient(); - aClient.get(uri, function(res) { - var response = JSON.parse(res); - progress(response['percent'],id); - if (response['percent'] == 100){ - window.clearInterval(markers[id]); - $("a#downbutton_"+id).removeClass("disabled"); - $("a#detailsbutton_"+id).removeClass("disabled"); - $("a#downbutton_"+id).removeClass("btn-outline-info"); - $("a#detailsbutton_"+id).removeClass("btn-outline-info"); - $("a#downbutton_"+id).addClass("btn-info"); - $("a#detailsbutton_"+id).addClass("btn-info"); - }; - }); - }; - function simpleTemplating(data) { - var html = '
    '; - $.each(data, function(index, item){ - html += '
  • '+ item +'
    • '+'
    '; - }); - html += '
'; - return html; - }; - function pagePredictions(task_id,model_id,id){ - button = document.getElementById("detailsbutton_"+id); - span = button.childNodes[1]; - if (span.className == "fa fa-caret-right"){ - span.className = "fa fa-caret-down"; - $('#data-container_'+id).removeClass("d-none"); - $('#data-container_'+id).show(); - $('#pager_'+id).show(); - $('#pager_'+id).pagination({ - dataSource: '#{to("/prediction/task/?predictions=")}' + task_id, - locator: 'prediction', - totalNumber: '#{@compounds_size}', - pageSize: 1, - showPageNumbers: true, - showGoInput: true, - formatGoInput: 'go to <%= input %>', - formatAjaxError: function(jqXHR, textStatus, errorThrown) { - $('#data-container_'+id).html(errorThrown); - }, - /*ajax: { - beforeSend: function() { - $('#data-container_'+id).html('Loading content ...'); - } - },*/ - callback: function(data, pagination) { - var html = simpleTemplating(data); - $('#data-container_'+id).html(html); - //$('#data-container_'+id).css("min-height", $(window).height() + "px" ); - } - }); - } else if (span.className = "fa fa-caret-down"){ - span.className = "fa fa-caret-right"; - $('#data-container_'+id).hide(); - $('#pager_'+id).hide(); - }; - }; %div.card %a.btn.btn-outline-info{:href => to("/predict?tpid=#{@pid}")} %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} @@ -135,7 +16,7 @@ %h5.card-title="#{m.endpoint} (#{m.species})" #pager{:id=>idx} %div.col-6 - %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')"} + %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{to("/prediction/task/?predictions=#{task}")}','#{model}','#{idx}','#{@compounds_size}')"} %span.fa.fa-caret-right Details %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/batch/download?tid=#{task}")}", :title=>"download"} @@ -150,20 +31,22 @@ :javascript var timer = #{ctimer}; var tasktime = #{task.generation_time.to_i}; + var compoundsSize = #{@compounds_size}; + var task_uri = "#{to("/prediction/task/?turi=#{task}")}"; $(document).ready(function(){ // check button class before execute a task if (#{idx} > 0){ markers[#{idx}] = setInterval(function(){ var button = document.getElementById("detailsbutton_#{idx-1}"); if(!button.classList.contains('disabled')){ - renderTask('#{task}','#{model}',#{idx}); - remaining(#{idx},tasktime); + renderTask(task_uri,'#{model}',#{idx}); + remaining(#{idx},tasktime,#{m.classification?},compoundsSize); } }, timer ); }else{ markers[#{idx}] = setInterval(function(){ - renderTask('#{task}','#{model}',#{idx}); - remaining(#{idx},tasktime,#{m.classification?}); + renderTask(task_uri,'#{model}',#{idx}); + remaining(#{idx},tasktime,#{m.classification?},compoundsSize); }, timer ); }; }); -- cgit v1.2.3 From 5efd8128dc5bdb9ffc0aa4798f8aa303973794e6 Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 11 Jul 2019 08:20:10 +0000 Subject: moved form js functions to lazar-gui.js --- views/predict.haml | 151 +---------------------------------------------------- 1 file changed, 1 insertion(+), 150 deletions(-) (limited to 'views') 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;"} -- cgit v1.2.3 From 5490f6214f3a22216f7980c7d46f6d9fe10a4924 Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 11 Jul 2019 15:59:13 +0000 Subject: simplify js code;reorder js code; --- views/batch.haml | 53 ++++++++++++++++++++++++++++++--------------------- views/neighbors.haml | 2 +- views/prediction.haml | 12 ------------ 3 files changed, 32 insertions(+), 35 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index c454ac7..3f54772 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -6,9 +6,20 @@ %div.card-body %h3.card-title="Batch prediction results for: #{@filename}" + // prepare variable values for javascript + // increase timer interval for large datasets + - ctimer = ((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) + - approx = {} + - sum_approx = 0 + // process batch predictions - @models.each_with_index do |model,idx| - m = Model::Validation.find model - task = @tasks[idx].id + - tasktime = task.generation_time.to_i + // assume single compound prediction time: classification=0.1s,regression=0.5s + - task_approx = m.classification? ? (tasktime*1000 + @compounds_size*100) : (tasktime*1000 + @compounds_size*500) + - approx[idx] = task_approx + sum_approx + - sum_approx += (m.classification? ? @compounds_size*100 : @compounds_size*1000) #result.card.bg-light{:id=>idx} %div.card-body %div.row @@ -26,31 +37,29 @@ %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)) :javascript - var timer = #{ctimer}; - var tasktime = #{task.generation_time.to_i}; - var compoundsSize = #{@compounds_size}; - var task_uri = "#{to("/prediction/task/?turi=#{task}")}"; - $(document).ready(function(){ - // check button class before execute a task - if (#{idx} > 0){ - markers[#{idx}] = setInterval(function(){ - var button = document.getElementById("detailsbutton_#{idx-1}"); - if(!button.classList.contains('disabled')){ - renderTask(task_uri,'#{model}',#{idx}); - remaining(#{idx},tasktime,#{m.classification?},compoundsSize); - } - }, timer ); - }else{ - markers[#{idx}] = setInterval(function(){ - renderTask(task_uri,'#{model}',#{idx}); - remaining(#{idx},tasktime,#{m.classification?},compoundsSize); - }, timer ); - }; + $(document).ready(function() { + taskProgress('#{idx}','#{ctimer}','#{approx[idx]}','#{to("/prediction/task/?turi=#{task}")}'); }); #data-container.card.d-none.table-responsive{:id=>idx} + :javascript + taskProgress = function(idx,timer,approximate,task_uri){ + // wait until previous task is completed + if (idx > 0){ + markers[idx] = setInterval(function(){ + var button = document.getElementById("detailsbutton_"+(idx-1)); + if(!button.classList.contains('disabled')){ + renderTask(task_uri,idx); + remaining(idx,approximate); + } + }, timer ); + }else{ + markers[idx] = setInterval(function(){ + renderTask(task_uri,idx); + remaining(idx,approximate); + }, timer ); + }; + }; %div.modal.fade{:id=>"details", :tabindex=>"-1", :role=>"dialog"} %div.modal-dialog.modal-lg{:role=>"document"} %div.modal-content diff --git a/views/neighbors.haml b/views/neighbors.haml index 91b5f57..5f3e2bc 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -8,7 +8,7 @@ / get predictionFeature type - m = Model::Lazar.find model.model_id.to_s %li.nav-item - %a.nav-link{:class => ("active" if i ==0), :href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}, :onclick=>"sortTable('#{i+1}');"} + %a.nav-link{:class => ("active" if i ==0), :href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}} = "#{model.endpoint} (#{model.species})" %div.tab-content - @predictions.each_with_index do |prediction,j| diff --git a/views/prediction.haml b/views/prediction.haml index bde2397..fe1e487 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -1,15 +1,3 @@ -: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")); - }); - }); %div.card %a.btn.btn-outline-info{:href => to('/predict')} %span.fa.fa-caret-left -- cgit v1.2.3 From 592fa64120e2712c46dd020fbda0c128c69467b7 Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 12 Jul 2019 10:50:51 +0000 Subject: kill task pid if page is reloaded --- views/batch.haml | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index 3f54772..45997bf 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -1,3 +1,12 @@ +:javascript + // kill task pid if page is reloaded, `false` makes the request synchronous + window.addEventListener('unload', ktpid, false); + function ktpid() { + var client = new XMLHttpRequest(); + client.open("GET", "#{to("/prediction/task?ktpid=#{@pid}")}", false); + client.setRequestHeader("Content-Type", "application/json"); + client.send(null); + }; %div.card %a.btn.btn-outline-info{:href => to("/predict?tpid=#{@pid}")} %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} -- cgit v1.2.3 From a446fb2ecc8e7ab5f179d910a1f332c469dee35e Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 12 Jul 2019 11:51:32 +0000 Subject: assume approx prediction time --- views/batch.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index 45997bf..4f82312 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -28,7 +28,7 @@ // assume single compound prediction time: classification=0.1s,regression=0.5s - task_approx = m.classification? ? (tasktime*1000 + @compounds_size*100) : (tasktime*1000 + @compounds_size*500) - approx[idx] = task_approx + sum_approx - - sum_approx += (m.classification? ? @compounds_size*100 : @compounds_size*1000) + - sum_approx += (m.classification? ? @compounds_size*100 : @compounds_size*500) #result.card.bg-light{:id=>idx} %div.card-body %div.row -- cgit v1.2.3 From 0908895b1ebc9d85a96b0d848dc357ba25e0e763 Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 12 Jul 2019 12:07:51 +0000 Subject: use wait animation instead approx prediction time --- views/batch.haml | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index 4f82312..f161125 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -42,10 +42,11 @@ %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=>"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 ... + %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_#{idx}", :class=>"circle", :alt=>"wait", :style=>"display:none;"} :javascript $(document).ready(function() { taskProgress('#{idx}','#{ctimer}','#{approx[idx]}','#{to("/prediction/task/?turi=#{task}")}'); @@ -59,13 +60,17 @@ var button = document.getElementById("detailsbutton_"+(idx-1)); if(!button.classList.contains('disabled')){ renderTask(task_uri,idx); - remaining(idx,approximate); + //remaining(idx,approximate); + $("#est_"+idx).hide(); + $("#circle_"+idx).show(); } }, timer ); }else{ markers[idx] = setInterval(function(){ renderTask(task_uri,idx); - remaining(idx,approximate); + //remaining(idx,approximate); + $("#est_"+idx).hide(); + $("#circle_"+idx).show(); }, timer ); }; }; -- cgit v1.2.3 From ae4ca6dbe44f4dbe55aa9fcdc664307e4758adb2 Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 15 Jul 2019 14:47:07 +0000 Subject: add plots with div toggles --- views/layout.haml | 2 -- views/model_details.haml | 18 +++++++++-- views/significant_fragments.haml | 66 ---------------------------------------- views/style.scss | 4 +-- 4 files changed, 17 insertions(+), 73 deletions(-) delete mode 100644 views/significant_fragments.haml (limited to 'views') diff --git a/views/layout.haml b/views/layout.haml index f06a700..22a8583 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -84,8 +84,6 @@ %a{:href => "", :style=>"text:decoration:none;color:#ccc;"} %span.fa.fa-caret-up{:style => "font-size:3em;color:black;"} :javascript - //var $j = jQuery.noConflict(); - // $j is now an alias to the jQuery function; creating the new alias is optional. $("#back-top").hide(); $(function () { $(window).scroll(function () { diff --git a/views/model_details.haml b/views/model_details.haml index 8faf785..8877de5 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -87,9 +87,11 @@ / np,negative predictions %td= np[idx] %div.row - %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#matrix#{idx}"}, :aria=>{:expanded=>"false", :controls=>"matrix#{idx}"}, :style=>"font-size:small;"} - Confusion matrix: - %div.collapse{:id=>"matrix#{idx}"} + %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#pplot#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"pplot#{model.id}#{idx}"}, :style=>"font-size:small;"} + Probability plot + %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#matrix#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"matrix#{model.id}#{idx}"}, :style=>"font-size:small;"} + Confusion matrix + %div.collapse{:id=>"matrix#{model.id}#{idx}"} %table.table.table-borderless.table-responsive %tr %td.fit.text-center all @@ -128,6 +130,10 @@ %td = matrix[1][1] + %div.row + %div.collapse.plot.mx-auto{:id=>"pplot#{model.id}#{idx}"} + = embedded_svg(cv.probability_plot(format: "svg")) + / regression - if model.regression? / rmse, mae, r_squared, pred nr, within intv, out intv @@ -169,6 +175,12 @@ %td= wpi[idx] / Out of prediction interval: %td= opi[idx] + %div.row + %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#cplot#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"cplot#{model.id}#{idx}"}, :style=>"font-size:small;"} + Correlation plot + %div.row + %div.collapse.plot.mx-auto{:id=>"cplot#{model.id}#{idx}"} + = embedded_svg(cv.correlation_plot(format: "svg")) - unless idx == crossvalidations.size-1 %hr diff --git a/views/significant_fragments.haml b/views/significant_fragments.haml deleted file mode 100644 index bd3598d..0000000 --- a/views/significant_fragments.haml +++ /dev/null @@ -1,66 +0,0 @@ -%div.modal-body{:style=>"padding:10px;"} - %button.close{ :type=>" button", data: { dismiss:"modal"}} × - - if @type =~ /classification/i - %div.row - %div.col-md-4 - %h3{:style=>"margin-left:8px;"} - Significant fragments: - %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"} - - if !@significant_fragments.empty? - %div.col-md-8 - %table{:id => "sf"} - %tr - / @value_map => hash; interpret the effect - %th{:style=>"border:2px solid #E6E6E6;"} - Predominantly in compounds with activity "inactive" - %th{:style=>"border:2px solid #E6E6E6;"} - p value - - @significant_fragments.each do |fragments| - / fragments == [effect, smarts, pValue] - / fragments[0] = effect - /- $logger.debug "effect:\t#{fragments[0]}\n" - - if fragments[0] == @value_map.index("inactive") - %tr - %td - / fragments[1] = smarts - = fragments[1] - -#%img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"} - %td - /fragments[2] = pValue - = fragments[2] - %tr - %th{:style=>"border:2px solid #E6E6E6;"} - Predominantly in compounds with activity "active" - %th{:style=>"border:2px solid #E6E6E6;"} - p value - - @significant_fragments.each do |fragments| - / fragments == [effect, smarts, pValue] - - if fragments[0] == @value_map.index("active") - %tr - %td - -#%img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"} - = fragments[1] - %td - = fragments[2] - %br - - if @type =~ /regression/i - %div.row - %div.col-md-4 - %h3 - Descriptors: - %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"} - - if !@significant_fragments.empty? - %div.col-md-8 - %table{:id =>"de"} - %tr - %th{:style=>"border:2px solid #E6E6E6;"} - Descriptor - %th{:style=>"border:2px solid #E6E6E6;"} - value - - @significant_fragments.each do |fragments| - %tr - %td - = fragments[0] - %td - = fragments[1][0].round(3) - %br diff --git a/views/style.scss b/views/style.scss index e6f6100..63f9e74 100644 --- a/views/style.scss +++ b/views/style.scss @@ -36,8 +36,8 @@ img { } .plot { - height: 300px; - width: 300px; + height: 50%; + width: 50%; } .faq { text-align: block; -- cgit v1.2.3 From e0985405e2fdb0fe8c4740ccb256d3ac2d1fd5be Mon Sep 17 00:00:00 2001 From: gebele Date: Tue, 16 Jul 2019 14:20:09 +0000 Subject: use png format for plots avoiding css overwrite from svg objects and better browser performance --- views/model_details.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'views') diff --git a/views/model_details.haml b/views/model_details.haml index 8877de5..2d7a693 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -132,7 +132,7 @@ %div.row %div.collapse.plot.mx-auto{:id=>"pplot#{model.id}#{idx}"} - = embedded_svg(cv.probability_plot(format: "svg")) + %img{:src=>"/#{cv.id}.png", :alt=>"#{cv.id}.png"} / regression - if model.regression? @@ -180,7 +180,7 @@ Correlation plot %div.row %div.collapse.plot.mx-auto{:id=>"cplot#{model.id}#{idx}"} - = embedded_svg(cv.correlation_plot(format: "svg")) + %img{:src=>"/#{cv.id}.png", :alt=>"#{cv.id}.png"} - unless idx == crossvalidations.size-1 %hr -- cgit v1.2.3 From 87fc7e8997306f7edb74d5282ad337c5c3c48b1c Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 18 Jul 2019 13:55:40 +0000 Subject: removed awstats;model details without separation buttons;restructured details table;adjust info with warning;reordered positive first --- views/layout.haml | 1 - views/model_details.haml | 85 +++++++++++++++++++++++++----------------------- views/neighbors.haml | 9 ++--- views/prediction.haml | 19 ++++++----- 4 files changed, 59 insertions(+), 55 deletions(-) (limited to 'views') diff --git a/views/layout.haml b/views/layout.haml index 22a8583..1fe3813 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -15,7 +15,6 @@ %script{:src=>"/javascripts/lazar-gui.js"} %script{ :src=>"/javascripts/bootstrap.js"} %script{:src=>"/javascripts/pagination.min.js"} - %script{:src=>"/javascripts/google_analytics_lazar.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"} diff --git a/views/model_details.haml b/views/model_details.haml index 2d7a693..714d4d8 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -48,34 +48,42 @@ %p.card-text - if model.classification? / accuracy, confusion matrixes - - av = cv.accept_values + - accept_values = cv.accept_values + - av = [] + - if accept_values[1] =~ /^non/ + - av << accept_values[0] + - av << accept_values[1] + - else + - av = accept_values - keys = cv.accuracy.collect{|key, value| key} - acc = cv.accuracy.collect{|key, value| value.signif(3)} - tpr = cv.true_rate.collect{|key, hash| hash[av[0]].signif(3)} - fpr = cv.true_rate.collect{|key, hash| hash[av[1]].signif(3)} - pp = cv.predictivity.collect{|key, hash| hash[av[0]].signif(3)} - np = cv.predictivity.collect{|key, hash| hash[av[1]].signif(3)} - %table.table.table-borderless.table-responsive + %table.table.table-bordered.table-responsive.text-center.bg-white %tr - %td.text-center + %td.text-center.bg-light = "Nr.#{idx+1}" - %td Accuracy + %td + %a{:href=>"https://en.wikipedia.org/wiki/Accuracy_and_precision", :rel=>"external"} + Accuracy %td %a{:href=>"https://en.wikipedia.org/wiki/Sensitivity_and_specificity", :rel=>"external"} - True #{av[0] =~ /^non/ ? "negative" : "positive"} rate + True positive rate (Sensitivity, Recall) %td %a{:href=>"https://en.wikipedia.org/wiki/Sensitivity_and_specificity", :rel=>"external"} - True #{av[1] =~ /^non/ ? "negative" : "positive"} rate + True negative rate (Specificity) %td %a{:href=>"https://en.wikipedia.org/wiki/Positive_and_negative_predictive_values", :rel=>"external"} - #{av[0] =~ /^non/ ? "Negative" : "Positive"} predictiv value + Positive predictive value (Precision) %td %a{:href=>"https://en.wikipedia.org/wiki/Positive_and_negative_predictive_values", :rel=>"external"} - #{av[1] =~ /^non/ ? "Negative" : "Positive"} predictiv value + Negative predictive value - keys.each_with_index do |key,idx| %tr / keys - %td.fit.text-right.pr-0= key.gsub("_", " ") + %td.fit.text-right= key.gsub("_", " ") / acc,accuray value: %td= acc[idx] / tpr,true positive rate @@ -86,52 +94,48 @@ %td= pp[idx] / np,negative predictions %td= np[idx] - %div.row - %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#pplot#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"pplot#{model.id}#{idx}"}, :style=>"font-size:small;"} - Probability plot - %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#matrix#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"matrix#{model.id}#{idx}"}, :style=>"font-size:small;"} - Confusion matrix - %div.collapse{:id=>"matrix#{model.id}#{idx}"} + %div.row.justify-content-center + %h6 Confusion matrix + %div.row{:id=>"matrix#{model.id}#{idx}"} %table.table.table-borderless.table-responsive %tr %td.fit.text-center all %td.fit.text-center confidence high %td.fit.text-center confidence low - %tr + %tr.justify-content-around / confusion matrix - keys.each do |key| - matrix = cv.confusion_matrix[key] - %td.fit.text-right - %table.table-sm + %td + %table.table-sm.text-center %tr %td %td - %td - %h6 actual + %td actual %td %tr %td %td - %td active - %td inactive + %td.border.bg-secondary.text-white active + %td.border.bg-secondary.text-white inactive %tr - %td - %h6 predicted - %td active - %td - = matrix[0][0] - %td + %td predicted + %td.border.bg-secondary.text-white active + %td.border.bg-white + %b= matrix[0][0] + %td.border.bg-white = matrix[0][1] %tr %td - %td inactive - %td + %td.border.bg-secondary.text-white inactive + %td.border.bg-white = matrix[1][0] - %td - = matrix[1][1] - + %td.border.bg-white + %b= matrix[1][1] + %div.row.justify-content-center + %h6 Probability plot %div.row - %div.collapse.plot.mx-auto{:id=>"pplot#{model.id}#{idx}"} + %div.plot.mx-auto{:id=>"pplot#{model.id}#{idx}"} %img{:src=>"/#{cv.id}.png", :alt=>"#{cv.id}.png"} / regression @@ -144,9 +148,9 @@ - nrp = cv.nr_predictions.collect{|key,value| value} - wpi = cv.within_prediction_interval.collect{|key,value| value} - opi = cv.out_of_prediction_interval.collect{|key,value| value} - %table.table.table-borderless.table-responsive + %table.table.table-bordered.table-responsive.text-center.bg-white %tr - %td.text-center + %td.text-center.bg-light = "Nr.#{idx+1}" %td %a{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} @@ -162,7 +166,7 @@ - keys.each_with_index do |key,idx| %tr / keys - %td.fit.text-right.pr-0= key.gsub("_", " ") + %td.fit.text-right= key.gsub("_", " ") / rsme: %td= rmse[idx] / mae: @@ -175,11 +179,10 @@ %td= wpi[idx] / Out of prediction interval: %td= opi[idx] + %div.row.justify-content-center + %h6 Correlation plot %div.row - %button.btn.btn-outline-info.mx-auto{:type=>"button", :data=>{:toggle=>"collapse", :target=>"#cplot#{model.id}#{idx}"}, :aria=>{:expanded=>"false", :controls=>"cplot#{model.id}#{idx}"}, :style=>"font-size:small;"} - Correlation plot - %div.row - %div.collapse.plot.mx-auto{:id=>"cplot#{model.id}#{idx}"} + %div.plot.mx-auto{:id=>"cplot#{model.id}#{idx}"} %img{:src=>"/#{cv.id}.png", :alt=>"#{cv.id}.png"} - unless idx == crossvalidations.size-1 %hr diff --git a/views/neighbors.haml b/views/neighbors.haml index 5f3e2bc..8f8e186 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -44,10 +44,11 @@ - else - if !neighbor[:measurement].nil? = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})
#{c.mmol_to_mg(neighbor[:measurement].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : neighbor[:measurement] - %p - %a{:href=>PUBCHEM_CID_URI+c.cid, :rel => "external"} - PubChem - %span.fa.fa-xs.fa-external-link + - if c.cid && c.cid != "0" + %p + %a{:href=>PUBCHEM_CID_URI+c.cid, :rel => "external"} + PubChem + %span.fa.fa-xs.fa-external-link / Similarity = tanimoto %td = neighbor[:similarity].round(3) diff --git a/views/prediction.haml b/views/prediction.haml index fe1e487..3631f10 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -13,10 +13,11 @@ %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: to("/prediction/#{@compound.id}/details"), :id=>"link01"}} = embedded_svg(@compound.svg, :title=>"click for details") %p= @compound.smiles - %p - %a{:href=>PUBCHEM_CID_URI+@compound.cid, :rel => "external"} - PubChem - %span.fa.fa-xs.fa-external-link + - if @compound.cid && @compound.cid != "0" + %p + %a{:href=>PUBCHEM_CID_URI+@compound.cid, :rel => "external"} + PubChem + %span.fa.fa-xs.fa-external-link - @model_types = {} - @dbhit = {} - @predictions.each_with_index do |prediction,i| @@ -93,25 +94,25 @@ %b Confidence: %br = prediction[:confidence] - + / show warnings and info %p - - if !prediction[:info].blank? + - unless @dbhit[i] || prediction[:info].blank? %b Info: %br %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",
") - - if !prediction[:warnings].blank? + - unless prediction[:warnings].blank? - warning = prediction[:warnings].last %b Warnings: %br %p=warning#.sub(/,/, ",
") - else %br - - if !prediction[:info].blank? + - unless @dbhit[i] || prediction[:info].blank? %b Info: %br %p=prediction[:info].sub(/\'.*\'/,"").sub(/,/, ",
") - - if !prediction[:warnings].blank? + - unless prediction[:warnings].blank? - warning = prediction[:warnings].last %b Warnings: %br -- cgit v1.2.3 From 8ed2cc12241bca469ba43dd5a87518e644f4b991 Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 19 Jul 2019 11:06:29 +0000 Subject: refined confusion matrixes --- views/model_details.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'views') diff --git a/views/model_details.haml b/views/model_details.haml index 714d4d8..7049ee8 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -111,7 +111,7 @@ %tr %td %td - %td actual + %td{:colspan=>"2"} measured %td %tr %td @@ -119,14 +119,14 @@ %td.border.bg-secondary.text-white active %td.border.bg-secondary.text-white inactive %tr - %td predicted + %td.align-middle{:rowspan=>"2"} predicted %td.border.bg-secondary.text-white active %td.border.bg-white %b= matrix[0][0] %td.border.bg-white = matrix[0][1] %tr - %td + //%td %td.border.bg-secondary.text-white inactive %td.border.bg-white = matrix[1][0] -- cgit v1.2.3 From fbe5a51d5c0fb8001dfbddc7ba458cf85a617282 Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 25 Jul 2019 08:42:03 +0000 Subject: add API link; no plots for git --- views/layout.haml | 2 ++ 1 file changed, 2 insertions(+) (limited to 'views') diff --git a/views/layout.haml b/views/layout.haml index 1fe3813..38b4b4f 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -43,6 +43,8 @@ %span.fa.fa-envelope [version: #{@version}] %p + A graphical overview of the service API can be found + %a{:href => "#{to('/api')}", :rel => "external"} here. Please cite %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"} -- cgit v1.2.3 From 807b87cf18b42c055e62c91e31b05a728a7fdd42 Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 29 Jul 2019 14:53:44 +0000 Subject: optimize batch table size; mute task progress js functions --- views/batch.haml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index f161125..efb9b71 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -18,17 +18,17 @@ // prepare variable values for javascript // increase timer interval for large datasets - ctimer = ((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) - - approx = {} - - sum_approx = 0 + //- approx = {} + //- sum_approx = 0 // process batch predictions - @models.each_with_index do |model,idx| - m = Model::Validation.find model - task = @tasks[idx].id - - tasktime = task.generation_time.to_i + //- tasktime = task.generation_time.to_i // assume single compound prediction time: classification=0.1s,regression=0.5s - - task_approx = m.classification? ? (tasktime*1000 + @compounds_size*100) : (tasktime*1000 + @compounds_size*500) - - approx[idx] = task_approx + sum_approx - - sum_approx += (m.classification? ? @compounds_size*100 : @compounds_size*500) + //- task_approx = m.classification? ? (tasktime*1000 + @compounds_size*100) : (tasktime*1000 + @compounds_size*500) + //- approx[idx] = task_approx + sum_approx + //- sum_approx += (m.classification? ? @compounds_size*100 : @compounds_size*500) #result.card.bg-light{:id=>idx} %div.card-body %div.row @@ -49,11 +49,11 @@ %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_#{idx}", :class=>"circle", :alt=>"wait", :style=>"display:none;"} :javascript $(document).ready(function() { - taskProgress('#{idx}','#{ctimer}','#{approx[idx]}','#{to("/prediction/task/?turi=#{task}")}'); + taskProgress('#{idx}','#{ctimer}','#{to("/prediction/task/?turi=#{task}")}'); }); #data-container.card.d-none.table-responsive{:id=>idx} :javascript - taskProgress = function(idx,timer,approximate,task_uri){ + taskProgress = function(idx,timer,task_uri){ // wait until previous task is completed if (idx > 0){ markers[idx] = setInterval(function(){ -- cgit v1.2.3 From 1ffdd765fe4b4d9d80626070dea652fe467a2fa5 Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 1 Aug 2019 16:48:14 +0000 Subject: introduce task for upload and parse to dataset --- views/batch.haml | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index efb9b71..2e48ec0 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -11,24 +11,26 @@ %a.btn.btn-outline-info{:href => to("/predict?tpid=#{@pid}")} %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} New Prediction +%div.card.bg-light{:id=>"uploadDataset"} + %div.card-body + %h3.card-title="Processing file #{@filename} to dataset." + %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_upload", :class=>"circle", :alt=>"processing"} + :javascript + uploadInterval = setInterval(function(){ + uploadDataset('#{to("/prediction/task/?turi=#{@upid}")}'); + }, 1000 ); + %div.card.bg-light %div.card-body %h3.card-title="Batch prediction results for: #{@filename}" // prepare variable values for javascript // increase timer interval for large datasets - - ctimer = ((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) - //- approx = {} - //- sum_approx = 0 + - ctimer = 1000#((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) // process batch predictions - @models.each_with_index do |model,idx| - m = Model::Validation.find model - task = @tasks[idx].id - //- tasktime = task.generation_time.to_i - // assume single compound prediction time: classification=0.1s,regression=0.5s - //- task_approx = m.classification? ? (tasktime*1000 + @compounds_size*100) : (tasktime*1000 + @compounds_size*500) - //- approx[idx] = task_approx + sum_approx - //- sum_approx += (m.classification? ? @compounds_size*100 : @compounds_size*500) #result.card.bg-light{:id=>idx} %div.card-body %div.row @@ -36,14 +38,12 @@ %h5.card-title="#{m.endpoint} (#{m.species})" #pager{:id=>idx} %div.col-6 - %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{to("/prediction/task/?predictions=#{task}")}','#{model}','#{idx}','#{@compounds_size}')"} + %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{to("/prediction/task/?predictions=#{task}")}','#{model}','#{idx}','#{to("/prediction/task/?turi=#{task}")}')"} %span.fa.fa-caret-right Details %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 ... %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_#{idx}", :class=>"circle", :alt=>"wait", :style=>"display:none;"} @@ -60,7 +60,6 @@ var button = document.getElementById("detailsbutton_"+(idx-1)); if(!button.classList.contains('disabled')){ renderTask(task_uri,idx); - //remaining(idx,approximate); $("#est_"+idx).hide(); $("#circle_"+idx).show(); } @@ -68,9 +67,14 @@ }else{ markers[idx] = setInterval(function(){ renderTask(task_uri,idx); - //remaining(idx,approximate); - $("#est_"+idx).hide(); - $("#circle_"+idx).show(); + // check that dataset parsing is completed + if (document.getElementById("uploadDataset")){ + $("#est_"+idx).show(); + $("#circle_"+idx).hide(); + } else { + $("#est_"+idx).hide(); + $("#circle_"+idx).show(); + } }, timer ); }; }; -- cgit v1.2.3 From b349cb51c4e46e1ae1bb309e9c589f1cff89e5af Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 2 Aug 2019 10:57:06 +0000 Subject: optimize upload task with wait for dataset id --- views/batch.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index 2e48ec0..ed69819 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -26,7 +26,7 @@ // prepare variable values for javascript // increase timer interval for large datasets - - ctimer = 1000#((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) + - ctimer = 2000#((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) // process batch predictions - @models.each_with_index do |model,idx| - m = Model::Validation.find model -- cgit v1.2.3 From 1546e77e9b2796f20215caa23f06822c96be27ee Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 5 Aug 2019 09:48:54 +0000 Subject: ensure xhr requests are https to avoid mixed content issue in browsers --- views/batch.haml | 12 ++++++------ views/error.haml | 2 +- views/faq.haml | 2 +- views/layout.haml | 10 +++++----- views/model_details.haml | 4 ++-- views/neighbors.haml | 2 +- views/predict.haml | 8 ++++---- views/prediction.haml | 4 ++-- 8 files changed, 22 insertions(+), 22 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index ed69819..b03d1c7 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -3,12 +3,12 @@ window.addEventListener('unload', ktpid, false); function ktpid() { var client = new XMLHttpRequest(); - client.open("GET", "#{to("/prediction/task?ktpid=#{@pid}")}", false); + client.open("GET", '//#{ENV['VIRTUAL_HOST']}/prediction/task?ktpid=#{@pid}', false); client.setRequestHeader("Content-Type", "application/json"); client.send(null); }; %div.card - %a.btn.btn-outline-info{:href => to("/predict?tpid=#{@pid}")} + %a.btn.btn-outline-info{:href => "//#{ENV['VIRTUAL_HOST']}/predict?tpid=#{@pid}"} %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} New Prediction %div.card.bg-light{:id=>"uploadDataset"} @@ -17,7 +17,7 @@ %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_upload", :class=>"circle", :alt=>"processing"} :javascript uploadInterval = setInterval(function(){ - uploadDataset('#{to("/prediction/task/?turi=#{@upid}")}'); + uploadDataset('//#{ENV['VIRTUAL_HOST']}/prediction/task/?turi=#{@upid}'); }, 1000 ); %div.card.bg-light @@ -38,10 +38,10 @@ %h5.card-title="#{m.endpoint} (#{m.species})" #pager{:id=>idx} %div.col-6 - %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{to("/prediction/task/?predictions=#{task}")}','#{model}','#{idx}','#{to("/prediction/task/?turi=#{task}")}')"} + %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('//#{ENV['VIRTUAL_HOST']}/prediction/task/?predictions=#{task}','#{model}','#{idx}','//#{ENV['VIRTUAL_HOST']}/prediction/task/?turi=#{task}')"} %span.fa.fa-caret-right Details - %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/batch/download?tid=#{task}")}", :title=>"download"} + %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"//#{ENV['VIRTUAL_HOST']}/predict/batch/download?tid=#{task}", :title=>"download"} %span.fa.fa-download CSV %p{:id=>"est_#{idx}"} @@ -49,7 +49,7 @@ %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_#{idx}", :class=>"circle", :alt=>"wait", :style=>"display:none;"} :javascript $(document).ready(function() { - taskProgress('#{idx}','#{ctimer}','#{to("/prediction/task/?turi=#{task}")}'); + taskProgress('#{idx}','#{ctimer}','//#{ENV['VIRTUAL_HOST']}/prediction/task/?turi=#{task}'); }); #data-container.card.d-none.table-responsive{:id=>idx} :javascript diff --git a/views/error.haml b/views/error.haml index ca6a0b2..b1adee9 100644 --- a/views/error.haml +++ b/views/error.haml @@ -1,5 +1,5 @@ %div.card - %a.btn.btn-warning{:href => to('/predict')} + %a.btn.btn-warning{:href => "//#{ENV['VIRTUAL_HOST']}/predict"} %i.fa.fa-caret-left Back %div.card-body diff --git a/views/faq.haml b/views/faq.haml index 63479e2..b058de8 100644 --- a/views/faq.haml +++ b/views/faq.haml @@ -1,5 +1,5 @@ %div.card - %a.btn.btn-warning{:href => to('/predict')} + %a.btn.btn-warning{:href => "//#{ENV['VIRTUAL_HOST']}/predict"} %i.fa.fa-caret-left Back %div.card-body diff --git a/views/layout.haml b/views/layout.haml index 38b4b4f..790c647 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -37,14 +37,14 @@ Problems, bugs, ideas for improvements ? Please report at our %a{:href => 'https://github.com/opentox/lazar-gui/issues', :rel => "external"} issue tracker , check out the - %a{:href=> to("/predict/faq")} FAQ + %a{:href=> "//#{ENV['VIRTUAL_HOST']}/predict/faq"} FAQ page or send us an email. %a{ :href=>"mailto:info@in-silico.ch?subject=[lazar v#{@version}]", :target=>"_top"} %span.fa.fa-envelope [version: #{@version}] %p A graphical overview of the service API can be found - %a{:href => "#{to('/api')}", :rel => "external"} here. + %a{:href => "//#{ENV['VIRTUAL_HOST']}/api", :rel => "external"} here. Please cite %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"} @@ -66,15 +66,15 @@ © %a{:href => 'http://www.in-silico.ch', :rel => "external"} in silico toxicology gmbh 2004 - #{Time.now.year.to_s} | - %a{:href => to("/predict/license"), :rel => "external"} GPL3 License + %a{:href => "//#{ENV['VIRTUAL_HOST']}/predict/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"} + %a{:href=>"https://www.bfr.bund.de/de/start.html", :rel=>"external"} %img{:src=>"/images/bfr_logo.gif"} - %a{:href=>"http://www.opentox.org/", :rel=>"external"} + %a{:href=>"https://www.opentox.org/", :rel=>"external"} %img{:src=>"/images/ot_logo.png"} %a{:href=>"https://enanomapper.net/", :rel=>"external"} %img{:src=>"/images/enm_logo.png"} diff --git a/views/model_details.haml b/views/model_details.haml index 7049ee8..1fcc624 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -13,7 +13,7 @@ = data_entries.count/3 %br = "Training dataset:\t" - %a{:href=>"#{to("/predict/dataset/#{training_dataset.name}")}"} + %a{:href=>"//#{ENV['VIRTUAL_HOST']}/predict/dataset/#{training_dataset.name}"} = training_dataset.name %div.card.bg-light @@ -190,7 +190,7 @@ %div.card.bg-light %div.card-body %h6.card-title QMRF: - %a.btn.btn-outline-info{:href=>"#{to("/predict/report/#{model.id}")}", :id=>"report#{model.id}", :style=>"font-size:small;"} + %a.btn.btn-outline-info{:href=>"//#{ENV['VIRTUAL_HOST']}/predict/report/#{model.id}", :id=>"report#{model.id}", :style=>"font-size:small;"} %span.fa.fa-download XML %br diff --git a/views/neighbors.haml b/views/neighbors.haml index 8f8e186..687f0ab 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -34,7 +34,7 @@ / Compound - 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}"}} + %a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: "//#{ENV['VIRTUAL_HOST']}/prediction/#{CGI.escape(c.id.to_s)}/details", :id=>"link#{j+1}#{count}"}} = embedded_svg(c.svg, :title=>"click for details") / Measured Activity diff --git a/views/predict.haml b/views/predict.haml index cca2147..966ffd2 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -1,7 +1,7 @@ %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet", :property=>"stylesheet"} %script{:src=>"/jsme/jsme.nocache.js"} -// 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())" } +// whole site content needs to be in one form. Input and checkboxes are proofed by js functions. +%form{:name => "form", :action => "//#{ENV['VIRTUAL_HOST']}/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 @@ -20,7 +20,7 @@ %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 => to("/predict/help"), :rel => "external", :style=>"margin-left: 1em;"} Help + %a.btn.btn-outline-info{:href => "//#{ENV['VIRTUAL_HOST']}/predict/help", :rel => "external", :style=>"margin-left: 1em;"} Help %fieldset#middle.card.bg-light #models.card-body @@ -37,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}','#{to("/predict/modeldetails/#{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}','//#{ENV['VIRTUAL_HOST']}/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;"} diff --git a/views/prediction.haml b/views/prediction.haml index 3631f10..19f5caf 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -1,5 +1,5 @@ %div.card - %a.btn.btn-outline-info{:href => to('/predict')} + %a.btn.btn-outline-info{:href => "//#{ENV['VIRTUAL_HOST']}/predict"} %span.fa.fa-caret-left New Prediction %div.card.bg-light @@ -10,7 +10,7 @@ %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"}} + %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: "//#{ENV['VIRTUAL_HOST']}/prediction/#{@compound.id}/details", :id=>"link01"}} = embedded_svg(@compound.svg, :title=>"click for details") %p= @compound.smiles - if @compound.cid && @compound.cid != "0" -- cgit v1.2.3 From 185a6df5e09dc89a50f23858e9cb221aacca9327 Mon Sep 17 00:00:00 2001 From: gebele Date: Tue, 6 Aug 2019 09:39:09 +0000 Subject: start render task after file processing is finished --- views/batch.haml | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index b03d1c7..e0fc573 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -26,7 +26,7 @@ // prepare variable values for javascript // increase timer interval for large datasets - - ctimer = 2000#((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) + - ctimer = 10000#((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) // process batch predictions - @models.each_with_index do |model,idx| - m = Model::Validation.find model @@ -66,14 +66,16 @@ }, timer ); }else{ markers[idx] = setInterval(function(){ - renderTask(task_uri,idx); // check that dataset parsing is completed if (document.getElementById("uploadDataset")){ $("#est_"+idx).show(); $("#circle_"+idx).hide(); } else { - $("#est_"+idx).hide(); - $("#circle_"+idx).show(); + renderTask(task_uri,idx); + if ( $("#est_"+idx).is(":visible") ){ + $("#est_"+idx).hide(); + $("#circle_"+idx).show(); + } } }, timer ); }; -- cgit v1.2.3 From 498ad82d2cc8582d3139bf69a0fe333d6b425668 Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 8 Aug 2019 12:44:29 +0000 Subject: ensure dataset parser errors not hidden in a task; check upload by first header; remove_task_data, tasks, prediction dataset, training dataset; js code refinement --- views/batch.haml | 44 ++++---------------------------------------- views/upload.haml | 28 ++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 40 deletions(-) create mode 100644 views/upload.haml (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index e0fc573..4e1df05 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -11,22 +11,13 @@ %a.btn.btn-outline-info{:href => "//#{ENV['VIRTUAL_HOST']}/predict?tpid=#{@pid}"} %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} New Prediction -%div.card.bg-light{:id=>"uploadDataset"} - %div.card-body - %h3.card-title="Processing file #{@filename} to dataset." - %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_upload", :class=>"circle", :alt=>"processing"} - :javascript - uploadInterval = setInterval(function(){ - uploadDataset('//#{ENV['VIRTUAL_HOST']}/prediction/task/?turi=#{@upid}'); - }, 1000 ); - %div.card.bg-light %div.card-body - %h3.card-title="Batch prediction results for: #{@filename}" + %h3.card-title="Batch prediction results for: #{@filename}" // prepare variable values for javascript // increase timer interval for large datasets - - ctimer = 10000#((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) + - timer = 10000#((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000)) // process batch predictions - @models.each_with_index do |model,idx| - m = Model::Validation.find model @@ -38,7 +29,7 @@ %h5.card-title="#{m.endpoint} (#{m.species})" #pager{:id=>idx} %div.col-6 - %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('//#{ENV['VIRTUAL_HOST']}/prediction/task/?predictions=#{task}','#{model}','#{idx}','//#{ENV['VIRTUAL_HOST']}/prediction/task/?turi=#{task}')"} + %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('//#{ENV['VIRTUAL_HOST']}/prediction/task/?predictions=#{task}','#{model}','#{idx}','#{@compounds_size}')"} %span.fa.fa-caret-right Details %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"//#{ENV['VIRTUAL_HOST']}/predict/batch/download?tid=#{task}", :title=>"download"} @@ -49,37 +40,10 @@ %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_#{idx}", :class=>"circle", :alt=>"wait", :style=>"display:none;"} :javascript $(document).ready(function() { - taskProgress('#{idx}','#{ctimer}','//#{ENV['VIRTUAL_HOST']}/prediction/task/?turi=#{task}'); + taskProgress('#{idx}','#{timer}','//#{ENV['VIRTUAL_HOST']}/prediction/task/?turi=#{task}'); }); #data-container.card.d-none.table-responsive{:id=>idx} :javascript - taskProgress = function(idx,timer,task_uri){ - // wait until previous task is completed - if (idx > 0){ - markers[idx] = setInterval(function(){ - var button = document.getElementById("detailsbutton_"+(idx-1)); - if(!button.classList.contains('disabled')){ - renderTask(task_uri,idx); - $("#est_"+idx).hide(); - $("#circle_"+idx).show(); - } - }, timer ); - }else{ - markers[idx] = setInterval(function(){ - // check that dataset parsing is completed - if (document.getElementById("uploadDataset")){ - $("#est_"+idx).show(); - $("#circle_"+idx).hide(); - } else { - renderTask(task_uri,idx); - if ( $("#est_"+idx).is(":visible") ){ - $("#est_"+idx).hide(); - $("#circle_"+idx).show(); - } - } - }, timer ); - }; - }; %div.modal.fade{:id=>"details", :tabindex=>"-1", :role=>"dialog"} %div.modal-dialog.modal-lg{:role=>"document"} %div.modal-content diff --git a/views/upload.haml b/views/upload.haml new file mode 100644 index 0000000..159f7a5 --- /dev/null +++ b/views/upload.haml @@ -0,0 +1,28 @@ +%div.card + %a.btn.btn-outline-info{:href => "//#{ENV['VIRTUAL_HOST']}/predict"} + %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} + New Prediction +%div.card.bg-light{:id=>"uploadDataset"} + %div.card-body + %h3.card-title="Processing file #{@filename} to dataset." + %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_upload", :class=>"circle", :alt=>"processing"} + :javascript + $(document).ready(function() { + var aClient = new HttpClient(); + aClient.post('//#{ENV['VIRTUAL_HOST']}/predict', 'models=#{@models}&batchfile=#{@filename}', function(res1) { + var contentType = res1.getResponseHeader('content-type'); + if (contentType == "application/json"){ + var response = JSON.parse(res1.responseText); + } else { + var response = res1.responseText; + } + if (res1.status == 200 && response['models'] && response['dataset_id']){ + aClient.post('//#{ENV['VIRTUAL_HOST']}/predict', 'models='+response['models']+'&dataset_id='+response['dataset_id'], function(res2) { + $("body").html(res2.responseText); + }); + } + if (res1.status == 200 && contentType == "text/html"){ + $("body").html(response); + } + }); + }); -- cgit v1.2.3 From 270bddf5081671cd1905d6cce6eb3659159f573a Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 16 Aug 2019 09:49:53 +0000 Subject: change hostname method --- views/batch.haml | 10 +++++----- views/error.haml | 2 +- views/faq.haml | 2 +- views/layout.haml | 6 +++--- views/model_details.haml | 4 ++-- views/neighbors.haml | 2 +- views/predict.haml | 6 +++--- views/prediction.haml | 4 ++-- views/upload.haml | 6 +++--- 9 files changed, 21 insertions(+), 21 deletions(-) (limited to 'views') diff --git a/views/batch.haml b/views/batch.haml index 4e1df05..6bc2354 100644 --- a/views/batch.haml +++ b/views/batch.haml @@ -3,12 +3,12 @@ window.addEventListener('unload', ktpid, false); function ktpid() { var client = new XMLHttpRequest(); - client.open("GET", '//#{ENV['VIRTUAL_HOST']}/prediction/task?ktpid=#{@pid}', false); + client.open("GET", '//#{$host_with_port}/prediction/task?ktpid=#{@pid}', false); client.setRequestHeader("Content-Type", "application/json"); client.send(null); }; %div.card - %a.btn.btn-outline-info{:href => "//#{ENV['VIRTUAL_HOST']}/predict?tpid=#{@pid}"} + %a.btn.btn-outline-info{:href => "//#{$host_with_port}/predict?tpid=#{@pid}"} %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} New Prediction %div.card.bg-light @@ -29,10 +29,10 @@ %h5.card-title="#{m.endpoint} (#{m.species})" #pager{:id=>idx} %div.col-6 - %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('//#{ENV['VIRTUAL_HOST']}/prediction/task/?predictions=#{task}','#{model}','#{idx}','#{@compounds_size}')"} + %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('//#{$host_with_port}/prediction/task/?predictions=#{task}','#{model}','#{idx}','#{@compounds_size}')"} %span.fa.fa-caret-right Details - %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"//#{ENV['VIRTUAL_HOST']}/predict/batch/download?tid=#{task}", :title=>"download"} + %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"//#{$host_with_port}/predict/batch/download?tid=#{task}", :title=>"download"} %span.fa.fa-download CSV %p{:id=>"est_#{idx}"} @@ -40,7 +40,7 @@ %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_#{idx}", :class=>"circle", :alt=>"wait", :style=>"display:none;"} :javascript $(document).ready(function() { - taskProgress('#{idx}','#{timer}','//#{ENV['VIRTUAL_HOST']}/prediction/task/?turi=#{task}'); + taskProgress('#{idx}','#{timer}','//#{$host_with_port}/prediction/task/?turi=#{task}'); }); #data-container.card.d-none.table-responsive{:id=>idx} :javascript diff --git a/views/error.haml b/views/error.haml index b1adee9..d00b578 100644 --- a/views/error.haml +++ b/views/error.haml @@ -1,5 +1,5 @@ %div.card - %a.btn.btn-warning{:href => "//#{ENV['VIRTUAL_HOST']}/predict"} + %a.btn.btn-warning{:href => "//#{$host_with_port}/predict"} %i.fa.fa-caret-left Back %div.card-body diff --git a/views/faq.haml b/views/faq.haml index b058de8..8c0e604 100644 --- a/views/faq.haml +++ b/views/faq.haml @@ -1,5 +1,5 @@ %div.card - %a.btn.btn-warning{:href => "//#{ENV['VIRTUAL_HOST']}/predict"} + %a.btn.btn-warning{:href => "//#{$host_with_port}/predict"} %i.fa.fa-caret-left Back %div.card-body diff --git a/views/layout.haml b/views/layout.haml index 790c647..8547e13 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -37,14 +37,14 @@ Problems, bugs, ideas for improvements ? Please report at our %a{:href => 'https://github.com/opentox/lazar-gui/issues', :rel => "external"} issue tracker , check out the - %a{:href=> "//#{ENV['VIRTUAL_HOST']}/predict/faq"} FAQ + %a{:href=> "//#{$host_with_port}/predict/faq"} FAQ page or send us an email. %a{ :href=>"mailto:info@in-silico.ch?subject=[lazar v#{@version}]", :target=>"_top"} %span.fa.fa-envelope [version: #{@version}] %p A graphical overview of the service API can be found - %a{:href => "//#{ENV['VIRTUAL_HOST']}/api", :rel => "external"} here. + %a{:href => "//#{$host_with_port}/api", :rel => "external"} here. Please cite %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"} @@ -66,7 +66,7 @@ © %a{:href => 'http://www.in-silico.ch', :rel => "external"} in silico toxicology gmbh 2004 - #{Time.now.year.to_s} | - %a{:href => "//#{ENV['VIRTUAL_HOST']}/predict/license", :rel => "external"} GPL3 License + %a{:href => "//#{$host_with_port}/predict/license", :rel => "external"} GPL3 License %supporters.row %div.card-body.text-center %div.card-title diff --git a/views/model_details.haml b/views/model_details.haml index 1fcc624..ab58035 100644 --- a/views/model_details.haml +++ b/views/model_details.haml @@ -13,7 +13,7 @@ = data_entries.count/3 %br = "Training dataset:\t" - %a{:href=>"//#{ENV['VIRTUAL_HOST']}/predict/dataset/#{training_dataset.name}"} + %a{:href=>"//#{$host_with_port}/predict/dataset/#{training_dataset.name}"} = training_dataset.name %div.card.bg-light @@ -190,7 +190,7 @@ %div.card.bg-light %div.card-body %h6.card-title QMRF: - %a.btn.btn-outline-info{:href=>"//#{ENV['VIRTUAL_HOST']}/predict/report/#{model.id}", :id=>"report#{model.id}", :style=>"font-size:small;"} + %a.btn.btn-outline-info{:href=>"//#{$host_with_port}/predict/report/#{model.id}", :id=>"report#{model.id}", :style=>"font-size:small;"} %span.fa.fa-download XML %br diff --git a/views/neighbors.haml b/views/neighbors.haml index 687f0ab..e67c664 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -34,7 +34,7 @@ / Compound - c = Compound.find(neighbor) %td - %a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: "//#{ENV['VIRTUAL_HOST']}/prediction/#{CGI.escape(c.id.to_s)}/details", :id=>"link#{j+1}#{count}"}} + %a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: "//#{$host_with_port}/prediction/#{CGI.escape(c.id.to_s)}/details", :id=>"link#{j+1}#{count}"}} = embedded_svg(c.svg, :title=>"click for details") / Measured Activity diff --git a/views/predict.haml b/views/predict.haml index 966ffd2..7dedf63 100644 --- a/views/predict.haml +++ b/views/predict.haml @@ -1,7 +1,7 @@ %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet", :property=>"stylesheet"} %script{:src=>"/jsme/jsme.nocache.js"} // whole site content needs to be in one form. Input and checkboxes are proofed by js functions. -%form{:name => "form", :action => "//#{ENV['VIRTUAL_HOST']}/predict", :method => "post", :enctype => "multipart/form-data", :onsubmit => "return !!(showcircle())" } +%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 @@ -20,7 +20,7 @@ %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 => "//#{ENV['VIRTUAL_HOST']}/predict/help", :rel => "external", :style=>"margin-left: 1em;"} Help + %a.btn.btn-outline-info{:href => "//#{$host_with_port}/predict/help", :rel => "external", :style=>"margin-left: 1em;"} Help %fieldset#middle.card.bg-light #models.card-body @@ -37,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}','//#{ENV['VIRTUAL_HOST']}/predict/modeldetails/#{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}','//#{$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;"} diff --git a/views/prediction.haml b/views/prediction.haml index 19f5caf..44d5fa8 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -1,5 +1,5 @@ %div.card - %a.btn.btn-outline-info{:href => "//#{ENV['VIRTUAL_HOST']}/predict"} + %a.btn.btn-outline-info{:href => "//#{$host_with_port}/predict"} %span.fa.fa-caret-left New Prediction %div.card.bg-light @@ -10,7 +10,7 @@ %tbody %tr %td.align-items-center{:id=>"compound"} - %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: "//#{ENV['VIRTUAL_HOST']}/prediction/#{@compound.id}/details", :id=>"link01"}} + %a.btn.btn-link{:href => "#details0", data: { toggle: "modal", remote: "//#{$host_with_port}/prediction/#{@compound.id}/details", :id=>"link01"}} = embedded_svg(@compound.svg, :title=>"click for details") %p= @compound.smiles - if @compound.cid && @compound.cid != "0" diff --git a/views/upload.haml b/views/upload.haml index 159f7a5..54faa5c 100644 --- a/views/upload.haml +++ b/views/upload.haml @@ -1,5 +1,5 @@ %div.card - %a.btn.btn-outline-info{:href => "//#{ENV['VIRTUAL_HOST']}/predict"} + %a.btn.btn-outline-info{:href => "//#{$host_with_port}/predict"} %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}} New Prediction %div.card.bg-light{:id=>"uploadDataset"} @@ -9,7 +9,7 @@ :javascript $(document).ready(function() { var aClient = new HttpClient(); - aClient.post('//#{ENV['VIRTUAL_HOST']}/predict', 'models=#{@models}&batchfile=#{@filename}', function(res1) { + aClient.post('//#{$host_with_port}/predict', 'models=#{@models}&batchfile=#{@filename}', function(res1) { var contentType = res1.getResponseHeader('content-type'); if (contentType == "application/json"){ var response = JSON.parse(res1.responseText); @@ -17,7 +17,7 @@ var response = res1.responseText; } if (res1.status == 200 && response['models'] && response['dataset_id']){ - aClient.post('//#{ENV['VIRTUAL_HOST']}/predict', 'models='+response['models']+'&dataset_id='+response['dataset_id'], function(res2) { + aClient.post('//#{$host_with_port}/predict', 'models='+response['models']+'&dataset_id='+response['dataset_id'], function(res2) { $("body").html(res2.responseText); }); } -- cgit v1.2.3 From a84d9eabf1b921086a688f81df28b0f21ba4df19 Mon Sep 17 00:00:00 2001 From: Christoph Helma Date: Tue, 3 Sep 2019 13:06:00 +0200 Subject: docker installation as gem, links with port numbers, version 1.4.0 --- views/layout.haml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'views') diff --git a/views/layout.haml b/views/layout.haml index 8547e13..8cd5dfb 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -34,9 +34,7 @@ %div.container-fluid %topline.alert %p - Problems, bugs, ideas for improvements ? Please report at our - %a{:href => 'https://github.com/opentox/lazar-gui/issues', :rel => "external"} issue tracker - , check out the + Problems, bugs or ideas for improvements ? Please check the %a{:href=> "//#{$host_with_port}/predict/faq"} FAQ page or send us an email. %a{ :href=>"mailto:info@in-silico.ch?subject=[lazar v#{@version}]", :target=>"_top"} -- cgit v1.2.3