From fb36235aab01f4d0899b129cf8e2fc024b0d2f4b Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 16 Apr 2012 21:08:41 -0400
Subject: [PATCH] Significantly improve handling of SAM rendering with the new
 tabular display.  Optional parameters are accounted for now. For all tabular
 display: numerical columns align right, text aligns left. Build CSS.

---
 static/june_2007_style/base.less        |  4 ++
 static/june_2007_style/blue/base.css    |  1 +
 static/june_2007_style/blue/library.css |  4 +-
 templates/dataset/tabular_chunked.mako  | 63 ++++++++++++++++++++-----
 4 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/static/june_2007_style/base.less b/static/june_2007_style/base.less
index f7fcc20fc0c..3b5dcf58d8c 100644
--- a/static/june_2007_style/base.less
+++ b/static/june_2007_style/base.less
@@ -1722,6 +1722,10 @@ div.toolTitleNoSection
     padding:2px 10px;
 }
 
+#content_table td.stringalign{
+    text-align:left;
+}
+
 // ==== Integrated tool form styles
 
 .toolMenuAndView .toolForm
diff --git a/static/june_2007_style/blue/base.css b/static/june_2007_style/blue/base.css
index a1c467f75e7..d687ef70bb7 100644
--- a/static/june_2007_style/blue/base.css
+++ b/static/june_2007_style/blue/base.css
@@ -726,6 +726,7 @@ div.toolTitleNoSection{padding-bottom:5px;font-weight:bold;}
 #tool-search{padding-top:5px;padding-bottom:10px;position:relative;}
 #loading_indicator{position:fixed;right:10px;top:10px;height:32px;width:32px;background:url(largespinner.gif);}
 #content_table td{text-align:right;white-space:nowrap;padding:2px 10px;}
+#content_table td.stringalign{text-align:left;}
 .toolMenuAndView .toolForm{float:left;background-color:white;margin:10px;}
 .icon-button.display{background:url(history-buttons.png) no-repeat 0px 0px;}
 .icon-button.display:hover{background:url(history-buttons.png) no-repeat 0px -26px;}
diff --git a/static/june_2007_style/blue/library.css b/static/june_2007_style/blue/library.css
index 58afe2ccef5..3368c9ae6b3 100644
--- a/static/june_2007_style/blue/library.css
+++ b/static/june_2007_style/blue/library.css
@@ -1,9 +1,9 @@
 .libraryRow{background-color:#ebd9b2;}
-.datasetHighlighted{background-color:#C1C9E5;}
+.datasetHighlighted{background-color:#DFE5F9;}
 .libraryItemDeleted-True{font-style:italic;}
 div.libraryItemBody{padding:4px 4px 2px 4px;}
 li.folderRow,li.datasetRow{border-top:solid 1px #ddd;}
-li.folderRow:hover,li.datasetRow:hover{background-color:#C1C9E5;}
+li.folderRow:hover,li.datasetRow:hover{background-color:#DFE5F9;}
 img.expanderIcon{padding-right:4px;}
 input.datasetCheckbox,li,ul{padding:0;margin:0;}
 .rowTitle{padding:2px;}
diff --git a/templates/dataset/tabular_chunked.mako b/templates/dataset/tabular_chunked.mako
index efb7d260523..926a4b35f7f 100644
--- a/templates/dataset/tabular_chunked.mako
+++ b/templates/dataset/tabular_chunked.mako
@@ -6,26 +6,65 @@
 <%def name="javascripts()">
     ${parent.javascripts()}
     <script type="text/javascript">
-        var DATASET_URL = "${h.url_for( controller='/dataset', action='display', dataset_id=trans.security.encode_id( dataset.id ))}";
-        var DATASET_COLS = ${dataset.metadata.columns};
+
+        var DATASET_URL   = "${h.url_for( controller='/dataset', action='display', dataset_id=trans.security.encode_id( dataset.id ))}";
+        var DATASET_COLS  = ${dataset.metadata.columns};
+        var DATASET_TYPES = ${dataset.metadata.column_types};
+
         var current_chunk = 0;
 
+        function renderCell(cell_contents, index, colspan){
+            if (colspan !== undefined){
+                return '<td colspan="'+ colspan + '" class="stringalign">' + cell_contents + '</td>';
+            }
+            else if (DATASET_TYPES[index] == 'str'){
+                /* Left align all str columns, right align the rest */
+                return '<td class="stringalign">'+ cell_contents + '</td>';
+            }
+            else{
+                return '<td>'+ cell_contents + '</td>';
+            }
+        }
+
+        function renderRow(line){
+            /* Check length of cells to ensure this is a complete row. */
+            var cells = line.split('\t');
+            var rowstr = '<tr>';
+            if (cells.length == DATASET_COLS){
+                $.each(cells, function(index, cell_contents){
+                    rowstr += renderCell(cell_contents, index);
+                });
+            }
+            else if(cells.length > DATASET_COLS){
+                /* SAM file or like format with optional metadata included */
+                $.each(cells.slice(0, DATASET_COLS -1), function(index, cell_contents){
+                    rowstr += renderCell(cell_contents, index);
+                });
+                rowstr += renderCell(cells.slice(DATASET_COLS -1).join('\t'), DATASET_COLS-1);
+            }
+            else if(DATASET_COLS > 5 && cells.length == DATASET_COLS - 1 ){
+                /* SAM file or like format with optional metadata missing */
+                $.each(cells, function(index, cell_contents){
+                    rowstr += renderCell(cell_contents, index);
+                });
+                rowstr += '<td></td>';
+            }
+            else{
+                /* Comment line, just return the one cell*/
+                rowstr += renderCell(line, 0, DATASET_COLS);
+            }
+            rowstr += '</tr>';
+            return rowstr;
+        }
+
         function fillTable(){
             if (current_chunk !== -1){
                 var table = $('#content_table');
                 $.getJSON(DATASET_URL, {chunk: current_chunk}, function (result) {
                     if (result.ck_data !== ""){
                         var lines = result.ck_data.split('\n');
-                        $.each(lines, function(){
-                            var line = this;
-                            var cells = line.split('\t');
-                            /* Check length of cells to ensure this is a complete row. */
-                            if (cells.length == DATASET_COLS){
-                                table.append('<tr><td>' + cells.join('</td><td>') + '</td></tr>');
-                            }
-                            else{
-                                table.append('<tr><td colspan="'+ DATASET_COLS+ '">' + line + '</td></tr>');
-                            }
+                        $.each(lines, function(index, line){
+                            table.append(renderRow(line));
                         });
                         current_chunk = result.ck_index;
                     }