style enhancement

table views, sortable neighbors

3 files changed, 101 insertions, 38 deletions

diff --git a/views/layout.haml b/views/layout.haml
index d6b1a9e..b940d16 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -10,21 +10,23 @@
     %link{:rel=>'stylesheet', :href=>"#{'/css/theme.default.min.css'}"}
     %link{:rel=>'stylesheet', :href=>"#{'/css/theme.bootstrap.min.css'}"}
     %script{:src=>"/javascripts/jquery-1.11.2.min.js"}
+    %script{:src=>"/javascripts/jquery.tablesorter.min.js"}
+    %script{:src=>"/javascripts/jquery.tablesorter.widgets.js"}
     %script{:src=>"/javascripts/bootstrap.min.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
+    %header.page-header{:style=>"margin:20px 0 20px;"}
       %div.row
-        %div.col-md-2
+        %div.col-sm-2
           %a{:href=> to("/predict")}
             %img.media-object{:src=>"/images/ist_logo.png", :alt=>"logo_ist", :style=>"margin:0 3em 0 2em;"}
-        %div.col-md-6
-          %h1.media-heading{:style=>"margin: 0 0 0 1em;"} Nano Lazar Toxicity Predictions
-        %div.col-md-2
-          %a{:href=> "http://www.enanomapper.net" }
-            %img.media-object{:src=>"/images/enm-sm.jpg", :width=>"200px", :heigth=>"200px", :alt=>"logo_enm", :style=>"margin:0 3em 0 2em;"}
+        %div.col-sm-6
+          %h1.media-heading{:style=>"margin: 0 0 0 1em;"} nano-lazar Toxicity Predictions
+        %div.col-sm-2
+          %a{:href=> "http://www.enanomapper.net"}
+            %img.media-object{:src=>"/images/enm_logo.png", :width=>"200px", :heigth=>"200px", :alt=>"logo_enm", :style=>"margin:0 3em 0 2em;"}
     
     %div.container-fluid
       :javascript
@@ -38,7 +40,7 @@
       %div.container-fluid
         %p.text-muted
           © 
-          %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2004 - #{Time.now.year.to_s}
+          %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2014 - #{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;"}
diff --git a/views/predict.haml b/views/predict.haml
index 6b9bf95..6abd5bc 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -1,7 +1,7 @@
 %div.well
   %form{:role=>"form", :action=> to("/predict"), :method=>"post"}
     %span.help-block
-      some help text to explain
+      Please characterise a Gold nanoparticle
     #input
     - size = @example.size
     - @example.each_with_index do |v,id|
@@ -9,7 +9,7 @@
       - key = v[0]
       - val = v[1]
       %div.form-group
-        %h3= key
+        %h5= key
         %input.form-control{:id=>id,:type=>"hidden",:name=>"input_key_#{id}",:value=>key}
         %input.form-control{:id=>id,:type=>"text",:name=>"input_value_#{id}",:value=>val}
     %input.form-control{:id=>"example",:type=>"hidden",:name=>"size",:value=>size}
diff --git a/views/prediction.haml b/views/prediction.haml
index 75164bd..99bd2a0 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -1,4 +1,7 @@
 %div.well
+  %a.btn.btn-xs.btn-warning{:href => to('/predict'), :style=>"margin-bottom:1em;"}
+    %i.glyphicon.glyphicon-menu-left
+    New Prediction
   %ul.nav.nav-tabs
     %li
       %a{:href=>"#query", :data=>{:toggle=>"tab"}} Query
@@ -16,39 +19,97 @@
       - @input.each_with_index do |v,id|
         - key = v[0]
         - val = v[1]
-        %h3= key
+        %h5= key
         %input.form-control{:id=>id,:type=>"text",:value=>"#{val}", :disabled=>"true"}
     #match.tab-pane.fade
       - if @prediction[:match]  
-        %table
-        - @prediction[:match][:id].keys.each do |key|
-          %tr
-            %h3= key.capitalize
-          - @prediction[:match][:id][key.to_s].each do |k,v|
-            %td
-              %h5= k
-              %p= v
+        %table{:id=>"match"}
+          %thead
+            %tr
+            - @prediction[:match][:id].keys.each do |key|
+              %th= key.capitalize
+          %tbody
+            %tr
+              / composition
+              %td
+                - @prediction[:match][:id]["composition"].each do |k,v|
+                  %h5= k
+                  %p= v
+              / tox
+              %td
+                - @prediction[:match][:id]["tox"].each do |k,v|
+                  %h5= k
+                  %p= v
+              / physchem
+              %td
+                - @prediction[:match][:id]["physchem"].each do |k,v|
+                  %h5= k
+                  %p= v
       - else
-        %h3 No match
+        %h5 No match
     #prediction.tab-pane.in.active
       - @prediction[:prediction].each do |k,v|
-        %h3= k
-        %p= v
+        %h5= k
+        %p= v.round(5)
     #neighbors.tab-pane.fade
-      - @prediction[:neighbors].each do |neighbor|
-        %h3= neighbor["id"]
-        %h5= "Similarity: #{neighbor["similarity"]}"
-        %h3 Composition
-        - neighbor["composition"].each do |k,v|
-          %h5= k
-          %p= v
-        %h3 Tox
-        - neighbor["tox"].each do |k,v|
-          %h5= k
-          %p= v
-        %h3 Physchem
-        - neighbor["physchem"].each do |k,v|
-          %h5= k
-          %p= v
-        %hr
+      :javascript
+        $(document).ready(function(){
+          $("table#match").tablesorter({
+            debug: false,
+            theme: "bootstrap",
+            headerTemplate: '{content} {icon}',
+            widgets: ['uitheme'],
+            headers: {0: {sorter: false}, 1: {sorter: false}, 2: {sorter: false}},
+            sortList: [[1,1]],
+            widthFixed: false
+          });
+        });
+        $(document).ready(function(){
+          $("table#neighbors").tablesorter({
+            debug: false,
+            theme: "bootstrap",
+            headerTemplate: '{content} {icon}',
+            widgets: ['uitheme'],
+            sortList: [[1,1]],
+            widthFixed: false
+          });
+        });
+      %div.table-responsive
+        %table.tablesorter{:id=>"neighbors", :style=>"border-style: 1px solid black;margin-top:10px;"}
+          %thead
+            %tr
+              %th{:style =>"vertical-align:middle;"}
+                ID  
+              %th{:style =>"vertical-align:middle;"}
+                Similarity
+              %th{:style =>"vertical-align:middle;"}
+                Composition  
+              %th{:style =>"vertical-align:middle;"}
+                Tox
+              %th{:style =>"vertical-align:middle;"}
+                Physchem
+          %tbody
+          - @prediction[:neighbors].each do |neighbor|
+            %tr
+              / ID
+              %td
+                %h5= neighbor["id"]
+              / Similarity
+              %td
+                %h5= neighbor["similarity"].round(3)
+              / Composition
+              %td
+                - neighbor["composition"].each do |k,v|
+                  %h5= k
+                  %p= v
+              / Tox
+              %td
+                - neighbor["tox"].each do |k,v|
+                  %h5= k
+                  %p= v.round(3)
+              / Physchem
+              %td
+                - neighbor["physchem"].each do |k,v|
+                  %h5= k
+                  %p= v