close #154

metagenomics · Nov 22, 2015 · 4b8a46b · 4b8a46b
1 parent 760460d
commit 4b8a46b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>
diff --git 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>