summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristoph Helma <helma@in-silico.ch>2016-02-02 13:03:25 +0100
committerChristoph Helma <helma@in-silico.ch>2016-02-02 13:03:25 +0100
commit2a106706372cf7f4d876ed9c08576e0ec3729434 (patch)
tree397f7381d1e681bcb2af25861be9d2e7616a2583
parent0f7394eab539df98d350e2a7c76c0b5e6fd0319a (diff)
parent6697948a6c925b165ab5d4dda87849a5f450003a (diff)
Merge branch 'master' of github.com:enanomapper/nano-lazar-gui
-rw-r--r--application.rb2
-rw-r--r--public/css/style.css50
-rw-r--r--public/css/style2.css31
-rw-r--r--public/javascripts/jquery.doubleScroll.js126
-rw-r--r--public/javascripts/nanolazar.js11
-rw-r--r--views/layout.haml7
-rw-r--r--views/prediction.haml62
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 = {}