From 4b8a46b411843443f240bde245e524d527eefeb1 Mon Sep 17 00:00:00 2001
From: pbelmann <pbelmann@cebitec.uni-bielefeld.de>
Date: Sun, 22 Nov 2015 15:55:32 +0100
Subject: [PATCH] close #154

---
 scripts/web/app/templates/css/style.css    | 13 +++++++++++++
 scripts/web/app/templates/js/buildTable.js | 13 ++++++++++---
 scripts/web/app/templates/modal.html       | 16 ++++++++++++++++
 scripts/web/app/templates/overview.html    |  1 +
 4 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 scripts/web/app/templates/modal.html

diff --git a/scripts/web/app/templates/css/style.css b/scripts/web/app/templates/css/style.css
index e77b861..5387b17 100644
--- a/scripts/web/app/templates/css/style.css
+++ b/scripts/web/app/templates/css/style.css
@@ -1,3 +1,8 @@
+body {
+    padding-top: 0px !important;
+    padding-right: 0px !important;
+}
+
 .title {
     margin-top:200px;
     margin-bottom:100px;
@@ -36,6 +41,14 @@ footer {
     padding-bottom: 300px;
 }
 
+#sequences-text {
+    white-space: pre-wrap;       /* CSS 3 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
 .footer-title {
     padding-bottom:300px;
 }
diff --git a/scripts/web/app/templates/js/buildTable.js b/scripts/web/app/templates/js/buildTable.js
index a5314a5..922a2a4 100644
--- a/scripts/web/app/templates/js/buildTable.js
+++ b/scripts/web/app/templates/js/buildTable.js
@@ -2,7 +2,9 @@
 var linkFormatter = function(value, row){
         var path = window.location.href + "/../" + row['Gene ID'] + ".html";
         return '<a href='+ path +'>' + value + '</a>';
-}, setUpNavbar = function(){
+    }, seqFormatter = function(value, row, idx){
+        return '<button id="' + idx + '" class="btn btn-primary">Show Sequence</button>';
+    }, setUpNavbar = function(){
 
     var navbar = $('#navbar-main'),
         distance = navbar.offset().top,
@@ -17,7 +19,6 @@ var linkFormatter = function(value, row){
             $("body").css("padding-top", "0px");
         }
     });
-
 };
 
 d3.tsv("overview_new.txt", function (error, data) {
@@ -44,6 +45,7 @@ d3.tsv("overview_new.txt", function (error, data) {
                 }));
             }
         },
+        currRow = "",
         aggregateData = function(data) {
 
             var aggregation = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
@@ -94,7 +96,7 @@ d3.tsv("overview_new.txt", function (error, data) {
                 } else if(val=="Subject titles") {
                     return "<th data-filter-control='input' class='title-col' data-field='" + val + "' data-sortable='true' >" + val + "</th>";
                 } else if(val=="Gene sequence"){
-                    return "<th data-filter-control='input' class='seq-col' data-field='" + val + "' data-sortable='true' >" + val + "</th>";
+                    return "<th data-formatter='seqFormatter' data-filter-control='input' class='seq-col' data-field='" + val + "' data-sortable='true' >" + val + "</th>";
                 } else {
                     return "<th data-filter-control='input' data-align='center' data-field='" + val + "' data-sortable='true' >" + val + "</th>";
                 }
@@ -138,6 +140,11 @@ d3.tsv("overview_new.txt", function (error, data) {
         }
     });
 
+    $('table').on('click','button',function(event){
+        currRow = data[$(event.target).attr('id')];
+        $('#seqModal').modal('show').find('#sequences-text').text(currRow['Gene sequence']);
+    });
+
     table.bootstrapTable({data: data});
 
     setUpNavbar();
diff --git a/scripts/web/app/templates/modal.html b/scripts/web/app/templates/modal.html
new file mode 100644
index 0000000..cda7d89
--- /dev/null
+++ b/scripts/web/app/templates/modal.html
@@ -0,0 +1,16 @@
+<div id="seqModal" class="modal fade bd-example-modal-lg">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                    <span class="sr-only">Close</span>
+                </button>
+                <h4 class="modal-title" id="seqModalLabel">Sequence</h4>
+            </div>
+            <div class="modal-body">
+                <pre id="sequences-text"></pre>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/scripts/web/app/templates/overview.html b/scripts/web/app/templates/overview.html
index 9a3d7ca..cf67311 100644
--- a/scripts/web/app/templates/overview.html
+++ b/scripts/web/app/templates/overview.html
@@ -21,6 +21,7 @@
 <div class="container-fluid">
     {% include 'filter.html' %}
     {% include 'table.html' %}
+    {% include 'modal.html' %}
 </div>
 {% include 'contact.html' %}
 </body>