d169f120ae893c9124e4cf9b50182f4372a3f0d3
kate
  Tue Oct 25 17:27:16 2011 -0700
Checking in jquery floating table header plugin, and ENCODE data matrix implementations that now use it
diff --git src/hg/js/encodeChipMatrix.js src/hg/js/encodeChipMatrix.js
index 479caec..01900a3 100644
--- src/hg/js/encodeChipMatrix.js
+++ src/hg/js/encodeChipMatrix.js
@@ -3,54 +3,58 @@
 // Formatted: jsbeautify.py -j
 // Syntax checked: jslint indent:4, plusplus: true, continue: true, unparam: true, sloppy: true, browser: true */
 /*global $, encodeProject */
 
 $(function () {
     var dataType, server, requests = [
         // Requests to server API
             encodeProject.serverRequests.experiment,
         encodeProject.serverRequests.cellType,
         encodeProject.serverRequests.antibody];
 
     function tableOut(matrix, cellTiers, cellTypeHash, antibodyGroups, antibodyHash, targetHash) {
         // Create table where rows = cell types and columns are datatypes
         // create table and first row 2 rows (column title and column headers)
         var table, tableHeader, row, td;
+        var antibodyHeaderLabel = "Antibody Targets";
+        var cellHeaderLabel = "Cell Types";
 
-        table = $('<table>' + '<tr><td><td class="axisType" colspan=6>Antibody Targets</td></tr>' + '<tr id="columnHeaders"><td class="axisType">Cell Types</td></tr>');
+        table = $('<table id="matrixTable"><thead><tr id="headerLabelRow"><td></td><td id="antibodyHeaderLabel" class="axisType" colspan=6 title="Click to view information about all element types">' + antibodyHeaderLabel + '</td></tr>' + '<tr id="columnHeaders"><td id="cellHeaderLabel" class="axisType" title="Click to view information about all cell types"><a href="/cgi-bin/hgEncodeVocab?ra=encode/cv.ra&type=Cell+Line&organism=' + organism + '">' + cellHeaderLabel + '</td></tr></thead><tbody>');
         tableHeader = $('#columnHeaders', table);
         $.each(antibodyGroups, function (i, group) {
             tableHeader.append('<th class="groupType"><div class="verticalText">' + group.label + '</div></th>');
             $.each(group.targets, function (i, target) {
                 if (targetHash[target] === undefined) {
                     return true;
                 }
                 // prune out targets with no experiments
                 if (targetHash[target].count !== undefined) {
                     tableHeader.append('<th class="elementType"><div class="verticalText">' + target + '</div></th>');
                 }
             });
         });
         // add rows with cell type labels and matrix elements for indicating if
         //  there's an experiment 
         $.each(cellTiers, function (i, tier) {
             //skip bogus 4th tier (not my property ?)
             if (tier === undefined) {
                 return true;
             }
             // td or th here ?
             table.append($('<tr class="matrix"><th class="groupType">' + "Tier " + tier.term + '</th></td></tr>'));
+
+
             $.each(tier.cellTypes, function (i, cellType) {
                 if (!cellType) {
                     return true;
                 }
                 if (!matrix[cellType]) {
                     return true;
                 }
                 row = $('<tr><th class="elementType">' + cellType + '</th>');
 
                 $.each(antibodyGroups, function (i, group) {
                     // skip group header
                     row.append('<td></td>');
                     $.each(group.targets, function (i, target) {
                         // TODO: change this class to matrixElementType
                         //$(".cellType").click(matrixClickHandler);
@@ -75,31 +79,58 @@
                             td += target;
                             //td += '"><font color=#00994D>';
                             td += '"><font>';
                             td += matrix[cellType][target];
                             //td += ".....";
                             td += '</font></a>';
                             td += '</td>';
                         }
                         row.append(td);
                     });
                     table.append(row);
                 });
                 table.append(row);
             });
         });
+        table.append('</tbody>');
         $("body").append(table);
+
+        // use floating-table-header plugin
+        table.floatHeader({
+            cbFadeIn: function (header) {
+                // hide axis labels -- a bit tricky to do so
+                // as special handling needed for X axis label
+                $(".floatHeader #headerLabelRow").remove();
+                $(".floatHeader #cellHeaderLabel").html('');
+
+                // Note: user-defined callback requires 
+                // default actions from floatHeader plugin
+                // implementation (stop+fadeIn)
+                header.stop(true, true);
+                header.fadeIn(100);
+                //header.fadeIn(100);
+
+            }/*,
+            cbFadeOut: function (header) {
+                // show elements with class axisType
+                header.stop(true, true)
+                header.fadeOut(100);
+                $("#cellHeaderLabel").html(cellHeaderLabel);
+                $("#antibodyHeaderLabel").html(antibodyHeaderLabel);
+            }
+            */
+        });
     }
 
     function handleServerData(responses) {
         // Main actions, called when loading data from server is complete
         var experiments = responses[0],
             cellTypes = responses[1],
             antibodies = responses[2],
             antibodyGroups, antibodyHash = {},
             targetHash = {},
             cellTypeHash = {},
             antibody, target, cellTiers, cellType, matrix = {},
             organism, assembly, header;
 
         // variables passed in hidden fields
         organism = encodeChipMatrix_organism;