From df8ed98fcc052da2641c26897a8dd0592f274e53 Mon Sep 17 00:00:00 2001 From: gebele Date: Fri, 15 Apr 2016 09:59:43 +0000 Subject: reactivated info buttons; changed unit for fish; introduced FAQ --- views/faq.haml | 2 ++ views/faq_layout.haml | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++ views/layout.haml | 5 +++- views/neighbors.haml | 7 +++--- views/prediction.haml | 23 ++++++++++-------- views/style.scss | 12 +++++++++ 6 files changed, 102 insertions(+), 14 deletions(-) create mode 100644 views/faq.haml create mode 100644 views/faq_layout.haml (limited to 'views') diff --git a/views/faq.haml b/views/faq.haml new file mode 100644 index 0000000..818b96a --- /dev/null +++ b/views/faq.haml @@ -0,0 +1,2 @@ +%div.well.faq + = @faq diff --git a/views/faq_layout.haml b/views/faq_layout.haml new file mode 100644 index 0000000..a9b6664 --- /dev/null +++ b/views/faq_layout.haml @@ -0,0 +1,67 @@ +!!! +%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"} + %head + %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 GUI FAQ + %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/lazar-gui.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-2 + %a{:href=> to("/predict")} + %img.media-object{:src=>"/images/ist_logo.png", :alt=>"logo", :style=>"margin:0 3em 0 2em;"} + %div.col-md-10 + %h1.media-heading{:style=>"margin: 0 0 0 1em;display:inline;"} Lazar GUI + A Graphical User Interface for the Lazar framework + + %div.container-fluid + :javascript + $(document).ready(function(){ + $("#back-top").hide(); + $(".blind").error(function(){ + $(this).attr('src', '/images/blind.png'); + }); + }); + + = yield + + %footer.footer + %div.container-fluid + %p.text-muted + © + %a{:href => 'http://www.in-silico.ch', :rel => "external"} in silico toxicology gmbh 2004 - #{Time.now.year.to_s} + + #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;"} + :javascript + $("#back-top").hide(); + $(function () { + $(window).scroll(function () { + if ($(this).scrollTop() > 600) { + $('#back-top').fadeIn(); + } else { + $('#back-top').fadeOut(); + } + }); + // scroll body to 0px on click + $('#back-top a').click(function () { + $('body,html').animate({ + scrollTop: 0 + }, 500); + return false; + }); + }); diff --git a/views/layout.haml b/views/layout.haml index 60f2bb3..46d326d 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -16,7 +16,7 @@ %script{:src=>"/javascripts/jquery.tablesorter.min.js"} %script{:src=>"/javascripts/jquery.tablesorter.widgets.js"} %script{ :src=>"/javascripts/lazar-gui.js"} - %body{:style=>"background-color:#E7E7E7"} + %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. @@ -27,6 +27,9 @@ %img.media-object{:src=>"/images/ist_logo.png", :alt=>"logo", :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 %div.container-fluid :javascript diff --git a/views/neighbors.haml b/views/neighbors.haml index 6011a6d..c94331a 100644 --- a/views/neighbors.haml +++ b/views/neighbors.haml @@ -75,12 +75,13 @@ %tr %td %td{:style=>"font-size:x-small;padding:0px;"} - / %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", data: {toggle:"popover", placement:"auto", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"} + %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;"} - / %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", data: {toggle:"popover", placement:"auto", html:"true", content:"LAZAR calculates activity specific similarities based on the presence of statistically significant fragments. This procedure will "}, :style=>"z-index:auto+10;"} + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"left", html:"true", content:"LAZAR calculates activity specific similarities based on the presence of statistically significant fragments. This procedure will "}, :style=>"z-index:auto+10;"} / %td %tbody - type = @model_types[j] + - unit = @models[j].unit - prediction[:neighbors].uniq.each_with_index do |neighbor,count| %tr / Compound @@ -93,7 +94,7 @@ / Measured Activity = compound.features %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;white-space:nowrap;"} - features = c.features.collect{|k,v| v if k == predictionFeature[j]["id"] }.compact.flatten - = (predictionFeature[j]["type"] == "numeric") ? features.collect{|v| weight = c.mmol_to_mg(v); '%.2e' % v + " (#{@models[j].unit})"+" | #{'%.2e' % weight} (mg/kg_bw/day)"}.join("
") : features.join("
") + = (predictionFeature[j]["type"] == "numeric") ? features.collect{|v| weight = c.mmol_to_mg(v); '%.2e' % v + " (#{@models[j].unit})"+" | #{'%.2e' % weight} #{(unit == "mmol/L") ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("
") : features.join("
") / Similarity = tanimoto %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;"} / TODO differentiate between no neighbors found and compound found in dataset, display neighbors for compounds in dataset? diff --git a/views/prediction.haml b/views/prediction.haml index f99df75..89c33d6 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -24,6 +24,7 @@ - @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})" @@ -34,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 + " (#{@models[i].unit})"+"|#{'%.2e' % weight} (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]} (#{@models[i].unit}) | #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} (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 @@ -46,27 +47,29 @@ = type %br %b Prediction: - = (type == "Regression") ? "#{'%.2e' % prediction[:value]} (#{@models[i].unit}) | #{'%.2e' % @compound.mmol_to_mg(prediction[:value])} (mg/kg_bw/day)" : prediction[:value] - / TODO update description - / %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Prediction", data: {toggle:"popover", placement:"left", html:"true", content:"LAZAR calculates searches the training dataset for similar compounds (neighbors) and calculates the prediction from their measured activities. LAZAR calculates predictions using Please keep in mind that predictions are based on the measured activities of neighbors."}} + = (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. + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Prediction", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"LAZAR calculates searches the training dataset for similar compounds (neighbors) and calculates the prediction from their measured activities. LAZAR calculates predictions using Please keep in mind that predictions are based on the measured activities of neighbors."}} %br - / TODO probability - if type == "Regression" %b 95% Prediction interval: - interval = prediction[:prediction_interval].nil? ? "[ - - ]" : prediction[:prediction_interval].collect{|i| i.round(2)} - = interval + = "[#{interval[0]} (#{unit}), #{interval[1]} (#{unit})]" + / 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:"A prediction interval (wikipedia) is an estimate of an interval in which future observations will fall, with a certain probability, given what has already been observed."}} - else %b Confidence: = prediction[:confidence].round(2) unless prediction[:confidence].nil? - / %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Confidence", data: {toggle:"popover", placement:"left", html:"true", content:"Indicates the applicability domain of a model. Predictions with a high confidence can be expected to be more reliable than predictions with low confidence. Confidence values may take any value between 0 and 1. For most models confidence > 0.025 is a sensible (hard) cutoff to distinguish between reliable and unreliable predictions."}} + / confidence popover + %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Confidence", :tabindex=>"0", data: {trigger:"focus", toggle:"popover", placement:"left", html:"true", content:"Indicates the applicability domain of a model. Predictions with a high confidence can be expected to be more reliable than predictions with low confidence. Confidence values may take any value between 0 and 1. For most models confidence > 0.025 is a sensible (hard) cutoff to distinguish between reliable and unreliable predictions."}} %p /TODO add tooltip for significant ftagments and descriptors / - if @model_type[i] =~ /classification/i && (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0) / Significant fragments: - / %a.btn.btn-default.btn-sm{:id=>"linkSigFragments", :href => "#detailsTop", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[i]}/#{CGI.escape(@compound.uri)}/fingerprints")}} Significant fragments + / %a.btn.btn-default.btn-sm{:id=>"linkSigFragments", :href => "#detailsTop", :tabindex=>"0", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[i]}/#{CGI.escape(@compound.uri)}/fingerprints")}} Significant fragments / - if @model_type[i] =~ /regression/i && (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0) / Descriptors - / %a.btn.btn-default.btn-sm{:id=>"linkDescriptors", :href => "#detailsTop", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[i]}/#{CGI.escape(@compound.uri)}/fingerprints")}} Descriptors + / %a.btn.btn-default.btn-sm{:id=>"linkDescriptors", :href => "#detailsTop", :tabindex=>"0", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[i]}/#{CGI.escape(@compound.uri)}/fingerprints")}} Descriptors / %p %p - else diff --git a/views/style.scss b/views/style.scss index a0502b5..70c8035 100644 --- a/views/style.scss +++ b/views/style.scss @@ -1,3 +1,6 @@ +body { + background-color:#E7E7E7; +} table.table-borderless tbody tr td{ border-top: none; } @@ -25,3 +28,12 @@ img { height: 300px; width: 300px; } +.faq { + text-align: block; + margin-left:15%; + margin-right:15%; + margin-top:2%; +} +.faq h1 { + text-align: center; +} -- cgit v1.2.3