From 8cf60da3d6acd18c84381bb51fde9968dc3d75e5 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 31 Jul 2019 14:50:07 -0500
Subject: Fixed header to not have a fixed width, and added min-widths to many
 pages to avoid them ever looking strange when the window's width is lowered

Significnatly improved correlation matrix output

Fixed issue where zooming into Mb ranges with GEMMA mapping output often showed no results; this fix is not ideal and is just a way to work around the results
currently not being sorted correctly. Later I should fix the sorting
---
 .../marker_regression/display_mapping_results.py   |   3 +-
 .../static/new/javascript/create_corr_matrix.js    |  14 ++-
 .../static/new/javascript/draw_corr_scatterplot.js |  59 ++++++------
 .../packages/bootstrap/css/non-responsive.css      |   4 +-
 wqflask/wqflask/templates/base.html                |  14 +--
 wqflask/wqflask/templates/collections/list.html    |   7 +-
 wqflask/wqflask/templates/collections/view.html    |   2 +-
 wqflask/wqflask/templates/correlation_matrix.html  | 100 +++++++++++++++------
 wqflask/wqflask/templates/index_page_orig.html     |   2 +-
 wqflask/wqflask/templates/mapping_results.html     |   2 +-
 wqflask/wqflask/templates/search_result_page.html  |   2 +-
 wqflask/wqflask/templates/show_trait.html          |   2 +-
 12 files changed, 130 insertions(+), 81 deletions(-)

(limited to 'wqflask')

diff --git a/wqflask/wqflask/marker_regression/display_mapping_results.py b/wqflask/wqflask/marker_regression/display_mapping_results.py
index e6924f40..6498f039 100644
--- a/wqflask/wqflask/marker_regression/display_mapping_results.py
+++ b/wqflask/wqflask/marker_regression/display_mapping_results.py
@@ -1873,7 +1873,8 @@ class DisplayMappingResults(object):
 
                     final_x_pos = Xc-canvas.stringWidth("5",font=symbolFont)/2+1
                     if final_x_pos > (xLeftOffset + plotWidth):
-                        break
+                        continue
+                        #break ZS: This is temporary until issue with sorting for GEMMA is fixed
                     elif final_x_pos < xLeftOffset:
                         continue
                     else:
diff --git a/wqflask/wqflask/static/new/javascript/create_corr_matrix.js b/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
index fe89a672..c0c39fbc 100644
--- a/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
+++ b/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
@@ -1,5 +1,5 @@
-var neg_color_scale = chroma.scale(['#FF0000', '#FFFFFF']).domain([-1, -0.4]);
-var pos_color_scale = chroma.scale(['#FFFFFF', '#00FFFF']).domain([0.4, 1])
+var neg_color_scale = chroma.scale(['#91bfdb', '#ffffff']).domain([-1, -0.4]);
+var pos_color_scale = chroma.scale(['#ffffff', '#fc8d59']).domain([0.4, 1])
 $('.corr_cell').each( function () {
   corr_value = parseFloat($(this).find('span.corr_value').text())
   if (corr_value >= 0.5){
@@ -14,6 +14,11 @@ $('.corr_cell').each( function () {
 });
 
 $('#short_labels').click( function (){
+  if ($('.short_check').css("display") == "none"){
+    $('.short_check').css("display", "inline-block")
+  } else {
+    $('.short_check').css("display", "none")
+  }
   $('.shortName').each( function() {
     if ($(this).css("display") == "none"){
       $(this).css("display", "block");
@@ -25,6 +30,11 @@ $('#short_labels').click( function (){
 });
 
 $('#long_labels').click( function (){
+  if ($('.long_check').css("display") == "none"){
+    $('.long_check').css("display", "inline-block")
+  } else {
+    $('.long_check').css("display", "none")
+  }
   $('.verboseName').each( function() {
     if ($(this).css("display") == "none"){
       $(this).css("display", "block");
diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js
index 23f41c66..8fdbad35 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js
@@ -4,19 +4,33 @@ var srchart;
 x_val_range = js_data.x_range[1] - js_data.x_range[0]
 y_val_range = js_data.y_range[1] - js_data.y_range[0]
 
-if (x_val_range < 9 || y_val_range < 9){
-  tick_digits = '.1f'
-} else if (x_val_range < 2 || y_val_range < 2) {
-  tick_digits = '.2f'
+if (x_val_range >= 2 && x_val_range < 9){
+  x_tick_digits = '.1f'
+} else if (x_val_range >= 0.8 && x_val_range < 2) {
+  x_tick_digits = '.2f'
+} else if (x_val_range < 0.8) {
+  x_tick_digits = '.3f'
 } else {
-  tick_digits = 'f'
+  x_tick_digits = 'f'
 }
 
+if (y_val_range >= 2 && y_val_range < 8){
+  y_tick_digits = '.1f'
+} else if (y_val_range >= 0.8 && y_val_range < 2) {
+  y_tick_digits = '.2f'
+} else if (y_val_range < 0.8) {
+  y_tick_digits = '.3f'
+} else {
+  y_tick_digits = 'f'
+}
+
+console.log("y_digits:", y_tick_digits)
+
 var layout = {
     height: 700,
     width: 800,
     margin: {
-        l: 60,
+        l: 70,
         r: 30,
         t: 90,
         b: 50
@@ -29,7 +43,7 @@ var layout = {
         linecolor: 'black',
         linewidth: 1,
         ticklen: 4,
-        tickformat: tick_digits
+        tickformat: x_tick_digits
     },
     yaxis: {
         range: [js_data.y_range[0], js_data.y_range[1]],
@@ -39,7 +53,8 @@ var layout = {
         linecolor: 'black',
         linewidth: 1,
         ticklen: 4,
-        tickformat: tick_digits
+        tickformat: y_tick_digits,
+        automargin: true
     },
     hovermode: "closest",
     showlegend: false,
@@ -50,19 +65,7 @@ var layout = {
       xanchor: 'right',
       y: 1.05,
       yanchor: 'top',
-      text: 'r = ' + js_data.r_value.toFixed(3) + ' P = ' + js_data.p_value.toExponential(),
-      showarrow: false,
-      font: {
-        size: 14
-      },
-    }, {
-      xref: 'paper',
-      yref: 'paper',
-      x: 0,
-      xanchor: 'left',
-      y: 1.05,
-      yanchor: 'top',
-      text: 'N=' + js_data.num_overlap,
+      text: '<i>r</i> = ' + js_data.r_value.toFixed(3) + ', <i>p</i> = ' + js_data.p_value.toExponential(3) + ', <i>n</i> = ' + js_data.num_overlap,
       showarrow: false,
       font: {
         size: 14
@@ -105,19 +108,7 @@ var sr_layout = {
     xanchor: 'right',
     y: 1.05,
     yanchor: 'top',
-    text: 'r = ' + js_data.srr_value.toFixed(3) + ' P = ' + js_data.srp_value.toExponential(),
-    showarrow: false,
-    font: {
-      size: 14
-    },
-  }, {
-    xref: 'paper',
-    yref: 'paper',
-    x: 0,
-    xanchor: 'left',
-    y: 1.05,
-    yanchor: 'top',
-    text: 'N=' + js_data.num_overlap,
+    text: '<i>r</i> = ' + js_data.srr_value.toFixed(3) + ', <i>P</i> = ' + js_data.srp_value.toExponential(3) + ', <i>n</i> = ' + js_data.num_overlap,
     showarrow: false,
     font: {
       size: 14
diff --git a/wqflask/wqflask/static/packages/bootstrap/css/non-responsive.css b/wqflask/wqflask/static/packages/bootstrap/css/non-responsive.css
index d352390f..36affd72 100644
--- a/wqflask/wqflask/static/packages/bootstrap/css/non-responsive.css
+++ b/wqflask/wqflask/static/packages/bootstrap/css/non-responsive.css
@@ -6,7 +6,7 @@
 
 /* Account for fixed navbar */
 body {
-  min-width: 1200px;
+  //min-width: 1200px;
   padding-top: 70px;
   padding-bottom: 30px;
 }
@@ -28,7 +28,7 @@ body {
 
 /* Reset the container */
 .container {
-  width: 1400px;
+  width: 100%;
   max-width: none !important;
 }
 
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index b1977b7f..80bbd7f5 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -21,10 +21,10 @@
 
 </head>
 
-<body style="width: 100% !important;">
+<body style="width: 100%">
     <!-- Navbar ================================================== -->
 
-    <div class="navbar navbar-inverse navbar-static-top pull-left" role="navigation" style="width: 100%; white-space: nowrap;">
+    <div class="navbar navbar-inverse navbar-static-top pull-left" role="navigation" style="width: 100%; min-width: 770px; white-space: nowrap;">
     <!--<div class="navbar navbar-default" style="width: 100%; white-space: nowrap;">-->
             <div class="container-fluid" style="width: 100%;">
                 <!-- Brand and toggle get grouped for better mobile display -->
@@ -90,16 +90,16 @@
             </div>
     </div>
 
-    <div class="container-fluid" style="position: relative; background-color: #d5d5d5; height: 95px;">
+    <div class="container-fluid" style="width: 100%; min-width: 650px; position: relative; background-color: #d5d5d5; height: 84px;">
 
         <form method="get" action="/gsearch">
-            <div class="row" style="position: absolute; bottom: 0; top: 30px;">
-                <select class="form-control col-xs-2" style="width: 170px; margin-top: 15px; margin-left: 10px;" name="type">
+            <div class="row" style="width: 100%; position: absolute; bottom: 0; top: 30px;">
+                <select style="width: 170px; margin-top: 15px; margin-left: 10px;" name="type">
                     <option value="gene">Genes / Molecules</option>
                     <option value="phenotype" {% if type=="phenotype" %}selected{% endif %}>Phenotypes</option>
                 </select>
-                <input class="btn btn-primary form-control col-xs-2" style="width: 100px; margin-top: 15px; margin-left: 10px;" type="submit" value="Search All">
-                <input class="form-control col-xs-6" style="width: 600px; margin-top: 15px; margin-left: 10px;" type="text" name="terms" required>
+                <input class="btn btn-primary" style="width: 100px; margin-left: 10px;" type="submit" value="Search All">
+                <input style="width: 50%; margin-top: 15px; margin-left: 10px;" type="text" name="terms" required>
             </div>
         </form>
     </div>
diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index 5372fa46..e6e09449 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -92,8 +92,6 @@
     <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/buttons.bootstrap.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/js_external/jszip.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script>
     <script>
             $('#trait_table').dataTable( {
                 "drawCallback": function( settings ) {
@@ -116,12 +114,11 @@
                     "orderable": false
                 } ],
                 "order": [[1, "asc" ]],
-                "sDom": "RZtr",
+                "sDom": "Ztr",
                 "iDisplayLength": -1,
-                "autoWidth": true,
+                "autoWidth": false,
                 "bDeferRender": true,
                 "bSortClasses": false,
-                "scrollY": "600px",
                 "scrollCollapse": true,
                 "paging": false,
                 "orderClasses": true
diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 268bbe1f..a23f3f70 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -8,7 +8,7 @@
 {% block content %}
 <!-- Start of body -->
 
-    <div class="container">
+    <div class="container" style="min-width: 1250px;">
         {% if uc %}
         <h1>{{ uc.name }}</h1>
         {% else %}
diff --git a/wqflask/wqflask/templates/correlation_matrix.html b/wqflask/wqflask/templates/correlation_matrix.html
index ed077471..7e67ece2 100644
--- a/wqflask/wqflask/templates/correlation_matrix.html
+++ b/wqflask/wqflask/templates/correlation_matrix.html
@@ -2,52 +2,56 @@
 {% block css %}
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/corr_matrix.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.min.css" />
 {% endblock %}
 {% block content %}
 
-<div class="container">
+<div class="container" width="100%">
 <h1>Correlation Matrix</h1>
+<div style="width: 100%; max-width: 850px;">Lower left cells list Pearson product-moment correlations; upper right cells list Spearman rank order correlations. Each cell also contains the n of cases. Values ranging from 0.4 to 1.0 range from dark blue to white, while values ranging from -0.4 to -1.0 range from orange to white. Select any cell to generate a scatter plot. Select trait labels for more information.</div>
 <hr style="height: 1px; background-color: #A9A9A9;">
 {% if lowest_overlap < 8 %}
-<div style="margin: 20px;" >Caution: This matrix of correlations contains some cells with small sample sizes of fewer than 8.</div>
+<div style="margin-bottom: 10px;"><i><font style="color: red;">Caution</font>: This matrix of correlations contains some cells with small sample sizes of fewer than 8.</i></div>
 {% endif %}
-<table class="matrix" border="1" cellpadding="5" cellspacing="1">
+<table class="matrix" border="1" cellpadding="5" cellspacing="1" width="100%">
   <tbody>
     <tr>
       <td style="background-color: #369;" ></td>
-      <td align="center" colspan="{{traits|length + 1 }}" style="font-weight: Bold; border: 1px solid #999999; padding: 3px; color: #fff; background-color: #369;">Spearman Rank Correlation (rho)</td>
+      <td align="center" colspan="{{traits|length + 2 }}" style="font-weight: Bold; border: 1px solid #000000; padding: 3px; color: #fff; background-color: #369;">Spearman Rank Correlation (rho)</td>
     </tr>
     <tr>
-      <td align="center" rowspan="{{traits|length + 1 }}" width="10" style="font-weight: Bold; border: 1px solid #999999; padding: 3px; color: #fff; background-color: #369;">P e a r s o n &nbsp;&nbsp;&nbsp; r</td>
-      <td width="300"></td>
+      <td align="center" rowspan="{{traits|length + 2 }}" width="10" style="font-weight: Bold; border: 1px solid #000000; padding: 3px; color: #fff; background-color: #369;">P e a r s o n &nbsp;&nbsp;&nbsp; r</td>
+      <td></td>
+      <td width="300" align="center" style="white-space: nowrap"><div style="display: inline-block; margin: 4px;"><button class="btn btn-default" id="short_labels" style="display: inline-block"><span style="display: none;" class="short_check glyphicon glyphicon-ok"></span>&nbsp;Short Labels</button>&nbsp;&nbsp;<button class="btn btn-default" id="long_labels" style="display: inline-block;"><span style="display: none;" class="long_check glyphicon glyphicon-ok"></span>&nbsp;Long Labels</button></div></td>
       {% for trait in traits %}
       <td align="center" style="padding: 5px;">
-        <a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}" style="font-weight: Bold;">Trait{{ loop.index }}</a>
+        <a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font style="font-size: 14px;"><b>{{ loop.index }}</b></font></a>
       </td>
       {% endfor %}
     </tr>
     {% for trait in traits %}
     <tr>
-      <td style="padding-left: 3px;">
-        <a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}" style="font-weight: Bold;">Trait {{ loop.index }}: {{ trait.dataset.name }}::{{ trait.name }}</a>
-        <div class="shortName" style="display:none">{% if trait.dataset.type == "ProbeSet" %}Symbol: {{ trait.symbol }}{% elif trait.dataset.type == "Publish" %}Phenotype: {{ trait.post_publication_abbreviation }}{% else %}Genotype{% endif %} </div>
+      <td align="center"><input type="checkbox" class="checkbox" style="margin-left: 3px; margin-right: 1px;"></td>
+      <td align="right" style="padding-right: 4px;" >
+        <a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font style="font-size: 14px; font-style: Bold;"><b>Trait {{ loop.index }}: {{ trait.dataset.name }}&nbsp;&nbsp;{{ trait.name }}</b></font></a>
+        <div class="shortName" style="display:none">{% if trait.dataset.type == "ProbeSet" %}Gene Symbol: {{ trait.symbol }}{% elif trait.dataset.type == "Publish" %}Trait Symbol: {{ trait.post_publication_abbreviation }}{% elif trait.dataset.type == "Geno" %}Genotype{% endif %} </div>
         <div class="verboseName" style="display: none;">
         {% if trait.dataset.type == "ProbeSet" %}
           <div>{{ trait.symbol }} on Chr {{ trait.chr }} @ {{ trait.mb }} Mb</div><div>{{ trait.description }}</div><div>{{ trait.probe_target_description }}</div>
         {% elif trait.dataset.type == "Publish" %}
-          <div>PubMed {{ trait.pubmed_id }}: RecordID/{{ trait.name }}</div><div>Phenotype: {{ trait.description_display }}</div>
-        {% else %}
+          <div>PMID: <a href="http://www.ncbi.nlm.nih.gov/pubmed/?term={{ trait.pubmed_id }}">{{ trait.pubmed_id }}</a>, Record ID {{ trait.name }}</div><div>Phenotype: {{ trait.description_display }}</div>
+        {% elif trait.dataset.type == "Geno" %}
           <div>Locus {{ trait.name }}</div><div>Chr {{ trait.chr }} @ {{ trait.mb }} Mb</div>
         {% endif %}
         </div>
       </td>
       {% for result in corr_results[loop.index-1] %}
       {% if result[0].name == trait.name %}
-      <td nowrap="ON" align="center" bgcolor="#cccccc" style="line-height: 1.1;"><a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font style="font-size: 12px; color: #3071a9;" ><em>n</em><br>{{ result[2] }}</font></a></td>
+      <td nowrap="ON" align="center" bgcolor="#cccccc" style="padding: 3px; line-height: 1.1;"><a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font style="font-size: 12px; color: #3071a9; font-weight: bold;" ><em>n</em><br>{{ result[2] }}</font></a></td>
       {% else %}
-      <td nowrap="ON" align="middle" class="corr_cell" style="line-height: 1.1;"><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: #3071a9;" ><span class="corr_value">{{ '%0.3f' % result[1] }}</span><br>{{ result[2] }}</font></a></td>
+      <td nowrap="ON" align="middle" class="corr_cell" style="padding: 3px; line-height: 1.1;"><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: #3071a9; font-weight: bold;" ><span class="corr_value">{{ '%0.2f' % result[1] }}</span><br>{{ result[2] }}</font></a></td>
       {% endif %}
       {% endfor %}
     </tr>
@@ -55,28 +59,40 @@
   </tbody>
 </table>
 <br>
-<button class="btn btn-default" id="short_labels">Short Labels</button>
-<button class="btn btn-default" id="long_labels">Long Labels</button>
 {% if pca_works == "True" %}
-<br>
-<br>
 <h2>PCA Traits</h2>
-<ul>
+<div style="margin-bottom: 20px; overflow:hidden;">
+<table id="pca_table" class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
+  <thead>
+  <tr>
+    <th></th>
+    <th>Index</th>
+    <th>PCA Trait</th>
+    </tr>
+  </tr>
+  </thead>
+  <tbody>
   {% for this_trait_id in pca_trait_ids %}
-  <li>{{ loop.index }}. <input type="checkbox" class="trait_checkbox" name="pca_trait" value="{{ data_hmac('{}:{}'.format(pca_trait_ids[loop.index - 1], "Temp")) }}">&nbsp;&nbsp;<a href="{{ url_for('show_trait_page', trait_id = pca_trait_ids[loop.index - 1], dataset = "Temp") }}">{{ pca_trait_ids[loop.index - 1] }}</a></li>
+  <tr>
+    <td align="center" style="padding: 0px;"><input type="checkbox" class="trait_checkbox" name="pca_trait" value="{{ data_hmac('{}:{}'.format(pca_trait_ids[loop.index - 1], "Temp")) }}"></td>
+    <td align="right">{{ loop.index }}</td>
+    <td><a href="{{ url_for('show_trait_page', trait_id = pca_trait_ids[loop.index - 1], dataset = "Temp") }}">{{ pca_trait_ids[loop.index - 1] }}</a></td>
+  </tr>
   {% endfor %}
-</ul>
+  </tbody>
+</table>
+<br>
 <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
 <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
 <button class="btn btn-default" id="add" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
-<br>
+</div>
 <h2>Factor Loadings Plot</h2>
 <div id="loadings_plot" style="margin-top: 20px; margin-bottom: 20px; width: 980px; border-style: solid; border-width: 1px;"></div>
 <h2>Factor Loadings Table</h2>
-<table class="table table-hover table-striped" border="1" style="margin-top: 20px; margin-bottom: 20px;" width="30%">
+<table id="loadings_table" class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
   <thead>
     <tr>
-      <th></th>
+      <th>Trait</th>
       <th style="text-align: right;" >Factor 1</th>
       <th style="text-align: right;" >Factor 2</th>
       {% if trait_list|length > 2 %}<th style="text-align: right;">Factor 3</th>{% endif %}
@@ -87,7 +103,7 @@
     {% set row_counter = loop.index-1 %}
     <tr>
       <td>
-        <a href="{{ url_for('show_trait_page', trait_id = traits[loop.index-1].name, dataset = traits[loop.index-1].dataset.name) }}">
+        <a title="{% if traits[loop.index-1].dataset.type == "ProbeSet" %}{{ traits[loop.index-1].symbol }}{% elif traits[loop.index-1].dataset.type == "Publish" %}{{ traits[loop.index-1].post_publication_abbreviation }}{% endif %}" href="{{ url_for('show_trait_page', trait_id = traits[loop.index-1].name, dataset = traits[loop.index-1].dataset.name) }}">
           {{ traits[loop.index-1].name }}
         </a>
       </td>
@@ -119,5 +135,39 @@
     <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>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+
+    <script>
+       $('#pca_table').dataTable( {
+        "columnDefs": [ {
+            "targets": 0,
+            "orderable": false
+        } ],
+        "order": [[1, "asc" ]],
+        "sDom": "t",
+        "iDisplayLength": -1,
+        "autoWidth": true,
+        "bDeferRender": true,
+        "bSortClasses": false,
+        "paging": false,
+        "orderClasses": true
+      } );
+
+      $('#loadings_table').dataTable( {
+        "columnDefs": [ {
+            "targets": 0,
+            "orderable": false
+        } ],
+        "order": [[1, "asc" ]],
+        "sDom": "t",
+        "iDisplayLength": -1,
+        "autoWidth": true,
+        "bDeferRender": true,
+        "bSortClasses": false,
+        "paging": false,
+        "orderClasses": true
+      } );
+    </script>
 
 {% endblock %}
diff --git a/wqflask/wqflask/templates/index_page_orig.html b/wqflask/wqflask/templates/index_page_orig.html
index 251a816f..286f6c1f 100755
--- a/wqflask/wqflask/templates/index_page_orig.html
+++ b/wqflask/wqflask/templates/index_page_orig.html
@@ -17,7 +17,7 @@
     </header>
 -->
 
-    <div class="container-fluid">
+    <div class="container-fluid" style="min-width: 1200px;">
 
         {{ flash_me() }}
 
diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html
index 00a7b811..be285d15 100644
--- a/wqflask/wqflask/templates/mapping_results.html
+++ b/wqflask/wqflask/templates/mapping_results.html
@@ -9,7 +9,7 @@
 {% endblock %}
 {% from "base_macro.html" import header %}
 {% block content %}
-    <div class="container">
+    <div class="container" style="min-width: 900px;">
         <form method="post" target="_blank" action="/run_mapping" name="marker_regression" id="marker_regression_form">
         <input type="hidden" name="temp_uuid" value="{{ temp_uuid }}">
         <input type="hidden" name="trait_id" value="{{ this_trait.name }}">
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index b1442b7f..f5978196 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -8,7 +8,7 @@
 {% endblock %}
 {% block content %}
 <!-- Start of body -->
-    <div style="padding-left: 10px;">
+    <div style="padding-left: 10px; min-width: 1200px;">
         <input type="hidden" name="uc_id" id="uc_id" value="{{ uc_id }}">
 
         <div style="padding-top: 10px; padding-bottom: 10px; font-size: 16px;">
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index ea7c5123..19b0e0f5 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -39,7 +39,7 @@
         <input type="hidden" name="covariates" value="">
         <input type="hidden" name="transform" value="">
 
-        <div class="container">
+        <div class="container" style="min-width: 1450px;">
             <div class="panel-group" id="accordion">
                 <div class="panel panel-default">
                     <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true">
-- 
cgit v1.2.3