Added Scroller functionality to regular (but not global) search, which increases table load speed

In order to implement Scroller (and make table look nicer), all rows are the same height and excess description/authors text is shown in a tooltip
Increased table width for non-Geno DBs

Fixed issue where Genotype traits did not fetch their location_repr (text for displaying location), causing that column to be blank in searches

Fixed issue causing Correlation Matrix cells to not be colored corresponding with their correlation and also increased cell font a little

Fixed issue where dataset link in the Correlation Page did not correctly point to corresponding GN1 page

8 files changed, 229 insertions, 112 deletions

diff --git a/wqflask/base/data_set.py b/wqflask/base/data_set.py
index fddfce58..04436a2e 100644
--- a/wqflask/base/data_set.py
+++ b/wqflask/base/data_set.py
@@ -271,7 +271,8 @@ class DatasetGroup(object):
         self.f1list = None
         self.parlist = None
         self.get_f1_parent_strains()
-        #logger.debug("parents/f1s: {}:{}".format(self.parlist, self.f1list))
+
+        self.accession_id = self.get_accession_id()
 
         self.species = webqtlDatabaseFunction.retrieve_species(self.name)
 
@@ -279,6 +280,20 @@ class DatasetGroup(object):
         self.allsamples = None
         self._datasets = None
 
+    def get_accession_id(self):
+        results = g.db.execute("""select InfoFiles.GN_AccesionId from InfoFiles, PublishFreeze, InbredSet where
+                    InbredSet.Name = %s and
+                    PublishFreeze.InbredSetId = InbredSet.Id and
+                    InfoFiles.InfoPageName = PublishFreeze.Name and
+                    PublishFreeze.public > 0 and
+                    PublishFreeze.confidentiality < 1 order by
+                    PublishFreeze.CreateTime desc""", (self.name)).fetchone()
+
+        if results != None:
+            return str(results[0])
+        else:
+            return "None"
+
     def get_specified_markers(self, markers = []):
         self.markers = HumanMarkers(self.name, markers)
 
diff --git a/wqflask/base/trait.py b/wqflask/base/trait.py
index 276c624a..8788d983 100644
--- a/wqflask/base/trait.py
+++ b/wqflask/base/trait.py
@@ -91,16 +91,27 @@ class GeneralTrait(object):
                         additive=self.additive
                         )
         elif self.dataset.type == "Publish":
-            return dict(name=self.name,
-                        dataset=self.dataset.name,
-                        description=self.description_display,
-                        authors=self.authors,
-                        pubmed_text=self.pubmed_text,
-                        pubmed_link=self.pubmed_link,
-                        lrs_score=self.LRS_score_repr,
-                        lrs_location=self.LRS_location_repr,
-                        additive=self.additive
-                        )
+            if self.pubmed_id:
+                return dict(name=self.name,
+                            dataset=self.dataset.name,
+                            description=self.description_display,
+                            authors=self.authors,
+                            pubmed_text=self.pubmed_text,
+                            pubmed_link=self.pubmed_link,
+                            lrs_score=self.LRS_score_repr,
+                            lrs_location=self.LRS_location_repr,
+                            additive=self.additive
+                            )
+            else:
+                return dict(name=self.name,
+                            dataset=self.dataset.name,
+                            description=self.description_display,
+                            authors=self.authors,
+                            pubmed_text=self.pubmed_text,
+                            lrs_score=self.LRS_score_repr,
+                            lrs_location=self.LRS_location_repr,
+                            additive=self.additive
+                            )
         elif self.dataset.type == "Geno":
             return dict(name=self.name,
                         dataset=self.dataset.name,
@@ -109,6 +120,62 @@ class GeneralTrait(object):
         else:
             return dict()
 
+    def jsonable_table_row(self, index, search_type):
+        """Return a list suitable for json and intended to be displayed in a table
+
+        Actual turning into json doesn't happen here though"""
+
+        if self.dataset.type == "ProbeSet":
+            if self.mean == "":
+                mean = "N/A"
+            else:
+                mean = "%.3f" % round(float(self.additive), 2)
+            if self.additive == "":
+                additive = "N/A"
+            else:
+                additive = "%.3f" % round(float(self.additive), 2)
+            return ['<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" value="{{ data_hmac(\'{}:{}\'.format(' + str(self.name) + ',' + self.dataset.name + ')) }}">',
+                    index,
+                    '<a href="/show_trait?trait_id='+str(self.name)+'&dataset='+self.dataset.name+'">'+str(self.name)+'</a>',
+                    self.symbol,
+                    self.description_display,
+                    self.location_repr,
+                    mean, 
+                    self.LRS_score_repr,
+                    self.LRS_location_repr,
+                    additive]
+        elif self.dataset.type == "Publish":
+            if self.additive == "":
+                additive = "N/A"
+            else:
+                additive = "%.2f" % round(float(self.additive), 2)
+            if self.pubmed_id:
+                return ['<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" value="{{ data_hmac(\'{}:{}\'.format(' + str(self.name) + ',' + self.dataset.name + ')) }}">',
+                        index,
+                        '<a href="/show_trait?trait_id='+str(self.name)+'&dataset='+self.dataset.name+'">'+str(self.name)+'</a>',
+                        self.description_display,
+                        self.authors,
+                        '<a href="' + self.pubmed_link + '">' + self.pubmed_text + '</href>',
+                        self.LRS_score_repr,
+                        self.LRS_location_repr,
+                        additive]
+            else:
+                return ['<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" value="{{ data_hmac(\'{}:{}\'.format(' + str(self.name) + ',' + self.dataset.name + ')) }}">',
+                        index,
+                        '<a href="/show_trait?trait_id='+str(self.name)+'&dataset='+self.dataset.name+'">'+str(self.name)+'</a>',
+                        self.description_display,
+                        self.authors,
+                        self.pubmed_text,
+                        self.LRS_score_repr,
+                        self.LRS_location_repr,
+                        additive]
+        elif self.dataset.type == "Geno":
+            return ['<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" value="{{ data_hmac(\'{}:{}\'.format(' + str(self.name) + ',' + self.dataset.name + ')) }}">',
+                    index,
+                    '<a href="/show_trait?trait_id='+str(self.name)+'&dataset='+self.dataset.name+'">'+str(self.name)+'</a>',
+                    self.location_repr]
+        else:
+            return dict()
 
     def get_name(self):
         stringy = ""
@@ -418,7 +485,7 @@ class GeneralTrait(object):
                 self.description_display = description_display
 
                 #XZ: trait_location_value is used for sorting
-                trait_location_repr = 'N/A'
+                self.location_repr = 'N/A'
                 trait_location_value = 1000000
 
                 if self.chr and self.mb:
@@ -438,6 +505,18 @@ class GeneralTrait(object):
                     self.location_repr = 'Chr%s: %.6f' % (self.chr, float(self.mb))
                     self.location_value = trait_location_value
 
+            elif self.dataset.type == "Geno":
+                self.location_repr = 'N/A'
+                trait_location_value = 1000000
+
+                if self.chr and self.mb:
+                    #Checks if the chromosome number can be cast to an int (i.e. isn't "X" or "Y")
+                    #This is so we can convert the location to a number used for sorting
+                    trait_location_value = convert_location_to_value(self.chr, self.mb)
+
+                    #ZS: Put this in function currently called "convert_location_to_value"
+                    self.location_repr = 'Chr%s: %.6f' % (self.chr, float(self.mb))
+                    self.location_value = trait_location_value
 
             if get_qtl_info:
                 #LRS and its location
@@ -459,7 +538,7 @@ class GeneralTrait(object):
                     logger.sql(query)
                     trait_qtl = g.db.execute(query).fetchone()
                     if trait_qtl:
-                        self.locus, self.lrs, self.pvalue, self.mean, self.additive= trait_qtl
+                        self.locus, self.lrs, self.pvalue, self.mean, self.additive = trait_qtl
                         if self.locus:
                             query = """
                                 select Geno.Chr, Geno.Mb from Geno, Species
diff --git a/wqflask/wqflask/search_results.py b/wqflask/wqflask/search_results.py
index a924c7c9..cae6868e 100644
--- a/wqflask/wqflask/search_results.py
+++ b/wqflask/wqflask/search_results.py
@@ -86,12 +86,13 @@ views.py).
 
         """
         self.trait_list = []
+        json_trait_list = []
 
         species = webqtlDatabaseFunction.retrieve_species(self.dataset.group.name)
         # result_set represents the results for each search term; a search of
         # "shh grin2b" would have two sets of results, one for each term
         logger.debug("self.results is:", pf(self.results))
-        for result in self.results:
+        for index, result in enumerate(self.results):
             if not result:
                 continue
 
@@ -101,6 +102,9 @@ views.py).
             trait_id = result[0]
             this_trait = GeneralTrait(dataset=self.dataset, name=trait_id, get_qtl_info=True, get_sample_info=False)
             self.trait_list.append(this_trait)
+            json_trait_list.append(this_trait.jsonable_table_row(index + 1))
+
+        self.json_trait_list = json.dumps(json_trait_list)
 
     #def get_group_species_tree(self):
     #    self.species_groups = collections.default_dict(list)
diff --git a/wqflask/wqflask/static/new/javascript/create_corr_matrix.js b/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
index adb91295..a34fc408 100644
--- a/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
+++ b/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
@@ -1,48 +1,47 @@
 // Generated by CoffeeScript 1.8.0
-var get_data, get_options, root;
+// var get_data, get_options, root;
 
-root = typeof exports !== "undefined" && exports !== null ? exports : this;
+// root = typeof exports !== "undefined" && exports !== null ? exports : this;
 
-$(function() {
-  var chartOpts, data, mychart;
-  console.log("js_data:", js_data);
-  chartOpts = get_options();
-  data = get_data();
-  console.log(data);
-  return mychart = corr_matrix(data, chartOpts);
-});
+// $(function() {
+  // var chartOpts, data, mychart;
+  // console.log("js_data:", js_data);
+  // chartOpts = get_options();
+  // data = get_data();
+  // console.log(data);
+  // return mychart = corr_matrix(data, chartOpts);
+// });
 
-get_options = function() {
-  var chartOpts;
-  chartOpts = {
-    cortitle: "Correlation Matrix",
-    scattitle: "Scatterplot",
-    h: 450,
-    w: 450,
-    margin: {
-      left: 100,
-      top: 40,
-      right: 5,
-      bottom: 70,
-      inner: 5
-    }
-  };
-  return chartOpts;
-};
-
-get_data = function() {
-  var data;
-  data = {};
-  data["var"] = js_data.traits;
-  data.group = js_data.groups;
-  data.indID = js_data.samples;
-  data.dat = js_data.sample_data;
-  data.corr = js_data.corr_results;
-  data.cols = js_data.cols;
-  data.rows = js_data.rows;
-  return data;
-};
+// get_options = function() {
+  // var chartOpts;
+  // chartOpts = {
+    // cortitle: "Correlation Matrix",
+    // scattitle: "Scatterplot",
+    // h: 450,
+    // w: 450,
+    // margin: {
+      // left: 100,
+      // top: 40,
+      // right: 5,
+      // bottom: 70,
+      // inner: 5
+    // }
+  // };
+  // return chartOpts;
+// };
 
+// get_data = function() {
+  // var data;
+  // data = {};
+  // data["var"] = js_data.traits;
+  // data.group = js_data.groups;
+  // data.indID = js_data.samples;
+  // data.dat = js_data.sample_data;
+  // data.corr = js_data.corr_results;
+  // data.cols = js_data.cols;
+  // data.rows = js_data.rows;
+  // return data;
+// };
 
 var neg_color_scale = chroma.scale(['#FF0000', 'white']).domain([-1, -0.4]);
 var pos_color_scale = chroma.scale(['white', 'aqua']).domain([0.4, 1])
diff --git a/wqflask/wqflask/static/packages/bootstrap/css/non-responsive.css b/wqflask/wqflask/static/packages/bootstrap/css/non-responsive.css
index 076b6dae..9da73a8f 100644
--- a/wqflask/wqflask/static/packages/bootstrap/css/non-responsive.css
+++ b/wqflask/wqflask/static/packages/bootstrap/css/non-responsive.css
@@ -28,7 +28,7 @@ body {
 
 /* Reset the container */
 .container {
-  width: 1200px;
+  width: 1400px;
   max-width: none !important;
 }
 
diff --git a/wqflask/wqflask/templates/correlation_matrix.html b/wqflask/wqflask/templates/correlation_matrix.html
index 593c7bea..d847614a 100644
--- a/wqflask/wqflask/templates/correlation_matrix.html
+++ b/wqflask/wqflask/templates/correlation_matrix.html
@@ -36,7 +36,7 @@
       {% if result[0].name == trait.name %}
       <td nowrap="ON" align="center" bgcolor="#cccccc"><a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font style="font-size: 11px; color: #000000;" ><em>n</em><br>{{ result[2] }}</font></a></td>
       {% else %}
-      <td nowrap="ON" align="middle" class="corr_cell"><a href="/corr_scatter_plot?dataset_1={{ trait.dataset.name }}&dataset_2={{ result[0].dataset.name }}&trait_1={{ trait.name }}&trait_2={{ result[0].name }}"><font style="font-size: 11px; color: #000000;" ><span class="corr_value">{{ '%0.3f' % result[1] }}</span><br>{{ result[2] }}</font></a></td>
+      <td nowrap="ON" align="middle" class="corr_cell"><a href="/corr_scatter_plot?dataset_1={{ trait.dataset.name }}&dataset_2={{ result[0].dataset.name }}&trait_1={{ trait.name }}&trait_2={{ result[0].name }}"><font style="font-size: 12px; color: #000000;" ><span class="corr_value">{{ '%0.3f' % result[1] }}</span><br>{{ result[2] }}</font></a></td>
       {% endif %}
       {% endfor %}
     </tr>
@@ -85,6 +85,7 @@
 {% block js %}
 
     <script>
+        js_data = {{ js_data | safe }}
         loadings = {{ loadings_array | safe }}
     </script>
 
@@ -98,5 +99,6 @@
     <script type="text/javascript" src="/static/new/javascript/panelutil.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/js_external/chroma.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/loadings_plot.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/create_corr_matrix.js"></script>
 
 {% endblock %}
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index c5b4477b..dab196cb 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -14,8 +14,8 @@
             <h1>Correlation Table</h1>
         </div>
 
-        <p>Values of record {{ this_trait.name }} in the <a href="/static/dbdoc/{{dataset.fullname}}">{{ dataset.fullname }}</a>
-        dataset were compared to all records in the <a href="/static/dbdoc/{{target_dataset.fullname}}">{{ target_dataset.fullname }}</a>
+        <p>Values of record {{ this_trait.name }} in the <a href="http://genenetwork.org/webqtl/main.py?FormID=sharinginfo&GN_AccessionId={{ dataset.group.accession_id }}">{{ dataset.fullname }}</a>
+        dataset were compared to all records in the <a href="http://genenetwork.org/webqtl/main.py?FormID=sharinginfo&GN_AccessionId={{ target_dataset.group.accession_id }}">{{ target_dataset.fullname }}</a>
         dataset. The top {{ return_number }} correlations ranked by the {{ formatted_corr_type }} are displayed.
         You can resort this list by clicking the headers. Select the Record ID to open the trait data
         and analysis page.
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 0f5e68d7..f522564d 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -1,8 +1,8 @@
 {% extends "base.html" %}
 {% block title %}Search Results{% endblock %}
 {% block css %}
-    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
-    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/scroller/1.4.1/css/scroller.dataTables.min.css">
+    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/jquery.dataTables.min.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/packages/Datatables/extensions/scroller.dataTables.min.css">
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/dataTables.fixedHeader.css" >
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
 {% endblock %}
@@ -11,7 +11,7 @@
     {{ header("Search Results",
         'GeneNetwork found {}.'.format(numify(results|count, "record", "records"))) }}
 
-    <div class="container">
+    <div class="container" {% if dataset.type == 'Geno' %}style="width: 500px !important;"{% endif %}>
         <input type="hidden" name="uc_id" id="uc_id" value="{{ uc_id }}">
 
         <!-- Need to customize text more for other types of searches -->
@@ -44,7 +44,7 @@
                 {% endfor %}
         </p>
 
-        <p>To study a record, click on its ID below. Check records below and click Add button to add to selection.</p>
+        <p>To study a record click on its ID below, and to view the whole description {% if dataset.type == "Publish" %}or list of authors {% endif %} hover over the table cell. Check records below and click Add button to add to selection.</p>
 
         <div>
           <br />
@@ -79,7 +79,7 @@
 -->
 
           <div id="table_container" style="background-color: #eeeeee; border: 1px solid black;">
-            <table class="table table-hover table-striped" id='trait_table' {% if dataset.type == 'Geno' %}width="400px"{% endif %} style="float: left;">
+            <table class="table table-hover table-striped nowrap" id='trait_table' {% if dataset.type == 'Geno' %}width="400px"{% endif %} style="float: left;">
                 <thead>
                     <tr>
                         <th style="background-color: #eeeeee;"></th>
@@ -94,46 +94,6 @@
                     {% endfor %}
                     </tr>
                 </thead>
-
-                <tbody>
-                    {% for this_trait in trait_list %}
-                    <TR id="trait:{{ this_trait.name }}:{{ this_trait.dataset.name }}">
-                        <TD><INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}">
-                        </TD>
-                        <TD data-export="{{ loop.index }}" align="right">{{ loop.index }}</TD>
-                        <TD data-export="{{ this_trait.name }}">
-                            <a href="{{ url_for('show_trait_page',
-                                    trait_id = this_trait.name,
-                                    dataset = dataset.name
-                                    )}}">
-                                {{ this_trait.name }}
-                            </a>
-                        </TD>
-                        {% if dataset.type == 'ProbeSet' %}
-                            <TD data-export="{{ this_trait.symbol }}">{{ this_trait.symbol }}</TD>
-                            <TD data-export="{{ this_trait.description_display }}">{{ this_trait.description_display }}</TD>
-                            <TD data-export="{{ this_trait.location_repr }}">{{ this_trait.location_repr }}</TD>
-                            <TD data-export="{{ '%0.3f' % this_trait.mean|float }}" align="right">{{ '%0.3f' % this_trait.mean|float }}</TD>
-                            <TD data-export="{{ '%0.3f' % this_trait.LRS_score_repr|float }}" align="right">{{ '%0.3f' % this_trait.LRS_score_repr|float }}</TD>
-                            <TD data-export="{{ this_trait.LRS_location_repr }}">{{ this_trait.LRS_location_repr }}</TD>
-                            <TD data-export="{{ '%0.3f' % this_trait.additive|float }}" align="right">{{ '%0.3f' % this_trait.additive|float }}</TD>
-                        {% elif dataset.type == 'Publish' %}
-                            <TD data-export="{{ this_trait.description_display }}">{{ this_trait.description_display }}</TD>
-                            <TD data-export="{{ this_trait.authors }}">{{ this_trait.authors }}</TD>
-                            <TD data-export="{{ this_trait.pubmed_text }}" data-sort="{{ this_trait.pubmed_text }}">
-                                <a href="{{ this_trait.pubmed_link }}">
-                                    {{ this_trait.pubmed_text }}
-                                </a>
-                            </TD>
-                            <TD data-export="{{ '%0.3f' % this_trait.LRS_score_repr|float }}">{{ '%0.3f' % this_trait.LRS_score_repr|float }}</TD>
-                            <TD data-export="{{ this_trait.LRS_location_repr }}">{{ this_trait.LRS_location_repr }}</TD>
-                            <TD data-export="{{ '%0.3f' % this_trait.additive|float }}">{{ '%0.3f' % this_trait.additive|float }}</TD>
-                        {% elif dataset.type == 'Geno' %}
-                            <TD data-export="{{ this_trait.location_repr }}">{{ this_trait.location_repr }}</TD>
-                        {% endif %}
-                    </TR>
-                {% endfor %}
-                </tbody>
                 {% if trait_list|length > 20 %}
                 <tfoot>
                     <tr>
@@ -171,6 +131,10 @@
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.fixedHeader.min.js"></script>
 	
+    <script type='text/javascript'>
+        var json_trait_list = {{ json_trait_list|safe }};
+    </script>
+
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
             
@@ -184,12 +148,34 @@
             {% if dataset.type == 'ProbeSet' %}
             //ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters
             $('#trait_table').DataTable( {
+                "createdRow": function ( row, data, index ) {
+                    $('td', row).eq(1).attr('align', 'right');
+                    $('td', row).eq(1).attr('data-export', index+1);
+                    $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                    if ($('td', row).eq(4).text().length > 50) {
+                        $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 50));
+                        $('td', row).eq(4).text($('td', row).eq(4).text() + '...')
+                    }
+                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                    $('td', row).eq(6).attr('align', 'right');
+                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                    $('td', row).eq(7).attr('align', 'right');
+                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+                    $('td', row).eq(9).attr('align', 'right');
+                    $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
+                },
+                "data": json_trait_list,
                 "columns": [
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
-                    { "type": "natural", "width": "40%" },
+                    { "type": "natural", "width": "30%" },
                     { "type": "natural", "width": "15%" },
                     { "type": "natural" },
                     { "type": "natural" },
@@ -199,15 +185,38 @@
                 "order": [[1, "asc" ]],
                 "sDom": "RZtir",
                 "iDisplayLength": -1,
-                "bDeferRender": true,
+                "deferRender": true,
                 "bSortClasses": false,
-                "scrollY": true,
+                "scrollY": "700px",
                 "scrollCollapse": false,
+                "scroller": true,
                 "paging": false
             } );
 
             {% elif dataset.type == 'Publish' %}
             $('#trait_table').DataTable( {
+                "createdRow": function ( row, data, index ) {
+                    $('td', row).eq(1).attr('align', 'right');
+                    $('td', row).eq(1).attr('data-export', index+1);
+                    $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                    if ($('td', row).eq(3).text().length > 40) {
+                        $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 40));
+                        $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
+                    }
+                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                    $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 30));
+                    $('td', row).eq(5).attr('align', 'right');
+                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                    $('td', row).eq(6).attr('align', 'right');
+                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+                    $('td', row).eq(8).attr('align', 'right');
+                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+                },
+                "data": json_trait_list,
                 "columns": [
                     { "type": "natural" },
                     { "type": "natural" },
@@ -216,21 +225,29 @@
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
-                    { "type": "natural", "width": "15%"},
+                    { "type": "natural" },
                     { "type": "natural" }
                 ],
                 "order": [[1, "asc" ]],
                 "sDom": "RZtir",
                 "iDisplayLength": -1,
                 "autoWidth": false,
-                "bDeferRender": true,
+                "deferRender": true,
                 "bSortClasses": false,
                 "scrollY": "700px",
-                "scrollCollapse": false,
+                "scrollCollapse": true,
+                "scroller": true,
                 "paging": false
             } );
             {% elif dataset.type == 'Geno' %}
             $('#trait_table').DataTable( {
+                "createdRow": function ( row, data, index ) {
+                    $('td', row).eq(1).attr('align', 'right');
+                    $('td', row).eq(1).attr('data-export', index+1);
+                    $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                },
+                "data": json_trait_list,
                 "columns": [
                     { "type": "natural" },
                     { "type": "natural" },
@@ -240,11 +257,12 @@
                 "order": [[1, "asc" ]],
                 "sDom": "RZtir",
                 "iDisplayLength": -1,
-                "autoWidth": true,
-                "bDeferRender": true,
+                "autoWidth": false,
+                "deferRender": true,
                 "bSortClasses": false,
                 "scrollY": "700px",
-                "scrollCollapse": false,
+                "scrollCollapse": true,
+                "scroller": true,
                 "paging": false
             } );
             {% endif %}