Correlation Matrix page is partially complete + fixed some issues with column resizing on global search pages

9 files changed, 143 insertions, 1160 deletions

diff --git a/wqflask/wqflask/correlation_matrix/show_corr_matrix.py b/wqflask/wqflask/correlation_matrix/show_corr_matrix.py
index e1df5b24..b670f521 100755
--- a/wqflask/wqflask/correlation_matrix/show_corr_matrix.py
+++ b/wqflask/wqflask/correlation_matrix/show_corr_matrix.py
@@ -72,7 +72,7 @@ class CorrelationMatrix(object):
         self.traits = []
         for trait_db in self.trait_list:
             this_trait = trait_db[0]
-            self.traits.append(this_trait.name)
+            self.traits.append(this_trait)
             this_sample_data = this_trait.data
             
             for sample in this_sample_data:
@@ -96,7 +96,7 @@ class CorrelationMatrix(object):
             self.sample_data.append(this_trait_vals)
 
         self.corr_results = []
-        self.corr_rseults_for_pca = []
+        self.corr_results_for_pca = []
         for trait_db in self.trait_list:
             this_trait = trait_db[0]
             this_db = trait_db[1]
@@ -115,14 +115,15 @@ class CorrelationMatrix(object):
             #        self.all_sample_list.append(sample)
             
             corr_result_row = []
+            is_spearman = False #ZS: To determine if it's above or below the diagonal
             for target in self.trait_list:
                 target_trait = target[0]
                 target_db = target[1]
                 target_samples = target_db.group.samplelist
                 
-                if this_trait == target_trait and this_db == target_db:
-                    corr_result_row.append(1)
-                    continue
+                #if this_trait == target_trait and this_db == target_db:
+                #    corr_result_row.append(1)
+                #    continue
 
                 target_sample_data = target_trait.data
                 print("target_samples", len(target_samples))
@@ -140,9 +141,14 @@ class CorrelationMatrix(object):
                 this_trait_vals, target_vals, num_overlap = corr_result_helpers.normalize_values(
                 this_trait_vals, target_vals)
                 
-                sample_r, sample_p = scipy.stats.pearsonr(this_trait_vals, target_vals)
+                if is_spearman == False:
+                    sample_r, sample_p = scipy.stats.pearsonr(this_trait_vals, target_vals)
+                    if sample_r == 1:
+                        is_spearman = True
+                else:
+                    sample_r, sample_p = scipy.stats.spearmanr(this_trait_vals, target_vals)
 
-                corr_result_row.append(sample_r)
+                corr_result_row.append([target_trait, sample_r, num_overlap])
                 
             self.corr_results.append(corr_result_row)
 
@@ -152,15 +158,25 @@ class CorrelationMatrix(object):
         for sample in self.all_sample_list:
             groups.append(1)
 
-        pca = self.calculate_pca(self.corr_results, range(len(self.traits)))
+        #pca = self.calculate_pca(self.corr_results, range(len(self.traits)))
+
 
-        self.js_data = dict(traits = self.traits,
+        self.js_data = dict(traits = [trait.name for trait in self.traits],
                             groups = groups,
                             cols = range(len(self.traits)),
                             rows = range(len(self.traits)),
                             samples = self.all_sample_list,
-                            sample_data = self.sample_data,
-                            corr_results = self.corr_results,)
+                            sample_data = self.sample_data,)
+        #                    corr_results = [result[1] for result in result_row for result_row in self.corr_results])
+
+
+        #self.js_data = dict(traits = self.traits,
+        #                    groups = groups,
+        #                    cols = range(len(self.traits)),
+        #                    rows = range(len(self.traits)),
+        #                    samples = self.all_sample_list,
+        #                    sample_data = self.sample_data,
+        #                    corr_results = self.corr_results,)
         
         
         
@@ -194,21 +210,8 @@ class CorrelationMatrix(object):
         print("eigen:", eigen)
         pca = stats.princomp(m, cor = "TRUE")
         print("pca:", pca)
+        print("loadings:", pca.rx('loadings'))
+        print("scores:", pca.rx('scores'))
+        print("scale:", pca.rx('scale'))
 
-        return pca
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        return pca
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/corr_matrix.js b/wqflask/wqflask/static/new/javascript/corr_matrix.js
index df0bef9d..ad0fc8b8 100644
--- a/wqflask/wqflask/static/new/javascript/corr_matrix.js
+++ b/wqflask/wqflask/static/new/javascript/corr_matrix.js
@@ -31,7 +31,7 @@ iplotCorr = function(data, chartOpts) {
   ncorrX = data.cols.length;
   ncorrY = data.rows.length;
   corXscale = d3.scale.ordinal().domain(d3.range(ncorrX)).rangeBands([0, width]);
-  corYscale = d3.scale.ordinal().domain(d3.range(ncorrY)).rangeBands([height, 0]);
+  corYscale = d3.scale.ordinal().domain(d3.range(ncorrY)).rangeBands([0, height]);
   corZscale = d3.scale.linear().domain(zlim).range(corcolors);
   pixel_width = corXscale(1) - corXscale(0);
   pixel_height = corYscale(0) - corYscale(1);
@@ -44,12 +44,16 @@ iplotCorr = function(data, chartOpts) {
         value: data.corr[i][j]
       });
     }
+    corrplot.append("text").attr("class", "corrlabel_y").attr("y", corYscale(i) - pixel_height / 2).attr("x", -margin.left * 0.1).text(data["var"][data.rows[i]]).attr("dominant-baseline", "middle").attr("text-anchor", "end");
+    //corrplot.append("text").attr("class", "corrlabel_x").attr("x", corXscale(i) + pixel_width / 2).attr("y", height + margin.bottom * 0.2).text(data["var"][data.cols[i]]).attr("dominant-baseline", "middle").attr("text-anchor", "middle");
+
   }
   scatterplot.append("rect").attr("height", height).attr("width", width).attr("fill", rectcolor).attr("stroke", "black").attr("stroke-width", 1).attr("pointer-events", "none");
   corr_tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
     return d3.format(".2f")(d.value);
   }).direction('e').offset([0, 10]);
   corrplot.call(corr_tip);
+
   cells = corrplot.selectAll("empty").data(corr).enter().append("rect").attr("class", "cell").attr("x", function(d) {
     return corXscale(d.col);
   }).attr("y", function(d) {
@@ -59,11 +63,12 @@ iplotCorr = function(data, chartOpts) {
   }).attr("stroke", "none").attr("stroke-width", 2).on("mouseover", function(d) {
     d3.select(this).attr("stroke", "black");
     corr_tip.show(d);
-    corrplot.append("text").attr("class", "corrlabel").attr("x", corXscale(d.col) + pixel_width / 2).attr("y", height + margin.bottom * 0.2).text(data["var"][data.cols[d.col]]).attr("dominant-baseline", "middle").attr("text-anchor", "middle");
-    return corrplot.append("text").attr("class", "corrlabel").attr("y", corYscale(d.row) + pixel_height / 2).attr("x", -margin.left * 0.1).text(data["var"][data.rows[d.row]]).attr("dominant-baseline", "middle").attr("text-anchor", "end");
+    //corrplot.append("text").attr("class", "corrlabel").attr("x", corXscale(d.col) + pixel_width / 2).attr("y", height + margin.bottom * 0.2).text(data["var"][data.cols[d.col]]).attr("dominant-baseline", "middle").attr("text-anchor", "middle");
+    //return corrplot.append("text").attr("class", "corrlabel_x").attr("y", corYscale(d.row) + pixel_height / 2).attr("x", -margin.left * 0.1).text(data["var"][data.rows[d.row]]).attr("dominant-baseline", "middle").attr("text-anchor", "end");
+    return corrplot.append("text").attr("class", "corrlabel_x").attr("x", corXscale(d.col) + pixel_width / 2).attr("y", height + margin.bottom * 0.2).text(data["var"][data.cols[d.col]]).attr("dominant-baseline", "middle").attr("text-anchor", "middle");
   }).on("mouseout", function(d) {
     corr_tip.hide(d);
-    d3.selectAll("text.corrlabel").remove();
+    d3.selectAll("text.corrlabel_x").remove();
     return d3.select(this).attr("stroke", "none");
   }).on("click", function(d) {
     return drawScatter(d.col, d.row);
@@ -135,7 +140,7 @@ iplotCorr = function(data, chartOpts) {
       var x, y;
       x = data.dat[data.cols[i]][d];
       y = data.dat[data.rows[j]][d];
-      if ((x != null) && (y != null)) {
+      if ((x != "") && (y != "")) {
         return 3;
       } else {
         return null;
diff --git a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
index c8303de2..931ec6b3 100755
--- a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
+++ b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
@@ -2,7 +2,7 @@
  * Table styles
  */
 table.dataTable {
-  width: 100%;
+  //width: 100%;
   margin: 0 auto;
   clear: both;
   border-collapse: separate;
diff --git a/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.js b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.js
deleted file mode 100644
index c1f962c4..00000000
--- a/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.js
+++ /dev/null
@@ -1,1027 +0,0 @@
-/*! FixedHeader 2.1.2
- * ©2010-2014 SpryMedia Ltd - datatables.net/license
- */
-
-/**
- * @summary     FixedHeader
- * @description Fix a table's header or footer, so it is always visible while
- *              Scrolling
- * @version     2.1.2
- * @file        dataTables.fixedHeader.js
- * @author      SpryMedia Ltd (www.sprymedia.co.uk)
- * @contact     www.sprymedia.co.uk/contact
- * @copyright   Copyright 2009-2014 SpryMedia Ltd.
- *
- * This source file is free software, available under the following license:
- *   MIT license - http://datatables.net/license/mit
- *
- * This source file is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
- * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
- *
- * For details please refer to: http://www.datatables.net
- */
-
-/* Global scope for FixedColumns for backwards compatibility - will be removed
- * in future. Not documented in 1.1.x.
- */
-
-/* Global scope for FixedColumns */
-var FixedHeader;
-
-(function(window, document, undefined) {
-
-
-var factory = function( $, DataTable ) {
-"use strict";
-
-/*
- * Function: FixedHeader
- * Purpose:  Provide 'fixed' header, footer and columns for a DataTable
- * Returns:  object:FixedHeader - must be called with 'new'
- * Inputs:   mixed:mTable - target table
- *  @param {object} dt DataTables instance or HTML table node. With DataTables
- *    1.10 this can also be a jQuery collection (with just a single table in its
- *    result set), a jQuery selector, DataTables API instance or settings
- *    object.
- *  @param {object} [oInit] initialisation settings, with the following
- *    properties (each optional)
- *    * bool:top -    fix the header (default true)
- *    * bool:bottom - fix the footer (default false)
- *    * int:left -    fix the left column(s) (default 0)
- *    * int:right -   fix the right column(s) (default 0)
- *    * int:zTop -    fixed header zIndex
- *    * int:zBottom - fixed footer zIndex
- *    * int:zLeft -   fixed left zIndex
- *    * int:zRight -  fixed right zIndex
- */
-FixedHeader = function ( mTable, oInit ) {
-	/* Sanity check - you just know it will happen */
-	if ( ! this instanceof FixedHeader )
-	{
-		alert( "FixedHeader warning: FixedHeader must be initialised with the 'new' keyword." );
-		return;
-	}
-
-	var that = this;
-	var oSettings = {
-		"aoCache": [],
-		"oSides": {
-			"top": true,
-			"bottom": false,
-			"left": 0,
-			"right": 0
-		},
-		"oZIndexes": {
-			"top": 104,
-			"bottom": 103,
-			"left": 102,
-			"right": 101
-		},
-		"oCloneOnDraw": {
-			"top": false,
-			"bottom": false,
-			"left": true,
-			"right": true
-		},
-		"oMes": {
-			"iTableWidth": 0,
-			"iTableHeight": 0,
-			"iTableLeft": 0,
-			"iTableRight": 0, /* note this is left+width, not actually "right" */
-			"iTableTop": 0,
-			"iTableBottom": 0 /* note this is top+height, not actually "bottom" */
-		},
-		"oOffset": {
-			"top": 0
-		},
-		"nTable": null,
-		"bFooter": false,
-		"bInitComplete": false
-	};
-
-	/*
-	 * Function: fnGetSettings
-	 * Purpose:  Get the settings for this object
-	 * Returns:  object: - settings object
-	 * Inputs:   -
-	 */
-	this.fnGetSettings = function () {
-		return oSettings;
-	};
-
-	/*
-	 * Function: fnUpdate
-	 * Purpose:  Update the positioning and copies of the fixed elements
-	 * Returns:  -
-	 * Inputs:   -
-	 */
-	this.fnUpdate = function () {
-		this._fnUpdateClones();
-		this._fnUpdatePositions();
-	};
-
-	/*
-	 * Function: fnPosition
-	 * Purpose:  Update the positioning of the fixed elements
-	 * Returns:  -
-	 * Inputs:   -
-	 */
-	this.fnPosition = function () {
-		this._fnUpdatePositions();
-	};
-
-
-	var dt = $.fn.dataTable.Api ?
-		new $.fn.dataTable.Api( mTable ).settings()[0] :
-		mTable.fnSettings();
-
-	dt._oPluginFixedHeader = this;
-
-	/* Let's do it */
-	this.fnInit( dt, oInit );
-
-};
-
-
-/*
- * Variable: FixedHeader
- * Purpose:  Prototype for FixedHeader
- * Scope:    global
- */
-FixedHeader.prototype = {
-	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-	 * Initialisation
-	 */
-
-	/*
-	 * Function: fnInit
-	 * Purpose:  The "constructor"
-	 * Returns:  -
-	 * Inputs:   {as FixedHeader function}
-	 */
-	fnInit: function ( oDtSettings, oInit )
-	{
-		var s = this.fnGetSettings();
-		var that = this;
-
-		/* Record the user definable settings */
-		this.fnInitSettings( s, oInit );
-
-		if ( oDtSettings.oScroll.sX !== "" || oDtSettings.oScroll.sY !== "" )
-		{
-			alert( "FixedHeader 2 is not supported with DataTables' scrolling mode at this time" );
-			return;
-		}
-
-		s.nTable = oDtSettings.nTable;
-		oDtSettings.aoDrawCallback.unshift( {
-			"fn": function () {
-				FixedHeader.fnMeasure();
-				that._fnUpdateClones.call(that);
-				that._fnUpdatePositions.call(that);
-			},
-			"sName": "FixedHeader"
-		} );
-
-		s.bFooter = ($('>tfoot', s.nTable).length > 0) ? true : false;
-
-		/* Add the 'sides' that are fixed */
-		if ( s.oSides.top )
-		{
-			s.aoCache.push( that._fnCloneTable( "fixedHeader", "FixedHeader_Header", that._fnCloneThead ) );
-		}
-		if ( s.oSides.bottom )
-		{
-			s.aoCache.push( that._fnCloneTable( "fixedFooter", "FixedHeader_Footer", that._fnCloneTfoot ) );
-		}
-		if ( s.oSides.left )
-		{
-			s.aoCache.push( that._fnCloneTable( "fixedLeft", "FixedHeader_Left", that._fnCloneTLeft, s.oSides.left ) );
-		}
-		if ( s.oSides.right )
-		{
-			s.aoCache.push( that._fnCloneTable( "fixedRight", "FixedHeader_Right", that._fnCloneTRight, s.oSides.right ) );
-		}
-
-		/* Event listeners for window movement */
-		FixedHeader.afnScroll.push( function () {
-			that._fnUpdatePositions.call(that);
-		} );
-
-		$(window).resize( function () {
-			FixedHeader.fnMeasure();
-			that._fnUpdateClones.call(that);
-			that._fnUpdatePositions.call(that);
-		} );
-
-		$(s.nTable)
-			.on('column-reorder.dt', function () {
-				FixedHeader.fnMeasure();
-				that._fnUpdateClones( true );
-				that._fnUpdatePositions();
-			} )
-			.on('column-visibility.dt', function () {
-				FixedHeader.fnMeasure();
-				that._fnUpdateClones( true );
-				that._fnUpdatePositions();
-			} );
-
-		/* Get things right to start with */
-		FixedHeader.fnMeasure();
-		that._fnUpdateClones();
-		that._fnUpdatePositions();
-
-		s.bInitComplete = true;
-	},
-
-
-	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-	 * Support functions
-	 */
-
-	/*
-	 * Function: fnInitSettings
-	 * Purpose:  Take the user's settings and copy them to our local store
-	 * Returns:  -
-	 * Inputs:   object:s - the local settings object
-	 *           object:oInit - the user's settings object
-	 */
-	fnInitSettings: function ( s, oInit )
-	{
-		if ( oInit !== undefined )
-		{
-			if ( oInit.top !== undefined ) {
-				s.oSides.top = oInit.top;
-			}
-			if ( oInit.bottom !== undefined ) {
-				s.oSides.bottom = oInit.bottom;
-			}
-			if ( typeof oInit.left == 'boolean' ) {
-				s.oSides.left = oInit.left ? 1 : 0;
-			}
-			else if ( oInit.left !== undefined ) {
-				s.oSides.left = oInit.left;
-			}
-			if ( typeof oInit.right == 'boolean' ) {
-				s.oSides.right = oInit.right ? 1 : 0;
-			}
-			else if ( oInit.right !== undefined ) {
-				s.oSides.right = oInit.right;
-			}
-
-			if ( oInit.zTop !== undefined ) {
-				s.oZIndexes.top = oInit.zTop;
-			}
-			if ( oInit.zBottom !== undefined ) {
-				s.oZIndexes.bottom = oInit.zBottom;
-			}
-			if ( oInit.zLeft !== undefined ) {
-				s.oZIndexes.left = oInit.zLeft;
-			}
-			if ( oInit.zRight !== undefined ) {
-				s.oZIndexes.right = oInit.zRight;
-			}
-
-			if ( oInit.offsetTop !== undefined ) {
-				s.oOffset.top = oInit.offsetTop;
-			}
-			if ( oInit.alwaysCloneTop !== undefined ) {
-				s.oCloneOnDraw.top = oInit.alwaysCloneTop;
-			}
-			if ( oInit.alwaysCloneBottom !== undefined ) {
-				s.oCloneOnDraw.bottom = oInit.alwaysCloneBottom;
-			}
-			if ( oInit.alwaysCloneLeft !== undefined ) {
-				s.oCloneOnDraw.left = oInit.alwaysCloneLeft;
-			}
-			if ( oInit.alwaysCloneRight !== undefined ) {
-				s.oCloneOnDraw.right = oInit.alwaysCloneRight;
-			}
-		}
-	},
-
-	/*
-	 * Function: _fnCloneTable
-	 * Purpose:  Clone the table node and do basic initialisation
-	 * Returns:  -
-	 * Inputs:   -
-	 */
-	_fnCloneTable: function ( sType, sClass, fnClone, iCells )
-	{
-		var s = this.fnGetSettings();
-		var nCTable;
-
-		/* We know that the table _MUST_ has a DIV wrapped around it, because this is simply how
-		 * DataTables works. Therefore, we can set this to be relatively position (if it is not
-		 * alreadu absolute, and use this as the base point for the cloned header
-		 */
-		if ( $(s.nTable.parentNode).css('position') != "absolute" )
-		{
-			s.nTable.parentNode.style.position = "relative";
-		}
-
-		/* Just a shallow clone will do - we only want the table node */
-		nCTable = s.nTable.cloneNode( false );
-		nCTable.removeAttribute( 'id' );
-
-		var nDiv = document.createElement( 'div' );
-		nDiv.style.position = "absolute";
-		nDiv.style.top = "0px";
-		nDiv.style.left = "0px";
-		nDiv.className += " FixedHeader_Cloned "+sType+" "+sClass;
-
-		/* Set the zIndexes */
-		if ( sType == "fixedHeader" )
-		{
-			nDiv.style.zIndex = s.oZIndexes.top;
-		}
-		if ( sType == "fixedFooter" )
-		{
-			nDiv.style.zIndex = s.oZIndexes.bottom;
-		}
-		if ( sType == "fixedLeft" )
-		{
-			nDiv.style.zIndex = s.oZIndexes.left;
-		}
-		else if ( sType == "fixedRight" )
-		{
-			nDiv.style.zIndex = s.oZIndexes.right;
-		}
-
-		/* remove margins since we are going to position it absolutely */
-		nCTable.style.margin = "0";
-
-		/* Insert the newly cloned table into the DOM, on top of the "real" header */
-		nDiv.appendChild( nCTable );
-		document.body.appendChild( nDiv );
-
-		return {
-			"nNode": nCTable,
-			"nWrapper": nDiv,
-			"sType": sType,
-			"sPosition": "",
-			"sTop": "",
-			"sLeft": "",
-			"fnClone": fnClone,
-			"iCells": iCells
-		};
-	},
-
-	/*
-	 * Function: _fnMeasure
-	 * Purpose:  Get the current positioning of the table in the DOM
-	 * Returns:  -
-	 * Inputs:   -
-	 */
-	_fnMeasure: function ()
-	{
-		var
-			s = this.fnGetSettings(),
-			m = s.oMes,
-			jqTable = $(s.nTable),
-			oOffset = jqTable.offset(),
-			iParentScrollTop = this._fnSumScroll( s.nTable.parentNode, 'scrollTop' ),
-			iParentScrollLeft = this._fnSumScroll( s.nTable.parentNode, 'scrollLeft' );
-
-		m.iTableWidth = jqTable.outerWidth();
-		m.iTableHeight = jqTable.outerHeight();
-		m.iTableLeft = oOffset.left + s.nTable.parentNode.scrollLeft;
-		m.iTableTop = oOffset.top + iParentScrollTop;
-		m.iTableRight = m.iTableLeft + m.iTableWidth;
-		m.iTableRight = FixedHeader.oDoc.iWidth - m.iTableLeft - m.iTableWidth;
-		m.iTableBottom = FixedHeader.oDoc.iHeight - m.iTableTop - m.iTableHeight;
-	},
-
-	/*
-	 * Function: _fnSumScroll
-	 * Purpose:  Sum node parameters all the way to the top
-	 * Returns:  int: sum
-	 * Inputs:   node:n - node to consider
-	 *           string:side - scrollTop or scrollLeft
-	 */
-	_fnSumScroll: function ( n, side )
-	{
-		var i = n[side];
-		while ( n = n.parentNode )
-		{
-			if ( n.nodeName == 'HTML' || n.nodeName == 'BODY' )
-			{
-				break;
-			}
-			i = n[side];
-		}
-		return i;
-	},
-
-	/*
-	 * Function: _fnUpdatePositions
-	 * Purpose:  Loop over the fixed elements for this table and update their positions
-	 * Returns:  -
-	 * Inputs:   -
-	 */
-	_fnUpdatePositions: function ()
-	{
-		var s = this.fnGetSettings();
-		this._fnMeasure();
-
-		for ( var i=0, iLen=s.aoCache.length ; i<iLen ; i++ )
-		{
-			if ( s.aoCache[i].sType == "fixedHeader" )
-			{
-				this._fnScrollFixedHeader( s.aoCache[i] );
-			}
-			else if ( s.aoCache[i].sType == "fixedFooter" )
-			{
-				this._fnScrollFixedFooter( s.aoCache[i] );
-			}
-			else if ( s.aoCache[i].sType == "fixedLeft" )
-			{
-				this._fnScrollHorizontalLeft( s.aoCache[i] );
-			}
-			else
-			{
-				this._fnScrollHorizontalRight( s.aoCache[i] );
-			}
-		}
-	},
-
-	/*
-	 * Function: _fnUpdateClones
-	 * Purpose:  Loop over the fixed elements for this table and call their cloning functions
-	 * Returns:  -
-	 * Inputs:   -
-	 */
-	_fnUpdateClones: function ( full )
-	{
-		var s = this.fnGetSettings();
-
-		if ( full ) {
-			// This is a little bit of a hack to force a full clone draw. When
-			// `full` is set to true, we want to reclone the source elements,
-			// regardless of the clone-on-draw settings
-			s.bInitComplete = false;
-		}
-
-		for ( var i=0, iLen=s.aoCache.length ; i<iLen ; i++ )
-		{
-			s.aoCache[i].fnClone.call( this, s.aoCache[i] );
-		}
-
-		if ( full ) {
-			s.bInitComplete = true;
-		}
-	},
-
-
-	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-	 * Scrolling functions
-	 */
-
-	/*
-	 * Function: _fnScrollHorizontalLeft
-	 * Purpose:  Update the positioning of the scrolling elements
-	 * Returns:  -
-	 * Inputs:   object:oCache - the cached values for this fixed element
-	 */
-	_fnScrollHorizontalRight: function ( oCache )
-	{
-		var
-			s = this.fnGetSettings(),
-			oMes = s.oMes,
-			oWin = FixedHeader.oWin,
-			oDoc = FixedHeader.oDoc,
-			nTable = oCache.nWrapper,
-			iFixedWidth = $(nTable).outerWidth();
-
-		if ( oWin.iScrollRight < oMes.iTableRight )
-		{
-			/* Fully right aligned */
-			this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft+oMes.iTableWidth-iFixedWidth)+"px", 'left', nTable.style );
-		}
-		else if ( oMes.iTableLeft < oDoc.iWidth-oWin.iScrollRight-iFixedWidth )
-		{
-			/* Middle */
-			this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop-oWin.iScrollTop)+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', (oWin.iWidth-iFixedWidth)+"px", 'left', nTable.style );
-		}
-		else
-		{
-			/* Fully left aligned */
-			this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
-		}
-	},
-
-	/*
-	 * Function: _fnScrollHorizontalLeft
-	 * Purpose:  Update the positioning of the scrolling elements
-	 * Returns:  -
-	 * Inputs:   object:oCache - the cached values for this fixed element
-	 */
-	_fnScrollHorizontalLeft: function ( oCache )
-	{
-		var
-			s = this.fnGetSettings(),
-			oMes = s.oMes,
-			oWin = FixedHeader.oWin,
-			oDoc = FixedHeader.oDoc,
-			nTable = oCache.nWrapper,
-			iCellWidth = $(nTable).outerWidth();
-
-		if ( oWin.iScrollLeft < oMes.iTableLeft )
-		{
-			/* Fully left align */
-			this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
-		}
-		else if ( oWin.iScrollLeft < oMes.iTableLeft+oMes.iTableWidth-iCellWidth )
-		{
-			this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop-oWin.iScrollTop)+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', "0px", 'left', nTable.style );
-		}
-		else
-		{
-			/* Fully right align */
-			this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft+oMes.iTableWidth-iCellWidth)+"px", 'left', nTable.style );
-		}
-	},
-
-	/*
-	 * Function: _fnScrollFixedFooter
-	 * Purpose:  Update the positioning of the scrolling elements
-	 * Returns:  -
-	 * Inputs:   object:oCache - the cached values for this fixed element
-	 */
-	_fnScrollFixedFooter: function ( oCache )
-	{
-		var
-			s = this.fnGetSettings(),
-			oMes = s.oMes,
-			oWin = FixedHeader.oWin,
-			oDoc = FixedHeader.oDoc,
-			nTable = oCache.nWrapper,
-			iTheadHeight = $("thead", s.nTable).outerHeight(),
-			iCellHeight = $(nTable).outerHeight();
-
-		if ( oWin.iScrollBottom < oMes.iTableBottom )
-		{
-			/* Below */
-			this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+oMes.iTableHeight-iCellHeight)+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
-		}
-		else if ( oWin.iScrollBottom < oMes.iTableBottom+oMes.iTableHeight-iCellHeight-iTheadHeight )
-		{
-			this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', (oWin.iHeight-iCellHeight)+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style );
-		}
-		else
-		{
-			/* Above */
-			this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iCellHeight)+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
-		}
-	},
-
-	/*
-	 * Function: _fnScrollFixedHeader
-	 * Purpose:  Update the positioning of the scrolling elements
-	 * Returns:  -
-	 * Inputs:   object:oCache - the cached values for this fixed element
-	 */
-	_fnScrollFixedHeader: function ( oCache )
-	{
-		var
-			s = this.fnGetSettings(),
-			oMes = s.oMes,
-			oWin = FixedHeader.oWin,
-			oDoc = FixedHeader.oDoc,
-			nTable = oCache.nWrapper,
-			iTbodyHeight = 0,
-			anTbodies = s.nTable.getElementsByTagName('tbody');
-
-		for (var i = 0; i < anTbodies.length; ++i) {
-			iTbodyHeight += anTbodies[i].offsetHeight;
-		}
-
-		if ( oMes.iTableTop > oWin.iScrollTop + s.oOffset.top )
-		{
-			/* Above the table */
-			this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
-		}
-		else if ( oWin.iScrollTop + s.oOffset.top > oMes.iTableTop+iTbodyHeight )
-		{
-			/* At the bottom of the table */
-			this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iTbodyHeight)+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
-		}
-		else
-		{
-			/* In the middle of the table */
-			this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
-			this._fnUpdateCache( oCache, 'sTop', s.oOffset.top+"px", 'top', nTable.style );
-			this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style );
-		}
-	},
-
-	/*
-	 * Function: _fnUpdateCache
-	 * Purpose:  Check the cache and update cache and value if needed
-	 * Returns:  -
-	 * Inputs:   object:oCache - local cache object
-	 *           string:sCache - cache property
-	 *           string:sSet - value to set
-	 *           string:sProperty - object property to set
-	 *           object:oObj - object to update
-	 */
-	_fnUpdateCache: function ( oCache, sCache, sSet, sProperty, oObj )
-	{
-		if ( oCache[sCache] != sSet )
-		{
-			oObj[sProperty] = sSet;
-			oCache[sCache] = sSet;
-		}
-	},
-
-
-
-	/**
-	 * Copy the classes of all child nodes from one element to another. This implies
-	 * that the two have identical structure - no error checking is performed to that
-	 * fact.
-	 *  @param {element} source Node to copy classes from
-	 *  @param {element} dest Node to copy classes too
-	 */
-	_fnClassUpdate: function ( source, dest )
-	{
-		var that = this;
-
-		if ( source.nodeName.toUpperCase() === "TR" || source.nodeName.toUpperCase() === "TH" ||
-			 source.nodeName.toUpperCase() === "TD" || source.nodeName.toUpperCase() === "SPAN" )
-		{
-			dest.className = source.className;
-		}
-
-		$(source).children().each( function (i) {
-			that._fnClassUpdate( $(source).children()[i], $(dest).children()[i] );
-		} );
-	},
-
-
-	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-	 * Cloning functions
-	 */
-
-	/*
-	 * Function: _fnCloneThead
-	 * Purpose:  Clone the thead element
-	 * Returns:  -
-	 * Inputs:   object:oCache - the cached values for this fixed element
-	 */
-	_fnCloneThead: function ( oCache )
-	{
-		var s = this.fnGetSettings();
-		var nTable = oCache.nNode;
-
-		if ( s.bInitComplete && !s.oCloneOnDraw.top )
-		{
-			this._fnClassUpdate( $('thead', s.nTable)[0], $('thead', nTable)[0] );
-			return;
-		}
-
-		/* Set the wrapper width to match that of the cloned table */
-		var iDtWidth = $(s.nTable).outerWidth();
-		oCache.nWrapper.style.width = iDtWidth+"px";
-		nTable.style.width = iDtWidth+"px";
-
-		/* Remove any children the cloned table has */
-		while ( nTable.childNodes.length > 0 )
-		{
-			$('thead th', nTable).unbind( 'click' );
-			nTable.removeChild( nTable.childNodes[0] );
-		}
-
-		/* Clone the DataTables header */
-		var nThead = $('thead', s.nTable).clone(true)[0];
-		nTable.appendChild( nThead );
-
-		/* Copy the widths across - apparently a clone isn't good enough for this */
-		var a = [];
-		var b = [];
-
-		$("thead>tr th", s.nTable).each( function (i) {
-			a.push( $(this).width() );
-		} );
-
-		$("thead>tr td", s.nTable).each( function (i) {
-			b.push( $(this).width() );
-		} );
-
-		$("thead>tr th", s.nTable).each( function (i) {
-			$("thead>tr th:eq("+i+")", nTable).width( a[i] );
-			$(this).width( a[i] );
-		} );
-
-		$("thead>tr td", s.nTable).each( function (i) {
-			$("thead>tr td:eq("+i+")", nTable).width( b[i] );
-			$(this).width( b[i] );
-		} );
-
-		// Stop DataTables 1.9 from putting a focus ring on the headers when
-		// clicked to sort
-		$('th.sorting, th.sorting_desc, th.sorting_asc', nTable).bind( 'click', function () {
-			this.blur();
-		} );
-	},
-
-	/*
-	 * Function: _fnCloneTfoot
-	 * Purpose:  Clone the tfoot element
-	 * Returns:  -
-	 * Inputs:   object:oCache - the cached values for this fixed element
-	 */
-	_fnCloneTfoot: function ( oCache )
-	{
-		var s = this.fnGetSettings();
-		var nTable = oCache.nNode;
-
-		/* Set the wrapper width to match that of the cloned table */
-		oCache.nWrapper.style.width = $(s.nTable).outerWidth()+"px";
-
-		/* Remove any children the cloned table has */
-		while ( nTable.childNodes.length > 0 )
-		{
-			nTable.removeChild( nTable.childNodes[0] );
-		}
-
-		/* Clone the DataTables footer */
-		var nTfoot = $('tfoot', s.nTable).clone(true)[0];
-		nTable.appendChild( nTfoot );
-
-		/* Copy the widths across - apparently a clone isn't good enough for this */
-		$("tfoot:eq(0)>tr th", s.nTable).each( function (i) {
-			$("tfoot:eq(0)>tr th:eq("+i+")", nTable).width( $(this).width() );
-		} );
-
-		$("tfoot:eq(0)>tr td", s.nTable).each( function (i) {
-			$("tfoot:eq(0)>tr td:eq("+i+")", nTable).width( $(this).width() );
-		} );
-	},
-
-	/*
-	 * Function: _fnCloneTLeft
-	 * Purpose:  Clone the left column(s)
-	 * Returns:  -
-	 * Inputs:   object:oCache - the cached values for this fixed element
-	 */
-	_fnCloneTLeft: function ( oCache )
-	{
-		var s = this.fnGetSettings();
-		var nTable = oCache.nNode;
-		var nBody = $('tbody', s.nTable)[0];
-
-		/* Remove any children the cloned table has */
-		while ( nTable.childNodes.length > 0 )
-		{
-			nTable.removeChild( nTable.childNodes[0] );
-		}
-
-		/* Is this the most efficient way to do this - it looks horrible... */
-		nTable.appendChild( $("thead", s.nTable).clone(true)[0] );
-		nTable.appendChild( $("tbody", s.nTable).clone(true)[0] );
-		if ( s.bFooter )
-		{
-			nTable.appendChild( $("tfoot", s.nTable).clone(true)[0] );
-		}
-
-		/* Remove unneeded cells */
-		var sSelector = 'gt(' + (oCache.iCells - 1) + ')';
-		$('thead tr', nTable).each( function (k) {
-			$('th:' + sSelector, this).remove();
-		} );
-
-		$('tfoot tr', nTable).each( function (k) {
-			$('th:' + sSelector, this).remove();
-		} );
-
-		$('tbody tr', nTable).each( function (k) {
-			$('td:' + sSelector, this).remove();
-		} );
-
-		this.fnEqualiseHeights( 'thead', nBody.parentNode, nTable );
-		this.fnEqualiseHeights( 'tbody', nBody.parentNode, nTable );
-		this.fnEqualiseHeights( 'tfoot', nBody.parentNode, nTable );
-
-		var iWidth = 0;
-		for (var i = 0; i < oCache.iCells; i++) {
-			iWidth += $('thead tr th:eq(' + i + ')', s.nTable).outerWidth();
-		}
-		nTable.style.width = iWidth+"px";
-		oCache.nWrapper.style.width = iWidth+"px";
-	},
-
-	/*
-	 * Function: _fnCloneTRight
-	 * Purpose:  Clone the right most column(s)
-	 * Returns:  -
-	 * Inputs:   object:oCache - the cached values for this fixed element
-	 */
-	_fnCloneTRight: function ( oCache )
-	{
-		var s = this.fnGetSettings();
-		var nBody = $('tbody', s.nTable)[0];
-		var nTable = oCache.nNode;
-		var iCols = $('tbody tr:eq(0) td', s.nTable).length;
-
-		/* Remove any children the cloned table has */
-		while ( nTable.childNodes.length > 0 )
-		{
-			nTable.removeChild( nTable.childNodes[0] );
-		}
-
-		/* Is this the most efficient way to do this - it looks horrible... */
-		nTable.appendChild( $("thead", s.nTable).clone(true)[0] );
-		nTable.appendChild( $("tbody", s.nTable).clone(true)[0] );
-		if ( s.bFooter )
-		{
-			nTable.appendChild( $("tfoot", s.nTable).clone(true)[0] );
-		}
-		$('thead tr th:lt('+(iCols-oCache.iCells)+')', nTable).remove();
-		$('tfoot tr th:lt('+(iCols-oCache.iCells)+')', nTable).remove();
-
-		/* Remove unneeded cells */
-		$('tbody tr', nTable).each( function (k) {
-			$('td:lt('+(iCols-oCache.iCells)+')', this).remove();
-		} );
-
-		this.fnEqualiseHeights( 'thead', nBody.parentNode, nTable );
-		this.fnEqualiseHeights( 'tbody', nBody.parentNode, nTable );
-		this.fnEqualiseHeights( 'tfoot', nBody.parentNode, nTable );
-
-		var iWidth = 0;
-		for (var i = 0; i < oCache.iCells; i++) {
-			iWidth += $('thead tr th:eq('+(iCols-1-i)+')', s.nTable).outerWidth();
-		}
-		nTable.style.width = iWidth+"px";
-		oCache.nWrapper.style.width = iWidth+"px";
-	},
-
-
-	/**
-	 * Equalise the heights of the rows in a given table node in a cross browser way. Note that this
-	 * is more or less lifted as is from FixedColumns
-	 *  @method  fnEqualiseHeights
-	 *  @returns void
-	 *  @param   {string} parent Node type - thead, tbody or tfoot
-	 *  @param   {element} original Original node to take the heights from
-	 *  @param   {element} clone Copy the heights to
-	 *  @private
-	 */
-	"fnEqualiseHeights": function ( parent, original, clone )
-	{
-		var that = this;
-		var originals = $(parent +' tr', original);
-		var height;
-
-		$(parent+' tr', clone).each( function (k) {
-			height = originals.eq( k ).css('height');
-
-			// This is nasty :-(. IE has a sub-pixel error even when setting
-			// the height below (the Firefox fix) which causes the fixed column
-			// to go out of alignment. Need to add a pixel before the assignment
-			// Can this be feature detected? Not sure how...
-			if ( navigator.appName == 'Microsoft Internet Explorer' ) {
-				height = parseInt( height, 10 ) + 1;
-			}
-
-			$(this).css( 'height', height );
-
-			// For Firefox to work, we need to also set the height of the
-			// original row, to the value that we read from it! Otherwise there
-			// is a sub-pixel rounding error
-			originals.eq( k ).css( 'height', height );
-		} );
-	}
-};
-
-
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- * Static properties and methods
- *   We use these for speed! This information is common to all instances of FixedHeader, so no
- * point if having them calculated and stored for each different instance.
- */
-
-/*
- * Variable: oWin
- * Purpose:  Store information about the window positioning
- * Scope:    FixedHeader
- */
-FixedHeader.oWin = {
-	"iScrollTop": 0,
-	"iScrollRight": 0,
-	"iScrollBottom": 0,
-	"iScrollLeft": 0,
-	"iHeight": 0,
-	"iWidth": 0
-};
-
-/*
- * Variable: oDoc
- * Purpose:  Store information about the document size
- * Scope:    FixedHeader
- */
-FixedHeader.oDoc = {
-	"iHeight": 0,
-	"iWidth": 0
-};
-
-/*
- * Variable: afnScroll
- * Purpose:  Array of functions that are to be used for the scrolling components
- * Scope:    FixedHeader
- */
-FixedHeader.afnScroll = [];
-
-/*
- * Function: fnMeasure
- * Purpose:  Update the measurements for the window and document
- * Returns:  -
- * Inputs:   -
- */
-FixedHeader.fnMeasure = function ()
-{
-	var
-		jqWin = $(window),
-		jqDoc = $(document),
-		oWin = FixedHeader.oWin,
-		oDoc = FixedHeader.oDoc;
-
-	oDoc.iHeight = jqDoc.height();
-	oDoc.iWidth = jqDoc.width();
-
-	oWin.iHeight = jqWin.height();
-	oWin.iWidth = jqWin.width();
-	oWin.iScrollTop = jqWin.scrollTop();
-	oWin.iScrollLeft = jqWin.scrollLeft();
-	oWin.iScrollRight = oDoc.iWidth - oWin.iScrollLeft - oWin.iWidth;
-	oWin.iScrollBottom = oDoc.iHeight - oWin.iScrollTop - oWin.iHeight;
-};
-
-
-FixedHeader.version = "2.1.2";
-
-
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- * Global processing
- */
-
-/*
- * Just one 'scroll' event handler in FixedHeader, which calls the required components. This is
- * done as an optimisation, to reduce calculation and proagation time
- */
-$(window).scroll( function () {
-	FixedHeader.fnMeasure();
-
-	for ( var i=0, iLen=FixedHeader.afnScroll.length ; i<iLen ; i++ ) {
-		FixedHeader.afnScroll[i]();
-	}
-} );
-
-
-$.fn.dataTable.FixedHeader = FixedHeader;
-$.fn.DataTable.FixedHeader = FixedHeader;
-
-
-return FixedHeader;
-}; // /factory
-
-
-// Define as an AMD module if possible
-if ( typeof define === 'function' && define.amd ) {
-	define( ['jquery', 'datatables'], factory );
-}
-else if ( typeof exports === 'object' ) {
-    // Node/CommonJS
-    factory( require('jquery'), require('datatables') );
-}
-else if ( jQuery && !jQuery.fn.dataTable.FixedHeader ) {
-	// Otherwise simply initialise as normal, stopping multiple evaluation
-	factory( jQuery, jQuery.fn.dataTable );
-}
-
-
-})(window, document);
diff --git a/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.min.js b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.min.js
new file mode 100644
index 00000000..e8d19608
--- /dev/null
+++ b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.min.js
@@ -0,0 +1,14 @@
+/*!
+ FixedHeader 3.0.0
+ ©2009-2015 SpryMedia Ltd - datatables.net/license
+*/
+(function(h,j){var g=function(e,i){var g=0,f=function(b,a){if(!(this instanceof f))throw"FixedHeader must be initialised with the 'new' keyword.";!0===a&&(a={});b=new i.Api(b);this.c=e.extend(!0,{},f.defaults,a);this.s={dt:b,position:{theadTop:0,tbodyTop:0,tfootTop:0,tfootBottom:0,width:0,left:0,tfootHeight:0,theadHeight:0,windowHeight:e(h).height(),visible:!0},headerMode:null,footerMode:null,namespace:".dtfc"+g++};this.dom={floatingHeader:null,thead:e(b.table().header()),tbody:e(b.table().body()),
+tfoot:e(b.table().footer()),header:{host:null,floating:null,placeholder:null},footer:{host:null,floating:null,placeholder:null}};this.dom.header.host=this.dom.thead.parent();this.dom.footer.host=this.dom.tfoot.parent();var c=b.settings()[0];if(c._fixedHeader)throw"FixedHeader already initialised on table "+c.nTable.id;c._fixedHeader=this;this._constructor()};f.prototype={update:function(){this._positions();this._scroll(!0)},_constructor:function(){var b=this,a=this.s.dt;e(h).on("scroll"+this.s.namespace,
+function(){b._scroll()}).on("resize"+this.s.namespace,function(){b.s.position.windowHeight=e(h).height();b._positions();b._scroll(!0)});a.on("column-reorder.dt.dtfc column-visibility.dt.dtfc",function(){b._positions();b._scroll(!0)}).on("draw.dtfc",function(){b._positions();b._scroll()});a.on("destroy.dtfc",function(){a.off(".dtfc");e(h).off(this.s.namespace)});this._positions();this._scroll()},_clone:function(b,a){var c=this.s.dt,d=this.dom[b],k="header"===b?this.dom.thead:this.dom.tfoot;!a&&d.floating?
+d.floating.removeClass("fixedHeader-floating fixedHeader-locked"):(d.floating&&(d.placeholder.remove(),d.floating.children().detach(),d.floating.remove()),d.floating=e(c.table().node().cloneNode(!1)).removeAttr("id").append(k).appendTo("body"),d.placeholder=k.clone(!1),d.host.append(d.placeholder),"footer"===b&&this._footerMatch(d.placeholder,d.floating))},_footerMatch:function(b,a){var c=function(d){var c=e(d,b).map(function(){return e(this).width()}).toArray();e(d,a).each(function(a){e(this).width(c[a])})};
+c("th");c("td")},_footerUnsize:function(){var b=this.dom.footer.floating;b&&e("th, td",b).css("width","")},_modeChange:function(b,a,c){var d=this.dom[a],e=this.s.position;"in-place"===b?(d.placeholder&&(d.placeholder.remove(),d.placeholder=null),d.host.append("header"===a?this.dom.thead:this.dom.tfoot),d.floating&&(d.floating.remove(),d.floating=null),"footer"===a&&this._footerUnsize()):"in"===b?(this._clone(a,c),d.floating.addClass("fixedHeader-floating").css("header"===a?"top":"bottom",this.c[a+
+"Offset"]).css("left",e.left+"px").css("width",e.width+"px"),"footer"===a&&d.floating.css("top","")):"below"===b?(this._clone(a,c),d.floating.addClass("fixedHeader-locked").css("top",e.tfootTop-e.theadHeight).css("left",e.left+"px").css("width",e.width+"px")):"above"===b&&(this._clone(a,c),d.floating.addClass("fixedHeader-locked").css("top",e.tbodyTop).css("left",e.left+"px").css("width",e.width+"px"));this.s[a+"Mode"]=b},_positions:function(){var b=this.s.dt.table(),a=this.s.position,c=this.dom,
+b=e(b.node()),d=b.children("thead"),f=b.children("tfoot"),c=c.tbody;a.visible=b.is(":visible");a.width=b.outerWidth();a.left=b.offset().left;a.theadTop=d.offset().top;a.tbodyTop=c.offset().top;a.theadHeight=a.tbodyTop-a.theadTop;f.length?(a.tfootTop=f.offset().top,a.tfootBottom=a.tfootTop+f.outerHeight(),a.tfootHeight=a.tfootBottom-a.tfootTop):(a.tfootTop=a.tbodyTop+c.outerHeight(),a.tfootBottom=a.tfootTop,a.tfootHeight=a.tfootTop)},_scroll:function(b){var a=e(j).scrollTop(),c=this.s.position,d;this.c.header&&
+(d=!c.visible||a<=c.theadTop-this.c.headerOffset?"in-place":a<=c.tfootTop-c.theadHeight-this.c.headerOffset?"in":"below",(b||d!==this.s.headerMode)&&this._modeChange(d,"header",b));this.c.footer&&this.dom.tfoot.length&&(a=!c.visible||a+c.windowHeight>=c.tfootBottom+this.c.footerOffset?"in-place":c.windowHeight+a>c.tbodyTop+c.tfootHeight+this.c.footerOffset?"in":"above",(b||a!==this.s.footerMode)&&this._modeChange(a,"footer",b))}};f.version="3.0.0";f.defaults={header:!0,footer:!1,headerOffset:0,footerOffset:0};
+e.fn.dataTable.FixedHeader=f;e.fn.DataTable.FixedHeader=f;e(j).on("init.dt.dtb",function(b,a){if("dt"===b.namespace){var c=a.oInit.fixedHeader||i.defaults.fixedHeader;c&&!a._buttons&&new f(a,c)}});i.Api.register("fixedHeader()",function(){});i.Api.register("fixedHeader.adjust()",function(){return this.iterator("table",function(b){(b=b._fixedHeader)&&b.update()})});return f};"function"===typeof define&&define.amd?define(["jquery","datatables"],g):"object"===typeof exports?g(require("jquery"),require("datatables")):
+jQuery&&!jQuery.fn.dataTable.FixedHeader&&g(jQuery,jQuery.fn.dataTable)})(window,document);
diff --git a/wqflask/wqflask/static/packages/bootstrap/css/bootstrap.css b/wqflask/wqflask/static/packages/bootstrap/css/bootstrap.css
index 4145e73f..461fd089 100755
--- a/wqflask/wqflask/static/packages/bootstrap/css/bootstrap.css
+++ b/wqflask/wqflask/static/packages/bootstrap/css/bootstrap.css
@@ -2072,8 +2072,8 @@ th {
   text-align: left;
 }
 .table {
-  width: 100%;
-  max-width: 100%;
+  //width: 100%;
+  //max-width: 100%;
   margin-bottom: 20px;
 }
 .table > thead > tr > th,
diff --git a/wqflask/wqflask/templates/correlation_matrix.html b/wqflask/wqflask/templates/correlation_matrix.html
index 403d2a98..edc2028f 100755
--- a/wqflask/wqflask/templates/correlation_matrix.html
+++ b/wqflask/wqflask/templates/correlation_matrix.html
@@ -1,76 +1,70 @@
-{% extends "base.html" %}

-{% block css %}

-    <link rel="stylesheet" type="text/css" href="/static/packages/jqplot/jquery.jqplot.min.css" />

-    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />

-    <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />

-    <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />

-    <link rel="stylesheet" type="text/css" href="/static/new/css/corr_matrix.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 %}

-    

-    {{ header("Correlation Matrix") }}

-

-   <div class="container">

-        <div id="chart"></div>

-<!--	<div class="row-fluid show-grid">

-            <div class="col-md-12"> Pearon's R </div>

-        </div>

-        <div class="row-fluid show-grid">

-            <div class="col-md-1 col-md-pull-11">

-                Spearman's Rho

-            </div>

-            <div class="col-md-11 col-md-push-1">

-                

-        	    <div class="table-responsive">

-            	    <table class="table">

-                	<th>

-                    	{% for key in corr_results %}

-                       	    <td>

-                                <b>{{ key }}</b>

-                    	    </td>

-                    	{% endfor %}

-                	</th>

-                	{% for key in corr_results %}

-                	<tr>

-                    	    <td><b>{{ key }}</b></td>

-                            {% for trait in corr_results[key] %}

-                            {% if corr_results[key][trait].sample_r != 1 %}

-                            <td><a target="_blank" href="corr_scatter_plot?dataset_1={{corr_results[key][trait].this_db}}&dataset_2={{corr_results[key][trait].target_db}}&trait_1={{corr_results[key][trait].this_trait}}&trait_2={{corr_results[key][trait].target_trait}}">{{ corr_results[key][trait].sample_r }}</a>

-                            <br>

-                            {{ corr_results[key][trait].num_overlap }}</td>

-                    

-                            {% else %}

-                            <td bgcolor="#E6E6E6"> 1 </td>

-                            {% endif %}

-                            {% endfor %}

-                        {% endfor %}

-                        </tr>

-                    </table>

-                    </div> 

-                      

-            </div>

-        </div>-->

-   </div>

-    

-{% endblock %}

-

-{% block js %}

-

-    <script>

-        js_data = {{ js_data | safe }}

-    </script>

-

-    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

-    <script type="text/javascript" src="/static/new/js_external/d3-tip.min.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>

-    <script type="text/javascript" src="/static/new/javascript/panelutil.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/new/javascript/corr_matrix.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_corr_matrix.js"></script>

-

-{% endblock %}

+{% extends "base.html" %}
+{% block css %}
+    <link rel="stylesheet" type="text/css" href="/static/packages/jqplot/jquery.jqplot.min.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/corr_matrix.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 %}
+    
+    {{ header("Correlation Matrix") }}
+
+   
+
+<table class="collap" border="1" cellpadding="5" cellspacing="1" width="100%">
+  <tbody>
+    <tr>
+      <td></td>
+      <td align="center" colspan="11">Spearman Rank Correlation (rho)</td>
+    </tr>
+    <tr>
+      <td align="center" rowspan="11" width="10">P e a r s o n &nbsp;&nbsp;&nbsp; r</td>
+      <td width="300"></td>
+      {% for trait in traits %}
+      <td align="center"><a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}">Trait{{ loop.index }}</a></td>
+      {% endfor %}
+    </tr>
+    {% for trait in traits %}
+    <tr>
+      <td><a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}">Trait {{ loop.index }}: {{ trait.dataset.name }}::{{ trait.name }}</a><div id="shortName_0" style="display:none">Symbol: {{ trait.symbol }} </div><div id="verboseName_0" style="display:none">{{ trait_symbol }} on Chr {{ trait.chr }} @ {{ trait.mb }} Mb</div><div id="verboseName2_0" style="display:none">{{ trait.description }}</div><div id="verboseName3_0" style="display:none">{{ trait.probe_target_description }}</div></td>
+      {% for result in corr_results[loop.index-1] %}
+      {% if result[0].name == trait.name %}
+      <td nowrap="ON" align="center"><a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font><em>n</em><br>{{ result[2] }}</font></a></td>
+      {% else %}
+      <td nowrap="ON" align="middle"><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>{{ '%0.3f' % result[1] }}<br>{{ result[2] }}</font></a></td>
+      {% endif %}
+      {% endfor %}
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+
+<!--
+<div class="container">
+  <div id="chart"></div>
+</div>
+-->
+
+{% endblock %}
+
+{% block js %}
+
+    <script>
+        js_data = {{ js_data | safe }}
+    </script>
+
+    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
+    <script type="text/javascript" src="/static/new/js_external/d3-tip.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/panelutil.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/corr_matrix.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_corr_matrix.js"></script>
+
+{% endblock %}
diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html
index c7e50a16..0a1839a1 100755
--- a/wqflask/wqflask/templates/gsearch_gene.html
+++ b/wqflask/wqflask/templates/gsearch_gene.html
@@ -26,7 +26,7 @@
 
             <br />
             <br />
-            <table class="table table-hover table-striped" id="trait_table">
+            <table width="2000px" class="table table-hover table-striped" id="trait_table">
                 <thead>
                     <tr>
                         <th style="width: 30px;"></th>
@@ -80,8 +80,6 @@
     <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.colReorder.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.fixedHeader.js"></script>
-    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
 	
@@ -156,23 +154,23 @@
             $('#trait_table').DataTable( {
                 "columns": [
                     { "type": "natural" },
-                    { "type": "natural", "width": "35%"  },
-                    { "type": "natural", "width": "15%"  },
+                    { "type": "natural" },
+                    { "type": "natural" },
                     { "type": "cust-txt" },
-                    { "type": "natural", "width": "12%"  },
-                    { "type": "natural", "width": "12%"  },
-                    { "type": "natural", "width": "12%"  },
-                    { "type": "natural", "width": "12%"  },
-                    { "type": "natural", "width": "12%"  },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
                     { "type": "natural", "width": "15%"  },
                     { "type": "natural" },
                     { "type": "natural" },
+                    { "type": "natural" },
                     { "type": "natural" }, 
                     { "type": "cust-txt" }
                 ],
                 "order": [[ 1, "asc" ]],
                 "sDom": "RZtir",
-                "autoWidth": true,
+                "autoWidth": false,
                 "bLengthChange": true,
                 "bDeferRender": true,
                 "scrollCollapse": false,
@@ -181,6 +179,7 @@
                 },
                 "paging": false
             } );
+
             console.timeEnd("Creating table");
 
         });
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index e1dcf76f..2527bebf 100755
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -25,7 +25,7 @@
             <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
             <br />
             <br />
-			<table class="table table-hover table-striped" id='trait_table'  style="float: left;">
+            <table class="table table-hover table-striped" id='trait_table'  style="float: left;">
                 <thead>
                     <tr>
                         <th style="width: 30px;"></th>
@@ -71,10 +71,8 @@
     
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.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.colResize2.js"></script>
     <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.js"></script>
-    <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.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/packages/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
 	
@@ -131,7 +129,7 @@
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
-                    { "type": "natural" },
+                    { "type": "natural", "width": "20%"},
                     { "type": "natural" },
                     { "type": "natural" },
                     { "type": "natural" },
@@ -139,13 +137,10 @@
                     { "type": "natural" }
                 ],
                 "order": [[ 1, "asc" ]],
-                "sDom": "RJtir",
-                "iDisplayLength": -1,
-                "autoWidth": true,
+                "sDom": "RZtir",
+                "autoWidth": false,
                 "bLengthChange": true,
                 "bDeferRender": true,
-                "bSortClasses": false,
-                "scrollY": "700px",
                 "scrollCollapse": false,
                 "colResize": {
                     "tableWidthFixed": false,