d56bc09614b5ad60ec9defcd02af1eabed9fabe3
kate
  Sat Oct 29 23:05:02 2011 -0700
1.  Add spinner while ajax data is loading  2. Clean up ChIP Matrix similarly to others
diff --git src/hg/js/encodeDataMatrix.js src/hg/js/encodeDataMatrix.js
index 96986d7..7d95848 100644
--- src/hg/js/encodeDataMatrix.js
+++ src/hg/js/encodeDataMatrix.js
@@ -3,56 +3,57 @@
 
  Formatted: jsbeautify.py -j
  Syntax checked: jslint indent:4, plusplus: true, continue: true, unparam: true, sloppy: true, browser: true
 */
 /*global $, encodeProject */
 
 $(function () {
     var requests = [
     // Requests to server API
         encodeProject.serverRequests.experiment, 
         encodeProject.serverRequests.dataType, 
         encodeProject.serverRequests.cellType];
 
     var dataTypeLabelHash = {}, dataTypeTermHash = {}, cellTypeHash = {};
     var dataType, cellType;
-    var organism, assembly, server;
+    var organism, assembly, server, header;
     var karyotype;
+    var spinner;
 
     function tableOut(matrix, cellTiers, dataGroups) {
         // create table with rows for each cell types and columns for each data type
         var table, tableHeader, row, td;
 
         // fill in column headers from dataTypes returned by server
         tableHeader = $('#columnHeaders');
         $.each(dataGroups, function (i, group) {
             tableHeader.append('<th class="groupType"><div class="verticalText">' + 
                                 group.label + '</div></th>');
             $.each(group.dataTypes, function (i, dataTypeLabel) {
                 dataType = dataTypeLabelHash[dataTypeLabel].term;
                 if (dataTypeLabelHash[dataTypeLabel].count !== undefined) {
                     // prune out datatypes with no experiments
                     tableHeader.append('<th class="elementType" title="' + 
                                         dataTypeLabelHash[dataTypeLabel].description + 
                                         '"><div class="verticalText">' + dataTypeLabel + 
                                         '</div></th>');
                 }
             });
         });
         // fill in matrix --
         // add rows with cell type labels (column 1) and cells for experiments
-        table = $("#matrixTable");
+        table = $('#matrixTable');
 
         // add sections for each Tier of cell type
         $.each(cellTiers, function (i, tier) {
             //skip bogus 4th tier (not my property ?)
             if (tier === undefined) {
                 return true;
             }
             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;
@@ -102,57 +103,59 @@
                                    ('&hgt_mdbVar1=dataType&hgt_mdbVal1=' + dataType +
                                    '&hgt_mdbVar2=cell&hgt_mdbVal2=' + cellType +
                                    '&hgt_mdbVar3=view&hgt_mdbVal3=Any');
                                 // TODO: open search window 
                                 //window.open(url, "searchWindow");
                                 window.location = url;
                             });
                         }
                         row.append(td);
                     });
                     table.append(row);
                 });
                 table.append(row);
             });
         });
-        table.append('</tbody>');
         $("body").append(table);
 
         // callback for floating table header feature
         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('');
                 $(".floatHeader #searchTypePanel").remove();
 
                 // Note: user-defined callback requires 
                 // default actions from floatHeader plugin
                 // implementation (stop+fadeIn)
                 header.stop(true, true);
                 header.fadeIn(100);
             }
         });
     }
 
     function handleServerData(responses) {
         // main actions, called when loading data from server is complete
         var experiments = responses[0], dataTypes = responses[1], cellTypes = responses[2];
         var matrix = {};
         var dataGroups, cellTiers, header;
 
+        hideLoadingImage(spinner);
+        $('#matrixTable').show();
+
         // variables from calling page
         organism = encodeDataMatrix_organism;
         assembly = encodeDataMatrix_assembly;
         header = encodeDataMatrix_pageHeader;
 
         $("#pageHeader").text(header);
         document.title = 'ENCODE ' + header;
 
         // set up structures for data types and their groups
         $.each(dataTypes, function (i, item) {
             dataTypeTermHash[item.term] = item;
             dataTypeLabelHash[item.label] = item;
         });
         // data type labels tucked into their tiers
         dataGroups = encodeProject.getDataGroups(dataTypes);
@@ -197,21 +200,25 @@
     }
 
     // initialize
 
     // get server from calling web page (intended for genome-preview)
     if ('encodeDataMatrix_server' in window) {
         server = encodeDataMatrix_server;
     } else {
         server = document.location.hostname;
         // or document.domain ?
     }
     encodeProject.setup({
         server: server
     });
 
+    // show only spinner until data is retrieved
+    $('#matrixTable').hide();
+    spinner = showLoadingImage("spinner");
+
     // add radio buttons for search type to specified div on page
     encodeProject.addSearchPanel('#searchTypePanel');
     
     // load data from server and do callback
     encodeProject.loadAllFromServer(requests, handleServerData);
 });