From eb9f19e89e34eb4d573b67d9a2a7ad45ea71f393 Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 1 Feb 2016 15:35:08 +0100 Subject: top scroll, tox colum changes, added ID links --- application.rb | 2 + public/css/style.css | 53 ++++--------- public/css/style2.css | 31 -------- public/javascripts/jquery.doubleScroll.js | 126 ++++++++++++++++++++++++++++++ public/javascripts/nanolazar.js | 11 +++ views/layout.haml | 5 +- views/prediction.haml | 56 ++++++++----- 7 files changed, 192 insertions(+), 92 deletions(-) delete mode 100644 public/css/style2.css create mode 100644 public/javascripts/jquery.doubleScroll.js create mode 100644 public/javascripts/nanolazar.js 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..b28c15d 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,39 +1,16 @@ -/* 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 { + border: 1px solid black;} +.tablesorter thead tr + th.physchem { + min-width: 60px;} + th.tox { + background-color: #CCFFCC !important} +.tablesorter tbody tr + td.physchem { + min-width: 60px;} + td.tox { + background-color: #CCFFCC } +.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: '
', + 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..12d908f 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"} diff --git a/views/prediction.haml b/views/prediction.haml index 9385fa7..8a7c28d 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,8 @@ Similarity %th Composition - %th - Tox + %th.tox + Toxicity - @input.each do |key| %th.physchem = key[0].gsub(/\sMean/, '') @@ -49,7 +45,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 +58,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,7 +77,7 @@ - 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 - else @@ -80,7 +86,7 @@ - @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 @@ -109,20 +115,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 = {} -- cgit v1.2.3