diff options
Diffstat (limited to 'views/neighbors.haml')
| -rw-r--r-- | views/neighbors.haml | 178 |
1 files changed, 98 insertions, 80 deletions
diff --git a/views/neighbors.haml b/views/neighbors.haml index 8af59b6..e67c664 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -1,83 +1,101 @@ -%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:"<a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://en.wikipedia.org/wiki/Jaccard_index\">Tanimoto/Jaccard</a> similarity based on <a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://openbabel.org/docs/dev/FileFormats/MolPrint2D_format.html\">Molprint2D</a> 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})</br>#{c.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : neighbor[:measurement].join(", ") - - else - - if !neighbor[:measurement].nil? - = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})</br>#{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"}} + = "#{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"} + 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:"<a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://en.wikipedia.org/wiki/Jaccard_index\">Tanimoto/Jaccard</a> similarity based on <a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://openbabel.org/docs/dev/FileFormats/MolPrint2D_format.html\">Molprint2D</a> 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: "//#{$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 + %td + - if neighbor[:measurement].is_a?(Array) + = (type == "Regression") ? neighbor[:measurement].collect{|value| "#{value.delog10.signif(3)} (#{unit})</br>#{c.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : neighbor[:measurement].join(", ") + - else + - if !neighbor[:measurement].nil? + = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})</br>#{c.mmol_to_mg(neighbor[:measurement].delog10).signif(3)} #{(unit =~ /\b(mmol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : neighbor[:measurement] + - 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) - - 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")[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: + 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); |