From b3fffd49c61745e953415c50084fee900d8029e9 Mon Sep 17 00:00:00 2001 From: gebele Date: Thu, 21 Apr 2016 13:45:20 +0000 Subject: fixed neighbors table; bg-color predictions due to safari; disabled neighbors sort option; enabled table header info icons --- public/images/IST_logo_s.png | Bin 0 -> 7456 bytes views/layout.haml | 17 +++++++++-------- views/neighbors.haml | 24 ++++++++---------------- views/prediction.haml | 10 +++++----- views/style.scss | 4 ++++ 5 files changed, 26 insertions(+), 29 deletions(-) create mode 100644 public/images/IST_logo_s.png diff --git a/public/images/IST_logo_s.png b/public/images/IST_logo_s.png new file mode 100644 index 0000000..eff71af Binary files /dev/null and b/public/images/IST_logo_s.png differ diff --git a/views/layout.haml b/views/layout.haml index a49238f..1220cf5 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -4,7 +4,7 @@ %meta{'charset'=>"utf-8"} %meta{'http-equiv'=>"X-UA-Compatible", :content=>"IE=edge"} %meta{'name'=>"viewport", :content=>"width=device-width, initial-scale=1"} - %title Lazar Toxicity Predictions + %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'}"} @@ -20,17 +20,18 @@ %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 + %header.page-header{:style=>"margin:20px 0 20px;text-align:justify;display:inline-block;width:100%;"} %div.row %div.col-md-2 %a{:href=> to("/predict")} - %img.media-object{:src=>"/images/ist_logo.png", :alt=>"logo", :style=>"margin:0 3em 0 2em;"} + %img.media-object{:src=>"/images/IST_logo_s.png", :alt=>"logo", :width=>"150px", :heigth=>"150px", :style=>"margin:0 3em 0 2em;"} %div.col-md-8 - %h1.media-heading{:style=>"margin: 0 0 0 1em;"} Lazar Toxicity Predictions - /%div.col-md-2 - / %a.btn.btn-info{:href=> to("/faq"), :rel => "external"} - / FAQ - + %h1.media-heading{:style=>"margin: 0 0 0 2em;"} + lazar Toxicity Predictions + %div.col-md-2 + %h1.media-heading{:style=>"margin: 0 0 0 1em;"} + %small + %a{:href=>"https://nano-lazar.in-silico.ch/predict"} nano-lazar %div.container-fluid :javascript $(document).ready(function(){ diff --git a/views/neighbors.haml b/views/neighbors.haml index 2edc3ab..096e432 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -38,7 +38,7 @@ $("table##{j+1}").tablesorter({ debug: false, theme: "bootstrap", - headerTemplate: '{content} {icon}', + headerTemplate: '', widgets: ['columns', 'uitheme', 'stickyHeaders'], widgetOptions: { stickyHeaders_attachTo : '.tab-content', @@ -53,34 +53,26 @@ stickyHeaders_yScroll : null, stickyHeaders_filteredToTop: true }, - headers: {0: {sorter: false}, 3: {sorter: false}}, sortList: [[2,1]], + headers: {sorter: false}, widthFixed: false }); }); - if prediction[:neighbors].size > 0 %div.table-responsive - %table.tablesorter{:id=>"#{j+1}", :style=>"border-style: solid;"} + %table{:id=>"#{j+1}", :style=>"border-style: solid;"} %thead %tr - %th{:style =>"vertical-align:middle;"} + %th.sorter-false{:style =>"vertical-align:middle;"} Compound - %th{:style =>"vertical-align:middle;"} + %th.sorter-false{:style =>"vertical-align:middle;"} Measured Activity - %th{:style =>"vertical-align:middle;"} + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", 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=>"#neighbors", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", html:"true", content:"Tanimoto/Jaccard similarity based on Molprint2D fingerprints."}, :style=>"z-index:auto+10;"} / %th{:style =>"vertical-align:middle;"} / Supporting Information - %span - %tr - %td - %td{:style=>"font-size:x-small;padding:0px;"} - / measured activity - %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"} - %td{:style=>"font-size:x-small;padding:0px;"} - / similarity - %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", html:"true", content:"Tanimoto/Jaccard similarity based on Molprint2D fingerprints."}, :style=>"z-index:auto+10;"} - / %td %tbody - type = @model_types[j] - unit = @models[j].unit diff --git a/views/prediction.haml b/views/prediction.haml index 709e17e..0f3d57b 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -12,7 +12,7 @@ / displays all prediction result in first table %h3 Prediction Results: %div.table-responsive - %table.table.table-bordered{:id=>"overview", :style=>"background-color:white;"} + %table.table.table-bordered{:id=>"overview"} %tbody %tr %td{:id=>"compound", :style=>"vertical-align:top;"} @@ -35,9 +35,9 @@ %b Measured activity: - p prediction[:value] - if prediction[:value].is_a?(Array) - = (type == "Regression") ? prediction[:value].collect{|v| weight = Compound.from_smiles(@compound.smiles).mmol_to_mg(v); '%.2e' % v + " (#{unit})"+"|#{'%.2e' % weight} #{unit == "mmol/L" ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("
") : prediction[:value].join(", ") + = (type == "Regression") ? prediction[:value].collect{|v| weight = Compound.from_smiles(@compound.smiles).mmol_to_mg(v); '%.2e' % v + " (#{unit})"+", #{'%.2e' % weight} #{unit == "mmol/L" ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("
") : prediction[:value].join(", ") - else - = (type == "Regression") ? "#{"%.2e" % prediction[:value]} (#{unit}) | #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value] + = (type == "Regression") ? "#{"%.2e" % prediction[:value]} (#{unit}), #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value] %p %b Compound is part of the training dataset - elsif prediction[:neighbors].size > 0 @@ -50,13 +50,13 @@ = (type == "Regression") ? "#{'%.2e' % prediction[:value]} (#{unit}) , #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}" : prediction[:value] / tabindex=0 seems the best fix for FF|S browsers on OSX better than trigger="click focus" which ends up in double click for FF. / prediction popover - %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :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."}} + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :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."}} %br - if type == "Regression" %b 95% Prediction interval: - interval = prediction[:prediction_interval].nil? ? " - - " : prediction[:prediction_interval].collect{|i| i.round(2)} %br - = "#{interval[0]} - #{interval[1]} (#{unit}), #{'%.2e' % @compound.mmol_to_mg(interval[0])} - #{'%.2e' % @compound.mmol_to_mg(interval[1])} (mg/L)" + = "#{interval[0]} - #{interval[1]} (#{unit}), #{'%.2e' % @compound.mmol_to_mg(interval[0])} - #{'%.2e' % @compound.mmol_to_mg(interval[1])} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}" / prediction intervall popover %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :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."}} - else diff --git a/views/style.scss b/views/style.scss index 70c8035..29f532b 100644 --- a/views/style.scss +++ b/views/style.scss @@ -37,3 +37,7 @@ img { .faq h1 { text-align: center; } +.tablesorter-bootstrap thead .sorter-false { + cursor: default; +} + -- cgit v1.2.3