diff options
author | Christoph Helma <helma@in-silico.ch> | 2016-02-02 13:03:25 +0100 |
---|---|---|
committer | Christoph Helma <helma@in-silico.ch> | 2016-02-02 13:03:25 +0100 |
commit | 2a106706372cf7f4d876ed9c08576e0ec3729434 (patch) | |
tree | 397f7381d1e681bcb2af25861be9d2e7616a2583 | |
parent | 0f7394eab539df98d350e2a7c76c0b5e6fd0319a (diff) | |
parent | 6697948a6c925b165ab5d4dda87849a5f450003a (diff) |
Merge branch 'master' of github.com:enanomapper/nano-lazar-gui
-rw-r--r-- | application.rb | 2 | ||||
-rw-r--r-- | public/css/style.css | 50 | ||||
-rw-r--r-- | public/css/style2.css | 31 | ||||
-rw-r--r-- | public/javascripts/jquery.doubleScroll.js | 126 | ||||
-rw-r--r-- | public/javascripts/nanolazar.js | 11 | ||||
-rw-r--r-- | views/layout.haml | 7 | ||||
-rw-r--r-- | views/prediction.haml | 62 |
7 files changed, 195 insertions, 94 deletions
diff --git a/application.rb b/application.rb index 3782ded..e4850b5 100644 --- a/application.rb +++ b/application.rb @@ -1,6 +1,8 @@ require 'json' require_relative './nanoparticles.rb' +$ambit_search = "https://apps.ideaconsult.net/enanomapper/substance?type=name&search=" + configure :development do $logger = Logger.new(STDOUT) end diff --git a/public/css/style.css b/public/css/style.css index eb41f70..93500a6 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,39 +1,13 @@ -/* tables */ -table.tablesorter { - font-family:arial; - background-color: #CDCDCD; - margin:10px 0pt 15px; - font-size: 8pt; - width: 100%; - text-align: left; -} -table.tablesorter thead tr th, table.tablesorter tfoot tr th { - background-color: #e6EEEE; - border: 1px solid #FFF; - font-size: 8pt; - padding: 4px; -} -table.tablesorter thead tr .header { - background-image: url(bg.gif); - background-repeat: no-repeat; - background-position: center right; - cursor: pointer; -} -table.tablesorter tbody td { - color: #3D3D3D; - padding: 4px; - background-color: #FFF; - vertical-align: top; -} -table.tablesorter tbody tr.odd td { - background-color:#F0F0F6; -} -table.tablesorter thead tr .headerSortUp { - background-image: url(asc.gif); -} -table.tablesorter thead tr .headerSortDown { - background-image: url(desc.gif); -} -table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { -background-color: #8dbdd8; +.tablesorter thead tr + th.physchem { + min-width: 60px;} + th.tox { + background-color: #ffcc80 !important} +.tablesorter tbody tr + td.physchem { + min-width: 60px;} + td.tox { + background-color: #ffcc80 } +.tablesorter tbody tr.static td { + background-color: #CCFFCC; } diff --git a/public/css/style2.css b/public/css/style2.css deleted file mode 100644 index 5b0b8ae..0000000 --- a/public/css/style2.css +++ /dev/null @@ -1,31 +0,0 @@ -.tablesorter-scroller-bar-spacer { - background: #eee; -} -.tablesorter-scroller-fixed:after { - content: ''; - border-right: 1px solid #444; - width: 1px; - position: absolute; - top: 0; - bottom: 0; - z-index: 2; - right: 0; - margin: 10px 0 15px; -} -.tablesorter thead tr - th { - border: 1px solid black;} -.tablesorter thead tr - th.physchem { - min-width: 60px;} - th.tox { - white-space: nowrap;} -.tablesorter tbody tr - td { - border: 1px solid black;} -.tablesorter tbody tr - td.physchem { - min-width: 60px;} -.tablesorter tbody tr.static td { - background-color: #CCFFCC; -} diff --git a/public/javascripts/jquery.doubleScroll.js b/public/javascripts/jquery.doubleScroll.js new file mode 100644 index 0000000..8b19df8 --- /dev/null +++ b/public/javascripts/jquery.doubleScroll.js @@ -0,0 +1,126 @@ +/* + * @name DoubleScroll + * @desc displays scroll bar on top and on the bottom of the div + * @requires jQuery + * + * @author Pawel Suwala - http://suwala.eu/ + * @author Antoine Vianey - http://www.astek.fr/ + * @version 0.5 (11-11-2015) + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Usage: + * https://github.com/avianey/jqDoubleScroll + */ + (function( $ ) { + + jQuery.fn.doubleScroll = function(userOptions) { + + // Default options + var options = { + contentElement: undefined, // Widest element, if not specified first child element will be used + scrollCss: { + 'overflow-x': 'auto', + 'overflow-y': 'hidden' + }, + contentCss: { + 'overflow-x': 'auto', + 'overflow-y': 'hidden' + }, + onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present + resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized + timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing) + }; + + $.extend(true, options, userOptions); + + // do not modify + // internal stuff + $.extend(options, { + topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>', + topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper', + topScrollBarInnerSelector: '.doubleScroll-scroll' + }); + + var _showScrollBar = function($self, options) { + + if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) { + // content doesn't scroll + // remove any existing occurrence... + $self.prev(options.topScrollBarWrapperSelector).remove(); + return; + } + + // add div that will act as an upper scroll only if not already added to the DOM + var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector); + + if ($topScrollBar.length == 0) { + + // creating the scrollbar + // added before in the DOM + $topScrollBar = $(options.topScrollBarMarkup); + $self.before($topScrollBar); + + // apply the css + $topScrollBar.css(options.scrollCss); + $self.css(options.contentCss); + + // bind upper scroll to bottom scroll + $topScrollBar.bind('scroll.doubleScroll', function() { + $self.scrollLeft($topScrollBar.scrollLeft()); + }); + + // bind bottom scroll to upper scroll + var selfScrollHandler = function() { + $topScrollBar.scrollLeft($self.scrollLeft()); + }; + $self.bind('scroll.doubleScroll', selfScrollHandler); + } + + // find the content element (should be the widest one) + var $contentElement; + + if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) { + $contentElement = $self.find(options.contentElement); + } else { + $contentElement = $self.find('>:first-child'); + } + + // set the width of the wrappers + $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth()); + $topScrollBar.width($self.width()); + $topScrollBar.scrollLeft($self.scrollLeft()); + + } + + return this.each(function() { + + var $self = $(this); + + _showScrollBar($self, options); + + // bind the resize handler + // do it once + if (options.resetOnWindowResize) { + + var id; + var handler = function(e) { + _showScrollBar($self, options); + }; + + $(window).bind('resize.doubleScroll', function() { + // adding/removing/replacing the scrollbar might resize the window + // so the resizing flag will avoid the infinite loop here... + clearTimeout(id); + id = setTimeout(handler, options.timeToWaitForResize); + }); + + } + + }); + + } + +}( jQuery )); diff --git a/public/javascripts/nanolazar.js b/public/javascripts/nanolazar.js new file mode 100644 index 0000000..60602c6 --- /dev/null +++ b/public/javascripts/nanolazar.js @@ -0,0 +1,11 @@ +$(document).ready(function() { + addExternalLinks(); +}); + +addExternalLinks = function() { + $('A[rel="external"]').each(function() { + $(this).attr('alt', 'Link opens in new window.'); + $(this).attr('title', 'Link opens in new window.'); + $(this).attr('target', '_blank'); + }); +}; diff --git a/views/layout.haml b/views/layout.haml index 23d251c..148e431 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -7,7 +7,6 @@ %title Nano Lazar Toxicity Predictions %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'} %link{:rel=>'stylesheet', :href=>"#{'/css/style.css'}"} - %link{:rel=>'stylesheet', :href=>"#{'/css/style2.css'}"} %link{:rel=>'stylesheet', :href=>"#{'/css/bootstrap.min.css'}"} %link{:rel=>'stylesheet', :href=>"#{'/css/theme.bootstrap.min.css'}"} %link{:rel=>'stylesheet', :href=>"#{'/css/theme.default.min.css'}"} @@ -15,9 +14,9 @@ %script{:src=>"/javascripts/jquery.tablesorter.min.js"} %script{:src=>"/javascripts/jquery.tablesorter.widgets.js"} %script{:src=>"/javascripts/jquery.tablesorter.staticrow.min.js"} - -#%script{:src=>"/javascripts/jquery.doubleScroll.js"} - %script{:src=>"/javascripts/widget-scroller.js"} + %script{:src=>"/javascripts/jquery.doubleScroll.js"} %script{:src=>"/javascripts/bootstrap.min.js"} + %script{:src=>"/javascripts/nanolazar.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"} @@ -34,6 +33,8 @@ %img.media-object{:src=>"/images/enm_logo.png", :width=>"200px", :heigth=>"200px", :alt=>"logo_enm", :style=>"margin:0 3em 0 2em;"} %div.container-fluid + Problems, bugs, ideas for improvements ? Please report at our + %a{:href => 'https://github.com/enanomapper/nano-lazar/issues', :rel => "external"} issue tracker :javascript $(document).ready(function(){ $("#back-top").hide(); diff --git a/views/prediction.haml b/views/prediction.haml index 9385fa7..d22960b 100644 --- a/views/prediction.haml +++ b/views/prediction.haml @@ -11,25 +11,21 @@ $(document).ready(function(){ $(".tablesorter").tablesorter({ debug: false, - //theme: "bootstrap", + theme: "bootstrap", headerTemplate: '{content} {icon}', - widgets: ['filter', 'staticRow', 'scroller'], + widgets: ['uitheme', 'staticRow', 'stickyHeaders'], widgetOptions: { - scroller_upAfterSort: true, - scroller_jumpToHeader: true, - scroller_height : 300, - scroller_fixedColumns : 4, - scroller_addFixedOverlay : false, - scroller_barWidth : null + stickyHeaders_xScroll : null }, sortList: [[1,1]], widthFixed: false, }); + $('#neighbors').doubleScroll(); }); - #neighbors - %table.tablesorter{:id=>"fixed-columns-table"} + #neighbors.table-responsive + %table.tablesorter %thead %tr %th @@ -38,8 +34,10 @@ Similarity %th Composition - %th - Tox + %th.tox + Toxicity + %br + Net cell association [mL/ug(Mg)] - @input.each do |key| %th.physchem = key[0].gsub(/\sMean/, '') @@ -49,7 +47,8 @@ / id %td - if @prediction[:match] - %h5= @prediction[:match].keys[0] + %a{:href=> $ambit_search+@prediction[:match].keys[0], :rel=>"external"} + %h5= @prediction[:match].keys[0] - else %h5 Query / similarity @@ -61,9 +60,18 @@ / composition %td - if @prediction[:match] + - surfaceModifier = {} + - surfaceModifier["Surface modifier"] = [@prediction[:match].values[0]["composition"]["Surface modifier1"], @prediction[:match].values[0]["composition"]["Surface modifier2"]] + - @prediction[:match].values[0]["composition"].delete("Surface modifier1") + - @prediction[:match].values[0]["composition"].delete("Surface modifier2") + - @prediction[:match].values[0]["composition"].merge!(surfaceModifier) - @prediction[:match].values[0]["composition"].each do |k,v| %h5= k - %p= v + - if v.class == Array + - v.compact.each do |value| + %p= value + - else + %p= v - else %h5 x / tox @@ -71,19 +79,19 @@ - if @prediction[:prediction] - @prediction[:prediction].each do |k,v| %h5 Prediction - %p= k + -#%p= k.split.drop(1).join(" ")[1..-2] - if v == nil - %p 0 + %p not available - else %h5= v.round(5) - if @prediction[:match] - @prediction[:match].values[0]["tox"].each do |k,v| %hr %h5 Measurement - %p= k + -#%p= k.split.drop(1).join(" ")[1..-2] %p= v.round(3) - if !@prediction[:prediction] && !@prediction[:match] - %h5 x + %h5 not available / physchem - if @prediction[:match] - sorted = {} @@ -109,20 +117,30 @@ %tr / ID %td - %h5= neighbor["id"] + %a{:href=> $ambit_search+neighbor["id"], :rel=>"external"} + %h5= neighbor["id"] / Similarity %td %h5= neighbor["similarity"].round(3) / Composition %td + - surfaceModifier = {} + - surfaceModifier["Surface modifier"] = [neighbor["composition"]["Surface modifier1"], neighbor["composition"]["Surface modifier2"]] + - neighbor["composition"].delete("Surface modifier1") + - neighbor["composition"].delete("Surface modifier2") + - neighbor["composition"].merge!(surfaceModifier) - neighbor["composition"].each do |k,v| %h5= k - %p= v + - if v.class == Array + - v.compact.each do |value| + %p= value + - else + %p= v / Tox - %td + %td.tox - neighbor["tox"].each do |k,v| %h5 Measurement - %p= k + -#%p= k.split.drop(1).join(" ")[1..-2] %p= v.round(3) / Physchem - sorted = {} |